/* 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); }
/* Doppeltippen zoomt nicht mehr (23.09.2026). Wer auf dem Handy zügig blättert, tippt zweimal schnell auf denselben
   Knopf – und bekam dafür vom Browser nicht den zweiten Klick, sondern Zoom, aus dem man kaum wieder herausfindet.
   «manipulation» heisst «alles ausser Doppeltipp»: Scrollen und Kneifen (Zoom mit zwei Fingern) bleiben, und damit
   bleibt der Zoom für alle, die ihn brauchen – anders als bei user-scalable=no, das Safari auf dem iPhone ohnehin
   seit iOS 10 ignoriert. Zweiter Gewinn: Der Browser wartet keine 300 ms mehr ab, ob ein zweiter Tipp kommt.
   Das Buch liegt in einem eigenen Dokument im iframe und erbt das hier nicht – dieselbe Regel steht in logbook.css. */
a, button, summary, label, input, select, textarea, .stage { touch-action: manipulation; }
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; }
/* Ein Hinweis, der eine Absage ankündigt: Der Zeitraum ist vorbei, der Server nähme die Bestellung nicht an
   (LogbookOrder.isZeitraumNichtVorbei). Darum die Farbe der Fehler, nicht das Grau der Nebensache. */
small.hint.warnung { color: var(--danger); }

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

/* Kopf: ein Band im Grün der Marke über die ganze Fensterbreite (seit 22.09.2026, vorher stand er auf dem Leinen
   der Seite). Das Band ist .top, der Inhalt darin hält dasselbe Mass wie die Seite darunter (1440, 40 Rand), damit
   die Marke an derselben Kante beginnt wie der Text (LandingPageTest). Farben dazu im Abschnitt «Rahmen». */
.top { background: var(--brand); color: var(--kopf-text); }
/* Marke und Menü auf einer Zeile.
   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 {
  --kopf-rand: 40px; --kopf-oben: 18px;      /* das Menü auf dem Handy reicht damit bis an den Rand des Bands */
  display: flex; align-items: center; gap: 32px; flex-wrap: wrap;
  max-width: 1440px; margin: 0 auto; padding: var(--kopf-oben) var(--kopf-rand);
}
.wordmark { font-size: 44px; font-weight: 300; letter-spacing: 0.01em; line-height: 1; text-decoration: none; }

/* 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 auto; gap: 4px 16px; margin: 0 0 18px; font-size: 15px; }
/* «Überprüfen»: hinter jeder Angabe der Weg zurück in ihren Schritt */
.summary .aendern { align-self: start; padding: 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); }
.summary .aendern:hover { text-decoration-color: currentColor; }
/* 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/product/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; }
/* Die Vorlagen über Schritt 1 (25.09.2026, docs/product/vorlagen-plan.md): Kacheln mit Namen und einer Zeile Inhalt.
   Das Radio bleibt da (Tastatur, Vorleseprogramme), gezeichnet wird die Kachel; die gewählte hat den Rand im Leder der
   einen Aktion. So viele nebeneinander, wie Platz haben – auf dem Handy zwei, am Bildschirm alle fünf. */
.vorlagen { border: 0; padding: 0; margin: 0 0 18px; }
.vorlagen legend { font-size: 14px; font-weight: 600; padding: 0; margin-bottom: 8px; }
.vorlagen-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.vorlage { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 9px 10px 10px; cursor: pointer;
  background: var(--paper); border: 1px solid var(--rule); border-radius: 8px; }
.vorlage:hover { border-color: var(--muted); }
.vorlage input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.vorlage:has(input:checked) { border-color: var(--leather); box-shadow: inset 0 0 0 1px var(--leather); }
.vorlage-frage { margin-top: 12px; padding: 10px 14px; border-left: 3px solid var(--leather); background: color-mix(in srgb, var(--leather) 8%, transparent); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.vorlage-frage p { margin: 0; flex-basis: 100%; }
.vorlage-frage .next { margin-top: 0; }
.vorlage:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.vorlage-name { font-weight: 600; font-size: 15px; }
.vorlage .hint { font-size: 13px; line-height: 1.35; margin: 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; }
/* Die runden Knöpfe des Konfigurators. Weiter unten steht .book-nav noch einmal, für «Blick ins Buch» und die Ansicht
   eines Logbuchs (eckig, Innenabstand, font: inherit) – und weil jene Regel später kommt, gewann sie auch hier: Die
   Knöpfe wurden eckig, und ihre Zeilenhöhe 1.5 schob die Pfeile nach unten (gemeldet am 24.09.2026). Darum hier
   ausdrücklich alles, was dort anders ist. Die Pfeile stehen auf halber x-Höhe, etwas tiefer als die Mitte der
   Schrift – 2 px Innenabstand unten heben sie in die Mitte des Kreises. */
aside.preview .book-nav button { display: inline-flex; align-items: center; justify-content: center; min-width: 0; padding: 0 0 2px; border-radius: 50%; line-height: 1; font-size: 22px; }
.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); }
.preview-warning.mit-zu { display: flex; gap: 8px; align-items: flex-start; }
.warnung-zu { flex: none; margin: -5px -6px -5px auto; width: 30px; height: 30px; padding: 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: 22px; line-height: 1; cursor: pointer; }
.warnung-zu:hover { color: var(--ink); }
.formats { margin-top: 0; }
/* Das Papier (A4 | US Letter) nebeneinander: zwei kurze Wörter, die zusammen eine Wahl sind */
.radios.papier { display: flex; flex-wrap: wrap; column-gap: 28px; }
.formats label { align-items: flex-start; padding: 8px 0; }
.formats input { margin-top: 4px; flex: none; }
/* «Für die Druckerei» in der Beta: sichtbar, aber gesperrt, mit der Ankündigung daneben */
.formats label.bald { cursor: default; color: var(--muted); }
.formats label.bald:has(input:not(:disabled)) { cursor: pointer; color: inherit; }   /* ein Logbuch, das es schon hat */
.formats label.nur-vierteljahr:has(input:disabled) { cursor: default; color: var(--muted); }   /* beim ganzen Jahr */
.bald-marke { margin-left: 6px; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: var(--brand); white-space: nowrap; }
.format-preis { font-size: 15px; color: var(--muted); margin: -6px 0 6px; max-width: 48ch; }   /* wie .credits-note in Schritt 8 */
.format-preis a { color: inherit; }
.laengenpreis { color: var(--muted); white-space: nowrap; }
.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 .geschenk { margin: 0 0 14px; }
.signin .status { margin-top: 10px; min-height: 0; }
.signin button[disabled] { opacity: 0.55; cursor: default; text-decoration: none; }
/* «Mit der Anmeldung akzeptierst du unsere AGB …» – im Konfigurator und auf der Anmeldeseite (seit 24.09.2026). Klein
   und grau: ein Hinweis, kein Schritt; die Links unterstrichen, damit man sie findet. */
.zustimmung { font-size: 14px; color: var(--muted); line-height: 1.4; margin: 10px 0 0; }
.zustimmung a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* Das Häkchen vor dem Erzeugen (konto.js, verzichtZeile; seit 24.09.2026): im Konfigurator unter dem Preis, in «Dein
   Konto» in der Zeile des Logbuchs unter ihren Knöpfen. Rot umrandet, wenn es beim Klick fehlt – wie beim Kaufen. */
.check.verzicht { font-size: 15px; max-width: 60ch; }
.check.verzicht a { color: var(--leather-deep); }
.check.verzicht.fehlt { outline: 2px solid var(--danger); outline-offset: 4px; border-radius: 2px; }
#verzicht { margin: 4px 0 10px; }
.order-list li:has(.verzichtwahl) { flex-wrap: wrap; }
.verzichtwahl { flex-basis: 100%; order: 99; margin: 10px 0 4px; padding: 12px 14px; background: var(--paper);
  border: 1px solid var(--rule); border-radius: 4px; }
.verzichtwahl .verzichtwahl-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 8px 0 0; }
.verzichtwahl .status:empty { display: 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) {
  .kopfzeile { --kopf-rand: 20px; --kopf-oben: 14px; row-gap: 12px; }   /* umgebrochen stünde das Menü sonst 32 px unter der Marke */
  /* Ohne Skript gibt es kein Menü zum Aufklappen: Die Wege stehen dann in einer eigenen Zeile unter Marke und Sprache */
  html:not(.mit-menue) .kopfzeile > .site-nav { order: 10; flex-basis: 100%; }
  .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; }
}

/* Unter den Schritten «Zurück» und «Weiter». «Zurück» nur auf dem Handy: Auf breiten Bildschirmen stehen alle Titel
   untereinander, dort ist der Weg zurück ein Klick auf den Titel darüber. */
.step-nav { display: flex; gap: 12px; margin-top: 18px; }
.step-nav .next { margin-top: 0; }
.back { display: none; padding: 8px 18px; border: 1px solid var(--rule); border-radius: 3px; background: none; color: var(--muted); font: inherit; font-weight: 600; cursor: pointer; }
.back:hover { border-color: var(--muted); color: var(--ink); }
.schrittleiste, .vorschau-gross, .vorschau-zu { display: none; }

/* Handy hochkant (24.09.2026, docs/website/konfigurator-handy.md): Die Vorschau klebt oben, darunter steht nur der
   offene Schritt. Die Klasse setzt konfigurator.js (schrittweiseSetzen) und nicht eine Media-Query: Öffnet sich die
   Tastatur, darf sich der Modus nicht umschalten – in einer Media-Query auf die Höhe täte er das.
   Flex statt Grid: Ein Grid-Element klebt nur innerhalb seiner Zelle, und in einer Spalte ist die Zelle der Vorschau
   genau so hoch wie sie selbst – sie scrollte weg wie bisher. */
html.schrittweise { scroll-padding-top: calc(var(--vorschau-hoehe, 0px) + 12px); }   /* Sprung zu einem Schritt, Fokus: unter die Vorschau */
.schrittweise .shop { display: flex; flex-direction: column; gap: 20px; }
.schrittweise .preview {
  order: -1; position: sticky; top: 0; z-index: 5;
  align-self: stretch;       /* auf dem Desktop «start»: hier wäre sie sonst nur so breit (und gross so hoch) wie ihr Inhalt */
  margin: 0 -20px; padding: 14px 20px 10px;           /* das Leinen reicht bis an die Ränder, sonst schiene das Formular durch; oben Luft für das Zeichen «vergrössern» */
  background: var(--ground); border-bottom: 1px solid var(--rule);
}
.schrittweise .preview .spreads, .schrittweise .preview .caption { display: none; }   /* die Vorschau folgt dem Schritt */
.schrittweise .preview-warning { font-size: 13px; padding: 6px 10px; }
.schrittweise .stage { margin: 0 auto; }
.schrittweise .vorschau-gross {
  display: block; position: absolute; inset: 0; width: 100%;
  padding: 0; border: 0; background: none; color: var(--muted); cursor: zoom-in;
}
.schrittweise .vorschau-gross svg {
  position: absolute; left: calc(var(--ecke-x, 100%) - 22px); top: calc(var(--ecke-y, 0px) - 8px);   /* oben rechts an der Seite (eckeSetzen) */
  padding: 5px; box-sizing: content-box; border-radius: 50%; background: var(--paper); box-shadow: 0 1px 3px rgba(43, 36, 32, 0.25);
}
.schrittweise .book-nav { margin-top: 6px; gap: 12px; font-size: 14px; }
.schrittweise aside.preview .book-nav button { width: 34px; height: 34px; font-size: 20px; }
.schrittweise .schrittleiste {
  display: grid; grid-template-columns: repeat(10, minmax(0, 34px)); justify-content: center; gap: 5px; margin-top: 8px;   /* zehn Schritte: auf 320 px rund 24 px je Nummer */
}
.schrittleiste button {
  width: 100%; aspect-ratio: 1; padding: 0; border: 1px solid var(--rule); border-radius: 50%;
  background: var(--paper); color: var(--muted); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.schrittleiste button[aria-current] { background: var(--leather); border-color: var(--leather); color: #fff; }
.schrittleiste button.has-error { border-color: var(--danger); color: var(--danger); }
.schrittleiste button.has-error[aria-current] { background: var(--danger); color: #fff; }
.schrittweise .step:not([open]) { display: none; }
/* Die Vorlagen stehen über Schritt 1 und gehören zu ihm: auf dem Handy nur, solange er offen ist – sonst stünden sie
   über jedem Schritt (docs/product/vorlagen-plan.md) */
html.schrittweise:not(:has(.step[data-step="pferd"][open])) .vorlagen { display: none; }
.schrittweise .steps { border-bottom: 0; }
.schrittweise .step { border-top: 0; }
.schrittweise .step > summary { cursor: default; padding-top: 4px; }
.schrittweise .step > summary:hover .step-title { text-decoration: none; }
.schrittweise .back { display: inline-block; }
.schrittweise .step-nav .next { margin-left: auto; }    /* «Weiter» immer rechts, auch in Schritt 1 ohne «Zurück» */

/* Gross: ein Tipp auf die Vorschau legt das ganze Buch über die Seite, zum Blättern. Dieselben Elemente, nur anders
   gestellt – das iframe zieht nicht um, sonst lüde es neu. */
.schrittweise .preview.gross {
  position: fixed; inset: 0; z-index: 50; margin: 0; padding: 12px 16px 14px;
  display: flex; flex-direction: column; border: 0;
}
.preview.gross .spreads { display: flex; flex-wrap: nowrap; overflow-x: auto; margin: 0 40px 8px 0; padding-bottom: 2px; }
.preview.gross .spreads button { flex: none; }
.preview.gross .desk { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; justify-content: center; }
.preview.gross .vorschau-gross, .preview.gross .schrittleiste { display: none; }
.preview.gross .caption { display: block; margin-top: 8px; }
.preview.gross .vorschau-zu {
  display: block; position: absolute; top: 6px; right: 8px; width: 40px; height: 40px;
  border: 0; background: none; color: var(--ink); font: inherit; font-size: 30px; line-height: 1; cursor: pointer;
}
html.vorschau-offen, html.vorschau-offen body { overflow: hidden; }

/* Konto: Kopfzeile. Hell auf dem grünen Band – das Leder der einen Aktion hätte darauf keinen Kontrast. */
.account { display: inline-flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; font-size: 16px; color: var(--kopf-leise); }
/* Umgebrochen wird zwischen den Einträgen, nicht in ihnen – «Dein Konto» stand auf dem Handy sonst auf zwei Zeilen */
.account .credits, .account a, .account button { white-space: nowrap; }
.account a, .account button { color: var(--kopf-text); font: inherit; font-weight: 600; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--kopf-linie); }
.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; }
/* Reiter «Deine Logbücher | Dein Guthaben» (mein-konto.js, docs/website/konto-plan.md). Es sind Links, keine
   Knöpfe: Der Anker wählt den Reiter, damit /konto#guthaben eine Adresse bleibt. Der gewählte trägt aria-current
   – wie die Sprachwahl im Kopf, und bewusst nicht "page", das gehört dem Weg zur offenen Seite.
   Dieselben Reiter im Admin-Panel (seit 24.09.2026, «Kennzahlen | Konten | Teaser»): ein Aussehen an einer Stelle;
   was dort anders ist, steht in log-book-admin-panel.css. */
.mein-konto .tabs, .admin .tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--rule); margin: 0 0 24px; max-width: 900px; }
.mein-konto .tabs a, .admin .tabs a {
  color: var(--muted); text-decoration: none; font-size: 19px; padding: 6px 2px 10px;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.mein-konto .tabs a:hover, .admin .tabs a:hover { color: var(--ink); }
.mein-konto .tabs a[aria-current], .admin .tabs a[aria-current] { color: var(--ink); border-bottom-color: var(--leather); }
/* Wo Reiter stehen, trägt der Reiter die Überschrift – der h2 darunter wäre dasselbe Wort zweimal. Und die Linie
   zeichnet die Reiterleiste: Die Trennlinie der Abschnitte wäre einen Pixel darunter eine zweite. Ohne Guthaben
   gibt es keine Reiter, dann steht alles wie bisher. */
.mein-konto .tabs:not([hidden]) ~ .group > h2 { display: none; }
.mein-konto .tabs:not([hidden]) ~ .group { border-top: 0; padding-top: 4px; }

/* Kacheln oder Liste (mein-konto.js, docs/website/konto-plan.md, Schritt 3) */
.ansichtswahl { display: flex; gap: 4px; margin: 0 0 16px; }
.ansichtswahl button {
  font: inherit; font-size: 15px; color: var(--muted); background: none; cursor: pointer;
  border: 1px solid transparent; border-radius: 999px; padding: 3px 12px;
}
.ansichtswahl button:hover { color: var(--ink); }
.ansichtswahl button[aria-current] { color: var(--ink); border-color: var(--rule); background: var(--paper); }
/* «Nach Pferd» ist kein dritter Reiter, sondern ein Schalter neben ihnen – darum abgesetzt und mit aria-pressed */
.ansichtswahl .gruppieren { margin-left: 12px; }
.ansichtswahl .gruppieren[aria-pressed="true"] { color: var(--ink); border-color: var(--rule); background: var(--paper); }

/* Nach Pferd gruppiert: eine Überschrift je Pferd, darunter seine Logbücher (konto-plan.md, Schritt 2).
   Die äussere Liste ist dann KEIN Raster mehr – das ist die innere je Gruppe. Beide Klassen im Selektor, sonst
   gewänne .order-list.kacheln weiter unten bei gleicher Spezifität, und die Gruppen stünden nebeneinander. */
.order-list.gruppen, .order-list.kacheln.gruppen { display: block; }
.order-list.gruppen > li.gruppe { display: block; border: 0; padding: 0; margin: 0 0 24px; }
.order-list.gruppen > li.gruppe > h3 {
  margin: 0 0 8px; font-size: 17px; font-weight: 600; color: var(--muted);
  border-bottom: 1px solid var(--rule); padding-bottom: 4px;
}

/* Die Kachelwand: so breit wie nötig, so viele je Reihe wie passen. Die Kachel selbst hat das Seitenverhältnis
   einer A5-Seite (148:210), damit der Umschlag aussieht wie das, was aus dem Drucker kommt. */
.order-list.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 28px 20px; }
.order-list.kacheln > li { display: block; border: 0; padding: 0; position: relative; }
.kachel .umschlag {
  display: block; position: relative; aspect-ratio: 148 / 210; background: #fff; color: var(--ink);
  border: 1px solid var(--rule); border-radius: 2px; text-decoration: none; overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}
.kachel .umschlag:hover { box-shadow: 0 2px 10px rgba(0, 0, 0, .16); }
/* Das Foto füllt die Kachel, das weisse Feld liegt darüber – wie auf dem Umschlag (logbook.css, .cover-bild) */
.kachel .bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Das weisse Feld mit dem Titel – wie im Buch, und wie dort verschiebt es data-titel (oben | mitte | unten) */
.kachel .feld {
  position: absolute; left: 12%; right: 12%; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center;
}
.kachel .umschlag.mit-bild .feld { background: #fff; padding: 8px 6px; }
.kachel .umschlag[data-titel="oben"] .feld { top: 22%; }
.kachel .umschlag[data-titel="unten"] .feld { top: 76%; }
.kachel .name { font-size: 15px; line-height: 1.1; overflow-wrap: anywhere; }
.kachel .wort { font-size: 7px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.kachel .jahr { font-size: 19px; font-weight: 300; }
.kachel .spanne { font-size: 7px; color: var(--muted); line-height: 1.2; }
/* Der Zustand: ein Zeichen oben auf dem Umschlag, nicht eine Knopfreihe darunter */
.kachel .zeichen {
  position: absolute; top: 0; left: 0; right: 0; padding: 3px 6px; font-size: 11px;
  background: var(--ground); color: var(--muted); border-bottom: 1px solid var(--rule);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Wartet es, sagt das Zeichen, wie viele davor stehen – das darf zwei Zeilen brauchen, abgeschnitten wäre die Zahl weg */
.kachel .zeichen.wartet { white-space: normal; }
/* Das fertige PDF: die eine Aktion, die niemand suchen soll. Ein Link neben dem Umschlag, nicht darin – ein Link
   im Link gibt HTML nicht her. */
.kachel .pdf {
  position: absolute; right: 6px; bottom: 34px; width: 28px; height: 28px; border-radius: 50%;
  background: var(--leather); color: #fff; text-decoration: none;
  display: flex; align-items: center; justify-content: center;
}
.kachel .pdf::before { content: "\2193"; font-size: 17px; line-height: 1; }
.kachel .pdf:hover { background: var(--leather-deep, #5a3d28); }
/* Solange das PDF entsteht: derselbe Pfeil, grau und kein Link (KontoSeiteTest). Beim Neuzeichnen nach dem Lauf wird er
   zum Link. */
.kachel .pdf.wartet, .kachel .pdf.wartet:hover { background: var(--rule); cursor: default; }
.kachel .unterschrift { display: block; margin-top: 8px; font-size: 14px; line-height: 1.3; overflow-wrap: anywhere; }
.order-list.kacheln { margin-bottom: 20px; }      /* sonst klebt der Hinweis unter der Wand */

/* Was man mit einem Logbuch tun kann – auf /logbuch, seit die Kachel dorthin führt (konto-plan.md, Schritt 3).
   Drei Dinge von verschiedenem Gewicht: das PDF als Knopf (dafür kommt man her), Bearbeiten als Weg, Löschen leise
   und zuletzt. Ohne eigene Regeln trugen sie die Stile der Liste, und «Bella löschen» brach im 38-px-Feld des
   «×»-Knopfes um. */
.buch.ansehen .aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 14px 0 0; }
.buch.ansehen .aktionen .cta { padding: 9px 20px; font-size: 16px; }
.buch.ansehen .aktionen .add { margin-top: 0; }
.buch.ansehen .aktionen .when { color: var(--muted); font-size: 14px; }
.buch.ansehen .aktionen .loeschen {
  margin-left: 12px; padding: 6px 0; border: 0; background: none;
  color: var(--muted); font: inherit; font-size: 15px; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rule);
}
.buch.ansehen .aktionen .loeschen:hover { color: var(--danger); text-decoration-color: currentColor; }
.buch.ansehen .aktionen .loeschen.fragt { color: var(--danger); font-weight: 600; }
/* Die Einleitungen dürfen hier die ganze Spalte nutzen: .lead bremst sonst bei 48ch, und der Satz über den
   Logbüchern bräche um, obwohl daneben 900 px frei sind. */
.mein-konto .lead { max-width: none; }
.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. */
/* Das eben im Konfigurator bestellte Logbuch (/konto?erzeugt=…) trägt die Klasse .frisch, aber seit dem 24.09.2026 KEINEN
   Rahmen und keinen Balken mehr: Es steht als neustes zuvorderst, sein Zeichen sagt «wird erzeugt …», und auf der
   Kachel ist der Pfeil grau, bis das PDF da ist. Die Klasse bleibt – die Seite scrollt zu ihm, Tests finden es. */
/* 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), zugleich das Band des Kopfs. Die eine Aktion bleibt --leather */
  /* Auf dem grünen Band. Kontrast gegen --brand: Text 6.9:1, leise 5.3:1, Akzent 4.9:1 – alles über 4.5 */
  --kopf-text: #f4efe6;  /* das Hell aus dem Auge des Zeichens */
  --kopf-leise: #d2d4c8;
  --kopf-akzent: #b9d3bf;
  --kopf-linie: rgba(244, 239, 230, 0.45);
}

/* 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); }
/* Im Kopf hell auf Grün, mit dem hellen Zeichen (logo-hell.svg). Die Beta-Seite zeigt die Marke ohne Kopf auf dem
   Leinen und behält darum das grüne Zeichen und die Farben oben. */
.top .wordmark { color: var(--kopf-text); }
.top .wordmark:hover { color: #fff; }
.top :focus-visible { outline-color: var(--kopf-text); }
/* «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;
}
.top .wordmark .beta { color: var(--kopf-akzent); }

/* 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, .hauptwege a { color: var(--kopf-leise); text-decoration: none; }
.site-nav a:hover, .hauptwege a:hover { color: var(--kopf-text); text-decoration: underline; }
/* Die offene Seite (aria-current, gesetzt von konto.js – frame:kopf ist auf jeder Seite gleich): hell wie beim
   Überfahren, dazu ein Strich, dicker und tiefer als der beim Überfahren, im Grün von «beta». Nach :hover, damit
   er auch unter dem Zeiger bleibt. */
.site-nav > a[aria-current="page"], .hauptwege > a[aria-current="page"] {
  color: var(--kopf-text);
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px;
  text-decoration-color: var(--kopf-akzent);
}
/* Der Sprachumschalter (konto.js, sprachwahl): kein Weg auf eine andere Seite, sondern auf dieselbe in einer anderen
   Sprache. Seit dem 25.09.2026 ein Aufklappmenü aus <details> – mit vier Sprachen und mehr, die noch kommen, trug die
   Zeile «DE · EN · FR · IT» nicht mehr. Zu sieht man das Kürzel der Seite als kleines Schild, offen die Namen, jeder in
   seiner Sprache; die eigene trägt aria-current und ein Häkchen. <details> geht ohne Skript; konto.js schliesst es
   nur noch bei Escape und einem Klick daneben. */
.kopfzeile > .sprachwahl { position: relative; margin-left: auto; font-size: 16px; }
.sprachwahl > summary {
  display: inline-flex; align-items: center; gap: 6px; list-style: none; cursor: pointer; user-select: none;
  border: 1px solid var(--kopf-linie); border-radius: 999px; padding: 3px 10px 3px 12px;
  color: var(--kopf-text); font-weight: 600; letter-spacing: 0.02em;
}
.sprachwahl > summary::-webkit-details-marker { display: none; }
.sprachwahl > summary::after {       /* der Winkel: ▾ zu, ▴ offen */
  content: ""; width: 6px; height: 6px; margin-top: -3px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg);
}
.sprachwahl[open] > summary::after { margin-top: 3px; transform: rotate(-135deg); }
.sprachwahl > summary:hover, .sprachwahl[open] > summary { border-color: currentColor; }
.sprachwahl > ul {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; min-width: 160px;
  margin: 0; padding: 6px 0; list-style: none;
  background: var(--paper); border-radius: 8px; box-shadow: 0 6px 24px rgba(43, 36, 32, 0.22);
}
.sprachwahl li a { display: flex; justify-content: space-between; gap: 16px; padding: 9px 16px; color: var(--ink); text-decoration: none; }
.sprachwahl li a:hover { background: var(--ground); }
.sprachwahl li a[aria-current] { font-weight: 600; cursor: default; }
.sprachwahl li a[aria-current]::after { content: "✓"; color: var(--brand); }
.top .sprachwahl li a:focus-visible { outline-color: var(--focus); }

/* Der Knopf fürs Menü (konto.js, kopfMenue): drei Striche, offen ein Kreuz. Es gibt ihn nur im kompakten Kopf; ohne
   Skript trägt er hidden, und die Wege stehen offen. */
.menue-knopf { display: none; }

/* Der kompakte Kopf (html.kopf-kompakt, seit 25.09.2026): Marke, Sprache und Knopf in einer Zeile, die Wege und das
   Konto klappen darunter auf, über die ganze Breite des Bands. konto.js setzt die Klasse, sobald die volle Zeile
   umbräche – gemessen, nicht an einer Breite festgemacht, denn wie breit Wege, Konto und Sprache sind, hängt an der
   Sprache, an der Adresse und am Guthaben: Am Bildschirm von 1000 px stand angemeldet das Menü auf zwei Zeilen.
   Der Kopf hat darum nie eine zweite Zeile, ausser ohne Skript. */
html.kopf-kompakt .kopfzeile { column-gap: 12px; row-gap: var(--kopf-oben); }
html.kopf-kompakt .kopfzeile > .site-nav {
  display: none; order: 10; flex-direction: column; gap: 0;
  flex-basis: calc(100% + 2 * var(--kopf-rand));
  margin: 0 calc(-1 * var(--kopf-rand)) calc(-1 * var(--kopf-oben));
  padding: 4px var(--kopf-rand) 12px; border-top: 1px solid var(--kopf-linie);
}
html.kopf-kompakt .kopfzeile > .site-nav.offen { display: flex; }
/* Die zwei wichtigsten Wege (html.kopf-hauptwege): im kompakten Kopf neben der Marke, solange dort Platz ist – im Menü
   darunter stehen dann nur die übrigen. Wo nicht einmal sie Platz haben (auf dem Handy), führen sie das Menü an. */
.hauptwege { display: none; }
html.kopf-hauptwege .hauptwege { display: flex; flex-wrap: nowrap; gap: 22px; margin-left: 20px; font-size: 16px; white-space: nowrap; }   /* 12 + 20 = 32 wie in der vollen Zeile */
html.kopf-hauptwege .kopfzeile > .site-nav > a.hauptweg { display: none; }
/* Wo es enger wird (html.kopf-kurz) die kurzen Namen – «Gestalten» statt «Logbuch gestalten» –, auf dem Handy dazu nur
   das Zeichen der Marke (html.kopf-ohne-name, gewählt am 25.09.2026): Der Name bleibt im Link, nur mit Schriftgrösse
   0, damit Vorleseprogramme weiter «Horse Logbook» sagen; «beta» fällt dort weg. */
.hauptwege .kurz { display: none; }
html.kopf-kurz .hauptwege .voll { display: none; }
html.kopf-kurz .hauptwege .kurz { display: inline; }
html.kopf-kurz .hauptwege { gap: 16px; }
html.kopf-ohne-name .top .wordmark { font-size: 0; gap: 0; }
html.kopf-ohne-name .top .wordmark .beta { display: none; }
html.kopf-ohne-name .hauptwege { margin-left: 8px; }
html.kopf-kompakt .kopfzeile > .site-nav > a { padding: 11px 0; font-size: 17px; }
html.kopf-kompakt .kopfzeile > .site-nav > .account { padding: 12px 0 4px; margin-top: 4px; border-top: 1px solid var(--kopf-linie); }
html.kopf-kompakt .menue-knopf {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-right: -8px;
  border: 0; border-radius: 8px; background: none; color: var(--kopf-text); cursor: pointer;
}
/* Das Zeichen fürs Konto (Konto.menu, kontoKnopf): nur im kompakten Kopf, zwischen Sprache und Menü – in der vollen
   Zeile steht «Dein Konto» ausgeschrieben. Auf «Dein Konto» selbst (bzw. der Anmeldung) etwas kräftiger gezeichnet. */
.konto-knopf { display: none; }
html.kopf-kompakt .konto-knopf:not([hidden]) {
  display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 40px; margin-right: -4px;
  border-radius: 8px; color: var(--kopf-text);
}
.konto-knopf svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.konto-knopf[aria-current] svg { stroke-width: 2.4; }
.menue-knopf > span, .menue-knopf > span::before, .menue-knopf > span::after {
  display: block; width: 22px; height: 2px; border-radius: 1px; background: currentColor; content: "";
}
.menue-knopf > span { position: relative; }
.menue-knopf > span::before, .menue-knopf > span::after { position: absolute; left: 0; transition: transform 0.15s; }
.menue-knopf > span::before { top: -7px; }
.menue-knopf > span::after { top: 7px; }
.menue-knopf[aria-expanded="true"] > span { background: transparent; }
.menue-knopf[aria-expanded="true"] > span::before { top: 0; transform: rotate(45deg); }
.menue-knopf[aria-expanded="true"] > span::after { top: 0; transform: rotate(-45deg); }
/* Ganz schmal (bis 400 px): enger, damit Marke, Sprache und Knopf auch bei 320 und 360 px auf einer Zeile stehen –
   bei 360 px rutschte der Knopf sonst darunter (KopfzeileTest). Der Rand bleibt, sonst stünde die Marke nicht mehr an
   derselben Kante wie der Text darunter. */
@media (max-width: 400px) {
  html.kopf-kompakt .kopfzeile { column-gap: 5px; }
  .top .wordmark { gap: 8px; font-size: 21px; }
  .top .wordmark img { width: 26px; height: 26px; }
  .sprachwahl > summary { padding: 3px 6px 3px 8px; gap: 3px; }
  /* Seit dem Zeichen fürs Konto (25.09.2026) fehlten bei 360 px auf Deutsch rund 28 px für die zwei Wege. Danach
     blieben auf dem Mac 2 px übrig – auf Linux (GitHub Actions) setzt die Schrift ein paar Pixel breiter, und die zwei
     fielen ins Menü. Jetzt bleiben überall mindestens 8 px (KopfzeileTest misst den Rest). */
  html.kopf-kurz .hauptwege { gap: 10px; font-size: 15px; }
  html.kopf-ohne-name .hauptwege { margin-left: 4px; }
  html.kopf-kompakt .konto-knopf:not([hidden]) { width: 30px; }
  html.kopf-kompakt .menue-knopf { width: 34px; }
}
/* Bei 320 px (das kleinste iPhone) fehlten danach noch 14 px: 280 px Platz, 294 px Zeile */
@media (max-width: 340px) {
  .top .wordmark { font-size: 19px; }
}

/* 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; }
/* Die Einleitung unter dem Titel einer Unterseite nimmt die ganze Breite (seit 22.09.2026): Auf 72ch bzw. 48ch
   begrenzt, brach sie in drei Zeilen und schob den Inhalt nach unten. Nur sie – der Text darunter behält sein
   Satzmass. Die Startseite hat keine (ihr Text ist .hero-lead). Die Spezifität muss über «.start section > p»
   liegen, darum .page/.start davor (EinleitungTest). */
.page h1 + .lead, .start h1 + .lead { max-width: none; }
.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 */
/* Besucherstatistik ab- und anschalten (datenschutz.html, datenschutz.js): Stand und Knopf in einer Zeile */
.page .statistik-wahl { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.page .statistik-wahl .secondary { padding: 0; }

/* Tipps zum Drucken (/drucken): nummerierte Schritte eingerückt wie die Listen daneben, die Papiertabelle schlicht
   wie die Pakete auf /preise. Unter .druckseite – jede Seite teilt diese Datei. */
.druckseite ol { margin: 0 0 12px; padding-left: 22px; }
.druckseite .menge { border-collapse: collapse; margin: 4px 0 16px; font-size: 17px; }
.druckseite .menge th, .druckseite .menge td { text-align: left; padding: 8px 20px 8px 0; border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
.druckseite .menge thead th, .druckseite .menge thead td { font-size: 15px; font-weight: 600; color: var(--muted); padding-top: 0; padding-bottom: 6px; border-bottom-color: var(--rule); }
.druckseite .menge tbody th { font-weight: 600; white-space: nowrap; }
/* Auf dem Handy war die Papiertabelle breiter als der Bildschirm – bei 390 px 408 (Deutsch) bis 433 px (Italienisch),
   gefunden am 25.09.2026 bei der Durchsicht für Italienisch: weniger Abstand, etwas kleinere Schrift, und die
   Zeilenköpfe dürfen umbrechen. KeinSeitlichesScrollenTest misst jede Seite. */
@media (max-width: 640px) {
  .druckseite .menge { font-size: 15px; }
  .druckseite .menge th, .druckseite .menge td { padding-right: 10px; }
  .druckseite .menge tbody th { white-space: normal; }
}
/* Die Skizzen (static/drucken/, von Claude Design, docs/website/drucken-skizzen-prompt.md): höchstens 560 px breit,
   auf dem Handy so breit wie der Text. Transparent, sie stehen direkt auf dem Leinen. */
.druckseite .skizze { margin: 12px 0 20px; max-width: 560px; }
.druckseite li .skizze { margin: 10px 0 14px; }
.druckseite .skizze img { display: block; width: 100%; height: auto; }
.druckseite .skizze figcaption { margin-top: 4px; font-size: 15px; color: var(--muted); }

/* Fotos vom gedruckten Logbuch (static/fotos/, aus docs/design/printed-product-pictures/, ohne EXIF – FotosTest): auf der
   Startseite unter «Zu Hause drucken», in den Drucktipps unter «Kein Drucker zu Hause?». Die Seite verkauft ein PDF,
   darum sagt jede Bildunterschrift, wer gedruckt und gebunden hat. Eigener Name – .foto ist der Fotoblock im
   Konfigurator. */
.produktfoto { margin: 24px 0 0; max-width: 720px; }
.produktfoto img { display: block; width: 100%; height: auto; border-radius: 6px; }
.produktfoto figcaption { margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--muted); }
.druckseite .produktfoto { margin: 12px 0 20px; max-width: 440px; }

/* Credits kaufen (kaufen.js, docs/stripe/): «Kaufen» in der Pakettabelle von /preise, die Pakete als Knöpfe in «Dein
   Guthaben» und darunter die Wahl des Zahlwegs. Eigene Namen (.kauf, .kauf-pakete, .kaufwahl) – geprüft, dass es sie
   in dieser Datei nicht schon gibt. */
.pakete td.kauf { text-align: right; padding-right: 0; }
.pakete td.kauf .secondary { padding: 2px 0; }
.kauf-pakete { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 4px; }
.kauf-pakete .paket {
  font: inherit; font-size: 16px; color: var(--ink); background: var(--paper); cursor: pointer;
  border: 1px solid var(--rule); border-radius: 3px; padding: 9px 14px;
}
.kauf-pakete .paket:hover { border-color: var(--leather); }
.kaufwahl { margin: 14px 0 8px; padding: 16px 18px; background: var(--paper); border: 1px solid var(--rule); border-radius: 4px; max-width: 60ch; }
.kaufwahl p { margin: 0 0 10px; }
.kaufwahl .kaufwahl-titel { font-weight: 600; }
.kaufwahl .kaufwahl-wege { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.kaufwahl .kaufwahl-wer { font-size: 14px; color: var(--muted); margin: 4px 0 0; }
.kaufwahl .status:empty { display: none; }
/* Das Pflicht-Häkchen zu den AGB über den Zahlknöpfen (kaufen.js, seit 24.09.2026); rot umrandet, wenn es beim Klick fehlt */
.kaufwahl .kaufwahl-agb { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 12px; font-size: 15px; cursor: pointer; }
.kaufwahl .kaufwahl-agb input { margin: 3px 0 0; width: 16px; height: 16px; flex: none; accent-color: var(--leather); }
.kaufwahl .kaufwahl-agb a { color: var(--leather-deep); }
.kaufwahl .kaufwahl-agb.fehlt { outline: 2px solid var(--danger); outline-offset: 4px; border-radius: 2px; }

/* Das Geschenk für neue Konten (konto.js, geschenk) auf /preise und der Anmeldeseite: ein Hinweis im Grün der Marke */
.geschenk { margin: 16px 0 0; padding: 10px 14px; border-left: 3px solid var(--brand); background: rgba(47, 90, 62, 0.07); font-size: 15px; line-height: 1.5; }

/* Preise (/preise): die zwei Stufen als Karten nebeneinander, Papier auf dem Leinen. Alles unter .preisseite –
   jede Seite teilt diese Datei, und ein nackter Klassenname gälte überall. */
/* Eine Karte je Länge (Viertel-, Halb-, ganzes Jahr). Breiter als die 72ch von .page > *: Das Mass gilt dem Fliesstext,
   drei Karten darin wären je 24ch schmal – 100ch gibt jeder rund 31ch, so viel wie zwei Karten vorher hatten. */
.preisseite .stufen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 28px 0 8px; max-width: 100ch; }
.preisseite .stufe { background: var(--paper); border: 1px solid var(--rule-soft); border-radius: 4px; padding: 20px 22px 8px; }
.preisseite .stufe h2 { margin: 0 0 2px; font-size: 21px; }
.preisseite .betrag { margin: 0 0 12px; font-size: 34px; font-weight: 300; line-height: 1.15; color: var(--brand); }
/* Die Pakete: Zahlen rechtsbündig, damit Franken unter Franken stehen (die Seite rechnet mit tabular-nums) */
.preisseite .pakete { border-collapse: collapse; margin: 12px 0 16px; font-size: 17px; }
.preisseite .pakete th { text-align: left; font-weight: 600; font-size: 15px; color: var(--muted); padding: 0 20px 6px 0; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.preisseite .pakete td { padding: 8px 20px 8px 0; border-bottom: 1px solid var(--rule-soft); white-space: nowrap; }   /* nie «CHF» über «1.50» */
.preisseite .pakete td:nth-child(-n+3), .preisseite .pakete th:nth-child(-n+3) { text-align: right; }
.preisseite .pakete td:nth-child(3), .preisseite .pakete td:nth-child(4) { color: var(--muted); }
.preisseite .pakete td:last-child { white-space: normal; }   /* bricht als einzige um, auf 320 px nötig */
/* Umgerechnet (kaufen.js, credit/Wechselkurse): «≈ 2,65 €» leise unter dem Frankenpreis; darunter Liste und Hinweis */
.preisseite .pakete .umgerechnet { display: block; font-size: 14px; color: var(--muted); }
.preisseite .umrechnen { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: -4px 0 16px; font-size: 15px; color: var(--muted); }
.preisseite .umrechnen select { width: auto; margin-left: 6px; }
.preisseite .umrechnen .hinweis { flex-basis: 100%; }
.preisseite .umrechnen .hinweis[hidden] { display: none; }
@media (max-width: 640px) {
  .preisseite .stufen { grid-template-columns: 1fr; }
  /* «reicht für» weicht dem Knopf «Kaufen» – nur, wo es ihn gibt (kaufen.js hängt die Spalte an) */
  .preisseite .pakete:has(td.kauf) td:nth-child(4), .preisseite .pakete:has(td.kauf) th:nth-child(4) { display: none; }
  .preisseite .pakete { font-size: 16px; }
  .preisseite .pakete th, .preisseite .pakete td { padding-right: 12px; }
}

@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; }
/* Der Teaser über allem: bis zum 22.09.2026 stand er im Kopf jeder Seite, jetzt nur hier als eigener Abschnitt.
   Zwei Zeilen, ein Satz je Zeile (<br> im HTML). Beide sind bei 29 px rund 740 px breit, also 25,5 Schriftgrössen
   (seit «bald auch für die Druckerei» wieder weg ist, 22.09.2026 – mit ihm waren es 37). Damit passt die volle
   Grösse ab ~770 px, also auf jedem Desktop; darunter gilt ohnehin die Handy-Grösse. Die Formel bleibt als Schutz,
   falls ein Satz wieder länger wird: nie eine dritte Zeile (27 statt 25,5 lässt Platz für eine Bildlaufleiste,
   LandingPageTest). Wer den Satz ändert, misst neu. Auf dem Handy bricht sie ohnehin um;
   «balance» verteilt die Zeilen dort gleichmässig, statt ein einzelnes Wort in die letzte zu schieben.
   «max-width: none» hebt die 68ch von «.start section > p» auf – bei 29 px sind das 986 px, zu knapp. */
.start .teaser p { max-width: none; margin: 0; color: var(--muted); font-size: min(29px, calc((100vw - 80px) / 27)); line-height: 1.4; text-wrap: balance; }
.start .teaser strong { font-weight: 600; color: var(--ink); }    /* die Schnitte der Seite sind 300/400/600 – kein 700, das der Browser fett rechnen müsste */
/* Keine Linie zwischen Teaser und Titel: Der Teaser führt in den ersten Abschnitt hinein, er ist kein eigenes
   Thema. Ohne die Linie wären die zweimal 64 px Abstand der Abschnitte ein Loch, darum hier nur 48 px. */
.start .teaser { padding-bottom: 0; }
.start .teaser + .hero { border-top: 0; padding-top: 48px; }

/* 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.
   Oben bündig, nicht mittig (seit 22.09.2026): Der Titel beginnt auf der Höhe der Oberkante des Umschlags,
   mittig stand der kurze Text in halber Höhe des hohen Buchs (LandingPageTest). */
.hero { display: grid; grid-template-columns: minmax(320px, 1fr) minmax(280px, 380px); gap: 64px;
        align-items: start; max-width: 1080px; }
/* Bündig ist die Schrift, nicht ihr Kasten: Über den Grossbuchstaben liegen bei 44 px und Zeilenhöhe 1.08 noch
   7 px (Durchschuss und Oberlänge der Schrift), um die der Titel sonst tiefer stünde als das Buch. */
.hero h1 { margin-top: -0.16em; }
/* Der Titel der Startseite ist seit dem 24.09.2026 länger («Das Logbuch nach Mass für deine Equiden zum Drucken») und
   darum kleiner als die 44 px von «.start h1», die für «Blick ins Buch» und «Logbuch ansehen» bleiben. */
.hero h1 { font-size: 38px; }
.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); }
/* Welches Buch? (25.09.2026): die drei Bücher neben dem Logbuch als Karten, je mit «Hineinschauen» und «Gestalten» */
.start .buecher { list-style: none; padding: 0; margin: 24px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; max-width: 1080px; }
.start .buecher li { border: 1px solid var(--rule-soft); border-radius: 6px; padding: 20px 22px 16px; background: var(--paper); display: flex; flex-direction: column; }
.start .buecher h3 { font-size: 20px; font-weight: 600; margin: 0 0 8px; }
.start .buecher p { font-size: 16px; margin: 0 0 14px; }
.start .buecher .wege { margin: auto 0 0; display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 15px; }
.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 Einleitung von «Blick ins Buch» hat seit dem 24.09.2026 zwei Absätze (im Admin-Panel bis zu vier): Alle nehmen die
   ganze Breite, nicht nur der erste, den «.start h1 + .lead» meint – sonst bräche der zweite nach 68 Zeichen um. */
.buch .lead { max-width: none; }
/* Links in Texten aus dem Admin-Panel («[Jetzt selber probieren →](konfigurator)», Teaser.lesen): «a { color: inherit }»
   liesse sie im Grau der Einleitung untergehen – sie sind die Aufforderung, darum in der Farbe der übrigen Aktionen. */
.buch .lead a, .hero-lead a, .start .beispiele-links a { color: var(--leather-deep); font-weight: 600; text-underline-offset: 3px; }
/* Die drei Beispiele auf «Blick ins Buch» (buch.js, seit 24.09.2026): Pillen wie «Kacheln | Liste» in «Dein Konto»
   (.ansichtswahl), nur als Links – der Anker wählt das Beispiel. Darunter ein Satz, was in diesem Beispiel drinsteht. */
.buch .beispiele { display: flex; flex-wrap: wrap; gap: 6px; margin: 20px 0 8px; }
.buch .beispiele a {
  font-size: 16px; color: var(--muted); text-decoration: none; line-height: 1.4;
  border: 1px solid var(--rule); border-radius: 999px; padding: 4px 14px;
}
.buch .beispiele a:hover { color: var(--ink); }
.buch .beispiele a[aria-current] { color: var(--ink); background: var(--paper); font-weight: 600; }
.buch .beispiel-text { color: var(--muted); font-size: 15px; margin: 0 0 14px; max-width: none; }
/* Beim Wechsel des Beispiels (buch.js): Bühne in ihrer Grösse, der Rahmen unsichtbar, bis das neue Buch blättert */
.stage.wechselt iframe { visibility: hidden; }
/* 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 (prefers-reduced-motion: reduce) { .menue-knopf > span::before, .menue-knopf > span::after { transition: none; } }

@media (max-width: 960px) {
  .start { padding: 8px 20px 24px; }
  .hero { grid-template-columns: 1fr; gap: 28px; }
  .hero .stage { order: -1; }
  .hero h1 { margin-top: 0; }      /* das Buch steht hier darüber, nicht daneben – nichts auszurichten */
  .start .teaser p { font-size: 20px; }
  .start h1 { font-size: 34px; }
  .hero h1 { font-size: 30px; }
  .zwei { columns: 1; }
}