/* Tagwerk · Design-Tokens. ERZEUGT von bin/tokens.py aus design/tokens.json,
   nicht von Hand aendern.
   quelle-sha256: 1f7a88ea39eefefa429caa2646b8cf1b934688d151d65ee56954fd262130dd4b */

:root {
  --token-color-paper: #ffffff;
  --token-color-ink: #0b0b0c;
  --token-color-ink2: #55565a;
  --token-color-gray: #a3a3a9;
  --token-color-surface: #f3f3f5;
  --token-color-accent: #2a63f5;
  --token-color-veil: rgba(255, 255, 255, 0.74);
  --token-color-rail: #fbfbfb;
  --token-color-band: #fefefe;
  --token-color-hairline: #f0f0f0;
  --token-color-edge: #e1e1e1;
  --token-color-dim: #6b6b70;
  --token-color-dim-hc: #55565a;
  --token-color-today: #0b0b0c;
  --token-color-now: #e5484d;
  --token-color-now-strong: #b93c40;
  --token-color-meet: #1a7f45;
  --token-color-grid: #f2f2f2;
  --token-color-grid-hc: #d9d9d9;
  --token-color-colsep: #f5f5f5;
  --token-color-bday: #f6efe4;
  --token-color-warn-bg: #fff5e0;
  --token-color-bad-bg: #fff0f0;
  --token-color-ok-bg: #ebf7f0;
  --token-color-account-1: #2f6bff;
  --token-color-account-2: #a61e4d;
  --token-color-account-3: #0e8a6a;
  --token-color-account-4: #b4690e;
  --token-type-display-size: clamp(40px, 5.2vw, 72px);
  --token-type-display-weight: 600;
  --token-type-display-line-height: 1.06;
  --token-type-display-tracking: -0.03em;
  --token-type-title-size: clamp(28px, 3vw, 40px);
  --token-type-title-weight: 600;
  --token-type-title-line-height: 1.15;
  --token-type-title-tracking: -0.022em;
  --token-type-body-size: 18px;
  --token-type-body-weight: 400;
  --token-type-body-line-height: 1.6;
  --token-type-body-tracking: 0em;
  --token-type-caption-size: 13px;
  --token-type-caption-weight: 500;
  --token-type-caption-line-height: 1.7;
  --token-type-caption-tracking: 0em;
  --token-space-s1: 4px;
  --token-space-s2: 8px;
  --token-space-s3: 12px;
  --token-space-s4: 16px;
  --token-space-s5: 24px;
  --token-space-s6: 32px;
  --token-space-s7: 40px;
  --token-space-s8: 56px;
  --token-space-s9: 64px;
  --token-space-s10: 88px;
  --token-space-s11: 144px;
  --token-radius-chip: 5px;
  --token-radius-box: 6px;
  --token-radius-panel: 8px;
  --token-radius-control: 10px;
  --token-radius-window: 12px;
  --token-radius-tile: 15px;
  --token-radius-tile-large: 19px;
  --token-shadow-win: 0 1px 2px rgba(0, 0, 0, 0.04), 0 28px 72px -16px rgba(0, 0, 0, 0.18);
  --token-size-window-w: 1152px;
  --token-size-window-h: 720px;
  --token-event-fill-mix: 0.15;
  --token-event-title-mix: 0.45;
  --token-event-fill-mix-hc: 0.24;
  --token-type-app-title-size: 20px;
  --token-type-app-title-weight: 700;
  --token-type-app-title-tracking: 0em;
  --token-type-app-body-size: 13px;
  --token-type-app-body-weight: 400;
  --token-type-app-body-tracking: 0em;
  --token-type-app-body-strong-size: 13px;
  --token-type-app-body-strong-weight: 600;
  --token-type-app-body-strong-tracking: 0em;
  --token-type-app-caption-size: 11px;
  --token-type-app-caption-weight: 400;
  --token-type-app-caption-tracking: 0em;
  --token-type-app-caption-strong-size: 11px;
  --token-type-app-caption-strong-weight: 600;
  --token-type-app-caption-strong-tracking: 0em;
  --token-shadow-app-pop: 0 8px 32px rgba(0, 0, 0, 0.12);
}

/* Tagwerk · tagwerk.pro · Design "Stille Flaeche" (Entwurf A, 29.09.2026)
   Reines Weiss, schwarze Knoepfe, keine Linien, keine Kachel-Raender. Je
   Abschnitt eine Aussage und das ganze App-Fenster 1:1, der gemeinte Teil
   bleibt klar, der Rest liegt hinter einem weissen Schleier (.spot). Einzige
   Farbe ausserhalb des Produkts: der blaue Punkt der Wortmarke.

   Werte kommen aus site/tokens.css (erzeugt aus design/tokens.json), hier
   stehen keine eigenen Farb-, Schrift- oder Radius-Literale. build.mjs haengt
   tokens.css davor und die Fokus-Rahmen je Abschnitt dahinter (aus
   site/assets/img/focus-manifest.json), alles landet in einer Datei.
   Vier Schriftgroessen: display, title, body, caption. */

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/InterVariable.woff2?v=e38b3a0721") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --win: var(--token-size-window-w);
  --win-h: var(--token-size-window-h);
  --font: "Inter", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, sans-serif;
  --pad: 28px;
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--token-color-paper);
  color: var(--token-color-ink);
  font-family: var(--font);
  font-size: var(--token-type-body-size);
  font-weight: var(--token-type-body-weight);
  line-height: var(--token-type-body-line-height);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11", "ss03";
}

h1,
h2 {
  text-wrap: balance;
}

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

a {
  color: inherit;
}

a:focus-visible {
  outline: 2px solid var(--token-color-ink);
  outline-offset: 3px;
  border-radius: var(--token-radius-box);
}

.wrap {
  max-width: calc(var(--win) + 2 * var(--pad));
  margin: 0 auto;
  padding: 0 var(--pad);
}

/* ---------- Kopf ---------- */

.site-header {
  padding: var(--token-space-s5) 0;
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wordmark {
  display: flex;
  align-items: baseline;
  font-size: var(--token-type-body-size);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--token-color-ink);
}

.wordmark .dot {
  color: var(--token-color-accent);
}

.live-date {
  display: inline-flex;
  gap: var(--token-space-s2);
  margin-left: var(--token-space-s3);
  font-size: var(--token-type-caption-size);
  font-weight: var(--token-type-caption-weight);
  color: var(--token-color-ink2);
  font-variant-numeric: tabular-nums;
}

.live-date .is-today {
  color: var(--token-color-ink);
  font-weight: 700;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 var(--token-space-s5);
  border-radius: var(--token-radius-window);
  background: var(--token-color-ink);
  color: var(--token-color-paper);
  font-size: var(--token-type-body-size);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 150ms ease;
}

.btn:hover {
  opacity: 0.86;
}

.btn-small {
  height: 36px;
  padding: 0 var(--token-space-s4);
  border-radius: var(--token-radius-control);
  font-size: var(--token-type-caption-size);
}

.meta-line {
  margin: 0;
  font-size: var(--token-type-caption-size);
  line-height: var(--token-type-caption-line-height);
  color: var(--token-color-ink2);
  text-wrap: balance;
}

/* Trefferflaeche mindestens 44 x 44 px (Emily GELB, 29.09.2026) fuer den
   kleinen Kopfknopf und die Fusslinks. Optisch bleibt alles, wie es ist: die
   Flaeche waechst nur unsichtbar ueber ein Pseudo-Element, mittig um das
   Element, mindestens 44 px, nie kleiner als das Element selbst. */
.btn-small,
.wordmark,
.footer-nav a {
  position: relative;
}

.btn-small::after,
.wordmark::after,
.footer-nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100%, 44px);
  height: max(100%, 44px);
  transform: translate(-50%, -50%);
}

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

.hero {
  padding: var(--token-space-s10) 0 var(--token-space-s11);
  text-align: center;
}

/* Fuer wen (Nico 18.10.2026): Mac, Google Meet, Apple-Geburtstage und
   -Erinnerungen stehen ganz oben, alle anderen finden Tagwerk nicht spannend. */
.hero-fit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--token-space-s3);
  margin: 0 auto var(--token-space-s6);
  font-size: var(--token-type-caption-size);
  font-weight: var(--token-type-caption-weight);
  color: var(--token-color-ink2);
}

.hero-fit-label {
  margin: 0;
}

.hero-fit ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--token-space-s4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hero-fit li {
  display: inline-flex;
  align-items: center;
  gap: var(--token-space-s2);
  color: var(--token-color-ink);
}

.fit-icon {
  width: 18px;
  height: 18px;
}

.hero h1 {
  margin: 0 auto var(--token-space-s5);
  font-size: var(--token-type-display-size);
  font-weight: var(--token-type-display-weight);
  letter-spacing: var(--token-type-display-tracking);
  line-height: var(--token-type-display-line-height);
}

.hero h1 span {
  display: block;
}

.hero .sub {
  text-wrap: pretty;
  max-width: 34em;
  margin: 0 auto var(--token-space-s7);
  color: var(--token-color-ink2);
}

.hero-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--token-space-s4);
  margin-bottom: var(--token-space-s10);
}

.hero-cta .meta-line + .meta-line {
  margin-top: calc(-1 * var(--token-space-s4));
}

.hero-media {
  max-width: calc(var(--win) + 2 * var(--pad));
  margin: 0 auto;
  padding: 0 var(--pad);
}

.hero-media .canvas {
  border-radius: var(--token-radius-window);
  overflow: hidden;
  box-shadow: var(--token-shadow-win);
}

.hero-media img {
  width: 100%;
}

/* ---------- Abschnitte: ein Satz, ein Bild ---------- */

.feature,
.keyboard,
.privacy-block,
.cta2 {
  padding: var(--token-space-s11) 0;
}

.section-text {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

.section-text h2 {
  margin: 0 0 var(--token-space-s4);
  font-size: var(--token-type-title-size);
  font-weight: var(--token-type-title-weight);
  letter-spacing: var(--token-type-title-tracking);
  line-height: var(--token-type-title-line-height);
}

.section-text p {
  margin: 0;
  color: var(--token-color-ink2);
}

/* Marke des Dienstes ueber der Aussage (Gmail, Google Meet). Die Icons sind
   offizielle Dateien von Google, lokal ausgeliefert, Markenhinweis im Fuss. */
.section-text .brand-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--token-space-s2);
  margin: 0 0 var(--token-space-s4);
  font-size: var(--token-type-caption-size);
  font-weight: var(--token-type-caption-weight);
  color: var(--token-color-ink2);
}

.brand-icon {
  width: 18px;
  height: 18px;
}

.shot {
  position: relative;
  margin: var(--token-space-s9) auto 0;
  max-width: var(--win);
  border-radius: var(--token-radius-window);
  overflow: hidden;
  box-shadow: var(--token-shadow-win);
}

.canvas {
  position: relative;
  aspect-ratio: 1152 / 720;
}

.canvas .win-img {
  width: 100%;
}

/* Der Fokus: eine durchsichtige Box ueber dem gemeinten Element, ihr
   riesiger Schatten ist der weisse Schleier ueber allem anderen. Lage und
   Groesse (--x --y --w --h in Punkten im 1152x720-Fenster) setzt build.mjs
   aus dem Fokus-Manifest, je Abschnitt eine Regel am Ende dieser Datei. */
.spot {
  position: absolute;
  left: calc(var(--x) / 1152 * 100%);
  top: calc(var(--y) / 720 * 100%);
  width: calc(var(--w) / 1152 * 100%);
  height: calc(var(--h) / 720 * 100%);
  border-radius: var(--token-radius-control);
  box-shadow: 0 0 0 3000px var(--token-color-veil);
  pointer-events: none;
}

/* ---------- Apple-Symbole und Dock: kein Screenshot noetig ---------- */

.icon-row {
  display: flex;
  justify-content: center;
  gap: var(--token-space-s9);
  margin-top: var(--token-space-s8);
}

.apple-icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--token-space-s3);
}

.apple-icon {
  width: 44px;
  height: 44px;
}

.apple-icon-label {
  font-size: var(--token-type-caption-size);
  font-weight: var(--token-type-caption-weight);
  color: var(--token-color-ink2);
}

.dock-demo {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--token-space-s4);
  margin-top: var(--token-space-s8);
}

.dock-tile {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: var(--token-radius-tile);
  font-size: var(--token-type-body-size);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.dock-tile.is-ghost {
  background: var(--token-color-surface);
  color: var(--token-color-gray);
}

.dock-tile.is-today {
  width: 80px;
  height: 80px;
  border-radius: var(--token-radius-tile-large);
  background: var(--token-color-ink);
  color: var(--token-color-paper);
}

/* ---------- Tastatur ---------- */

.key-list {
  list-style: none;
  margin: var(--token-space-s9) auto 0;
  padding: 0;
  max-width: 760px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--token-space-s7) var(--token-space-s5);
}

.key-list li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--token-space-s3);
  font-size: var(--token-type-caption-size);
  color: var(--token-color-ink2);
}

kbd {
  display: inline-grid;
  place-items: center;
  min-width: 48px;
  height: 40px;
  padding: 0 var(--token-space-s3);
  border-radius: var(--token-radius-control);
  background: var(--token-color-surface);
  color: var(--token-color-ink);
  font-family: var(--font);
  font-size: var(--token-type-caption-size);
  font-weight: 600;
}

/* ---------- Datenschutz, Aufruf ---------- */

.privacy-block .section-text p + p {
  margin-top: var(--token-space-s5);
}

.link {
  color: var(--token-color-ink);
  font-weight: 600;
  text-underline-offset: 4px;
}

.cta2 .btn {
  margin: var(--token-space-s5) 0 var(--token-space-s4);
}

.cta2 .meta-line + .meta-line {
  margin-top: 0;
}

/* ---------- Vertriebsweg "coming": kein Knopf ----------
   Schalter VERTRIEB in build.mjs. Im Hero steht meta_line.store_note als
   ruhige Zeile Text an der Stelle des grossen Knopfs: body, halbfett, Tinte,
   keine Flaeche, kein Rand, kein Unterstrich, nichts, was nach einem
   abgeschalteten Knopf aussieht. Im Aufruf ist derselbe Satz die Ueberschrift
   des Abschnitts (h2, title wie jede Ueberschrift, keine eigene Regel), die
   Metazeile folgt mit dem Abstand jeder Ueberschrift zu ihrem Text: allein
   der untere Aussenabstand der h2 (s4), die Metazeile hat keinen. Die
   Kopfzeile traegt nur die Wortmarke, wie auf den Unterseiten (Emily,
   Freigabe Nico 02.10.2026). */
.hero-cta .coming {
  margin: 0;
  font-size: var(--token-type-caption-size);
  font-weight: 400;
  line-height: var(--token-type-caption-line-height);
  color: var(--token-color-ink2);
}

/* ---------- Beta-Anmeldung (18.10.2026) ----------
   Block "Try Tagwerk early" im Hero, unter der Subline: Vorname, E-Mail der
   Apple-ID, Haekchen, schwarzer Knopf. Die Felder sind stille Flaechen
   (surface), ohne Rand: `all: unset` setzt den Rand der Browser zurueck, ohne
   eine border-Deklaration (Fall S2, keine Linien); danach kommt nur an, was
   unten steht. Das Haekchen bleibt das native Feld, accent-color in Tinte.
   Ab 721 px stehen Vorname, E-Mail und Knopf in einer Zeile, das Haekchen
   darunter; bis 720 px untereinander.
   Meldungen: jedes Feld hat unter sich einen Platz (.beta-slot) mit
   reservierter Hoehe, eine Meldung verschiebt nichts. Netz- und Serverfehler
   stehen unter dem Knopf. Fehlerfarbe now-strong (Kontrast auf Weiss 5,5:1,
   im Fall in tests/beta.py gemessen), dazu ein Symbol vor dem Text: Farbe ist
   nie allein das Zeichen. Nach der Anmeldung bleibt der Platz der Felder
   stehen (visibility), die Bestaetigung liegt mittig darueber: kein Hoehensprung. */
.beta {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--token-space-s3);
  width: 100%;
  max-width: 720px;
}

.beta-title {
  margin: 0;
  font-size: var(--token-type-body-size);
  font-weight: 600;
  line-height: var(--token-type-body-line-height);
  color: var(--token-color-ink);
}

.beta-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr) auto;
  grid-template-areas:
    "name email btn"
    "nslot eslot bslot"
    "consent consent consent"
    "cslot cslot cslot";
  column-gap: var(--token-space-s3);
  row-gap: 0;
  align-items: start;
  width: 100%;
  position: relative;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.beta-input {
  all: unset;
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 52px;
  padding: 0 var(--token-space-s4);
  border-radius: var(--token-radius-control);
  background: var(--token-color-surface);
  color: var(--token-color-ink);
  font-family: var(--font);
  font-size: var(--token-type-body-size);
  line-height: 52px;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.beta-input::placeholder {
  color: var(--token-color-ink2);
  opacity: 1;
}

/* Feld mit Fehler: innerer 2-px-Rahmen in Fehlerfarbe (ein Schatten, keine
   border-Deklaration), Haekchen mit Rahmenlinie als Outline. Nicht allein
   Farbe: die Meldung mit Symbol steht darunter. */
.beta-input[aria-invalid="true"] {
  box-shadow: inset 0 0 0 2px var(--token-color-now-strong);
}

.beta-consent input[aria-invalid="true"] {
  outline: 2px solid var(--token-color-now-strong);
  outline-offset: 2px;
}

.beta-input:focus-visible,
.beta-consent input:focus-visible,
.beta-submit:focus-visible {
  outline: 2px solid var(--token-color-ink);
  outline-offset: 2px;
}

.beta-name {
  grid-area: name;
}

.beta-email {
  grid-area: email;
}

.beta-submit {
  all: unset;
  grid-area: btn;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 9.5em;
  height: 52px;
  padding: 0 var(--token-space-s5);
  border-radius: var(--token-radius-window);
  background: var(--token-color-ink);
  color: var(--token-color-paper);
  font-family: var(--font);
  font-size: var(--token-type-body-size);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: opacity 150ms ease;
}

/* Gesperrt waehrend des Sendens: eigene Flaeche (ink2, weisse Schrift, Kontrast
   rund 7:1) statt abgeblendeter Tinte. */
.beta-submit:disabled {
  background: var(--token-color-ink2);
  color: var(--token-color-paper);
  opacity: 1;
  cursor: default;
}

.beta-consent {
  grid-area: consent;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--token-space-s2);
  min-height: 44px;
  font-size: var(--token-type-caption-size);
  font-weight: var(--token-type-caption-weight);
  line-height: var(--token-type-caption-line-height);
  color: var(--token-color-ink2);
  cursor: pointer;
}

.beta-consent input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--token-color-ink);
  cursor: pointer;
}

/* Trefferflaeche des Links mindestens 44 x 44 px, wie bei den Fusslinks. */
.beta-consent .link {
  position: relative;
}

.beta-consent .link::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100%, 44px);
  height: max(100%, 44px);
  transform: translate(-50%, -50%);
}

.beta-hp {
  position: absolute;
  left: -10000px;
  top: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.beta-hp input {
  all: unset;
  box-sizing: border-box;
  width: 1px;
  height: 1px;
}

/* Platz einer Meldung: 4 px Abstand zum eigenen Feld, eine Zeile von 18 px, bei
   Name, Adresse und Haekchen 8 px bis zum naechsten Element (der Abstand zum
   eigenen Feld ist hoechstens halb so gross wie der zum naechsten, Emily). */
.beta-slot {
  min-height: calc(var(--token-space-s1) + 18px);
  padding-top: var(--token-space-s1);
  text-align: left;
}

.beta-slot--name,
.beta-slot--email,
.beta-slot--consent {
  min-height: calc(var(--token-space-s1) + 18px + var(--token-space-s2));
}

.beta-slot--name {
  grid-area: nslot;
}

.beta-slot--email {
  grid-area: eslot;
}

.beta-slot--consent {
  grid-area: cslot;
  text-align: center;
}

.beta-slot--btn {
  grid-area: bslot;
  position: relative;
}

.beta-msg {
  margin: 0;
  font-size: var(--token-type-caption-size);
  font-weight: 600;
  line-height: 18px;
  color: var(--token-color-now-strong);
}

.beta-msg[hidden] {
  display: none;
}

/* Symbol vor jeder Fehlermeldung (Farbe allein traegt die Meldung nie). Fuer
   Vorlesegeraete leer ausgezeichnet, die Meldung beginnt mit ihrem Text. */
.beta-msg::before {
  content: "!";
  content: "!" / "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: var(--token-space-s2);
  margin-top: -2px;
  border-radius: var(--token-radius-chip);
  background: var(--token-color-now-strong);
  color: var(--token-color-paper);
  font-size: var(--token-type-caption-size);
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  vertical-align: baseline;
}

/* Bestaetigung: liegt mittig ueber dem stehenbleibenden Platz der Felder. */
.beta-done {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  margin: 0;
  transform: translateY(-50%);
  font-size: var(--token-type-body-size);
  font-weight: 600;
  line-height: var(--token-type-body-line-height);
  color: var(--token-color-ink);
  text-align: center;
}

.beta-done[hidden] {
  display: none;
}

.beta-done:focus {
  outline: none;
}

.beta[data-state="done"] .beta-title,
.beta[data-state="done"] .beta-fields {
  visibility: hidden;
}

@media (min-width: 721px) {
  /* Die Meldung unter dem schmalen Vornamenfeld bleibt einzeilig und reicht
     ueber die Spalte daneben (dort steht nie gleichzeitig eine Meldung). */
  .beta-slot--name .beta-msg {
    white-space: nowrap;
  }

  /* Unter dem Knopf ist die Spalte schmal, die Meldung reicht nach links
     ueber die Spalten daneben (dort steht nie gleichzeitig eine Meldung). */
  .beta-slot--btn .beta-msg {
    position: absolute;
    top: var(--token-space-s1);
    right: 0;
    width: max-content;
    max-width: 420px;
    text-align: right;
  }
}

/* ---------- Unterseiten: Impressum, Datenschutz, 404 ---------- */

.legal,
.not-found {
  padding: var(--token-space-s10) 0 var(--token-space-s11);
}

.legal .wrap,
.not-found .wrap {
  max-width: calc(680px + 2 * var(--pad));
}

.legal h1,
.not-found h1 {
  margin: 0 0 var(--token-space-s3);
  font-size: var(--token-type-title-size);
  font-weight: var(--token-type-title-weight);
  letter-spacing: var(--token-type-title-tracking);
  line-height: var(--token-type-title-line-height);
}

.legal .stamp {
  margin: 0 0 var(--token-space-s9);
  font-size: var(--token-type-caption-size);
  color: var(--token-color-ink2);
}

.legal section {
  margin-top: var(--token-space-s8);
}

.legal section:first-of-type {
  margin-top: 0;
}

.legal h2 {
  margin: 0 0 var(--token-space-s3);
  font-size: var(--token-type-body-size);
  font-weight: 600;
  line-height: var(--token-type-body-line-height);
}

.legal p {
  margin: 0 0 var(--token-space-s4);
  color: var(--token-color-ink2);
}

/* Lange Adressen und Links ("myaccount.google.com/permissions,") brechen
   notfalls mitten im Wort um, statt die Seite bei 320 px quer scrollen zu
   lassen (Emily, Werft Runde 3, 29.09.2026: 9 px Querscrollen). */
.legal,
.not-found {
  overflow-wrap: anywhere;
}

.legal strong {
  color: var(--token-color-ink);
  font-weight: 600;
}

.legal a {
  color: var(--token-color-ink);
  text-underline-offset: 4px;
}

.not-found p {
  margin: 0 0 var(--token-space-s6);
  color: var(--token-color-ink2);
}

/* ---------- Fuss ---------- */

.site-footer {
  padding: var(--token-space-s9) 0 var(--token-space-s10);
}

.site-footer .wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--token-space-s4);
  text-align: center;
}

.footer-nav {
  list-style: none;
  display: flex;
  gap: var(--token-space-s5);
  margin: 0;
  padding: 0;
  font-size: var(--token-type-caption-size);
}

.footer-nav a {
  color: var(--token-color-ink2);
  text-decoration: none;
}

.footer-nav a:hover {
  color: var(--token-color-ink);
}

.made-by,
.trademark {
  margin: 0;
  max-width: 620px;
  font-size: var(--token-type-caption-size);
  color: var(--token-color-ink2);
}

/* ---------- Mobil: Nahansicht statt ganzem Fenster ----------
   Der Abschnitt zeigt einen Ausschnitt des Fensters um den Fokus, der Fokus
   (die Klarzone) steht mittig. --pt ist die Laenge eines Fenster-Punkts in
   CSS-Pixeln: 1px (Fenster 1:1), solange die Klarzone mit 2 x s4 Luft in den
   Rahmen passt, sonst gerade so viel kleiner, dass sie passt, in der Breite
   (100cqw = Innenbreite der .wrap) wie in der Hoehe (--mh-max). Damit ist
   die Klarzone nie breiter als der Rahmen und kein Wort darin wird am Rand
   abgeschnitten (Emily, Werft Runde 3, 29.09.2026: bei 320 px "Check Tax
   Assessm", Meet-Schalter und "Gran's Birth..." angeschnitten). Das Fenster
   deckt die Box immer ganz, ohne leeren Rand (clamp auf 0 bzw. Boxmass minus
   Fenstermass). --mh setzt build.mjs je Abschnitt aus der Fokushoehe. */

@media (max-width: 720px) {
  :root {
    --pad: 20px;
  }

  .live-date {
    display: none;
  }

  /* Beta-Anmeldung (Kriterium 1, 18.10.2026, Runde 2): bei 390 x 844 liegen
     der ganze Block "Try Tagwerk early" mit Platz fuer die Meldungen, der
     Knopf und die Zeile "Coming to the Mac App Store" mit mindestens 16 px
     Luft im ersten Bildschirm. Dafuer rueckt der Kopf mobil enger zusammen
     (Kopf- und Heroabstand, Fuer-wen-Zeile, Subline, Feldhoehe 48 px, immer
     noch ueber den 44 px der Trefferflaeche). */
  .site-header {
    padding: var(--token-space-s3) 0;
  }

  .hero {
    padding: var(--token-space-s2) 0 var(--token-space-s10);
  }

  .hero-fit {
    gap: var(--token-space-s2);
    margin-bottom: var(--token-space-s4);
  }

  .hero-fit ul {
    gap: var(--token-space-s2) var(--token-space-s4);
  }

  .hero h1 {
    margin-bottom: var(--token-space-s4);
  }

  .hero .sub {
    margin-bottom: var(--token-space-s4);
    line-height: 1.5;
  }

  .beta {
    gap: var(--token-space-s2);
  }

  .beta-input {
    height: 48px;
    line-height: 48px;
  }

  .beta-submit {
    height: 48px;
  }

  .hero-cta {
    margin-bottom: var(--token-space-s8);
  }

  .beta-fields {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "name"
      "nslot"
      "email"
      "eslot"
      "consent"
      "cslot"
      "btn"
      "bslot";
  }

  .feature,
  .keyboard,
  .privacy-block,
  .cta2 {
    padding: var(--token-space-s10) 0;
  }

  .feature .wrap {
    container-type: inline-size;
  }

  .shot {
    --mh-max: 420px;
    --pt: min(1px, calc((100cqw - 2 * var(--token-space-s4)) / var(--w)), calc((var(--mh-max) - 2 * var(--token-space-s4)) / var(--h)));
    height: var(--mh);
    margin-top: var(--token-space-s7);
    background: var(--token-color-surface);
  }

  .shot .canvas {
    position: absolute;
    width: calc(1152 * var(--pt));
    height: calc(720 * var(--pt));
    left: clamp(calc(100% - 1152 * var(--pt)), max(calc(50% - var(--cx) * var(--pt)), calc(var(--token-space-s4) - var(--x) * var(--pt))), 0px);
    top: clamp(calc(100% - 720 * var(--pt)), max(calc(50% - var(--cy) * var(--pt)), calc(var(--token-space-s4) - var(--y) * var(--pt))), 0px);
    background: var(--token-color-paper);
  }

  .icon-row {
    gap: var(--token-space-s7);
    margin-top: var(--token-space-s7);
  }

  .dock-demo {
    margin-top: var(--token-space-s7);
  }

  .key-list {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--token-space-s6) var(--token-space-s4);
    margin-top: var(--token-space-s7);
  }

  .footer-nav {
    gap: var(--token-space-s4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .beta-submit {
    transition: none;
  }
}

@media print {
  .spot {
    box-shadow: none;
  }

  .btn,
  .live-date {
    display: none;
  }

  .shot,
  .hero-media .canvas {
    box-shadow: none;
  }
}

/* Fokus-Rahmen je Abschnitt, ERZEUGT von build.mjs aus site/assets/img/focus-manifest.json. */
.shot--accounts { --x: 8; --y: 369; --w: 232; --h: 152; --cx: 124; --cy: 445; --mh: clamp(240px, calc(var(--h) * var(--pt, 1px) + 192px), 420px); }
.shot--meet { --x: 822; --y: 308; --w: 310; --h: 38; --cx: 977; --cy: 327; --mh: clamp(240px, calc(var(--h) * var(--pt, 1px) + 192px), 420px); }
.shot--strip { --x: 304.2; --y: 152; --w: 847.8; --h: 56; --cx: 728.1; --cy: 180; --mh: clamp(240px, calc(var(--h) * var(--pt, 1px) + 192px), 420px); }
.shot--search { --x: 643; --y: 80; --w: 505; --h: 136; --cx: 895.5; --cy: 148; --mh: clamp(240px, calc(var(--h) * var(--pt, 1px) + 192px), 420px); }
@media (max-width: 720px) {
  .shot--strip { --x: 304.2; --y: 152; --w: 330.6; --h: 56; --cx: 469.5; --cy: 180; --mh: clamp(240px, calc(var(--h) * var(--pt, 1px) + 192px), 420px); }
  .shot--search { --x: 643; --y: 116; --w: 336.4; --h: 96; --cx: 811.2; --cy: 164; --mh: clamp(240px, calc(var(--h) * var(--pt, 1px) + 192px), 420px); }
}