/* ═══════════════════════════════════════════════════════════
   Carolin Wetter · Gestaltung „klar" (v2)

   Die verbindliche Gestaltung (festgelegt 08.10.2026). Überlagert
   style.css: einfarbig Lila, keine Emojis, kantig, Grauton wie auf
   Carolins alter Seite. Frühere Fassungen „original“ und „wix“ liegen
   nur noch in Git (Tag fassungen-original-wix-klar).
   ═══════════════════════════════════════════════════════════ */

/* 1 · Eine Farbe statt zwei.
   Das Grün kam von mir, es steht nirgends in ihrer Marke. Wo bisher
   Grün Zustimmung signalisierte, tut das jetzt dasselbe Lila. */
:root{
  --gruen:#752E6B;
  --gruen-dunkel:#5A2252;
  --gruen-hell:#F6EFF5;
  --gold:#8A7A52;          /* Sterne ruhiger, weniger Bonbon */
  --r:6px;                 /* kantig statt rund */
  --schatten:0 10px 30px rgb(36 31 38 / .07);
  --schatten-stark:0 18px 44px rgb(36 31 38 / .12);
}

/* 2 · Keine Emojis. Die Kacheln tragen Text, kein Bildchen. */
.problem em,
.vorteil .ic,
.kasse em,
.foot__pille span[aria-hidden],
.fuer__k .emoji,
.quiz__opt > em[aria-hidden]{ display:none !important }
/* Der Haken bei Mehrfachauswahl bleibt – er ist Funktion, keine Dekoration. */
.quiz__opt{ padding-left:20px }

.problem{ padding:16px 18px; gap:0 }
.vorteil{ padding-top:26px }
.fuer__k{ padding-top:30px }
/* Statt des Symbols eine feine Linie – gibt Struktur ohne Verspieltheit. */
.vorteil::before,
.fuer__k::before{
  content:"";display:block;width:34px;height:2px;
  background:var(--lila);margin-bottom:18px;opacity:.75
}
.kasse{ padding-left:22px;border-left:3px solid var(--lila) }

/* 3 · Kanten statt Pillen. Knöpfe bleiben klar erkennbar,
   verlieren aber den spielerischen Bonbon-Charakter. */
.btn{ border-radius:2px;letter-spacing:.02em }
.btn--gruen{ background:var(--lila);color:#fff;box-shadow:none }
.btn--gruen:hover{ background:var(--lila-dunkel);color:#fff }
.btn--primary{ box-shadow:none }
.btn--primary:hover{ box-shadow:none;transform:none;background:var(--lila-dunkel) }
.btn--ghost:hover{ transform:none }
.nav .btn--primary{ box-shadow:none }
.foot__pille,.foot__note,.chip,.fb-status{ border-radius:2px }

.karte,.vorteil,.fuer__k,.ang,.stimme,.info,.intro,.blogkarte,
.sub__bild,.hero__bild,.ueber__bild,.hero__karte,.mega{ border-radius:3px }
.ang:hover,.fuer__k:hover,.vorteil:hover{ transform:none }
.ang:hover{ box-shadow:var(--schatten-stark) }

/* 4 · Überschriften mittig – so ist es auf ihrer alten Seite. */
.kopf{ margin-inline:auto;text-align:center;max-width:760px }
.kopf .lead{ margin-inline:auto }
.ablauf .schritt,.probleme .problem{ text-align:center }
.probleme .problem{ justify-content:center }

/* 5 · Das vollflächige Lila-Band ist ihre Signatur.
   Der Abschlussblock bekommt es ohne Foto-Überlagerung. */
.final{ background:var(--lila) }
.final::before{ opacity:.26 }
.final h2{ letter-spacing:-.01em }

/* 6 · Ruhigere Flächen. Weniger Verlauf, weniger Leuchten. */
.hero::before{ display:none }
.sand{ background:#F7F5F7 }
.vorteil--gruen{ background:var(--gruen-hell);border-color:#E4D8E2 }
.kasse{ background:var(--gruen-hell);border-color:#E4D8E2 }

/* 7 · Navigation wie im Original: gesperrt, in Versalien. */
.nav a{ font-size:13.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:600 }
.nav a::after{ background:var(--lila) }
.mega b{ text-transform:none;letter-spacing:0 }
.mega__alle{ text-transform:none;letter-spacing:0 }
@media (max-width:920px){ .nav a{ font-size:15px;letter-spacing:.06em } }

/* 8 · Sterne dezenter */
.sterne{ letter-spacing:3px;font-size:14px }

/* 9 · Der Grauton aus ihrer alten Seite – Carolin mag ihn sehr.
   Wie dort: Kopf und Fuß grau, einzelne Flächen als Verlauf
   von Grau nach Weiß bzw. Weiß nach Grau. */
.top{ background:rgb(227 227 227 / .95) }
.top.is-stuck{ border-color:transparent }
footer{ background:var(--grauton);border-top:0 }
.sand{ background:linear-gradient(180deg,#fff 0%,#F2F2F2 40%,var(--grauton) 100%) }
/* Direkt unter dem Hero: Grau läuft weiter, statt erst nach Weiß auszublenden */
.hero + .sand{ background:linear-gradient(180deg,#F6F6F6 0%,#F2F2F2 40%,var(--grauton) 100%) }
.sub{ background:linear-gradient(180deg,var(--grauton) 0%,#F1F1F1 55%,#fff 100%) }

/* 10 · Menü bleibt einzeilig: zwischen Handy-Menü und großem Bildschirm
   rückt es enger zusammen, statt „Über mich“ umzubrechen. */
.nav a{ white-space:nowrap }
@media (min-width:921px) and (max-width:1240px){
  .nav{ gap:clamp(12px,1.4vw,22px) }
  .nav a{ font-size:12.5px;letter-spacing:.06em }
  .nav .btn--primary{ padding-inline:16px }
}

/* Problem-Kästen heben sich beim Drüberfahren ab (Wunsch Carolin, 08.10.) */
.problem{ transition:background .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease }
@media (hover:hover){
  .problem:hover{ background:var(--lila);border-color:var(--lila);border-style:solid;color:#fff;box-shadow:var(--schatten) }
}

/* Startseite: 5 Angebote (Pilates ist in LAUFMAMALAUF aufgegangen) –
   die zweite Reihe mit den beiden Ernährungs-Kacheln mittig setzen. */
@media (min-width:901px){
  #angebote .angebote{ grid-template-columns:repeat(6,1fr) }
  #angebote .angebote > .ang{ grid-column:span 2 }
  #angebote .angebote > .ang:nth-child(4){ grid-column:2 / span 2 }
}

/* Aufklappmenü: lange Untertitel umbrechen statt die Spalte zu sprengen */
.mega{ grid-template-columns:repeat(2,minmax(0,1fr)) }
.mega--zwei{ grid-template-columns:repeat(2,minmax(0,1fr)) }
.mega a,.mega span,.mega b{ white-space:normal;min-width:0 }
/* Training hat seit Okt. 2026 nur noch drei Punkte → eine Spalte statt Lücke */
@media (min-width:921px){
  .mega:not(.mega--zwei){ grid-template-columns:minmax(0,1fr);width:min(400px,92vw) }
}

/* Unterseiten-Überschrift: nie mitten im Wort umbrechen. Die Schrift wird so
   begrenzt, dass das längste Wort (--lw, setzt der Generator) in die Textspalte
   passt – gemessen an der Spalte selbst, nicht am Bildschirm. Faktor .72 = Breite
   eines Großbuchstabens in dieser Schrift (fett, Versalien) inkl. Luft. */
.sub__grid > div:first-child{ container-type:inline-size }
.sub__grid h1{ font-size:min(clamp(32px,4.2vw,52px), calc(100cqi / (var(--lw,12) * .72))) }

/* Barrierefreiheit (Analyse 18.10.2026): Links im Fließtext der Fußzeile unterstrichen */
.foot__unten > span:first-child a{text-decoration:underline;text-underline-offset:3px}

/* Zweites Bewertungs-Abzeichen (personalfitness.de) neben Google */
.noten{ display:flex; flex-wrap:wrap; gap:14px 18px }
.note--link{ text-decoration:none; color:inherit; transition:border-color .2s, translate .2s }
.note--link:hover{ border-color:var(--lila); translate:0 -2px }

/* Siegel personalfitness.de im Fuß (Bild kommt von deren Server, Zahl bleibt aktuell) */
.foot__siegel{ display:block; width:86px; margin-top:16px; transition:translate .2s }
.foot__siegel:hover{ translate:0 -2px }
.foot__siegel img{ display:block; width:100%; height:auto; border-radius:4px }