/* ChefKlick Website - Grundlage
   Alle Werte 1:1 aus der App: constants/chefklick-theme.ts (ChefKlickThemeLight).
   Vorerst nur heller Modus (Entscheid 04.10.2026). Der dunkle Modus kommt spaeter
   als zweiter Satz derselben Variablen dazu - keine Farbe direkt in Regeln schreiben. */

@font-face {
  font-family: "Montserrat";
  src: url("fonts/montserrat-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Farben (Schluessel wie in der App; "gold" heisst hier --accent, im hellen Modus Blau) */
  --background: #F4F2ED;
  --surface: #FFFFFF;
  --surface-elevated: #EAE7E0;
  --accent: #163A7C;
  --accent-light: #2F6FE0;
  --accent-dark: #0E2652;
  --text-primary: #1A1A1C;
  --text-secondary: #56544F;
  --text-muted: #8A8781;   /* Kontrast 3.2 - nur Dekoratives, nie lesbarer Text */
  --success: #2E7D46;
  --warning: #B26A00;
  --danger: #B23B3B;
  --info: #1F6FB2;
  --module-temperature: #1F6FB2;
  --module-checklist: #2F5D4A;
  --module-temperature-soft: #E4EEF6;
  --module-checklist-soft: #E6ECE9;
  --border: #D8D5CE;
  --divider: #E6E3DC;
  --disabled: #C9C6BF;
  --tab-active: #E4EAF5;

  /* Wortmarke (LOGO_COLORS.light) */
  --logo-chef: #163A7C;
  --logo-klick: #1A1A1C;

  /* Abstaende */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;

  /* Radien */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* Schriftgroessen aus der App */
  --font-title: 26px;
  --font-heading: 22px;
  --font-subheading: 18px;
  --font-body: 16px;
  --font-caption: 13px;
  /* Ergaenzung nur fuer die Website (Entscheid 04.10.2026): Haupttitel der Startseite,
     34px am Handy bis 44px am Desktop. Gibt es in der App nicht. */
  --font-display: clamp(34px, calc(16px + 5vw), 44px);
  /* Ebenso nur Website: Abschnittstitel, 30px am Handy bis 40px am Desktop (Entscheid 04.10.2026) */
  --font-section: clamp(30px, calc(18px + 3vw), 40px);

  /* Schatten (App: #000, Versatz 0/6, Deckkraft 0.25, Radius 12) */
  /* iOS shadowRadius entspricht etwa dem halben CSS-Weichzeichner, daher 24px */
  --shadow: 0 6px 24px rgba(0, 0, 0, 0.25);

  /* Schriften: Systemschrift wie in der App, Montserrat nur fuer die Wortmarke */
  --font-system: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-wordmark: "Montserrat", var(--font-system);
}

/* Grundlage */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--background);
  color: var(--text-primary);
  font-family: var(--font-system);
  font-size: var(--font-body);
  line-height: 1.5;
}

h1, h2, h3 { margin: 0; line-height: 1.2; text-wrap: balance; }
h1 { font-size: var(--font-title); }
h2 { font-size: var(--font-heading); }
h3 { font-size: var(--font-subheading); }
p { margin: 0; }
img, svg { max-width: 100%; }

a { color: var(--accent); text-underline-offset: 2px; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.caption { font-size: var(--font-caption); color: var(--text-secondary); }
.display { font-size: var(--font-display); line-height: 1.1; letter-spacing: -0.01em; }

/* Wortmarke: "Chef" Akzent, "Klick" Text (wie App, heller Modus) */
.wordmark { font-family: var(--font-wordmark); font-weight: 700; white-space: nowrap; }
.wordmark .chef { color: var(--logo-chef); }
.wordmark .klick { color: var(--logo-klick); }

/* Knopf-Hierarchie wie in der App, Radius 14 wie die App-Knoepfe (Entscheid 04.10.2026) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 12px var(--space-lg);
  border-radius: var(--radius-md);
  border: 1.5px solid transparent;
  font: 600 var(--font-body) / 1.2 var(--font-system);
  text-decoration: none;
  cursor: pointer;
}
.btn-primary { background: var(--accent); color: var(--background); }
.btn-secondary { background: var(--surface-elevated); border-color: var(--accent); color: var(--accent); }
.btn-tertiary { background: transparent; border-color: var(--border); color: var(--text-secondary); }
.btn[disabled], .btn[aria-disabled="true"] { background: var(--disabled); border-color: transparent; color: var(--text-muted); cursor: default; }

/* Karte wie in der App: components/reusable/Card.tsx (Radius md, Innenabstand md, Schatten) */
.card {
  background: var(--surface);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  box-shadow: var(--shadow);
  overflow: hidden;
}
/* Karten auf "Heute": dashboard.tsx styles.card (Radius lg, Innenabstand 20, Rand) */
.card-dash {
  border-radius: var(--radius-lg);
  padding: 20px;
  border: 1px solid var(--border);
}

/* ===== Seite: Farbflaechen nach dem Vorbild noahbachofen.ch (Entscheid 04.10.2026) ===== */
/* Flaechenfarben: nur Toene, die es in der App gibt (Entscheid 05.10.2026, vorher "Kraeftig" -
   aufgehellte Farben, wirkte fuer eine Dokumentations-App zu verspielt). */
:root {
  --f-hero: #E4EAF5;   /* tabActive */
  --f-cream: #F4F2ED;  /* background */
  --f-check: #E6ECE9;  /* moduleChecklistSoft */
  --f-temp: #E4EEF6;   /* moduleTemperatureSoft */
  --f-ware: #EAE7E0;   /* surfaceElevated */
  --f-day: #FFFFFF;    /* surface */
  --f-warm: #EAE7E0;   /* surfaceElevated */
  --f-strong: #163A7C; /* accent */
  --f-strong-ink: #F4F2ED; /* background */
  /* Duenne Titel und grosser Fliesstext wie bei der Vorlage (nur Website, nicht in den Kacheln) */
  --font-light: "Helvetica Neue", Helvetica, Arial, var(--font-system);
}
body { background: var(--f-cream); font-family: var(--font-light); font-weight: 300; font-size: 18px; line-height: 1.4; }
html { scroll-behavior: smooth; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.caps { text-transform: uppercase; font-weight: 300; letter-spacing: 0; line-height: 1.02; }
.icon { width: 18px; height: 18px; flex: none; }

/* Menue: nur ein Symbol oben rechts, als runde Pille wie die Leiste der App (sonst auf den
   dunklen Flaechen nicht sichtbar). Ohne JavaScript kein Knopf, die Fusszeile hat die Links. */
.menu-btn { display: none; position: fixed; top: 14px; right: 16px; z-index: 30; width: 52px; height: 52px; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface); box-shadow: var(--shadow); cursor: pointer; place-content: center; gap: 6px; }
.js .menu-btn { display: grid; }
.menu-btn span { display: block; width: 24px; height: 2px; background: var(--text-primary); transition: transform 0.3s, opacity 0.3s; }
.menu-open .menu-btn span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-open .menu-btn span:nth-child(2) { opacity: 0; }
.menu-open .menu-btn span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
.menu-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radius-pill); }
.menu { position: fixed; inset: 0; z-index: 25; overflow-y: auto; background: var(--f-hero); padding: 96px 24px 40px; display: grid; align-content: start; justify-items: start; gap: 6px; transform: translateX(100%); visibility: hidden; transition: transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1), visibility 0s linear 0.4s; }
.menu-open .menu { transform: none; visibility: visible; transition: transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1), visibility 0s; }
.menu-open body { overflow: hidden; }
.menu a { font-size: clamp(34px, 8vw, 64px); text-transform: uppercase; color: var(--text-primary); text-decoration: none; line-height: 1.05; }
.menu a:hover { color: var(--accent); }
/* Anmelden fuehrt zur Webversion der App: abgesetzt, kleiner, mit Linie darueber */
.menu .menu-app { margin-top: 28px; padding-top: 20px; border-top: 1px solid currentColor; font-size: clamp(22px, 4vw, 32px); }
/* Links schweben beim Oeffnen nacheinander herein; beim Schliessen bleiben sie stehen, bis das Menue draussen ist */
.menu a { opacity: 0; transform: translateY(40px); transition: opacity 0s 0.4s, transform 0s 0.4s; }
.menu-open .menu a { opacity: 1; transform: none; transition: opacity 0.5s ease-out, transform 0.6s cubic-bezier(0.33, 1, 0.68, 1); transition-delay: calc(0.15s + var(--i, 0) * 0.07s); }

/* Einstieg: grosse Wortmarke links oben, Leitsatz rechts, Text links unten */
.hero { background: var(--f-hero); padding: 72px 20px 40px; display: grid; gap: 32px; min-height: 620px; align-content: space-between; }
.bigmark { font-size: clamp(72px, 19vw, 210px); line-height: 0.9; letter-spacing: -0.02em; }
.bigmark .chef, .bigmark .klick { display: block; }
.bigmark .l { display: inline-block; }
.bigmark .iw { position: relative; }
.bigmark .baseline { display: inline-block; width: 0; height: 0; }
.bigmark .dot-cover, .bigmark .dot { display: none; position: absolute; border-radius: 50%; pointer-events: none; }
.reveal-ready .bigmark .dot-cover, .reveal-ready .bigmark .dot { display: block; }
.bigmark .dot-cover { background: var(--f-hero); }
.bigmark .dot { background: var(--logo-klick); }
/* Vor dem Ablauf unsichtbar, damit nichts aufblitzt; ohne Ablauf steht die Wortmarke einfach da */
.reveal-ready .bigmark .l, .reveal-ready .bigmark .dot { opacity: 0; }
.hero .tag { font-size: clamp(18px, 2.6vw, 26px); text-align: right; justify-self: end; max-width: 22ch; }
.hero .row { display: grid; gap: 24px; align-items: end; }
.hero-text { display: grid; gap: 18px; }
.intro-text { font-size: clamp(20px, 2.4vw, 26px); max-width: 30ch; }
.arrow { justify-self: end; width: 24px; height: 64px; }
.soonline { font-size: 14px; text-transform: uppercase; letter-spacing: 0.04em; display: inline-flex; align-items: center; gap: 10px; }
.soon-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--warning); }

/* Zweiteilung */
.split { display: grid; grid-template-columns: 1fr; }
.half { padding: 40px 20px; display: grid; align-content: start; gap: 20px; min-width: 0; }
.half.media { place-items: center; align-content: center; padding-block: 48px; }
.half.media > .tile { width: 100%; max-width: 360px; }
.half .title { font-size: clamp(36px, 5vw, 52px); }
.half .body { font-size: clamp(19px, 2.1vw, 24px); max-width: 30ch; }
.half .foot { margin-top: auto; padding-top: 40px; display: grid; gap: 14px; }
.half .foot hr { border: 0; border-top: 1px solid currentColor; opacity: 0.45; margin: 0; width: 100%; transform-origin: left center; }
.more, .foot-row { font-size: 14px; text-transform: uppercase; letter-spacing: 0.03em; }
.more { justify-self: end; text-decoration: none; color: inherit; }
.more:hover { text-decoration: underline; }
.foot-row { display: flex; justify-content: space-between; gap: 16px; }
.bg-cream { background: var(--f-cream); } .bg-check { background: var(--f-check); } .bg-temp { background: var(--f-temp); }
.bg-ware { background: var(--f-ware); } .bg-day { background: var(--f-day); } .bg-hero { background: var(--f-hero); } .bg-warm { background: var(--f-warm); }

/* Zwischentitel ueber die ganze Breite, dahinter stehen die Ringe still */
.banner { position: relative; overflow: hidden; clip-path: inset(0); background: var(--f-strong); color: var(--f-strong-ink); padding: 72px 20px; display: grid; gap: 20px; }
.banner h2 { position: relative; font-size: clamp(44px, 9vw, 104px); max-width: 12ch; }
.banner-note { position: relative; font-size: 18px; }
/* Ringe stehen still: fest im Bild, die Flaeche schneidet sie mit clip-path zu (ohne Skript, Entscheid 20.10.2026) */
.banner-bg { position: fixed; inset: 0; display: grid; place-items: center; pointer-events: none; }
.banner-bg svg { width: min(760px, 120%); height: auto; }
.banner-bg circle { fill: none; stroke: var(--f-strong-ink); stroke-width: 52; }
.banner-bg .tr { stroke-opacity: 0.08; }
.banner-bg .br { stroke-opacity: 0.2; stroke-linecap: round; stroke-dasharray: 100 100; stroke-dashoffset: var(--to); }

/* Grundsaetze: Titel mittig, Zeilen mit feiner Linie */
.principles { background: var(--f-cream); padding: 72px 20px; }
.principles > h2 { text-align: center; font-size: clamp(32px, 5vw, 52px); letter-spacing: 0.06em; }
.principles-lead { text-align: center; color: var(--text-secondary); margin: 12px 0 48px; }
.principles ul { list-style: none; margin: 0 auto; padding: 0; max-width: 980px; display: grid; }
.principles li { position: relative; display: grid; gap: 6px; padding-block: 24px; }
.principles li::before, .principles li:last-child::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--text-primary); transform-origin: left center; }
.principles li::before { top: 0; }
.principles li:last-child::after { bottom: 0; }
/* Linie zieht sich zuerst, dann kommen Titel und Text (script.js) */
.reveal-ready .principles li[data-m="row"]::before, .reveal-ready .principles li[data-m="row"]::after { transform: scaleX(0); }
.reveal-ready .principles li[data-m="row"].m-done::before, .reveal-ready .principles li[data-m="row"].m-done::after { transform: scaleX(1); transition: transform var(--dur, 1200ms) cubic-bezier(0.445, 0.05, 0.55, 0.95) var(--d, 0ms); }
.principles h3 { font-size: clamp(24px, 3.4vw, 34px); font-weight: 300; line-height: 1.15; }
.principles li p { font-size: 18px; color: var(--text-secondary); max-width: 52ch; }

/* Kontakt neben einer Farbflaeche */
.contact .mail { font-size: clamp(26px, 4vw, 44px); color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; justify-self: start; word-break: break-word; }
.contact .mail:hover { color: var(--accent); }
.soon-half { align-content: end; }
.soonbig { font-size: clamp(40px, 5.6vw, 72px); overflow-wrap: anywhere; }

/* Fusszeile in der Einstiegsfarbe */
.foot-nav { background: var(--f-hero); padding: 32px 20px 24px; display: grid; gap: 24px; font-size: 14px; text-transform: uppercase; }
.foot-nav nav { display: flex; flex-wrap: wrap; gap: 12px 36px; }
.foot-nav a { color: inherit; text-decoration: none; }
.foot-nav a:hover { text-decoration: underline; }
.foot-nav .foot-app { margin-left: auto; font-weight: 700; }
/* Anmelden am Handy nur im Menue der Startseite, in der Fusszeile erst ab 760 px (21.10.2026) */
@media (max-width: 759px) { .foot-nav .foot-app { display: none; } }
.foot-nav small { font-size: 12px; text-transform: none; }
.foot-nav small a { text-decoration: underline; }

/* Bewegung wie bei der Vorlage (script.js): Titel schweben 60 px herein, Texte blenden ein.
   Pfeil-Pulsieren und Mitlaufen der Kacheln entfernt (Entscheid 05.10.2026: zu verspielt). */
.reveal-ready [data-m]:not(.m-done) { opacity: 0; }

/* Kacheln: Schrift wie in der App, nicht die duenne Seitenschrift */
.tile { margin: 0; display: grid; align-content: start; gap: var(--space-sm); font-family: var(--font-system); font-weight: 400; font-size: var(--font-body); line-height: 1.5; }
.tile > .caption { text-align: center; }
.accent { color: var(--accent); }

/* ===== Kartentitel aus dashboard.tsx (Monatsuhr); Kachel "Heute" entfernt 11.10.2026 ===== */
.card-title { color: var(--accent); font-size: 20px; font-weight: 700; line-height: 1.2; margin-bottom: 15px; }

/* ===== App-Bausteine (1:1 nach App-Code) ===== */
/* Karten mit Rand: haccp.tsx listCard, TemperatureDaySection.tsx listCard (Radius lg, Innenabstand md, Rand) */
.card-list { border-radius: var(--radius-lg); border: 1px solid var(--border); }
.icon-20 { width: 20px; height: 20px; }
.icon-24 { width: 24px; height: 24px; }
.status-danger { color: var(--danger); }
/* Website-Regel: --text-muted nie fuer lesbaren Text. Die App benutzt es fuer Platzhalter,
   erledigte Aufgaben, "x von y erledigt" und ungueltige Werte - hier --text-secondary (Entscheid 04.10.2026). */
.ph { color: var(--text-secondary); }
.field-value:not(:empty) + .ph { display: none; }
.field-value.typing::after { content: "|"; color: var(--accent); margin-left: 1px; }

/* Wechsel zwischen zwei Texten: ohne Ablauf steht der Endtext */
.swap-from { display: none; }
.reveal-ready .swap-from { display: inline; }
.reveal-ready .swap { display: inline-grid; }
.reveal-ready .swap > * { grid-area: 1 / 1; transition: opacity 300ms ease-out; }
.reveal-ready .swap-to:not(.step-on) { opacity: 0; }
.reveal-ready .swap:has(.swap-to.step-on) .swap-from { opacity: 0; }

/* Checkliste: haccp.tsx areaTitle, rhythmTitle, rhythmRow, taskRow, checkbox, taskDetail */
.app-area { color: var(--accent); font-size: var(--font-subheading); font-weight: 700; line-height: 1.25; margin-bottom: var(--space-sm); }
.app-rhythm { color: var(--text-secondary); font-size: var(--font-body); font-weight: 600; margin-bottom: var(--space-sm); }
.app-rhythm-row { display: flex; align-items: center; flex-wrap: wrap; column-gap: var(--space-md); margin: var(--space-md) 0 var(--space-sm); }
.app-rhythm-row .app-rhythm { margin-bottom: 0; }
.app-rhythm-count { color: var(--text-secondary); font-size: var(--font-body); }
.task { display: flex; align-items: center; padding-block: var(--space-sm); min-height: 44px; border-bottom: 1px solid var(--divider); }
.task:last-child { border-bottom: 0; }
.check { flex: none; width: 24px; height: 24px; border-radius: var(--radius-pill); margin-right: var(--space-md); border: 1px solid var(--border); display: grid; place-items: center; font-size: 14px; font-weight: 700; line-height: 1; color: var(--background); }
.task-text { flex: 1; min-width: 0; }
.task-label { display: block; font-size: var(--font-body); color: var(--text-primary); }
.task-detail { display: none; font-size: var(--font-caption); color: var(--text-secondary); margin-top: 2px; }
.task-detail b { color: var(--accent); font-weight: 700; }
.task.done .check { background: var(--success); border-color: var(--success); }
.task.done .check::after { content: "✓"; }
.task.done .task-label { color: var(--text-secondary); }
.task.done .task-detail { display: block; }
.reveal-ready .task.done[data-at]:not(.step-on) .check { background: transparent; border-color: var(--border); }
.reveal-ready .task.done[data-at]:not(.step-on) .check::after { opacity: 0; }
.reveal-ready .task.done[data-at]:not(.step-on) .task-label { color: var(--text-primary); }
.reveal-ready .task.done[data-at]:not(.step-on) .task-detail { max-height: 0; margin-top: 0; opacity: 0; }

/* Temperatur: TemperatureCard.tsx, saveButton aus temperature.tsx */
.temp-name { color: var(--text-primary); font-size: var(--font-heading); font-weight: 700; line-height: 1.2; margin-bottom: var(--space-sm); }
.temp-target { color: var(--text-secondary); font-size: var(--font-caption); margin-bottom: var(--space-md); }
.temp-row { display: flex; align-items: center; margin-bottom: var(--space-sm); }
.app-input { flex: 1; min-width: 0; min-height: 40px; display: flex; align-items: center; color: var(--text-primary); font-size: var(--font-body); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-sm); margin-right: var(--space-sm); }
.temp-unit { color: var(--text-primary); font-size: var(--font-body); font-weight: 700; }
.temp-status { font-size: var(--font-caption); color: var(--text-secondary); }
.temp-action { margin-top: var(--space-md); }
.temp-action-label { color: var(--danger); font-size: var(--font-caption); margin-bottom: var(--space-sm); }
.app-input-area { margin-right: 0; min-height: 70px; align-items: flex-start; border-color: var(--danger); }
/* Feld Korrekturmassnahme klappt weich auf statt zu springen (Entscheid 11.10.2026) */
.reveal-ready .temp-action { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 450ms cubic-bezier(0.33, 1, 0.68, 1), margin-top 450ms cubic-bezier(0.33, 1, 0.68, 1), opacity 350ms ease-out 100ms; }
.reveal-ready .temp-action > div { overflow: hidden; min-height: 0; }
.reveal-ready .temp-action:not(.step-on) { grid-template-rows: 0fr; margin-top: 0; opacity: 0; }
.app-save { margin-top: var(--space-md); border-radius: var(--radius-md); padding: var(--space-md); text-align: center; background: var(--accent); color: var(--background); font-size: var(--font-body); font-weight: 700; }
.reveal-ready .app-save:not(.step-on) { background: var(--disabled); color: var(--text-secondary); }

/* Warenannahme: goods-receipt.tsx sectionTitle, checkRow, rowDivider; YesNoToggle.tsx */
.app-section { color: var(--accent); font-size: var(--font-subheading); font-weight: 700; line-height: 1.25; margin-bottom: var(--space-md); }
.check-row { display: flex; align-items: center; padding-block: var(--space-md); min-height: 44px; }
.check-row + .check-row { border-top: 1px solid var(--divider); }
.check-label { flex: 1; min-width: 0; font-size: var(--font-body); color: var(--text-primary); padding-right: var(--space-sm); }
.yes-no { display: flex; gap: var(--space-sm); }
.yn { min-width: 52px; min-height: 44px; padding-inline: var(--space-md); display: grid; place-items: center; border-radius: var(--radius-pill); border: 1px solid var(--border); font-size: var(--font-caption); color: var(--text-secondary); }
.check-row .yn-yes { background: var(--success); border-color: var(--success); color: var(--background); font-weight: 700; }
.reveal-ready .check-row:not(.step-on) .yn-yes { background: transparent; border-color: var(--border); color: var(--text-secondary); font-weight: 400; }

/* Monatsuhr: MonthClock.tsx (240, Bilanzzeile 32 hoch); Kopf der Monatskarte aus dashboard.tsx */
.month-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.month-head .card-title { margin-bottom: 0; }
.month-link { display: flex; align-items: center; color: var(--accent); font-size: var(--font-body); }
.month-link .icon { margin-left: 2px; }
.clock { display: block; margin: 0 auto; max-width: 100%; height: auto; }
.balance { min-height: 32px; margin-top: var(--space-sm); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-sm); }
.balance-pill { height: 32px; display: flex; align-items: center; padding-inline: 10px; border-radius: var(--radius-pill); border: 1px solid var(--border); font-size: var(--font-caption); color: var(--text-secondary); }
.balance-dot { width: 8px; height: 8px; border-radius: 4px; margin-right: 6px; }

/* Tagesblatt: TemperatureDaySection.tsx; PDF-Knopf aus day/[date]/[module].tsx */
.day-card + .day-card { margin-top: var(--space-md); }
.control-head { color: var(--accent); font-size: var(--font-caption); font-weight: 700; }
.entry { margin-top: var(--space-md); }
.entry + .entry { border-top: 1px solid var(--divider); padding-top: var(--space-md); }
.entry-row { display: flex; justify-content: space-between; gap: var(--space-sm); font-size: var(--font-body); }
.entry-value { font-weight: 700; font-variant-numeric: tabular-nums; }
.entry-reason { color: var(--danger); font-size: var(--font-caption); margin-top: var(--space-xs); }
.entry-meta { color: var(--text-secondary); font-size: var(--font-caption); margin-top: var(--space-xs); }
.entry-void .entry-value { color: var(--text-secondary); text-decoration: line-through; }
.reveal-ready .entry-void:not(.step-on) .entry-value { color: var(--text-primary); text-decoration: none; }
.reveal-ready .entry-void:not(.step-on) .entry-reason { display: none; }
.reveal-ready .day-card[data-at] { transition: opacity 300ms ease-out; }
.reveal-ready .day-card[data-at]:not(.step-on) { opacity: 0; }
.app-pdf { display: flex; align-items: center; justify-content: center; gap: var(--space-sm); margin-top: var(--space-lg); background: var(--surface-elevated); border: 1px solid var(--accent); border-radius: var(--radius-md); padding: var(--space-md) var(--space-lg); color: var(--accent); font-size: var(--font-body); font-weight: 600; }

/* Team: enter-code.tsx input; Kopfkarte aus dashboard.tsx (title, greeting, headerRow) */
.app-field { height: 50px; display: flex; align-items: center; background: var(--surface-elevated); border: 1px solid var(--border); border-radius: var(--radius-md); padding-inline: var(--space-md); margin-bottom: var(--space-md); font-size: var(--font-body); color: var(--text-primary); }
.head-card { padding-block: var(--space-md); }
.head-row { display: flex; justify-content: space-between; align-items: center; }
.head-title { color: var(--text-primary); font-size: var(--font-title); font-weight: 700; line-height: 1.2; margin: 25px 0 8px; }
.head-greeting { color: var(--text-primary); font-size: var(--font-subheading); font-weight: 600; margin-bottom: 25px; }
.head-row .icon { color: var(--accent); }
.reveal-ready .head-card[data-at] { transition: opacity 350ms ease-out, transform 450ms cubic-bezier(0.33, 1, 0.68, 1); }
.reveal-ready .head-card[data-at]:not(.step-on) { opacity: 0; transform: translateY(8px); }

/* ===== Weiche Uebergaenge der Ablaeufe (Entscheid 04.10.2026) =====
   Nur mit reveal-ready; bei "Bewegung reduzieren" schaltet die Regel ganz unten alles ab. */
@keyframes appear { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.reveal-ready .check { transition: background-color 250ms ease-out, border-color 250ms ease-out; }
.reveal-ready .check::after { transition: opacity 200ms ease-out 80ms; } /* ohne Aufspringen (Entscheid 05.10.2026) */
.reveal-ready .task-label { transition: color 250ms ease-out; }
.reveal-ready .task-detail { overflow: hidden; max-height: 2.4em; transition: max-height 300ms ease-out, margin-top 300ms ease-out, opacity 300ms ease-out 100ms; }
.reveal-ready .check-row .yn-yes { transition: background-color 250ms ease-out, border-color 250ms ease-out, color 250ms ease-out; }
.reveal-ready .app-save { transition: background-color 350ms ease-out, color 350ms ease-out; }
.reveal-ready .entry-void.step-on .entry-reason { animation: appear 350ms ease-out both; }
/* Schleife (script.js): ausblenden vor dem Neustart, Zuruecksetzen ohne Uebergaenge */
.reveal-ready .tile { transition: opacity 800ms ease-in-out; }
.reveal-ready .tile.fading { opacity: 0; }
.reveal-ready .tile.resetting * { transition: none !important; animation: none !important; }
.reveal-ready .entry-void .entry-value { text-decoration-line: line-through; transition: color 300ms ease-out, text-decoration-color 300ms ease-out; }
.reveal-ready .entry-void:not(.step-on) .entry-value { text-decoration-line: line-through; text-decoration-color: transparent; }

/* ===== Tablet und Desktop ===== */
@media (min-width: 760px) {
  .hero { padding: 72px 48px 48px; min-height: 680px; }
  .hero .row { grid-template-columns: 1fr auto; }
  .split { grid-template-columns: 1fr 1fr; }
  .split.flip .half:first-child { order: 2; }
  .half { padding: 48px; min-height: 560px; }
  .half.media { padding: 56px 48px; }
  .banner { padding: 120px 48px; }
  .principles { padding: 110px 48px; }
  .principles li { grid-template-columns: 1fr 1.2fr; gap: 32px; align-items: baseline; }
  .foot-nav { padding: 40px 48px 28px; }
  .menu { padding: 110px 48px 56px; }
}

/* ===== Rechtliche Seiten und 404 (20.10.2026): Kopf in der Einstiegsfarbe, Text schmal ===== */
.legal-top { background: var(--f-hero); display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px; }
.legal-top .wordmark { font-size: 26px; text-decoration: none; }
.legal-back { font-size: 14px; text-transform: uppercase; letter-spacing: 0.03em; color: inherit; text-decoration: none; }
.legal-back:hover { text-decoration: underline; }
.legal { max-width: 760px; margin: 0 auto; padding: 56px 20px 88px; display: grid; gap: 14px; }
.legal h1 { font-size: clamp(36px, 7vw, 64px); margin-bottom: 18px; overflow-wrap: anywhere; }
.legal h2 { font-family: var(--font-system); font-size: var(--font-heading); font-weight: 600; margin-top: 26px; }
.legal p { max-width: 62ch; }
.legal-lead { font-size: clamp(19px, 2.1vw, 22px); }
.legal-updated, .legal-hint { color: var(--text-secondary); font-size: 15px; margin-top: 26px; }
.legal-404 { min-height: 60vh; align-content: center; }
.legal-code { font-size: clamp(72px, 19vw, 160px); line-height: 0.9; color: var(--accent); font-weight: 300; }
.legal .btn { margin-top: 12px; }
@media (min-width: 760px) {
  .legal-top { padding: 24px 48px; }
  .legal { padding: 88px 48px 120px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}