/* ══ Designschicht "Werkstatt" (2026-09-25) — gemeinsam fuer Planer, Brueckentage, Resturlaub ══
 *
 * Betreiberwunsch: weg vom generischen Tech-Blau mit weichen Schatten und
 * Pillenformen, hin zu einem ruhigen, praezisen Werkzeug -- warmes Papier,
 * weisse Karten mit Haarlinie, fast schwarze Aktionen, enge Ueberschriften.
 *
 * Bewusst als EINE Schicht am Ende und ueber die Variablen: die Regeln
 * darueber tragen ihre Begruendungen (Zielgroessen, Kontrast, Overflow),
 * und die bleiben gueltig. Hier wird nur Aussehen entschieden.
 *
 * Drei Grenzen, die nicht verhandelt wurden:
 *   - Keine neue Webschrift. Die naheliegenden (Inter u. a.) stehen unter
 *     OFL; der Lizenzvertrag laesst nur MIT, Apache-2.0 und BSD zu. Der
 *     Charakter kommt aus Gewicht und Laufweite der Systemschrift.
 *   - Fokus bleibt sichtbar (WCAG 2.4.7): statt weichem Ring ein harter
 *     schwarzer, ohne Weichzeichnung -- aber nie `outline: none` allein.
 *   - Kontraste nachgerechnet: Fliesstext #3f3f46 auf Weiss 10,4:1,
 *     Nebentext #71717a 4,8:1, Feiertag #7c2d12 auf #fbf1e4 rund 9:1.
 */
:root {
  --paper: #fafaf9;
  --ink: #09090b;
  --ink-2: #27272a;
  --ink-3: #52525b;
  --ink-4: #71717a;
  --line: #e7e5e4;
  --line-2: #d6d3d1;
  --action: #18181b;
  --action-hover: #3f3f46;
  --blue-tint: #f5f5f4;
  --blue-soft: #e7e5e4;
  --radius: 10px;
  --radius-lg: 12px;
  --radius-sm: 6px;
  --shadow-sm: none;
  --shadow: none;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
body { background: var(--paper); color: #3f3f46; }
h1, h2, h3, .tool-card-title { color: var(--ink); letter-spacing: -0.03em; font-weight: 700; }
h2 { letter-spacing: -0.025em; }
.tool-card-title { font-size: 18px; }
label, .form-field label { color: #3f3f46; }

/* ── Karten: Weiss mit Haarlinie, kein Schatten ── */
.tool-card,
.urlaub-preview-aside {
  background: #ffffff; border: 1px solid #e5e5e5; border-radius: var(--radius-lg); box-shadow: none;
}

/* ── Knoepfe: fast schwarz, knapp gerundet, ein scharfer Schatten ── */
.btn { border-radius: 8px; }
.btn-primary { background: var(--action); color: #fafaf9; box-shadow: 0 1px 2px rgba(0, 0, 0, .1); }
.btn-primary:hover:not(:disabled) { background: var(--action-hover); }
@media (hover: hover) { .btn-primary:hover:not(:disabled) { transform: none; box-shadow: 0 1px 2px rgba(0, 0, 0, .1); } }
.btn-ghost { background: #ffffff; color: var(--ink); border-color: #d4d4d8; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }
.btn-ghost:hover { border-color: var(--ink); color: var(--ink); }
.btn:focus-visible,
.schnellwahl-knopf:focus-visible,
.vorlage-knopf:focus-visible,
.werkstatt-nav a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ── Felder: harte Kante statt weichem Ring ── */
.form-field select, .form-field input[type="text"], .form-field input[type="date"], .form-field input[type="number"] {
  background: #ffffff; border: 1px solid #d4d4d8; border-radius: var(--radius-sm);
}
.form-field select:focus, .form-field input:focus {
  outline: none; border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); background: #ffffff;
}

/* ── Kleine Wahlen ── */
.schnellwahl-knopf { border-radius: var(--radius-sm); }
.schnellwahl-knopf:hover { border-color: var(--ink); color: var(--ink); }
.schnellwahl-knopf[aria-pressed="true"] { background: var(--action); border-color: var(--action); color: #fafaf9; }
.vorlage-knopf { border-radius: 8px; border-color: #e5e5e5; background: #ffffff; }
.vorlage-knopf:hover { border-color: var(--ink); background: #ffffff; }
.segmented { border-radius: 8px; }
.segmented-btn { border-radius: var(--radius-sm); }
.arbeitswoche-tag { border-radius: var(--radius-sm); }
.arbeitswoche-tag:has(input:checked) { background: var(--action); border-color: var(--action); color: #fafaf9; }
.arbeitswoche-tag:has(input:focus-visible) { outline-color: var(--ink); }
.werkstatt-nav a { border-radius: var(--radius-sm); }
.kosten-vorschau { background: #f5f5f4; border-left: 3px solid var(--ink); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--ink-2); }
.kosten-vorschau[data-state="warnung"], .kosten-vorschau[data-state="fehler"] { border-left-color: #9a3412; }
.loesch-hinweis { border-radius: var(--radius-sm); }

/* ── Vergleich ── */
.vergleich-karte { background: transparent; border-color: #e5e5e5; border-radius: var(--radius-lg); }
.vergleich-hier { background: #ffffff; border: 1px solid var(--ink); box-shadow: none; }
.vergleich-hier h3 { color: var(--ink); }
.vergleich-hier li::before { color: #15803d; }
.vergleich-marke { border-radius: 4px; background: var(--action); }

/* ── Kalender: neutrale Auswahl, Feiertag in Ocker mit Punktraster ── */
#miniKalender {
  --mk-wahl: #e7e5e4;
  --mk-wahl-rand: #09090b;
  --mk-heute: #09090b;
  --mk-wochenende: #f5f5f4;
  --mk-feiertag: #fbf1e4;
  --mk-feiertag-ink: #7c2d12;
  /* Wochentags- und KW-Koepfe: der Kern bringt #99a2b0 mit (2,6:1 auf
     Weiss, axe color-contrast). #696970 erreicht 5,0:1 auch auf der
     Wochenendflaeche #f5f5f4 -- #71717a lag dort bei 4,43:1. */
  --mk-schwach: #696970;
}
#miniKalender .mk-tag { border-radius: var(--radius-sm); }
#miniKalender .mk-feiertag:not(.mk-gewaehlt):not(.mk-vorschau) {
  background-color: var(--mk-feiertag);
  background-image: radial-gradient(rgba(124, 45, 18, .16) 1px, transparent 1.2px);
  background-size: 5px 5px;
}
#miniKalender .mk-legende-punkt.mk-z-feiertag { background: #fbf1e4; border-color: #c2410c; }
#miniKalender .mk-z-bruecke:not(.mk-gewaehlt):not(.mk-vorschau) { border-color: #15803d; }
#miniKalender .mk-legende-punkt.mk-z-bruecke { border-color: #15803d; }
.mk-nav, .mk-heute, .mk-monat, .mk-jahr { border-radius: var(--radius-sm); }

/* ── Kopfzeile und Fuss: Papier statt Weiss ── */
/* Deckend: durchscheinend lag der Hero-Text beim Scrollen unter der Leiste. */
.site-header { background: #fafaf9; border-bottom-color: #e7e5e4; }
.skip-link { background: var(--action); }
a { color: #1B4965; }

/* ── Unterseiten: heller Kopf auf Papier ── */
.tool-kicker { color: var(--ink-3); }
.privacy-note { background: #ffffff; border: 1px solid #e5e5e5; color: #3f3f46; border-radius: var(--radius-sm); }
.werkstatt-nav a { background: #ffffff; border-color: #d4d4d8; color: var(--ink-2); }
.werkstatt-nav a:hover { border-color: var(--ink); color: var(--ink); }
.werkstatt-nav a[aria-current="page"] { background: var(--action); border-color: var(--action); color: #fafaf9; }

/* Brueckentage: Jahresknoepfe und Auswahl in einer Zeile. */
.jahr-wahl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.jahr-auswahl { min-height: 36px; padding: 4px 10px; border: 1px solid #d4d4d8; border-radius: var(--radius-sm); background: #ffffff; font: inherit; font-size: 14px; }
.jahr-auswahl:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (pointer: coarse) { .jahr-auswahl { min-height: 44px; } }