/******************************************************************/
/*********A N P A S S U N G EN - A U F L Ö S U S N G E N *****************/
/******************************************************************/     
/* --- ANPASSUNG FÜR 1920x1080 (Full HD) --- */
/* Gilt für alle Bildschirme kleiner oder gleich 1920px Breite */



/* --- ANPASSUNG FÜR HANDYS (Mobile) --- */

	@media (max-width: 768px) { 
	
	/* ---------------------------------------------------------------- */
	/* ------------- Kopf */
	/* ---------------------------------------------------------------- */
	.wrapper { 
	height: 20vh; 
	display: flex;
	align-items: center;
	justify-content: center;
	height: 80px;
	background-color: #ffffff;
	}
	.center-box {
		position: relative;
		height: 80px;
		max-width: 1800px;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: flex-end;
		overflow: hidden;
	}
	.side-img {
		width: clamp(60px, 10vw, 150px);
		height: clamp(60px, 10vw, 150px);
		object-fit: cover;
	}

	.center-box_logos{
		/* position: relative;*/
		height: 180px;
		width: 8%;
		display: flex;
		justify-content: center;   
		align-items: center;
		overflow: hidden;
	}

	.center-box_logos img{
		/*ax-width: 60%;
		max-height: 60%;
		object-fit: contain; */
		max-width: 60%;
		max-height: 60%;
		object-fit: contain;
		display: block;
	}

	img#logo_noes {
		height: 150px;
		width: 150px;	
		margin-top: 80px;
		margin-left: 214px;
		border: none;
	}

	img#logo_hainburgertor {
		float: right;
		height: 150px;
		width: 150px;
		margin-top: 80px;
		margin-right: 140px;
		border: none;
	}

	/* ---------------------------------------------------------------- */
	/* ------------- Kopf */
	/* ---------------------------------------------------------------- */
	
		/* 1. Haupt-Container: Feste Höhe aufheben, damit Platz da ist */
    .informationsteil {
        height: auto !important;
        min-height: 100vh;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important; /* WICHTIG: Elemente auf volle Breite strecken */
        overflow: visible !important;
        padding: 10px;
        box-sizing: border-box;
    }
	.informationsteil h3 {
		margin: 0 0 10px 0;
		/*color: #ffffff; */
		font-size: 13px;
	}
    /* 2. Wrapper: Zwingend untereinander, kein Scrollen */
    .informationsteil-wrapper {
        display: flex !important;
        flex-direction: column !important; /* Das ist der Schlüsselbefehl */
        flex-wrap: nowrap !important;
        width: 100% !important;
        height: auto !important;
        gap: 15px !important;
        overflow: visible !important; /* Kein horizontales Scrollen/Quetschen */
        padding: 0 !important;
    }

    /* 3. Die Boxen selbst: Breite erzwingen, Schrumpfen verbieten */
    .informationsteil-wrapper .child-news {
        /* Breite erzwingen */
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important; /* Zwingt die Box, die volle Breite zu nehmen */
        
        /* Höhen-Anpassung */
        min-height: auto !important; /* Die 400px vom Desktop löschen */
        max-height: none !important;
        height: auto !important;
        
        /* Flex-Eigenschaften zurücksetzen */
        flex: 0 0 100% !important; /* flex-grow:0, flex-shrink:0, flex-basis:100% */
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
        
        /* Layout */
        display: block !important; /* Flex im Inneren ggf. blockieren, falls es stört */
        margin: 0 !important;
        box-sizing: border-box;
        padding: 15px !important;
    	}
	
	
		 /* --- Menü-Anpassung für Mobile --- */
		.parent-menue {
			height: auto !important;       		    /* Feste Höhe (50px/5vh) aufheben */
			min-height: 50px;              		        /* Nur als Mindesthöhe beibehalten */
			flex-direction: column !important; 	/* WICHTIG: Punkte untereinander anordnen */
			justify-content: center !important;    /* Vertikal zentrieren (optional, auch flex-start möglich) */
			align-items: stretch !important;      	/* Links auf volle Breite strecken */
			gap: 5px !important;           		      /* Abstand zwischen den Punkten verringern */
			padding: 10px 0 !important;    		/* Etwas Luft oben und unten */
			width: 100% !important;
			box-sizing: border-box;
		}

		.parent-menue a {
			display: block !important;     		/* Link als Block darstellen (füllt die Breite) */
			width: 100% !important;        		/* Volle Breite nutzen */
			text-align: center !important; 		/* Text zentrieren (wirkt auf Mobile oft besser) */
			font-size: 14px !important;    		/* Schrift größer für bessere Lesbarkeit/Touch */
			line-height: 1.5 !important;   		/* Angenehmerer Zeilenabstand */
			padding: 1px 0 !important;   		/* Größerer Klickbereich (Touch-Friendly) */
			margin: 0 !important;		
			box-sizing: border-box;
			
			/* Farben und Stil beibehalten */
			font-weight: bold;
			color: #ffffff;
			text-decoration: none;
		}

		.parent-menue a:hover {
			text-decoration: none;
			font-weight: 600;
			color: #ffaa00;
			background-color: rgba(255, 255, 255, 0.1); /* Leichter Hintergrund beim Hover für Feedback */
		}
		.link_container {
		  width: 100%;
		  /*display: flex; */
		  flex-wrap: wrap;
		  gap: 15px;
		  padding: 10px 0;
		  box-sizing: border-box;
		  background-color: #3168b2;
		  font-size: 11px;
		}
		.child_link_container {
			display: flex;
			align-items: center;
			gap: 8px;
			font-size: 14px;
			flex: 1 1 auto;
			min-width: 150px;
			width: 100%;
			margin-left:70px;
		}
		/* --------------------------------------------------------------------------------------------- */
		/* -------------------------------------- Termine ---------------------------------------------- */
		/* --------------------------------------------------------------------------------------------- */
		.wrapper-box {
            flex-direction: column; /* Untereinander auf Tablet/Handy */
			width: 100%;
			min-width: auto;
			max-width: 100%;
			height: auto;
			min-height: auto;
			max-height: none;
			flex: 0 0 auto;
			display: flex;
			padding: 15px;
			/*! flex-wrap: wrap; */ /* Ermöglicht Umbruch auf Mobile */
			gap: 20px;
			max-width: 1900px;
			
			margin-left:10px;
			background-color:white;
			
			border-radius: 1px;
			
			box-shadow: 5px 5px 10px #0c32a5;			
        }
		/* Linke Seite: Kalender */
		.calendar-section {
			flex: 2;
			width: 100%;
			min-width: auto;
			max-width: 100%;
			height: auto;
			min-height: auto;            
			max-height: none;            
			flex: 0 0 auto;
			
		}	
		
		.details-section {
			/* Breite anpassen: Volle Breite des Containers nutzen */
			width: 100% !important;
			min-width: auto !important;  /* Die 280px vom Desktop aufheben */
			max-width: 100% !important;  /* Die 450px Begrenzung aufheben */
        
			/* Höhe anpassen: Mit Inhalt mitwachsen */
			height: auto !important;     /* Feste Höhe entfernen, falls vorhanden */
			min-height: auto;            /* Kein Mindesthöhe-Zwang */
			max-height: none;            /* Kein Deckel nach oben */
			flex: 0 0 auto !important;   /* Nicht strecken, nicht schrumpfen, nur so hoch wie Inhalt */
        
			/* Layout & Optik beibehalten */
			display: flex !important;
			flex-direction: column;      /* Inhalt untereinander (bereits default, aber zur Sicherheit) */
			padding: 15px !important;    /* Etwas weniger Padding auf kleinem Screen für mehr Platz */
			border-radius: 8px;
			background: #f8f9fa;
			border: 1px solid var(--border);
			box-sizing: border-box;      /* Wichtig: Padding zählt zur Breite dazu */
			margin-bottom: 15px;         /* Abstand zu folgenden Elementen */
		}
		.weekdays {
			font-size: 9px !important; /* Größe anpassen (z.B. 12px statt Standard 14px/16px) */
			line-height: 1.2; 
		}
		select, input[type="number"] {
			padding: 8px 12px;
			border: 1px solid var(--border);
			border-radius: 4px;
			font-size: 9px;
			font-weight: bolder;
			background: #fff;
		}
		.day-cell {
			min-width:auto;
			max-width:44px;
			
			min-height: 80px; /* Etwas kompakter auf Mobile */
		}
		.controls {
			flex-direction: column;
			align-items: stretch;
			gap:6px;
			margin-bottom:14px;
		}
		button.btn-apply { width: 100%; }
		
		/* --------------------------------------------------------------------------------------------- */	
		/* ------------------------------- A N P A S S U N G  T E A M ------------------------------- */
		/* --------------------------------------------------------------------------------------------- */
		.child-team {
			
			width: 100% !important;
			min-width: auto !important;  /* Die 280px vom Desktop aufheben */
			max-width: 100% !important;  /* Die 450px Begrenzung aufheben */
        
			/* Höhe anpassen: Mit Inhalt mitwachsen */
			height: auto !important;     /* Feste Höhe entfernen, falls vorhanden */
			min-height: auto;            /* Kein Mindesthöhe-Zwang */
			max-height: none;            /* Kein Deckel nach oben */
			flex: 0 0 auto !important;   /* Nicht strecken, nicht schrumpfen, nur so hoch wie Inhalt */
			
			background-color: #ffffff;
			border: 0.5px solid #333;
			box-shadow: 5px 5px 10px #b1b1b1;
			flex-shrink: 0;
			box-sizing: border-box;
			padding: 20px;
			margin-top: 25px;
			justify-content: center;
			max-width: 350px;
		}
		.child-team h3 {
    		margin: 0 0 10px 0;
		    font-size: 22px;
		    color: #000000;
		    font-weight: 400;
		}
		
		
		
		/* --------------------------------------------------------------------------------------------- */	
		/* ------------------------- A N P A S S U N G  I M P R E S S U M -------------------------- */
		/* --------------------------------------------------------------------------------------------- */
		.informationsteil-wrapper_impressum {
			width: 100%;
			min-width:auto;
			max-width:100%;
			height: auto;        /* Höhe flexibel lassen, wenn Inhalt lang wird */
			max-height: none; 
			min-height:auto;  
			display: flex;
			flex-direction: column; /* Boxen untereinander */
			flex: 1;
			gap: 15px;
			height: 86%;
			overflow-x: hidden;
			overflow-y: auto;
			padding-bottom: 10px;			
        }
		.child-impressum {
			width: 100%;         /* Volle Breite des Containers nutzen */
			max-width: 100%;     /* Verhindert Überlauf */
			height: auto;        /* Höhe automatisch anpassen, falls Inhalt wächst */
			min-height: 200px;   /* Optionale Mindesthöhe */
			box-shadow: 2px 2px 5px rgba(0,0,0,0.2); /* Optional: Schatten für Mobile etwas dezenter */
			background-color: #ffffff;
			border: 0.5px solid #333;
			flex-shrink: 0;
			box-sizing: border-box;
			padding: 15px;
		}
		/* Child Überschrift */
		.child-impressum h2 {
			margin: 0 0 10px 0;
			font-size: 22px;
		}
		/* Parent Überschrift */
		.child-impressum  h3 {
			font-size: 18px;
			color:#000000;
		}
		/* Child Text */
		.child-impressum p {
			margin: 0;
			font-size: 14px;
			line-height: 1.3;
		}
		/* ------------------------------- */	
		/* ------------------------------- */
		/* ------------------------------- */
		.details-section {
			border-left: none;
			border-top: 1px solid var(--border);
			min-height: 200px;
		}
		.day-cell {
			min-height: 80px; /* Etwas kompakter auf Mobile */
		}
		.controls {
			flex-direction: column;
			align-items: stretch;
		}
		button.btn-apply { width: 100%; }
		
		/* -------------------------------------------------------------------------------- */
		/* --------------------------------- Ortsgruppen -------------------------------- */
		/* -------------------------------------------------------------------------------- */
		
		.wrapper-box-ortsgruppen {
        flex-direction: column; /* Ändert die Richtung von nebeneinander auf untereinander */
        height: auto;           /* Hebt die feste Höhe auf, damit der Inhalt wachsen kann */
        max-height: none;       /* Entfernt die maximale Höhenbeschränkung */
        overflow-y: auto;       /* Ermöglicht Scrollen, falls der Inhalt lang wird */
        margin-left: 0;         /* Optional: Rand auf Mobile anpassen */
        padding: 15px;          /* Optional: Etwas weniger Padding auf kleinen Screens */
    }

    .ortsgruppen-left-box {
        width: 100%;            /* Linke Box nimmt volle Breite ein */
        border-right: none;     /* Entfernt den rechten Trennstrich, da Boxen nun übereinander sind */
        border-bottom: 1px solid #ddd; /* Optional: Trennstrich jetzt unten einfügen */
        padding-right: 0;       /* Reset des rechten Paddings */
        margin-bottom: 20px;    /* Abstand zur nächsten Box */
        max-height: 250px;
    }

    .ortsgruppen-right-box-section {
        max-width: 100%;        /* Rechte Box darf jetzt auch die volle Breite nutzen */
        min-width: auto;        /* Reset der Mindestbreite */
        margin-top: 0;          /* Reset des negativen Margins */
    }
    
    /* Optional: Bildanpassung auf Mobile, damit es nicht zu breit wird */
    .ortsgruppen-right-box-section img {
        max-width: 100%;
        margin: 0 0 15px 0;
    }

	.contact-card {
        flex-direction: column; /* Bild oben, Text darunter */
        min-height: auto;       /* Feste 400px Höhe aufheben für Mobile */
        height: auto;
        margin-top: 5px;
    }

    /* 2. Das Passfoto anpassen */
    .contact-card-passfoto, 
    .ortsgruppen-right-box-section img {
    	max-width: 162px; 
     min-width: 152px; 
      height: auto;   	
       
        margin: 0 0 15px 0;     /* Abstand nur nach unten, nicht rechts */
        display: block;
        /* Zentrieren des Bildes optional */
        margin-left: auto;
        margin-right: auto;
    }

    /* 3. Die Detail-Box (contact-card-detail) anpassen */
    .contact-card-detail {
        width: 100%;            /* Volle Breite nutzen */
        min-height: auto;       /* Feste 400px Höhe aufheben */
        margin-top: 10px;
        padding: 10px;
        box-sizing: border-box; /* Verhindert, dass Padding die Breite sprengt */
    }

    /* 4. Der dynamische Inhalt (kontakt-details) fließt normal untereinander */
    #kontakt-details {
        width: 100%;
        margin-top: 10px;
    }
    
    /* Optional: Schriftgrößen auf Mobile etwas anpassen für bessere Lesbarkeit */
    .ortsgruppen-right-box-section h3,
    .ortsgruppen-right-box-section h4 {
        font-size: 1.2rem; /* Etwas kleiner als Desktop */
        color: #000000;
    }	
    
    /* --------------------------------------------------------------------------------- */
    /* ---------------------- Intern login --------------------------------------------- */
    /* --------------------------------------------------------------------------------- */
    .informationsteil-wrapper_login {
    flex-direction: column; /* Elemente untereinander statt nebeneinander */
    width: 100%;            /* Volle Breite nutzen statt fixer 449px */
    max-width: 100%;        /* Sicherheitshalber maximales Limit */
    box-sizing: border-box; /* Stellt sicher, dass Padding die Breite nicht sprengt */
    overflow-x: hidden;     /* Horizontales Scrollen auf Mobile oft unerwünscht */
  }

  /* Optional: Falls Sie im Wrapper weitere Kindelemente haben, 
     die nun auch die volle Breite einnehmen sollen: */
  .informationsteil-wrapper_login > * {
    width: 100%; 
  }

		
		
}
/******************************************************************/
/*********                                           **************/  
/******************************************************************/    
@media (min-width: 769px) and (max-width: 1440px) {
	
	/* ---------------------------------------------------------------- */
	/* ------------- Kopf */
	/* ---------------------------------------------------------------- */
	.wrapper { 
	height: 20vh; 
	display: flex;
	align-items: center;
	justify-content: center;
	height: 80px;
	background-color: #ffffff;
	}
	.center-box {
		position: relative;
		height: 80px;
		max-width: 1800px;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: flex-end;
		overflow: hidden;
	}
	.side-img {
		width: clamp(60px, 10vw, 150px);
		height: clamp(60px, 10vw, 150px);
		object-fit: cover;
	}

	.center-box_logos{
		/* position: relative;*/
		height: 180px;
		width: 8%;
		display: flex;
		justify-content: center;   
		align-items: center;
		overflow: hidden;
	}

	.center-box_logos img{
		/*ax-width: 60%;
		max-height: 60%;
		object-fit: contain; */
		max-width: 60%;
		max-height: 60%;
		object-fit: contain;
		display: block;
	}

	img#logo_noes {
		height: 150px;
		width: 150px;	
		margin-top: 80px;
		margin-left: 214px;
		border: none;
	}

	img#logo_hainburgertor {
		float: right;
		height: 150px;
		width: 150px;
		margin-top: 80px;
		margin-right: 140px;
		border: none;
	}

	/* ---------------------------------------------------------------- */
	/* ------------- Kopf */
	/* ---------------------------------------------------------------- */
	
		/* 1. Haupt-Container: Feste Höhe aufheben, damit Platz da ist */
    .informationsteil {
        height: auto !important;
        min-height: 100vh;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important; /* WICHTIG: Elemente auf volle Breite strecken */
        overflow: visible !important;
        padding: 10px;
        box-sizing: border-box;
    }
	.informationsteil h3 {
		margin: 0 0 10px 0;
		/*color: #ffffff; */
		font-size: 13px;
	}
    /* 2. Wrapper: Zwingend untereinander, kein Scrollen */
    .informationsteil-wrapper {
        display: flex !important;
        flex-direction: column !important; /* Das ist der Schlüsselbefehl */
        flex-wrap: nowrap !important;
        width: 100% !important;
        height: auto !important;
        gap: 15px !important;
        overflow: visible !important; /* Kein horizontales Scrollen/Quetschen */
        padding: 0 !important;
    }

    /* 3. Die Boxen selbst: Breite erzwingen, Schrumpfen verbieten */
    .informationsteil-wrapper .child-news {
        /* Breite erzwingen */
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important; /* Zwingt die Box, die volle Breite zu nehmen */
        
        /* Höhen-Anpassung */
        min-height: auto !important; /* Die 400px vom Desktop löschen */
        max-height: none !important;
        height: auto !important;
        
        /* Flex-Eigenschaften zurücksetzen */
        flex: 0 0 100% !important; /* flex-grow:0, flex-shrink:0, flex-basis:100% */
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
        
        /* Layout */
        display: block !important; /* Flex im Inneren ggf. blockieren, falls es stört */
        margin: 0 !important;
        box-sizing: border-box;
        padding: 15px !important;
    	}
	
	
		 /* --- Menü-Anpassung für Mobile --- */
		.parent-menue {
			height: auto !important;       		    /* Feste Höhe (50px/5vh) aufheben */
			min-height: 50px;              		        /* Nur als Mindesthöhe beibehalten */
			flex-direction: column !important; 	/* WICHTIG: Punkte untereinander anordnen */
			justify-content: center !important;    /* Vertikal zentrieren (optional, auch flex-start möglich) */
			align-items: stretch !important;      	/* Links auf volle Breite strecken */
			gap: 5px !important;           		      /* Abstand zwischen den Punkten verringern */
			padding: 10px 0 !important;    		/* Etwas Luft oben und unten */
			width: 100% !important;
			box-sizing: border-box;
		}

		.parent-menue a {
			display: block !important;     		/* Link als Block darstellen (füllt die Breite) */
			width: 100% !important;        		/* Volle Breite nutzen */
			text-align: center !important; 		/* Text zentrieren (wirkt auf Mobile oft besser) */
			font-size: 14px !important;    		/* Schrift größer für bessere Lesbarkeit/Touch */
			line-height: 1.5 !important;   		/* Angenehmerer Zeilenabstand */
			padding: 1px 0 !important;   		/* Größerer Klickbereich (Touch-Friendly) */
			margin: 0 !important;		
			box-sizing: border-box;
			
			/* Farben und Stil beibehalten */
			font-weight: bold;
			color: #ffffff;
			text-decoration: none;
		}

		.parent-menue a:hover {
			text-decoration: none;
			font-weight: 600;
			color: #ffaa00;
			background-color: rgba(255, 255, 255, 0.1); /* Leichter Hintergrund beim Hover für Feedback */
		}
		.link_container {
		  width: 100%;
		  /*display: flex; */
		  flex-wrap: wrap;
		  gap: 15px;
		  padding: 10px 0;
		  box-sizing: border-box;
		  background-color: #3168b2;
		  font-size: 11px;
		}
		.child_link_container {
			display: flex;
			align-items: center;
			gap: 8px;
			font-size: 14px;
			flex: 1 1 auto;
			min-width: 150px;
			width: 100%;
			margin-left:70px;
		}
		/* --------------------------------------------------------------------------------------------- */
		/* -------------------------------------- Termine ---------------------------------------------- */
		/* --------------------------------------------------------------------------------------------- */
		.wrapper-box {
            flex-direction: column; /* Untereinander auf Tablet/Handy */
			width: 100%;
			min-width: auto;
			max-width: 100%;
			height: auto;
			min-height: auto;
			max-height: none;
			flex: 0 0 auto;
			display: flex;
			padding: 15px;
			/*! flex-wrap: wrap; */ /* Ermöglicht Umbruch auf Mobile */
			gap: 20px;
			max-width: 1900px;
			
			margin-left:10px;
			background-color:white;
			
			border-radius: 1px;
			
			box-shadow: 5px 5px 10px #0c32a5;			
        }
		/* Linke Seite: Kalender */
		.calendar-section {
			flex: 2;
			width: 100%;
			min-width: auto;
			max-width: 100%;
			height: auto;
			min-height: auto;            
			max-height: none;            
			flex: 0 0 auto;
			
		}	
		
		.details-section {
			/* Breite anpassen: Volle Breite des Containers nutzen */
			width: 100% !important;
			min-width: auto !important;  /* Die 280px vom Desktop aufheben */
			max-width: 100% !important;  /* Die 450px Begrenzung aufheben */
        
			/* Höhe anpassen: Mit Inhalt mitwachsen */
			height: auto !important;     /* Feste Höhe entfernen, falls vorhanden */
			min-height: auto;            /* Kein Mindesthöhe-Zwang */
			max-height: none;            /* Kein Deckel nach oben */
			flex: 0 0 auto !important;   /* Nicht strecken, nicht schrumpfen, nur so hoch wie Inhalt */
        
			/* Layout & Optik beibehalten */
			display: flex !important;
			flex-direction: column;      /* Inhalt untereinander (bereits default, aber zur Sicherheit) */
			padding: 15px !important;    /* Etwas weniger Padding auf kleinem Screen für mehr Platz */
			border-radius: 8px;
			background: #f8f9fa;
			border: 1px solid var(--border);
			box-sizing: border-box;      /* Wichtig: Padding zählt zur Breite dazu */
			margin-bottom: 15px;         /* Abstand zu folgenden Elementen */
		}
		.weekdays {
			font-size: 9px !important; /* Größe anpassen (z.B. 12px statt Standard 14px/16px) */
			line-height: 1.2; 
		}
		select, input[type="number"] {
			padding: 8px 12px;
			border: 1px solid var(--border);
			border-radius: 4px;
			font-size: 9px;
			font-weight: bolder;
			background: #fff;
		}
		.day-cell {
			min-width:auto;
			max-width:44px;
			
			min-height: 80px; /* Etwas kompakter auf Mobile */
		}
		.controls {
			flex-direction: column;
			align-items: stretch;
			gap:6px;
			margin-bottom:14px;
		}
		button.btn-apply { width: 100%; }
		
		/* --------------------------------------------------------------------------------------------- */	
		/* ------------------------------- A N P A S S U N G  T E A M ------------------------------- */
		/* --------------------------------------------------------------------------------------------- */
		.child-team {
			
			width: 100% !important;
			min-width: auto !important;  /* Die 280px vom Desktop aufheben */
			max-width: 100% !important;  /* Die 450px Begrenzung aufheben */
        
			/* Höhe anpassen: Mit Inhalt mitwachsen */
			height: auto !important;     /* Feste Höhe entfernen, falls vorhanden */
			min-height: auto;            /* Kein Mindesthöhe-Zwang */
			max-height: none;            /* Kein Deckel nach oben */
			flex: 0 0 auto !important;   /* Nicht strecken, nicht schrumpfen, nur so hoch wie Inhalt */
			
			background-color: #ffffff;
			border: 0.5px solid #333;
			box-shadow: 5px 5px 10px #b1b1b1;
			flex-shrink: 0;
			box-sizing: border-box;
			padding: 20px;
			margin-top: 25px;
			justify-content: center;
			max-width: 350px;
		}
		.child-team h3 {
    		margin: 0 0 10px 0;
		    font-size: 22px;
		    color: #000000;
		    font-weight: 400;
		}
		
		
		
		/* --------------------------------------------------------------------------------------------- */	
		/* ------------------------- A N P A S S U N G  I M P R E S S U M -------------------------- */
		/* --------------------------------------------------------------------------------------------- */
		.informationsteil-wrapper_impressum {
			width: 100%;
			min-width:auto;
			max-width:100%;
			height: auto;        /* Höhe flexibel lassen, wenn Inhalt lang wird */
			max-height: none; 
			min-height:auto;  
			display: flex;
			flex-direction: column; /* Boxen untereinander */
			flex: 1;
			gap: 15px;
			height: 86%;
			overflow-x: hidden;
			overflow-y: auto;
			padding-bottom: 10px;			
        }
		.child-impressum {
			width: 100%;         /* Volle Breite des Containers nutzen */
			max-width: 100%;     /* Verhindert Überlauf */
			height: auto;        /* Höhe automatisch anpassen, falls Inhalt wächst */
			min-height: 200px;   /* Optionale Mindesthöhe */
			box-shadow: 2px 2px 5px rgba(0,0,0,0.2); /* Optional: Schatten für Mobile etwas dezenter */
			background-color: #ffffff;
			border: 0.5px solid #333;
			flex-shrink: 0;
			box-sizing: border-box;
			padding: 15px;
		}
		/* Child Überschrift */
		.child-impressum h2 {
			margin: 0 0 10px 0;
			font-size: 22px;
		}
		/* Parent Überschrift */
		.child-impressum  h3 {
			font-size: 18px;
			color:#000000;
		}
		/* Child Text */
		.child-impressum p {
			margin: 0;
			font-size: 14px;
			line-height: 1.3;
		}
		/* ------------------------------- */	
		/* ------------------------------- */
		/* ------------------------------- */
		.details-section {
			border-left: none;
			border-top: 1px solid var(--border);
			min-height: 200px;
		}
		.day-cell {
			min-height: 80px; /* Etwas kompakter auf Mobile */
		}
		.controls {
			flex-direction: column;
			align-items: stretch;
		}
		button.btn-apply { width: 100%; }
		
		/* -------------------------------------------------------------------------------- */
		/* --------------------------------- Ortsgruppen -------------------------------- */
		/* -------------------------------------------------------------------------------- */
		
		.wrapper-box-ortsgruppen {
        flex-direction: column; /* Ändert die Richtung von nebeneinander auf untereinander */
        height: auto;           /* Hebt die feste Höhe auf, damit der Inhalt wachsen kann */
        max-height: none;       /* Entfernt die maximale Höhenbeschränkung */
        overflow-y: auto;       /* Ermöglicht Scrollen, falls der Inhalt lang wird */
        margin-left: 0;         /* Optional: Rand auf Mobile anpassen */
        padding: 15px;          /* Optional: Etwas weniger Padding auf kleinen Screens */
    }

    .ortsgruppen-left-box {
        width: 100%;            /* Linke Box nimmt volle Breite ein */
        border-right: none;     /* Entfernt den rechten Trennstrich, da Boxen nun übereinander sind */
        border-bottom: 1px solid #ddd; /* Optional: Trennstrich jetzt unten einfügen */
        padding-right: 0;       /* Reset des rechten Paddings */
        margin-bottom: 20px;    /* Abstand zur nächsten Box */
        max-height: 250px;
    }

    .ortsgruppen-right-box-section {
        max-width: 100%;        /* Rechte Box darf jetzt auch die volle Breite nutzen */
        min-width: auto;        /* Reset der Mindestbreite */
        margin-top: 0;          /* Reset des negativen Margins */
    }
    
    /* Optional: Bildanpassung auf Mobile, damit es nicht zu breit wird */
    .ortsgruppen-right-box-section img {
        max-width: 100%;
        margin: 0 0 15px 0;
    }

	.contact-card {
        flex-direction: column; /* Bild oben, Text darunter */
        min-height: auto;       /* Feste 400px Höhe aufheben für Mobile */
        height: auto;
        margin-top: 5px;
    }

    /* 2. Das Passfoto anpassen */
    .contact-card-passfoto, 
    .ortsgruppen-right-box-section img {
    	max-width: 162px; 
     min-width: 152px; 
      height: auto;   	
       
        margin: 0 0 15px 0;     /* Abstand nur nach unten, nicht rechts */
        display: block;
        /* Zentrieren des Bildes optional */
        margin-left: auto;
        margin-right: auto;
    }

    /* 3. Die Detail-Box (contact-card-detail) anpassen */
    .contact-card-detail {
        width: 100%;            /* Volle Breite nutzen */
        min-height: auto;       /* Feste 400px Höhe aufheben */
        margin-top: 10px;
        padding: 10px;
        box-sizing: border-box; /* Verhindert, dass Padding die Breite sprengt */
    }

    /* 4. Der dynamische Inhalt (kontakt-details) fließt normal untereinander */
    #kontakt-details {
        width: 100%;
        margin-top: 10px;
    }
    
    /* Optional: Schriftgrößen auf Mobile etwas anpassen für bessere Lesbarkeit */
    .ortsgruppen-right-box-section h3,
    .ortsgruppen-right-box-section h4 {
        font-size: 1.2rem; /* Etwas kleiner als Desktop */
        color: #000000;
    }	
		
}