/* ==========================================================================
   1. CORPORATE IDENTITY & FARB-VARIABLEN (Central Theme Settings)
   ========================================================================== */
  /* CI Farben */
:XXroot {

  --bg: #F5F8F4;           /* Grünweiss (Seitenhintergrund / Muster 3) */
  --surface: #FFFFFF;      /* Weiss */
  --fg: #14241B;           /* Waldschwarz (Fliesstext) */
  --muted: #4A5D51;        /* Graugrün (Nebentext) */
  --line: #D6E0D8;         /* Salbei (Linien & Rahmen) */
  
  --brand: #18432B;        /* Dunkelgrün (Hauptfarbe) */
  --brand-text: #18432B;   /* Text-Grün */
  --gold: #D9A441;         /* Gold (Akzentfarbe) */
  --on-gold: #1B2A1F;      /* Tiefgrün-Schwarz (Text auf Gold) */
  
  --hero-bg: #18432B;      /* Dunkelgrün für Hero & Blöcke (MUSTER 2) */
  --hero-fg: #F2F7F3;      /* Weissgrün (Text auf Dunkelgrün) */
  --text-gray: #C5D9CB;   /* Helleres Graugrün */
  --band-bg: #E7EFE8;      /* Hellgrün (MUSTER 1) */
  
  /* Typografie */
  --font-display: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
  /*--font-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;*/
}


:root {
  /* CI Farben (Permanent auf Darkmode gesetzt) */
  --bg: #0E1913;           /* Dunkler Seitenhintergrund */
  --surface: #15251B;      /* Dunkle Oberfläche */
  --fg: #E8EFE9;           /* Helles Waldschwarz/Weiss für Text */
  --muted: #A5B8AB;        /* Gedämpftes Graugrün */
  --line: #284033;         /* Dunkles Salbei für Linien */
  
  --brand: #18432B;        
  --brand-text: #7CC79B;   /* Helleres Grün für Texte im Darkmode */
  --gold: #D9A441;         /* Gold (Akzentfarbe) */
  --on-gold: #1B2A1F;      
  
  --hero-bg: #143323;      /* Dunkelgrün für Hero & Blöcke */
  --hero-fg: #F2F7F3;      /* Weissgrün */
  --text-gray: #B4CCBB;    /* Helleres Graugrün für Absätze */
  --band-bg: #122219;      /* Dunkles Hellgrün */
  --hero-muted: #B4CCBB;
  
  color-scheme: dark;      /* Erzwingt den Darkmode im Browser */

  /* Typografie */
  /*--font-display: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;*/
  --font-display: "Bricolage Grotesque";
 /* --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;*/
}

/*
Dunkelmodus-Unterstützung nach CI 
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0E1913;
    --surface: #15251B;
    --fg: #E8EFE9;
    --muted: #A5B8AB;
    --line: #284033;
    --brand-text: #7CC79B;
    --hero-bg: #143323;
    --hero-fg: #F2F7F3;
    --hero-muted: #B4CCBB;
    --band-bg: #122219;
    color-scheme: dark;
  }
}
*/



/* ==========================================================================
   2. GLOBALES RESET & BASIS-STYLES
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  background-color: var(--bg);
  color: var(--fg);
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.6;
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* Verhindert horizontales Scrollen bei 100vw Blöcken */
}

p {
  margin: 0 0 1rem 0;
  color: var(--hero-muted) !important;
  font-weight: 200;
}

a {
  color: inherit;
}

a:hover {
  opacity: 1;
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 4px;
}

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

/* ==========================================================================
   3. TYPOGRAFIE-HIERARCHIE (h1 - h6) & GOLDENE BULLETS
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  line-height: 1.08;
  text-wrap: balance;
  margin: 0 0 1.5rem 0;
}

/* h1: Hauptüberschrift */
h1 {
  font-size: clamp(1.9rem, 6vw, 4.1rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* h2: Gleiche Größe wie h1, aber in CI-Gold */
h2 {
  font-size: clamp(1.9rem, 6vw, 4.1rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--gold);
}

/* h3 bis h5: Stufenweise kleiner */
h3 {
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.015em;
}

h4 {
  font-size: clamp(1.3rem, 2.8vw, 1.8rem);
  font-weight: 600;
  letter-spacing: -0.01em;
}

h5 {
  font-size: clamp(1.1rem, 2.2vw, 1.4rem);
  font-weight: 600;
}

/* h6: Wie Eyebrow mit großem Abstand davor und mittlerem Abstand danach */
h6 {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-text);
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}

/* Ungeordnete Listen mit CI-Gold-Hexagon-Bullets */
ul {
  list-style: none;
  padding-left: 0;
  margin: 1rem 0;
  display: grid;
  gap: 0.5rem;
  margin: 0 0 1.5rem 0;
}

ul li {
  position: relative;
  padding-left: 1.6rem;
  min-width: 0;
  color: var(--hero-muted);
}

ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 0.6rem;
  height: 0.6rem;
  background-color: var(--gold);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

ol {
  list-style-type: upper-roman;
  padding-left: 1.5rem;
  margin: 1rem 0;
  display: grid;
  gap: 0.5rem;
}

ol li {
  min-width: 0;
  color: var(--text-gray);
}

ol li::marker {
  color: var(--gold);
  font-weight: 700;
}

/* 1. Wort-Formate */
span.word-pill {
	background-color: var(--gold);
	color: var(--hero-bg);
	padding: 2px 15px;
	border-radius: 9999px;
	display: inline-block;
	margin: 0 5px;
	letter-spacing: .2em;
}

span.word-highlight {
	background-color: var(--gold);
	color: var(--hero-bg);
	padding: 1px 1px;
	border-radius: 4px;
}
span.word-accent {
	color: var(--gold);
	font-weight: bolder;
}

/* 2. Absatz-Formate */
.p-highlight {
	border: 4px solid var(--gold);
	padding: 18px 20px;
	border-radius: 8px;
	margin: 20px 0;
	line-height: 1.7;
	color. var(--hero-muted);
}
.p-subtle {
	font-size: 1.15rem;
	border-left: 6px solid var(--gold);
	padding-left: 15px;
	margin: 20px 0;
	color: var(--hero-muted);
}
.p-quote {
	font-style: italic;
	padding: 15px 20px;
	border-radius: 4px;
	border-left: 4px solid var(--hero-muted);
	margin: 20px 0;
}
/* 3. Preistabellen-Grid (Desktop & Mobil) */
.sog-table-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 20px 0;
    font-size: 0.95rem;
}

/* Standard-Grid für Header und Zeilen (Fallback auf 4 Spalten) */
.sog-table-grid .sog-header, 
.sog-table-grid .sog-row {
    display: grid;
    grid-template-columns: 2fr 1.5fr 1fr 1fr;
    gap: 15px;
    align-items: center;
    padding: 15px 20px;
    border-radius: 8px; 
}

/* Dynamische Spalten-Anpassung für den Desktop via :has() */
.sog-table-grid:has(.col-c2:last-child) .sog-header,
.sog-table-grid:has(.col-c2:last-child) .sog-row {
    grid-template-columns: 1fr 1fr; 
}

.sog-table-grid:has(.col-c3:last-child) .sog-header,
.sog-table-grid:has(.col-c3:last-child) .sog-row {
    grid-template-columns: 2fr 1fr 1fr; 
}

.sog-table-grid:has(.col-c4:last-child) .sog-header,
.sog-table-grid:has(.col-c4:last-child) .sog-row {
    grid-template-columns: 2fr 1.5fr 1fr 1fr; /* Ihr 4er-Standard */
}

/* Design Header */
.sog-header {
    background-color: var(--bg);
    color: var(--hero-muted);
    font-weight: bold;
    border: 1px solid var(--gold);
}

/* Design Zeilen */
.sog-row {
    background-color: var(--bg);
    border: 1px solid var(--hero-muted);
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}

.col-c4 {
    font-weight: bold;
}

/* Mobile Ansicht (< 760px) */
/* Mobile Ansicht (< 760px) */
@media (max-width: 760px) {
  .sog-header { 
    display: none !important; 
  }
  
  .sog-row { 
    display: flex !important; 
    flex-direction: column !important; 
    gap: 12px; 
    padding: 15px; 
    align-items: flex-start !important; 
    text-align: left !important;
  }

  /* Jede Zelle ist ein Block, aber der Inhalt darin fließt als Flex-Gruppe */
  .sog-row > div {
    width: 100%;
    text-align: left !important;
    display: flex;
    flex-direction: row;        /* Inhalt nebeneinander anordnen */
    flex-wrap: wrap;            /* Bei Platzmangel sauber in die nächste Zeile umbrechen */
    align-items: center;
    gap: 8px;                   /* Abstand zwischen den Uhrzeit-Badges */
  }

  /* Das Label erzwingt einen Zeilenumbruch und sitzt als Überschrift ganz oben */
  .sog-row > div[data-label]::before { 
    content: attr(data-label); 
    font-weight: 600; 
/*    font-size: 0.85rem; */
    color: var(--brand-text); 
    flex-basis: 100%;           /* Nimmt die volle Breite ein und zwingt den Rest nach unten */
    display: block; 
    margin-bottom: 2px;
  }

  /* Erste Spalte (Wochentag) bleibt die Hauptüberschrift oben in der Box */
  .sog-row .col-c1 { 
    font-size: 1.1rem; 
    font-weight: bold;
    border-bottom: 1px solid var(--gold); 
    padding-bottom: 8px; 
    margin-bottom: 4px; 
    flex-basis: 100%;
  }
  
  .sog-row .col-c1::before { 
    display: none !important; 
  }
}

/* 2. Absatz-Formate 
.p-highlight { background-color: var(--hero-bg); border: 4px solid var(--gold); padding: 18px 20px; border-radius: 8px; margin: 20px 0; }
.p-subtle { font-size: 1.15rem; line-height: 1.7; color: #334155; border-left: 6px solid var(--gold); padding-left: 15px; margin: 20px 0; background-color: var(--hero-bg; padding-top: 8px; padding-bottom: 8px; }
.p-quote { font-style: italic; color: #475569; background-color: #f1f5f9; padding: 15px 20px; border-radius: 4px; border-left: 4px solid #0ea5e9; margin: 20px 0; }
*/

/* ==========================================================================
   4. DYNAMISCHES 3-FARBEN-ROTATIONSMUSTER & BLÖCKE (WonderCMS Full-Bleed)
   ========================================================================== */

/* Vollbild-Blöcke (Header, Hero, Kontakt, Band) */
.top, .hero, .contact, .band {
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  box-sizing: border-box;  
}

/* Verringert den Abstand zwischen den Überschriften im Hero-Bereich 
.hero-content h1,
.hero-content h2 {
  margin: 0 0 -0.5rem 0;
  line-height: 1.15;   
  display: flex;
  align-items: center; 
  gap: 0.1em;          
}
*/

/* Grundformatierung & fließende Schriftgröße für den Hero-Bereich */
.hero-content h1,
.hero-content h2 {
  /* clamp(Minimum, Wunschwert relativ zum Bildschirm, Maximum) */
  font-size: clamp(1.6rem, 5vw, 4.1rem); 
  font-weight: 800;
  letter-spacing: -0.02em;
  
  margin: 0 0 -0.5rem 0;
  line-height: 1.15;
  display: flex;
  align-items: center; /* Icon richtet sich perfekt an der ersten Zeile aus */
  gap: 0.3em;
}

/* 2. Gemeinsames Verhalten aller Icons (Größe skaliert dynamisch mit der Schriftgröße) */
.hero-content h1::before,
.hero-content h2::before {
  content: "";
  display: inline-block;
  width: 0.9em;        /* Relativ zur Schriftgröße der jeweiligen Überschrift */
  height: 0.9em;
  flex-shrink: 0;      /* Verhindert Verzerrung beim Umbrechen */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Optional: Definiert einen sauberen Abstand zum Textabsatz darunter */
.hero-content p {
  margin-top: 1.2rem;
}

/* 3. Einzelselektoren: Welches SVG für welche Überschrift */
.hero-icon-kraft::before {
  background-image: url('/data/includes/logo-kraft_d.svg');
}

.hero-icon-ernaehrung::before {
  background-image: url('/data/includes/logo-ernaehrung_d.svg');
}

.hero-icon-gesundheit::before {
  background-image: url('/data/includes/logo-gesundheit_d.svg');
}
/* Normales .wrap für statische Bereiche */
.wrap {
  max-width: 68rem;
  margin-inline: auto;
  padding-inline: 1rem;
  padding-block: 1.5rem;
}

/* Dynamische Zusatzblöcke: Volle 100vw Breite für den Hintergrund */
[class*="addition_content"],
[id*="addition_content"] {
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  box-sizing: border-box;
  padding-block: 3.5rem;
  
  /* Modernes Grid: Zentriert alle Inhalte automatisch auf max. 68rem 
     und erzwingt links/rechts immer mindestens 1rem Abstand zum Rand */
  display: grid;
  grid-template-columns: minmax(1rem, 1fr) minmax(0, 68rem) minmax(1rem, 1fr);
}

/* Zwingt alle direkten Inhalte der Blöcke in die mittlere Spalte */
[class*="addition_content"] > *,
[id*="addition_content"] > * {
  grid-column: 2;
  min-width: 0;
}

/* --------------------------------------------------------------------------
   3er-ROTATIONSMUSTER FÜR ADDITION_CONTENT BLÖCKE:
   -------------------------------------------------------------------------- */

/* MUSTER 1 (addition_content_1, _4, _7, _10...): HELLGRÜN (ehemals Angebote) */
[class*="addition_content_1"], [id*="addition_content_1"],
[class*="addition_content_4"], [id*="addition_content_4"],
[class*="addition_content_7"], [id*="addition_content_7"],
[class*="addition_content_10"], [id*="addition_content_10"] {
  background-color: var(--band-bg) !important;
  color: var(--fg);
}

/* MUSTER 2 (addition_content_2, _5, _8, _11...): DUNKELGRÜN (ehemals Über mich) */
[class*="addition_content_2"], [id*="addition_content_2"],
[class*="addition_content_5"], [id*="addition_content_5"],
[class*="addition_content_8"], [id*="addition_content_8"],
[class*="addition_content_11"], [id*="addition_content_11"] {
  background-color: var(--hero-bg) !important;
  color: var(--hero-fg);
}

/* Automatische Kontrastanpassung für Text & Überschriften in Dunkelgrün-Blöcken */
[class*="addition_content_2"] h1, [id*="addition_content_2"] h1,
[class*="addition_content_2"] h3, [id*="addition_content_2"] h3,
[class*="addition_content_2"] h4, [id*="addition_content_2"] h4,
[class*="addition_content_2"] h5, [id*="addition_content_2"] h5,
[class*="addition_content_5"] h1, [id*="addition_content_5"] h1,
[class*="addition_content_5"] h3, [id*="addition_content_5"] h3,
[class*="addition_content_5"] h4, [id*="addition_content_5"] h4,
[class*="addition_content_5"] h5, [id*="addition_content_5"] h5 {
  color: var(--hero-fg);
}

/*
[class*="addition_content_2"] h2, [id*="addition_content_2"] h2,
[class*="addition_content_5"] h2, [id*="addition_content_5"] h2 {
  color: var(--gold);
}

[class*="addition_content_2"] h6, [id*="addition_content_2"] h6,
[class*="addition_content_5"] h6, [id*="addition_content_5"] h6 {
  color: var(--gold);
}
*/

/* MUSTER 3 (addition_content_3, _6, _9, _12...): GRÜNWEISS (Standard-Hintergrund) */
[class*="addition_content_3"], [id*="addition_content_3"],
[class*="addition_content_6"], [id*="addition_content_6"],
[class*="addition_content_9"], [id*="addition_content_9"],
[class*="addition_content_12"], [id*="addition_content_12"] {
  background-color: var(--bg) !important;
  color: var(--fg);
}

/* --------------------------------------------------------------------------
   Feste System-Blöcke (Header, Hero, Angebote-Fallback, Retreat, Kontakt)
   -------------------------------------------------------------------------- */

/* Block 1: Header (.top) - Dunkelgrün */
.top {
  background-color: var(--hero-bg);
  color: var(--hero-fg);
  padding-block: 1.1rem;
}

.top > .wrap-in {
  width: 100%;
  max-width: 68rem;
  margin-inline: auto;
  padding-inline: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.6rem;
  color: var(--hero-fg);
}

.logo-icon {
  height: 2.3rem;
  width: auto;
}

.logo span {
  white-space: nowrap; /* Verhindert das Umbrechen des Textes innerhalb des Titels */
}

.nav {
  display: flex;
  gap: 1.4rem;
  font-weight: 500;
  font-size: 0.95rem;
}

.nav ul {
  display: flex;
  gap: 1.4rem;
  margin: 0;
  padding: 0;
}

.nav a {
  text-decoration: none;
  opacity: 0.9;
  color: var(--hero-fg);
}

.nav a:hover {
  opacity: 1;
  color: var(--gold);
  text-decoration: none;
}

/* Block 2: Hero-Sektion (.hero) - Dunkelgrün */
.hero {
  background-color: var(--hero-bg);
  color: var(--hero-fg);
  padding-block: 1rem 1.75rem;
  overflow: hidden;
}

.hero .tag {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.1rem;
}

.hero h1 em {
  font-style: normal;
  color: var(--gold);
}

.hero-mark {
  justify-self: center;
  width: min(100%, 18rem);
}

.hero-mark svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Fallback / Spezielle Komponenten-Klassen */
.band {
  background-color: var(--band-bg);
  padding-block: 3rem;
}

.offers {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
}

.offer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.8rem 2rem;
  align-items: start;
  padding-block: 1.6rem;
  border-top: 1px solid var(--line);
}

.offer:last-child {
  border-bottom: 1px solid var(--line);
}

/* Retreat-Box (Dunkelgrün, als Spezialelement nutzbar) */
.retreat {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem 2.5rem;
  align-items: center;
  background-color: var(--hero-bg);
  color: var(--hero-fg);
  padding: 2rem;
  border-radius: 0.5rem;
}

.retreat .date {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 1;
  color: var(--gold);
}

/* Block 5: Kontakt-Sektion (.contact) - Dunkelgrün */
.contact {
  background-color: var(--hero-bg);
  color: var(--hero-fg);
  padding-block: 0rem;
}

.contact .addr {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.4rem;
  border-bottom: 2px solid var(--gold);
  padding-bottom: 0.15rem;
}
/* Der Link verhält sich dank display: inline-block exakt wie ein Button */
.copy {
  display: inline-block;
  font: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  background: transparent;
  color: var(--hero-fg);
  border: 1px solid var(--hero-muted);
  border-radius: 0.4rem;
  padding: 0.45rem 0.9rem;
  cursor: pointer;
  text-decoration: none; /* Entfernt den Unterstrich vom Link */
}

/* Hover-Effekt greift jetzt direkt auf den Link-Button */
.copy:hover {
  border-color: var(--gold);
  color: var(--gold);
}

/* Container für die Buttons */
.mail {
  display: flex;
  gap: 1rem; /* Sauberer Abstand zwischen den Buttons */
  align-items: center;
  margin-top: 1rem;
}

/*
.copy a:hover {
  text-decoration: none;
  opacity: 0.9;
  color: var(--gold);
}
*/

/* ==========================================================================
   5. FOOTER & RESPONSIVE ANPASSUNGEN
   ========================================================================== */
footer {
  padding-block: 1.8rem 0.2rem;
  font-size: 0.9rem;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  justify-content: space-between;
}

@media (max-width: 760px) {
  .hero-grid {
    /* grid-template-columns: minmax(0, 1fr);*/
    grid-template-columns: 1.2fr 0.8fr; /* Text bekommt etwas mehr Platz als das Bild */	
  }
  .hero-mark {
    width: 9rem;
    justify-self: start;
    order: -1;
  }
  .retreat {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- Burger-Menü (Generell aktiv für Desktop & Mobile) --- */

.nav {
    position: relative;
}

/* Checkbox unsichtbar machen */
.burger-checkbox {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* Burger-Icon immer anzeigen */
.burger-icon {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 22px;
    cursor: pointer;
    z-index: 100;
}

.burger-icon span {
    display: block;
    height: 3px;
    width: 100%;
    background-color: var(--gold);
    border-radius: 2px;
    transition: 0.3s;
}

/* Hauptmenü: standardmäßig versteckt (display: none) */
.nav ul.menu-list {
    display: none;
    flex-direction: column;
    position: absolute;
    right: 0;
    top: 40px;
    background-color: var(--bg);
    border: 1px solid var(--gold);
    border-radius: 8px;
    padding: 16px 20px; /* Innenabstand zum Rahmen wiederhergestellt */
    min-width: 210px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 99;
    gap: 10px; /* Kompakter, gleichmäßiger Zeilenabstand */
    list-style: none;
    margin: 0;
}

/* Verhindert Zeilenumbrüche innerhalb der Menüpunkte */
.nav ul.menu-list .nav-link {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

/* Menü einblenden, wenn Checkbox geklickt wurde */
.burger-checkbox:checked ~ ul.menu-list {
    display: flex;
}

/* Hauptpunkte ohne zusätzlichen Margin (Abstand kommt sauber über gap) */
.nav ul.menu-list > li {
    margin: 0;
}

/* Untermenü (Kurszeiten & Preise) untereinander und eingerückt */
.nav ul.menu-list ul.subPageDropdown {
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 8px 0 0 0;
    padding: 0 0 0 22px; /* Einrückung nach rechts */
    gap: 8px; /* Zeilenabstand der Unterpunkte */
}

/* Aktiven Menüpunkt (Haupt- und Unterseite) in Gold einfärben */
.nav .nav-item.active > .nav-link,
.nav .subPageDropdown .nav-item.active > .nav-link {
    color: var(--gold) !important;
    font-weight: 600;
}

/* Animation des Burger-Icons zum "X" beim Öffnen */
.burger-checkbox:checked + .burger-icon span:nth-child(1) {
    transform: translateY(9.5px) rotate(45deg);
}
.burger-checkbox:checked + .burger-icon span:nth-child(2) {
    opacity: 0;
}
.burger-checkbox:checked + .burger-icon span:nth-child(3) {
    transform: translateY(-9.5px) rotate(-45deg);
}

/* Basis-Styling für alle verlinkten Dokumente im Content */
a[href$=".pdf"],
a[href$=".zip"],
a[href$=".doc"],
a[href$=".docx"],
a[href$=".xls"],
a[href$=".xlsx"] {
    display: inline-flex;
    align-items: center;
    color: var(--gold);
    text-decoration: none;
    transition: opacity 0.2s;
}

a[href$=".pdf"]:hover,
a[href$=".zip"]:hover,
a[href$=".doc"]:hover,
a[href$=".docx"]:hover,
a[href$=".xls"]:hover,
a[href$=".xlsx"]:hover {
    opacity: 0.8;
    text-decoration: underline;
}

/* Greift automatisch bei allen Admidio-Download-Links 
a[href*="mode=download"] {
    display: inline-flex;
    align-items: center;
    color: var(--gold);
    text-decoration: none;
    transition: opacity 0.2s;
}

a[href*="mode=download"]:hover {
    opacity: 0.8;
    text-decoration: underline;
*/

/* Das Icon davor - exakt im Look Ihres Footers */
a[href*="mode=download"]::before {
    content: "\F383"; /* Bootstrap Icon für Dokument (z.B. bi-file-earmark-pdf-fill) */
    display: inline-block;
    font-family: "bootstrap-icons" !important;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    margin-right: 0.5rem;
    color: var(--gold);
}

/* Entfernt das graue Standard-Aufblitzen beim Antippen auf Touchscreens */
a, button, .burger-icon {
    -webkit-tap-highlight-color: transparent;
}

/* Textmarkierung (Copy & Paste) im eigenen Farbschema */
::selection {
    background-color: var(--gold);
    color: var(--bg);
}

html {
    scroll-behavior: smooth;
    /* Verhindert das versehentliche Neuladen der Seite beim Herunterziehen am oberen Rand */
    overscroll-behavior-y: contain;
}

.contact .mail {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem; /* 1rem Abstand vertikal, 2rem horizontal */
    align-items: center;
    margin-top: 1.5rem;
}

.contact .mail a.copy {
    display: inline-flex;
    align-items: center;
    white-space: nowrap; /* Verhindert, dass Icon und Text getrennt umgebrochen werden */
}

/* Mobile-Ansicht (Smartphones) */
/* Mobile-Ansicht für die Kontakt-Buttons */
@media (max-width: 650px) {
    .contact .mail {
        display: flex;
        flex-direction: column;
        align-items: center;      /* Zentriert die Buttons horizontal */
        justify-content: center;
        gap: 0.85rem;
        width: 100%;
    }

    .contact .mail a.copy {
        justify-content: center;  /* Zentriert Icon & Text innerhalb des Buttons */
        width: 100%;              /* Optional: Macht alle Buttons gleich breit */
        max-width: 280px;         /* Begrenzt die Breite, damit sie nicht zu klobig werden */
    }
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.65rem 2rem;
    align-items: center;
    width: 100%;
    flex: 1 1 100%; /* Zwingt das Grid auch innerhalb eines Flex-Footers auf volle Breite */
    max-width: 1100px; /* Optional: an die Breite Ihres .wrap-Containers anpassen */
    margin: 0 auto;
}

.footer-grid .footer-right {
    text-align: right;
    justify-self: end; /* Richtet das Element im CSS-Grid exakt rechtsbündig aus */
}

.footer-grid a {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

/* Mobile-Ansicht (Smartphones & schmale Tablets) */
@media (max-width: 720px) {
    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 0.6rem;
    }

    .footer-grid .footer-right {
        text-align: center;
        justify-self: center;
    }
}