/* =============================================================================
   Goetheanum CI – Basis-Komponenten
   -----------------------------------------------------------------------------
   Gemeinsame Grundlage für alle Werkzeuge: Grundlayout, Kopf-/Fusszeile,
   Abschnitte, Karten, Knöpfe, Formularfelder. Setzt design-system/tokens.css
   voraus (zuerst einbinden). Werkzeug-spezifisches gehört in die jeweilige Seite.
   ============================================================================= */

*{box-sizing:border-box;margin:0;padding:0}

body{
  background:var(--paper); color:var(--ink);
  font-family:var(--font); font-weight:var(--w-text); line-height:1.5;
  font-kerning:normal; text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px}

/* Zugänglichkeit: Zustand = Blau */
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* --- Kopfzeile -------------------------------------------------------------- */
.ds-header{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.9);backdrop-filter:saturate(160%) blur(8px);border-bottom:1px solid var(--line)}
.ds-header .bar{display:flex;align-items:center;justify-content:space-between;height:var(--header-h)}
.brand{display:flex;align-items:center;gap:var(--s3)}
.brand .mk{width:24px;height:24px;border-radius:6px;display:block}
.brand .wm{font-family:var(--font);font-weight:var(--w-text);font-size:27px;line-height:1;color:#8a9097;letter-spacing:.005em}
nav.top{display:flex;gap:22px}
nav.top a{color:var(--muted);font-size:13.5px}
nav.top a:hover{color:var(--gold-deep)}
@media(max-width:720px){nav.top{display:none}}

/* --- Abschnitte ------------------------------------------------------------ */
section{padding:var(--s8) 0;border-top:1px solid var(--line-soft)}
.shead{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s8);margin-bottom:var(--s6);flex-wrap:wrap}
.shead h2{font-family:var(--font);font-weight:var(--w-strong);font-size:clamp(22px,3vw,30px);line-height:1.05;flex:0 0 auto}
.shead p{color:var(--muted);font-size:14px;line-height:1.5;max-width:54ch;flex:1 1 320px}

/* --- Karte ----------------------------------------------------------------- */
.card{border:1px solid var(--line);border-radius:var(--r-card);padding:var(--s6);background:var(--paper)}
.card.soft{background:var(--soft)}

/* --- Chips ----------------------------------------------------------------- */
.chip{font-size:13px;color:var(--muted);border:1px solid var(--line);border-radius:var(--r-pill);padding:6px 14px}
.chip b{color:var(--ink);font-weight:var(--w-strong)}

/* --- Knöpfe ---------------------------------------------------------------- */
.btn{display:inline-block;font:inherit;font-size:13.5px;padding:9px 15px;border-radius:var(--r-control);border:1px solid var(--line);color:var(--ink);background:#fff;text-align:center;cursor:pointer;transition:.15s}
.btn:hover{border-color:var(--gold-deep)}
.btn.primary{background:var(--gold);border-color:var(--gold);color:#3a2d10}
.btn.primary:hover{background:#c59f56}
.btn.ghost{color:var(--muted)}
.btn.ok{background:#3f7d46;border-color:#3f7d46;color:#fff}

/* --- Formularfelder -------------------------------------------------------- */
.field{display:grid;gap:var(--s1)}
.field>.lab{font-size:13px;color:var(--muted);letter-spacing:.01em}
.field input,.field textarea,.field select{
  width:100%;font-family:var(--font-system);font-size:14.5px;font-weight:400;line-height:1.35;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:var(--r-control);padding:8px 11px;outline:none;
  transition:border-color .15s,box-shadow .15s;
}
.field textarea{resize:vertical;min-height:48px}
.field input::placeholder,.field textarea::placeholder{color:#aeb4b9}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,97,169,.16)}
.field input.invalid{border-color:var(--bad);box-shadow:0 0 0 3px rgba(179,38,30,.14)}

/* --- Fusszeile ------------------------------------------------------------- */
.ds-footer{border-top:1px solid var(--line);padding:var(--s8) 0 60px;color:var(--muted);font-size:12.5px;margin-top:var(--s8)}
.ds-footer .frow{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.ds-footer .frow strong{color:var(--ink);font-weight:var(--w-text)}
.ds-footer .frow a:hover{color:var(--gold-deep)}

/* =============================================================================
   Eingebaute Typografie – Hausregeln als Voreinstellung, nicht als Nachkontrolle
   -----------------------------------------------------------------------------
   Wer nichts tut, tut das Richtige (Mechanismus 2). Fürs Falsche gibt es kein
   Werkzeug (Mechanismus 3). Quelle: assets/typografie/goetheanum-typo-tokens.json.
   ============================================================================= */

/* Lesefluss: Trennung, schöner Umbruch, keine verwaisten Zeilen (G12/G24/G28).
   Greift, weil die Seite lang="de-CH" trägt (siehe starter.html). */
body{hyphens:auto;-webkit-hyphens:auto;text-wrap:pretty;orphans:2;widows:2}

/* Betonung hat genau zwei Ämter: Laut betont, Leise ist der stille Gegenton
   (G02/G05/S01). Keine echte Kursive – Leise steht aufrecht. Unterstreichen und
   Versalien als Hervorhebung gibt es bewusst NICHT als Utility (G05). */
strong,b{font-weight:var(--w-strong)}
em,i{font-style:normal;font-weight:var(--w-leise)}

/* Hausanführung: ‹…› automatisch über <q> (G16) – einfache Guillemets nach aussen. */
q{quotes:'\2039' '\203A' '\2039' '\203A'}

/* Ziffern in Tabellen: Versalziffern, dicktengleich, exakt untereinander (G25).
   Nie mit Leerzeichen ausgerichtet – das erledigt tabular-nums. */
table{border-collapse:collapse;font-variant-numeric:tabular-nums lining-nums}
th,td{text-align:left;padding:var(--s2) var(--s3);border-bottom:1px solid var(--line-soft)}
th{font-weight:var(--w-strong);color:var(--ink)}
td.num,th.num,.num{font-variant-numeric:tabular-nums lining-nums;text-align:right;font-feature-settings:"tnum","lnum"}

/* Schnitt-Utilities – die drei Stimmen der Familie, abrufbar ohne Nachdenken. */
.leise{font-weight:var(--w-leise)}
.klar{font-weight:var(--w-text)}
.deutlich{font-weight:var(--w-deutlich)}
.laut{font-weight:var(--w-strong)}

/* Korrekter Kicker: getönt und leicht getrackt – aber NORMAL, nicht versal (G05). */
.kicker{display:inline-block;color:var(--gold-deep);font-size:12.5px;letter-spacing:.04em;font-weight:var(--w-leise);margin-bottom:var(--s2)}

/* Lesemass: ~66 Zeichen je Zeile für linearen Mengentext (G10). */
.lese{max-width:min(39ch,100%)}
.meta{color:var(--muted)}