:root {
        --header-margin-top: 10px; /* Hier den Abstand nach oben einstellen */
    }

    /* Gesamter Header: Zwei Bereiche nebeneinander */
    .header {
        display: flex;
		width: 100%;
		max-width: 750px;      /* ➜ hier deine Wunschbreite einstellen */
        justify-content: space-between;
        align-items: center;
        padding: 10px;
        border-bottom: 1px solid #ccc; /* optional */
        margin-top: var(--header-margin-top);
    }

    /* Firmeninfo links */
    .company-info {
        display: flex;
        align-items: center;
    }

    .company-info img {
        margin-right: 10px;
    }

    .company-info h1,
    .company-info p {
        margin: 0;
        padding: 0;
    }

    /* Menücontainer rechts, der Button und Flagge enthält */
    .menu-container {
        display: flex;
        flex-direction: column;
		 padding-left: 0px;
        align-items: center;
    }


	.menu-container button {
		background: linear-gradient(to bottom, #66BB6A, #388E3C);
		box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.3),
					0px 2px 4px rgba(0, 0, 0, 0.2);
		transform: translateY(-1px); /* Leichter Lift-Effekt */
		border-radius: 40px;         /* Abgerundete Ecken */
		padding: 2px 10px;           /* etwas kompakter */
		font-size: 13px;             /* kleinere Schrift */
		font-weight: 500;
		color: #ffffff;
		cursor: pointer;
		font-family: Verdana, sans-serif;
		text-transform: lowercase;   /* alles klein … */
	}

	.menu-container button::first-letter {
		text-transform: uppercase;   /* … außer erster Buchstabe */
		font-size: 12px;             /* darf sogar minimal größer sein */
	}

	/* Container für die Flagge */
	.flag-container {
		margin-top: 5px;
		padding-left: 20px;
		text-align: center;
	}

	.flag-container img{
		height: 30px;
		width: 40px;
		transition:
			box-shadow 0.2s ease,
			transform 0.2s ease;
	}

	.flag-container img:hover{
		transform: scale(1.06);
		box-shadow:
			0 0 0 1px rgba(0,0,0,0.45),
			0 3px 6px rgba(0,0,0,0.20);
	}



		
	.welcome-text {
		font-size: 14px !important;  /* Wichtig, um andere CSS-Regeln zu überschreiben */
		font-family: Arial, sans-serif;
		font-weight: bold;
		font-style: italic; /* Macht den Text kursiv */
		color: #666 !important;  /* Dezentes Grau */
		margin: 5px 0px !important;  /* 10px oben/unten, 20px links/rechts */
		padding: 1px 1px !important;  /* Innenabstand: 5px oben/unten, 15px links/rechts */
	  
		border-radius: 20px;  /* Abgerundete Ecken für weicheres Design */
		display: inline-block;  /* Damit der Text nicht die ganze Breite einnimmt */
	}


	/* Nur das Nötigste für die Anordnung – deine bestehenden Styles bleiben unangetastet */
	.header .company-grid{
	  display:grid;
	  grid-template-columns:auto 1fr auto;   /* Logo | Info | Aktionen */
	  grid-template-areas:
		"logo info actions"
		"welcome welcome actions";
	  column-gap:10px;
	  align-items:start;
	}
	
	.header .company-grid .logo    { grid-area:logo; display:block; max-width:60px; height:auto; }
	.header .company-grid .info    { grid-area:info; }


	.header .company-grid .welcome{
	  grid-area: welcome;
	  margin-top: 4px;
	  font-family: Verdana, sans-serif;
	  font-size: 12px;
	  font-weight: 400;
	  color: #555;
	  font-style: normal;
	  letter-spacing: 0.2px;
	  text-shadow: none;
	  font-style: italic;
	}

	.header .company-grid .actions { grid-area:actions; display:flex; flex-direction:column; align-items:center; gap:6px; }
	/* Optional: etwas Luft unten drunter, damit dein Button/Flag nicht am Rand kleben */
	.header { padding-bottom:6px; }