/* ===========================================================================
   Descoru – Stylesheet der oeffentlichen Produktwebsite

   Getrennt vom App-Stylesheet, eigene Vorsilbe w-. Gleiche Farbwelt wie die
   App: warmes Papier, Karten in Creme, Braun als einzige Handlungsfarbe, die
   Fachfarben nur in den nachgebauten App-Ansichten.

   Die Startseite folgt seit dem 01.11.2026 dem Entwurf des Nutzers auf der
   Design-Flaeche „Discentio Startseite neu“: kurz, ein grosser Knopf, Kacheln
   statt Text. Ihre Bausteine stehen im Abschnitt „Startseite“.

   Kein JavaScript, keine externe Quelle, keine Schriftdatei, keine Bilder
   von fremden Servern. Die CSP der statischen Seiten ist
   default-src 'none'; style-src 'self'; img-src 'self'.
   Deshalb steht jede Gestaltung HIER, nie als style-Attribut im HTML.

   Die Farbstimmung folgt prefers-color-scheme: die Seite hat kein Skript,
   das eine Wahl speichern koennte.
   =========================================================================== */

/* --------------------------------------------------------------- Grundlage */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body { margin: 0; }

/* ------------------------------------------------------------------ Token */

:root {
  color-scheme: light dark;

  --w-bg:        #ede3d5;
  --w-bg-hell:   #f5efe6;
  --w-surface:   #fffcf7;
  --w-text:      #3b2c22;
  --w-muted:     #5e4a3b;
  --w-leise:     #6e5a4a;
  --w-accent:    #7b5236;
  --w-on-accent: #fcf7f0;
  --w-line:      #d8c7b0;
  --w-line2:     #cdbba6;
  --w-sep:       #e5d8c7;
  --w-on-dunkel: #fbf5ec;
  --w-dunkel-2:  #e8dccb;
  --w-gold:      #d9a86f;
  --w-ok:        #3f5a3a;
  --w-ok-hell:   #5e7a57;
  --w-warn-bg:   #f1e2cb;

  --w-warn-text: #6b4a1f;

  /* Startseite: dunkle Abschnitte („Tag verpasst?“, Schluss), der
     sandfarbene („Aus Unterlagen“) und die Kreise hinter den Ansichten. */
  --w-nacht:   #3b2c22;
  --w-nacht-2: #4a382b;
  --w-sand:    #efe3d1;
  --w-kreis:   #e8dccb;

  /* Fachfarben der nachgebauten App-Ansichten. */
  --w-et: #a0603a;
  --w-m2: #4f6f86;

  --w-sans: system-ui, -apple-system, "Segoe UI Variable Display", "Segoe UI",
            Roboto, "Helvetica Neue", Arial, sans-serif;

  --w-maxw: 1180px;
  --w-prose: 68ch;
  --w-gap: clamp(56px, 9vw, 104px);
  --w-r2: 12px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --w-bg:        #1c1611;
    --w-bg-hell:   #231c16;
    --w-surface:   #2a221b;
    --w-text:      #f3e9dd;
    --w-muted:     #d2c1ae;
    --w-leise:     #b09d88;
    --w-accent:    #d9a86f;
    --w-on-accent: #22180f;
    --w-line:      rgba(255, 236, 214, .16);
    --w-line2:     rgba(255, 236, 214, .26);
    --w-sep:       rgba(255, 236, 214, .10);
    --w-ok:        #a9c49f;
    --w-ok-hell:   #a9c49f;
    --w-warn-bg:   rgba(226, 181, 102, .16);
    --w-warn-text: #f0cf94;
    --w-nacht:   #120d0a;
    --w-nacht-2: #1f1812;
    --w-sand:    #261e17;
    --w-kreis:   #2e251d;
    --w-et: #e0a57c;
    --w-m2: #9dbbd0;
  }
}

/* ------------------------------------------------------------- Typografie */

body {
  background: var(--w-bg);
  color: var(--w-text);
  font-family: var(--w-sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.12; margin: 0 0 .5em; letter-spacing: -.02em; }
h1 { font-size: clamp(2.3rem, 6.4vw, 4rem); font-weight: 800; }
h2 { font-size: clamp(1.7rem, 4vw, 2.6rem); font-weight: 800; }
h3 { font-size: 1.2rem; font-weight: 700; letter-spacing: -.01em; }
p { margin: 0 0 1em; }

a { color: var(--w-accent); text-underline-offset: 3px; }
a:hover { color: var(--w-text); }

:focus-visible { outline: 3px solid var(--w-accent); outline-offset: 3px; border-radius: 4px; }
#main-content:focus { outline: none; }

.w-wrap {
  max-width: var(--w-maxw);
  margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}
@media (min-width: 760px) {
  .w-wrap { padding-left: 28px; padding-right: 28px; }
}

.w-skip {
  position: absolute; left: 12px; top: 10px; z-index: 100;
  padding: 10px 14px; border-radius: var(--w-r2);
  background: var(--w-text); color: var(--w-bg); font-weight: 700;
  transform: translateY(-160%); transition: transform .14s ease;
}
.w-skip:focus { transform: none; }

/* ------------------------------------------------------------------ Knoepfe */

.w-cta, .w-cta2 {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border-radius: var(--w-r2);
  font-weight: 700; font-size: 1rem; text-decoration: none; white-space: nowrap;
  transition: background .14s ease, border-color .14s ease;
}
.w-cta { background: var(--w-accent); color: var(--w-on-accent); border: 1px solid var(--w-accent); }
.w-cta:hover { background: color-mix(in srgb, var(--w-accent) 88%, black); color: var(--w-on-accent); }
.w-cta2 { background: var(--w-surface); color: var(--w-text); border: 1px solid var(--w-line2); }
.w-cta2:hover { background: var(--w-bg-hell); color: var(--w-text); }
.w-cta-lg { min-height: 54px; padding: 0 24px; font-size: 1.05rem; }
.w-aktionen { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 14px; }

/* -------------------------------------------------- Kopf der Rechtsseiten */

.w-top {
  position: sticky; top: 0; z-index: 50;
  background: var(--w-surface);
  border-bottom: 1px solid var(--w-line);
  box-shadow: 0 1px 2px rgba(59, 44, 34, .05);
}
.w-top-in {
  max-width: var(--w-maxw); margin: 0 auto;
  padding: 10px max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left));
  display: flex; align-items: center; gap: 16px; min-height: 64px;
}
.w-logo { display: flex; color: var(--w-text); flex: none; }
.w-logo svg { display: block; height: 17px; width: auto; }
.w-topnav { display: flex; gap: 4px; margin-left: auto; }
.w-topnav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  border-radius: var(--w-r2); color: var(--w-muted); font-weight: 600; text-decoration: none;
}
.w-topnav a:hover { background: var(--w-bg-hell); color: var(--w-text); }
@media (max-width: 760px) {
  .w-topnav { display: none; }
}
@media (max-width: 380px) {
  .w-top-in { gap: 10px; }
  /* Die Wortmarke auf schmalen Handys etwas kleiner, damit die Knoepfe
     nicht an den Rand stossen. */
  .w-logo svg { height: 15px; }
}

/* Farbpunkte der Faecher in den nachgebauten App-Ansichten */
.w-punkt { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none; }
.w-et { background: var(--w-et); }
.w-m2 { background: var(--w-m2); }

/* =================================================================== Startseite
   Nach dem Entwurf des Nutzers (Design-Flaeche „Discentio Startseite neu“,
   Fassung mit Abschnitten statt Kacheln, 01.11.2026). Die App-Ansichten sind
   reines HTML und CSS, fuer Vorlesegeraete ausgeblendet (aria-hidden): sie
   zeigen nur, was der Text daneben sagt. */

.w-start { background: var(--w-bg); }
.w-start main { overflow-x: clip; }

/* Kopf: bleibt beim Scrollen oben und laesst den Inhalt leicht durchscheinen. */
.w-kopf {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--w-bg) 86%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid transparent;
}
.w-kopf .w-top-in { min-height: 0; padding-top: 12px; padding-bottom: 12px; }
.w-kopf .w-logo svg { height: 18px; }
.w-top-rechts { display: flex; align-items: center; gap: 8px; flex: none; margin-left: auto; }
.w-kopf-link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  border-radius: var(--w-r2); color: var(--w-text); font-weight: 600; font-size: .95rem; text-decoration: none;
}
.w-kopf-link:hover { color: var(--w-accent); }
.w-kurz { display: none; }

/* Knoepfe der Startseite, ohne Leuchten. Rundung wie die Knoepfe der App
   (--r-btn: 12px in app/index.html, hier --w-r2; Nutzerwunsch 07.11.2026,
   vorher ganz rund). */
.w-knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  background: var(--w-accent); color: var(--w-on-accent);
  font-weight: 800; text-decoration: none; white-space: nowrap; border-radius: var(--w-r2);
  transition: transform .15s ease, background .15s ease;
}
.w-knopf:hover { background: color-mix(in srgb, var(--w-accent) 88%, black); color: var(--w-on-accent); transform: translateY(-2px); }
.w-knopf svg {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
.w-knopf-klein { min-height: 44px; padding: 0 18px; font-size: .95rem; font-weight: 700; }
.w-knopf-gross { min-height: 64px; padding: 0 40px; font-size: 1.2rem; }

/* Oben: Ueberschrift, Knopf, Laptopbild mit zwei Kaertchen */
.w-held {
  position: relative; z-index: 2;
  max-width: 1240px; margin: 0 auto; padding: 96px 24px 0; text-align: center;
}
.w-held h1 {
  font-size: clamp(2.8rem, 7.6vw, 5.8rem); line-height: .98; font-weight: 800;
  letter-spacing: -.045em; max-width: 12ch; margin: 0 auto;
}
.w-unterstrich { position: relative; white-space: nowrap; }
.w-unterstrich svg { position: absolute; left: 0; bottom: -.14em; width: 100%; height: .28em; overflow: visible; }
.w-unterstrich path { fill: none; stroke: var(--w-gold); stroke-width: 7; stroke-linecap: round; }
.w-held-knopf { margin-top: 48px; }
.w-buehne { position: relative; margin: 72px auto -150px; max-width: 1040px; }
.w-buehne-licht {
  position: absolute; left: 50%; top: 46%; width: 92%; height: 84%;
  translate: -50% -50%; border-radius: 50%; background: var(--w-bg-hell);
}
.w-buehne-bild { position: relative; display: block; width: 100%; height: auto; transform-origin: 50% 100%; }

/* Kaertchen: am Laptopbild, im Abschnitt „Auf jedem Geraet“ */
.w-held-chip, .w-geraet-chip {
  position: absolute; z-index: 3;
  display: flex; align-items: center; gap: 10px; padding: 12px 16px 12px 12px;
  border-radius: 18px; background: var(--w-surface); border: 1px solid var(--w-sep);
  box-shadow: 0 18px 40px rgba(59, 44, 34, .16);
  font-size: .94rem; font-weight: 700; text-align: left; line-height: 1.35;
}
.w-held-chip small { display: block; font-size: .75rem; font-weight: 600; color: var(--w-leise); }
.w-held-chip-links { left: -40px; top: 12%; }
.w-held-chip-rechts { right: -30px; top: 4%; }
.w-chip-zeichen {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 34px; height: 34px; border-radius: 10px; color: #fcf7f0; font-size: .875rem; font-weight: 800;
}
.w-chip-gruen { background: #3f5a3a; }
.w-chip-blau { background: #4f6f86; }

/* Das Blatt: beginnt mit runden Ecken unter dem Laptopbild. */
.w-blatt { position: relative; z-index: 1; background: var(--w-bg-hell); border-radius: 56px 56px 0 0; }

/* Abschnitte: Text auf der einen, App-Ansicht auf der anderen Seite */
.w-abschnitt { position: relative; }
.w-abschnitt-nacht { background: var(--w-nacht); color: var(--w-on-dunkel); }
.w-abschnitt-sand { background: var(--w-sand); }
.w-abschnitt-innen { max-width: var(--w-maxw); margin: 0 auto; padding: 128px 24px; }
.w-abschnitt-erster { padding-top: 240px; padding-bottom: 120px; }
.w-abschnitt-letzter { padding-bottom: 120px; }
.w-reihe { display: flex; align-items: center; gap: 72px; }
.w-reihe-umgekehrt { flex-direction: row-reverse; }
.w-reihe > * { flex: 1 1 0; min-width: 0; }
.w-reihe > :not(.w-reihe-text) { flex-grow: 1.1; }
.w-gross-titel {
  font-size: clamp(2.3rem, 5vw, 3.8rem); line-height: 1.02; font-weight: 800;
  letter-spacing: -.04em; margin: 0;
}
.w-satz { color: var(--w-muted); font-size: 1.19rem; margin: 18px 0 0; max-width: 26em; }
.w-abschnitt-nacht .w-satz { color: var(--w-dunkel-2); }

/* Stichpunkte mit Haken */
.w-liste { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-direction: column; gap: 12px; font-weight: 700; }
.w-liste li { position: relative; padding-left: 38px; min-height: 26px; display: flex; align-items: center; }
.w-liste li::before {
  content: ""; position: absolute; left: 0; top: 50%; translate: 0 -50%;
  width: 26px; height: 26px; border-radius: 50%;
  background: color-mix(in srgb, var(--w-ok-hell) 18%, transparent);
}
.w-liste li::after {
  content: ""; position: absolute; left: 10px; top: 50%; translate: 0 -65%; rotate: 45deg;
  width: 6px; height: 11px; border-right: 2.4px solid var(--w-ok); border-bottom: 2.4px solid var(--w-ok);
}
.w-liste-gold li::before { background: rgba(217, 168, 111, .22); }
.w-liste-gold li::after { border-color: var(--w-gold); }

/* Bildflaeche mit Kreis dahinter */
.w-bildfeld { position: relative; display: flex; justify-content: center; align-items: center; min-height: 520px; }
.w-bildfeld-kreis {
  position: absolute; left: 50%; top: 50%; width: 112%; max-width: 580px; aspect-ratio: 1;
  translate: -50% -50%; border-radius: 50%; background: var(--w-kreis);
}
.w-bildfeld-kreis-klein { width: 100%; max-width: 500px; }
.w-bildfeld-ring {
  position: absolute; left: 50%; top: 50%; width: 120%; max-width: 600px; aspect-ratio: 1;
  translate: -50% -50%; border-radius: 50%; border: 1.5px dashed var(--w-line2);
}
.w-neben-karte { position: absolute; }

/* Abschnitt „Jeden Tag“: Monat, Tageskarte, Lerntimer */
.w-monat {
  right: 0; top: 8px; width: 210px; padding: 16px; rotate: 4deg;
  background: var(--w-surface); border: 1px solid var(--w-sep); border-radius: 20px;
  box-shadow: 0 16px 36px rgba(59, 44, 34, .12);
}
.w-monat-name { margin: 0 0 10px; font-size: .8rem; font-weight: 800; }
.w-monat-raster {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px;
  font-size: .69rem; font-weight: 700; text-align: center; color: var(--w-leise);
}
.w-monat-raster span { padding: 4px 0; line-height: 1.2; }
.w-monat-raster span:nth-child(-n+7) { padding: 0; }
.w-tag { border-radius: 6px; background: var(--w-bg); }
.w-tag-heute { background: var(--w-accent); color: var(--w-on-accent); }
.w-tag-klausur { background: #4f6f86; color: #fcf7f0; }

.w-tageskarte {
  position: relative; width: 100%; max-width: 420px; padding: 26px 26px 12px;
  background: var(--w-surface); border: 1px solid var(--w-sep); border-radius: 26px;
  box-shadow: 0 2px 4px rgba(59, 44, 34, .05), 0 28px 60px rgba(59, 44, 34, .16);
}
.w-tk-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.w-tk-tag { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; }
.w-tk-zeit {
  flex: none; white-space: nowrap; padding: 3px 10px; border-radius: 999px;
  background: var(--w-warn-bg); color: var(--w-accent); font-size: .875rem; font-weight: 700;
}
.w-tk-balken { height: 6px; margin: 16px 0 8px; border-radius: 3px; background: var(--w-bg); overflow: hidden; }
.w-tk-balken-voll { width: 34%; height: 100%; border-radius: 3px; background: var(--w-ok-hell); }
.w-tk-zeile {
  display: flex; align-items: center; gap: 12px; padding: 13px 0;
  border-bottom: 1px solid var(--w-sep); font-weight: 600; font-size: 1rem; line-height: 1.4;
}
.w-tk-zeile:last-child { border-bottom: 0; }
.w-tk-name { flex: 1; min-width: 0; }
.w-tk-name small { display: flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 500; color: var(--w-leise); }
.w-tk-name .w-punkt { width: 8px; height: 8px; }
.w-tk-h { flex: none; font-size: .875rem; color: var(--w-leise); }
.w-tk-fertig { color: var(--w-leise); }
.w-tk-fertig .w-tk-name { text-decoration: line-through; }
.w-tk-termin { font-weight: 500; font-size: .94rem; color: var(--w-muted); }
.w-tk-termin svg { flex: none; color: var(--w-leise); }
.w-box { flex: none; width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--w-line2); }
.w-box-an { display: flex; align-items: center; justify-content: center; border: 0; background: #3f5a3a; }

.w-timer {
  left: -8px; bottom: 20px; rotate: -3deg;
  display: flex; align-items: center; gap: 12px; padding: 14px 18px 14px 14px; border-radius: 20px;
  background: var(--w-nacht); color: var(--w-on-dunkel); box-shadow: 0 18px 40px rgba(59, 44, 34, .28);
  font-size: 1.25rem; font-weight: 800; line-height: 1.25;
}
.w-timer svg { flex: none; }
.w-timer small { display: block; font-size: .75rem; font-weight: 600; color: var(--w-dunkel-2); }

/* Abschnitt „Tag verpasst?“: Woche und verschobene Aufgaben */
.w-verschoben { display: flex; flex-direction: column; gap: 20px; }
.w-woche { display: flex; gap: 10px; }
.w-woche p { margin: 0; }
.w-woche-tag {
  flex: 1; padding: 22px 0; border-radius: 20px; text-align: center;
  background: rgba(251, 245, 236, .08); font-size: .875rem; font-weight: 700; color: var(--w-dunkel-2);
}
.w-woche-zahl { font-size: 2.1rem; font-weight: 800; line-height: 1.2; color: var(--w-on-dunkel); }
.w-woche-notiz { font-size: .75rem; }
.w-woche-krank { background: transparent; border: 1.5px dashed rgba(251, 245, 236, .35); }
.w-woche-krank .w-woche-zahl { color: var(--w-dunkel-2); text-decoration: line-through; }
.w-woche-gold { background: var(--w-gold); color: #2b211a; box-shadow: 0 12px 28px rgba(0, 0, 0, .3); }
.w-woche-gold .w-woche-zahl { color: #2b211a; }
.w-verschoben-karte {
  display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: 22px;
  background: var(--w-surface); color: var(--w-text);
}
.w-verschoben-label {
  margin: 0; font-size: .75rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--w-leise);
}
.w-verschoben-zeile { display: flex; align-items: center; gap: 12px; font-weight: 600; }
.w-verschoben-zeile .w-box { width: 20px; height: 20px; border-radius: 6px; }
.w-warnung {
  display: flex; gap: 10px; align-items: flex-start; margin-top: 6px; padding: 12px 14px;
  border-radius: 14px; background: var(--w-warn-bg); color: var(--w-warn-text); font-size: .94rem;
}
.w-warnung svg { flex: none; margin-top: 2px; }

/* Abschnitt „Aus Unterlagen ein Plan“: Dateien, Pfeil, Entwurf */
.w-ki { display: flex; align-items: center; gap: 16px; }
.w-ki-dateien { display: flex; flex-direction: column; gap: 12px; flex: none; }
.w-ki-datei {
  width: 116px; padding: 16px 14px; border-radius: 18px;
  background: var(--w-surface); box-shadow: 0 12px 28px rgba(59, 44, 34, .1);
}
.w-ki-datei svg { display: block; color: var(--w-accent); }
.w-ki-datei p { margin: 0; }
.w-ki-datei-links { rotate: -4deg; }
.w-ki-datei-rechts { rotate: 3deg; }
.w-ki-datei-name { margin-top: 8px !important; font-size: .8rem; font-weight: 700; }
.w-ki-datei-art { font-size: .75rem; color: var(--w-leise); }
.w-ki-pfeil { flex: none; color: var(--w-line2); }
.w-ki-entwurf {
  flex: 1; min-width: 0; padding: 24px; border-radius: 24px;
  border: 1.5px solid var(--w-accent); background: var(--w-surface);
  box-shadow: 0 2px 4px rgba(59, 44, 34, .05), 0 28px 60px rgba(59, 44, 34, .16);
}
.w-ki-entwurf p { margin: 0; }
.w-ki-chip {
  display: inline-block; padding: 4px 10px; border-radius: 8px;
  background: var(--w-warn-bg); color: var(--w-warn-text); font-size: .75rem; font-weight: 700;
}
.w-ki-fach {
  display: flex; align-items: center; gap: 10px; margin-top: 12px !important;
  font-size: 1.375rem; font-weight: 800; letter-spacing: -.01em;
}
.w-ki-fach .w-punkt { width: 11px; height: 11px; }
.w-ki-unter { font-size: .875rem; color: var(--w-leise); }
.w-ki-themen { margin-top: 14px; font-size: .94rem; }
.w-ki-thema { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--w-sep); }
.w-ki-thema:last-child { border-bottom: 0; }
.w-ki-thema span:first-child { font-weight: 600; }
.w-ki-thema span:last-child { color: var(--w-leise); }
.w-ki-anlegen {
  margin-top: 14px !important; padding: 11px 0; border-radius: 12px; text-align: center;
  background: var(--w-accent); color: var(--w-on-accent); font-size: .94rem; font-weight: 700;
}

/* Abschnitt „Auf jedem Geraet“ */
.w-handy-bild { position: relative; display: block; width: 290px; max-width: 72%; height: auto; }
.w-geraet-chip-oben { left: 4%; top: 22%; }
.w-geraet-chip-oben .w-chip-zeichen { width: 32px; height: 32px; }
.w-geraet-chip-unten { right: 2%; bottom: 20%; background: var(--w-gold); border-color: transparent; color: #2b211a; padding-left: 16px; }
.w-geraet-zahl { font-size: 1.375rem; font-weight: 800; }

/* Alles drin: Funktionen als Woerter */
/* Liegt ueber dem Handybild, das sich beim Scrollen von unten hereinschiebt. */
.w-alles {
  position: relative; z-index: 1; background: var(--w-bg-hell);
  padding: 112px 24px; border-top: 1px solid var(--w-sep); text-align: center;
}
.w-alles-titel {
  font-size: clamp(1.9rem, 4vw, 2.8rem); line-height: 1.08; letter-spacing: -.035em;
  max-width: 18ch; margin: 0 auto;
}
.w-alles-liste {
  list-style: none; padding: 0; margin: 40px auto 0; max-width: 940px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; font-weight: 700;
}
.w-alles-liste li { padding: 12px 20px; border-radius: 999px; background: var(--w-surface); border: 1px solid var(--w-sep); }

/* Schluss: dunkel, mit dem goldenen Knopf */
.w-schluss { position: relative; overflow: hidden; background: var(--w-nacht); color: var(--w-on-dunkel); }
.w-schluss-kreis, .w-schluss-ring {
  position: absolute; left: 50%; top: 100%; translate: -50% -42%; border-radius: 50%;
}
.w-schluss-kreis { width: 1100px; height: 1100px; background: var(--w-nacht-2); }
.w-schluss-ring { width: 1400px; height: 1400px; border: 1px solid rgba(217, 168, 111, .22); }
.w-schluss-innen {
  position: relative; max-width: var(--w-maxw); margin: 0 auto; padding: 128px 24px;
  display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center;
}
.w-schluss h2 {
  font-size: clamp(2.4rem, 6vw, 4.6rem); line-height: 1; letter-spacing: -.045em;
  max-width: 16ch; margin: 0;
}
.w-gold-text { color: var(--w-gold); }
.w-schluss .w-knopf { margin-top: 12px; background: var(--w-gold); color: #2b211a; }
.w-schluss .w-knopf:hover { background: color-mix(in srgb, var(--w-gold) 88%, white); color: #2b211a; }
.w-schluss-klein { margin: 0; font-size: .94rem; color: var(--w-dunkel-2); }
.w-schluss-klein a { font-weight: 700; color: var(--w-gold); }
.w-schluss-klein a:hover { color: var(--w-on-dunkel); }

/* Kurz gefragt */
.w-fragen-bereich { max-width: 760px; margin: 0 auto; padding: 104px 24px 112px; }
.w-fragen-bereich h2 { font-size: 1.75rem; letter-spacing: -.02em; margin: 0 0 16px; text-align: center; }
.w-fragen { padding: 4px 28px; border-radius: 24px; background: var(--w-surface); border: 1px solid var(--w-sep); }
.w-fragen details + details { border-top: 1px solid var(--w-sep); }
.w-fragen summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 44px; padding: 20px 0; font-size: 1.06rem; font-weight: 700;
  cursor: pointer; list-style: none;
}
.w-fragen summary::-webkit-details-marker { display: none; }
.w-plus {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 30px; height: 30px; border-radius: 50%; background: var(--w-bg-hell);
  transition: transform .2s ease;
}
.w-plus svg { width: 12px; height: 12px; fill: none; stroke: var(--w-text); stroke-width: 2.2; stroke-linecap: round; }
.w-fragen details[open] .w-plus { transform: rotate(45deg); }
.w-fragen details p { margin: 0; padding: 0 44px 20px 0; color: var(--w-muted); }

/* Fusszeile der Startseite: eine Zeile, ohne eigene Flaeche */
.w-start .w-foot { background: transparent; padding: 32px 0 40px; }
.w-foot-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }
.w-foot-zeile .w-logo-klein { margin-right: auto; }
.w-foot-zeile .w-logo-klein svg { height: 14px; }
.w-foot-zeile .w-footnav { margin: 0; gap: 0 22px; font-size: .875rem; }
.w-foot-zeile .w-footnav a { padding: 0; color: var(--w-muted); font-weight: 500; }
.w-foot-zeile .w-fine { flex: 1 1 100%; font-size: .8rem; }

/* Schmaler: Kaertchen am Laptop weg, dann Text ueber der Ansicht */
@media (max-width: 980px) {
  .w-held-chip { display: none; }
}
@media (max-width: 820px) {
  .w-reihe, .w-reihe-umgekehrt { flex-direction: column; align-items: stretch; gap: 48px; }
  /* Untereinander nach Inhalt hoch, sonst fiele die Bildflaeche auf null zusammen. */
  .w-reihe > * { flex: none; }
  .w-abschnitt-innen { padding: 88px 16px; }
  .w-abschnitt-erster { padding-top: 160px; }
  .w-bildfeld { min-height: 0; }
}

/* Am Handy */
@media (max-width: 560px) {
  .w-lang { display: none; }
  .w-kurz { display: inline; }
  .w-kopf .w-top-in { padding: 10px 16px; gap: 6px; }
  .w-kopf-link { padding: 0 8px; }
  .w-held { padding: 56px 16px 0; }
  .w-buehne { margin: 48px auto -56px; }
  .w-blatt { border-radius: 36px 36px 0 0; }
  .w-abschnitt-erster { padding-top: 120px; }
  .w-neben-karte { display: none; }
  .w-woche { gap: 6px; }
  .w-woche-tag { padding: 14px 0; border-radius: 16px; }
  .w-woche-zahl { font-size: 1.5rem; }
  .w-ki { flex-direction: column; align-items: stretch; }
  .w-ki-dateien { flex-direction: row; justify-content: center; }
  .w-ki-pfeil { rotate: 90deg; align-self: center; }
  .w-handy-bild { width: 230px; }
  .w-alles { padding: 88px 16px; }
  .w-schluss-innen { padding: 88px 16px; }
  .w-fragen-bereich { padding: 80px 16px 88px; }
  .w-fragen { padding: 4px 20px; }
}
@media (max-width: 380px) {
  .w-kopf .w-logo svg { height: 15px; }
}

/* Bewegung: Die Seite baut sich beim Scrollen auf. Nur ohne den Wunsch nach
   weniger Bewegung, und nur in Browsern, die Scroll-Animationen koennen –
   sonst steht alles sofort da. Die Keyframes nutzen translate/scale einzeln,
   damit sie gedrehte Karten (rotate) nicht geradeziehen. */
@keyframes w-rein { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: 0 0; } }
@keyframes w-einblenden { from { opacity: 0; } to { opacity: 1; } }
@keyframes w-wachsen { from { scale: .86; translate: 0 30px; } to { scale: 1; translate: 0 0; } }
@keyframes w-auf { from { opacity: 0; translate: 0 56px; } to { opacity: 1; translate: 0 0; } }
@keyframes w-links { from { opacity: 0; translate: -80px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes w-rechts { from { opacity: 0; translate: 80px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes w-zeile { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
@keyframes w-plopp { from { opacity: 0; scale: .6; } to { opacity: 1; scale: 1; } }
@keyframes w-linie { from { scale: 0 1; } to { scale: 1 1; } }
@keyframes w-hoch { from { opacity: 0; translate: 0 120px; } to { opacity: 1; translate: 0 0; } }
@keyframes w-kopfschatten {
  from { box-shadow: 0 0 0 rgba(59, 44, 34, 0); border-bottom-color: transparent; }
  to   { box-shadow: 0 8px 24px rgba(59, 44, 34, .08); border-bottom-color: var(--w-sep); }
}

@media (prefers-reduced-motion: no-preference) {
  .w-rein { animation: w-rein .8s cubic-bezier(.2, .7, .2, 1) both; }
  .w-rein-2 { animation-delay: .12s; }
  .w-einblenden { animation: w-einblenden 1s ease .35s both; }
  @supports (animation-timeline: view()) {
    .w-kopf { animation: w-kopfschatten linear both; animation-timeline: scroll(); animation-range: 0 140px; }
    .w-wachsen { animation: w-wachsen linear both; animation-timeline: scroll(); animation-range: 0 520px; }
    .w-auf { animation: w-auf linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
    .w-links { animation: w-links linear both; animation-timeline: view(); animation-range: entry 0% entry 75%; }
    .w-rechts { animation: w-rechts linear both; animation-timeline: view(); animation-range: entry 0% entry 75%; }
    .w-zeile { animation: w-zeile linear both; animation-timeline: view(); animation-range: entry 10% entry 70%; }
    .w-zeile-2 { animation-range: entry 25% entry 85%; }
    .w-zeile-3 { animation-range: entry 40% entry 100%; }
    .w-plopp { animation: w-plopp linear both; animation-timeline: view(); animation-range: entry 10% entry 70%; }
    .w-plopp-2 { animation-range: entry 20% entry 80%; }
    .w-plopp-3 { animation-range: entry 30% entry 90%; }
    .w-plopp-4 { animation-range: entry 40% entry 100%; }
    .w-linie { transform-origin: left; animation: w-linie linear both; animation-timeline: view(); animation-range: entry 20% entry 90%; }
    .w-hoch { animation: w-hoch linear both; animation-timeline: view(); animation-range: entry 0% entry 90%; }
  }
}

/* -------------------------------------------------------------- Rechtsseiten */

.w-page { padding-top: clamp(38px, 7vw, 70px); padding-bottom: var(--w-gap); max-width: calc(var(--w-prose) + 56px); }
.w-page h1 { font-size: clamp(2rem, 5vw, 2.8rem); }
.w-page h2 { font-size: clamp(1.25rem, 2.6vw, 1.5rem); margin: 2em 0 .6em; }
.w-page h3 { font-size: clamp(1.05rem, 2vw, 1.15rem); margin: 1.5em 0 .4em; }
.w-page p, .w-page li { color: var(--w-muted); }
.w-page dt { font-weight: 700; margin-top: .9em; }
.w-page dd { margin: .15em 0 0; color: var(--w-muted); }
.w-page ul, .w-page ol { padding-left: 1.3em; }
.w-page li { margin: .3em 0; }
/* Lange Namen von Speichereinträgen (Datenschutz) dürfen am Handy umbrechen. */
.w-page code { overflow-wrap: anywhere; }

/* Der Entwurfsvermerk steht bewusst GANZ OBEN und nicht im Kleingedruckten:
   diese Texte sind nicht fachlich geprueft und duerfen so nicht gelten. */
.w-draft {
  border: 1px solid var(--w-line2); border-left: 4px solid var(--w-gold);
  border-radius: 0 var(--w-r2) var(--w-r2) 0; background: var(--w-surface);
  padding: 16px 20px; margin: 0 0 2em;
}
.w-draft > :last-child { margin-bottom: 0; }
.w-draft strong { display: block; margin-bottom: .3em; }
/* Abgesetzter Kasten im Text, z. B. das Widerspruchsrecht im Datenschutz
   (muss getrennt von anderen Angaben stehen, Art. 21 Abs. 4 DSGVO). */
.w-kasten {
  border: 1px solid var(--w-line2); border-radius: var(--w-r2);
  background: var(--w-surface); padding: 16px 20px; margin: 1.5em 0;
}
.w-kasten > h3:first-child { margin-top: 0; }
.w-kasten > :last-child { margin-bottom: 0; }
/* Platzhalter (erfundene Angaben bis zur Veroeffentlichung) sichtbar markieren. */
.w-platzhalter { border-bottom: 1px dashed currentColor; }
.w-back { display: inline-flex; align-items: center; min-height: 44px; margin-top: 2em; font-weight: 700; }

/* ---------------------------------------------------------------- Fusszeile */

.w-foot { border-top: 1px solid var(--w-line); background: var(--w-surface); padding: 40px 0 32px; }
.w-logo-klein { display: block; color: var(--w-text); }
.w-logo-klein svg { display: block; height: 15px; width: auto; }
.w-footnav { display: flex; flex-wrap: wrap; gap: 0 4px; margin: 0 -10px; }
.w-footnav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px;
  color: var(--w-text); font-weight: 600; text-decoration: none; border-radius: var(--w-r2);
}
.w-footnav a:hover { background: var(--w-bg-hell); }
.w-footnav a[aria-current="page"] { color: var(--w-accent); }
.w-fine { color: var(--w-leise); font-size: .9rem; margin: 0; }

/* ------------------------------------------------------------- Bewegung aus */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
}