/* ============================================================
   KI mit Sarah — Taskade-Optik, 23.09.2026
   Zweite Stilebene ueber style.css. Schreibt die bestehenden
   Klassen in die neue Sprache um, damit alle Seiten mitkommen,
   ohne dass Markup angefasst werden muss.
   Reihenfolge im <head> ist wichtig: NACH style.css einbinden.
   ============================================================ */

:root{
  --pink:#C4275C; --pink-h:#D93566; --rosa:#E8447A; --amber:#E88A1B;
  --dunkel:#2E2334; --dunkel-weich:#4A3E50; --grau:#5C5065; --grau-hell:#7A6E82;
  --creme:#FAF7F5; --sand:#F3E8DA; --papier:#FFFFFF;
  --linie:rgba(46,35,52,.10);
  --jakarta:'Plus Jakarta Sans',ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:var(--jakarta); --serif-alt:var(--jakarta);
  --sans:var(--jakarta); --jost:var(--jakarta);
  --max:1160px;
}
html,body{font-family:var(--jakarta)}
body{color:var(--dunkel);font-size:17px;line-height:1.65;
  background:radial-gradient(circle at 100% 0%,rgba(196,39,92,.10) 0,rgba(196,39,92,0) 46%),
   radial-gradient(circle at 0% 100%,rgba(232,138,27,.09) 0,rgba(232,138,27,0) 46%),
   linear-gradient(135deg,#F1E6D6 0%,#FAF7F5 48%,rgba(224,156,133,.14) 100%);
  background-attachment:fixed}
img{max-width:100%;height:auto}

/* ---------- Typografie ---------- */
h1,h2,h3,.hs,.lang__h2{font-family:var(--jakarta);letter-spacing:-.03em;line-height:1.08;font-weight:800}
h1,.g-kopf h1{font-size:clamp(2.2rem,5vw,4rem);font-weight:800}
h2,.hs{font-size:clamp(1.85rem,4.2vw,3rem)}
h3,.lang__h2{font-size:clamp(1.25rem,2.4vw,1.7rem);font-weight:700;letter-spacing:-.02em}
.g-unter,.zeitung__satz,.merkzeile{font-family:var(--jakarta)!important;font-style:normal!important;font-weight:700;letter-spacing:-.02em}
.gold,.regenbogen,.hs.gold{
  background-image:linear-gradient(105deg,#B81E55 0%,#E8447A 48%,#E88A1B 100%)!important;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--pink)}

/* ---------- Flaechen: Weiss und Farbe im Wechsel ---------- */
.abschnitt{padding-block:104px;background:#fff}
.abschnitt--warm{background:linear-gradient(170deg,rgba(243,232,218,.72),rgba(250,247,245,.5))}
.abschnitt--papier{background:#fff}
.abschnitt--dunkel{background:linear-gradient(170deg,rgba(252,241,239,.9),rgba(246,230,234,.72));color:var(--dunkel)}
.abschnitt--dunkel h1,.abschnitt--dunkel h2,.abschnitt--dunkel h3,
.abschnitt--dunkel .hs,.abschnitt--dunkel .lang__h2{color:var(--dunkel)}
.abschnitt--dunkel p,.abschnitt--dunkel li{color:var(--dunkel-weich)}
.abschnitt--dunkel .kicker{color:var(--pink)}
.abschnitt + .abschnitt{border-top:1px solid var(--linie)}

/* ---------- Kicker wird zur Pille ---------- */
.kicker{display:inline-flex;align-items:center;gap:9px;padding:10px 22px;border-radius:999px;
  background:#FBF9F8;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid rgba(196,39,92,.24);font-size:.76rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--pink);margin:0 0 26px;font-family:var(--jakarta)}
.kicker--hell{color:var(--pink);background:rgba(255,255,255,.88);border-color:rgba(255,255,255,.6)}
.g-kopf .kicker{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.4);color:#fff}

/* ---------- Buttons ---------- */
.btn{background-image:linear-gradient(100deg,#C4275C,#D93566)!important;background-color:#C4275C;
  color:#fff;font-family:var(--jakarta);font-weight:700;border-radius:999px;padding:18px 38px;
  box-shadow:0 12px 30px rgba(196,39,92,.26);border:0;letter-spacing:0}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 38px rgba(196,39,92,.32)}
.btn--gross{padding:20px 44px;font-size:1.06rem}
.btn--linie{background-image:none!important;background:transparent;color:var(--dunkel);
  border:1px solid rgba(46,35,52,.28);box-shadow:none}

/* ---------- Karten: Milchglas ---------- */
.karte,.stimme,.tool,.weiter__karte,.liste__eintrag,.einwand,.freebie__box,.beleg{
  background:rgba(255,255,255,.66)!important;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid var(--linie)!important;border-radius:20px!important;box-shadow:none!important;
  transition:transform .2s,border-color .2s}
.karte:hover,.tool:hover,.weiter__karte:hover,.liste__eintrag:hover{
  border-color:rgba(196,39,92,.30)!important;transform:translateY(-3px)}
.abschnitt .karte,.abschnitt .stimme,.abschnitt .tool,.abschnitt .weiter__karte,.abschnitt .liste__eintrag{
  background:#FBF9F8!important}
.karte__nr,.schritt__nr{width:46px;height:46px;border-radius:999px;
  background-image:linear-gradient(135deg,#C4275C,#E8447A);display:flex;align-items:center;justify-content:center;
  color:#fff!important;font-weight:800;font-size:.92rem;margin-bottom:16px;
  box-shadow:0 8px 20px rgba(196,39,92,.24)}

/* ---------- Pink-Band ---------- */
.g-kopf,.band{background:
  radial-gradient(60% 80% at 86% 8%,rgba(251,191,36,.28) 0,rgba(251,191,36,0) 60%),
  linear-gradient(120deg,#A81A4C 0%,#C4275C 38%,#D93566 72%,#E8447A 100%)!important}
.g-kopf h1,.band h1,.g-unter{color:#fff!important;-webkit-text-fill-color:#fff}
.g-kopf .btn,.band .btn{background-image:none!important;background:#fff;color:var(--pink)!important;
  box-shadow:0 12px 30px rgba(46,35,52,.18)}

/* ---------- Rosé- und Zeitungsband ---------- */
.g-band{background:linear-gradient(170deg,rgba(252,241,239,.9),rgba(246,230,234,.72))!important;
  border-block:1px solid var(--linie)}
.zeitung{background:radial-gradient(70% 90% at 50% 0%,rgba(248,252,165,.5) 0%,rgba(248,252,165,0) 68%),#fff!important}
.zeitung .geist,.korn,.grafik,.grafik--netz,.grafik--metatron{display:none!important}
.marker{background-image:linear-gradient(#F9FF1A,#F9FF1A)!important;background-size:100% 42%!important;
  background-position:0 80%!important}

/* ---------- Kopf und Fuss ---------- */
.kopf{background:rgba(250,247,245,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--linie)}
.logo{font-weight:800;letter-spacing:-.02em;font-family:var(--jakarta)}
.nav a{font-family:var(--jakarta);font-weight:500}
.fuss{background:#fff;border-top:1px solid var(--linie)}

/* ---------- Formular ---------- */
.formular input{border-radius:999px;padding:16px 22px;border:1px solid rgba(46,35,52,.16);
  font-family:var(--jakarta);font-size:1rem;background:#fff}
.formular input:focus{outline:0;border-color:var(--pink);box-shadow:0 0 0 3px rgba(196,39,92,.14)}
.autorin img{min-width:58px}

/* ---------- Aufgabenliste im Guide ---------- */
.a{border-radius:12px!important;background:#FBF9F8!important;border-color:var(--linie)!important}
.tor{border-radius:24px!important;border-top:3px solid var(--pink)!important;
  background:rgba(255,255,255,.72)!important;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}

@media(max-width:860px){.abschnitt{padding-block:72px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}