/* ============================================================================
   tagwerk.css — Vorlage 8 „Tagwerk": ein Kanzlei-Arbeitstag in harten
   Schnitten (Rhythmic Cutlist). Grounds werden pro Schnitt HART gesetzt,
   kein Drift (devices.md §10, Cutlist-Regel). Engine unangetastet.
   ========================================================================== */

@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --sc-canvas:     #F7F5F1;   /* Naturweiß */
  --sc-surface:    #EFECE4;   /* gesenkter Grund */
  --sc-ink:        #1C1B17;
  --sc-ink-soft:   #5D5850;
  --sc-accent:     #14555A;   /* Tiefes Petrol */
  --sc-accent-ink: #EDF4F2;

  --sc-font-display: "Archivo", system-ui, sans-serif;
  --sc-font-text: Charter, "Iowan Old Style", Georgia, serif;

  /* Schatten auf hellem Grund: halbiert und warm getönt (worlds.md, light canvas) */
  --sc-shadow-color: 38 18% 22%;
  --sc-e1: 0 1px 2px hsl(var(--sc-shadow-color) / 0.12), 0 2px 6px -1px hsl(var(--sc-shadow-color) / 0.09);
  --sc-e2: 0 2px 4px hsl(var(--sc-shadow-color) / 0.11), 0 8px 18px -4px hsl(var(--sc-shadow-color) / 0.13);

  --tw-kohle: #17181A;
  --tw-kohle-hoch: #24262B;
  --tw-kohle-ink: #F4F1EA;
  --tw-leiste-h: 3.25rem;
}

html { background: var(--sc-canvas); }
body {
  margin: 0;
  background: var(--sc-canvas);
  color: var(--sc-ink);
  font-family: var(--sc-font-text);
  line-height: var(--sc-leading-body);
  padding-top: var(--tw-leiste-h);
}

img { max-width: 100%; }

.skip {
  position: fixed; left: 0.75rem; top: 0.5rem; z-index: 60;
  transform: translateY(-300%);
  background: var(--sc-accent); color: var(--sc-accent-ink);
  font-family: var(--sc-font-display); font-size: 0.85rem;
  padding: 0.6rem 1rem; border-radius: 6px; text-decoration: none;
}
.skip:focus-visible { transform: none; }

:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; }

/* ==================================================== Die Zeitleiste == */
.zeitleiste {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  height: var(--tw-leiste-h);
  background: var(--tw-kohle); color: var(--tw-kohle-ink);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 1rem;
  padding-inline: clamp(0.75rem, 2.5vw, 2rem);
  font-family: var(--sc-font-display);
}

.flap { display: flex; align-items: center; gap: 3px; justify-self: start; }
.fc, .fsek {
  display: inline-block; position: relative;
  background: var(--tw-kohle-hoch);
  border-radius: 3px;
  font-weight: 640; font-size: 1.02rem; line-height: 1.7;
  width: 1.35ch; text-align: center;
  font-variant-numeric: tabular-nums;
  transition: transform 80ms ease-in, opacity 80ms linear;
  transform-origin: center;
  overflow: hidden;
}
.fc::after, .fsek::after {
  content: ""; position: absolute; left: 0; right: 0; top: calc(50% - 0.5px);
  height: 1px; background: rgba(0, 0, 0, 0.5);
}
.fc.dreht, .fsek.dreht { transform: scaleY(0.08); opacity: 0.6; }
.fk { opacity: 0.65; font-weight: 640; margin-inline: 1px; }
.fsek {
  font-size: 0.66rem; line-height: 1.9; width: 2.6ch;
  margin-left: 0.4rem; align-self: center;
  opacity: 0; visibility: hidden;
  transition: opacity 300ms linear, transform 80ms ease-in;
}
.zeit-echt .fsek { opacity: 0.85; visibility: visible; }
.fsek[hidden] { display: inline-block; }
.fwort {
  margin-left: 0.9rem;
  font-size: 0.68rem; font-weight: 560;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: color-mix(in oklab, var(--tw-kohle-ink) 72%, var(--tw-kohle));
  white-space: nowrap;
  transition: opacity 140ms linear;
}
.fwort.dreht { opacity: 0; }

.leiste-name {
  margin: 0; justify-self: center;
  font-size: 0.85rem; font-weight: 600; letter-spacing: 0.015em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.leiste-ort { font-weight: 420; color: color-mix(in oklab, var(--tw-kohle-ink) 78%, var(--tw-kohle)); }

.leiste-tel {
  justify-self: end;
  color: var(--tw-kohle-ink); text-decoration: none;
  font-size: 0.92rem; font-weight: 640; letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  padding: 0.7rem 0.25rem; /* Tap-Ziel ≥ 44px in der 52px-Leiste */
  border-bottom: 2px solid color-mix(in oklab, var(--tw-kohle-ink) 35%, var(--tw-kohle));
  transition: border-color 140ms linear;
}
.leiste-tel:hover { border-color: var(--tw-kohle-ink); }
.leiste-tel:focus-visible { outline-color: #9FD4CE; }

/* ======================================================== Schnitte == */
.schnitt { position: relative; background: var(--sc-canvas); }
.grund-b { background: var(--sc-surface); }

.marke {
  margin: 0 0 var(--sc-3);
  font-family: var(--sc-font-display);
  font-size: 0.78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.13em;
  color: var(--sc-ink-soft);
  font-variant-numeric: tabular-nums;
}
.marke--hell { color: inherit; opacity: 0.78; }

.satz {
  margin: 0;
  font-size: var(--sc-t-lg); line-height: 1.42;
  max-width: 30ch;
  text-wrap: pretty;
}

/* -- Hero ------------------------------------------------------------ */
.hero { min-height: calc(100svh - var(--tw-leiste-h)); overflow: hidden; }
.voll { position: absolute; inset: 0; margin: 0; }
.voll img { width: 100%; height: 100%; object-fit: cover; display: block; }

.hero::after, .schluss::after {
  /* Scrim als Geschwister der Copy (verify.md), als Dichte-SPALTE unter der
     Textspalte statt vollflächig: die rechte Bildhälfte (Klinke, Hand,
     Morgenlicht) bleibt unangetastet. */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
}
.hero::after {
  background:
    linear-gradient(100deg, rgba(12, 11, 10, 0.80) 0%, rgba(12, 11, 10, 0.74) 56%, rgba(12, 11, 10, 0) 79%);
}
.hero-block {
  position: relative; z-index: 2;
  padding: var(--sc-gutter);
  padding-top: max(26svh, 9rem);
  max-width: 42rem;
  color: #F6F3EC;
}
.hero-block .marke { color: rgba(246, 243, 236, 0.82); }
.hero h1 {
  margin: 0 0 var(--sc-4);
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-3xl); font-weight: 680;
  letter-spacing: var(--sc-track-tight);
  line-height: var(--sc-leading-tight);
  text-wrap: balance;
}
.hero-wer { margin: 0 0 var(--sc-2); font-size: var(--sc-t-lg); }
.hero-gebiete {
  margin: 0;
  font-family: var(--sc-font-display);
  font-size: 0.9rem; font-weight: 540; letter-spacing: 0.05em;
  color: rgba(246, 243, 236, 0.85);
}
.demotag {
  display: inline-block; margin: var(--sc-4) 0 0;
  font-family: var(--sc-font-display);
  font-size: 0.72rem; font-weight: 560; letter-spacing: 0.08em;
  color: #F6F3EC;
  border: 1px solid rgba(246, 243, 236, 0.55);
  border-radius: 4px; padding: 0.28rem 0.55rem;
}

/* -- Band: Bild volle Breite, Text darunter --------------------------- */
.band { padding-bottom: clamp(3rem, 7vw, 5.5rem); }
/* 60svh statt 72svh: mit 72svh lagen die Band-Schnitte 08:31/09:44 bei
   1.02vh Span — ueber der SPEC-§4-Obergrenze von 0.9vh (nachgemessen
   30.08., Erstverifikation, nach dem Lazy-Load-Fix). */
.band-bild { margin: 0; height: min(60svh, 40rem); overflow: hidden; }
.band-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.band-text {
  padding: clamp(1.75rem, 4vw, 3rem) var(--sc-gutter) 0;
  max-width: var(--sc-maxw); margin-inline: auto;
}
.band-text--rechts { display: grid; justify-items: end; text-align: right; }
.band-text--rechts .satz { text-align: right; }

/* -- Split: Bild und Text nebeneinander -------------------------------- */
.split {
  display: grid; grid-template-columns: 7fr 5fr; align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
  padding: clamp(2.5rem, 6vw, 5rem) var(--sc-gutter);
  max-width: var(--sc-maxw); margin-inline: auto;
}
.split-bild { margin: 0; }
.split-bild img { width: 100%; height: auto; display: block; }
.split--rechts .split-bild { order: 2; }
.split--rechts .split-text { order: 1; justify-self: end; text-align: right; }

/* -- Gebiete ----------------------------------------------------------- */
.gebiet {
  display: grid; grid-template-columns: 4fr 7fr; align-items: center;
  gap: clamp(1.5rem, 4vw, 4.5rem);
  padding: clamp(2rem, 5vw, 3.75rem) var(--sc-gutter);
  max-width: var(--sc-maxw); margin-inline: auto;
}
.gebiet--b .gebiet-bild { order: 2; }
.gebiet--b .gebiet-text { order: 1; }
.gebiet-bild {
  /* width:100% ist Pflicht: mit justify-self:center allein waere die Figure
     shrink-to-fit und kollabierte vor dem Lazy-Load des Bildes auf 0x0
     (img width:100% loest zirkulaer zu 0 auf) — ~900px Layout-Shift beim
     ersten Durchscrollen. Gefunden 30.08. bei der Erstverifikation. */
  margin: 0; width: 100%; max-width: 26rem; justify-self: center;
}
.gebiet-bild img {
  /* Quadrat-Beschnitt (Crop, keine Verzerrung): die drei Hochformat-
     Detailfotos (1188x1574) trieben die Gebiets-Schnitte sonst auf
     0.73-0.75vh — ueber der verbindlichen Beat-4-Obergrenze von 0.6vh
     (SPEC §4). Mobil gilt weiterhin der 5/4-Beschnitt unten. */
  width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; display: block;
}
.gebiet h2 {
  margin: 0 0 var(--sc-2);
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-2xl); font-weight: 670;
  letter-spacing: var(--sc-track-snug);
  line-height: var(--sc-leading-tight);
  text-wrap: balance;
}
.gebiet-begriff {
  margin: 0 0 var(--sc-4);
  font-family: var(--sc-font-display);
  font-size: 0.8rem; font-weight: 640;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--sc-accent);
}
.gebiet-zeile { margin: 0; max-width: 52ch; color: var(--sc-ink); }

/* Harte Grund-Stufen innerhalb der Gebietsfolge: apply-config.mjs setzt
   auf jeder zweiten Gebiets-Sektion die Klassen gebiet--b + grund-b. */

/* -- Zeitraffer (Peak) -------------------------------------------------- */
.zeitraffer { border-block: 1px solid var(--sc-hairline); }
/* 35svh nach SPEC §4 (~0.35vh pro Mikro-Schnitt): mit 42svh lag das
   K4-Frequenzverhaeltnis Beat 5 zu Beats 1-4 nur bei 1.86x statt >=2x. */
.mikro { height: 35svh; min-height: 15rem; overflow: hidden; }
.chip {
  position: absolute; left: var(--sc-gutter); bottom: 1rem; z-index: 2;
  margin: 0;
  background: var(--tw-kohle); color: var(--tw-kohle-ink);
  font-family: var(--sc-font-display);
  font-size: 0.74rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums;
  padding: 0.35rem 0.6rem; border-radius: 4px;
}

/* -- Werkzeug (Bußgeldlotse) -------------------------------------------- */
.werkzeug {
  background: var(--sc-accent);
  --sc-ink: #EDF4F2; --sc-ink-soft: #B9D2CE;
  color: var(--sc-ink);
}
.werkzeug-text {
  max-width: 46rem; margin-inline: auto;
  padding: clamp(4rem, 9vw, 7rem) var(--sc-gutter);
}
.werkzeug .marke--hell { color: #B9D2CE; }
.werkzeug h2 {
  margin: 0 0 var(--sc-5);
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-xl); font-weight: 660;
  letter-spacing: var(--sc-track-snug); line-height: var(--sc-leading-tight);
  text-wrap: balance;
}
.werkzeug-zitat { margin: 0 0 var(--sc-5); padding-left: var(--sc-5); border-left: 1px solid rgba(237, 244, 242, 0.4); }
.werkzeug-zitat p { margin: 0; font-size: var(--sc-t-lg); line-height: 1.5; }
.werkzeug-btn {
  display: inline-block;
  background: #EDF4F2; color: var(--sc-accent);
  font-family: var(--sc-font-display);
  font-size: 0.95rem; font-weight: 680;
  border: none; cursor: pointer;
  padding: 0.75rem 1.2rem; border-radius: 6px;
  box-shadow: var(--sc-e2);
  transition: transform 140ms var(--sc-ease-out);
}
.werkzeug-btn:hover { transform: translateY(-1px); }
.werkzeug-btn:active { transform: translateY(1px) scale(0.985); }
.werkzeug :focus-visible { outline-color: #EDF4F2; }

/* -- Schluss ------------------------------------------------------------ */
.schluss { min-height: 100svh; overflow: hidden; display: grid; }
.schluss::after {
  background:
    radial-gradient(115% 85% at 0% 0%, rgba(10, 11, 14, 0.78) 0%, rgba(10, 11, 14, 0.45) 36%, rgba(10, 11, 14, 0) 64%),
    linear-gradient(to top, rgba(10, 11, 14, 0.82) 0%, rgba(10, 11, 14, 0.35) 16%, rgba(10, 11, 14, 0) 30%);
}
.schluss-block {
  position: relative; z-index: 2;
  padding: clamp(3rem, 7vw, 5.5rem) var(--sc-gutter) 1.75rem;
  color: #F4F1EA;
  display: flex; flex-direction: column; align-items: flex-start;
}
.schluss .marke--hell { color: rgba(244, 241, 234, 0.85); }
.schluss h2 {
  margin: 0 0 var(--sc-6);
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-2xl); font-weight: 680;
  letter-spacing: var(--sc-track-tight); line-height: var(--sc-leading-tight);
  max-width: 18ch; text-wrap: balance;
}
.schluss-tel {
  display: inline-block;
  background: #F7F5F1; color: #1C1B17;
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-lg); font-weight: 680;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  padding: 0.85rem 1.3rem; border-radius: 6px;
  box-shadow: var(--sc-e2);
  transition: transform 140ms var(--sc-ease-out);
}
.schluss-tel:hover { transform: translateY(-1px); }
.schluss-tel:active { transform: translateY(1px) scale(0.985); }
.schluss-tel:focus-visible { outline-color: #F7F5F1; }
.fuss {
  margin-top: auto;
  padding-top: clamp(3rem, 12svh, 8rem);
  font-family: var(--sc-font-display);
  font-size: 0.78rem; line-height: 1.7;
  color: rgba(244, 241, 234, 0.88);
}
.fuss p { margin: 0 0 0.2rem; }
.fuss a { color: inherit; text-underline-offset: 3px; }

/* ================================================== Breakpunkte ======= */
@media (max-width: 860px) {
  .split, .split--rechts { grid-template-columns: 1fr; gap: 1.25rem; padding-block: 2.25rem; }
  .split--rechts .split-bild { order: 1; }
  .split--rechts .split-text { order: 2; justify-self: start; text-align: left; }
  .split--rechts .split-text .satz { text-align: left; }
  .gebiet, .gebiet--b { grid-template-columns: 1fr; gap: 1.25rem; }
  .gebiet--b .gebiet-bild { order: 1; }
  .gebiet--b .gebiet-text { order: 2; }
  .gebiet-bild { max-width: 100%; }
  .gebiet-bild img { aspect-ratio: 5 / 4; object-fit: cover; }
  .band-text--rechts { justify-items: start; text-align: left; }
  .band-text--rechts .satz { text-align: left; }
}

@media (max-width: 700px) {
  .hero h1 { font-size: var(--sc-t-2xl); }
  /* Unter 700px wird der Hero selbst ein harter Schnitt: Bild oben,
     Textblock auf Kohle darunter. Kein Scrim nötig, Kontrast konstruktiv. */
  .hero { display: flex; flex-direction: column; min-height: calc(100svh - var(--tw-leiste-h)); }
  .hero::after { content: none; }
  .hero .voll { position: relative; inset: auto; height: 44svh; flex: none; }
  .hero-block {
    background: var(--tw-kohle);
    flex: 1 1 auto;
    padding-top: clamp(1.5rem, 4svh, 3rem);
    max-width: none;
  }
  .schluss h2 { font-size: var(--sc-t-xl); }
  .mikro { height: 38svh; min-height: 12rem; }
}

@media (max-width: 640px) {
  .fwort { display: none; }
  .leiste-ort { display: none; }
  .zeitleiste { gap: 0.6rem; }
  .fuss {
    /* Platz für den Lotse-Knopf unten rechts (FAB, fixed bottom/right).
       WICHTIG: margin-bottom, NICHT padding-bottom — Padding liegt innerhalb
       der Border-Box, die Fusszeilen-Rect reichte damit trotz Puffer bis ans
       Seitenende in die FAB-Zone (Regression gefunden 30.08.: Fusszeile war
       durch Content-Wachstum auf 298px angewachsen, Rect-Overlap 52px).
       Margin hebt die Box selbst ueber die FAB-Zone, unabhaengig davon, wie
       hoch die Fusszeile kuenftig wird. Der Wert kommt zur Laufzeit aus
       tagwerk.js (gemessene FAB-Zone + 32px Reserve, --lotse-fab-platz);
       der Fallback 7rem deckt die FAB-Zone (24px bottom + 56px Knopf = 80px)
       plus 32px Reserve auch ohne JS. Right-Padding bleibt fuer den
       Ueberlappweg waehrend des Scrollens. */
    padding-right: 4.75rem;
    margin-bottom: var(--lotse-fab-platz, 7rem);
  }
}

@media (max-width: 480px) {
  .leiste-name { display: none; }
}

/* ================================================ Reduced Motion ====== */
@media (prefers-reduced-motion: reduce) {
  .fc, .fsek, .fwort, .schluss-tel { transition: none; }
  /* tagwerk.js tickt das Sekundenregister unter reduced-motion bewusst
     nicht — dann darf .zeit-echt es auch nicht einblenden, sonst steht
     dort ein eingefrorenes "00" (gefunden 30.08., Erstverifikation). */
  .zeit-echt .fsek { opacity: 0; visibility: hidden; }
}