/* ===================================================== */
/* BASIS */
/* ===================================================== */

/* Universal-Selektor: gilt für alle HTML-Elemente */
*{
box-sizing:border-box; /* Padding und Border werden in Breite/Höhe eingerechnet */
margin:0; /* Entfernt Standard-Außenabstände des Browsers */
padding:0; /* Entfernt Standard-Innenabstände des Browsers */
}

:root{
--text-block-spacing:1rem;
--heading-block-spacing:2rem;
--h1-block-spacing:3rem;
}

/* Grundeinstellungen für den gesamten Seiteninhalt */
body{
font-family:Arial, Helvetica, sans-serif; /* Schriftarten-Reihenfolge */
background:#ffffff; /* Hintergrundfarbe der Seite */
color:#000; /* Standard-Schriftfarbe */
line-height:1.6; /* Zeilenhöhe für bessere Lesbarkeit */
min-height:100vh;
display:flex;
flex-direction:column;
}

main{
flex:1 0 auto;
}

footer{
width:100%;
text-align:center;
padding:16px 20px calc(16px + env(safe-area-inset-bottom));
}

/* Standardverhalten für Links */
a{
text-decoration:none; /* Entfernt Unterstreichung */
color:inherit; /* Übernimmt die Schriftfarbe des Eltern-Elements */
}

/* ===================================================== */
/* HEADER */
/* ===================================================== */

/* Kopfbereich der Website */
header{
display:flex; /* Flexbox-Layout */
align-items:center; /* Vertikale Zentrierung der Elemente */
justify-content:space-between; /* Elemente links und rechts verteilen */
padding:12px 20px; /* Innenabstand oben/unten und links/rechts */
background:#ffffff; /* Hintergrundfarbe */
color:#000; /* Schwarze Schrift */
position:relative; /* Positionierungsbasis für absolute Elemente */
z-index:1000; /* Legt Ebene fest (über anderen Elementen) */
}

/* Logo-Bild im Header */
.logo img{
height:60px; /* Höhe des Logos */
}

/* ===================================================== */
/* BURGER BUTTON */
/* ===================================================== */

/* Container für Burger-Menü */
.burger{
display:flex; /* Flexbox-Layout */
align-items:center; /* Vertikale Zentrierung */
gap:10px; /* Abstand zwischen Icon und Text */
cursor:pointer; /* Mauszeiger wird Hand */
color:#000; /* Textfarbe */
}

/* Container für die drei Burger-Linien */
.burger-icon{
display:flex; /* Flexbox */
flex-direction:column; /* Elemente untereinander anordnen */
gap:4px; /* Abstand zwischen den Linien */
}

/* Einzelne Linie des Burger-Menüs */
.burger-icon span{
width:24px; /* Breite der Linie */
height:3px; /* Höhe der Linie */
background:#000; /* Farbe der Linie */
display:block; /* Blockelement */
}

/* Text "Menü" neben dem Burger-Icon */
.menu-text{
color:#000; /* Schriftfarbe */
font-weight:700; /* Fettschrift */
}

/* ===================================================== */
/* NAVIGATION */
/* ===================================================== */

/* Seitenmenü */
nav{
position:fixed; /* Fixiert am Bildschirm */
top:0; /* Oben beginnen */
left:-260px; /* Startposition außerhalb des Bildschirms */
width:260px; /* Breite des Menüs */
height:100vh; /* Höhe = komplette Bildschirmhöhe */
background:#ffffff; /* Hintergrundfarbe */
transition:left .35s ease; /* Animiertes Einfahren */
z-index:900; /* Ebene */
padding-top:80px; /* Abstand zum oberen Rand */
}

/* Liste im Menü */
nav ul{
list-style:none; /* Entfernt Aufzählungszeichen */
display:flex; /* Flexbox */
flex-direction:column; /* Elemente untereinander */
}

/* Einzelner Menüpunkt */
nav li{
width:100%; /* volle Breite */
}

/* Link im Menü */
nav a{
display:block; /* Blockelement */
padding:16px 24px; /* Innenabstand */
font-weight:700; /* Fettschrift */
color:#000; /* Textfarbe */
border-bottom:1px solid rgba(0,0,0,0.1); /* Trennlinie */
}

/* ===================================================== */
/* MENU TOGGLE */
/* ===================================================== */

/* Versteckte Checkbox zur Steuerung des Menüs */
#menu-toggle{
display:none; /* Checkbox unsichtbar */
}

/* Wenn Checkbox aktiviert → Menü sichtbar */
#menu-toggle:checked ~ nav{
left:0; /* Menü fährt ins Bild */
}

/* ===================================================== */
/* OVERLAY */
/* ===================================================== */

/* Halbtransparenter Hintergrund */
.menu-overlay{
position:fixed; /* Fixiert auf Bildschirm */
top:0; /* oben */
left:0; /* links */
width:100%; /* volle Breite */
height:100%; /* volle Höhe */
background:rgba(0,0,0,0.35); /* dunkler transparenter Hintergrund */
opacity:0; /* zunächst unsichtbar */
pointer-events:none; /* Klicks werden ignoriert */
transition:opacity .3s; /* Animation */
z-index:800; /* Ebene */
}

/* Wenn Menü offen → Overlay sichtbar */
#menu-toggle:checked ~ .menu-overlay{
opacity:1; /* sichtbar */
pointer-events:auto; /* Klicks möglich */
}

/* ===================================================== */
/* HERO */
/* ===================================================== */

/* Hero-Bereich oben auf der Seite */
.hero{
text-align:center; /* Text zentriert */
padding:80px 20px; /* Innenabstand */
background:linear-gradient(#ffffff,#ffffff); /* Farbverlauf */
}

/* Überschrift im Hero-Bereich */
.hero h1{
font-size:40px; /* Schriftgröße */
margin-bottom:20px; /* Abstand nach unten */
}

/* Beschreibungstext im Hero */
.hero p{
max-width:700px; /* maximale Breite */
margin:auto; /* Zentrierung */
}

/* ===================================================== */
/* BUTTONS */
/* ===================================================== */

/* Standard-Button */
.btn{
display:inline-block; /* Blockelement */
background:#FF0004; /* rote Hintergrundfarbe */
color:#fff; /* weiße Schrift */
padding:12px 24px; /* Innenabstand */
border-radius:8px; /* abgerundete Ecken */
font-weight:700; /* Fettschrift */
margin:8px; /* Außenabstand */
}

/* ===================================================== */
/* CONTENT SECTIONS */
/* ===================================================== */

/* Container für Inhaltsbereiche */
.section{
max-width:1100px; /* maximale Breite */
margin:auto; /* Zentrierung */
padding:40px 20px; /* Innenabstand */
}

/* Einheitlicher Abstand zwischen Inhaltsblöcken in allen Seiten */
.section > :where(h1,h2,h3,h4,p,ul,ol,details,.card,.grid,.faq-list,.cta-row,form,.section-image)
+ :where(h1,h2,h3,h4,p,ul,ol,details,.card,.grid,.faq-list,.cta-row,form,.section-image){
margin-top:var(--text-block-spacing);
}

/* Überschriften erhalten mehr Abstand zum vorherigen Block */
.section > :not(:first-child):is(h2,h3){
margin-top:var(--heading-block-spacing);
}

.section > :not(:first-child):is(h1){
margin-top:var(--h1-block-spacing);
}

/* Bilder in Inhaltssektionen */
.section-image{
display:block;
width:100%;
height:auto;
border-radius:10px;
transform:scale(0.1);
transform-origin:center center;
animation:section-image-grow 5.0s ease-out forwards;
}

@keyframes section-image-grow{
from{
transform:scale(0.1);
}
to{
transform:scale(1);
}
}

@media (prefers-reduced-motion: reduce){
.section-image{
animation:none;
transform:none;
}
}

/* Einheitlicher Abstand zwischen Bild und nachfolgender Card */
.section-image + .card{
margin-top:1.25rem;
}

.trainer-item{
margin:0;
}

.trainer-caption{
margin-top:0.75rem;
}

.trainer-name{
text-align:center;
font-weight:700;
}

.trainer-role{
margin-top:1rem;
text-align:left;
}

/* Kartenlayout */
.card{
background:#d8d8d8; /* Hintergrundfarbe */
padding:20px; /* Innenabstand */
border-radius:10px; /* abgerundete Ecken */
}

/* Einheitlicher Abstand zwischen Textblöcken in Cards */
.card > br{
display:none; /* entfernt manuelle Leerzeilen als Abstand */
}

.card > :where(h1,h2,h3,h4,p,ul,ol,details,form,.cta-row)
+ :where(h1,h2,h3,h4,p,ul,ol,details,form,.cta-row){
margin-top:var(--text-block-spacing);
}

/* Überschriften in Cards erhalten ebenfalls größeren Abstand */
.card > :not(:first-child):is(h2,h3){
margin-top:var(--heading-block-spacing);
}

.card > :not(:first-child):is(h1){
margin-top:var(--h1-block-spacing);
}

.card :where(ul,ol){
padding-left:1.2rem;
}

.card li + li{
margin-top:0.35rem;
}

/* Formularmeldungen */
.form-message{
padding:12px 14px;
border-radius:8px;
font-weight:700;
}

.form-message-success{
background:#e3f5e3;
border:1px solid rgba(13,95,13,0.35);
color:#0d5f0d;
}

.form-message-error{
background:#ffe8e8;
border:1px solid rgba(122,21,21,0.35);
color:#7a1515;
}

/* Link zur Anfahrt/Google Maps */
.map-link{
display:inline-flex;
align-items:center;
gap:10px;
padding:10px 14px;
margin-top:0.75rem;
border:1px solid rgba(0,0,0,0.16);
border-radius:10px;
background:#fff;
color:#000;
font-weight:700;
}

.map-link:hover{
background:#f6f6f6;
}

.map-link:focus-visible{
outline:3px solid #FF0004;
outline-offset:2px;
}

.map-link-icon{
display:inline-flex;
width:20px;
height:20px;
flex:0 0 20px;
}

.map-link-icon svg{
display:block;
width:100%;
height:100%;
}

/* ===================================================== */
/* GRID */
/* ===================================================== */

/* Grid-Layout */
.grid{
display:grid; /* CSS Grid aktivieren */
gap:20px; /* Abstand zwischen Elementen */
}

/* Drei-Spalten-Grid */
.grid-3{
grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); /* responsive Spalten */
}

/* ===================================================== */
/* FAQ */
/* ===================================================== */

.faq-hint{
margin:0 0 16px;
font-weight:700;
}

.faq-list{
display:grid;
gap:var(--text-block-spacing);
}

.faq-list details{
background:#ffdce1;
border:1px solid rgba(0,0,0,0.12);
border-radius:10px;
overflow:hidden;
}

.faq-list summary{
list-style:none;
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
padding:16px 20px;
cursor:pointer;
font-weight:700;
color:#000;
}

.faq-list summary::-webkit-details-marker{
display:none;
}

.faq-list summary::marker{
content:"";
}

.faq-list summary::after{
content:"+";
font-size:28px;
line-height:1;
font-weight:700;
color:#FF0004;
}

.faq-list details[open] summary::after{
content:"-";
}

.faq-list summary:hover{
background:rgba(255,255,255,0.35);
}

.faq-list summary:focus-visible{
outline:3px solid #FF0004;
outline-offset:2px;
}

.faq-list details p{
padding:0 20px 16px;
color:#000;
}

/* ===================================================== */
/* SOCIAL BUTTONS */
/* ===================================================== */

/* Container für Social Media Buttons */
.social-buttons{
position:fixed; /* fest am Bildschirm */
bottom:20px; /* Abstand unten */
left:20px; /* Abstand links */
display:flex; /* Flexbox */
gap:20px; /* Abstand zwischen Buttons */
z-index:1000; /* Ebene */
}

/* Icons der Social Buttons */
.social-buttons img{
width:50px; /* Breite */
height:50px; /* Höhe */
}

/* ===================================================== */
/* DESKTOP NAVIGATION */
/* ===================================================== */

/* Regeln für große Bildschirme */
@media (min-width:1100px){

.burger{
display:none; /* Burger-Menü ausblenden */
}

nav{
position:static; /* normale Position */
height:auto; /* automatische Höhe */
width:auto; /* automatische Breite */
background:none; /* kein Hintergrund */
padding:0; /* kein Innenabstand */
}

nav ul{
flex-direction:row; /* Menü horizontal */
gap:20px; /* Abstand */
}

nav a{
border:none; /* keine Trennlinie */
color:#000; /* schwarze Schrift */
}

.menu-overlay{
display:none; /* Overlay deaktivieren */
}

}

/* ===================================================== */
/* DARK MODE */
/* ===================================================== */

/* Styles für Dark Mode */
@media (prefers-color-scheme: dark){

body{
background:#111; /* dunkler Hintergrund */
color:#f2f2f2; /* helle Schrift */
}

header{
background:#000; /* Header bleibt schwarz */
}

.menu-text{
color:#fff; /* Menütext weiß */
}

.burger{
color:#fff; /* Burger-Text/Icon im dunklen Header sichtbar */
}

.burger-icon span{
background:#fff; /* Burger-Linien im Darkmode weiß */
}

.hero{
background:linear-gradient(#d8d8d8,#d8d8d8); /* Hero bleibt hell */
color:#000; /* schwarze Schrift */
}

.card{
background:#d8d8d8; /* grauer Kartenhintergrund bleibt erhalten */
color:#000; /* auf hellem Rot gut lesbare Schrift */
}

.faq-hint{
color:#f2f2f2;
}

}

/* Desktop-Navigation im Darkmode */
@media (prefers-color-scheme: dark) and (min-width:1100px){

nav a{
color:#fff; /* weiße Links auf schwarzem Header */
}

}