/* special.at – Stylesheet
   Token und Bauteile übernommen aus steidl.com (/_nuxt/entry.BcnLsc5h.css, geladen 2026-10-28); Herkunft je Wert in web/DESIGN.md.
   Unterschied zu steidl.com: Dunkel ist die Vorgabe (:root ohne data-theme = dunkel), hell nur über data-theme="light".
   Vertragsklassen für die App-Seite /zugang (VERTRAG.md §2): .wrap .card .btn .input .mono .muted .alert .ok
   .site-header .site-footer .brand – Namen und Wirkung bleiben stabil. */

@font-face{font-family:"Bree Serif";font-style:normal;font-weight:400;font-display:swap;
  src:url(/static/fonts/bree-serif-latin-400-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Bree Serif";font-style:normal;font-weight:400;font-display:swap;
  src:url(/static/fonts/bree-serif-latin-ext-400-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Asap Variable";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(/static/fonts/asap-latin-wght-normal.woff2) format("woff2-variations"),url(/static/fonts/asap-latin-wght-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Asap Variable";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(/static/fonts/asap-latin-ext-wght-normal.woff2) format("woff2-variations"),url(/static/fonts/asap-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- Farben: dunkel (Vorgabe) ---------- */
:root,[data-theme=dark]{
  color-scheme:dark;
  --stw-background:#10161d;
  --stw-surface:#1a232c;
  --stw-surface-bright:#212c37;
  --stw-rail-active:#1f2a35;
  --stw-stage:#0b1a29;
  --stw-on-stage-primary:#0b1a29;
  --stw-band:#173a5a;
  --stw-on-background:#e6ecf2;
  --stw-on-surface:#e6ecf2;
  --stw-on-surface-variant:#a3b1c0;
  --stw-primary:#6fb3e0;
  --stw-primary-hover:#8cc6ec;
  --stw-on-primary:#0b1620;
  --stw-accent:#f5a84a;
  --stw-success-ink:#5cbb85;
  --stw-warning-ink:#d8a552;
  --stw-error-ink:#e2837c;
  --stw-note-info-bg:#16222e;
  --stw-note-warn-bg:#2a2318;
  --stw-border:#26323f;
  --stw-border-strong:#33465a;
  --stw-focus-inner:#0b1620;
  --stw-focus-outer:#a9d4f2;
  --stw-shadow-2:0 6px 20px #00000080;
}
/* ---------- Farben: hell ---------- */
[data-theme=light]{
  color-scheme:light;
  --stw-background:#f6f3ee;
  --stw-surface:#fbf9f5;
  --stw-surface-bright:#fbf9f5;
  --stw-rail-active:#dde3ea;
  --stw-stage:#12283d;
  --stw-on-stage-primary:#12283d;
  --stw-band:#1f4f7a;
  --stw-on-background:#1b2430;
  --stw-on-surface:#1b2430;
  --stw-on-surface-variant:#4d5a6a;
  --stw-primary:#1f4f7a;
  --stw-primary-hover:#2a6296;
  --stw-on-primary:#fff;
  --stw-accent:#8f4909;
  --stw-success-ink:#146c3a;
  --stw-warning-ink:#8a4b06;
  --stw-error-ink:#b3261e;
  --stw-note-info-bg:#e7eef5;
  --stw-note-warn-bg:#f8f2e8;
  --stw-border:#d5dce4;
  --stw-border-strong:#c4ccd3;
  --stw-focus-inner:#fff;
  --stw-focus-outer:#1b2430;
  --stw-shadow-2:0 4px 14px #1b24301f;
}
/* gleich in beiden Modi (die Bühne bleibt dunkel, wie auf steidl.com) */
:root{
  --stw-on-stage:#eef3f8;
  --stw-stage-variant:#b5c6d8;
  --stw-stage-primary:#8cc6ec;
  --stw-stage-accent:#fbb03f;
  --stw-on-band:#fff;

  --stw-font-display:"Bree Serif",Georgia,serif;
  --stw-font-text:"Asap Variable","Asap",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --stw-font-mono:ui-monospace,"SFMono-Regular","JetBrains Mono",Consolas,monospace;
  --stw-size-h1:2.5rem;--stw-lh-h1:1.1;
  --stw-size-h1-seite:2rem;--stw-lh-h1-seite:1.15;
  --stw-size-h2:1.5rem;--stw-lh-h2:1.2;
  --stw-size-h3:1rem;--stw-lh-h3:1.25;
  --stw-size-band:1.25rem;--stw-lh-band:1.2;
  --stw-size-lead:1rem;--stw-lh-lead:1.6;
  --stw-size-body:1rem;--stw-lh-body:1.6;
  --stw-size-body-sm:.875rem;--stw-lh-body-sm:1.4;
  --stw-size-karte:.8125rem;--stw-lh-karte:1.5;
  --stw-size-caption:.8125rem;--stw-lh-caption:1.45;
  --stw-size-eyebrow:.75rem;--stw-track-eyebrow:.16em;
  --stw-space-2:8px;--stw-space-3:12px;--stw-space-4:16px;--stw-space-5:24px;
  --stw-radius-xs:3px;--stw-radius-sm:5px;--stw-radius-md:8px;
  --stw-radius-block:12px;--stw-radius-karte:10px;--stw-radius-knopf:8px;--stw-radius-schalter:20px;
  --stw-line-marker:3px;
  --stw-rahmen:1120px;--stw-measure:720px;--stw-measure-lead:540px;
  --stw-header-h:76px;--stw-logo-h:38px;
}

/* ---------- Grundlagen ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--stw-font-text);font-size:var(--stw-size-body);line-height:var(--stw-lh-body);
  background:var(--stw-background);color:var(--stw-on-background);text-wrap:pretty;-webkit-font-smoothing:antialiased}
a{color:var(--stw-primary);text-decoration:none;text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:var(--stw-primary-hover)}
code,kbd,pre,samp{font-family:var(--stw-font-mono);font-variant-ligatures:none}
:focus{outline:none}
:focus-visible{outline:2px solid var(--stw-focus-outer);outline-offset:2px;box-shadow:0 0 0 2px var(--stw-focus-inner);border-radius:var(--stw-radius-xs)}
h1,h2,h3,h4{margin:0;text-wrap:balance}
h1,h2{font-family:var(--stw-font-display);font-weight:400;color:var(--stw-on-background)}
h1{font-size:var(--stw-size-h1);line-height:var(--stw-lh-h1)}
h2{font-size:var(--stw-size-h2);line-height:var(--stw-lh-h2)}
h3,h4{font-family:var(--stw-font-text);font-weight:600;font-size:var(--stw-size-h3);line-height:var(--stw-lh-h3)}
p{margin:0}
ul,ol,dl{margin:0;padding:0}
img,svg{max-width:100%}
button,input,select,textarea{font-family:inherit}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.001ms!important;animation-duration:.001ms!important}}

/* Sichtbarkeit je Modus (wie .nur-hell/.nur-dunkel auf steidl.com, aber dunkel als Vorgabe) */
[data-theme=light] .nur-dunkel,:root:not([data-theme=light]) .nur-hell{display:none}

.seite{min-height:100vh;display:flex;flex-direction:column}
.inhalt{flex:1 0 auto;width:100%;max-width:var(--stw-rahmen);margin:0 auto}
.inhalt:focus{outline:none}
.sprung{position:absolute;left:-9999px;top:var(--stw-space-2);z-index:50;padding:var(--stw-space-2) var(--stw-space-3);
  background:var(--stw-surface);color:var(--stw-on-surface);border-radius:var(--stw-radius-sm);box-shadow:var(--stw-shadow-2);font-weight:600}
.sprung:focus{left:var(--stw-space-2)}
.nur-vorlesen{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Kopf (Vertrag: .site-header, .brand) – wie .leiste auf steidl.com ---------- */
.site-header{width:100%;max-width:var(--stw-rahmen);margin:0 auto;min-height:var(--stw-header-h);padding:18px 28px;
  display:flex;align-items:center;justify-content:space-between;gap:var(--stw-space-4);flex-wrap:wrap;
  background:var(--stw-background);color:var(--stw-on-background)}
/* Wortmarke: Steidl-„S“ (zwei Fassungen, je Modus eine sichtbar) + „special.at“ in Bree Serif, wie Pfortes Gerüst
   (.leiste-marke/.leiste-name aus steidl-web 1cf5836). Nur Text in .brand geht auch (App-Seite /zugang). */
.brand{display:inline-flex;align-items:center;gap:12px;flex:0 0 auto;
  font-family:var(--stw-font-display);font-weight:400;font-size:1.5rem;line-height:1;
  color:var(--stw-on-background);text-decoration:none;white-space:nowrap;border-radius:var(--stw-radius-xs)}
.brand:hover{color:var(--stw-on-background)}
.brand img{display:block;height:var(--stw-logo-h);width:auto}
.brand-at{color:var(--stw-accent)}
.leiste-rechts{display:flex;align-items:center;gap:20px;min-width:0}
.leiste-menue{display:flex;align-items:center;gap:20px}
.leiste-menue a{font-size:var(--stw-size-body-sm);font-weight:500;line-height:1;padding:6px 0;color:var(--stw-on-background);white-space:nowrap}
.leiste-menue a:hover{color:var(--stw-primary-hover)}
.leiste-menue a[aria-current=page]{color:var(--stw-primary);font-weight:600}
.modus-schalter{display:inline-flex;align-items:center;justify-content:center;margin:0;padding:6px 10px;flex:none;
  font-family:var(--stw-font-text);font-size:13px;font-weight:500;line-height:1;cursor:pointer;
  color:var(--stw-on-surface-variant);background:none;border:1px solid var(--stw-border-strong);border-radius:var(--stw-radius-schalter)}
.modus-schalter:hover{color:var(--stw-on-background);border-color:var(--stw-on-surface-variant)}

/* ---------- Spalte für die App-Seite (Vertrag: .wrap, max 44rem) ---------- */
.wrap{width:100%;max-width:44rem;margin:0 auto;padding:36px 28px 32px;display:flex;flex-direction:column;gap:18px;flex:1 0 auto}

/* ---------- Bühne (Startseite) ---------- */
.buehne{margin:0 28px;padding:44px 36px 46px;display:flex;flex-direction:column;gap:16px;
  background:var(--stw-stage);color:var(--stw-on-stage);border-radius:var(--stw-radius-block)}
.buehne-eyebrow{font-size:var(--stw-size-eyebrow);letter-spacing:var(--stw-track-eyebrow);text-transform:uppercase;
  font-weight:600;line-height:1;color:var(--stw-stage-primary)}
.buehne h1{color:var(--stw-on-stage);max-width:640px;text-wrap:pretty}
.buehne-lead{max-width:var(--stw-measure-lead);font-size:var(--stw-size-lead);line-height:var(--stw-lh-lead);color:var(--stw-stage-variant)}
.buehne-knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.buehne-knopf{display:inline-block;padding:13px 18px;font-size:var(--stw-size-body-sm);font-weight:600;line-height:1;
  background:var(--stw-stage-primary);color:var(--stw-on-stage-primary);border-radius:var(--stw-radius-knopf)}
.buehne-knopf:hover{background:var(--stw-on-stage);color:var(--stw-on-stage-primary)}
.buehne-knopf-zweit{background:none;color:var(--stw-on-stage);box-shadow:inset 0 0 0 1px var(--stw-stage-variant)}
.buehne-knopf-zweit:hover{background:none;color:var(--stw-stage-primary);box-shadow:inset 0 0 0 1px var(--stw-stage-primary)}
.buehne :focus-visible{outline-color:var(--stw-on-stage);box-shadow:0 0 0 2px var(--stw-stage)}

/* ---------- Abschnitte, Karten, Tafel ---------- */
.abschnitt{padding:36px 28px 32px;display:flex;flex-direction:column;gap:18px}
.abschnitt+.abschnitt{padding-top:12px}
.abschnitt.seiten-kopf{padding-bottom:12px}
.seiten-h1{font-size:var(--stw-size-h1-seite);line-height:var(--stw-lh-h1-seite)}
.eyebrow{font-size:var(--stw-size-eyebrow);letter-spacing:var(--stw-track-eyebrow);text-transform:uppercase;font-weight:600;line-height:1;color:var(--stw-primary)}
.abschnitt-lead{max-width:var(--stw-measure);font-size:var(--stw-size-lead);line-height:var(--stw-lh-lead);color:var(--stw-on-surface-variant)}
.karten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.karten[data-spalten="1"]{grid-template-columns:minmax(0,1fr)}
@media (max-width:959.98px){.karten{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:599.98px){.karten{grid-template-columns:minmax(0,1fr)}}
.karte{display:flex;flex-direction:column;gap:8px;padding:18px;min-width:0;
  background:var(--stw-surface);color:var(--stw-on-surface);border:1px solid var(--stw-border-strong);border-radius:var(--stw-radius-karte)}
.karte-nummer{font-size:var(--stw-size-eyebrow);font-weight:600;line-height:1;color:var(--stw-accent)}
.karte h3{color:var(--stw-on-surface)}
.karte-text{font-size:var(--stw-size-karte);line-height:var(--stw-lh-karte);color:var(--stw-on-surface-variant)}
.karte-text a{text-decoration:underline;text-underline-offset:.2em}
.karte-knopf{display:inline-block;padding:10px 12px;font-size:var(--stw-size-karte);font-weight:600;line-height:1;text-align:center;
  color:var(--stw-primary);background:none;border:1px solid var(--stw-primary);border-radius:var(--stw-radius-knopf)}
.karte-knopf:hover{color:var(--stw-primary-hover);border-color:var(--stw-primary-hover)}
.lesespalte{max-width:var(--stw-measure);display:flex;flex-direction:column;gap:18px}
.tafel{margin:0;padding:28px 32px;background:var(--stw-surface);color:var(--stw-on-surface);
  border:1px solid var(--stw-border-strong);border-radius:var(--stw-radius-karte)}
.textkoerper{overflow-wrap:anywhere}
.textkoerper>*+*{margin-top:var(--stw-space-4)}
.textkoerper a{color:inherit;text-decoration:underline;text-underline-offset:.2em}
.textkoerper h2{font-size:var(--stw-size-band);line-height:var(--stw-lh-band);color:var(--stw-on-surface)}
.textkoerper>h2:not(:first-child){margin-top:32px}
.textkoerper h3{margin-top:24px}
.textkoerper ul,.textkoerper ol{padding-left:1.15em}
.textkoerper li+li{margin-top:4px}
.textkoerper li::marker{color:var(--stw-primary)}
.textkoerper code{font-size:.9em;padding:1px 4px;border-radius:var(--stw-radius-xs);background:var(--stw-background)}
.textkoerper table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse;font-size:var(--stw-size-body-sm);line-height:var(--stw-lh-body-sm)}
.textkoerper th,.textkoerper td{padding:8px 10px;text-align:left;vertical-align:top;border-top:1px solid var(--stw-border-strong);overflow-wrap:normal;min-width:7rem}
.textkoerper th{font-weight:600;color:var(--stw-on-surface-variant);border-top:0}
.textverweis{align-self:flex-start;font-size:var(--stw-size-body-sm);font-weight:500;line-height:1;padding-bottom:3px;color:var(--stw-primary)}
.textverweis:hover{color:var(--stw-primary-hover)}
.gedaempft{color:var(--stw-on-surface-variant)}
.klein{font-size:var(--stw-size-body-sm)}

/* Verweise als Kacheln (wie .markenreihe/.marke auf steidl.com) */
.markenreihe{display:flex;flex-wrap:wrap;gap:12px;list-style:none;margin:0;padding:0}
.marke{display:inline-flex;flex-direction:column;gap:2px;padding:12px 16px;font-size:var(--stw-size-body-sm);font-weight:600;
  color:var(--stw-on-surface);background:var(--stw-surface);border:1px solid var(--stw-border-strong);border-radius:var(--stw-radius-karte)}
.marke-zeile{font-size:var(--stw-size-caption);font-weight:400;color:var(--stw-on-surface-variant)}
a.marke:hover{color:var(--stw-primary-hover);border-color:var(--stw-primary)}

/* Befehlszeilen zum Kopieren */
.befehl{margin:0;padding:12px 14px;font-size:.8125rem;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere;
  color:var(--stw-on-surface);background:var(--stw-background);border:1px solid var(--stw-border-strong);border-radius:var(--stw-radius-md)}
.befehl-block{display:flex;flex-direction:column;gap:6px;min-width:0}
.befehl-titel{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:26px;
  font-size:var(--stw-size-caption);font-weight:600;color:var(--stw-on-surface-variant)}
.kopierknopf{font:inherit;font-size:var(--stw-size-caption);font-weight:600;line-height:1;padding:5px 10px;cursor:pointer;
  color:var(--stw-primary);background:none;border:1px solid var(--stw-border-strong);border-radius:var(--stw-radius-schalter)}
.kopierknopf:hover{color:var(--stw-primary-hover);border-color:var(--stw-primary)}

/* Block „Für Claude Code“ auf der Startseite: abgesetzt wie ein Hinweis, Rand in Primärfarbe */
.claude-block{display:flex;flex-direction:column;gap:14px;max-width:var(--stw-measure);padding:22px 24px;
  background:var(--stw-note-info-bg);color:var(--stw-on-surface);border:1px solid var(--stw-border-strong);
  border-left:var(--stw-line-marker) solid var(--stw-primary);border-radius:var(--stw-radius-karte)}
.claude-block h2{color:var(--stw-on-surface)}
.claude-block-regel{font-weight:600}
.claude-block-einstieg{font-family:var(--stw-font-display);font-size:var(--stw-size-band);line-height:var(--stw-lh-band);color:var(--stw-on-surface)}
.claude-block .klein a{text-decoration:underline;text-underline-offset:.2em}
.befehl-klein .befehl{font-size:.75rem;padding:8px 12px}
.befehl-klein .befehl-titel{min-height:22px}
/* aufklappbare Befehle (<details>), ohne JavaScript bedienbar */
.befehl-aufklapp>summary{cursor:pointer;width:fit-content;font-size:var(--stw-size-body-sm);font-weight:600;color:var(--stw-primary)}
.befehl-aufklapp>summary:hover{color:var(--stw-primary-hover)}
.befehl-aufklapp[open]>summary{margin-bottom:10px}
/* Verweise als Logo-Kacheln: Logo oben, Name darunter */
.marken-logos .marke-logo{align-items:center;gap:10px;min-width:150px;padding:18px 20px;text-align:center}
.marke-logo img{display:block;height:56px;width:auto}
.claude-block code{font-size:.9em}

/* Skill-Karten */
.skill{gap:12px;padding:20px 22px}
.skill-kopf{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 16px}
.skill-name{font-family:var(--stw-font-mono);font-size:1.0625rem;font-weight:600;color:var(--stw-on-surface)}
.skill-fassung{font-size:var(--stw-size-caption);font-weight:600;color:var(--stw-accent)}
.skill-zweck{color:var(--stw-on-surface-variant);max-width:var(--stw-measure)}
.knopfreihe{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.pruefraster{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin-top:4px}
.schluessel-zeile{white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-all}
.angaben{display:grid;grid-template-columns:max-content 1fr;gap:var(--stw-space-3) var(--stw-space-5);font-size:var(--stw-size-body-sm)}
.angaben dt{color:var(--stw-on-surface-variant);font-weight:600}
.angaben dd{margin:0;overflow-wrap:anywhere}
@media (max-width:479.98px){.angaben{grid-template-columns:1fr;row-gap:0}.angaben dd{margin-bottom:var(--stw-space-3)}}
.hinweis{padding:14px 16px;border-left:var(--stw-line-marker) solid var(--stw-warning-ink);background:var(--stw-note-warn-bg);
  color:var(--stw-on-surface);border-radius:var(--stw-radius-sm)}
.hinweis-info{border-left-color:var(--stw-primary);background:var(--stw-note-info-bg)}
.hinweis-titel{display:block;font-weight:600;color:var(--stw-on-surface)}
.fehlercode{font-family:var(--stw-font-display);font-size:var(--stw-size-h1);line-height:1;color:var(--stw-primary)}
.linkreihe{display:flex;flex-wrap:wrap;gap:var(--stw-space-4);list-style:none;margin:var(--stw-space-4) 0 0;padding:0;font-size:var(--stw-size-body-sm)}

/* ---------- Vertragsklassen für /zugang ---------- */
.card{display:flex;flex-direction:column;gap:16px;padding:28px 32px;min-width:0;
  background:var(--stw-surface);color:var(--stw-on-surface);border:1px solid var(--stw-border-strong);border-radius:var(--stw-radius-karte)}
.card h1{font-size:var(--stw-size-h1-seite);line-height:var(--stw-lh-h1-seite);color:var(--stw-on-surface)}
.card h2{font-size:var(--stw-size-band);line-height:var(--stw-lh-band);color:var(--stw-on-surface)}
.card form{display:flex;flex-direction:column;gap:10px}
.card label{font-size:var(--stw-size-body-sm);font-weight:600}
.card a:not(.btn){text-decoration:underline;text-underline-offset:.2em}
.btn{display:inline-block;align-self:flex-start;margin:0;padding:12px 18px;cursor:pointer;
  font-family:var(--stw-font-text);font-size:var(--stw-size-body-sm);font-weight:600;line-height:1;text-align:center;text-decoration:none;
  color:var(--stw-on-band);background:var(--stw-band);border:0;border-radius:var(--stw-radius-knopf)}
.btn:hover{color:var(--stw-on-band);background:color-mix(in srgb,var(--stw-band) 88%,var(--stw-on-band))}
.btn:disabled{cursor:default;opacity:.6}
.input{display:block;width:100%;margin:0;padding:10px 12px;font:inherit;font-size:var(--stw-size-body);line-height:var(--stw-lh-body);
  color:var(--stw-on-surface);background:var(--stw-background);border:1px solid var(--stw-border-strong);border-radius:var(--stw-radius-knopf)}
.input::placeholder{color:var(--stw-on-surface-variant);opacity:1}
.input[aria-invalid=true]{border-color:var(--stw-error-ink);box-shadow:inset 0 0 0 1px var(--stw-error-ink)}
.mono{display:block;margin:0;padding:12px 14px;font-family:var(--stw-font-mono);font-size:.875rem;line-height:1.55;
  white-space:pre-wrap;overflow-wrap:anywhere;
  color:var(--stw-on-surface);background:var(--stw-background);border:1px solid var(--stw-border-strong);border-radius:var(--stw-radius-md)}
.muted{color:var(--stw-on-surface-variant)}
.alert{padding:12px 14px;font-weight:600;color:var(--stw-error-ink);background:var(--stw-background);
  border:1px solid var(--stw-error-ink);border-left-width:var(--stw-line-marker);border-radius:var(--stw-radius-sm)}
.ok{padding:12px 14px;font-weight:600;color:var(--stw-success-ink);background:var(--stw-background);
  border:1px solid var(--stw-success-ink);border-left-width:var(--stw-line-marker);border-radius:var(--stw-radius-sm)}

/* ---------- Fuß (Vertrag: .site-footer) – wie .fuss auf steidl.com ---------- */
.site-footer{width:100%;max-width:var(--stw-rahmen);margin:16px auto 0;padding:22px 28px;
  color:var(--stw-on-surface-variant);font-size:var(--stw-size-caption);line-height:var(--stw-lh-caption);
  border-top:1px solid var(--stw-border-strong);display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center}
.site-footer a{color:var(--stw-on-surface-variant)}
.site-footer a:hover{color:var(--stw-primary)}
.site-footer.fuss-voll{display:block;padding:0;border-top:0}
.fuss-spalten{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:var(--stw-space-5);padding:22px 28px 26px}
.fuss-titel{margin:0;font-family:var(--stw-font-text);font-size:var(--stw-size-h3);font-weight:600;line-height:var(--stw-lh-h3);color:var(--stw-on-background)}
.fuss-liste{display:flex;flex-direction:column;gap:6px;margin-top:10px;list-style:none;padding:0}
.fuss-unten{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding:22px 28px;border-top:1px solid var(--stw-border-strong)}

/* ---------- schmal ---------- */
@media (max-width:719.98px){
  .site-header{padding:16px 20px;gap:12px}
  .leiste-rechts,.leiste-menue{gap:14px}
  .buehne{margin:0 20px;padding:32px 22px}
  .buehne h1{font-size:var(--stw-size-h1-seite);line-height:var(--stw-lh-h1-seite)}
  .abschnitt{padding:32px 20px 28px}
  .wrap{padding:28px 20px}
  .tafel,.card{padding:20px}
  .skill{padding:18px}
  .fuss-spalten{padding:20px 20px 22px}
  .fuss-unten,.site-footer{padding:20px}
  .site-footer.fuss-voll{padding:0}
}
@media (pointer:coarse){
  .leiste-menue a{display:inline-flex;align-items:center;min-height:44px}
  .fuss-liste{gap:0}
  .fuss-liste a{display:inline-flex;align-items:center;min-height:44px}
}