/* GENERATED by frontends/design/erzeugen.mjs — do not edit.
   Static build of frontends/design/ for the calculator (no bundler there).
   source-sha256: 8c33f3ef5d7ff405741265449ac46b85a65178366b58c2997cc9e6a6bec0ed40 */
/* ── frontends/design/primitives.css ── */
/* COPY of frontend/src/design/primitives.css — do not edit here. Refresh: node frontends/design/erzeugen.mjs --sync */
/* Design system layer 1 — primitives ("Grundwerte").
   Raw scales without meaning. Components should use the semantic tokens from
   tokens.css; a primitive is used directly only where the historic look needs
   a one-off tone. The number is the CIE lightness L* x 10 (000 = black,
   1000 = white), so a scale reads from light to dark.
   The scales still contain every historic tone 1:1 (identical rendering);
   merging neighbours is a follow-up that needs screenshot tests — see
   docs/danwood24/DESIGN.md. */

:root {
  --dw-white: #ffffff;
  --dw-white-rgb: 255 255 255;
  --dw-black: #000000;
  --dw-black-rgb: 0 0 0;

  /* gray: neutral greys */
  --dw-gray-994: #fffdf9;
  --dw-gray-994-rgb: 255 253 249;
  --dw-gray-990: #fbfcff;
  --dw-gray-986: #fafbfc;
  --dw-gray-984: #fafafa;
  --dw-gray-983: #fbfaf9;
  --dw-gray-981: #f5faf6;
  --dw-gray-980: #f4faf6;
  --dw-gray-979: #f4faf5;
  --dw-gray-978: #f7f9fa;
  --dw-gray-977: #faf8f6;
  --dw-gray-972: #f7f7f7;
  --dw-gray-968: #f7f5f3;
  --dw-gray-967: #f6f4f1;
  --dw-gray-966: #f6f5f3;
  --dw-gray-965: #f5f5f5;
  --dw-gray-964: #f6f4f2;
  --dw-gray-963: #f4f4f7;
  --dw-gray-962: #f4f4f4;
  --dw-gray-958: #f3f3f3;
  --dw-gray-955: #f2f2f2;
  --dw-gray-954: #f0f2f5;
  --dw-gray-948: #f0f0f0;
  --dw-gray-946: #f2efec;
  --dw-gray-945: #f1efeb;
  --dw-gray-941: #eeeeee;
  --dw-gray-940: #eceef0;
  --dw-gray-927: #eaeaea;
  --dw-gray-926: #e8eaed;
  --dw-gray-920: #e8e8e8;
  --dw-gray-913: #e6e6e6;
  --dw-gray-909: #e5e5e5;
  --dw-gray-892: #e0e0e0;
  --dw-gray-878: #dcdcdc;
  --dw-gray-867: #d9d9d9;
  --dw-gray-835: #d0d0d0;
  --dw-gray-806: #c8c8c8;
  --dw-gray-759: #bbbbbb;
  --dw-gray-636: #9a9a9a;
  --dw-gray-632: #999999;
  --dw-gray-567: #888888;
  --dw-gray-500: #777777;
  --dw-gray-492: #757575;
  --dw-gray-452: #6b6b6b;
  --dw-gray-432: #666666;
  --dw-gray-361: #555555;
  --dw-gray-354: #55534f;
  --dw-gray-289: #444444;
  --dw-gray-212: #333333;
  --dw-gray-189: #2b2f2a;
  --dw-gray-112: #1c1e21;
  --dw-gray-112-rgb: 28 30 33;
  --dw-gray-108: #1d1d1d;
  --dw-gray-098: #1b1b1b;
  --dw-gray-093: #1a1a1a;
  --dw-gray-063: #141414;
  --dw-gray-063-rgb: 20 20 20;
  --dw-gray-059: #131313;
  --dw-gray-055: #121212;
  --dw-gray-030: #0b0b0b;

  /* sand: warm paper and ink tones */
  --dw-sand-985: #fffaf3;
  --dw-sand-983: #fdfaf3;
  --dw-sand-974: #fff7e6;
  --dw-sand-963: #fff3e0;
  --dw-sand-961: #f8f3ea;
  --dw-sand-960: #f7f3ec;
  --dw-sand-959: #f5f3ee;
  --dw-sand-953: #f6f1ea;
  --dw-sand-952: #f4f1ec;
  --dw-sand-944: #f3eee6;
  --dw-sand-943: #f3eee9;
  --dw-sand-942: #fbedd2;
  --dw-sand-938: #efede8;
  --dw-sand-919: #ece7e1;
  --dw-sand-917: #e9e7e2;
  --dw-sand-906: #e6e4df;
  --dw-sand-902: #e8e2de;
  --dw-sand-901: #e6e2df;
  --dw-sand-886: #e8ddd0;
  --dw-sand-881: #e8dcc2;
  --dw-sand-871: #e0d9d4;
  --dw-sand-868: #e2d8ca;
  --dw-sand-799: #c9c6bf;
  --dw-sand-788: #c6c3bb;
  --dw-sand-780: #cdbfae;
  --dw-sand-600: #9c8f7c;
  --dw-sand-545: #85827c;
  --dw-sand-522: #857b70;
  --dw-sand-491: #8d6e63;
  --dw-sand-490: #7c7369;
  --dw-sand-436: #6b6663;
  --dw-sand-367: #5d554d;
  --dw-sand-361: #5a544e;
  --dw-sand-340: #5a4e40;
  --dw-sand-286: #4a423c;
  --dw-sand-156: #2b2622;
  --dw-sand-132: #26211d;
  --dw-sand-132-rgb: 38 33 29;
  --dw-sand-112: #221d19;
  --dw-sand-107: #2c1810;

  /* slate: cool blue-greys */
  --dw-slate-974: #f4f8fc;
  --dw-slate-971: #f4f7fb;
  --dw-slate-967: #f2f6fb;
  --dw-slate-951: #eef1f8;
  --dw-slate-933: #e4edf6;
  --dw-slate-931: #e6ecf3;
  --dw-slate-912: #e2e6ea;
  --dw-slate-911: #e0e6f0;
  --dw-slate-902: #dbe4f0;
  --dw-slate-866: #d6d9dd;
  --dw-slate-863: #cfd9e6;
  --dw-slate-862: #d5d8dc;
  --dw-slate-858: #cfd8dc;
  --dw-slate-853: #cfd6dd;
  --dw-slate-847: #d0d4d9;
  --dw-slate-656: #9aa0a6;
  --dw-slate-473: #6b7177;
  --dw-slate-449: #546e7a;
  --dw-slate-437: #666677;
  --dw-slate-400: #5a5f64;
  --dw-slate-280: #3d4348;
  --dw-slate-264: #3a3f44;
  --dw-slate-254: #2c3e50;
  --dw-slate-173: #1f2a44;

  /* red: error reds (not the brand — the brand scale is derived at runtime) */
  --dw-red-967: #fdf3f3;
  --dw-red-966: #fdf3f2;
  --dw-red-964: #fbf3f2;
  --dw-red-948: #fdecea;
  --dw-red-947: #fdeceb;
  --dw-red-945: #fbeceb;
  --dw-red-876: #f0d6d3;
  --dw-red-840: #f4c7c3;
  --dw-red-839: #f5c6c4;
  --dw-red-828: #efc4c5;
  --dw-red-457: #d2232a;
  --dw-red-348: #a11b16;
  --dw-red-307: #8c1d18;
  --dw-red-306: #8a1f1b;
  --dw-red-302: #8a1c1c;

  /* orange: orange / ochre */
  --dw-orange-850: #ffcc80;
  --dw-orange-771: #f0b27a;
  --dw-orange-753: #e8b04b;
  --dw-orange-741: #f5a623;
  --dw-orange-608: #ef6c00;
  --dw-orange-457: #9a5f0a;
  --dw-orange-361: #7a4a00;

  /* amber: amber / yellow */
  --dw-amber-875: #f0d9a8;
  --dw-amber-858: #ffd23a;
  --dw-amber-858-rgb: 255 210 58;
  --dw-amber-787: #f4b942;
  --dw-amber-677: #c9a000;
  --dw-amber-404: #7a5a12;

  /* green: status green only — never a brand or decorative colour */
  --dw-green-975: #f2faf4;
  --dw-green-961: #eef6ee;
  --dw-green-946: #e8f2ea;
  --dw-green-945: #dcf8c6;
  --dw-green-932: #e1efe4;
  --dw-green-889: #cfe5d3;
  --dw-green-884: #cfe3d4;
  --dw-green-711: #34c759;
  --dw-green-711-rgb: 52 199 89;
  --dw-green-640: #4caf50;
  --dw-green-640-rgb: 76 175 80;
  --dw-green-575: #2e9e44;
  --dw-green-575-rgb: 46 158 68;
  --dw-green-569: #1f9d42;
  --dw-green-467: #2e7d4f;
  --dw-green-463: #2e7d32;
  --dw-green-462: #3d7a4a;
  --dw-green-457: #2f7a45;
  --dw-green-456: #1e7c34;
  --dw-green-358: #006300;
  --dw-green-280: #154d00;

  /* teal: teal */
  --dw-teal-617: #26a69a;

  /* blue: blue */
  --dw-blue-594: #5b8def;
  --dw-blue-504: #2a78d6;
  --dw-blue-498: #027eb5;
  --dw-blue-498-rgb: 2 126 181;
  --dw-blue-493: #1976d2;
  --dw-blue-477: #5c6bc0;
  --dw-blue-458: #7e57c2;
  --dw-blue-385: #2b5b9c;
  --dw-blue-377: #1d5c8f;
  --dw-blue-373: #2c5b84;
  --dw-blue-350: #35566b;

  /* violet: violet / magenta */
  --dw-violet-426: #c2185b;

  /* Spacing (4 px grid) */
  --dw-space-1: 4px;
  --dw-space-2: 8px;
  --dw-space-3: 12px;
  --dw-space-4: 16px;
  --dw-space-5: 24px;
  --dw-space-6: 32px;
  --dw-space-7: 48px;
  --dw-space-8: 64px;

  /* Radii */
  --dw-radius-xs: 6px;
  --dw-radius-sm: 10px;
  --dw-radius-md: 14px;
  --dw-radius-lg: 16px;
  --dw-radius-pill: 999px;

  /* Shadows */
  --dw-shadow-sm: 0 1px 2px rgb(var(--dw-black-rgb) / 0.04);
  --dw-shadow-md: 0 4px 20px -8px rgb(var(--dw-black-rgb) / 0.08), 0 2px 4px rgb(var(--dw-black-rgb) / 0.04);
  --dw-shadow-lg: 0 12px 32px -20px rgb(var(--dw-sand-132-rgb) / 0.45);

  /* Type */
  /* One face everywhere: Geist (self-hosted, @font-face in daemmerung.css). */
  --dw-font-sans: Geist, system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --dw-font-text: var(--dw-font-sans);
  --dw-font-display: var(--dw-font-sans);
  --dw-font-size-sm: 13px;
  --dw-font-size-md: 15px;
  --dw-font-size-lg: 18px;
  --dw-line-height: 1.5;
}

/* ── frontends/design/tokens.css ── */
/* COPY of frontend/src/design/tokens.css — do not edit here. Refresh: node frontends/design/erzeugen.mjs --sync */
/* Design system layer 2 — semantic tokens ("Bedeutungs-Tokens").
   What a colour MEANS, not what it looks like. Every --dw token is defined
   here or in primitives.css.

   The brand block holds the platform default "danwood24" (brandings/neutral.ts).
   At runtime branding.ts overwrites exactly these custom properties on :root
   with the values derived from the office colour — no build needed.
   frontend/pruef/design_tokens.mjs fails if this block and the derivation
   drift apart. */

:root {
  /* --- Surface ("Fläche") --- */
  --dw-surface-page: var(--dw-gray-968);      /* page background, warm paper */
  --dw-surface: var(--dw-white);              /* cards, inputs, dialogs */
  --dw-surface-sunken: var(--dw-sand-961);    /* wells, secondary panels */
  --dw-surface-inverse: var(--dw-sand-132);   /* dark bars and footers */

  /* --- Text --- */
  --dw-text: var(--dw-gray-093);              /* body text */
  --dw-text-muted: var(--dw-gray-452);        /* secondary text, still AA on page */
  --dw-text-inverse: var(--dw-gray-994);      /* text on inverse surface */

  /* --- Border ("Rand") --- */
  --dw-border: var(--dw-sand-919);            /* hairlines, card borders */
  --dw-border-strong: var(--dw-sand-780);     /* inputs, emphasised dividers */

  /* --- Status. Green is a status colour only, never brand or decoration. --- */
  --dw-success: var(--dw-green-457);
  --dw-success-soft: var(--dw-green-932);
  --dw-on-success: var(--dw-white);
  --dw-warning: var(--dw-orange-457);
  --dw-warning-soft: var(--dw-sand-942);
  --dw-on-warning: var(--dw-white);
  --dw-error: var(--dw-red-457);
  --dw-error-strong: var(--dw-red-348);
  --dw-error-soft: var(--dw-red-948);
  --dw-on-error: var(--dw-white);
  --dw-info: var(--dw-blue-373);
  --dw-info-soft: var(--dw-slate-933);
  --dw-on-info: var(--dw-white);

  /* --- Brand ("Marke") — derived at runtime, defaults = neutral danwood24 --- */
  --dw-brand-tint-35: #c67c75;
  --dw-brand-tint-44: #ce8e88;
  --dw-brand-tint-72: #e7c6c3;
  --dw-brand-tint-75: #e9cdca;
  --dw-brand-tint-77: #ebd1ce;
  --dw-brand-tint-78: #ecd3d0;
  --dw-brand-tint-88: #f5e7e5;
  --dw-brand-tint-89: #f5e9e8;
  --dw-brand-tint-90: #f6ebea;
  --dw-brand-tint-93: #f9f1f0;
  --dw-brand-tint-94: #faf3f2;
  --dw-brand-tint-95: #fbf5f4;
  --dw-brand-tint-96: #fcf7f6;
  --dw-brand-tint-97: #fcf9f9;
  --dw-brand-shade-05: #a03228;
  --dw-brand-shade-14: #902e24;
  --dw-brand-shade-41: #631f19;
  --dw-brand-shade-42: #611f18;
  --dw-brand-shade-73: #2d0e0b;
  --dw-brand-shade-78: #250c09;
  --dw-brand: #a8352a;
  --dw-on-brand: #ffffff;
  --dw-brand-text: #a8352a;
  --dw-brand-strong: #812920;
  --dw-on-brand-strong: #ffffff;
  --dw-accent: #c8963e;
  --dw-on-accent: #1a1a1a;
  --dw-focus-ring: #a8352a;
  --dw-brand-rgb: 168 53 42;
  --dw-on-brand-rgb: 255 255 255;
  --dw-brand-strong-rgb: 129 41 32;
  --dw-brand-tint-44-rgb: 206 142 136;
  --dw-brand-shade-41-rgb: 99 31 25;
  --q-primary: #a8352a;
  --q-accent: #c8963e;

  /* --- Brand aliases (follow the derived values automatically) --- */
  --dw-brand-soft: var(--dw-brand-tint-89);                 /* soft brand surface: active row, chip */
  --dw-brand-shadow: rgb(var(--dw-brand-rgb) / 0.18);       /* coloured glow under brand buttons */
  /* The Danwood house mark is content, not office branding: it keeps the manufacturer red. */
  --dw-logo-mark: var(--dw-red-457);

  /* --- Focus ring ("Fokusring") --- */
  --dw-focus-width: 2px;
  --dw-focus-offset: 2px;
}

/* ── frontends/design/base.css ── */
/* COPY of frontend/src/design/base.css — do not edit here. Refresh: node frontends/design/erzeugen.mjs --sync */
/* Design system — global rules that every surface (team app, portal) shares. */

/* Visible keyboard focus (WCAG 2.2, 2.4.7 / 2.4.11). Only :focus-visible, so
   mouse and touch users see no change. Form fields keep their own focus style. */
:where(a, button, summary, [role='button'], [role='tab'], [role='link'], [tabindex]:not([tabindex='-1'])):focus-visible {
  outline: var(--dw-focus-width) solid var(--dw-focus-ring);
  outline-offset: var(--dw-focus-offset);
}

/* ── frontends/design/daemmerung.css ── */
/* 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); }

/* ── frontends/design/anmeldung.css ── */
/* COPY of frontend/src/design/anmeldung.css — do not edit here. Refresh: node frontends/design/erzeugen.mjs --sync */
/* One sign-in page for every surface (D2, docs/danwood24/DESIGN.md §14).

   Team app, customer portal, calculator and advisor use the same markup with these
   classes; the Vue apps through komponenten/DwAnmeldung.vue, the static pages
   (frontends/finanzierung, frontends/berater-app) write the markup by hand. The
   platform sign-in of the control plane (A4) uses the same component.

   Left (on phones: on top) the Danwood-red stage with the office, one sentence and
   the house whose windows light up; right the form, straight on the page (D3: no
   narrow card on an empty half, docs/danwood24/DESIGN-D3.md). One main button in
   the office colour, never pale, never on the red stage. Optional D3 parts on the
   stage: the house at dusk (.dw-buehnenfilm, a photo), a preview of what waits behind the
   sign-in (.dw-vorschau) and three plain advantages (.dw-anm__vorteile).

   Copied 1:1 to frontends/design/ (erzeugen.mjs --sync). */

.dw-anm {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  background: var(--dw-putz);
  color: var(--dw-graphit);
  font: 400 16px/1.5 var(--dw-schrift-text);
}

/* --- Stage ----------------------------------------------------------------- */
.dw-anm__buehne {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 32px clamp(24px, 4.5vw, 72px) 0;
  color: var(--dw-daemmerung-text);
  background:
    radial-gradient(70% 55% at 88% 6%, var(--dw-fensterlicht-schein) 0%, transparent 70%),
    linear-gradient(180deg, var(--dw-daemmerung-hell) 0%, var(--dw-daemmerung) 42%, var(--dw-daemmerung-tief) 80%, var(--dw-nachtrot) 100%);
}
.dw-anm__marke {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--dw-daemmerung-text);
  text-decoration: none;
}
/* The office logo sits on a white tile, so any logo colour stays visible on red. */
.dw-anm__zeichen {
  width: 44px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--dw-flaeche);
}
.dw-anm__zeichen img, .dw-anm__zeichen svg { width: 30px; height: 30px; object-fit: contain; }
.dw-anm__marke span { min-width: 0; overflow-wrap: anywhere; }
.dw-anm__gruss { margin-top: auto; max-width: 36rem; }
.dw-anm .dw-anm__vorzeile { margin: 0 0 10px; font-size: 1.05rem; color: var(--dw-daemmerung-leise); }
.dw-anm h1 {
  margin: 0;
  font-family: var(--dw-schrift-titel);
  font-weight: 700;
  font-size: clamp(2.25rem, 3.6vw, 3.6rem);
  line-height: 1.03;
  letter-spacing: -0.02em;
  max-width: 15ch;
  text-wrap: balance;
  text-transform: none;
  color: var(--dw-flaeche);
}
.dw-anm .dw-anm__satz { margin: 18px 0 0; max-width: 32rem; font-size: 1.15rem; color: var(--dw-daemmerung-leise); }
.dw-anm__bild {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin-top: auto;
}
.dw-anm .dw-anm__haus { width: min(380px, 72%); height: auto; margin-bottom: -2px; }
/* Portrait of the advisor on the stage (calculator, advisor) instead of the house. */
.dw-anm__portraet {
  width: min(260px, 60%);
  aspect-ratio: 1;
  margin-bottom: 40px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  border: 6px solid var(--dw-fensterlicht);
  background: var(--dw-flaeche);
}
.dw-anm__boden {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--dw-fensterlicht);
  opacity: 0.45;
}
.dw-anm__buehne :where(a, button):focus-visible { outline: 3px solid var(--dw-fokus-dunkel); outline-offset: 2px; }

/* --- Form column (D3: straight on the page, no card) ------------------------ */
.dw-anm__seite {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 22px;
  min-width: 0;
  padding: 48px clamp(24px, 5vw, 80px);
}
.dw-anm__karte {
  width: 100%;
  max-width: 30rem;
  display: grid;
  gap: 20px;
}
.dw-anm__karte--breit { max-width: 36rem; }
.dw-anm__karte h2 {
  margin: 0;
  font-family: var(--dw-schrift-titel);
  font-weight: 700;
  font-size: clamp(1.75rem, 2.2vw, 2.15rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--dw-graphit);
}
.dw-anm__karte p { margin: 0; }
.dw-anm__text { color: var(--dw-grau); }
.dw-anm__text strong, .dw-anm__text b { color: var(--dw-graphit); }
.dw-anm__formular { display: grid; gap: 14px; }

.dw-anm__feld { display: grid; gap: 6px; }
.dw-anm__feld > span, .dw-anm__feld > label { font-weight: 600; color: var(--dw-graphit); }
.dw-anm__eingabe {
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  border: 1.5px solid var(--dw-fuge-stark);
  border-radius: var(--dw-radius-knopf);
  background: var(--dw-flaeche);
  color: var(--dw-graphit);
  font: 400 1rem/1.4 var(--dw-schrift-text);
}
.dw-anm__eingabe::placeholder { color: var(--dw-grau); }
.dw-anm__eingabe { transition: border-color .15s ease, box-shadow .15s ease; }
.dw-anm__eingabe:hover { border-color: var(--dw-graphit); }
.dw-anm__eingabe:focus-visible { outline: 3px solid var(--dw-fokus); outline-offset: 1px; }
.dw-anm__eingabe[aria-invalid='true'] { border-color: var(--dw-fehler); }

.dw-anm__knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 52px;
  padding: 12px 20px;
  border: 0;
  border-radius: var(--dw-radius-knopf);
  background: var(--dw-brand);
  box-shadow: 0 10px 22px -12px var(--dw-brand-shadow, var(--dw-schein-rot));
  transition: background .15s ease, transform .15s var(--dw-bewegung), box-shadow .15s ease;
  color: var(--dw-on-brand);
  font: 600 1.05rem/1.25 var(--dw-schrift-text);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.dw-anm__knopf:hover { background: var(--dw-brand-strong); color: var(--dw-on-brand-strong, var(--dw-on-brand)); }
.dw-anm__knopf:focus-visible { outline: 3px solid var(--dw-fokus); outline-offset: 2px; }
.dw-anm__knopf:active { transform: translateY(1px); }
.dw-anm__knopf[aria-busy='true'] { cursor: progress; }
.dw-anm__knopf:disabled { cursor: not-allowed; opacity: 0.7; }
.dw-anm__knopf--zweit { background: transparent; color: var(--dw-graphit); border: 1.5px solid var(--dw-graphit); }
.dw-anm__knopf--zweit:hover { background: var(--dw-putz); color: var(--dw-graphit); }
/* As a link the button must beat `.dw2 a { color: inherit }` (portal 404: 2.3:1 on the brand colour). */
.dw-anm a.dw-anm__knopf { color: var(--dw-on-brand); }
.dw-anm a.dw-anm__knopf:hover { color: var(--dw-on-brand-strong, var(--dw-on-brand)); }
.dw-anm a.dw-anm__knopf--zweit, .dw-anm a.dw-anm__knopf--zweit:hover { color: var(--dw-graphit); }
.dw-anm__leise {
  justify-self: center;
  padding: 8px;
  border: 0;
  background: none;
  color: var(--dw-graphit);
  font: 500 1rem/1.3 var(--dw-schrift-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.dw-anm__leise:focus-visible { outline: 3px solid var(--dw-fokus); outline-offset: 2px; }
.dw-anm__hinweis { font-size: 0.95rem; color: var(--dw-grau); }
.dw-anm__fehler {
  padding: 12px 14px;
  border-left: 4px solid var(--dw-fehler);
  border-radius: 10px;
  background: var(--dw-fehler-weich);
  color: var(--dw-graphit);
}
.dw-anm__fehler strong { display: block; color: var(--dw-fehler); }
/* Confirmation: one lit window, then the sentence. */
.dw-anm__erfolg { display: grid; grid-template-columns: 48px 1fr; gap: 14px; align-items: start; }
.dw-anm__erfolg-zeichen {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--dw-fensterlicht-weich);
  color: var(--dw-fensterlicht-text);
}
.dw-anm__erfolg-zeichen svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.dw-anm .dw-anm__fuss { max-width: 30rem; font-size: 0.95rem; color: var(--dw-grau); }
.dw-anm__fuss a { color: inherit; }

/* --- Desktop: exactly one screen high (Fabian 14.10.2026: no small page scroll) ---------
   The page never grows past the window: the stage clips its decorative street, the form
   column scrolls on its own only on very low windows. Low windows get tighter spacing first. */
@media (min-width: 861px) {
  /* --dw-probeband: height of the probe mode band above the page (ProbeBand.vue sets it on <html>), else 0:
     the band adds no scroll. */
  :root { --dw-probeband: 0px; }
  .dw-anm { height: calc(100vh - var(--dw-probeband, 0px)); height: calc(100dvh - var(--dw-probeband, 0px)); min-height: 0; grid-template-rows: minmax(0, 1fr); }
  .dw-anm__buehne { min-height: 0; }
  .dw-anm__seite { min-height: 0; overflow-y: auto; }
}
@media (min-width: 861px) and (max-height: 820px) {
  .dw-anm__buehne { gap: 18px; padding-top: 22px; }
  .dw-anm .dw-anm__vorteile { margin-top: 16px; gap: 8px; }
  .dw-anm__seite { gap: 16px; padding-top: 28px; padding-bottom: 28px; }
}
@media (min-width: 861px) and (max-height: 720px) {
  .dw-anm__seite { gap: 12px; padding-top: 18px; padding-bottom: 18px; }
  .dw-anm .dw-anm__weg { padding-top: 12px; gap: 10px; }
}
@media (min-width: 861px) and (max-height: 680px) {
  .dw-anm__seite { gap: 8px; padding-top: 12px; padding-bottom: 12px; }
  .dw-anm__karte { gap: 14px; }
  .dw-anm__formular { gap: 10px; }
  .dw-anm .dw-anm__weg { padding-top: 8px; gap: 6px; }
  .dw-anm .dw-anm__fuss { font-size: .9rem; }
}

/* --- Phones: stage on top, short ------------------------------------------ */
@media (max-width: 860px) {
  .dw-anm { grid-template-columns: 1fr; }
  .dw-anm__buehne { min-height: 0; gap: 20px; padding: 18px 20px 0; }
  .dw-anm__gruss { margin-top: 6px; }
  .dw-anm h1 { font-size: clamp(2rem, 8.6vw, 2.6rem); }
  .dw-anm .dw-anm__satz { margin-top: 12px; font-size: 1.05rem; }
  .dw-anm .dw-anm__haus { width: 168px; }
  .dw-anm__portraet { width: 132px; margin-bottom: 22px; border-width: 4px; }
  .dw-anm__seite { justify-content: flex-start; padding: 28px 20px 44px; }
  .dw-anm__karte { gap: 18px; }
  /* Touch targets of at least 44 px (Sichtprüfung): footer links, quiet text buttons. */
  .dw-anm .dw-anm__fuss { gap: 4px 18px; }
  .dw-anm__fuss a { display: inline-flex; align-items: center; min-height: 44px; }
  .dw-anm__leise { min-height: 44px; }
}

/* Phones of normal height: a little tighter, so a short sign-in page (no address field, expired link)
   fits the window instead of running 20 to 40 px over it (Sichtprüfung B067/B068). */
@media (max-width: 860px) and (max-height: 900px) {
  .dw-anm__buehne { gap: 14px; padding-top: 14px; }
  .dw-anm__seite { gap: 14px; padding: 20px 20px 24px; }
  .dw-anm__karte { gap: 14px; }
  .dw-anm .dw-anm__haus { width: 140px; }
  .dw-anm__portraet { width: 116px; margin-bottom: 14px; }
}

/* A short sign-in page (no advantages, preview or steps: partner sign-in, expired link) should fit the
   window of a phone of normal height; the film gives way, so the page does not scroll by a few pixels
   (Sichtprüfung E5). */
@media (max-width: 860px) and (max-height: 900px) {
  .dw-anm--kurz { grid-template-rows: auto 1fr; }   /* spare height goes to the form, not under the film */
  .dw-anm--kurz .dw-buehnenfilm { height: clamp(120px, calc(100dvh - 612px), 220px); }
}

/* --- Language switch (A14) ------------------------------------------------------
   Same markup on every surface, also the static pages:
   <div class="dw-sprachwahl" role="group" aria-label="Sprache · Język · Language">
     <button type="button" lang="de" aria-pressed="true">DE</button>
     <button type="button" lang="pl" aria-pressed="false">PL</button>
     <button type="button" lang="en" aria-pressed="false">EN</button></div> */
.dw-sprachwahl {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--dw-fuge-stark);
  border-radius: 999px;
  background: var(--dw-flaeche);
}
.dw-sprachwahl button {
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--dw-graphit);
  font: 600 0.85rem/1 var(--dw-schrift-text);
  letter-spacing: 0.04em;
  cursor: pointer;
}
.dw-sprachwahl button[aria-pressed="true"] { background: var(--dw-graphit); color: var(--dw-flaeche); }
.dw-sprachwahl button:focus-visible { outline: 3px solid var(--dw-fokus); outline-offset: 2px; }
.dw-nacht .dw-sprachwahl { border-color: var(--dw-daemmerung-leise); background: transparent; }
.dw-nacht .dw-sprachwahl button { color: var(--dw-daemmerung-text); }
.dw-nacht .dw-sprachwahl button[aria-pressed="true"] { background: var(--dw-daemmerung-text); color: var(--dw-daemmerung-tief); }
.dw-nacht .dw-sprachwahl button:focus-visible { outline-color: var(--dw-fokus-dunkel); }
/* On the sign-in stage: top right, beside the office mark. */
.dw-anm__kopf { display: flex; align-items: center; justify-content: space-between; gap: 16px; }

/* ═══ D3 additions (docs/danwood24/DESIGN-D3.md) ═════════════════════════════ */
/* Stage with a scene: text on top, the preview floating over the house at the foot. */
.dw-anm__szene { position: relative; margin-top: auto; padding-top: 12px; }
.dw-anm__szene .dw-vorschau { position: absolute; right: 0; bottom: 34%; z-index: 2; }

/* The film of the stage (customer wish, 15.10.2026: moving, photorealistic like the landing page,
   the woman of its chapter 1 taking the call): the landing's raw clip as a short seamless loop,
   full-bleed at the foot of the stage. The film layer fades into the red of the stage through a
   static mask (browsers without masks get one gradient layer instead). No blend mode and no
   transform animation on top of the film: those stuttered. The crop keeps her face and hands in
   view, left of the floating preview on desktop. A small button pauses the film (WCAG 2.2.2),
   the choice is kept in the browser. */
.dw-buehnenfilm {
  position: relative;
  overflow: hidden;
  height: clamp(180px, 40vh, 460px);
  margin: 0 calc(-1 * clamp(24px, 4.5vw, 72px));
  /* No background of its own: the stage shows through where the mask fades the film out. */
}
.dw-buehnenfilm__film {
  position: absolute;
  inset: 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, currentColor 42%);
  mask-image: linear-gradient(to bottom, transparent 0, currentColor 42%);
}
.dw-buehnenfilm__film img, .dw-buehnenfilm__film video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
/* Desktop: she sits left of centre, so the floating preview on the right does not cover her. */
/* Width = 100 % + the shift, so the film still reaches the right edge of the stage. */
@media (min-width: 861px) { .dw-buehnenfilm__film img, .dw-buehnenfilm__film video { width: 130%; margin-left: -30%; } }
@supports not (mask-image: linear-gradient(transparent, currentColor)) {
  .dw-buehnenfilm::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, var(--dw-daemmerung-tief) 0%, transparent 55%);
  }
}
.dw-buehnenfilm__knopf {
  position: absolute;
  left: clamp(24px, 4.5vw, 72px);
  bottom: 16px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--dw-fensterlicht-rand);
  border-radius: 50%;
  background: var(--dw-abdunkeln);
  color: var(--dw-daemmerung-text);
  cursor: pointer;
}
.dw-buehnenfilm__knopf svg { width: 18px; height: 18px; }
.dw-buehnenfilm__knopf:hover { background: var(--dw-daemmerung-tief); }
.dw-buehnenfilm__knopf:focus-visible { outline: 3px solid var(--dw-fokus-dunkel); outline-offset: 2px; }
@media (min-width: 861px) and (max-height: 720px) { .dw-buehnenfilm { height: 200px; } }
.dw-anm .dw-anm__vorteile { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; max-width: 30rem; }
.dw-anm__vorteile li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: center; color: var(--dw-daemmerung-text); }
.dw-anm__vorteile .dw-icon {
  width: 34px; height: 34px; padding: 7px; border-radius: 10px; color: var(--dw-fensterlicht);
  background: var(--dw-abdunkeln); box-shadow: inset 0 0 0 1px var(--dw-fensterlicht-rand);
}

/* The preview: a small, honest picture of the next screen (decorative, aria-hidden). */
.dw-vorschau {
  width: min(360px, 46%);
  display: grid; gap: 12px; padding: 18px 18px 16px;
  background: var(--dw-flaeche); color: var(--dw-graphit); border-radius: 20px;
  box-shadow: var(--dw-schatten-weich);
  font-size: .9rem; line-height: 1.4;
}
.dw-vorschau__kopf { display: flex; align-items: center; gap: 10px; }
.dw-vorschau__kopf b { font: 700 1.05rem/1.2 var(--dw-schrift-titel); }
.dw-vorschau__kopf small { margin-left: auto; color: var(--dw-grau); font-variant-numeric: tabular-nums; }
.dw-vorschau__marke { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--dw-daemmerung); color: var(--dw-fensterlicht); }
.dw-vorschau__marke .dw-icon { width: 18px; height: 18px; }
.dw-vorschau__satz { padding: 10px 12px; border-radius: 12px; background: var(--dw-putz); }
.dw-vorschau__titel { font-weight: 600; color: var(--dw-grau); font-size: .8rem; }
.dw-vorschau__zeile { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--dw-fuge); }
.dw-vorschau__zeile::before { content: ''; width: 10px; height: 10px; border-radius: 3px; background: var(--dw-brand, var(--dw-daemmerung)); }
.dw-vorschau__zeile.licht::before { background: var(--dw-fensterlicht); box-shadow: inset 0 0 0 1px var(--dw-fensterlicht-text); }
.dw-vorschau__zeile em { font-style: normal; color: var(--dw-grau); font-variant-numeric: tabular-nums; }
.dw-vorschau__zahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.dw-vorschau__zahlen span { display: grid; color: var(--dw-grau); font-size: .78rem; }
.dw-vorschau__zahlen b { font: 600 1.2rem/1.2 var(--dw-schrift-text); font-variant-numeric: tabular-nums; color: var(--dw-graphit); }
.dw-vorschau__haus { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; }
.dw-vorschau__haus .dw-haus { width: 60px; height: 60px; }

/* The way in, as steps (a real sequence): mail link, passkey (operators), office. */
.dw-anm .dw-anm__weg { list-style: none; margin: 4px 0 0; padding: 18px 0 0; border-top: 1px solid var(--dw-fuge); display: grid; gap: 14px; }
.dw-anm__weg li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: start; }
.dw-anm__weg .dw-icon { width: 36px; height: 36px; padding: 8px; border-radius: 11px; background: var(--dw-flaeche); color: var(--dw-graphit); box-shadow: inset 0 0 0 1px var(--dw-fuge); }
.dw-anm__weg li.vorn .dw-icon { background: var(--dw-graphit); color: var(--dw-fensterlicht); box-shadow: none; }
.dw-anm__weg b { display: block; font-weight: 600; }
.dw-anm__weg span { color: var(--dw-grau); font-size: .93rem; }
/* Top of the form column: the mark (phones show it on the stage). */
.dw-anm__oben { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; max-width: 30rem; }
/* Only on phones: what the stage shows on large screens (preview, advantages). */
.dw-anm__mehr { display: none; }
/* Recovery codes, set-up code: large, tabular, easy to read out. */
.dw-anm .dw-anm__code { font: 600 1.25rem/1.2 var(--dw-schrift-text); font-variant-numeric: tabular-nums; letter-spacing: .06em; text-transform: uppercase; }
.dw-anm__zeile { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.dw-anm__zeile > .dw-anm__knopf { width: auto; flex: 1 1 auto; }

@media (max-width: 860px) {
  .dw-anm h1 { max-width: 18ch; }
  .dw-anm__szene { margin: 0; padding-top: 0; }
  .dw-buehnenfilm { height: 220px; margin: 0 -20px; }
  /* Narrower than the photo: enlarge it so the hedge stays outside the crop. */
  .dw-buehnenfilm__film img, .dw-buehnenfilm__film video { width: 140%; margin-left: -20%; object-position: center 30%; }
  .dw-buehnenfilm__knopf { left: 20px; bottom: 12px; }
  .dw-anm__buehne .dw-vorschau, .dw-anm__buehne .dw-anm__vorteile { display: none; }
  .dw-anm__oben { display: none; }
  .dw-anm__mehr { display: grid; gap: 20px; padding: 0 20px 48px; }
  .dw-anm__mehr .dw-vorschau { width: 100%; box-shadow: var(--dw-schatten-zeile); }
  .dw-anm__mehr .dw-anm__vorteile { margin: 0; }
  .dw-anm__mehr .dw-anm__vorteile li { color: var(--dw-graphit); }
  .dw-anm__mehr .dw-anm__vorteile .dw-icon { background: var(--dw-flaeche); color: var(--dw-daemmerung); box-shadow: inset 0 0 0 1px var(--dw-fuge); }
}
/* The preview floats over the street at the foot of the stage. It only stays where it clears the
   text above it (Sichtprüfung B087/B222/B228: it covered the advantages at 1024 to 1366 px);
   on smaller desktop windows it is left out, it is decoration only (aria-hidden). */
@media (min-width: 861px) and (max-width: 1399px), (min-width: 861px) and (max-height: 859px) {
  .dw-anm__szene .dw-vorschau { display: none; }
}
@media (min-width: 1400px) and (min-height: 860px) {
  .dw-anm__szene .dw-vorschau { bottom: 20%; }
}
/* Very large screens: the stage text and the form grow, so nothing floats lost on empty areas. */
@media (min-width: 1700px) and (min-height: 960px) {
  .dw-anm h1 { font-size: 4.4rem; max-width: 14ch; }
  .dw-anm .dw-anm__satz { font-size: 1.35rem; max-width: 38rem; }
  .dw-anm .dw-anm__vorteile { max-width: 38rem; }
  .dw-anm__vorteile li { font-size: 1.15rem; }
  .dw-anm__karte, .dw-anm__oben, .dw-anm .dw-anm__fuss { max-width: 36rem; }
  .dw-anm__karte h2 { font-size: 2.4rem; }
  .dw-anm__karte { font-size: 1.1rem; }
  .dw-anm__szene .dw-vorschau { width: min(400px, 46%); }
}
@media print {
  .dw-anm__buehne, .dw-anm__mehr, .dw-anm__oben, .dw-anm__knopf, .dw-sprachwahl { display: none !important; }
  .dw-anm { display: block; background: none; }
}

/* ── frontends/design/website.css ── */
/* Website frontends (calculator, berater app) — what they need on top of the
   team app's tokens. primitives.css, tokens.css and base.css next to this file
   are copies of frontend/src/design/; this file is the only one written here. */

:root {
  /* Extra primitives: paper and ink tones of the public website. Same naming
     as primitives.css (number = CIE lightness L* x 10). */
  --dw-sand-960-rgb: 247 243 236;
  --dw-sand-927: #efe9e4;
  --dw-sand-926: #efe9df;
  --dw-sand-896: #e7e0da;
  --dw-sand-495: #7a7570;
  --dw-sand-309: #4c4845;
  --dw-sand-143: #262422;
  --dw-sand-098: #1c1b1a;
  --dw-sand-098-rgb: 28 27 26;
  /* Status colours of the call screen: microphone live, content shared. */
  --dw-green-976: #f3faf3;
  --dw-green-755: #6fcf6f;

  /* Focus ring on dark surfaces (rate panel, call controls): the brand, lightened
     until it shows. Default = neutral danwood24; derived per office in website.ts. */
  --dw-focus-ring-inverse: #b34f46;

  /* Label of the advisor's chat bubbles, from the agent name. */
  --dw-agent-label: "JANA";
}

/* Office logo in place of the built-in Danwood mark (website.ts, data-dw-logo). */
.dw-logo { height: 32px; width: auto; flex: none; }
/* Portrait without an office photo: the Danwood mark, shown whole on a quiet surface. */
img.dw-platzhalter { object-fit: contain !important; padding: 18%; background: var(--dw-surface); }

/* Sentences with markup or office texts are written in each language side by side
   (data-dw-nur, website.ts); only the one of the page language shows. Without a script
   the page is German (<html lang="de">). An English page keeps the German block where no
   English sibling exists yet. */
html:not([lang="pl"]) [data-dw-nur="pl"], html:not([lang="en"]) [data-dw-nur="en"],
html[lang="pl"] [data-dw-nur="de"],
html[lang="en"] [data-dw-nur="de"]:has(~ [data-dw-nur="en"]),
html[lang="en"] [data-dw-nur="en"] ~ [data-dw-nur="de"] { display: none !important; }

/* ── frontends/design/standard-branding.css ── */
/* GENERATED by frontends/design/erzeugen.mjs — do not edit.
   Custom properties of the standard branding "neutral" (FALLBACK_BRANDING in website.ts).
   source-sha256: 68d65be0164de945ae579dda1170359d56d37ac6421fdcd9cc184ac54fda0f8f */
:root {
  --dw-brand-tint-35: #c67c75;
  --dw-brand-tint-44: #ce8e88;
  --dw-brand-tint-72: #e7c6c3;
  --dw-brand-tint-75: #e9cdca;
  --dw-brand-tint-77: #ebd1ce;
  --dw-brand-tint-78: #ecd3d0;
  --dw-brand-tint-88: #f5e7e5;
  --dw-brand-tint-89: #f5e9e8;
  --dw-brand-tint-90: #f6ebea;
  --dw-brand-tint-93: #f9f1f0;
  --dw-brand-tint-94: #faf3f2;
  --dw-brand-tint-95: #fbf5f4;
  --dw-brand-tint-96: #fcf7f6;
  --dw-brand-tint-97: #fcf9f9;
  --dw-brand-shade-05: #a03228;
  --dw-brand-shade-14: #902e24;
  --dw-brand-shade-41: #631f19;
  --dw-brand-shade-42: #611f18;
  --dw-brand-shade-73: #2d0e0b;
  --dw-brand-shade-78: #250c09;
  --dw-brand: #a8352a;
  --dw-on-brand: #ffffff;
  --dw-brand-text: #a8352a;
  --dw-brand-strong: #812920;
  --dw-on-brand-strong: #ffffff;
  --dw-accent: #c8963e;
  --dw-on-accent: #1a1a1a;
  --dw-focus-ring: #a8352a;
  --dw-brand-rgb: 168 53 42;
  --dw-on-brand-rgb: 255 255 255;
  --dw-brand-strong-rgb: 129 41 32;
  --dw-brand-tint-44-rgb: 206 142 136;
  --dw-brand-shade-41-rgb: 99 31 25;
  --dw-focus-ring-inverse: #b34f46;
  --dw-agent-label: "JANA";
}