/* Konfigurator – Shop-Seite. Schrift und Farben wie das gedruckte Logbuch. */

@font-face { font-family: 'Source Sans 3'; font-weight: 300; font-style: normal; font-display: swap; src: url(logbook/fonts/SourceSans3-Light.woff2) format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-weight: 400; font-style: normal; font-display: swap; src: url(logbook/fonts/SourceSans3-Regular.woff2) format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-weight: 600; font-style: normal; font-display: swap; src: url(logbook/fonts/SourceSans3-Semibold.woff2) format('woff2'); }

:root {
  --ground: #ebe7e1;     /* Leinen: die Tischfläche, auf der das Papier liegt */
  --paper: #ffffff;
  --ink: #2b2420;
  --muted: #6b625a;
  --rule: #c9c2b8;
  --rule-soft: #ddd7cf;
  --leather: #7a4b23;    /* die eine Aktion */
  --leather-deep: #5f3919;
  --danger: #8a2f22;
  --ok: #3d5a3a;
  --focus: #7a4b23;
}

* { box-sizing: border-box; }
html { background: var(--ground); }
body {
  margin: 0;
  color: var(--ink);
  font-family: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
h2 { margin: 0 0 4px; font-size: 22px; font-weight: 400; line-height: 1.2; }
p { margin: 0; }
a { color: inherit; }
small.hint { display: block; font-size: 14px; color: var(--muted); line-height: 1.4; }

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

/* Kopf */
.top {
  padding: 28px 40px 0;
  max-width: 1440px; margin: 0 auto;
}
/* Marke und Menü auf einer Zeile, der Teaser darunter.
   Mittig und nicht auf der Schriftlinie: Die Marke ist ein inline-flex, dessen erstes Element das Zeichen ist –
   ihre «Schriftlinie» ist damit die Unterkante des 34-px-Bildes, und das Menü stünde versetzt dazu. */
.kopfzeile {
  display: flex; align-items: center; gap: 32px; flex-wrap: wrap;
}
.wordmark { font-size: 44px; font-weight: 300; letter-spacing: 0.01em; line-height: 1; text-decoration: none; }
.tagline { margin-top: 10px; max-width: 62ch; color: var(--muted); font-size: 16px; }
.tagline strong { font-weight: 600; }    /* die Schnitte der Seite sind 300/400/600 – kein 700, das der Browser fett rechnen müsste */

/* Zwei Spalten: Formular links, Vorschau rechts */
.shop {
  display: grid;
  grid-template-columns: minmax(340px, 420px) 1fr;
  gap: 48px;
  padding: 32px 40px 80px;
  max-width: 1440px; margin: 0 auto;
}

/* Schritte (Akkordeon aus <details>): Nummer, Titel, rechts der aktuelle Stand */
.steps { border-bottom: 1px solid var(--rule); }
.step { border-top: 1px solid var(--rule); }
.step > summary { list-style: none; display: grid; grid-template-columns: 26px 1fr; column-gap: 12px; align-items: center; padding: 14px 0; cursor: pointer; }
.step > summary::-webkit-details-marker { display: none; }
.step > summary:hover .step-title { text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 4px; }
.num { grid-row: 1 / span 2; align-self: start; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--rule); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; color: var(--muted); }
.step[open] .num { background: var(--leather); border-color: var(--leather); color: #fff; }
.step-title { grid-column: 2; font-size: 20px; line-height: 1.3; }
.step-state { grid-column: 2; font-size: 14px; line-height: 1.35; color: var(--muted); }   /* zweite Zeile unter dem Titel: wird nie abgeschnitten */
.step[open] .step-state { display: none; }                /* offen sieht man die Angaben selbst */
.step.has-error .num { border-color: var(--danger); color: var(--danger); }
.step.has-error .step-state { color: var(--danger); display: block; }
.step-body { padding: 2px 0 22px; display: flex; flex-direction: column; gap: 10px; }
.next { align-self: flex-start; margin-top: 18px; padding: 8px 18px; border: 1px solid var(--leather); border-radius: 3px; background: none; color: var(--leather); font: inherit; font-weight: 600; cursor: pointer; }
.next:hover { background: var(--leather); color: #fff; }
.summary { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; margin: 0 0 18px; font-size: 15px; }
/* Preis und Guthaben über dem Knopf «PDF erzeugen». Reicht es nicht, steht hier die Erklärung – der Knopf
   bleibt bedienbar, ein gesperrter Knopf ohne Grund ist keine Auskunft. */
.credits-note { font-size: 15px; color: var(--muted); margin: -6px 0 14px; max-width: 48ch; }
.credits-note.short { color: var(--danger); }
.credits-note a { color: inherit; }
.summary dt { color: var(--muted); }
.summary dd { margin: 0; }
.step-body .primary { align-self: flex-start; }
.steps + .status { margin-top: 16px; }

/* Formular */
.group { padding: 24px 0 28px; border-top: 1px solid var(--rule); }
.group:first-child { border-top: 0; padding-top: 4px; }
.lead { color: var(--muted); font-size: 15px; margin-bottom: 14px; max-width: 48ch; }
.row { display: flex; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field > span { font-size: 14px; font-weight: 600; }
.field.grow { flex: 1 1 auto; }
.field.short { flex: 0 1 140px; }
.field.year { flex: 0 0 110px; }
input[type="text"], select {
  font: inherit; color: inherit;
  padding: 8px 10px;
  border: 1px solid var(--rule); border-radius: 3px;
  background: var(--paper);
  min-width: 0; width: 100%;
}
input[type="text"]::placeholder { color: #b3aca3; }
input[type="text"]:focus, select:focus { outline: 2px solid var(--focus); outline-offset: 0; border-color: var(--focus); }
input.invalid { border-color: var(--danger); }
.error { color: var(--danger); font-size: 14px; }

.rows { display: flex; flex-direction: column; gap: 10px; }
.line { display: flex; gap: 10px; align-items: flex-end; }
.line.wrap { flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px dashed var(--rule-soft); }
.line.wrap .field.grow { flex-basis: 100%; }
.line.wrap .field.short { flex: 1 1 120px; }
.remove {
  flex: 0 0 auto; width: 38px; height: 40px;
  border: 1px solid transparent; border-radius: 3px; background: none;
  color: var(--muted); font: inherit; font-size: 22px; line-height: 1; cursor: pointer;
}
.remove:hover { color: var(--danger); border-color: var(--rule); }
.add {
  margin-top: 12px;
  padding: 6px 0; border: 0; background: none;
  color: var(--leather); font: inherit; font-weight: 600; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rule);
}
.add:hover { text-decoration-color: currentColor; }
.rows:empty + .add { margin-top: 0; }

/* Das Umschlagfoto in Schritt 1 (docs/umschlagbild-plan.md, Schritt 6). Alles unter .foto, damit nichts woanders greift. */
.foto { border: 0; padding: 0; margin: 14px 0 0; min-width: 0; }
.foto legend { font-size: 14px; font-weight: 600; padding: 0; margin-bottom: 4px; }
.foto .foto-zeile { display: flex; gap: 14px; align-items: flex-start; }
.foto .foto-bild { flex: none; width: 72px; height: 96px; object-fit: cover; border: 1px solid var(--rule); border-radius: 3px; }
.foto .foto-zeile .add { margin: 0 14px 0 0; }
.foto .foto-zeile .hint { display: block; margin-top: 4px; }
.foto .foto-ausschnitt { margin-top: 10px; }
.foto .foto-ausschnitt input { width: 100%; accent-color: var(--leather); }
.foto #foto-anmeldung .signin { margin-top: 8px; }

.check { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; cursor: pointer; }
.check input { margin: 6px 0 0; width: 16px; height: 16px; accent-color: var(--leather); }
.radios { border: 0; padding: 0; margin: 12px 0 0; }
.radios legend { font-size: 14px; font-weight: 600; padding: 0; margin-bottom: 4px; }
.radios label { display: flex; gap: 10px; align-items: center; padding: 4px 0; cursor: pointer; }
.radios input { width: 16px; height: 16px; margin: 0; accent-color: var(--leather); }
.scale-inputs { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.scale-title { font-size: 14px; font-weight: 600; }
.scale-inputs label { display: flex; align-items: center; gap: 10px; }
.scale-inputs label span { width: 1ch; font-weight: 600; font-variant-numeric: tabular-nums; }
.scale-inputs input { flex: 1; }
.scale-inputs .clear-fields { align-self: flex-start; margin-top: 4px; }
#tracker-details { margin-top: 10px; }
[hidden] { display: none !important; }
.ctx-inputs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 4px 0 8px 26px; }
.ctx-inputs input { min-width: 0; }
.ctx-inputs.meals { grid-template-columns: repeat(2, 1fr); }
.ctx-inputs .hint { grid-column: 1 / -1; }
.book-nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 10px; font-size: 15px; color: var(--muted); }
.book-nav button { width: 38px; height: 38px; border: 1px solid var(--rule); border-radius: 50%; background: var(--paper); color: var(--ink); font: inherit; font-size: 22px; line-height: 1; cursor: pointer; }
.book-nav button:hover:not([disabled]) { border-color: var(--leather); color: var(--leather); }
.book-nav button[disabled] { opacity: 0.35; cursor: default; }
.book-nav span { min-width: 15ch; text-align: center; font-variant-numeric: tabular-nums; }
.preview-warning { margin: 8px 0 0; padding: 10px 12px; border-left: 3px solid var(--danger); background: rgba(160, 50, 40, 0.07); font-size: 14px; line-height: 1.45; color: var(--ink); }
.formats { margin-top: 0; }
.formats label { align-items: flex-start; padding: 8px 0; }
.formats input { margin-top: 4px; flex: none; }
.status .howto { color: var(--ink, inherit); }
/* Nach dem fertigen PDF: warum der Knopf jetzt aus ist. */
.status .again { font-size: 14px; }
/* Ein Knopf steht für sich; werden es zwei, sind sie eine Frage mit zwei Antworten und gehören nebeneinander,
   die Frage darüber. Darum Zeilenumbruch statt Spalte. */
.horse-actions { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 24px; }
.horse-actions #save-question { flex-basis: 100%; margin: 12px 0 0; }
.status .save-here { display: block; }
.status .save-here .add + .add { margin-left: 18px; }
.status .save-here .add { margin-top: 6px; }
.status .save-here .err { color: var(--danger); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.submit { padding-top: 28px; border-top: 1px solid var(--rule); display: flex; flex-direction: column; gap: 12px; }
.primary {
  align-self: flex-start;
  padding: 12px 22px;
  border: 0; border-radius: 3px;
  background: var(--leather); color: #fff;
  font: inherit; font-size: 18px; font-weight: 600; cursor: pointer;
}
.primary:hover { background: var(--leather-deep); }
.primary[disabled] { opacity: 0.6; cursor: progress; }
/* Inaktiv, weil die Adresse noch fehlt – nicht, weil etwas läuft: dann ist «warten» der falsche Zeiger. */
.primary.wait-signin[disabled] { cursor: default; }

/* Anmelden in Schritt 8 (docs/website/konzept.md, W5) */
.signin { display: flex; flex-direction: column; margin: 0 0 18px; max-width: 48ch; }
.signin .add { align-self: flex-start; }
.signin .status { margin-top: 10px; min-height: 0; }
.signin button[disabled] { opacity: 0.55; cursor: default; text-decoration: none; }
.signin-code { display: flex; flex-direction: column; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rule-soft); }
.status { font-size: 15px; color: var(--muted); min-height: 1.5em; }
.status.ok { color: var(--ok); }
.status.err { color: var(--danger); }
.status ul { margin: 6px 0 0; padding-left: 18px; }

/* Vorschau */
.preview { position: sticky; top: 24px; align-self: start; min-width: 0; }
.spreads { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-bottom: 14px; }
.spreads button {
  padding: 4px 0; border: 0; background: none;
  font: inherit; font-size: 16px; color: var(--muted); cursor: pointer;
  border-bottom: 2px solid transparent;
}
.spreads button:hover { color: var(--ink); }
.spreads button.on { color: var(--ink); border-bottom-color: var(--leather); }
.desk { position: relative; width: 100%; }
.stage { position: relative; overflow: hidden; }
.stage iframe {
  display: block; border: 0; background: transparent;
  width: 1180px; height: 830px;             /* 2 × 154 mm × 216 mm bei 96 dpi, plus Rand für den Schatten */
  transform-origin: 0 0;
  transition: opacity 0.25s ease;
}
.stage.loading iframe { opacity: 0.35; }
.caption { margin-top: 12px; font-size: 14px; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .stage iframe { transition: none; }
}

/* Schmal: Vorschau oben, Formular darunter */
@media (max-width: 960px) {
  .top { padding: 20px 20px 0; gap: 12px; }
  .shop { grid-template-columns: 1fr; gap: 32px; padding: 20px 20px 64px; }
  .preview { position: static; order: -1; }
  .row { flex-wrap: wrap; }
  .field.year { flex-basis: 110px; }
}

/* Konto: Kopfzeile */
.account { display: inline-flex; gap: 16px; align-items: center; font-size: 16px; color: var(--muted); }
.account .credits { white-space: nowrap; }
.account a, .account button { color: var(--leather); font: inherit; font-weight: 600; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rule); }
.account a:hover, .account button:hover { text-decoration-color: currentColor; }

/* «Dein Konto» (/konto): gespeicherte Pferde und erstellte Logbücher. Die Listen standen bis zum 21.09.2026
   im Bestellformular (oben «Deine Pferde», unten «Deine Bestellungen» – beide INNERHALB von <form id="order">)
   und sind mit der Seite /konto dorthin gezogen, wo sie hingehören: Der Konfigurator erzeugt, /konto verwaltet. */
/* Dieselbe Schachtel wie Kopf und Fuss (1440 px, 40 px Gosse), damit die Liste an der Marke ausgerichtet
   steht statt in der Fenstermitte zu schweben. Die Zeilen bekommen ihre eigene Breite – über die ganze
   Fensterbreite läge der Name links und die Knöpfe einen halben Meter weiter rechts. */
.mein-konto { padding: 32px 40px 80px; max-width: 1440px; margin: 0 auto; }
.mein-konto .group { max-width: 900px; }
.mein-konto > .status { margin-bottom: 4px; }
.mein-konto .group:first-of-type { border-top: 0; }
/* «Dein Guthaben»: der Stand gross, darunter die Preise und der Weg zum Kaufen. .cta ist sonst ein Link – als
   Knopf braucht er Rahmen, Schrift und Zeiger von hier. */
.mein-konto .guthaben .stand { font-size: 32px; font-weight: 300; margin: 0 0 2px; }
.mein-konto .guthaben .actions { margin-top: 12px; }
.mein-konto .guthaben button.cta { border: 0; cursor: pointer; font-family: inherit; line-height: inherit; }
.mein-konto .guthaben #kaufen-lage { margin-top: 12px; max-width: 48ch; }
.horse-list, .order-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.horse-list li, .order-list li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--rule-soft); }
.horse-list li.on { font-weight: 600; }
.horse-list .name, .order-list .name { flex: 1 1 auto; text-align: left; background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.horse-list .name:hover { color: var(--leather); }
/* Der Titel in «Dein Konto» öffnet die Ansicht des Logbuchs (/logbuch) – ein Link, der wie der Name aussieht */
.order-list a.name { text-decoration: none; }
.order-list a.name:hover { color: var(--leather); text-decoration: underline; text-underline-offset: 3px; }
/* Die Ansicht eines Logbuchs: «Blick ins Buch» mit den eigenen Angaben */
.start .ansehen .zurueck { margin: 0 0 8px; font-size: 15px; }
.start .ansehen .zurueck a { color: var(--muted); }
.horse-list .when, .order-list .when { font-size: 14px; color: var(--muted); white-space: nowrap; }
.horse-list a, .order-list a { color: var(--leather); }
/* «Neues Logbuch» ist ein Link, kein Knopf – .add gibt ihm dasselbe Aussehen, ohne den Abstand von oben. */
.horse-list .add, .order-list .add { margin-top: 0; text-decoration: underline; }
/* Die Datei zeigt eine vorige Fassung: kein Fehler, aber etwas, das man sehen soll, bevor man sie lädt. */
.order-list .when.veraltet { color: var(--leather-deep); font-weight: 600; }
/* Aus dem × wird beim ersten Klick die Frage; sie braucht Platz und soll nach Gefahr aussehen. */
.remove.fragt { width: auto; padding: 0 8px; font-size: 15px; font-weight: 600; color: var(--danger); border-color: var(--rule); }

@media (max-width: 760px) {
  .mein-konto { padding: 20px 20px 64px; }
  .horse-list li, .order-list li { flex-wrap: wrap; }
}

/* Konto-Seiten: Anmelden, Registrieren, Passwort */
.konto { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 420px)); gap: 32px 48px; padding: 32px 40px 80px; max-width: 1440px; margin: 0 auto; }
.card { display: flex; flex-direction: column; gap: 14px; padding-top: 12px; border-top: 1px solid var(--rule); }
.card h2 { margin: 0; }
.card .primary, .card .secondary { align-self: flex-start; }
.card.quiet { color: var(--muted); }
.secondary {
  padding: 10px 0; border: 0; background: none;
  color: var(--leather); font: inherit; font-weight: 600; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rule);
}
.secondary:hover { text-decoration-color: currentColor; }
input[type="email"], input[type="password"] {
  font: inherit; color: inherit; padding: 8px 10px;
  border: 1px solid var(--rule); border-radius: 3px; background: var(--paper); min-width: 0; width: 100%;
}
input[type="email"]:focus, input[type="password"]:focus { outline: 2px solid var(--focus); outline-offset: 0; border-color: var(--focus); }

@media (max-width: 960px) {
  .konto { padding: 20px 20px 64px; }
}

/* Beta-Zugang (beta.html): nur Marke und Passwortfeld, schmal und mittig. Solange logbook.beta.passwort
   gesetzt ist, sieht jede neue Besucherin zuerst diese Seite. */
.zugang { display: flex; flex-direction: column; gap: 40px; max-width: 460px; margin: 0 auto; padding: 72px 20px 0; }
.zugang h1 { margin: 0; font-size: 30px; font-weight: 300; line-height: 1.15; }
.zugang .hint { color: var(--muted); font-size: 15px; }
.zugang + .site-foot { max-width: 460px; padding-inline: 20px; }


/* ---------------------------------------------------------------------------
   Rahmen der Website: Marke oben, Pflichtseiten unten, Satzmass für Textseiten.
   In jeder Seite steht er als Kopie zwischen «frame:kopf» und «frame:fuss»;
   SiteFrameTest hält die Kopien Zeichen für Zeichen gleich. Ohne Build-Schritt
   ist das die ehrlichere Lösung als ein Skript, das den Kopf nachträglich
   einsetzt – dieselbe Linie wie presets.js und LogbookOrder.PRESETS.
   --------------------------------------------------------------------------- */

:root {
  --brand: #2f5a3e;      /* Grün der Marke (Logo). Die eine Aktion bleibt --leather */
}

/* Marke: Zeichen und Wortmarke. Das Zeichen ist eine eigene Datei, die Wortmarke
   echter Text – die Schrift des Logos (Figtree) käme sonst von einem fremden
   Server, und das verbietet die CSP (font-src 'self'). */
.wordmark {
  display: inline-flex; align-items: center; gap: 12px;
  color: var(--ink); text-decoration: none;
  font-size: 28px; font-weight: 600; letter-spacing: -0.005em; line-height: 1;
}
.wordmark img { display: block; width: 34px; height: 34px; }
.wordmark:hover { color: var(--brand); }
/* «beta» hinter der Marke: klein, aber lesbar – eine Ansage, kein Kleingedrucktes. Im Grün der Marke und
   oben angesetzt wie ein hochgestellter Zusatz; das negative margin nimmt den Abstand zurück, der im
   .wordmark für das Zeichen gedacht ist. Eigene Grösse statt em, damit es im kleinen Kopf lesbar bleibt. */
.wordmark .beta {
  align-self: flex-start; margin-left: -6px; padding-top: 2px;
  color: var(--brand); font-size: 14px; font-weight: 600; letter-spacing: 0.06em;
}

/* Wege im Kopf. Auf dem Konfigurator steht daneben noch der Konto-Bereich, darum wird er nach rechts
   geschoben statt fest positioniert – so bleibt die Reihenfolge auf allen Seiten dieselbe. */
.site-nav { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 16px; }
.site-nav a { color: var(--muted); text-decoration: none; }
.site-nav a:hover { color: var(--ink); text-decoration: underline; }

/* Fuss: auf jeder Seite, mit den Pflichtseiten und dem, was uns unterscheidet */
.site-foot {
  border-top: 1px solid var(--rule);
  margin-top: 64px; padding: 24px 40px 40px;
  max-width: 1440px; margin-inline: auto;
  display: flex; flex-wrap: wrap; gap: 8px 28px; align-items: baseline;
  color: var(--muted); font-size: 15px;
}
.site-foot nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.site-foot a { color: var(--muted); }
.site-foot a:hover { color: var(--ink); }
.site-foot .claim { margin-left: auto; }
.site-foot #app-version { white-space: nowrap; }

/* Textseiten: eine Spalte, Satzmass wie ein Buch, nicht wie ein Formular.
   Der Rahmen ist derselbe wie beim Konfigurator (1440, 40 Rand), damit der Text an derselben Kante beginnt
   wie die Marke darüber – zentriert stünde er sonst als zweite linke Kante daneben. */
.page {
  max-width: 1440px; margin-inline: auto; padding: 8px 40px 24px;
}
.page > * { max-width: 72ch; }
.page h1 { font-size: 34px; font-weight: 600; line-height: 1.15; margin: 24px 0 8px; }
.page h2 { font-size: 21px; font-weight: 600; margin: 32px 0 6px; }
.page p, .page li { font-size: 17px; line-height: 1.6; color: var(--ink); }
/* p { margin: 0 } gilt global fürs Formular; im Fliesstext braucht es wieder Luft dazwischen */
.page p { margin: 0 0 12px; }
.page ul { margin: 0 0 12px; }
.page ul { padding-left: 20px; }
.page li { margin: 4px 0; }
.page .lead { font-size: 19px; color: var(--muted); margin-bottom: 4px; }
.page dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 20px; font-size: 17px; margin: 8px 0; }
.page dt { color: var(--muted); }
.page dd { margin: 0; }
.page .offen { color: var(--danger); }      /* noch einzutragen – fällt beim Lesen auf */

@media (max-width: 960px) {
  .site-foot { padding: 20px 20px 32px; }
  .site-foot .claim { margin-left: 0; }
  .page { padding: 8px 20px 24px; }
  .wordmark { font-size: 24px; }
  .wordmark img { width: 30px; height: 30px; }
}


/* ---------------------------------------------------------------------------
   Startseite und «Blick ins Buch». Beide zeigen das echte Buch im iframe –
   buch.js verkleinert es auf die Spaltenbreite.
   --------------------------------------------------------------------------- */

.start { max-width: 1440px; margin-inline: auto; padding: 8px 40px 24px; }
.start section { padding: 64px 0; border-top: 1px solid var(--rule-soft); }
.start section:first-child { border-top: 0; padding-top: 16px; }
.start h1 { font-size: 44px; font-weight: 300; line-height: 1.08; margin: 0 0 16px; letter-spacing: -0.01em; }
.start h2 { font-size: 26px; font-weight: 600; margin: 0 0 10px; }
.start p, .start li { font-size: 17px; line-height: 1.6; }
.start section > p { max-width: 68ch; margin: 0 0 12px; }
.start .lead { color: var(--muted); font-size: 19px; }

/* Oben: Text links, der Umschlag daneben – er trägt den Namen und macht in einem Bild klar, worum es geht.
   Die Breite ist gedeckelt: Über die ganzen 1440 gezogen stünden Text und Buch zu weit auseinander. */
.hero { display: grid; grid-template-columns: minmax(320px, 1fr) minmax(280px, 380px); gap: 64px;
        align-items: center; max-width: 1080px; }
.hero-lead { font-size: 19px; color: var(--ink); max-width: 54ch; margin: 0 0 14px; }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 24px; }
.cta {
  display: inline-block; padding: 13px 26px; border-radius: 3px;
  background: var(--leather); color: #fff; text-decoration: none;
  font-size: 18px; font-weight: 600;
}
.cta:hover { background: var(--leather-deep); }
.beiseite { color: var(--muted); }
.schluss { padding: 64px 0 8px; border-top: 1px solid var(--rule-soft); }

/* Hier standen einmal Abschnitte mit «Papierton dahinter». Sie waren wirkungslos und schädlich zugleich:
   Der Ton war derselbe wie der Seitenhintergrund (html), also unsichtbar – und der negative Aussenabstand
   zog ihren Text 40 px nach links, weil der ausgleichende Innenabstand von der spezifischeren Regel
   «.start section» überschrieben wurde. Übrig blieb eine krumme linke Kante. Getrennt werden die Abschnitte
   von der Linie oben, das genügt. Wer wirklich Bänder will, braucht einen Ton, der sich vom Hintergrund
   unterscheidet – und dann gehört der Ausgleich in dieselbe Regel wie der Aussenabstand. */

.zwei { columns: 2; column-gap: 48px; padding-left: 20px; margin: 0; }
.zwei li { break-inside: avoid; margin: 0 0 12px; }

/* Blättern */
.book-nav { display: flex; align-items: center; gap: 10px; margin: 16px 0; color: var(--muted); font-size: 15px; }
.book-nav button {
  min-width: 38px; padding: 6px 10px; border: 1px solid var(--rule); border-radius: 3px;
  background: var(--paper); color: var(--ink); font: inherit; font-size: 18px; cursor: pointer;
}
.book-nav button:disabled { opacity: 0.4; cursor: default; }
.buch .stage { background: var(--ground); }
/* Die Bühnen der Startseite schneiden genau auf die Seite zu (buch.js misst sie aus). Der Schatten hebt das
   Papier von der Fläche ab – ohne ihn steht ein weisses Rechteck auf hellem Grund und wirkt wie ein Loch. */
.start .stage iframe { position: absolute; top: 0; left: 0; }
.start .stage { margin-inline: auto; }
.start .stage { box-shadow: 0 1px 2px rgba(31, 29, 26, 0.10), 0 10px 30px rgba(31, 29, 26, 0.10); }

/* Durchsichtiger Verweis über dem Umschlag: Wer auf das Buch klickt, will hineinschauen. Die Beschriftung
   ist für Vorleseprogramme da und wird erst beim Überfahren sichtbar – das Bild spricht für sich. */
.stage-deckel { position: absolute; inset: 0; z-index: 1; display: flex; align-items: flex-end; justify-content: center; }
.stage-deckel span {
  margin-bottom: 18px; padding: 7px 14px; border-radius: 3px;
  background: var(--ink); color: var(--ground); font-size: 15px;
  opacity: 0; transition: opacity 0.15s ease;
}
.stage-deckel:hover span, .stage-deckel:focus-visible span { opacity: 0.92; }
@media (prefers-reduced-motion: reduce) { .stage-deckel span { transition: none; } }

@media (max-width: 960px) {
  .start { padding: 8px 20px 24px; }
  .hero { grid-template-columns: 1fr; gap: 28px; }
  .hero .stage { order: -1; }
  .start h1 { font-size: 34px; }
  .zwei { columns: 1; }
}