/* =========================================================================
   lighthours – Oberfläche
   Baut ausschließlich auf den Tokens aus tokens.css auf.
   ========================================================================= */

/* ---------- Grundlagen -------------------------------------------------- */

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

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  font-feature-settings: 'kern' 1, 'liga' 1, 'cv05' 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 {
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-snug);
  margin: 0 0 var(--sp-4);
}

p { margin: 0 0 var(--sp-4); max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration-color: var(--accent); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

img, svg { max-width: 100%; height: auto; display: block; }

.skip-link {
  position: absolute; left: var(--sp-4); top: -4rem; z-index: 100;
  background: var(--fg); color: var(--bg);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--radius);
  transition: top var(--transition);
}
.skip-link:focus { top: var(--sp-4); }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--sp-5); }
.wrap-narrow { max-width: var(--wrap-narrow); }

/* ---------- Kopfzeile --------------------------------------------------- */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--border);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); min-height: 4.25rem;
}

.brand {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  text-decoration: none; color: var(--fg);
}
.brand svg { width: 1.9rem; height: 1.9rem; flex: none; }
.brand-name {
  font-weight: 600;
  font-size: 1.3rem;
  letter-spacing: var(--tracking-tight);
}

/* ---------- Sprachwahl ---------------------------------------------------- */

/* Eine Auswahlliste statt sechs Kürzeln nebeneinander. Die Reihe verdrängte auf
   dem Telefon die Marke, und mit jeder weiteren Sprache würde es enger.
   <details> kommt ohne JavaScript aus. */

.lang-menu { position: relative; }

.lang-menu summary {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border: 1.5px solid var(--border); border-radius: var(--radius-pill);
  font-size: var(--text-sm); font-weight: 600; color: var(--fg-muted);
  cursor: pointer; list-style: none;
  transition: border-color var(--transition), color var(--transition);
}
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary::marker { content: ''; }
.lang-menu summary:hover { border-color: var(--line-strong); color: var(--fg); }
.lang-menu summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.lang-chevron { width: 0.95rem; height: 0.95rem; flex: none; transition: transform var(--transition); }
.lang-menu[open] .lang-chevron { transform: rotate(180deg); }

/* Auf breiten Schirmen der ausgeschriebene Name, auf schmalen nur das Kürzel */
.lang-current { display: none; }
.lang-full { display: inline; }

.lang-list {
  position: absolute; right: 0; top: calc(100% + var(--sp-2));
  z-index: 60; min-width: 11rem;
  list-style: none; margin: 0; padding: var(--sp-2);
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.lang-list a {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-base); text-decoration: none; color: var(--fg);
  white-space: nowrap;
}
.lang-list a:hover { background: var(--sunken); }
.lang-list a[aria-current='true'] { background: var(--accent-weak); color: var(--accent-text); font-weight: 600; }
.lang-code {
  min-width: 2rem; font-size: var(--text-sm); font-weight: 600;
  color: var(--fg-muted); letter-spacing: 0.04em;
}
.lang-list a[aria-current='true'] .lang-code { color: var(--accent-text); }

/* ---------- Hero -------------------------------------------------------- */

.hero { padding: var(--sp-9) 0 var(--sp-8); text-align: center; }

.badge {
  display: inline-block; font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent-text); background: var(--accent-weak);
  padding: var(--sp-2) var(--sp-4); border-radius: var(--radius-pill);
  margin-bottom: var(--sp-5);
}

.hero h1 {
  font-size: var(--text-4xl);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--sp-5);
  text-wrap: balance;
}

.hero .lede {
  font-size: var(--text-xl); color: var(--fg-muted);
  max-width: 46ch; margin: 0 auto var(--sp-6);
  text-wrap: pretty;
}

/* ---------- Buttons ----------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
  padding: var(--sp-3) var(--sp-6);
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  transition: transform var(--transition), background var(--transition),
              border-color var(--transition), box-shadow var(--transition);
}
.btn:active { transform: translateY(1px); }

/* Rand in --accent-text: die helle Goldfläche allein hebt sich zu schwach
   vom Papier ab (2,3:1). Mit Rand sind es 4,8:1 – WCAG 1.4.11 erfüllt. */
.btn-primary { background: var(--accent); border-color: var(--accent-text); color: var(--on-accent); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--gold-500); border-color: var(--gold-700); box-shadow: var(--shadow); }

/* Der helle Hover-Ton muss auch bei manuell gewähltem Dunkelmodus greifen –
   deshalb beide Wege, nicht nur die Systemvorgabe. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .btn-primary:hover {
    background: var(--gold-200); border-color: var(--gold-200);
  }
}
:root[data-theme='dark'] .btn-primary:hover {
  background: var(--gold-200); border-color: var(--gold-200);
}

.btn-outline { border-color: var(--line-strong); color: var(--fg); background: transparent; }
.btn-outline:hover { border-color: var(--fg); background: var(--sunken); }


/* ---------- Inhaltsabschnitte ------------------------------------------- */

.section { padding: var(--sp-8) 0; border-top: 1px solid var(--border); }
.section > .wrap > h2 {
  font-size: var(--text-2xl); margin-bottom: var(--sp-6);
}

.grid-3 {
  display: grid; gap: var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.tile h3 { font-size: var(--text-lg); margin-bottom: var(--sp-3); }
.tile p  { color: var(--fg-muted); font-size: var(--text-base); margin: 0; line-height: var(--leading-normal); }

.tile-golden h3::before,
.tile-blue h3::before {
  content: ''; display: inline-block; width: 0.6em; height: 0.6em;
  border-radius: 50%; margin-right: 0.5em; vertical-align: 0.05em;
}
.tile-golden h3::before { background: var(--gold-400); }
.tile-blue h3::before   { background: var(--blue-400); }

.steps { counter-reset: step; }
.steps .tile h3::before {
  counter-increment: step; content: counter(step);
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.7em; height: 1.7em; margin-right: 0.6em;
  border-radius: 50%; background: var(--accent-weak); color: var(--accent-text);
  font-family: var(--font); font-size: 0.72em; font-weight: 700;
}

/* ---------- Generator --------------------------------------------------- */

.generator { padding: var(--sp-8) 0 var(--sp-9); border-top: 1px solid var(--border); }
.generator > .wrap > h2 { font-size: var(--text-3xl); margin-bottom: var(--sp-2); letter-spacing: var(--tracking-tight); }
.generator .subtitle { color: var(--fg-muted); margin-bottom: var(--sp-7); }

.step {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--sp-6);
  margin-bottom: var(--sp-5); box-shadow: var(--shadow-sm);
}
.step > h3 {
  display: flex; align-items: center; gap: var(--sp-3);
  font-family: var(--font); font-size: var(--text-xs);
  font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--fg-muted); margin-bottom: var(--sp-5);
}
.step > h3::before {
  content: counter(gen-step); counter-increment: gen-step;
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.6rem; height: 1.6rem; flex: none;
  border-radius: 50%; background: var(--accent-weak); color: var(--accent-text);
  font-size: var(--text-xs); letter-spacing: 0;
}
.generator .wrap { counter-reset: gen-step; }

.step[hidden] { display: none; }

/* Formularelemente */

.field { margin-bottom: var(--sp-5); }
.field:last-child { margin-bottom: 0; }
.field > label, .field-label {
  display: block; font-size: var(--text-base); font-weight: 600;
  margin-bottom: var(--sp-2);
}
.hint { font-size: var(--text-sm); color: var(--fg-muted); margin: var(--sp-3) 0 0; line-height: var(--leading-snug); }

input[type='text'], input[type='search'], input[type='number'], input[type='date'], select {
  font: inherit; color: var(--fg); background: var(--bg);
  border: 1.5px solid var(--border); border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4); width: 100%;
  transition: border-color var(--transition), box-shadow var(--transition);
}
input:hover, select:hover { border-color: var(--line-strong); }
input:focus-visible, select:focus-visible {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-weak);
}

select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 1.15rem center, right 0.85rem center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: var(--sp-8);
}

.search-row { display: flex; gap: var(--sp-3); }
.search-row input { flex: 1; min-width: 0; }

.results {
  list-style: none; margin: var(--sp-3) 0 0; padding: 0;
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow);
}
.results li + li { border-top: 1px solid var(--border); }
.results button {
  display: block; width: 100%; text-align: left; cursor: pointer;
  font: inherit; font-size: var(--text-base);
  background: var(--card); color: var(--fg); border: 0;
  padding: var(--sp-3) var(--sp-4);
  transition: background var(--transition);
}
.results button:hover { background: var(--accent-weak); }
.results .place-main { font-weight: 600; display: block; }
.results .place-sub { color: var(--fg-muted); font-size: var(--text-sm); }

.msg { font-size: var(--text-base); color: var(--fg-muted); margin-top: var(--sp-3); line-height: var(--leading-snug); }
.msg-error { color: var(--danger); }

/* Karte */

#map {
  height: 360px; border-radius: var(--radius);
  border: 1px solid var(--border); overflow: hidden;
  background: var(--sunken);
}
.maplibregl-ctrl-attrib { font-size: 10px; }

.radius-row { display: flex; gap: var(--sp-3); align-items: center; }
.radius-row select { flex: 1; }
.radius-row input { max-width: 8rem; }

.deviation {
  margin-top: var(--sp-4); padding: var(--sp-4);
  background: var(--accent-weak); border-radius: var(--radius);
  font-size: var(--text-base); color: var(--ink-soft); line-height: var(--leading-snug);
}
.deviation strong { color: var(--accent-text); }

/* Auswahlkacheln */

.checks { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.check {
  display: flex; align-items: center; gap: var(--sp-3); cursor: pointer;
  border: 1.5px solid var(--border); border-radius: var(--radius);
  padding: var(--sp-4); font-size: var(--text-base);
  transition: var(--transition);
}
.check:hover { border-color: var(--line-strong); background: var(--sunken); }
.check input { accent-color: var(--accent); width: 1.05rem; height: 1.05rem; flex: none; }
.check:has(input:checked) { border-color: var(--accent-text); background: var(--accent-weak); }
.check:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.check .dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; flex: none; }
.check .dot-gold { background: var(--gold-400); }
.check .dot-blue { background: var(--blue-400); }

.options-grid { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

/* Vorschau */

.preview-list { list-style: none; margin: var(--sp-4) 0 0; padding: 0; font-size: var(--text-base); }
.preview-list li {
  display: flex; align-items: baseline; gap: var(--sp-3);
  padding: var(--sp-3) 0; border-top: 1px solid var(--border);
}
.preview-list .p-day { min-width: 7rem; color: var(--fg-muted); font-size: var(--text-sm); }
.preview-list .p-name { flex: 1; }
.preview-list .p-time { font-variant-numeric: tabular-nums; font-weight: 600; }

/* Ausgabe */

.actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-5); }

.link-row { display: flex; gap: var(--sp-3); }
.link-row input {
  flex: 1; min-width: 0; font-family: var(--font-mono);
  font-size: var(--text-xs); color: var(--fg-muted);
}

.help { margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--border); }
.help h4 { font-size: var(--text-lg); margin: 0 0 var(--sp-3); }
.help ul { margin: 0; padding-left: var(--sp-5); font-size: var(--text-base); color: var(--fg-muted); line-height: var(--leading-normal); }
.help li { margin-bottom: var(--sp-2); }

/* ---------- Fußzeile ---------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--border);
  padding: var(--sp-7) 0;
  font-size: var(--text-base); color: var(--fg-muted);
}
.footer-grid { display: flex; flex-wrap: wrap; gap: var(--sp-6); justify-content: space-between; }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--sp-5); }
.footer-note { font-size: var(--text-sm); margin-top: var(--sp-5); }

/* ---------- Kleine Bildschirme ------------------------------------------ */

/* Auf dem Telefon bleibt die Kopfzeile einzeilig: Marke links, Farbmodus und
   Sprachwahl rechts. Möglich wird das durch die Auswahlliste – sechs Kürzel
   nebeneinander hätten die Marke aus dem Bild gedrängt. */
@media (max-width: 640px) {
  .site-header .wrap { min-height: 3.75rem; padding-block: var(--sp-3); }
  .brand svg { width: 1.7rem; height: 1.7rem; }
  .brand-name { font-size: 1.2rem; }

  /* Nur das Kürzel, der ausgeschriebene Name braucht zu viel Platz */
  .lang-full { display: none; }
  .lang-current { display: inline; }
  .lang-menu summary { padding: var(--sp-2) var(--sp-3); }

  /* Suchfeld und Knopf untereinander. Nebeneinander bleibt dem Eingabefeld zu
     wenig: der Platzhalter bricht schon auf einem großen Telefon mitten in der
     Postleitzahl ab. flex-wrap allein genügt hier nicht - das Feld hat
     min-width: 0 und schrumpft lieber, als umzubrechen. */
  .search-row { flex-direction: column; align-items: stretch; }
  .search-row .btn { width: 100%; }
}

/* Unter 380 px wird es rechnerisch knapp: Marke, Farbmodus und Sprachwahl
   brauchen zusammen rund 283 px, ein iPhone SE bietet 272. Ein Grad kleiner
   genügt, statt die Zeile umbrechen zu lassen. */
@media (max-width: 380px) {
  .brand { gap: var(--sp-2); }
  .brand svg { width: 1.5rem; height: 1.5rem; }
  .brand-name { font-size: 1.05rem; }
  .theme-toggle { width: 2rem; height: 2rem; }
  .lang-menu summary { padding: var(--sp-2); gap: var(--sp-1); }


  .hero { padding: var(--sp-7) 0 var(--sp-6); }
  .step { padding: var(--sp-5) var(--sp-4); }
  #map { height: 280px; }
  .actions .btn { width: 100%; }
}

/* ---------- Druck ------------------------------------------------------- */

@media print {
  .site-header, .site-footer, .actions, #map { display: none; }
  body { background: #fff; color: #000; }
}


/* ---------- Farbmodus-Umschalter ---------------------------------------- */

.header-tools { display: flex; align-items: center; gap: var(--sp-3); }

.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; flex: none;
  font: inherit; cursor: pointer;
  color: var(--fg-muted); background: transparent;
  border: 1.5px solid transparent; border-radius: var(--radius-pill);
  transition: color var(--transition), background var(--transition);
}
.theme-toggle svg { width: 1.15rem; height: 1.15rem; }
.theme-toggle:hover { background: var(--sunken); color: var(--fg); }

/* ---------- Hinweis bei unvollständiger Einrichtung ---------------------- */

.setup-notice {
  border: 1.5px solid var(--accent-text);
  background: var(--accent-weak);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  margin-bottom: var(--sp-6);
}
.setup-notice strong { display: block; margin-bottom: var(--sp-2); color: var(--accent-text); }
.setup-notice p { margin: 0 0 var(--sp-3); font-size: var(--text-base); line-height: var(--leading-normal); }
.setup-notice p:last-child { margin-bottom: 0; }
.setup-notice code {
  font-family: var(--font-mono); font-size: 0.92em;
  background: var(--card); padding: 0.1em 0.4em; border-radius: var(--radius-sm);
}

/* ---------- E-Mail-Versand ---------------------------------------------- */

.mail-box {
  margin-top: var(--sp-6); padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
}
.mail-box h4 { font-size: var(--text-lg); margin: 0 0 var(--sp-2); }
.mail-box .link-row { margin-top: var(--sp-4); }
.msg-ok { color: var(--accent-text); font-weight: 600; }

/* ---------- Unterstützen ------------------------------------------------- */

.support {
  border-top: 1px solid var(--border);
  padding: var(--sp-8) 0;
  text-align: center;
}
.support-cup {
  width: 2.5rem; height: 2.5rem; margin: 0 auto var(--sp-4);
  color: var(--accent);
}
.support h2 { font-size: var(--text-2xl); margin-bottom: var(--sp-3); }
.support p { max-width: 46ch; margin: 0 auto var(--sp-5); color: var(--fg-muted); }
.support-note {
  font-size: var(--text-sm); margin-top: var(--sp-5) !important;
  margin-bottom: 0 !important;
}

/* ---------- Hinweise zu den Ausgabewegen --------------------------------- */

.action-hints {
  list-style: none; margin: calc(var(--sp-2) * -1) 0 var(--sp-5); padding: 0;
  font-size: var(--text-sm); color: var(--fg-muted);
}
.action-hints li { margin-bottom: var(--sp-2); }
.action-hints strong { color: var(--fg); font-weight: 600; }

/* ---------- Selbstprüfung ------------------------------------------------ */

.check-list { list-style: none; margin: var(--sp-6) 0 0; padding: 0; }
.check-list li {
  display: grid; grid-template-columns: 1.6rem 1fr; gap: var(--sp-3);
  padding: var(--sp-4) 0; border-top: 1px solid var(--border);
}
.check-state { font-weight: 700; line-height: 1.5; }
.check-state.is-ok   { color: var(--accent-text); }
.check-state.is-fail { color: var(--danger); }

.check-list b { display: block; }
.check-detail { color: var(--fg-muted); font-size: var(--text-sm); }
/* Erscheint nur bei fehlgeschlagenen Prüfungen – deshalb der Fehlerton
   und nicht das Gold der Primäraktion. */
.check-help {
  display: block; margin-top: var(--sp-3); font-size: var(--text-sm);
  background: var(--danger-weak); border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4); line-height: var(--leading-snug);
}

.check-summary { padding: var(--sp-5); border-radius: var(--radius-lg); margin-top: var(--sp-6); }
.check-summary p { margin: var(--sp-2) 0 0; }
.check-summary.is-good { background: var(--accent-weak); }
.check-summary.is-bad  { border: 1.5px solid var(--danger); }

/* ---------- Bildschirmfotos ---------------------------------------------- */

.screens .lede-small {
  color: var(--fg-muted); font-size: var(--text-lg);
  max-width: 48ch; margin-bottom: var(--sp-7);
}

/* Zwei Kacheln nebeneinander, auf dem Telefon untereinander.
   Beide Aufnahmen haben dasselbe Format, damit die Zeilen bündig laufen. */
.screen-grid {
  display: grid; gap: var(--sp-6);
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: var(--sp-6);
}
@media (max-width: 700px) { .screen-grid { grid-template-columns: 1fr; } }

.screen { margin: 0; }

/* Die Aufnahmen sind 604 px breit; in der Kachel erscheinen sie bei rund
   500 px. Da es Netzhaut-Aufnahmen sind, bleibt der Text dabei scharf. */
.screen-frame {
  max-width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  line-height: 0;
}
.screen-frame img { max-width: 100%; height: auto; }

/* Helle und dunkle Fassung der Aufnahmen. Beide Wege, damit auch die manuelle
   Wahl greift – ein <picture> mit media-Abfrage kennt nur die Systemvorgabe.
   
   Alle Regeln tragen bewusst denselben Aufbau `.screen-frame .screen-*`.
   Ein knappes `.screen-dark` hätte weniger Gewicht als `.screen-frame img`
   und würde von dessen display überstimmt – dann erscheinen beide Fassungen
   übereinander, und zwar nur im Systemmodus bei hellem System. */
.screen-frame .screen-light { display: block; }
.screen-frame .screen-dark { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .screen-frame .screen-light { display: none; }
  :root:not([data-theme='light']) .screen-frame .screen-dark { display: block; }
}
:root[data-theme='dark'] .screen-frame .screen-light { display: none; }
:root[data-theme='dark'] .screen-frame .screen-dark { display: block; }
:root[data-theme='light'] .screen-frame .screen-light { display: block; }
:root[data-theme='light'] .screen-frame .screen-dark { display: none; }

.screen figcaption {
  margin-top: var(--sp-3);
  font-size: var(--text-sm); color: var(--fg-muted);
  line-height: var(--leading-snug);
}

/* ---------- Anonyme Zählung in der Fußzeile ------------------------------ */

.footer-stats {
  margin: var(--sp-5) 0 0; padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
  font-size: var(--text-base); color: var(--fg);
}
.footer-stats strong { color: var(--accent-text); font-weight: 600; }
.footer-stats-note {
  display: block; margin-top: var(--sp-2);
  font-size: var(--text-sm); color: var(--fg-muted);
  line-height: var(--leading-snug); max-width: 60ch;
}

/* ---------- Rechtstexte -------------------------------------------------- */

.legal { padding-top: var(--sp-7); padding-bottom: var(--sp-8); }
.legal h1 { font-size: var(--text-3xl); letter-spacing: var(--tracking-tight); margin-bottom: var(--sp-6); }
.legal h2 {
  font-size: var(--text-lg); margin: var(--sp-7) 0 var(--sp-3);
  padding-top: var(--sp-5); border-top: 1px solid var(--border);
}
.legal h2:first-of-type { border-top: 0; padding-top: 0; margin-top: var(--sp-6); }
.legal p { color: var(--ink-soft); }
.legal a { color: var(--accent-text); }
.legal code {
  font-family: var(--font-mono); font-size: 0.92em;
  background: var(--sunken); padding: 0.1em 0.4em; border-radius: var(--radius-sm);
}
.legal-notice {
  background: var(--accent-weak); border-radius: var(--radius);
  padding: var(--sp-4); font-size: var(--text-sm);
  margin-bottom: var(--sp-6) !important;
}
.legal-date {
  margin-top: var(--sp-8) !important; padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
  font-size: var(--text-sm); color: var(--fg-muted) !important;
}

/* Verweis am Fuß einer Erklärkachel */
.tile-link { margin-top: var(--sp-3) !important; font-size: var(--text-sm); font-weight: 600; }
.tile-link a { color: var(--accent-text); text-decoration: none; }
.tile-link a:hover { text-decoration: underline; }

/* ---------- Lichtdiagramm ------------------------------------------------ */

/* Die Grafik erklärt den einzigen Punkt, an dem die Kalendertermine regelmäßig
   für Verwirrung sorgen: Die Goldene Stunde endet erst gut 25 Minuten nach
   Sonnenuntergang. Ohne Uhrzeiten, weil die Dauer von Breitengrad und
   Jahreszeit abhängt.

   Als Karte gebaut wie die Schritte im Generator. Frei auf der Seite stehend
   wirkte der Block angeklebt: schmale Grafik links, darunter eine lange
   Textspalte, während darüber ein Dreierraster liegt. */

.phase-chart {
  margin: var(--sp-7) 0 0;
  padding: var(--sp-7) var(--sp-6);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.phase-chart h3 {
  font-size: var(--text-xl);
  text-align: center;
  max-width: 34ch;
  margin: 0 auto var(--sp-6);
  text-wrap: balance;
}

.phase-chart svg {
  display: block;
  width: 100%;
  max-width: 46rem;
  height: auto;
  margin: 0 auto var(--sp-7);
}

.pc-ax {
  font-family: var(--font);
  font-size: 14px;
  fill: var(--fg-muted);
}
.pc-mark {
  font-family: var(--font);
  font-size: 15px;
  font-weight: 600;
  fill: var(--fg);
}

/* Zwei Spalten, damit der Text das Dreierraster darüber aufnimmt statt als
   Block zu stehen. Unter 560 px klappt es von selbst untereinander. */
.phase-chart-text {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  max-width: none;
  color: var(--fg-muted);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}
.phase-chart-text p { margin: 0; max-width: none; }

@media (max-width: 640px) {
  .phase-chart { padding: var(--sp-6) var(--sp-4); }
  .phase-chart h3 { font-size: var(--text-lg); }
  .pc-ax   { font-size: 17px; }
  .pc-mark { font-size: 18px; }
}

/* ---------- Wochentagsauswahl ------------------------------------------- */

/* Sieben kleine Schalter statt sieben Zeilen: Die Auswahl ist eine
   Feinjustierung, kein eigener Schritt, und darf entsprechend wenig Platz
   einnehmen. Feste Spaltenzahl, damit die Woche als Woche lesbar bleibt. */

.weekday-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}
.weekday-grid[hidden] { display: none; }

.weekday {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-2);
  border: 1.5px solid var(--border); border-radius: var(--radius);
  font-size: var(--text-sm); cursor: pointer;
  transition: var(--transition);
}
.weekday:hover { border-color: var(--line-strong); background: var(--sunken); }
.weekday input { accent-color: var(--accent); width: 1rem; height: 1rem; }
/* Der Rahmen trägt den Zustand, also braucht er 3:1 gegen das Papier.
   var(--accent) schafft nur 2,27:1 - derselbe Fall wie beim Hauptknopf. */
.weekday:has(input:checked) { border-color: var(--accent-text); background: var(--accent-weak); }
.weekday:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Unter 420 px stehen sieben Spalten zu eng; zwei Reihen zu vier lesen sich
   besser als sieben abgeschnittene Kürzel. */
@media (max-width: 420px) {
  .weekday-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Rückkanal ---------------------------------------------------- */

/* Steht bewusst außerhalb des Kachelrasters: eine Bitte, keine Erklärung.
   Als vierte Kachel wäre sie eine Funktionsbeschreibung unter anderen. */

.report-line {
  margin: var(--sp-7) 0 0;
  padding-top: var(--sp-6);
  border-top: 1px solid var(--border);
  max-width: 70ch;
  color: var(--fg-muted);
  line-height: var(--leading-normal);
}
.report-line strong { color: var(--fg); display: block; margin-bottom: var(--sp-2); }
.report-line a { color: var(--accent-text); font-weight: 600; white-space: nowrap; }

/* ---------- Nachgezeichnete Terminkarte --------------------------------- */

/* Steht im selben Rahmen wie das Bildschirmfoto daneben, damit beide Kacheln
   eine Reihe bilden. Als SVG statt als Bild, weil sie Text enthält: sechs
   Sprachen mal zwei Farbmodi wären zwölf Dateien, die bei jeder Textänderung
   veralten. */

.event-card { display: block; width: 100%; height: auto; }

.ec-title { font-family: var(--font); font-size: 20px; font-weight: 600; fill: var(--fg); }
.ec-time  { font-family: var(--font); font-size: 26px; font-weight: 600; fill: var(--fg); }
.ec-muted { font-family: var(--font); font-size: 15px; fill: var(--fg-muted); }
.ec-value { font-family: var(--font); font-size: 15px; font-weight: 600; fill: var(--accent-text); }
.ec-note  { font-family: var(--font); font-size: 14px; fill: var(--ink-soft); }

/* ---------- Nachgezeichnete Wochenansicht ------------------------------- */

.week-card { display: block; width: 100%; height: auto; }

.wc-num   { font-family: var(--font); font-size: 22px; font-weight: 600; fill: var(--fg); }
.wc-day   { font-family: var(--font); font-size: 13px; fill: var(--fg-muted); }
.wc-hour  { font-family: var(--font); font-size: 13px; fill: var(--fg-muted); }
.wc-event { font-family: var(--font); font-size: 16px; font-weight: 600; fill: var(--accent-text); }
.wc-name  { font-family: var(--font); font-size: 13px; fill: var(--ink-soft); }