/* CSS-Themes */
:root {
	--mainColor: #AF9F96;
	--greenDark: #E7E2DD;      
	--sandDark: #8C6E61;
	--transition: all 0.3s ease;
    --text: #222222;
    --font-body: 'Montserrat';
}


/* Fonts */
@font-face {
	font-family: 'Montserrat';
	font-display: swap;
    font-style: normal;
	src: url('../fonts/Montserrat-VariableFont_wght.ttf') format('truetype');
}
@font-face {
	font-family: 'Montserrat';
	font-display: swap;
    font-style: italic;
	src: url('../fonts/Montserrat-Italic-VariableFont_wght.ttf') format('truetype');
}




/* Global Reset */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0; 
    padding: 0;     
}

a {
    text-decoration: none;
}


/* Basis Styling */
html{
    scroll-behavior: smooth;
}
 
html, body{
    overflow-x: hidden;
}

body{
    min-height: 100vh;
    min-height: 100dvh;
    width: 100%;
    line-height: 1.5; 
    color: var(--text); 
	font-family: Montserrat, sans-serif;
	font-size: 1.0rem; 
	background-attachment: fixed;      
}

main {	
    /* height: 100%; */
    /* font-size: 100%;  */
    width: 100%;
    gap: 0rem;  
}

.grid-wrapper {
    height: auto;
}


section {
	padding: 4rem 8rem;
	display: flex;
	background-color: white;
	scroll-margin-top: 7rem;
    width: 100%;
}

section.resp{
	flex-direction: row;
}

#features{
    padding: 4rem 2rem;
}
#pictureCarousel{
    padding-left: 1rem;
    padding-right: 1rem;
}



h1, h2 {	
   text-align: center;	
   font-weight: 400;	
}


h1 {
    font-family: 'Oswald', sans-serif;
	font-size: 3rem;
    line-height: 3.2rem;    
	color: var(--sandDark);
    text-transform: uppercase;
    letter-spacing: 5px;
	margin-bottom: 2rem;    
}

 
h2{
  margin-top: 1rem;
  margin-bottom: 1rem; 
  font-size: 1.7rem; 
}

h3 {
    font-size: 1.4rem;
	font-weight: 400;
	margin-top: 1rem;
}

img{
    object-fit: contain;
	width: 100%;
	max-height: 60vh; 
    /* max-width: 100%;
    height: auto;
    display: block;   */  
}

button{
    font-family: 'Montserrat';
}







/* --- HEADER --- */
.header{
	background-color: var(--greenDark);
	width: 100%;
	box-shadow: 0 2px 4px 0 rgba(0,0,0,.2);
	padding: 0.5rem 0;                /* kompaktere Leiste */
	position: fixed;
	z-index: 10;
	/* transform: translateY(-100%);     // bei Laden ausblenden */ 
	opacity: 0;
	will-change: transform, opacity;
	/* transition: transform 0.35s ease-out, opacity 0.35s ease-out; */
    top: -100px;
    transition: top 0.35s ease-out, opacity 0.35s ease-out;;
}

.header.visible {
	/* transform: translateY(0); */
    top: 0;
	opacity: 1;
}

#headerLogo{
	height: 7rem;
    object-fit: contain;
}



.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0rem 1rem;
}

.nav-menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
	background-color: var(--greenDark);
	z-index: 12;
}

.nav-info{
	display: none;

}


li.nav-info, li.nav-item{
    list-style-type: none;
    width: 100%;
}

.nav-item {
    margin-left: 3rem;
}


.nav-link {
    font-size: 1.4rem;
    font-weight: 400;
    position: relative;
    color: black;
    display: flex;
	text-transform: uppercase;  
    justify-self: center;  
}
.nav-link.active{
    color: var(--sandDark);
    font-weight: 500;
    font-size: 1.6rem;
}
.nav-link:hover{
    /* color: #482ff7; 
	border-bottom: 1px solid var(--sandDark);*/
	color: var(--sandDark);
}
.nav-link::before{
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: var(--sandDark);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}
.nav-link:hover::before {
  transform: scaleX(1);
}


.hamburger {
    display: none;
    cursor: pointer;
}
.bar {
    display: block;
    width: 35px;
    height: 5px;
    margin: 5px auto;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    background-color: var(--sandDark);
}
.hamburger.active .bar:nth-child(2) {
    opacity: 0;
}
.hamburger.active .bar:nth-child(1) {
    transform: translateY(10px) rotate(45deg);
}
.hamburger.active .bar:nth-child(3) {
    transform: translateY(-10px) rotate(-45deg);
}

.nav-infoItem{
	color: black;
	margin-bottom: .5rem;
	justify-content: flex-start; 
	margin-left: .6rem;
    text-align: center;
}




/* li.menu, li.dropdown, li.submenu {
    list-style: none;
} */




/* Header Social Icons Styling */
.social-icon {
    font-size: 2rem;
    color: var(--text); /* Akzentfarbe für Sichtblackarkeit */
    display: flex;
    align-items: center;
    /* font-weight: 200; */

}

.social-icon:hover {
    color: var(--sandDark);
    transform: scale(1.1);
}






/* HERO SECTION */
#sectInfoBoxTop {
	padding: 13rem 4rem 4rem 4rem;
	width: 100%;
	height: 100vh;               
	background: url('../img/photos/hero_banner.webp') center/cover no-repeat; 
    background-attachment: fixed;
    gap: 0rem; 
    margin-top: 0rem; 
    justify-content: end; 
} 

.hero-facts-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2rem;
	max-width: 100%;
	background: rgba(0, 0, 0, 0.5);
	padding: 2rem 4rem !important;
	border-radius: 1rem;
	backdrop-filter: blur(10px);
}

.hero-fact {
	text-align: center;
	color: white;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}

.hero-fact-number {
	font-size: 3rem;
	font-weight: 700;
	color: var(--sandDark);
	line-height: 1;
    font-variant-numeric: tabular-nums; /* Alle Zahlen werden gleich breit */
    min-height: 3rem;
}

.hero-fact-label {
	font-size: 0.95rem;
	color: rgba(255, 255, 255, 0.9);
	font-weight: 500;
}


#heroLogo {
    height: 40vh;            /* desktop default */
    width: auto;
    transition: height 0.3s var(--transition);
}





.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 3rem;
	background-color: var(--sandDark);
	border: 1px solid var(--sandDark);
	color: white;
	margin-top: 0rem;
	border-radius: 5px;
	box-shadow: 0 2px 4px 0 rgba(0,0,0,.2);
	width: fit-content;
	padding: 0.5rem 1.5rem;
	text-decoration: none;
	transition: all 0.3s ease;
	cursor: pointer;
	font-weight: 500;
}

.btn:hover {
	cursor: pointer;
	background-color: white;
	color: var(--sandDark);
	text-decoration: none;
	transform: translateY(-5px);
}

.btn-outline {
	background-color: transparent;
	color: var(--sandDark);
	border: 2px solid var(--sandDark);
}

.btn-outline:hover {
	background-color: var(--sandDark);
	color: white;
	transform: translateY(-5px);
}





/* --- FOOTER --- */
footer {
    background: var(--greenDark);
    padding: 5rem 5% 2rem 5%;
    border-top: 1px solid var(--text);
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 4rem;
    padding-bottom: 4rem;
    border-bottom: 1px solid var(--text);
}

.footer-col h4 {
    font-size: 1.3rem;
    margin-bottom: 1.5rem;
}

.footer-col p, .footer-col a {
    color: #888;
    margin-bottom: 1rem;
    display: block;
    text-decoration: none;
    transition: var(--transition);
}

.footer-col a:hover {
    color: var(--primary);
    padding-left: 5px;
}

/* Social Media Icons Style */
.social-links {
    display: flex;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.social-links a {
    display: inline-block;
    margin-bottom: 0;
    font-size: 3rem;
    color: var(--text-gray);
    padding-left: 0 !important; 
}

.social-links a:hover {
    color: var(--primary);
    transform: translateY(-3px);
}

.footer-logo-container {
    margin-bottom: 1rem;
}

.footer-logo-text {
    font-size: 1.5rem;
}

.footer-icon-primary {
    color: var(--primary);
}

.copyright {
    text-align: center;
    padding-top: 2rem;
    color: #444;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}









/* --- NEU: SPLIT LAYOUT (HALLE 1 & 2) --- */
.split-container {
    display: flex;
    flex-direction: column;
    gap: 5rem; /* Kein Abstand zwischen den Zeilen für nahtlosen Look */
}

.split-row {
    display: flex;
    flex-wrap: wrap;
    min-height: 550px; /* Mindesthöhe für imposante Wirkung */
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.split-image-col, .split-text-col {
    flex: 1 1 500px; /* Basisbreite 500px, wächst und schrumpft */
    position: relative;
}

.split-image-col img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(20%); /* Leichter Industrial-Filter */
    transition: var(--transition);
}
 /* xxx */
/* .split-image-col img {
    position: absolute;  
    top: 0;
    left: 0;
}   */

.split-row:hover .split-image-col img {
    filter: grayscale(0%); /* Farbe zurück bei Hover */
}

.split-text-col {
    background-color: var(--dark-bg); /* Etwas heller als der schwarze Hintergrund */
    padding: 5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

/* Umgekehrte Reihenfolge für jede zweite Zeile (Text links, Bild rechts) */
.split-row:nth-child(even) {
    flex-direction: row-reverse;
}

.split-text-col h3 {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    color: black;
}

.split-text-col p {
    color: var(--text-gray);
    font-size: 1.1rem;
    margin-bottom: 2rem;
    max-width: 600px;  /* 500 */
}

.split-features {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    width: 100%;
    margin-bottom: 2rem;
}

.split-features li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: black;
    font-family: var(--font-heading);
    letter-spacing: 1px;
    font-size: 0.9rem;
}

.split-features i {
    color: var(--primary);
}







/* --- NEU: CLASSES / KURSÜBERSICHT --- */
.classes-grid {
    display: grid;
    /* Flexibles Grid: Karten werden nicht kleiner als 300px */
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 1.5rem;
}

.class-card {
    position: relative;
    height: 400px;  /* 350 */
    background-color: var(--greenDark);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.1);
    transition: var(--transition);
}

.class-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease, filter 0.4s ease;
    /* filter: brightness(0.8); */
}

/* Hover-Effekt: Bild zoomt und wird dunkler für Text-Lesbarkeit */
.class-card:hover .class-bg {
    transform: scale(1.1);
    filter: brightness(0.4);
}
.class-card:hover {
    border-color: var(--primary);
    transform: translateY(-5px);
}

.class-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 2rem;
    background: linear-gradient(to top, rgba(0,0,0,0.5), transparent);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
}

.class-title {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
    transform: translateY(20px); /* Leicht nach unten verschoben */
    transition: transform 0.4s ease;
}

.class-desc {
    font-size: 0.95rem;
    color: white;
    margin-bottom: 1rem;
    opacity: 0; /* Standardmäßig unsichtbar */
    transform: translateY(20px);
    transition: opacity 0.4s ease 0.1s, transform 0.4s ease 0.1s;
}

/* Metadaten (Dauer, Level) */
.class-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.85rem;
    color: var(--greenDark);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease 0.2s, transform 0.4s ease 0.2s;
}

.class-meta span {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Hover-Status: Alles fährt nach oben und wird sichtbar */
.class-card:hover .class-title {
    transform: translateY(0);
}
.class-card:hover .class-desc,
.class-card:hover .class-meta {
    opacity: 1;
    transform: translateY(0);
}




/* --- SEGMENTED CONTROL (Filter) --- */
.segmented-control {
    display: inline-flex;
    align-self: center;
    border: 2px solid var(--sandDark); /* Außenrahmen */
    border-radius: 8px; /* Schöne abgerundete Ecken */
    overflow: hidden; /* Sorgt dafür, dass die Buttons innen nicht über die runden Ecken ragen */
    margin-bottom: 2rem;
    background-color: transparent;
}

.segment-btn {
    background-color: transparent;
    color: var(--sandDark);
    border: none;
    border-right: 2px solid var(--sandDark); /* Trennlinien zwischen den Buttons */
    padding: 0.8rem 2rem;
    font-size: 1rem;
    font-family: var(--font-body), sans-serif;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Der letzte Button braucht keine Trennlinie rechts */
.segment-btn:last-child {
    border-right: none;
}

/* Hover-Effekt für inaktive Buttons */
.segment-btn:hover:not(.active) {
    background-color: rgba(140, 110, 97, 0.1); /* Ganz leichtes Sand-Braun */
}

/* Der aktive (ausgewählte) Zustand */
.segment-btn.active {
    background-color: var(--sandDark);
    color: white;
}




/* --- AI ADVISOR CARD --- */
/* .ai-advisor-card {
    background: var(--greenDark);
    border: 1px solid var(--primary);
    padding: 4rem 2rem;
    margin-top: 4rem;
    text-align: center;
    border-radius: 4px;
}

.ai-input {
    width: 100%;
    max-width: 500px;
    padding: 1rem 1.5rem;
    background: white;
    border: 1px solid rgba(255,255,255,0.2);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 1rem;
    margin-bottom: 1.5rem;
    border-radius: 4px;
}

.ai-input:focus {
    outline: none;
    border-color: var(--primary);
} */





/* --- TEAM SECTION STYLES --- */
.team-grid {
    display: grid;
    /* grid-template-columns: repeat(4, 1fr); */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    justify-items: center;
}

.trainer-card {
    background: var(--greenDark);
    border: 1px solid rgba(255,255,255,0.05);
    transition: var(--transition);
    width: 100%;
    max-width: 360px;
}

.trainer-card:hover {
    border-color: var(--primary);
    transform: translateY(-5px);
}

.trainer-img-container {
    width: 100%;
    height: 380px;
    overflow: hidden;
    position: relative;
}

.trainer-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%); /* Startet Schwarz-Weiß */
    transition: var(--transition);
}

.trainer-card:hover .trainer-img-container img {
    filter: grayscale(0%); /* Farbe beim Hover */
    transform: scale(1.03);
}

.trainer-info {
    padding: 1.5rem;
    text-align: center;
}

.trainer-name {
    font-size: 1.5rem;
    margin-bottom: 0.2rem;
    color: var(--MainColor);
}

.trainer-role {
    font-family: var(--font-body);
    color: var(--primary);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    margin-bottom: 1rem;
    display: block;
}

.trainer-facts {
    list-style: none;
    text-align: left;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.trainer-facts li {
    font-size: 0.9rem;
    color: var(--text-gray);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
}

.trainer-facts i {
    color: var(--primary);
    margin-right: 10px;
    font-size: 0.8rem;
    width: 15px;
    text-align: center;
}














/* --- PRICING --- */
.pricing-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2rem;
}

.price-card {
    background: var(--greenDark);
    padding: 3rem 2rem;
    width: 100%;
    max-width: 360px;
    text-align: center;
    border: 1px solid rgba(255,255,255,0.05);
    position: relative;
    transition: var(--transition);
    display: flex;
    flex-direction: column;
}

.price-card:hover {
    border-color: var(--primary);
    transform: translateY(-5px);
}

.price-card.best-value {
    border: 1px solid var(--mainColor);
    z-index: 2;
    background: var(--greenDark);
}

.price-card.best-value::before {
    content: 'LOFT CHOICE';
    font-family: var(--font-heading);
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--mainColor);
    color: #000;
    padding: 5px 20px;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 1px;
}

.price-card h3 {
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
}

.price {
    font-family: var(--font-heading);
    font-size: 4rem;
    font-weight: 700;
    margin: 1rem 0;
    color: var(--text-light);
    line-height: 1;
}

.price span {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 400;
    color: var(--text-gray);
}

.price-features {
    list-style: none;
    margin-bottom: 2.5rem;
    text-align: left;
    color: var(--text-gray);
    flex-grow: 1; /* Schiebt Button nach unten */
}

.price-features li {
    margin-bottom: 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding-bottom: 0.5rem;
    display: flex;
    align-items: center;
    font-size: 0.95rem;
}

.price-features li i {
    color: var(--primary);
    margin-right: 15px;
    font-size: 0.8rem;
}








/* --- LOCATION SECTION (NEU) --- */
.location-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Zwei gleich große Spalten */
    /* gap: 4rem; */
    align-items: center;
}

.location-info{
    padding: 2rem 5rem;
}

.location-info h3 {
    font-size: 2rem;
    margin-bottom: 1.5rem;
}

.location-details {
    list-style: none;
    margin-bottom: 2rem;
}

.location-details li {
    margin-bottom: 1.5rem;
    display: flex;
    align-items: flex-start;
}

.location-details i {
    color: var(--primary);
    font-size: 1.5rem;
    margin-right: 1.5rem;
    margin-top: 5px; /* Icon optisch ausrichten */
}

.location-details h4 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    color: black;
}

.location-details p {
    font-size: 0.95rem;
    color: var(--text-gray);
    line-height: 1.6;
}

.map-container {
    width: 100%;
    height: 40vh;
    min-height: 450px;
    background: var(--greenDark);
    border: 1px solid rgba(255,255,255,0.1);
    position: relative;
}

.map-container .btn{
    font-size: 1rem;
}

 /* --- MAPS PRIVACY OVERLAY --- */
.map-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--card-bg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 2rem;
    z-index: 7;
}

.map-overlay i {
    font-size: 3rem;
    color: var(--primary);
    margin-bottom: 1rem;
}

.map-overlay h4 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.map-overlay p {
    font-size: 0.95rem;
    color: var(--text-gray);
    max-width: 450px;
    margin-bottom: 2rem;
}

.map-container iframe {
    width: 100%;
    height: 100%;
    border: none;
    /* filter: grayscale(50%) invert(0%) contrast(83%);  */
}






/* Kursplan-Grid: Wochenkalender */

.weeklyCourses-wrapper{
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 1rem;
    scroll-snap-type: x proximity;
    margin-bottom: 2rem;
}
.weeklyCourses-grid{
    display: none;
    gap: .75rem;
    grid-template-columns: repeat(7, 1fr);
    min-width: 1200px;
    font-size: .9rem;
}

.weeklyCourses-grid.active{
    display: grid;
}

.weeklyCourses-grid .dayView{
    display: grid;
    grid-template-rows: auto repeat(5, 1fr);
    gap: .5rem;
    scroll-snap-align: start;
}

.weeklyCourses-grid .dayHeader{
    background-color: var(--sandDark);
    color: white;
    text-align: center;
    padding: .5rem;
    font-size: 1rem;
}

.weeklyCourses-grid .daySlot{
    background-color: white;
    border: 1px solid var(--sandDark);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: .5rem;
    min-height: 100px;    
}

.weeklyCourses-grid .daySlot.empty{
    position: relative;
}
.weeklyCourses-grid .daySlot.empty::before{
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: url('/assets/img/logos/Logo_Main.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    opacity: 15%;
}

.weeklyCourses-grid .daySlot.content{
    background-color: var(--greenDark);
}
.weeklyCourses-grid .daySlot.content .cname{
    font-weight: 600;
}
.weeklyCourses-grid .daySlot.content .ctrainer{
    color: black;
}
.weeklyCourses-grid .daySlot.content .ctime{
    color: black;
}


.weeklyCourses-grid .daySlot.image{
    grid-row: span 2;
    padding: 0;
    border: none;
}

.weeklyCourses-grid .daySlot.image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}






.flexRow{
	display: flex;
	flex-direction: row;
}
.flexColumn{
	display: flex;
	flex-direction: column;
}
.align-VH {
	display: flex;
	align-items: center;
	justify-content: center;
} 
.align-V{
  display: flex;
  align-items: center; 

} 
.align-H{
  display: flex;
  justify-content: center; 
}
.center-self{
	align-self: center;
}





.mobileOnly{ display: none; }





@media (max-width: 1200px) {
    
    /* 1. Menüleiste bändigen */
    #headerLogo {
        height: 5.5rem; /* Logo im Header etwas kleiner */
    }
    
    .nav-item {
        margin-left: 1.5rem; /* Abstände zwischen den Links halbieren */
    }
    
    .nav-link {
        font-size: 1.2rem; /* Schriftgröße minimal kompakter */
    }

    /* 2. Hero-Bereich & großes Logo anpassen */
    #sectInfoBoxTop {
        padding: 10rem 3rem 3rem 3rem; /* Außenabstände reduzieren */
    }

    #heroLogo {
        height: 30vh; /* Das fette SVG-Logo etwas schrumpfen */
    }

    #heroSubtitle {
        font-size: 1.5rem !important; /* Untertitel passend dazu verkleinern */
    }

    /* 3. Facts-Grid (Die 4 Zahlen) etwas kompakter machen, damit sie in einer Reihe bleiben */
    .hero-facts-grid {
        gap: 1rem;
        padding: 1.5rem 2rem !important;
    }
    
    .hero-fact-number {
        font-size: 2.2rem;
    }
}










@media (max-width: 900px) {

    .desktopOnly { display: none; }
	.mobileOnly { display: inline-flex; }   /* block  */

    section { 
        padding: 2rem 2rem; 
        flex-direction: column; 
    }

    h1 { font-size: 2.5rem; }
	h2 { font-size: 1.5rem; }

    .header { padding: .5rem 0; }

	#headerLogo { height: 5rem; }

    .nav-menu { 
        height: 100vh;
    }     

    .hamburger { 
        display: block; 
        z-index: 13;
    }

    .nav-menu {
        position: fixed;
        left: -100%;
        top: 0rem;
        flex-direction: column;
        width: 70%;
		height: 100vh;
        border-radius: 0px;
        text-align: left;
        transition: 0.3s;
        box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
		justify-content: start;
		z-index: 12;
    }
    .nav-menu.active {
        left: 0;
    }

    .nav-link {
        line-height: 3rem;
        width: 100%;
        justify-content: center;
    }
	
	
    #navMobile-overlay {
        z-index: 11;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0; 
        width: 100vw;
        height: 100vh; 
        /* left: 0; */
        background-color: rgba(0,0,0,0.6);
        transform: translateX(100%);
        /* transition: .1s; */
    }

    #navMobile-overlay.is-open {
        transform: translateX(0%); /* show it */
        overflow-y: hidden;
        display: block;
    }

    .noscroll {
        overflow: hidden;
    }

    .nav-info{
		width: 100%; 
		font-size: .8rem; 
		display: flex; 
		flex-direction: column; 
		margin-top: 0rem;
		border-bottom: 2px solid var(--sandDark);
		padding-bottom: 1rem;		
	}   

    .nav-item {
        margin: 0;
		padding: 0;
		border-bottom: 1px solid var(--sandDark);
    }


    .hero-facts-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 1rem;
		padding: 1.5rem 2rem !important;
	}

	.hero-fact-number {
		font-size: 2rem;
	}

	.hero-fact-label {
		font-size: 0.85rem;
	}    

    #heroLogo {
        height: 20vh;
    }

    .team-grid {
		grid-template-columns: repeat(2, 1fr);
	}

    .location-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
        align-items: start;
    }

    /*xxx */
    /* .split-image-col{  
        min-height: 40vh; 
        width: 100%;
    } */
}









/* --- KONTAKTFORMULAR --- */
.contact-form-container {
    background-color: var(--greenDark); /* Dein eleganter heller Hintergrund */
    width: 100%;
    max-width: 700px;
    padding: 3rem;
    border: 1px solid rgba(0,0,0,0.05);
}

.loft-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    text-align: left;
}

.form-group label {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-group input, 
.form-group select, 
.form-group textarea {
    width: 100%;
    padding: 1rem;
    border: 1px solid rgba(0,0,0,0.1);
    background-color: white;
    font-family: var(--font-body), sans-serif; /* Nutzt deine Montserrat-Schrift */
    font-size: 1rem;
    color: var(--text);
    transition: var(--transition);
    outline: none;
}

/* Hover & Fokus Effekte (Wenn man reinklickt) */
.form-group input:hover, 
.form-group select:hover, 
.form-group textarea:hover {
    border-color: rgba(0,0,0,0.3);
}

.form-group input:focus, 
.form-group select:focus, 
.form-group textarea:focus {
    border-color: var(--sandDark);
    box-shadow: 0 0 0 2px rgba(140, 110, 97, 0.2); /* Sanfter Glow in deiner Akzentfarbe */
}

/* Entfernt den Standard-Pfeil im Dropdown (Select) für einen cleaneren Look */
.form-group select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1em;
}

.loft-form .btn {
    margin-top: 1rem;
    width: 100%; /* Button geht über die volle Breite */
    height: 3.5rem;
    font-size: 1rem;
}











@media (max-width: 900px) and (min-width: 769px) {

    #sectInfoBoxTop {
	    /* height: 50vh; */
		padding: 6rem 2rem 2rem 2rem;
        justify-content: space-between;
	}

    .hero-fact-number {
		font-size: 1.8rem;
	}

}





@media only screen and (max-width: 768px) {

    section.resp {
		flex-direction: column;
	}

    /* general section padding reduction */
	section{
		padding: 2rem 1rem;
	}

    #pictureCarousel{
        padding-left: 0rem;
        padding-right: 0rem;
    }


	h1 { font-size: 1.8rem; }
	h2 { font-size: 1.5rem; }

    .footer-grid {
        padding-bottom: 2rem;
        gap: 2rem;
    }

    .header {
		padding: 0.3rem 0;
	}

    #headerLogo {
		height: 4rem;
	}

    #sectInfoBoxTop { 
        /* height: 40vh;  */
        padding: 5rem 1rem 1rem 1rem; 
        justify-content: space-between;
    }

    #features{
        padding: 2rem 0rem;
    }

    .split-container {
        gap: 2rem;
    }

    .split-image-col, .split-text-col {
        flex: 1 1 100%; /* Erlaubt es, auf Handy-Breite zu schrumpfen */
    }
    .split-text-col {
        padding: 2rem; /* Überschreibt die gewaltigen 5rem vom Desktop */
    }

    .split-text-col h3 {
        font-size: 1.6rem; /* Macht die Überschrift auf Handys kleiner */
        margin-bottom: 1rem;
    }
    
    /* Optional: Auch den Text darunter etwas kompakter machen */
    .split-text-col p {
        font-size: 1rem;
    }




    /* --- Mobile Classes / Kurs-Karten Fix --- */
    .classes-grid {
        /* Zwingt das Grid in exakt 1 Spalte, die sich zu 100% an die Handybreite anpasst */
        grid-template-columns: 1fr; 
        gap: 1rem; 
        width: 100%; /* Stellt sicher, dass das Grid perfekt zentriert bleibt */
    }

    .class-card {
        /* Nimmt den Karten die Wucht auf dem Handy */
        height: 280px; /* Vorher 400px - das war fast ein ganzer Handy-Bildschirm! */
        max-width: 100%; /* Verhindert ein Ausbrechen über den Rand */
    }

    /* Passend dazu die Texte in der Karte minimal verkleinern, damit es harmonisch wirkt */
    .class-title {
        font-size: 1.6rem; 
        transform: translateY(10px); /* Kürzere Distanz für die Hover-Animation */
    }

    .class-desc {
        font-size: 0.9rem;
        margin-bottom: 0.5rem;
    }




    .team-grid { 
        gap: 1rem; 
        grid-template-columns: 1fr;
    }


    
    /* --- Mobile Pricing / Tarife Fix --- */
    .pricing-container {
        gap: 1.5rem; /* Etwas weniger Abstand zwischen den Karten */
        flex-direction: column; /* Erzwingt, dass sie sauber untereinander stehen */
        align-items: center; /* Zentriert die Karten perfekt */
    }

    .price-card {
        max-width: 100%; /* Erlaubt der Karte, die gesamte verfügbare Breite zu nutzen */
        padding: 2rem 1.5rem; /* Deutlich kompakter als die 3rem vom Desktop */
    }

    .price-card h3 {
        font-size: 1.5rem; /* Überschrift leicht verkleinern */
    }

    .price {
        font-size: 3rem; /* Vorher 4rem - das nimmt auf dem Handy zu viel Platz weg! */
        margin: 0.5rem 0; /* Etwas enger zusammenrücken */
    }

    .price-features {
        margin-bottom: 1.5rem; /* Weniger leere Fläche über dem Button */
    }

    .price-features li {
        font-size: 0.9rem; /* Text minimal kleiner, damit lange Sätze besser passen */
        padding-bottom: 0.4rem;
        margin-bottom: 0.8rem;
    }

    /*"LOFT CHOICE" Label */
    .price-card.best-value::before {
        font-size: 0.8rem;
        padding: 4px 15px;
    }


    .location-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .location-info {
        order: 1;
        padding: 2rem 1rem; /* Auch hier waren auf Desktop noch 5rem eingestellt */        
    }
    .map-container {
        order: 2;
        /* height: 300px;
        min-height: 200px; */
    }
    .map-container iframe {
        height: 100%;
    }

    .nav-infoItem {
		font-size: 0.8rem;
	}


    .map-overlay {
        padding: 1rem;
    }
    .map-overlay i {
        font-size: 2.5rem;
        margin-bottom: 0.5rem;
    }
    .map-overlay h4 {
        font-size: 1.3rem;
        margin-bottom: 0.5rem;
    }
    .map-overlay p {
        font-size: 0.85rem;
        margin-bottom: 1.5rem;
    }








    /* Kontaktformular */
    .form-row {
        grid-template-columns: 1fr; /* Stapelt Name und E-Mail untereinander */
        gap: 1.5rem;
    }

    .contact-form-container {
        padding: 2rem 1.5rem; /* Weniger Rand auf kleinen Bildschirmen */
    }


}



@media (max-width: 480px) {

    .header { padding: 0.2rem 0; }

    #headerLogo { height: 3.5rem; }

    /* .nav-item { margin-left: 0.5rem; } */

    .hero-facts-grid {
		grid-template-columns: 1fr;
		gap: 1rem;
		padding: 1rem 1.5rem !important;
	}

    h1 { font-size: 2rem; line-height: 2.4rem; }

	h2 { font-size: 1.2rem; }

	section { padding: 1.25rem; }

    .segment-btn {
        padding: 0.6rem 1rem;
        font-size: 0.85rem;
    }

}