/* =============================================================
   Cevin Pichler – Personal Trainer | Haupt-Stylesheet
   -------------------------------------------------------------
   Aufbau dieser Datei (zum schnellen Zurechtfinden):
   1. Design-Variablen (Farben, Schrift, Abstände)  -> hier Farben/Marke anpassen
   2. Reset & Grundlagen
   3. Wiederverwendbare Bausteine (Buttons, Container, Sektionen)
   4. Kopfzeile / Navigation (sticky)
   5. Sektionen in Reihenfolge der Seite (Hero, Problem, Angebot ...)
   6. Footer
   7. Responsive-Anpassungen (Tablet & Desktop)

   Hinweis: Diese Seite ist "mobile-first" gebaut. Das heißt:
   Der Standard-Stil gilt fürs Handy. Weiter unten (Punkt 7)
   wird der Stil für größere Bildschirme erweitert.
   ============================================================= */


/* =============================================================
   0. SCHRIFTART (lokal eingebunden, keine Google-Fonts-Anfrage mehr)
   -------------------------------------------------------------
   Die Datei fonts/inter-latin.woff2 deckt alle im Projekt verwendeten
   Zeichen ab (deutsche Umlaute/ß, Gedankenstrich, „-Anführungszeichen,
   ©-Zeichen). Eine einzige Datei bedient alle vier Schriftstärken, da
   es sich um eine Variable-Font-Datei mit fixierten Gewichten handelt
   – exakt so, wie Google Fonts sie zuvor ausgeliefert hat.
   ============================================================= */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
}


/* =============================================================
   1. DESIGN-VARIABLEN
   Hier kannst du zentral Farben, Schrift und Abstände ändern.
   Änderst du z. B. --farbe-primaer, ändert sich die Akzentfarbe
   auf der ganzen Seite (alle Buttons, Highlights usw.).
   ============================================================= */
:root {
  /* --- Farbschema (streng nach Vorgabe) --- */
  --farbe-hell:       #EFEFEF; /* Heller Hintergrund */
  --farbe-primaer:    #EBA418; /* Gold/Orange – alle CTAs, Buttons, Hover, Highlights */
  --farbe-primaer-dunkel: #cf8f0d; /* Etwas dunkler – für Hover-Zustand der Buttons */
  --farbe-sekundaer:  #11212E; /* Dunkelblau – dunkle Sektionen, Header, Footer */
  --farbe-text:       #3C3C3C; /* Fließtext */
  --farbe-weiss:      #ffffff;
  --farbe-hell-2:     #f7f7f7; /* Minimal helleres Weiß für Karten auf hellem Grund */

  /* --- Schrift --- */
  --schrift: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* --- Abstände & Rundungen --- */
  --sektion-abstand: 4.5rem;  /* Vertikaler Abstand oben/unten je Sektion (Handy) */
  --radius:          14px;    /* Ecken-Rundung für Karten/Buttons */
  --radius-klein:    8px;
  --container-breite: 1320px; /* Maximale Inhaltsbreite – ausgewogener seitlicher Leerraum */

  /* --- Schatten --- */
  --schatten:        0 6px 24px rgba(17, 33, 46, 0.10);
  --schatten-stark:  0 12px 40px rgba(17, 33, 46, 0.18);
}


/* =============================================================
   2. RESET & GRUNDLAGEN
   Setzt Browser-Standards zurück, damit alles einheitlich aussieht.
   ============================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;        /* Sanftes Scrollen zu den Sektionen */
  scroll-padding-top: 92px;       /* Platz für die sticky Kopfzeile beim Anker-Sprung */
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--schrift);
  color: var(--farbe-text);
  background-color: var(--farbe-hell);
  line-height: 1.65;              /* Angenehme Zeilenhöhe für den Fließtext */
  font-size: 1rem;
  overflow-x: hidden;             /* Verhindert horizontales Scrollen */
}

img {
  max-width: 100%;
  display: block;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

h1, h2, h3, h4 {
  line-height: 1.2;
  color: var(--farbe-sekundaer);
  font-weight: 800;
}

/* Fett-Auszeichnung im Text (aus [FETT: ...] wird <strong>) */
strong {
  font-weight: 700;
  color: inherit;
}

/* Verhindert, dass beim Fokus (Tastatur-Navigation) nichts sichtbar ist – gut für Barrierefreiheit */
:focus-visible {
  outline: 3px solid var(--farbe-primaer);
  outline-offset: 2px;
}


/* =============================================================
   3. WIEDERVERWENDBARE BAUSTEINE
   ============================================================= */

/* Zentrierter Inhalts-Container mit Seitenrand */
.container {
  width: 100%;
  max-width: var(--container-breite);
  margin: 0 auto;
  padding: 0 0.85rem;
}

/* Standard-Abstand jeder Sektion */
.sektion {
  padding-top: var(--sektion-abstand);
  padding-bottom: var(--sektion-abstand);
}

/* Sektion mit dunklem Hintergrund (Dunkelblau) und heller Schrift */
.sektion--dunkel {
  background-color: var(--farbe-sekundaer);
  color: var(--farbe-hell);
}
.sektion--dunkel h1,
.sektion--dunkel h2,
.sektion--dunkel h3,
.sektion--dunkel h4 {
  color: var(--farbe-weiss);
}

/* Einheitliche Größe/Gewicht/Abstand für ALLE Sektions-Überschriften
   (sowohl zentrierte Köpfe als auch die Überschriften in den
   zweispaltigen Sektionen Problem/Über mich) */
.sektion h2 {
  font-size: clamp(2rem, 4.6vw, 2.75rem);   /* insgesamt etwas größer */
  font-weight: 800;
  line-height: 1.25;
  margin-bottom: 1rem;
}

/* Überschrift + Einleitung, zentriert (typischer Sektions-Kopf) */
.sektion-kopf {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 3.25rem;   /* mehr Luft unter dem Kopf */
}
.sektion-kopf p {
  font-size: 1.05rem;
  text-wrap: pretty;   /* verhindert ein alleinstehendes Wort am Zeilenende */
}

/* Kleiner farbiger Balken über/unter Überschriften als Akzent (optional dekorativ) */
.akzent-strich {
  display: inline-block;
  width: 60px;
  height: 4px;
  background-color: var(--farbe-primaer);
  border-radius: 2px;
  margin-bottom: 1.25rem;
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: inherit;
  font-weight: 700;
  font-size: 1.05rem;
  padding: 0.95rem 1.9rem;
  border: none;
  border-radius: 50px;          /* Runde "Pill"-Form */
  cursor: pointer;
  text-align: center;
  transition: transform 0.15s ease, background-color 0.2s ease, box-shadow 0.2s ease;
  line-height: 1.2;
}

/* Primär-Button (Gold/Orange) – für alle wichtigen CTAs */
.btn--primaer {
  background-color: var(--farbe-primaer);
  color: var(--farbe-sekundaer);
  box-shadow: 0 6px 18px rgba(235, 164, 24, 0.35);
}
.btn--primaer:hover {
  background-color: var(--farbe-primaer-dunkel);
  transform: translateY(-2px);
}

/* Etwas größerer Button für Hero/Banner */
.btn--gross {
  font-size: 1.15rem;
  padding: 1.1rem 2.4rem;
}

/* Button mit Zusatztext DARIN (z. B. "Kostenlos und unverbindlich") */
.btn--mit-hinweis {
  flex-direction: row;         /* Icon links, Textblock rechts daneben */
  align-items: center;         /* Icon vertikal mittig zum zweizeiligen Text */
  gap: 0.6rem;
  line-height: 1.15;
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
}
/* Zweizeiliger Textblock (Haupttext + Hinweis) rechts neben dem Icon */
.btn__text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.btn__haupt {
  font-weight: 700;
}
/* Telefon-Icon links neben dem GESAMTEN Textblock, vertikal mittig */
.btn__icon {
  width: 1.5em;
  height: 1.5em;
  flex-shrink: 0;
}
.btn__hinweis {
  font-size: 0.8rem;
  font-weight: 600;
  opacity: 0.9;
}

/* Kleiner Zusatztext unter einem Button (nur noch als Fallback genutzt) */
.btn-hinweis {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.9rem;
  opacity: 0.85;
}

/* Hilfs-Zentrierung für Button-Blöcke */
.text-zentriert {
  text-align: center;
}

/* --- Hervorhebungen (wiederverwendbar) --- */

/* Gelber Textmarker/Leuchtstift-Effekt hinter Wörtern */
.textmarker {
  background: linear-gradient(120deg,
              rgba(235, 164, 24, 0) 0%,
              rgba(235, 164, 24, 0.85) 4%,
              rgba(235, 164, 24, 0.85) 96%,
              rgba(235, 164, 24, 0) 100%);
  padding: 0.05em 0.15em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;   /* funktioniert auch über Zeilenumbrüche */
}

/* Pinselstrich-Unterstreichung: in der Mitte dicker, zu den Enden auslaufend,
   mit leichtem Schwung. Als gefüllte SVG-Form (nicht als gerade Linie).
   Die SVG-Form füllt ihre eigene Zeichenfläche fast vollständig aus (kaum
   Leerraum im Bild selbst), damit Abstand/Dicke direkt über padding-bottom
   und background-size steuerbar sind. */
.unterstrich {
  display: inline-block;
  padding-bottom: 0.26em;   /* direkt unter den Buchstaben, praktisch ohne Lücke */
  /* Die Pinselform füllt ihre Zeichenfläche jetzt fast randlos aus (Tinte
     reicht fast bis zum oberen Bildrand) und der Abstand (padding-bottom)
     entspricht fast exakt der Strichdicke -> so gut wie kein Leerraum
     zwischen Buchstaben und Strich, bei gleichbleibender Dicke. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 10' preserveAspectRatio='none'%3E%3Cpath d='M2,7.95 C70,1.2 230,0.05 298,4 C230,6.5 70,9.9 2,7.95 Z' fill='%23EBA418'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% 0.26em;
}


/* =============================================================
   4. KOPFZEILE / NAVIGATION (sticky)
   ============================================================= */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--farbe-sekundaer);   /* Dunkelblau #11212E */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.nav {
  position: relative;   /* Bezugspunkt für den rechts fixierten CTA-Button */
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;   /* flachere Leiste */
}

/* Logo im Header */
.nav__logo img {
  height: 62px;
  width: auto;
}

/* Menü-Liste (auf dem Handy ausgeblendet, per Burger einblendbar) */
.nav__menu {
  position: fixed;
  top: 72px;
  right: 0;
  width: min(80%, 320px);
  height: calc(100vh - 72px);
  background-color: var(--farbe-sekundaer);   /* passend zur Header-Leiste */
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  padding: 1.5rem;
  transform: translateX(100%);          /* Standard: außerhalb des Bildschirms */
  transition: transform 0.3s ease;
  display: flex;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3);
}

/* Wenn geöffnet (JavaScript fügt die Klasse hinzu) */
.nav__menu.ist-offen {
  transform: translateX(0);
}

.nav__link {
  color: var(--farbe-hell);
  font-size: 1.22rem;
  font-weight: 800;
  padding: 0.75rem 0;
  width: 100%;
  transition: color 0.2s ease;
}
.nav__link:hover {
  color: var(--farbe-primaer);
}

/* CTA-Button in der Navigation – bewusst flacher als die großen CTAs */
.nav__cta {
  margin-top: 1rem;
  width: 100%;
  padding: 0.55rem 1.2rem;
  font-size: 0.95rem;
}

/* Burger-Knopf (nur auf Handy/Tablet sichtbar) */
.nav__burger {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 22px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 101;
}
.nav__burger span {
  display: block;
  height: 3px;
  width: 100%;
  background-color: var(--farbe-hell);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
/* Burger verwandelt sich in ein "X", wenn Menü offen ist */
.nav__burger.ist-offen span:nth-child(1) {
  transform: translateY(9.5px) rotate(45deg);
}
.nav__burger.ist-offen span:nth-child(2) {
  opacity: 0;
}
.nav__burger.ist-offen span:nth-child(3) {
  transform: translateY(-9.5px) rotate(-45deg);
}


/* =============================================================
   5. SEKTIONEN
   ============================================================= */

/* ---------- 5.1 HERO / HEADER ---------- */
.hero {
  position: relative;
  color: var(--farbe-weiss);
  text-align: center;
  padding: 2.75rem 0 3rem;
  /* FARBVARIANTE – hier Bild tauschen zum Testen
     Standard: header-desktop-schwarz.jpg | Alternative: header-desktop.jpg
     Das Bild bringt einen eigenen schwarzen Verlauf mit -> Overlay in Schwarz,
     damit es nicht grau ausgewaschen wirkt. */
  background-image: linear-gradient(rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0.68)),
                    url('../assets/header-desktop-schwarz.jpg');
  background-size: cover;
  background-position: center;
}
.hero h1 {
  color: var(--farbe-weiss);
  font-size: clamp(1.95rem, 6.5vw, 3.1rem);
  line-height: 1.15;
  margin-bottom: 0.85rem;
}

/* Einleitungstext unter der Headline */
.hero__intro {
  color: #b8b8b8;   /* dezenter Grauton statt Weiß – wirkt ruhiger */
  font-size: 1.05rem;
  line-height: 1.5;
  max-width: 600px;
  margin: 0 auto 1.4rem;   /* auf dem Handy zentriert */
}

/* Textbereich-Wrapper (wird auf Desktop links begrenzt) */
.hero__inhalt {
  position: relative;
  z-index: 1;
}

/* CTA-Bereich (auf dem Handy zentriert) */
.hero__cta {
  text-align: center;
}

/* Drei hervorgehobene USP-Punkte im Hero */
.hero__punkte {
  display: grid;
  gap: 0.75rem;
  max-width: 560px;
  margin: 0 auto 1.75rem;
}
/* Punkte frei ohne Kasten – nur Icon + Text */
.hero__punkt {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  text-align: left;
  padding: 0.35rem 0;
}
.hero__punkt-icon {
  flex-shrink: 0;
  color: var(--farbe-primaer);
  width: 25px;
  height: 25px;
}
.hero__punkt-titel {
  display: block;
  font-weight: 700;
  color: var(--farbe-weiss);
  margin-bottom: 0.1rem;
}
.hero__punkt-text {
  font-size: 0.9rem;
  line-height: 1.4;
  color: #b8b8b8;   /* dezenter Grauton – die fetten Titel bleiben weiß */
  opacity: 1;
}


/* ---------- 5.2 PROBLEM ---------- */
/* Überschrift oben */
/* Weniger vertikaler Abstand zu den angrenzenden Sektionen */
.problem {
  padding-top: calc(var(--sektion-abstand) / 2);
  padding-bottom: calc(var(--sektion-abstand) / 2);
}
.problem__kopf {
  margin-bottom: 2rem;
}
.problem__grid {
  display: grid;
  gap: 2rem;
  align-items: center;
}
/* Collage liegt transparent auf dem Seitenhintergrund – kein Kasten/Schatten */
.problem__bild img {
  border-radius: 0;
  box-shadow: none;
  width: 100%;
  background: none;
}
.problem__bloecke {
  display: grid;
  gap: 0;
}
/* Textblock mit Icon links davor – schlicht, ohne Kasten */
.problem__block {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: none;
  padding: 1.4rem 0;
  border: none;
  box-shadow: none;
  font-size: 1.05rem;
}
.problem__block:first-child { padding-top: 0; }
.problem__block:last-child { padding-bottom: 0; }
/* Feine, dezente Trennlinie zwischen den Abschnitten */
.problem__block + .problem__block {
  border-top: 1px solid rgba(60, 60, 60, 0.15);
}
.problem__block p {
  margin: 0;
}
/* Thematisches Icon in Primärfarbe */
.problem__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: rgba(235, 164, 24, 0.15);
  color: var(--farbe-primaer-dunkel);
}
.problem__icon svg {
  width: 24px;
  height: 24px;
}


/* ---------- 5.3 ANGEBOT (dunkler Hintergrund mit Muster) ---------- */
.angebot {
  /* FARBVARIANTE – hier Bild tauschen zum Testen
     Standard: coaching-bg-blau.jpg | Alternativen: coaching-bg-grau.jpg, coaching-bg-gelb.jpg */
  background-image: linear-gradient(rgba(17, 33, 46, 0.88), rgba(17, 33, 46, 0.92)),
                    url('../assets/coaching-bg-blau.jpg');
  background-size: cover;
  background-position: center;
  color: var(--farbe-hell);
  /* halber vertikaler Abstand zu den angrenzenden Sektionen */
  padding-top: calc(var(--sektion-abstand) / 2);
  padding-bottom: calc(var(--sektion-abstand) / 2);
}
.angebot .sektion-kopf h2,
.angebot .sektion-kopf p {
  color: var(--farbe-weiss);
}

/* Die drei Coaching-Bausteine als Karten – Text liegt AUF dem Bild */
.bausteine {
  display: grid;
  gap: 2rem;
  margin-bottom: 3rem;
}
.baustein {
  position: relative;
  display: flex;
  /* Querformat (breiter als hoch) statt fester Höhe – passt sich dadurch
     bei jeder Spaltenanzahl (1/2/3-spaltig) automatisch korrekt an */
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--schatten-stark);
  transition: transform 0.2s ease;
}
.baustein:hover {
  transform: translateY(-4px);
}
/* Bild füllt die ganze Karte als Hintergrund */
.baustein__bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Dezenter dunkler Verlauf über dem Bild für gute Lesbarkeit */
.baustein::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
                rgba(17, 33, 46, 0.92) 0%,
                rgba(17, 33, 46, 0.60) 45%,
                rgba(17, 33, 46, 0.15) 100%);
}
/* Text sitzt über dem Bild, unten & zentriert, in Weiß */
.baustein__inhalt {
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding: 1.6rem 1.1rem 2.6rem;   /* Text sitzt ausgewogener, nicht ganz unten */
  color: var(--farbe-weiss);
  text-align: center;
}
.baustein__titel {
  color: var(--farbe-weiss);
  font-size: 1.3rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin-bottom: 0.7rem;
}
/* Der Umbruch nach "Ernährungstipps" bleibt auf dem Handy aktiv (zu wenig
   Platz für eine Zeile) und wird nur ausgeblendet, wenn genug Breite da ist
   (siehe Desktop-Media-Query weiter unten). */
.baustein__inhalt p {
  color: var(--farbe-hell);
  font-size: 1.02rem;
  line-height: 1.5;
  /* verteilt die Zeilen gleichmäßig – kein einzelnes Wort auf einer Zeile */
  text-wrap: balance;
}


/* ---------- 5.4 TESTIMONIALS / KUNDEN ---------- */
/* Weniger Abstand zu den angrenzenden Sektionen */
.testimonials {
  padding-top: calc(var(--sektion-abstand) / 2);
  padding-bottom: calc(var(--sektion-abstand) / 2);
}
.testimonials__liste {
  display: grid;
  gap: 3.5rem;
}
/* Kein umschließender Rahmen/Kasten mehr – Bild und Text liegen frei
   auf dem Seitenhintergrund. */
.testimonial {
  background: none;
  box-shadow: none;
}
/* Abwechselnde Sektionshintergründe: Renate & Magdalena hell (Standard-
   Seitenhintergrund), Gabriella dunkelblau über die VOLLE Fensterbreite.
   Technik: ein riesiger box-shadow "bleedet" die Farbe bis an den Rand,
   ohne dass das Layout/die Grid-Spalten dadurch breiter werden;
   clip-path verhindert horizontales Scrollen durch den Schatten. */
.testimonial--dunkel {
  background-color: var(--farbe-sekundaer);
  box-shadow: 0 0 0 100vmax var(--farbe-sekundaer);
  clip-path: inset(0 -100vmax);
  color: var(--farbe-hell);
  padding: 3rem 0;
}
.testimonial--dunkel .testimonial__name       { color: var(--farbe-weiss); }
.testimonial--dunkel .testimonial__untertitel { color: var(--farbe-primaer); }
.testimonial--dunkel .testimonial__text       { color: var(--farbe-hell); }
.testimonial--dunkel .testimonial__zitat-label { color: var(--farbe-weiss); }
.testimonial--dunkel .testimonial__zitat      { color: var(--farbe-hell); }
/* Bildspalte: Kundenbild oben, Zitatbox darunter – mit Luft dazwischen,
   da beide nicht mehr in einem gemeinsamen Kasten zusammengehalten werden */
.testimonial__bildspalte {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.testimonial__bild {
  aspect-ratio: 1000 / 600;
  object-fit: cover;
  width: 100%;
  border-radius: var(--radius);   /* sanft abgerundet, freigestellt statt eingerahmt */
}
/* Platzhalter "Bild folgt" (für Kundin ohne Foto) */
.testimonial__platzhalter {
  aspect-ratio: 1000 / 600;
  width: 100%;
  background-color: var(--farbe-sekundaer);
  color: var(--farbe-hell);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  letter-spacing: 0.05em;
  font-size: 1.1rem;
  opacity: 0.9;
  border-radius: var(--radius);
}
/* Dünner Rahmen ganz außen um die Kundinnen-Bilder – schafft Kontrast zum
   jeweiligen Sektionshintergrund.
   Renate & Magdalena (heller Grund): dunkelblauer Rahmen.
   Gabriella (dunkelblauer Grund, .testimonial--dunkel): heller Rahmen. */
.testimonial__bild,
.testimonial__platzhalter {
  border: 3px solid var(--farbe-sekundaer);
}
.testimonial--dunkel .testimonial__bild,
.testimonial--dunkel .testimonial__platzhalter {
  border-color: var(--farbe-hell);
}
/* Renate-Bild: rechte Kante bündig + minimal schmalerer Ausschnitt → der
   hauchdünne weiße Rand (2px in der Datei) an der linken Kante wird weggeschnitten. */
.testimonial__bild--beschnitt-links {
  aspect-ratio: 985 / 600;
  object-position: 100% 50%;
}
/* Zitat unter dem Bild – keine Box, nur ein feiner Akzentstrich links */
.testimonial__zitatbox {
  background: none;
  border-left: 4px solid var(--farbe-primaer);
  padding: 0.2rem 0 0.2rem 1.4rem;
}
.testimonial__zitat-label {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--farbe-sekundaer);
  margin-bottom: 0.5rem;
}
.testimonial__zitat {
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.6;
}
/* Textspalte: Name, Problem/Lösung, Stichpunkte – mit viel Luft */
.testimonial__inhalt {
  padding: 1.9rem 2rem;
}
.testimonial__name {
  font-weight: 800;
  color: var(--farbe-sekundaer);
  font-size: 1.5rem;
  margin-bottom: 1.4rem;
}
/* Der mobile Name (Duplikat ganz oben) ist standardmäßig ausgeblendet und
   wird NUR in der Mobilansicht (<768px) eingeblendet. Der reguläre Name im
   Inhaltsblock bleibt für Desktop/Tablet sichtbar. So gibt es pro Ansicht
   immer nur EINEN sichtbaren Namen (kein Duplikat). */
.testimonial__name--mobil {
  display: none;
}
.testimonial__untertitel {
  font-weight: 800;
  color: var(--farbe-primaer-dunkel);
  font-size: 1.05rem;
  margin-bottom: 0.4rem;
}
.testimonial__text {
  margin-bottom: 1.6rem;   /* Luft zwischen Problem, Lösung, Stichpunkten */
}
.testimonial__inhalt .check-liste {
  margin-top: 0.5rem;
}

/* Stichpunkt-Liste mit Häkchen in Primärfarbe (überall wiederverwendbar) */
.check-liste {
  display: grid;
  gap: 0.6rem;
  margin-top: 1rem;
}
.check-liste li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
}
.check-liste li::before {
  content: '';
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  background-color: var(--farbe-primaer);
  border-radius: 50%;
  /* Weißes Häkchen als Hintergrund-Grafik (SVG als Data-URI, lädt ohne extra Datei) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 15px;
  background-position: center;
  background-repeat: no-repeat;
}


/* ---------- 5.5 ÜBER MICH (dunkle Sektion, graues Muster) ---------- */
.ueber {
  /* FARBVARIANTE – hier Bild tauschen zum Testen
     Standard: section-bg-grau.jpg | Alternative: section-bg-blau.jpg */
  background-image: linear-gradient(rgba(20, 20, 22, 0.55), rgba(20, 20, 22, 0.60)),
                    url('../assets/section-bg-grau.jpg');
  background-size: cover;
  background-position: center;
  padding-top: 4rem;   /* flachere Sektion */
  padding-bottom: 0;   /* Foto schließt unten bündig mit der Sektionskante ab */
}
.ueber__bild--freigestellt {
  text-align: center;
  align-self: end;     /* unten verankert, nicht schwebend */
}
/* Absätze im Über-mich-Text */
.ueber__text p + p {
  margin-top: 1rem;
}
.ueber__grid {
  display: grid;
  gap: 2rem;
  align-items: center;
}
/* Das <picture> soll sich exakt wie das alte <img> verhalten (block-Wrapper),
   damit die Desktop-Darstellung unverändert bleibt. */
.ueber__bild--freigestellt picture {
  display: block;
}
/* Freigestelltes Foto: ohne Rahmen/Schatten, vollständig sichtbar, unten bündig */
.ueber__bild--freigestellt img {
  border-radius: 0;
  box-shadow: none;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 760px;      /* großes Foto, nimmt deutlich mehr Raum ein */
  object-fit: contain;    /* nie beschneiden */
  margin: 0 auto;
  margin-bottom: 0;       /* sitzt direkt auf der Sektionskante */
  display: block;
  vertical-align: bottom;
}


/* ---------- 5.6 SECHS GRÜNDE ---------- */
/* Feine, dezente Trennlinie zur folgenden Vergleichs-Sektion */
.gruende {
  border-bottom: 1px solid rgba(60, 60, 60, 0.12);
  padding-bottom: calc(var(--sektion-abstand) / 2);   /* weniger Freiraum zum Vergleich darunter */
}
.vergleich {
  padding-top: calc(var(--sektion-abstand) / 2);
}
.gruende__grid {
  display: grid;
  gap: 1.75rem;
}
.grund {
  background-color: var(--farbe-weiss);
  padding: 2rem 1.9rem;
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  border-top: 4px solid var(--farbe-primaer);
}
/* Icon-Kreis statt Nummer */
.grund__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background-color: var(--farbe-primaer);
  color: var(--farbe-sekundaer);
  border-radius: 50%;
  margin-bottom: 1rem;
}
.grund__icon svg {
  width: 27px;
  height: 27px;
}
.grund__titel {
  font-size: 1.15rem;   /* wieder wie ursprünglich (wirkt als richtiger Titel) */
  margin-bottom: 0.5rem;
}


/* ---------- 5.7 VERGLEICH (Akkordeon, helle Sektion) ---------- */
.vergleich__grid {
  display: grid;
  gap: 1.5rem;
}
.vergleich__spalte {
  border-radius: var(--radius);
  padding: 2rem 1.8rem;   /* etwas höhere Boxen */
  background-color: var(--farbe-weiss);
  box-shadow: var(--schatten);
}
/* Rechte Spalte: dünner roter Rand (analog zum goldenen links) */
.vergleich__spalte--andere {
  border: 2px solid #C0392B;
}
/* Linke Spalte hervorgehoben (dunkelblau, heller Text) */
.vergleich__spalte--mein {
  background-color: var(--farbe-sekundaer);
  border: 2px solid var(--farbe-primaer);
}
.vergleich__kopf {
  font-size: 1.55rem;
  margin-bottom: 1.25rem;
  text-align: center;
  text-transform: uppercase;   /* MEIN COACHING / ANDERE PROGRAMME */
  letter-spacing: 0.03em;
  color: var(--farbe-sekundaer);
}
.vergleich__spalte--mein .vergleich__kopf { color: var(--farbe-weiss); }
.vergleich__spalte--andere .vergleich__kopf { color: #8a8a8a; }
/* Heller Text + hellere Trennlinien im dunklen Block */
.vergleich__spalte--mein .vergleich__frage { color: var(--farbe-weiss); }
.vergleich__spalte--mein .vergleich__item { border-bottom-color: rgba(255, 255, 255, 0.14); }
.vergleich__spalte--mein .vergleich__antwort-inhalt { color: var(--farbe-hell); }

/* Akkordeon-Zeile */
.vergleich__item {
  border-bottom: 1px solid rgba(17, 33, 46, 0.10);
}
.vergleich__item:last-child { border-bottom: none; }
.vergleich__frage {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  padding: 1.15rem 0.2rem;   /* mehr Höhe je Zeile */
  font-family: inherit;
  font-size: 1.12rem;        /* etwas größerer Text */
  font-weight: 700;
  color: var(--farbe-sekundaer);
}
/* Titel nimmt den freien Platz ein, damit das +-Symbol rechts steht */
.vergleich__frage > span:not(.vergleich__plus) {
  flex: 1;
}
/* Icon links vor jedem Punkt: grünes Häkchen bzw. rotes X */
.vergleich__frage::before {
  content: '';
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.vergleich__spalte--mein .vergleich__frage::before {
  /* grünes Häkchen */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2334A853' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
.vergleich__spalte--andere .vergleich__frage::before {
  /* rotes X */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C0392B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
}
.vergleich__spalte--andere .vergleich__frage { color: #6a6a6a; }
/* Plus-Symbol rechts (wird beim Öffnen zum Minus) */
.vergleich__plus {
  position: relative;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}
.vergleich__plus::before,
.vergleich__plus::after {
  content: '';
  position: absolute;
  background-color: var(--farbe-primaer);
  border-radius: 2px;
}
.vergleich__plus::before { top: 8.75px; left: 0; width: 20px; height: 2.5px; }
.vergleich__plus::after  { left: 8.75px; top: 0; width: 2.5px; height: 20px; transition: transform 0.3s ease; }
.vergleich__item.ist-offen .vergleich__plus::after { transform: rotate(90deg); }
/* Antwort standardmäßig zugeklappt */
.vergleich__antwort {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.vergleich__antwort-inhalt {
  padding: 0 0.2rem 1.15rem;
  font-weight: 400;
  font-size: 1.02rem;
  color: var(--farbe-text);
}
.vergleich__spalte--andere .vergleich__antwort-inhalt { color: #6a6a6a; }


/* ---------- 5.8 ZUSAMMENARBEIT (3 Schritte, dunkelblaue Sektion) ---------- */
.zusammenarbeit {
  /* FARBVARIANTE – hier Bild tauschen zum Testen
     Standard: section-bg-blau.jpg | Alternative: section-bg-grau.jpg */
  background-image: linear-gradient(rgba(17, 33, 46, 0.90), rgba(17, 33, 46, 0.92)),
                    url('../assets/section-bg-blau.jpg');
  background-size: cover;
  background-position: center;
}
.ablauf {
  display: grid;
  gap: 1.75rem;
  max-width: 820px;
  margin: 0 auto;
}
/* Schritt-Karte: alles zentriert (Icon, Label, Titel, Text) */
.ablauf__schritt {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
  background-color: var(--farbe-weiss);
  color: var(--farbe-text);   /* dunkler Text auf weißer Karte */
  padding: 1.9rem;
  border-radius: var(--radius);
  box-shadow: var(--schatten);
}
/* Höhere Spezifität nötig: sonst färbt ".sektion--dunkel h3" den Titel weiß
   und er wäre auf der weißen Box unsichtbar. */
.ablauf__schritt .ablauf__titel { color: var(--farbe-text); }
.ablauf__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  background-color: var(--farbe-primaer);
  color: var(--farbe-sekundaer);
  border-radius: 50%;
  flex-shrink: 0;
}
.ablauf__icon svg {
  width: 28px;
  height: 28px;
}
.ablauf__label {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--farbe-primaer-dunkel);
  margin-bottom: 0.35rem;
}
.ablauf__titel {
  font-size: 1.3rem;      /* fetter, deutlich sichtbarer Titel über dem Erklärtext */
  font-weight: 800;
  margin-bottom: 0.6rem;
}


/* ---------- 5.9 + 5.10 CTA-TEXT + KONTAKTFORMULAR (nebeneinander, helle Sektion) ---------- */
.cta-kontakt {
  background-color: var(--farbe-hell);   /* helle Sektion (Wechsel hell/dunkel) */
  /* halber vertikaler Abstand zu den angrenzenden Sektionen */
  padding-top: calc(var(--sektion-abstand) / 2);
  padding-bottom: calc(var(--sektion-abstand) / 2);
}
/* Grid: auf dem Handy untereinander (Text oben, Formular darunter) */
.cta-kontakt__grid {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}
.cta-kontakt__text {
  color: var(--farbe-text);
  text-align: center;   /* Textblock zentriert */
}
.cta-kontakt__text h2 {
  color: var(--farbe-sekundaer);
  margin-bottom: 2rem;   /* mehr Luft zwischen Überschrift und Text */
}
.cta-kontakt__untertext {
  margin-top: 1rem;
  opacity: 0.85;
  max-width: 34ch;          /* verhindert ein alleinstehendes Wort am Zeilenende */
  margin-left: auto;
  margin-right: auto;
  text-wrap: balance;
}
.cta-kontakt__cta {
  margin-top: 1.75rem;
}
/* Titel über der Formular-Karte */
.kontakt__box-titel {
  color: var(--farbe-sekundaer);
  font-size: 1.4rem;
  margin-bottom: 1rem;
  text-align: center;
}


/* ---------- Formular-Karte ---------- */
.kontakt__box {
  margin: 0 auto;
  max-width: 460px;           /* kompaktere, schmalere Formular-Karte */
  background-color: var(--farbe-weiss);
  color: var(--farbe-text);   /* dunkler Text auf weißer Karte */
  padding: 1.5rem;
  border-radius: var(--radius);
  box-shadow: var(--schatten-stark);
}
.formular__reihe {
  display: grid;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.formular__feld {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.formular__feld label {
  font-weight: 600;
  font-size: 0.9rem;
}
.formular__feld input,
.formular__feld textarea {
  font-family: inherit;
  font-size: 0.95rem;
  padding: 0.55rem 0.8rem;    /* kleinere Feldhöhe */
  border: 1.5px solid #d4d4d4;
  border-radius: var(--radius-klein);
  background-color: var(--farbe-hell-2);
  transition: border-color 0.2s ease;
}
.formular__feld input:focus,
.formular__feld textarea:focus {
  border-color: var(--farbe-primaer);
  outline: none;
}
.formular__feld textarea {
  resize: vertical;
  min-height: 80px;
}

/* --- Telefonfeld: Ländervorwahl-Dropdown (intl-tel-input) --- */
/* Passt die Bibliothek optisch an unsere Formularfelder an */
.iti {
  display: block;
  width: 100%;
}
/* Telefonfeld auf volle Breite – sonst nutzt die Bibliothek die Standardbreite */
.iti > input,
.iti input[type="tel"] {
  width: 100%;
}
.iti__selected-flag {
  border-radius: var(--radius-klein) 0 0 var(--radius-klein);
  padding-left: 0.7rem;
}
.iti--separate-dial-code .iti__selected-flag {
  background-color: transparent;
}
.iti--separate-dial-code .iti__selected-dial-code {
  font-size: 0.95rem;
  color: var(--farbe-text);
}
/* Scrollbare Länderliste */
.iti__country-list {
  max-height: 230px;
  border-radius: var(--radius-klein);
  box-shadow: var(--schatten);
  font-size: 0.92rem;
}
.iti__country.iti__highlight {
  background-color: rgba(235, 164, 24, 0.18);
}
/* Datenschutz-Checkbox-Zeile */
.formular__datenschutz {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 1rem 0;
  font-size: 0.85rem;
}
.formular__datenschutz input {
  margin-top: 0.25rem;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--farbe-primaer);
}
.formular__datenschutz a {
  color: var(--farbe-primaer-dunkel);
  text-decoration: underline;
}
/* Fehlermeldung beim Formular-Versand (per JavaScript ein-/ausgeblendet) */
.formular__fehler {
  color: #b04a4a;
  background-color: #fbeaea;
  border-left: 4px solid #b04a4a;
  padding: 0.85rem 1rem;
  margin-bottom: 1rem;
  font-size: 0.92rem;
  border-radius: var(--radius-klein);
}
.formular__submit {
  width: 100%;
}


/* ---------- 5.11 STUDIO / BILDERBAND ---------- */
/* Halber Abstand zur Sektion darüber */
.studio {
  padding-top: calc(var(--sektion-abstand) / 2);
}
/* GPS-/Standort-Icon über der Überschrift */
.studio__pin {
  display: block;
  color: var(--farbe-primaer);
  margin-bottom: 0.75rem;
}
.studio__pin svg {
  width: 40px;
  height: 40px;
  margin: 0 auto;
}
.studio__text {
  max-width: 760px;
  margin: 0 auto 2.5rem;
  text-align: center;
  text-wrap: pretty;   /* kein alleinstehendes Wort am Zeilenende */
}

/* Durchlaufendes Bilderband (Marquee) über die volle Breite */
.marquee {
  width: 100%;
  overflow: hidden;
  /* Weiches Ausfaden zum linken/rechten Rand (Bilder verschwimmen beim Rein-/Rauslaufen) */
  -webkit-mask-image: linear-gradient(to right, transparent 0, rgba(0,0,0,0.35) 6%, #000 16%, #000 84%, rgba(0,0,0,0.35) 94%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, rgba(0,0,0,0.35) 6%, #000 16%, #000 84%, rgba(0,0,0,0.35) 94%, transparent 100%);
}
.marquee__track {
  display: flex;
  gap: 1rem;
  width: max-content;
  will-change: transform;
}
/* Fester Rahmen je Bild – beim Hover zoomt nur der Bildinhalt hinein */
.marquee__bild {
  display: block;
  flex-shrink: 0;
  overflow: hidden;              /* Rahmengröße bleibt gleich */
  border-radius: var(--radius);
  line-height: 0;
}
.marquee__track img {
  height: clamp(216px, 31vw, 360px);   /* ca. +20 % größer (Bilder inkl. Rahmen) */
  width: auto;
  max-width: none;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
  transition: transform 0.45s ease;
}
.marquee__bild:hover img,
.marquee__bild.ist-getippt img {
  transform: scale(1.08);        /* leichter Reinzoom beim Drüberfahren / Antippen */
}


/* ---------- 5.12 FAQ (Akkordeon) ---------- */
/* Bewusst flacher als die übrigen Sektionen */
.faq-sektion {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}
.faq-sektion .sektion-kopf {
  margin-bottom: 2rem;
}
.faq {
  max-width: 820px;
  margin: 0 auto;
  display: grid;
  gap: 0.75rem;
}
.faq__item {
  background-color: var(--farbe-weiss);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  overflow: hidden;
}
.faq__frage {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.95rem 1.3rem;   /* flacher */
  font-family: inherit;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--farbe-sekundaer);
}
.faq__frage-icon {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  color: var(--farbe-primaer);
  transition: transform 0.3s ease;
}
.faq__item.ist-offen .faq__frage-icon {
  transform: rotate(45deg);      /* "+" wird zu "x" */
}
/* Antwort ist standardmäßig zugeklappt (Höhe 0) */
.faq__antwort {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.faq__antwort-inhalt {
  padding: 0 1.4rem 1.25rem;
}


/* =============================================================
   6. FOOTER
   ============================================================= */
.footer {
  background-color: var(--farbe-sekundaer);
  color: var(--farbe-hell);
  padding: 1.75rem 0 1rem;   /* flacher, weniger Innenabstand */
}
/* Alles zentriert; Logo bleibt in seiner Größe, nur die Abstände drumherum sind kleiner */
.footer__grid {
  display: grid;
  gap: 1.1rem;
  text-align: center;
  justify-items: center;
}
.footer__logo img {
  height: 96px;   /* unverändert */
  margin: 0 auto 0.4rem;
}
.footer__marke {
  font-weight: 700;
  color: var(--farbe-weiss);
  font-size: 1.2rem;
}
/* Social-Media-Icons */
.footer__social {
  display: flex;
  justify-content: center;
  gap: 1.1rem;
}
.footer__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.footer__social a:hover {
  background-color: var(--farbe-primaer);
  color: var(--farbe-sekundaer);
  transform: translateY(-2px);
}
.footer__social svg {
  width: 24px;
  height: 24px;
}
.footer__links {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
  font-size: 1.05rem;
  font-weight: 600;
}
.footer__links a:hover {
  color: var(--farbe-primaer);
}
.footer__copyright {
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  text-align: center;
  font-size: 0.95rem;
  opacity: 0.85;
}


/* =============================================================
   RECHTS-SEITEN (Datenschutz / Impressum) – schlichte Textseiten
   ============================================================= */
.rechtsseite {
  max-width: 820px;
  margin: 0 auto;
  padding: 3rem 1.25rem 4rem;
}
.rechtsseite h1 {
  margin-bottom: 1.5rem;
  font-size: clamp(1.8rem, 5vw, 2.5rem);
}
.rechtsseite h2 {
  margin: 2rem 0 0.75rem;
  font-size: 1.3rem;
}
.rechtsseite p { margin-bottom: 1rem; }
.rechtsseite .platzhalter-hinweis {
  background-color: #fff6e2;
  border-left: 4px solid var(--farbe-primaer);
  padding: 1rem 1.2rem;
  border-radius: var(--radius-klein);
  margin-bottom: 2rem;
  font-size: 0.95rem;
}


/* =============================================================
   DANKE-SEITE
   ============================================================= */
/* Hero-Bereich: Bild füllt den oberen Bereich, Text liegt darauf */
.danke-hero {
  position: relative;
  display: flex;
  align-items: center;
  /* ca. 70–80 % der Bildschirmhöhe, mit sinnvollen Grenzen für sehr
     kleine/große Bildschirme */
  min-height: clamp(480px, 76vh, 780px);
  color: var(--farbe-weiss);
  /* FARBVARIANTE – hier Bild tauschen zum Testen
     Standard: danke-header-schwarz.jpg | Alternativen: danke-header-blau.jpg, danke-header-grau.jpg
     Zusätzlicher schwarzer Verlauf sorgt auch dann für guten Kontrast,
     wenn der im Bild eingebaute dunkle Bereich auf schmalen Bildschirmen
     weggeschnitten wird. */
  background-image: linear-gradient(to right,
                      rgba(0, 0, 0, 0.82) 0%,
                      rgba(0, 0, 0, 0.55) 42%,
                      rgba(0, 0, 0, 0.15) 70%,
                      rgba(0, 0, 0, 0) 100%),
                    url('../assets/danke-header-schwarz.jpg');
  background-size: cover;
  /* "top" statt "center": schneidet bei sehr breiten/flachen Fenstern nur
     unten etwas ab, statt oben in den Kopf hineinzuschneiden */
  background-position: center top;
}
.danke-hero__inhalt {
  max-width: 560px;
  /* ordentlich Abstand zum linken Rand, zusätzlich zum Container-Rand */
  padding-left: clamp(0px, 3vw, 2.5rem);
}
.danke-hero h1 {
  color: var(--farbe-weiss);
  /* Schriftgröße skaliert mit der Fensterbreite, damit der Satz garantiert
     in einer Zeile bleibt (kein Umbruch, auf keiner Bildschirmgröße) */
  font-size: clamp(0.85rem, 4.7vw, 2.7rem);
  letter-spacing: -0.01em;
  white-space: nowrap;
  margin-bottom: 1.25rem;
}
.danke-hero__text {
  font-size: 1.05rem;
  line-height: 1.6;
  margin-bottom: 1.1rem;
}
/* Zweiter Absatz etwas gedämpfter/grauer */
.danke-hero__text--gedaempft {
  color: #b8b8b8;
}
.danke-hero__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.75rem;
}
/* Zweiter Button: transparent mit hellem Rand */
.btn--outline {
  background-color: transparent;
  color: var(--farbe-weiss);
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  box-shadow: none;
}
.btn--outline:hover {
  background-color: rgba(255, 255, 255, 0.12);
  transform: translateY(-2px);
}
.btn--outline svg {
  width: 20px;
  height: 20px;
}


/* =============================================================
   7. RESPONSIVE – TABLET (ab 640px)
   ============================================================= */
@media (min-width: 640px) {
  .hero__punkte {
    gap: 1.25rem;
  }
  .bausteine {
    grid-template-columns: repeat(2, 1fr);
  }
  .gruende__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .formular__reihe--zwei {
    grid-template-columns: 1fr 1fr;   /* Vorname + Nachname nebeneinander */
  }
  /* Footer bleibt bewusst einspaltig und zentriert (Referenz-Look) */
}


/* =============================================================
   7. RESPONSIVE – DESKTOP (ab 900px)
   ============================================================= */
@media (min-width: 900px) {
  :root {
    --sektion-abstand: 7.5rem;   /* Großzügiger Weißraum auf großen Bildschirmen */
  }

  /* --- Navigation: normales horizontales Menü, Burger weg --- */
  .nav__burger { display: none; }
  .nav__menu {
    position: static;
    flex-direction: row;
    align-items: center;
    width: auto;
    height: auto;
    background: none;
    padding: 0;
    transform: none;
    box-shadow: none;
    gap: 1.75rem;
  }
  /* Logo links fest verankert und zusätzlich etwas näher an den Fensterrand
     gerückt – damit die Menüpunkte exakt in der Mitte der Leiste sitzen. */
  .nav__logo {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) translateX(-14px);
  }
  /* Menü über die volle Breite, Links mittig */
  .nav__menu {
    flex: 1;
    justify-content: center;
  }
  .nav__link {
    width: auto;
    padding: 0.5rem 0;
  }
  /* CTA-Button fest am rechten Rand (aus dem Fluss genommen, damit die
     Menüpunkte mittig bleiben) – mit spürbarem Abstand zum Fensterrand,
     nicht ganz am äußersten Rand. Die untere Grenze -14px garantiert einen
     Mindestabstand (entspricht der Container-Innenrand-Breite), auch wenn
     der Container breiter ist als das Fenster. */
  .nav__menu > li:last-child {
    position: absolute;
    right: calc(-1 * clamp(-14px, calc((100vw - var(--container-breite)) / 2 - 56px), 260px));
    top: 50%;
    transform: translateY(-50%);
    margin-left: 0;
  }
  .nav__cta {
    margin-top: 0;
    width: auto;
  }

  /* --- Hero: Text links begrenzt, rechts bleibt das Foto frei --- */
  .hero {
    padding: 2.75rem 0 3rem;   /* kompakt, weniger leerer Raum */
    text-align: left;
    /* FARBVARIANTE – hier Bild tauschen zum Testen
       Standard: header-desktop-schwarz.jpg | Alternative: header-desktop.jpg
       Schwarzer Verlauf passend zum eingebauten Verlauf des Bildes:
       links schwarz (Text lesbar) -> rechts komplett frei fürs Foto */
    background-image: linear-gradient(to right,
                        rgba(0, 0, 0, 0.88) 0%,
                        rgba(0, 0, 0, 0.70) 38%,
                        rgba(0, 0, 0, 0.25) 62%,
                        rgba(0, 0, 0, 0) 100%),
                      url('../assets/header-desktop-schwarz.jpg');
    background-position: center right;
  }
  /* Textbereich auf die linke bis mittlere Hälfte begrenzen */
  .hero__inhalt {
    max-width: 60%;
  }
  .hero h1,
  .hero__intro {
    margin-left: 0;
    margin-right: 0;
  }
  /* USP-Punkte untereinander, linksbündig (statt 3 Spalten) */
  .hero__punkte {
    grid-template-columns: 1fr;
    max-width: 560px;
    margin: 0 0 1.75rem;
  }
  .hero__cta {
    text-align: left;
  }

  /* --- Problem: Text links, große Collage rechts --- */
  .problem__grid {
    grid-template-columns: 0.85fr 1.25fr;   /* Collage deutlich größer */
    gap: 3.5rem;
    align-items: center;
  }

  /* --- Angebot: drei Karten nebeneinander --- */
  .bausteine {
    grid-template-columns: repeat(3, 1fr);
  }

  /* --- Testimonials: Bild + Zitat links, Textspalte rechts (wie Referenz) ---
     Zusammensetzung per grid-template-areas, damit die HTML-Reihenfolge
     (mobiler Name, Bild, Inhalt, Zitat) unabhängig von der Desktop-Optik ist.
     Werte exakt wie zuvor: zwei gleich breite Spalten (column-gap 0), Zitat
     ~1.25rem unter dem Bild, Inhalt spannt beide Zeilen rechts. */
  .testimonial {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "bild  inhalt"
      "zitat inhalt";
    grid-template-rows: auto 1fr;
    column-gap: 0;
    row-gap: 1.25rem;
    align-items: start;
  }
  .testimonial__bildspalte { grid-area: bild; }
  .testimonial__zitatbox   { grid-area: zitat; }
  .testimonial__inhalt {
    grid-area: inhalt;
    padding: 2.2rem 2.4rem;
  }
  /* Stichpunkte untereinander – jeder in einer eigenen Zeile */
  .testimonial__inhalt .check-liste {
    grid-template-columns: 1fr;
  }
  /* Zickzack (Gabi): Bild + Zitat rechts, Textspalte links */
  .testimonial--bild-rechts {
    grid-template-areas:
      "inhalt bild"
      "inhalt zitat";
  }

  /* --- Über mich: Text links, Foto rechts (groß, unten bündig verankert) --- */
  .ueber__grid {
    grid-template-columns: 1.25fr 1fr;   /* Textbereich breiter, näher am Foto */
    gap: 1rem;
    align-items: end;
  }
  /* Die Bildspalte darf bis zu 2,75 cm in den freien Rand neben dem Container
     hineinragen. Dadurch rückt das Foto nach rechts UND wird gleichzeitig
     größer – ohne dass der Textbereich schmaler wird.
     clamp() nutzt nur den tatsächlich freien Platz -> nie abgeschnitten. */
  .ueber__bild--freigestellt {
    margin-right: calc(-1 * clamp(0px, calc((100vw - var(--container-breite)) / 2), 3.75cm));
  }
  /* Text behält seinen Abstand nach unten, das Foto schließt bündig ab */
  .ueber__text {
    align-self: center;
    padding-bottom: 4rem;
  }

  /* --- 6 Gründe: 3 Spalten --- */
  .gruende__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* --- Vergleich: 2 Spalten nebeneinander --- */
  .vergleich__grid {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    align-items: start;
  }

  /* --- Zusammenarbeit: drei Schritte nebeneinander --- */
  .ablauf {
    grid-template-columns: repeat(3, 1fr);
    max-width: none;
    gap: 2rem;
    align-items: stretch;
  }

  /* --- CTA-Text + Formular nebeneinander (Text links, Formular rechts) --- */
  .cta-kontakt__grid {
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
    align-items: center;
  }
  .kontakt__box-titel {
    text-align: left;
  }

  /* --- Kontaktformular: kompakter Innenabstand --- */
  .kontakt__box {
    padding: 1.75rem;
  }

  /* --- FAQ: zwei Spalten (drei Fragen links, drei rechts) --- */
  .faq {
    max-width: none;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;      /* füllt erst die linke, dann die rechte Spalte */
    align-items: start;
    gap: 1rem 1.5rem;
  }
}


/* =============================================================
   RESPONSIVE – GROSSER DESKTOP (ab 1200px)
   Erst ab hier sind die drei Baustein-Karten breit genug, damit
   "Ernährungstipps für den Alltag" in einer Zeile Platz hat.
   ============================================================= */
@media (min-width: 1200px) {
  .baustein__titel-umbruch {
    display: none;
  }
}


/* Elemente, die NUR in der Mobilansicht (<768px) erscheinen – standardmäßig
   ausgeblendet, damit Desktop/Tablet unverändert bleiben. */
.nur-mobil-br { display: none; }
.problem__trenner { display: none; }
.bausteine__zwischentitel { display: none; }
.ueber__titel-mobil { display: none; }


/* =============================================================
   MOBIL-SPEZIFISCHE ANPASSUNGEN (nur unter 768px)
   Steht bewusst NACH allen min-width-Queries, damit diese Regeln im
   Überschneidungsbereich (640–767px) gewinnen. Die Desktop-Ansicht
   (ab 768px) bleibt davon vollständig unberührt.
   ============================================================= */
@media (max-width: 767px) {

  /* --- Punkt 1: Hero neu aufgebaut (Text oben, Person Mitte, Button unten) ---
     Verlauf: oben dunkel (trägt den Text bis ~66 %), im Bereich Gesicht/Brust/Arme
     (71–88 %) fast transparent (frei sichtbar), ganz unten wieder dunkler als ruhige
     Basis für den Button. */
  .hero {
    background-image: linear-gradient(to bottom,
                        rgba(0, 0, 0, 0.85) 0%,
                        rgba(0, 0, 0, 0.72) 46%,
                        rgba(0, 0, 0, 0.35) 63%,
                        rgba(0, 0, 0, 0.05) 71%,
                        rgba(0, 0, 0, 0.05) 88%,
                        rgba(0, 0, 0, 0.55) 95%,
                        rgba(0, 0, 0, 0.75) 100%),
                      url('../assets/header-mobile.jpg');
    /* Ganzes Foto, unten verankert. Feste Höhe 48rem (768px): Kopf-Oberkante bei
       ~68 % (~522px) sitzt direkt unter dem Textblock (endet ~510px); Gesicht,
       Brust/Logo und Oberarme (bis ~88 %) frei; der Button wird per margin-top:auto
       ans untere Ende geschoben und liegt unter den Armen. Passt ohne Scrollen. */
    background-size: cover, cover;
    background-position: center, center bottom;
    background-repeat: no-repeat, no-repeat;
    background-color: var(--farbe-sekundaer);   /* Fallback-Dunkel unter dem Button */
    min-height: 48rem;
    display: flex;
    flex-direction: column;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
  /* Container + Textblock füllen die Hero-Höhe, damit der Button unten andocken kann */
  .hero > .container {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
  }
  .hero__inhalt {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
  }
  .hero__cta {
    margin-top: auto;   /* Button ans untere Ende des Hero-Bereichs */
  }
  /* Alle großen CTA-Buttons kompakter (Hero, Angebot, Formular – einheitlich) */
  .btn--gross {
    font-size: 0.98rem;
    padding: 0.72rem 1.7rem;
  }
  .btn__hinweis {
    font-size: 0.72rem;
  }

  /* --- Punkt 2: Hero-Einleitung kleiner + saubere Umbrüche (keine Wort-Waisen) --- */
  .hero__intro {
    font-size: 0.9rem;
    line-height: 1.5;
  }
  .hero__intro,
  .sektion-kopf p,
  .problem__block p,
  .ueber__text p,
  .studio__text,
  .testimonial__text,
  .baustein__inhalt p {
    text-wrap: pretty;   /* verhindert einzelne Wörter am Zeilenende */
  }

  /* --- Punkt 4a: Zeilenumbruch nach "Frust," (nur mobil) --- */
  .nur-mobil-br { display: inline; }

  /* --- Hero-Punkte kompakter (weniger Höhe pro Punkt) --- */
  .hero__punkte {
    gap: 0.5rem;
    margin-bottom: 1.25rem;
  }
  /* Gelbes Icon etwas höher: auf mittlerer Höhe zwischen der fetten Überschrift
     und dem Text darunter (statt exakt mittig über beide Zeilen). */
  .hero__punkt {
    gap: 0.6rem;
    padding: 0.1rem 0;
    align-items: flex-start;
  }
  .hero__punkt-icon {
    width: 21px;
    height: 21px;
    margin-top: 0.15rem;   /* Icon mittig auf der fetten Titelzeile (wie Desktop) */
  }
  .hero__punkt-text {
    font-size: 0.85rem;
    line-height: 1.3;
  }

  /* --- Bausteine: kompakter (mehr Querformat) + Text mittig auf dem Bild --- */
  .baustein {
    aspect-ratio: 16 / 10;
  }
  .baustein__inhalt {
    margin: auto;            /* Text vertikal + horizontal zentriert auf dem Bild */
    padding: 1rem 1.1rem;
  }
  .baustein__titel {
    margin-bottom: 0.4rem;
  }
  .baustein__inhalt p {
    font-size: 0.95rem;
  }

  /* --- Testimonial-Reihenfolge auf dem Handy (wie Referenz):
         1. Name + Alter, 2. Bild, 3. Problem, 4. Lösung, 5. Stichpunkte,
         6. Zitat-Box (ganz unten).
         Robuste Lösung ohne display:contents: alle vier Bausteine sind
         direkte Kinder des Artikels und werden per flex-order sortiert. --- */
  .testimonial {
    display: flex;
    flex-direction: column;
    gap: 0;   /* Abstände einzeln per margin, damit der Name eng am Bild sitzt */
  }
  /* Mobiler Name ganz oben einblenden, den Desktop-Namen im Inhalt ausblenden
     -> pro Ansicht immer nur ein sichtbarer Name (kein Duplikat).
     Punkt 6: Name größer und dicht über dem Bild. */
  .testimonial__name--mobil {
    display: block;
    order: 1;
    font-size: 1.55rem;
    margin-bottom: 0.35rem;
  }
  .testimonial__inhalt .testimonial__name {
    display: none;
  }
  .testimonial__bildspalte {
    order: 2;
    margin-bottom: 1.5rem;
  }
  .testimonial__inhalt {
    order: 3;
    padding: 0;
    margin-bottom: 1.5rem;
  }
  .testimonial__zitatbox {
    order: 4;                /* Zitat-Box ganz unten */
  }

  /* --- Schriftgrößen mobil: ruhiger & näher an der Referenz (nichts zu groß) --- */
  .hero h1 {
    font-size: 1.8rem;
  }
  .sektion h2 {
    font-size: 1.75rem;   /* etwas größer als vorher (1,55rem) */
    line-height: 1.3;
  }
  /* 6-Gründe-Titel ist lang (Wort „Wohlfühlfigur") -> gezielt kleiner, damit er
     2-zeilig bleibt (ab 1,5rem entsteht eine dritte Zeile). */
  .gruende h2 {
    font-size: 1.4rem;
  }
  /* Problem-Überschrift: Zeilen wieder eng zusammen (wie vorher). Die gelbe
     Markierung wird als BAND gerendert (kürzer als die Zeilenhöhe, mittig), sodass
     zwischen oberer und unterer markierter Zeile eine feine helle Trennung entsteht
     (Textmarker-Optik über zwei Zeilen statt durchgehender Block). */
  .problem__kopf h2 {
    line-height: 1.32;
  }
  .problem__kopf .textmarker {
    background-size: 100% 72%;
    background-repeat: no-repeat;
    background-position: 0 center;
    padding-top: 0;
    padding-bottom: 0;
  }
  .sektion-kopf p {
    font-size: 1rem;
  }
  .testimonial__untertitel {
    font-size: 1rem;
  }
  .testimonial__text {
    font-size: 0.95rem;
  }
  .ueber__text p,
  .problem__block p {
    font-size: 0.98rem;
  }

  /* --- Überschrift zentriert + feine Trennlinie zwischen Überschrift und
         erstem Textblock (wie die übrigen Trennlinien) --- */
  .problem__kopf {
    text-align: center;
    border-bottom: 1px solid rgba(60, 60, 60, 0.18);
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
  }

  /* --- Punkt 4b: feine Trennlinie zwischen Textpunkten und Collage --- */
  .problem__trenner {
    display: block;
    height: 1px;
    background-color: rgba(60, 60, 60, 0.18);
    margin: 1.6rem 0;
  }

  /* --- Punkt 5: Zwischentitel über den Bausteinen (auf dunklem Grund, weiß) --- */
  .bausteine__zwischentitel {
    display: block;
    text-align: center;
    color: var(--farbe-weiss);
    font-weight: 700;
    font-size: 1.75rem;   /* gleiche Größe wie die Section-Überschrift „Dein Weg zur Wohlfühlfigur" */
    margin: 0 0 1.25rem;
  }

  /* --- Punkt 7: Über mich – Reihenfolge Überschrift, Bild, dann Text --- */
  .ueber {
    padding-top: 2rem;      /* weniger Abstand nach oben zur vorherigen Section */
    padding-bottom: 3rem;   /* Bild ist nicht mehr das letzte Element -> wieder Abstand unten */
  }
  .ueber__grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: stretch;
  }
  .ueber__titel-mobil {
    display: block;
    order: 1;
    margin-bottom: 0;
  }
  .ueber__bild--freigestellt {
    order: 2;
    align-self: stretch;
  }
  /* Über-mich-Foto (mobil = rechteckiges Foto) leicht abgerundete Ecken (Referenz).
     Desktop bleibt eckig, da dort ein freigestelltes PNG unten bündig steht. */
  .ueber__bild--freigestellt img {
    border-radius: var(--radius);
  }
  .ueber__text {
    order: 3;
  }
  .ueber__text h2 {
    display: none;   /* Desktop-Titel mobil ausblenden (mobiler Titel steht oben) */
  }

  /* --- Punkt 8: Standort-Text als zwei getrennte Absätze --- */
  .studio__absatz2 {
    display: block;
    margin-top: 1rem;
  }

  /* Slider: weniger blauer Freiraum unter dem Bilderband zur nächsten Section
     (Studio-padding-bottom von 4,5rem auf die Hälfte). */
  .studio {
    padding-bottom: calc(var(--sektion-abstand) / 2);
  }

  /* --- Slider/Marquee-Bilder mobil: 207px → 248px (nochmal ca. +20 %) --- */
  .marquee__track img {
    height: 248px;
  }
}


/* =============================================================
   Reduzierte Bewegung – respektiert Nutzer-Einstellung
   (Menschen, die keine Animationen mögen/vertragen)
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}