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