/* COPY of frontend/src/design/daemmerung.css — do not edit here. Refresh: node frontends/design/erzeugen.mjs --sync */
/* Design system 2 "Zuhause bei Dämmerung" (D0, docs/danwood24/DESIGN-REVIEW-2026-10.md).

   Tokens, self-hosted fonts and the base rules of the new look. Everything that
   changes how a page looks lives under the class .dw2, so the existing views
   stay exactly as they are until D1/D2 switch them over. The @font-face rules
   cost nothing until an element actually uses the font (since 15.10.2026 every
   surface, the older views included, uses Geist through the tokens).

   The office colour is NOT defined here: --dw-brand, --dw-on-brand,
   --dw-brand-strong and --dw-brand-text come from the runtime branding
   (tokens.css + branding.ts). In this system it is used only for the main
   action and for "braucht dich".

   Copied 1:1 to frontends/design/ (erzeugen.mjs --sync), together with
   ./schriften/. frontend/pruef/design_tokens.mjs checks the contrast pairs. */

/* --- Font: Geist (SIL Open Font License 1.1, see ./schriften/OFL-Geist.txt) ---
   Static weights 400/500/600/700, latin + latin-ext, self-hosted (no request to any font host).
   Subset from the official package `geist` (npm, vercel/geist-font). */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('./schriften/geist-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: 'Geist';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('./schriften/geist-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: 'Geist';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('./schriften/geist-latin-500-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: 'Geist';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('./schriften/geist-latin-ext-500-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: 'Geist';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url('./schriften/geist-latin-600-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: 'Geist';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url('./schriften/geist-latin-ext-600-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: 'Geist';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url('./schriften/geist-latin-700-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: 'Geist';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url('./schriften/geist-latin-ext-700-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;
}

:root {
  /* --- Grundwerte (fixed for every office) --- */
  --dw-putz: #f4f5f2;               /* ground */
  --dw-flaeche: #ffffff;            /* cards, fields */
  --dw-graphit: #22262a;            /* text */
  --dw-grau: #5e666c;               /* secondary text, AA on putz and flaeche */
  --dw-fuge: #dcdfd9;               /* hairlines */
  --dw-fuge-stark: #80878c;         /* field borders, 3:1 on putz and flaeche */
  --dw-daemmerung: #b81d24;         /* Danwood red: JANA's area, navigation, house stage (Fabian 10.10.2026: red leads) */
  --dw-daemmerung-tief: #8c141a;
  --dw-daemmerung-hell: #c41f26;    /* glow at the top of the stage */
  --dw-daemmerung-text: #fdeeee;    /* text on daemmerung */
  --dw-daemmerung-leise: #f8d5d6;   /* secondary text on daemmerung */
  --dw-fensterlicht: #ffe2a1;       /* warm window light: done, achieved */
  --dw-fensterlicht-weich: #fbe3a6;
  --dw-fensterlicht-text: #7a5300;  /* "light" as text on light surfaces */
  --dw-fenster-aus: #7a1116;        /* window not lit yet */
  --dw-wand: #9d181e;               /* house wall on the stage */
  --dw-dach: #ffffff;               /* roof and wall line on the stage */
  --dw-fehler: #b3261e;             /* error text and border (fixed, not the office colour) */
  --dw-fehler-weich: #fbeae8;
  --dw-nachtrot: #5c0e13;           /* D3: lower end of the stage, houses in the foreground */
  --dw-fensterlicht-schein: rgb(255 226 161 / 0.16);  /* D3: evening glow at the top of the stage */
  --dw-fensterlicht-rand: rgb(255 226 161 / 0.22);    /* D3: thin light edge of icon tiles on red */
  --dw-fensterlicht-glanz: rgb(245 192 78 / 0.7);     /* D3: glow around a lit window */
  --dw-abdunkeln: rgb(0 0 0 / 0.14);                  /* D3: hover and tiles on the red rail */
  --dw-linie-hell: rgb(255 255 255 / 0.24);           /* D3: hairlines and outlines on red */
  --dw-schein-rot: rgb(184 29 36 / 0.45);             /* D3: glow under a Danwood-red button */
  --dw-haus-leer-nacht: rgb(255 255 255 / 0.14);      /* house indicator on red: empty surface */
  --dw-haus-rand-nacht: rgb(255 255 255 / 0.62);      /* house indicator on red: outline of an empty surface */

  /* --- Fonts and numbers --- */
  --dw-schrift-titel: Geist, system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --dw-schrift-text: Geist, system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

  /* --- Rhythm --- */
  --dw-rand: clamp(16px, 3vw, 40px);    /* page padding, full width */
  --dw-radius-karte: 18px;
  --dw-radius-knopf: 12px;
  --dw-rahmen-leiste: 236px;            /* left rail on desktop */
  --dw-rahmen-unten: 102px;             /* space kept free for the bottom bar on phones (64px bar + raised talk button) */
  --dw-schatten-weich: 0 30px 60px -28px rgb(92 14 19 / 0.55), 0 8px 18px -10px rgb(34 38 42 / 0.25);  /* D3: floating preview */
  --dw-schatten-zeile: 0 1px 0 rgb(34 38 42 / 0.04), 0 1px 2px rgb(34 38 42 / 0.06);                   /* D3: rows and cards */
  --dw-bewegung: cubic-bezier(.2, .7, .2, 1);                                                         /* D3: one easing */

  /* --- Focus: dark ring on light surfaces, light ring on dämmerung --- */
  --dw-fokus: var(--dw-graphit);
  --dw-fokus-dunkel: var(--dw-fensterlicht);
}

/* --- Base rules, only inside .dw2 ------------------------------------------ */
.dw2 {
  background: var(--dw-putz);
  color: var(--dw-graphit);
  font: 400 16px/1.5 var(--dw-schrift-text);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
.dw2 *, .dw2 *::before, .dw2 *::after { box-sizing: border-box; }
/* Headings: Geist bold, normal case, never letter-spaced capitals. */
.dw2 :where(h1, h2, h3, h4) {
  font-family: var(--dw-schrift-titel);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
  margin: 0;
  color: inherit;
}
.dw2 h1 { font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.05; }
.dw2 h2 { font-size: 1.25rem; line-height: 1.3; }
.dw2 h3 { font-size: 1.1rem; line-height: 1.35; }
.dw2 h4 { font-size: 1rem; line-height: 1.4; }
.dw2 p { margin: 0; }
/* Numbers: always the text face, tabular — never the display face. */
.dw2 :where(.dw-zahl, .dw-betrag, dd, td, time) {
  font-family: var(--dw-schrift-text);
  font-variant-numeric: tabular-nums;
}
.dw2 .dw-leise { color: var(--dw-grau); }
.dw2 a { color: inherit; }
.dw2 :where(a, button, summary, [role='button'], [tabindex]:not([tabindex='-1']), input, select, textarea):focus-visible {
  outline: 3px solid var(--dw-fokus);
  outline-offset: 2px;
}
.dw2 .dw-nacht :where(a, button, [tabindex]:not([tabindex='-1'])):focus-visible { outline-color: var(--dw-fokus-dunkel); }
/* Icons are stroke SVG (no emoji): DwIcon.vue. */
.dw2 svg.dw-icon {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
/* The house is the Danwood logo: filled, no stroke (also outside .dw2, e.g. the static pages). */
svg.dw-icon--marke { fill: currentColor !important; stroke: none !important; }
/* Section heading row with an optional action on the right. */
.dw2 .dw-abschnitt { display: grid; gap: 14px; min-width: 0; }
.dw2 .dw-karte {
  background: var(--dw-flaeche);
  border-radius: var(--dw-radius-karte);
  padding: 18px 20px;
  min-width: 0;
}
/* Metadata: wraps as a whole, no middle-dot chains. */
.dw2 .dw-meta { display: flex; flex-wrap: wrap; column-gap: 14px; row-gap: 2px; color: var(--dw-grau); margin: 4px 0 0; }
.dw2 .dw-meta > * { white-space: nowrap; }
.dw2 .dw-unsichtbar {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- The house (DwHaus.vue; the static pages use the same markup) ---------
   Built from the FORM of the Danwood house logo (frontend/public/danwood-icon.svg, viewBox
   0 0 100 100, Fabian 15.10.2026): the four surfaces fill one after another, 1 Anfrage = left
   wall, 2 Angebot = right wall, 3 Finanzierung = left roof, 4 Vertrag = right roof; 5 Einzug =
   all four plus a small tick in the free corner above the right roof. Empty = outlined. */
.dw-haus {
  display: block; flex: none;
  --dw-haus-voll: var(--dw-dach);            /* nacht: the white logo on the stage */
  --dw-haus-leer: var(--dw-haus-leer-nacht);
  --dw-haus-rand: var(--dw-haus-rand-nacht);
  --dw-haus-marke: var(--dw-fensterlicht);   /* the tick of step 5 */
  --dw-haus-haken: var(--dw-nachtrot);
}
.dw-haus--tag {
  --dw-haus-voll: var(--dw-daemmerung);      /* tag: the red logo on a light card */
  --dw-haus-leer: var(--dw-fuge);
  --dw-haus-rand: var(--dw-fuge-stark);
  --dw-haus-marke: var(--dw-daemmerung);
  --dw-haus-haken: var(--dw-flaeche);
}
.dw-haus--mini { width: 48px; height: 48px; }
.dw-haus--klein { width: 44px; height: 44px; }
.dw-haus--mittel { width: 60px; height: 60px; }
.dw-haus--gross { width: 104px; height: 104px; }
.dw-haus .flaeche { fill: var(--dw-haus-leer); stroke: var(--dw-haus-rand); stroke-width: 1.25px; vector-effect: non-scaling-stroke; stroke-linejoin: miter; }
.dw-haus .flaeche.an { fill: var(--dw-haus-voll); stroke: var(--dw-haus-voll); }
.dw-haus .marke { fill: var(--dw-haus-marke); }
.dw-haus .haken { fill: none; stroke: var(--dw-haus-haken); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: no-preference) {
  .dw-haus--auf .flaeche.an { animation: dw-haus-fuellen 0.9s ease-out both; }
  /* no style attribute: the CSP of the static pages blocks inline styles */
  .dw-haus--auf .flaeche.an:nth-of-type(2) { animation-delay: 0.15s; }
  .dw-haus--auf .flaeche.an:nth-of-type(3) { animation-delay: 0.3s; }
  .dw-haus--auf .flaeche.an:nth-of-type(4) { animation-delay: 0.45s; }
  .dw-haus--auf :is(.marke, .haken) { animation: dw-haus-erscheinen 0.5s 0.6s ease-out both; }
}
@keyframes dw-haus-fuellen { from { fill: var(--dw-haus-leer); stroke: var(--dw-haus-rand); } }
@keyframes dw-haus-erscheinen { from { opacity: 0; } }

/* ═══ D3 building blocks (docs/danwood24/DESIGN-D3.md §6) ═════════════════════
   Used by the static pages of the control plane (frontends/zentrale) and the Vue apps. */

/* Loading: a turning ring inside a button or next to a sentence. */
.dw2 .dw-dreht {
  display: inline-block; width: 1.05em; height: 1.05em; flex: none; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent; opacity: .85;
}
@media (prefers-reduced-motion: no-preference) {
  .dw2 .dw-dreht { animation: dw-drehen .8s linear infinite; }
}
@keyframes dw-drehen { to { transform: rotate(360deg); } }

/* Success: window light, a tick, then what happens next. */
.dw2 .dw-erfolg {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: start;
  padding: 16px 18px; border-radius: 16px; background: var(--dw-fensterlicht-weich); color: var(--dw-graphit);
}
.dw2 .dw-erfolg__zeichen {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: var(--dw-flaeche); color: var(--dw-fensterlicht-text);
}
.dw2 .dw-erfolg p { margin: 0; }
.dw2 .dw-erfolg strong { font-weight: 600; }

/* A field that was refused: red border, the sentence right below it. */
.dw2 :where(input, select, textarea)[aria-invalid='true'] { border-color: var(--dw-fehler) !important; }
.dw2 .dw-feldfehler { display: flex; gap: 8px; align-items: flex-start; margin: 2px 0 0; color: var(--dw-fehler); font-size: .92rem; font-weight: 500; }

/* Progress as windows (e.g. 9 of 14 setup steps): lit = done. */
.dw2 .dw-fenster { display: inline-flex; flex-wrap: wrap; gap: 3px; vertical-align: middle; }
.dw2 .dw-fenster > i {
  width: 9px; height: 11px; border-radius: 2px; background: var(--dw-fuge); display: block;
}
.dw2 .dw-fenster > i.an { background: var(--dw-fensterlicht); box-shadow: inset 0 0 0 1px var(--dw-fensterlicht-text); }

/* Status: dot + word. Three tones: licht (done/good), ruhig (in progress), achtung. */
.dw2 .dw-status {
  display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px 3px 8px; border-radius: 999px;
  font-size: .86rem; font-weight: 600; line-height: 1.35; background: var(--dw-putz); color: var(--dw-graphit);
  border: 1px solid var(--dw-fuge); max-width: 100%;
}
.dw2 .dw-status::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--dw-grau); flex: none; }
.dw2 .dw-status--licht { background: var(--dw-fensterlicht-weich); border-color: transparent; }
.dw2 .dw-status--licht::before { background: var(--dw-fensterlicht-text); }
.dw2 .dw-status--ruhig::before { background: var(--dw-daemmerung); }
.dw2 .dw-status--achtung { background: var(--dw-fehler-weich); border-color: transparent; color: var(--dw-fehler); }
.dw2 .dw-status--achtung::before { background: var(--dw-fehler); }

/* Step marks (SVG drawn by the page): done, open, running, failed. */
.dw2 .dw-schritt-zeichen { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border-radius: 50%; }
.dw2 .dw-schritt-zeichen svg { width: 14px; height: 14px; }
.dw2 .dw-schritt-zeichen--done { background: var(--dw-fensterlicht); color: var(--dw-fensterlicht-text); }
.dw2 .dw-schritt-zeichen--pending { border: 1.5px solid var(--dw-fuge-stark); color: var(--dw-grau); }
.dw2 .dw-schritt-zeichen--running { border: 2px solid var(--dw-daemmerung); border-right-color: transparent; }
@media (prefers-reduced-motion: no-preference) {
  .dw2 .dw-schritt-zeichen--running { animation: dw-drehen 1.1s linear infinite; }
}
.dw2 .dw-schritt-zeichen--failed { background: var(--dw-fehler); color: var(--dw-flaeche); }
.dw2 .dw-schritt-zeichen--undo { border: 1.5px dashed var(--dw-fehler); color: var(--dw-fehler); }