/* GENERATED by frontends/design/erzeugen.mjs — do not edit.
   Static build of frontends/design/ for the calculator (no bundler there).
   source-sha256: fb295dd832bc1e5e390164aae7166b09e204b6d66dab5683c50b4cfc5afe2519 */
/* ── 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 */
  --dw-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --dw-font-text: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --dw-font-display: 'Bricolage Grotesque', 'IBM Plex Sans', sans-serif;
  --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 a .dw2 element actually uses the fonts.

   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. */

/* --- Fonts (SIL Open Font License 1.1, see ./schriften/OFL-*.txt) --------- */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url('./schriften/bricolage-grotesque-latin-opsz-normal.woff2') format('woff2-variations');
  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: 'Bricolage Grotesque';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url('./schriften/bricolage-grotesque-latin-ext-opsz-normal.woff2') format('woff2-variations');
  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: 'Instrument Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url('./schriften/instrument-sans-latin-wght-normal.woff2') format('woff2-variations');
  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: 'Instrument Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url('./schriften/instrument-sans-latin-ext-wght-normal.woff2') format('woff2-variations');
  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-nachtrot-hell: #741219;      /* D3: houses one row further back */
  --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 */

  /* --- Fonts and numbers --- */
  --dw-schrift-titel: 'Bricolage Grotesque', system-ui, sans-serif;
  --dw-schrift-text: 'Instrument Sans', system-ui, 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: 76px;              /* bottom bar on phones */
  --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: Bricolage Grotesque, 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;
}
/* 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) --------- */
.dw-haus { display: block; flex: none; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.dw-haus--mini { width: 52px; height: 48px; }
.dw-haus--klein { width: 46px; height: 44px; }
.dw-haus--mittel { width: 64px; height: 60px; }
.dw-haus--gross { width: 110px; height: 104px; }
.dw-haus .dach { stroke: var(--dw-dach); stroke-width: 2.4; }
.dw-haus .wand { fill: var(--dw-wand); stroke: var(--dw-dach); stroke-width: 1.6; }
.dw-haus--tag .dach { stroke: var(--dw-daemmerung); }
.dw-haus--tag .wand { fill: var(--dw-daemmerung); stroke: var(--dw-daemmerung); }
.dw-haus .fenster { stroke: none; fill: var(--dw-fenster-aus); }
.dw-haus .fenster.an { fill: var(--dw-fensterlicht); filter: drop-shadow(0 0 4px rgb(245 192 78 / 0.75)); }
@media (prefers-reduced-motion: no-preference) {
  .dw-haus--auf .fenster.an { animation: dw-aufleuchten 0.9s ease-out both; }
  /* rect 1 is the wall; no style attribute, the CSP of the static pages blocks inline styles */
  .dw-haus--auf .fenster.an:nth-of-type(3) { animation-delay: 0.15s; }
  .dw-haus--auf .fenster.an:nth-of-type(4) { animation-delay: 0.3s; }
  .dw-haus--auf .fenster.an:nth-of-type(5) { animation-delay: 0.45s; }
  .dw-haus--auf .fenster.an:nth-of-type(6) { animation-delay: 0.6s; }
}
@keyframes dw-aufleuchten { from { fill: var(--dw-fenster-aus); filter: none; } }

/* ═══ 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); }

/* --- The street at dusk (sign-in stage): five houses, lit windows -------------
   Markup: <svg class="dw-strasse"> with .bau (house body), .bau--hinten (row behind),
   .dachlinie (white roof line of "your" house), .licht (window, .an = lit). */
.dw-strasse { display: block; width: 100%; height: auto; overflow: visible; }
.dw-strasse .bau { fill: var(--dw-nachtrot); }
.dw-strasse .bau--hinten { fill: var(--dw-nachtrot-hell); }
.dw-strasse .dachlinie { fill: none; stroke: var(--dw-dach); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.dw-strasse .boden { fill: var(--dw-nachtrot); }
.dw-strasse .licht { fill: var(--dw-fenster-aus); transition: fill .7s var(--dw-bewegung); }
.dw-strasse .licht.an { fill: var(--dw-fensterlicht); filter: drop-shadow(0 0 6px var(--dw-fensterlicht-glanz)); }

@media (prefers-reduced-motion: no-preference) {
  .dw-strasse--auf .licht.an { animation: dw-aufleuchten 1s var(--dw-bewegung) both; }
  .dw-strasse--auf .licht.an.s1 { animation-delay: .2s; }
  .dw-strasse--auf .licht.an.s2 { animation-delay: .45s; }
  .dw-strasse--auf .licht.an.s3 { animation-delay: .7s; }
  .dw-strasse--auf .licht.an.s4 { animation-delay: .95s; }
}
@media (prefers-reduced-motion: reduce) { .dw-strasse .licht { transition: none; } }

/* ── 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 street at dusk (.dw-strasse), 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; }
.dw-anm__haus .dach { stroke-width: 1.6; }
.dw-anm__haus .wand { stroke-width: 1.1; }
/* 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); }
.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; }

/* --- 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; }
}

/* --- Language switch (A14) ------------------------------------------------------
   Same markup on every surface, also the static pages:
   <div class="dw-sprachwahl" role="group" aria-label="Sprache · Język">
     <button type="button" lang="de" aria-pressed="true">DE</button>
     <button type="button" lang="pl" aria-pressed="false">PL</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: 36px;
  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 street at the foot. */
.dw-anm__szene { position: relative; margin-top: auto; padding-top: 12px; }
.dw-anm__szene .dw-strasse { margin: 0 calc(-1 * clamp(24px, 4.5vw, 72px)); width: calc(100% + 2 * clamp(24px, 4.5vw, 72px)); max-width: none; }
.dw-anm__szene .dw-vorschau { position: absolute; right: 0; bottom: 34%; }
.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: 64px; 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-anm__szene .dw-strasse { margin: 0 -20px; width: calc(100% + 40px); }
  .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); }
}
@media (min-width: 861px) and (max-width: 1180px) {
  .dw-anm__szene .dw-vorschau { width: min(320px, 70%); bottom: 40%; }
}
@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 both languages 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">). */
html:not([lang="pl"]) [data-dw-nur="pl"], html[lang="pl"] [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: 36cdc833944c1b086e262534b8dcfa0f3713cdf1c4bd773bdfcae6095228aa66 */
: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";
}