/* =========================================================
   Sina Gundlach — „Powder Plum Soft"
   1:1 nach Design-Analyse (01_design-analyse.md)
   ========================================================= */

:root{
  /* Farben (gemessen am Bestand) */
  --pflaume:      #6A4765;
  --pflaume-tief: #573A53;   /* Hover */
  --rose:         #D1ADB9;
  --puder:        #E9D6D7;
  --puder-hell:   #F7EEED;
  --warmweiss:    #FFFAF5;
  --weiss:        #FFFFFF;
  --text:         #3D3D3D;
  --text-matt:    rgba(61,61,61,.72);

  --verlauf-puder:  linear-gradient(180deg, #F7EEED 0%, #E9D6D7 100%);
  --verlauf-mauve:  linear-gradient(180deg, #D1ADB9 0%, #6A4765 100%);

  /* Schrift */
  --schrift:       'Inter', system-ui, sans-serif;
  --schrift-serif: 'Roboto Slab', Georgia, serif;

  /* Form */
  --radius-button: 30px;     /* Pille, überall (Bestands-Inkonsistenz behoben) */
  --radius-karte:  16px;
  --radius-bild:   28px;

  /* Schatten — das eine Rezept des Bestands */
  --schatten: 0 0 64px -12px rgba(61,61,61,.35);

  /* Rhythmus */
  --container: 1312px;
  --rand: clamp(20px, 4vw, 48px);
  --sektion: clamp(64px, 9vw, 120px);

  /* Motion — drei Zeiten, eine Kurve */
  --dur-micro: 180ms;
  --dur-ui: 320ms;
  --dur-reveal: 680ms;
  --ease-out: cubic-bezier(.22,1,.36,1);
}

/* ---------- Schriften (lokal, kein Google-Server) ---------- */
@font-face{
  font-family:'Inter';
  src:url('/assets/fonts/inter-var-latin.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Roboto Slab';
  src:url('/assets/fonts/robotoslab-400-latin.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}

/* ---------- Basis ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{
  margin:0;background:var(--puder);color:var(--text);
  font-family:var(--schrift);
  font-size:clamp(0.9375rem,.9rem + .2vw,1.125rem);
  line-height:1.6;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
p{margin:0 0 1em;max-width:66ch}
:focus-visible{outline:2px solid var(--pflaume);outline-offset:3px;border-radius:4px}

.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--rand)}
.container.schmal{max-width:820px}
.sr-nur{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sprunglink{position:absolute;left:-9999px;top:0;z-index:100;background:var(--pflaume);color:#fff;padding:12px 20px;font-weight:600}
.sprunglink:focus{left:0}

/* ---------- Typografie (gemessen: Inter 600, 62px Desktop, −0,018em) ---------- */
h1{
  font-size:clamp(2.0625rem,1.35rem + 3.2vw,3.875rem);
  line-height:1.15;letter-spacing:-.018em;font-weight:600;
  color:var(--pflaume);margin:0 0 .4em;
}
h2{
  font-size:clamp(1.875rem,1.3rem + 2.6vw,3.4rem);
  line-height:1.18;letter-spacing:-.018em;font-weight:600;
  color:var(--pflaume);margin:0 0 .5em;max-width:22ch;
}
h3{
  font-size:clamp(1.25rem,1.15rem + .5vw,1.625rem);
  line-height:1.3;letter-spacing:-.02em;font-weight:600;
  color:var(--pflaume);margin:0 0 .45em;
}
.lead{
  font-size:clamp(1.0625rem,1rem + .3vw,1.25rem);
  line-height:1.55;color:var(--text-matt);max-width:58ch;
}
.kicker{
  font-size:15px;font-weight:500;color:var(--pflaume);
  margin:0 0 14px;
}

/* Wasserzeichen — Roboto Slab, Versalien, gesperrt */
.wasserzeichen{
  position:absolute;left:50%;transform:translateX(-50%);
  font-family:var(--schrift-serif);
  font-size:clamp(4rem,12vw,10rem);
  letter-spacing:.08em;white-space:nowrap;
  color:rgba(255,255,255,.28);
  pointer-events:none;user-select:none;line-height:1;
}

/* ---------- Navigation ---------- */
.nav{
  position:fixed;inset:0 0 auto;z-index:50;
  background:rgba(233,214,215,.86);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(61,61,61,.08);
}
.nav-innen{
  max-width:var(--container);margin-inline:auto;padding-inline:var(--rand);
  height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.nav-logo img{height:40px;width:auto}
.nav-liste{display:flex;align-items:center;gap:26px;list-style:none;margin:0;padding:0}
.nav-liste a:not(.knopf){
  text-decoration:none;font-size:15px;font-weight:500;color:var(--text);
  position:relative;padding:6px 0;
}
.nav-liste a:not(.knopf)::after{
  content:'';position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:var(--pflaume);transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur-micro) var(--ease-out);
}
.nav-liste a:not(.knopf):hover::after{transform:scaleX(1)}
.nav-cta{padding:11px 20px !important;font-size:14px !important}
.nav-knopf{display:none}

@media (max-width:1023px){
  .nav-knopf{
    display:flex;flex-direction:column;gap:6px;justify-content:center;
    width:44px;height:44px;padding:10px;background:none;border:0;cursor:pointer;
  }
  .nav-knopf-linie{height:2px;width:100%;background:var(--pflaume);transition:transform var(--dur-ui) var(--ease-out)}
  .nav-knopf[aria-expanded="true"] .nav-knopf-linie:first-child{transform:translateY(4px) rotate(45deg)}
  .nav-knopf[aria-expanded="true"] .nav-knopf-linie:last-child{transform:translateY(-4px) rotate(-45deg)}
  .nav-liste{
    position:fixed;inset:76px 0 0;background:var(--puder);
    flex-direction:column;align-items:flex-start;justify-content:center;
    gap:10px;padding:var(--rand);
    transform:translateX(102%);visibility:hidden;
    transition:transform var(--dur-ui) var(--ease-out),visibility 0s var(--dur-ui);
  }
  .nav-liste.offen{transform:translateX(0);visibility:visible;transition:transform var(--dur-ui) var(--ease-out)}
  .nav-liste a:not(.knopf){
    font-size:clamp(1.875rem,1.3rem + 2.6vw,3rem);font-weight:600;color:var(--pflaume);
    opacity:0;transform:translateY(12px);
    transition:opacity var(--dur-ui) var(--ease-out),transform var(--dur-ui) var(--ease-out);
  }
  .nav-liste.offen a:not(.knopf){opacity:1;transform:none;transition-delay:calc(90ms + var(--nav-i,0) * 40ms)}
  .nav-cta{margin-top:20px}
  body.nav-offen{overflow:hidden}
}

/* ---------- Knöpfe — Pille, ein System ---------- */
.knopf{
  display:inline-block;padding:13px 26px;border-radius:var(--radius-button);
  font-family:var(--schrift);font-size:16px;font-weight:500;line-height:1.2;
  text-decoration:none;cursor:pointer;border:1px solid transparent;
  transition:background var(--dur-micro) var(--ease-out),color var(--dur-micro) var(--ease-out),border-color var(--dur-micro) var(--ease-out),transform var(--dur-micro) var(--ease-out),box-shadow var(--dur-micro) var(--ease-out);
}
.knopf:active{transform:translateY(1px)}
.knopf-primaer{background:var(--pflaume);color:#fff}
.knopf-primaer:hover{background:var(--pflaume-tief);transform:translateY(-1px);box-shadow:var(--schatten)}
.knopf-ghost{background:transparent;border-color:rgba(61,61,61,.35);color:var(--text)}
.knopf-ghost:hover{border-color:var(--pflaume);color:var(--pflaume)}

.pfeil-link{
  display:inline-flex;align-items:center;gap:8px;
  font-weight:600;font-size:15px;text-decoration:none;color:var(--pflaume);
}
.pfeil-link span{transition:transform var(--dur-micro) var(--ease-out)}
.pfeil-link:hover span{transform:translateX(4px)}

/* ---------- Sektionen / Szenen ---------- */
.sektion{padding-block:var(--sektion);position:relative}
.sektion-weiss{background:var(--warmweiss)}
.sektion-verlauf{background:var(--verlauf-puder);overflow:hidden}
.sektion-mauve{background:var(--verlauf-mauve);color:#fff;overflow:hidden}
.sektion-mauve h2,.sektion-mauve h3{color:#fff}
.sektion-mauve .lead,.sektion-mauve p{color:rgba(255,255,255,.88)}
.sektion-mauve :focus-visible{outline-color:#fff}

/* ---------- Hero ---------- */
.hero-bild{margin-top:76px;position:relative}
.hero-bild img{width:100%;height:min(62vh,560px);object-fit:cover;object-position:center 30%}
.hero-text{background:var(--warmweiss);padding-block:clamp(48px,7vw,88px)}
.hero-raster{display:grid;gap:32px}
@media (min-width:1024px){.hero-raster{grid-template-columns:6fr 5fr;gap:72px;align-items:center}}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}

/* ---------- Kurskarten (Startseite + Übersicht) ---------- */
.kurs-reihe{display:grid;gap:36px;align-items:center;margin-block:var(--sektion)}
@media (min-width:900px){
  .kurs-reihe{grid-template-columns:1fr 1fr;gap:72px}
  .kurs-reihe.gedreht .kurs-bild{order:2}
}
.kurs-bild{position:relative}
.kurs-bild img:not(.kurs-badge){
  width:min(100%,520px);aspect-ratio:1/1;object-fit:cover;
  border-radius:50%;box-shadow:var(--schatten);margin-inline:auto;
}
.kurs-bild img.kurs-badge{
  position:absolute;right:8%;bottom:4%;
  width:clamp(72px,9vw,110px);height:auto;aspect-ratio:1/1;border-radius:50%;
  background:var(--weiss);box-shadow:var(--schatten);padding:10px;object-fit:contain;
}
.kurs-text .knopf{margin-top:8px}

/* Kursübersicht-Karten */
.kurs-karten{display:grid;gap:24px;margin-top:48px}
@media (min-width:700px){.kurs-karten{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.kurs-karten{grid-template-columns:repeat(3,1fr)}}
.kurs-karte{
  background:var(--warmweiss);border-radius:var(--radius-karte);
  overflow:hidden;text-decoration:none;display:flex;flex-direction:column;
  box-shadow:0 0 34px -14px rgba(61,61,61,.25);
  transition:transform var(--dur-micro) var(--ease-out),box-shadow var(--dur-micro) var(--ease-out);
}
.kurs-karte:hover{transform:translateY(-4px);box-shadow:var(--schatten)}
.kurs-karte img{aspect-ratio:4/3;object-fit:cover;width:100%}
.kurs-karte-text{padding:26px 28px 30px}
.kurs-karte-text p{font-size:15px;color:var(--text-matt);margin-bottom:14px}
.kurs-karte .pfeil-link{padding:0}

/* ---------- Stationen (Über mich) ---------- */
.stationen{display:grid;gap:20px;margin-top:40px}
@media (min-width:700px){.stationen{grid-template-columns:1fr 1fr}}
.station{
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);
  border-radius:var(--radius-karte);padding:28px;
}
.station-nr{
  font-family:var(--schrift-serif);font-size:15px;letter-spacing:.14em;
  color:rgba(255,255,255,.85);display:block;margin-bottom:10px;
}
.station p{font-size:15px;margin:0}

/* ---------- Kontakt ---------- */
.kontakt-raster{display:grid;gap:32px;margin-top:44px}
@media (min-width:900px){.kontakt-raster{grid-template-columns:repeat(3,1fr);gap:40px}}
.kontakt-weg h3{font-size:clamp(1.25rem,1.15rem + .5vw,1.5rem)}
.kontakt-weg p{font-size:15px;color:var(--text-matt)}
.kontakt-weg a{color:var(--pflaume);font-weight:600;text-decoration-color:var(--rose)}

/* ---------- Leistungs-Detailseite ---------- */
.detail-kopf{padding-top:calc(76px + clamp(48px,7vw,80px));background:var(--verlauf-puder)}
.detail-raster{display:grid;gap:36px;align-items:center;padding-bottom:var(--sektion)}
@media (min-width:1000px){.detail-raster{grid-template-columns:6fr 5fr;gap:72px}}
.info-liste{list-style:none;margin:24px 0;padding:0;max-width:520px}
.info-liste li{
  padding:12px 0 12px 30px;position:relative;font-size:16px;
  border-bottom:1px solid rgba(61,61,61,.1);
}
.info-liste li:last-child{border-bottom:0}
.info-liste li::before{content:'';position:absolute;left:2px;top:19px;width:9px;height:9px;border-radius:50%;background:var(--rose)}

.faq-liste{margin-top:32px;border-top:1px solid rgba(61,61,61,.12)}
.faq{border-bottom:1px solid rgba(61,61,61,.12)}
.faq summary{
  list-style:none;cursor:pointer;padding:20px 40px 20px 0;position:relative;
  font-size:17px;font-weight:600;color:var(--pflaume);
}
.faq summary::-webkit-details-marker{display:none}
.faq-plus{position:absolute;right:4px;top:50%;width:14px;height:14px;transform:translateY(-50%)}
.faq-plus::before,.faq-plus::after{content:'';position:absolute;background:var(--pflaume);transition:transform var(--dur-ui) var(--ease-out)}
.faq-plus::before{left:0;top:6px;width:14px;height:2px}
.faq-plus::after{left:6px;top:0;width:2px;height:14px}
.faq[open] .faq-plus::after{transform:rotate(90deg)}
.faq-antwort p{padding-bottom:20px;font-size:15px;color:var(--text-matt)}

/* ---------- Fußzeile ---------- */
.fuss{background:var(--puder);border-top:1px solid rgba(61,61,61,.1);padding-top:36px}
.fuss-innen{display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between;padding-bottom:24px}
.fuss-nav{list-style:none;display:flex;flex-wrap:wrap;gap:22px;margin:0;padding:0}
.fuss-nav a{font-size:14px;color:var(--text-matt);text-decoration:none}
.fuss-nav a:hover{color:var(--pflaume)}
.fuss-zeile{
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
  border-top:1px solid rgba(61,61,61,.1);padding-block:20px;
  font-size:13px;color:var(--text-matt);
}
.fuss-zeile p{margin:0}
.fuss-credit a{color:var(--text);text-decoration-color:var(--rose)}
.fuss-credit .herz{color:var(--pflaume)}

/* WhatsApp-Knopf (eigener Link, kein Drittdienst) */
.wa-knopf{
  position:fixed;right:20px;bottom:20px;z-index:40;
  width:56px;height:56px;border-radius:50%;
  background:#25D366;color:#fff;display:grid;place-items:center;
  box-shadow:var(--schatten);
  transition:transform var(--dur-micro) var(--ease-out);
}
.wa-knopf:hover{transform:translateY(-2px)}

/* ---------- Rechtstexte ---------- */
.rechtsseite{padding-top:calc(76px + 56px)}
.rechtsseite .container{max-width:768px}
.rechtsseite h1{font-size:clamp(1.875rem,1.4rem + 2vw,2.75rem)}
.rechtsseite h2{font-size:clamp(1.25rem,1.15rem + .5vw,1.625rem);margin-top:1.6em;max-width:none}
.rechtsseite table{border-collapse:collapse;width:100%;font-size:15px;margin:1em 0}
.rechtsseite th,.rechtsseite td{border:1px solid rgba(61,61,61,.15);padding:10px 12px;text-align:left;vertical-align:top}

.hinweisseite{min-height:62vh;display:flex;align-items:center;padding-top:76px}

/* =========================================================
   MOTION — Verstecken NUR hinter html.js (Pflicht P1)
   ========================================================= */
html.js .zeigen{opacity:0;transform:translateY(24px)}
html.js .zeigen.sichtbar{
  opacity:1;transform:none;
  transition:opacity var(--dur-reveal) var(--ease-out) var(--verzug,0ms),transform var(--dur-reveal) var(--ease-out) var(--verzug,0ms);
}
html.js .held{opacity:0;transform:translateY(24px)}
html.js .held.sichtbar{
  opacity:1;transform:none;
  transition:opacity var(--dur-reveal) var(--ease-out) var(--held-verzug,0ms),transform var(--dur-reveal) var(--ease-out) var(--held-verzug,0ms);
}

/* =========================================================
   Reduzierte Bewegung — globaler Reset (Pflicht P4)
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  html{scroll-behavior:auto}
  html.js .zeigen,html.js .held{opacity:1;transform:none}
  .knopf:hover,.kurs-karte:hover,.wa-knopf:hover{transform:none}
}