/* GENERATED by frontends/design/erzeugen.mjs — do not edit.
   Static build of frontends/design/ for the calculator (no bundler there).
   source-sha256: 56f8974f4e72f22e8ea18b59c83498fedfb3ec49e82d5795ac59279c462803cf */
/* ── 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;

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

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

/* ── 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 a white card with the form. One main
   button in the office colour, never pale, never on the red stage.

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

.dw-anm {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  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(120% 90% at 85% 0%, var(--dw-daemmerung-hell) 0%, var(--dw-daemmerung) 48%, var(--dw-daemmerung-tief) 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.2rem, 4.2vw, 3.9rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
  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; }

/* --- Card ------------------------------------------------------------------ */
.dw-anm__seite {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 18px;
  min-width: 0;
  padding: 40px clamp(20px, 4vw, 64px);
}
.dw-anm__karte {
  width: 100%;
  max-width: 460px;
  display: grid;
  gap: 18px;
  padding: 32px;
  background: var(--dw-flaeche);
  border-radius: 24px;
  box-shadow: 0 24px 48px -30px rgb(34 38 42 / 0.4);
}
.dw-anm__karte--breit { max-width: 560px; }
.dw-anm__karte h2 {
  margin: 0;
  font-family: var(--dw-schrift-titel);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  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: 48px;
  padding: 10px 14px;
  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: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: 50px;
  padding: 12px 20px;
  border: 0;
  border-radius: var(--dw-radius-knopf);
  background: var(--dw-brand);
  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[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: 460px; text-align: center; 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: 20px 14px 40px; }
  .dw-anm__karte { padding: 24px 20px; border-radius: 20px; }
}

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

/* ── 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: acd60603915ebfa7dd3bd7242b252af3ab3d07ad7098a11e1f54e37e6b8e4765 */
: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";
}