/* Dolmi Design-System: gemeinsame Tokens und Komponenten für Website (Hugo) und App (FastAPI).
   Abgeleitet von Bündi (Schriften, Flächen, Radien), eigene Akzentfarbe.
   Token- und Klassennamen sind ein Vertrag (docs/CONTRACTS.md): umbenennen nur mit allen Nutzern. */
@import url('/css/fonts.css');

:root{
  --c-ink:#141414;
  --c-ink-soft:#4c4b48;
  --c-muted:#67635e;          /* >= 4.5:1 auf paper und surface */
  --c-paper:#F8F4F2;
  --c-surface:#ffffff;
  --c-line:#E4E0DD;
  --c-line-2:#d6d1cc;
  --c-wash:#E7F0EC;           /* ruhige Hinterlegung */

  --c-accent:#C93A15;         /* Knöpfe, Links: weiss darauf 5.1:1 */
  --c-accent-ink:#ffffff;
  --c-accent-dark:#9c3d1c;
  --c-accent-bright:#F0521E;  /* nur dekorativ, nie für Text */
  --c-deep:#011936;           /* dunkle Bänder */
  --c-deep-2:#0a2a4d;
  --c-live:#177863;           /* Live aktiv: weiss darauf 5.4:1 */
  --c-plum:#662344;
  --c-gold:#e2a33c;
  --c-danger:#b42318;

  --f-display:'Fraunces', Georgia, 'Times New Roman', serif;
  --f-body:'Mulish', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono:'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;

  --r:14px;
  --r-sm:10px;
  --r-pill:100px;
  --shadow:0 22px 55px -26px rgba(20,20,20,.28), 0 6px 16px -10px rgba(20,20,20,.10);
  --shadow-soft:0 14px 34px -18px rgba(20,20,20,.20);

  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:72px;
  --wrap:1180px;
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--c-paper);color:var(--c-ink);font:400 1.0625rem/1.6 var(--f-body)}
img,svg,video,audio{max-width:100%}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:600;line-height:1.15;margin:0 0 var(--s-3);text-wrap:balance;letter-spacing:-.01em}
h1{font-size:clamp(2rem,5vw,3.4rem)}
h2{font-size:clamp(1.6rem,3.4vw,2.4rem)}
h3{font-size:1.25rem}
p{margin:0 0 var(--s-4)}
a{color:var(--c-accent)}
a:hover{color:var(--c-accent-dark)}
:focus-visible{outline:3px solid var(--c-accent-bright);outline-offset:2px;border-radius:4px}

.container{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--s-4)}
@media (min-width:720px){.container{padding-inline:var(--s-5)}}
.stack{display:flex;flex-direction:column;gap:var(--s-4)}
.row{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center}
.muted{color:var(--c-muted)}
.mono{font-family:var(--f-mono)}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:44px;padding:10px 20px;border-radius:var(--r-pill);border:2px solid transparent;font:700 1rem/1.2 var(--f-body);text-decoration:none;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.btn--primary{background:var(--c-accent);color:var(--c-accent-ink)}
.btn--primary:hover{background:var(--c-accent-dark);color:var(--c-accent-ink)}
.btn--ghost{background:transparent;color:var(--c-ink);border-color:var(--c-line-2)}
.btn--ghost:hover{border-color:var(--c-ink);color:var(--c-ink)}
.btn--deep{background:var(--c-deep);color:#fff}
.btn--live{background:var(--c-live);color:#fff}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed}

.card{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r);padding:var(--s-5);box-shadow:var(--shadow-soft)}
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:var(--r-pill);background:var(--c-wash);color:var(--c-ink);font-size:.875rem;font-weight:600}
.notice{border-radius:var(--r-sm);padding:var(--s-3) var(--s-4);background:var(--c-wash);border:1px solid var(--c-line)}
.notice--error{background:#fdecea;border-color:#f5c2bd;color:var(--c-danger)}

.field{display:flex;flex-direction:column;gap:6px}
.label{font-weight:700;font-size:.95rem}
.input,.select,.textarea{width:100%;min-height:44px;padding:10px 14px;border:1.5px solid var(--c-line-2);border-radius:var(--r-sm);background:var(--c-surface);color:var(--c-ink);font:inherit}
.textarea{min-height:160px;resize:vertical}
.input:focus,.select:focus,.textarea:focus{border-color:var(--c-ink);outline:none;box-shadow:0 0 0 3px rgba(240,82,30,.25)}

/* Ergänzungen der Website (additiv, 2026-09-18): Grössen- und Flächenvarianten für Knöpfe, Eyebrow. */
.btn--sm{min-height:38px;padding:8px 16px;font-size:.9rem}
.btn--lg{min-height:52px;padding:14px 26px;font-size:1.0625rem}
.btn--white{background:#fff;color:var(--c-ink)}
.btn--white:hover{background:var(--c-paper);color:var(--c-ink)}
.btn--outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.btn--outline-light:hover{background:#fff;color:var(--c-ink);border-color:#fff}
.btn--live:hover{background:#12604f;color:#fff}
.btn--deep:hover{background:var(--c-deep-2);color:#fff}
.eyebrow{display:inline-block;margin:0 0 12px;font:500 12.5px/1.4 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--c-accent-dark)}