/* =====================================================================
   Gemeinsames Aussehen aller Seiten.
   Mobil zuerst. Keine Schriften oder Skripte von fremden Servern –
   deshalb braucht die Seite auch kein Cookie-Banner.

   Neu gestaltet am 5. Oktober 2026: eigene Schriften (Fraunces für
   Überschriften und Beträge, Mulish für alles andere), Knöpfe mit
   ausreichendem Kontrast, ein Kopf, der oben bleibt. Die Readings selbst
   haben ihre eigene Gestaltung in reading.css und bleiben davon
   unberührt.

   Farbregeln, damit kleiner Text überall gut lesbar bleibt:
     --akzent        nur Striche, Kreise, große Ziffern – nie kleiner Text
     --akzent-dunkel Knopffläche (weiße Schrift), Links auf Papier und Weiß
     --kasten        zweite Fläche; kleiner Text und Links darauf in --tinte
     --gut           Häkchen und Schilder; grüne Schrift nur auf Weiß
   ===================================================================== */

/* ---------------- Schriften (liegen in web/schriften, Lizenz OFL) ---------------- */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/schriften/fraunces-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/schriften/fraunces-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/schriften/mulish-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/schriften/mulish-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --papier: #FAF7F2;
  --tinte: #3A3028;
  --leise: #7A6A58;
  --akzent: #B4764A;
  --akzent-dunkel: #96603A;
  --linie: #E6DCCD;
  --kasten: #F3EDE3;
  --gut: #5E7A52;
  --warnung: #A8574A;
  --schrift-titel: "Fraunces", Georgia, "Times New Roman", serif;
  --schrift-ui: "Mulish", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --schrift: var(--schrift-ui);
  /* Für längere Lesetexte (das Numerologie-Reading auf der Startseite). */
  --schrift-text: Georgia, "Iowan Old Style", "Times New Roman", serif;
}

/* Sprungziele (#gratis, #frage-ki) sollen nicht unter dem Kopf landen,
   der beim Rollen oben bleibt. */
html { scroll-padding-top: 4.5rem; }

* { box-sizing: border-box; }

/* Versteckt heißt versteckt. Ohne diese Zeile gewinnt ein eigenes
   display (etwa .knopf { display: inline-block }) gegen das Attribut,
   und ein ausgeblendeter Knopf bliebe sichtbar. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--schrift);
  font-size: 17px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

main { max-width: 34rem; margin: 0 auto; padding: 0 1.1rem 3rem; }

/* ---------------- Kopf und Fuß ---------------- */

/* Der Kopf bleibt beim Rollen oben – nur mit CSS, ohne Javascript. */
.seitenkopf {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--papier);
  border-bottom: 1px solid var(--linie);
}
.seitenkopf-innen {
  max-width: 36rem;
  margin: 0 auto;
  padding: 0 1.1rem;
  min-height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.start .seitenkopf-innen { max-width: 68rem; padding: 0 1.25rem; }
.marke {
  font-family: var(--schrift-titel);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--tinte);
  text-decoration: none;
}
.marke:hover { color: var(--akzent-dunkel); }
.kopf-bestellen {
  font-size: .9rem;
  font-weight: 700;
  color: var(--akzent-dunkel);
  text-decoration: none;
  border: 1px solid var(--akzent-dunkel);
  border-radius: 8px;
  padding: .35rem .85rem;
  white-space: nowrap;
}
.kopf-bestellen:hover { background: #fff; }

/* Die Reiter (seit 13. Oktober 2026). Am Handy eine schmale zweite Zeile
   unter Marke und „Bestellen“, ab Tablet-Breite in der Mitte der Zeile. */
.seitenkopf-innen { flex-wrap: wrap; row-gap: 0; }
/* Auch auf der Startseite (dort setzt .start das Polster neu). */
.seitenkopf-innen, .start .seitenkopf-innen { padding-top: .45rem; }
.kopf-reiter {
  order: 3;
  width: 100%;
  display: flex;
  gap: 1.15rem;
  overflow-x: auto;
  white-space: nowrap;
  padding: 0 0 .55rem;
  margin-top: -.3rem;
  font-size: .86rem;
}
.kopf-reiter a { color: var(--leise); text-decoration: none; }
/* Am Handy fehlt der Reiter „Human Design“ (seit 15. Oktober 2026): Vier
   Reiter passen dort nicht in eine Zeile, und die Marke links führt schon
   zur Startseite. Ab Tablet-Breite steht er wieder da (unten). */
.kopf-reiter .nur-breit { display: none; }
.kopf-reiter a:hover { color: var(--akzent-dunkel); }
.kopf-reiter a[aria-current="page"] {
  color: var(--tinte);
  text-decoration: underline;
  text-decoration-color: var(--akzent);
  text-underline-offset: .3em;
}

.seitenfuss {
  max-width: 34rem;
  margin: 2rem auto 0;
  padding: 1.2rem 1.1rem 2rem;
  border-top: 1px solid var(--linie);
  text-align: center;
  font-family: var(--schrift-ui);
  font-size: .8rem;
  color: var(--leise);
}
.seitenfuss a { color: var(--leise); }
.seitenfuss p { margin: .4rem 0 0; }

/* ---------------- Überschriften und Text ---------------- */

h1, h2 {
  font-family: var(--schrift-titel);
  font-weight: 500;
  letter-spacing: -.01em;
  /* „Datenschutzerklärung“ ist auf einem schmalen Handy breiter als die
     Spalte. Die Seite ist auf Deutsch ausgezeichnet, also trennt der
     Browser richtig. */
  overflow-wrap: break-word;
  hyphens: auto;
}
h1 { font-size: 1.85rem; line-height: 1.15; margin: 1.4rem 0 1rem; }
h2 { font-size: 1.45rem; line-height: 1.2; margin: 2.2rem 0 .6rem; }
h3 { font-size: 1.05rem; margin: 1.6rem 0 .35rem; font-weight: 700; }
p { margin: 0 0 .95rem; }
a { color: var(--akzent-dunkel); }

.vorspann { font-size: 1.05rem; color: var(--leise); margin-bottom: 1.8rem; }
.kleingedruckt { font-family: var(--schrift-ui); font-size: .82rem; color: var(--leise); }
.hilfe { font-family: var(--schrift-ui); font-size: .85rem; color: var(--leise); margin: .1rem 0 .4rem; }

/* ---------------- Formular ---------------- */

.formular { margin: 1.5rem 0; }
.feld { margin-bottom: 1.4rem; }
.feld label {
  display: block;
  font-family: var(--schrift-ui);
  font-weight: 600;
  font-size: .95rem;
  margin-bottom: .2rem;
}
.feld input, .feld textarea {
  width: 100%;
  font: inherit;
  font-family: var(--schrift-ui);
  /* 16px und mehr: Darunter zoomt das iPhone beim Tippen hinein. */
  font-size: 1rem;
  padding: .7rem .8rem;
  border: 1px solid var(--linie);
  border-radius: 6px;
  background: #fff;
  color: var(--tinte);
}
/* Nur Eingabefelder bekommen die bequeme Höhe – Auswahlpunkte und
   Häkchen bleiben klein. */
.feld input:not([type="radio"]):not([type="checkbox"]) { min-height: 3rem; }
.feld textarea { line-height: 1.5; resize: vertical; }
.feld input:focus, .feld textarea:focus {
  outline: 2px solid var(--akzent);
  outline-offset: 1px;
  border-color: var(--akzent);
}

.haekchen { margin: 1.4rem 0; }
.haekchen label {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  font-family: var(--schrift-ui);
  font-size: .92rem;
  line-height: 1.5;
  cursor: pointer;
}
.haekchen input { margin-top: .25rem; flex-shrink: 0; width: 1.05rem; height: 1.05rem; }

/* Knöpfe. Gefüllt in Terrakotta-dunkel mit weißer Schrift (5,2:1) –
   vorher stand Weiß auf dem helleren Terrakotta, mit nur 3,7:1.
   Pro Bildschirm ein gefüllter Knopf; zweite Wege sind umrandet. */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--schrift-ui);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.25;
  min-height: 3rem;
  padding: .75rem 1.4rem;
  border: 1.5px solid var(--akzent-dunkel);
  border-radius: 10px;
  background: var(--akzent-dunkel);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}
.knopf:hover { background: var(--tinte); border-color: var(--tinte); color: #fff; }
.knopf.gross { width: 100%; max-width: 24rem; min-height: 3.25rem; }
.knopf.umrandet, .knopf.hell { background: transparent; color: var(--akzent-dunkel); }
.knopf.umrandet:hover, .knopf.hell:hover {
  /* Weiß, nicht --kasten: darauf hätte die Schrift nur 4,47:1. */
  background: #fff; color: var(--akzent-dunkel); border-color: var(--akzent-dunkel);
}
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible {
  outline: 2px solid var(--akzent-dunkel);
  outline-offset: 2px;
}

.drucken button {
  font-family: var(--schrift-ui);
  font-size: .95rem;
  padding: .6rem 1.3rem;
  border: 1px solid var(--akzent-dunkel);
  border-radius: 10px;
  background: transparent;
  color: var(--akzent-dunkel);
  cursor: pointer;
}
.drucken button:hover { background: #fff; }

/* Die Falle für Maschinen: für Menschen unsichtbar, aber im Seitenquelltext da.
   Nicht display:none, denn das füllen manche Programme absichtlich nicht aus. */
.honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------------- Kästen ---------------- */

.fehlerkasten, .erfolgskasten, .entwurfshinweis {
  padding: .9rem 1.1rem;
  border-radius: 8px;
  margin: 1.2rem 0;
  font-family: var(--schrift-ui);
  font-size: .92rem;
}
.fehlerkasten {
  background: #FBF0EE;
  border-left: 3px solid var(--warnung);
}
.fehlerkasten p { margin: 0 0 .4rem; font-weight: 600; }
.fehlerkasten ul { margin: 0; padding-left: 1.2rem; }
.erfolgskasten {
  background: #F0F4EE;
  border-left: 3px solid var(--gut);
}
.erfolgskasten p:last-child { margin-bottom: 0; }
.entwurfshinweis {
  background: #FDF6E3;
  border-left: 3px solid #C9A227;
}

/* ---------------- Reading ---------------- */

.reading { font-family: var(--schrift-text); }
.reading .kapitel { margin-top: 2.2rem; }
.reading .kapitel + .kapitel { border-top: 1px solid var(--linie); padding-top: 1.8rem; }
.rechenweg {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: .82rem;
  color: var(--leise);
  background: var(--kasten);
  padding: .4rem .6rem;
  border-radius: 5px;
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere;
  margin-bottom: .7rem;
}
/* Ein langer Name ist eine einzige Buchstabenkette ohne Leerzeichen –
   ohne Umbruch schöbe sie die Seite in die Breite. */
.buchstaben { font-family: var(--schrift-ui); word-break: break-all; }
.kurz { font-weight: 600; }

ul.punkte { margin: 0 0 1rem; padding-left: 1.25rem; }
ul.punkte li { margin-bottom: .7rem; }

.frage {
  background: var(--kasten);
  border-left: 3px solid var(--leise);
  padding: .7rem .9rem;
  margin: 1rem 0;
  font-size: .97rem;
}

.tabellenrahmen { overflow-x: auto; margin: 1rem 0; }
.uebersicht { width: 100%; border-collapse: collapse; font-size: .9rem; }
.uebersicht th, .uebersicht td {
  text-align: left;
  padding: .5rem .55rem;
  border-bottom: 1px solid var(--linie);
  vertical-align: top;
}
.uebersicht thead th {
  font-family: var(--schrift-ui);
  font-size: .76rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--leise);
  white-space: nowrap;
}
.uebersicht tbody th { font-weight: 600; white-space: nowrap; }
.uebersicht .zahl { font-weight: 600; text-align: center; }

/* ---------------- Bild zum Weitergeben ---------------- */

.teilbild {
  margin-top: 2.5rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--linie);
}
.teilbild-vorschau { margin: 1.2rem 0; text-align: center; }
.teilbild-leinwand {
  width: 100%;
  max-width: 320px;
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--linie);
}
.teilbild-knoepfe { display: flex; gap: .7rem; flex-wrap: wrap; }

@media print { .teilbild { display: none; } }

/* ---------------- Das freiwillige Angebot unter dem Reading ---------------- */

.angebot {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 2px solid var(--linie);
}
.angebotsliste { margin: 1.5rem 0; }
.angebotskarte {
  background: var(--kasten);
  border-radius: 10px;
  padding: 1.1rem 1.2rem;
  margin-bottom: 1rem;
}
.angebotskarte h3 { margin: 0 0 .4rem; font-size: 1.02rem; }
.angebotskarte p { margin: 0; font-size: .95rem; }
.angebotsformular { margin-top: 1.6rem; }
.lesezeichen {
  font-family: var(--schrift-ui);
  font-size: .88rem;
  color: var(--leise);
  background: var(--kasten);
  padding: .7rem .9rem;
  border-radius: 8px;
  margin-bottom: 1.6rem;
}
.zurueck { font-family: var(--schrift-ui); font-size: .9rem; margin: 1rem 0; }

@media (min-width: 40rem) {
  .angebotsliste { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
  .angebotskarte { margin-bottom: 0; }
}

@media print {
  .angebot, .lesezeichen, .zurueck { display: none; }
}

/* ---------------- Hinweisseiten ---------------- */

.hinweisseite { text-align: center; padding: 2.5rem 0; }
.hinweisseite h1 { margin-bottom: 1rem; }
.hinweisseite p { color: var(--leise); }

.hinweiskasten {
  border-left: 3px solid var(--gut);
  background: var(--kasten);
  padding: .8rem 1rem;
  font-family: var(--schrift-ui);
  font-size: .92rem;
}

/* ---------------- Bestellformular ---------------- */

.bestellung fieldset {
  border: 1px solid var(--linie);
  border-radius: 12px;
  padding: 1.2rem 1.1rem .4rem;
  margin: 0 0 1.6rem;
  background: #fff;
}
.bestellung legend {
  font-family: var(--schrift-ui);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--leise);
  padding: 0 .5rem;
}
.feld .label {
  display: block;
  margin-bottom: .35rem;
  font-family: var(--schrift-ui);
  font-size: .92rem;
  font-weight: 600;
}
.rollen { display: grid; gap: .5rem; }
.rolle {
  display: flex;
  gap: .6rem;
  align-items: center;
  font-family: var(--schrift-ui);
  font-size: .92rem;
  cursor: pointer;
}
.rolle input { width: 1.05rem; height: 1.05rem; flex-shrink: 0; }

/* Die Trefferliste der Ortssuche */
/* Menschen dazunehmen und wieder entfernen */
.anzahl { margin: 1.6rem 0 2rem; }
.anzahl .label { margin: 0 0 .5rem; }
.anzahl-knoepfe { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 .6rem; }
.anzahl-knoepfe .knopf { font-size: .9rem; padding: .5rem 1.1rem; }
.anzahl .hilfe { margin: 0; }

/* Entfernen ist leise: ein Wort rechts oben im Block, kein Knopf, der
   mit „Weiter zur Bezahlung“ um die Aufmerksamkeit konkurriert. */
.entfernen { margin: -.6rem 0 .4rem; text-align: right; }
.entfernen button {
  background: none; border: 0; padding: .2rem 0; cursor: pointer;
  font-family: var(--schrift-ui); font-size: .85rem;
  color: var(--leise); text-decoration: underline;
}
.entfernen button:hover { color: var(--warnung); }

.ortsfeld { position: relative; }
.treffer {
  list-style: none;
  margin: .2rem 0 0;
  padding: 0;
  border: 1px solid var(--linie);
  border-radius: 6px;
  background: #fff;
  max-height: 14rem;
  overflow-y: auto;
  position: absolute;
  left: 0;
  right: 0;
  z-index: 5;
}
.treffer li {
  padding: .6rem .8rem;
  font-family: var(--schrift-ui);
  font-size: .92rem;
  cursor: pointer;
  border-bottom: 1px solid var(--linie);
}
.treffer li:last-child { border-bottom: 0; }
.treffer li:hover, .treffer li:focus { background: var(--kasten); }
/* Wer mit der Tastatur wählt, muss sehen, welcher Ort gerade dran ist. */
.treffer li:focus { outline: none; }
.treffer li:focus-visible { outline: 2px solid var(--akzent-dunkel); outline-offset: -2px; }

.vorschau {
  margin: .6rem 0 .2rem;
  font-family: var(--schrift-ui);
  font-size: .88rem;
  color: var(--gut);
}
.fehler {
  margin: .6rem 0 .2rem;
  font-family: var(--schrift-ui);
  font-size: .88rem;
  color: var(--warnung);
}
.gesamtpreis {
  font-family: var(--schrift-ui);
  font-size: 1.15rem;
  text-align: right;
  margin: 1.4rem 0 1rem;
}
/* Nachtragen nach einem Direktkauf: bezahlt ist schon. */
.nachtrag-hinweis {
  padding: .8rem 1rem;
  background: var(--kasten);
  border-left: 3px solid var(--gut);
  border-radius: 6px;
  font-family: var(--schrift-ui);
}

.nachtrag-rolle { border: 0; padding: 0; margin: 1.2rem 0 .4rem; }
.nachtrag-rolle legend { font-family: var(--schrift-ui); font-weight: 700; margin-bottom: .4rem; }
.nachtrag-rolle .wahl { display: block; margin: .3rem 0; font-family: var(--schrift-ui); }

/* Lieferzeile über dem Gesamtpreis, Preishinweis direkt darunter. */
.lieferzeile {
  margin: 1.4rem 0 0;
  padding: .7rem .9rem;
  background: var(--kasten);
  border-radius: 8px;
  font-family: var(--schrift-ui);
  font-size: .92rem;
}
.lieferzeile + .gesamtpreis { margin-top: 1rem; }
.gesamtpreis + .preishinweis { margin: -.7rem 0 1rem; text-align: right; }
.zurueck { font-family: var(--schrift-ui); font-size: .9rem; }
.nachbestellung { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--linie); }

/* Bericht der Einrichtungsseite: Spalten sollen untereinander stehen. */
pre.einrichtung {
  background: var(--kasten); padding: 1rem; border-radius: 6px;
  overflow-x: auto; font-size: .8rem; line-height: 1.5;
}

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

.rechtstext h2 { font-size: 1.14rem; margin-top: 2rem; }
.rechtstext p, .rechtstext li { font-size: .97rem; }

/* Was noch offen ist, steht sichtbar da und wird nicht weggeräumt. */
.rechtstext-offen {
  margin-top: 2.2rem; padding: 1rem 1.1rem;
  background: var(--kasten); border-left: 3px solid var(--warnung); border-radius: 4px;
}
.rechtstext-offen h2 { margin-top: 0; color: var(--warnung); }

/* Eine fehlende Pflichtangabe soll auffallen, nicht verschwinden. */
.luecke {
  background: #F6DED9; color: var(--warnung);
  padding: 0 .3rem; border-radius: 3px;
  font-family: var(--schrift-ui); font-size: .88em; font-weight: 600;
}

.seitenfuss .grenzen {
  max-width: 30rem; margin: .8rem auto 0;
  font-size: .78rem; line-height: 1.5;
}

@media (min-width: 40rem) {
  body { font-size: 18px; }
  main { padding: 0 2rem 4rem; }
  h1 { font-size: 2.1rem; }
  .rollen { grid-template-columns: repeat(2, 1fr); }
}

/* =====================================================================
   STARTSEITE
   Nur hier laufen die Abschnitte über die volle Breite (für die
   Hintergrundflächen); der Inhalt steht in .innen, höchstens 68rem
   breit, Fließtext höchstens 36rem.
   ===================================================================== */

.start main { max-width: none; padding: 0; }
.start main > .entwurfshinweis { max-width: 65.5rem; margin: 1rem 1.25rem 0; }
@media (min-width: 68rem) { .start main > .entwurfshinweis { margin: 1rem auto 0; } }
.abschnitt { padding: 3.5rem 0; }
.innen { max-width: 68rem; margin: 0 auto; padding: 0 1.25rem; }
.abschnitt p, .abschnitt li { max-width: 36rem; }
.abschnitt h2 { font-size: 1.7rem; line-height: 1.15; margin: 0 0 1rem; }
.abschnitt h3 { margin: 0 0 .4rem; }
.abschnitt-kasten { background: var(--kasten); }
/* Das Gratis-Reading steht direkt unter dem Aufmacher und soll sofort
   auffallen: eigener Hintergrund, abgesetzt vom hellen Aufmacher. */
.abschnitt-gratis { background: var(--kasten); }
/* Seit dem 13. Oktober 2026 trägt die eigene Numerologie-Seite die
   Hauptüberschrift. Getrennt wird nur am Bindestrich, nicht „Nu-merologie“. */
.abschnitt-gratis h1 { font-size: clamp(1.75rem, 6.4vw, 2.6rem); hyphens: manual; margin-top: 0; }
.numerologie-bruecke .knopfreihe { margin-bottom: 0; }
.leise { color: var(--leise); }
.klein { font-size: .88rem; }

/* Auf der Kasten-Fläche reichen --leise und --akzent-dunkel für kleinen
   Text nicht ganz (knapp 4,5:1). Dort steht kleiner Text in --tinte. */
.abschnitt-kasten .leise,
.abschnitt-kasten a:not(.knopf) { color: var(--tinte); }

/* Die kleine Zeile über jeder Überschrift, mit Strich davor. */
.ueberzeile {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 .8rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--akzent-dunkel);
}
.ueberzeile::before {
  content: "";
  width: 1.5rem;
  height: 2px;
  background: var(--akzent);
  flex-shrink: 0;
}
.abschnitt-kasten .ueberzeile { color: var(--tinte); }

.knopfreihe { display: flex; flex-direction: column; gap: .65rem; margin: 1.4rem 0 .6rem; }
.textlink { font-weight: 600; }

/* Kleine Linien-Symbole (Häkchen, Schloss …). */
.symbol {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  margin-top: .15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--gut);
}

/* ---------------- Aufmacher ---------------- */

.aufmacher { padding: 2rem 0 3rem; }
.aufmacher h1 {
  font-size: clamp(1.85rem, 6.8vw, 2.5rem);
  line-height: 1.12;
  margin: 0 0 .9rem;
}
.unterzeile { font-size: 1.06rem; margin: 0 0 1.2rem; }

/* Johannes im Aufmacher. Am Handy kompakt über der Überschrift:
   kleines Foto, daneben der Gruß, darunter sein Satz. */
.johannes {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  column-gap: .9rem;
  row-gap: .55rem;
  align-items: center;
  margin: 0 0 1.6rem;
  padding-bottom: 1.3rem;
  border-bottom: 1px solid var(--linie);
}
.johannes-foto {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--linie);
}
.johannes-gruss { font-family: var(--schrift-titel); font-size: 1.25rem; margin: 0; }
.johannes-text { grid-column: 1 / -1; margin: 0; font-size: .95rem; color: var(--leise); }

.vertrauenszeilen { list-style: none; margin: 2rem 0 0; padding: 0; }
.vertrauenszeilen li { display: flex; gap: .7rem; margin-bottom: .8rem; font-size: .95rem; }
.vertrauenszeilen strong { display: block; }
.vertrauenszeilen span { color: var(--leise); }
.vertrauenszeilen strong, .vertrauenszeilen a { color: var(--tinte); }

/* Katrins Chart als Blatt Papier, ein zweites schaut dahinter hervor. */
.reading-blatt {
  position: relative;
  isolation: isolate;
  max-width: 19rem;
  margin: 2.4rem auto 0;
}
.blatt {
  position: relative;
  display: block;
  color: inherit;
  text-decoration: none;
  transition: transform .2s ease;
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: 12px;
  padding: 1rem 1.2rem 1.2rem;
}
.blatt::before {
  content: "";
  position: absolute;
  inset: 7px -7px -7px 7px;
  z-index: -1;
  background: var(--kasten);
  border: 1px solid var(--linie);
  border-radius: 12px;
}
.blatt-kopf {
  margin: 0 0 .6rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--leise);
}
.blatt:hover, .blatt:focus-visible { transform: translateY(-3px); }
.blatt svg { display: block; width: 100%; max-width: 11rem; height: auto; margin: 0 auto; }
.reading-blatt figcaption {
  margin: 1.1rem auto 0;
  font-size: .86rem;
  color: var(--leise);
  text-align: center;
}

/* Die Angebots-Kästen (seit 13. Oktober 2026 fünf, mit Preis und Knopf).
   Jeder Kasten ist eine Spalte: Preis und Knopf stehen unten, so sitzen
   sie nebeneinander auf einer Höhe, auch wenn die Texte verschieden lang
   sind. Die Knöpfe sind umrandet – pro Bildschirm gibt es nur einen
   gefüllten Knopf. */
.angebote { margin-top: 1.4rem; scroll-margin-top: 6rem; }
.fuer-wen { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.fuer-wen li {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--linie);
  border-top: 3px solid var(--akzent);
  border-radius: 12px;
  padding: 1.1rem 1.15rem 1.15rem;
}
.aufmacher .fuer-wen h2 { font-size: 1.3rem; margin: 0 0 .4rem; }
.fuer-wen p { margin: 0 0 .6rem; font-size: .95rem; }
.fuer-wen .frage { font-family: var(--schrift-text); font-style: italic; color: var(--leise); }
.fuer-wen .mehr { font-size: .9rem; }
.fuer-wen-kauf {
  margin-top: auto;
  padding-top: .9rem;
  border-top: 1px solid var(--linie);
}
.fuer-wen .fuer-wen-preis { margin: 0 0 .7rem; font-size: .92rem; }
.fuer-wen-preis strong {
  font-family: var(--schrift-titel);
  font-size: 1.3rem;
  font-weight: 600;
  white-space: nowrap;
}
.fuer-wen-kauf .knopf { width: 100%; }
/* Auf dem weißen Kasten wäre der weiße Hover von .umrandet unsichtbar. */
.fuer-wen-kauf .knopf.umrandet:hover { background: var(--akzent-dunkel); color: #fff; }
.angebote-hinweis { font-size: .86rem; color: var(--leise); margin: .8rem 0 0; }

/* ---------------- Kostenloses Kurzprofil (kurzprofil.php) ---------------- */

.kurzprofil-formular, .kurzprofil-ergebnis { padding: 2rem 0 1rem; }
.kurzprofil-formular .formular { margin-top: 1rem; }
.kontakt-formular { padding: 2rem 0 1rem; }

/* Gutscheincode im Bestellformular: zugeklappt, damit niemand danach sucht. */
details.gutschein { margin: 1rem 0 0; }
details.gutschein summary {
  cursor: pointer;
  color: var(--akzent-dunkel);
  font-size: .95rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}
details.gutschein[open] summary { margin-bottom: .6rem; }
.kontakt-formular .formular { margin-top: 1rem; }
.kurzprofil-merkmale {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem;
  margin: 0 0 1.6rem;
}
.kurzprofil-merkmale div { background: var(--kasten); border-radius: 10px; padding: .7rem .9rem; }
.kurzprofil-merkmale dt { font-size: .8rem; color: var(--tinte); }
.kurzprofil-merkmale dd { margin: .1rem 0 0; font-family: var(--schrift-titel); font-size: 1.1rem; }
.kurzprofil-ergebnis h2 { font-size: 1.25rem; margin: 1.6rem 0 .4rem; }
.kurzprofil-weiter {
  margin: 2.2rem 0 1.6rem;
  padding: 1.3rem 1.2rem .6rem;
  background: #fff;
  border: 1px solid var(--linie);
  border-top: 3px solid var(--akzent);
  border-radius: 12px;
}
.kurzprofil-weiter h2 { margin-top: 0; }

/* Unter dem Formular: was das Chart zeigt, Fragen zum Aufklappen. */
.kurzprofil-mehr { padding: 1.4rem 0 2rem; border-top: 1px solid var(--linie); }
.kurzprofil-mehr h2 { font-size: 1.3rem; margin: 1.4rem 0 .5rem; }
.kurzprofil-grundangaben { margin: .4rem 0 1rem; padding-left: 1.2rem; }
.kurzprofil-grundangaben li { margin: .3rem 0; }
.kurzprofil-mehr .knopfreihe { margin-top: 1.6rem; }

/* ---------------- Stimmen (Bewertungen) ---------------- */

.stimmen { display: grid; gap: 1rem; margin: 1.2rem 0; }
.stimme {
  margin: 0;
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: 12px;
  padding: 1.1rem 1.2rem 1rem;
}
.stimme-kopf { display: flex; align-items: center; gap: .8rem; }
.stimme-foto {
  width: 3.5rem; height: 3.5rem; border-radius: 50%;
  flex-shrink: 0; object-fit: cover;
}
.stimme-initiale {
  display: flex; align-items: center; justify-content: center;
  background: var(--kasten); color: var(--tinte);
  font-family: var(--schrift-titel); font-size: 1.4rem;
}
.stimme-name { margin: 0; font-weight: 700; }
.stimme-sterne { margin: 0; color: var(--akzent); letter-spacing: .1em; }
.stimme-sterne .aus { color: var(--linie); }
.stimme blockquote { margin: .8rem 0; }
.stimme blockquote p { margin: 0; font-family: var(--schrift-text); }
.stimme figcaption {
  display: flex; flex-wrap: wrap; gap: .3rem 1rem;
  font-size: .82rem; color: var(--tinte);
}
.stimme .geprueft { display: inline-flex; align-items: center; gap: .3rem; }
.stimme .geprueft .symbol { width: 1rem; height: 1rem; margin-top: 0; }
.stimmen-schnitt { font-family: var(--schrift-titel); font-size: 1.2rem; }
.bewerten { padding: 2rem 0 1rem; }
.bewerten .stimme { margin: 1.2rem 0; }
.zurueckziehen { margin-top: 2rem; }
.hinweis-gut {
  background: var(--kasten); border-left: 3px solid var(--gut);
  padding: .7rem 1rem; border-radius: 6px;
}
.sterne-wahl { border: 0; padding: 0; margin: 0 0 1.2rem; }

/* ---------------- Was im Reading steht ---------------- */

.abschnitt-reading { border-top: 1px solid var(--linie); }
.einordnung {
  margin: 1.5rem 0;
  padding: .2rem 0 .2rem 1rem;
  border-left: 3px solid var(--akzent);
}
.einordnung p { margin: 0; }

.kinderkasten {
  background: var(--kasten);
  border-radius: 12px;
  padding: 1.25rem 1.25rem .6rem;
  margin: 2rem 0 0;
}
.haken { list-style: none; margin: .9rem 0 0; padding: 0; }
.haken li { display: flex; gap: .65rem; margin-bottom: .7rem; font-size: .95rem; }
/* Grün ist nur auf Weiß hell genug; im Kasten werden die Häkchen dunkler. */
.kinderkasten .symbol { color: var(--tinte); }

.kapitelkarte {
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: 12px;
  padding: 1.25rem 1.25rem .6rem;
  margin: 2rem 0 0;
}
.kernkapitel, .kapitelliste { list-style: none; margin: .4rem 0 .8rem; padding: 0; }
/* Die Zeilen der Karte gehen bis an ihren Rand, auch wenn der Text sonst
   auf 36rem begrenzt ist. */
.kapitelkarte li, .kapitelkarte p { max-width: none; }
.kernkapitel li {
  display: flex;
  gap: 1rem;
  padding: .85rem 0;
  border-top: 1px solid var(--linie);
}
.kernkapitel li:first-child { border-top: 0; }
.kernkapitel strong { display: block; }
.kapitelzeile { display: block; font-size: .93rem; color: var(--leise); }
.kapitelnummer {
  min-width: 2.1rem;
  font-family: var(--schrift-titel);
  font-size: 1.35rem;
  line-height: 1.2;
  /* Die Ziffern tragen Inhalt und sind kein großer Text – deshalb das
     dunklere Terrakotta (5,2:1 auf Weiß), nicht --akzent (3,7:1). */
  color: var(--akzent-dunkel);
  font-variant-numeric: tabular-nums;
}
.kapitelliste li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .3rem .8rem;
  padding: .45rem 0;
  border-top: 1px solid var(--linie);
  font-size: .95rem;
}
.kapitelliste .kapitelnummer { font-size: 1rem; }
.schild {
  margin-left: auto;
  padding: .05rem .55rem;
  border: 1px solid var(--gut);
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  color: var(--gut);
  white-space: nowrap;
}
.leseprobe-hinweis { margin: 2.2rem 0 0; }

/* Aufklappen ohne Javascript: <details>. Eigenes Plus und Minus rechts
   statt des Dreiecks, damit auch ohne Farbe klar ist, was passiert. */
.fragen summary, .alle-kapitel summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  list-style: none;
  cursor: pointer;
  font-weight: 700;
  padding: .9rem 0;
}
.fragen summary::-webkit-details-marker,
.alle-kapitel summary::-webkit-details-marker { display: none; }
.fragen summary::after, .alle-kapitel summary::after {
  content: "+";
  flex-shrink: 0;
  font-family: var(--schrift-titel);
  font-weight: 400;
  font-size: 1.35rem;
  line-height: 1;
  color: var(--akzent-dunkel);
}
.fragen details[open] summary::after,
.alle-kapitel[open] summary::after { content: "\2013"; }
.alle-kapitel { border-top: 1px solid var(--linie); }
.alle-kapitel summary { color: var(--akzent-dunkel); }

/* ---------------- Das gemeinsame Reading (dunkel) ---------------- */

.abschnitt-dunkel { background: var(--tinte); color: var(--papier); }
.abschnitt-dunkel p, .abschnitt-dunkel dd { color: var(--linie); }
.abschnitt-dunkel h2, .abschnitt-dunkel h3, .abschnitt-dunkel dt { color: var(--papier); }
.abschnitt-dunkel .ueberzeile { color: var(--linie); }
.abschnitt-dunkel .vorspann { color: var(--papier); font-size: 1.06rem; }

.kreise { display: block; width: 8.5rem; height: auto; margin: 0 0 1.6rem; }
.kreis-eins, .kreis-zwei { fill: none; stroke-width: 1.5; }
.kreis-eins { stroke: var(--papier); }
.kreis-zwei { stroke: var(--akzent); }
.kreis-schnitt { fill: var(--akzent); opacity: .35; }

.verbindungsarten { list-style: none; margin: 1.6rem 0 1rem; padding: 0; }
.verbindungsarten li { padding: 1rem 0; border-top: 1px solid var(--leise); }
.verbindungsarten p { margin: 0; }

.fassungen-titel { margin-top: 2.2rem !important; }
.fassungen { margin: .6rem 0 0; }
.fassungen div { padding: .85rem 0; border-top: 1px solid var(--leise); }
.fassungen dt { font-family: var(--schrift-titel); font-size: 1.25rem; }
.fassungen dd { margin: .1rem 0 0; max-width: 36rem; }
.einordnung-hell { margin: 1.6rem 0 0; font-size: .95rem; }

/* ---------------- Preise ---------------- */

.abschnitt-preise .innen { max-width: 44rem; }
.preiskacheln {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
  margin: 1.4rem 0 1.2rem;
}
.preiskachel {
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: 12px;
  padding: 1rem .8rem;
  text-align: center;
}
.preiskachel p { margin: 0; }
/* Zwei Zeilen Platz für den Namen, damit beide Beträge auf einer Linie
   stehen – „Kinder und Jugendliche“ bricht am Handy um. */
.preiskachel-name {
  min-height: 2.6em;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  font-size: .88rem;
  font-weight: 700;
  line-height: 1.3;
}
.preiskachel-betrag {
  margin: .25rem 0 !important;
  font-family: var(--schrift-titel);
  font-size: 2.2rem;
  line-height: 1.1;
  color: var(--akzent-dunkel);
  font-variant-numeric: tabular-nums;
}
.preiskachel-zusatz { font-size: .82rem; color: var(--leise); }
.preisregel { font-weight: 600; }
.abschnitt-preise h3 { margin-top: 1.8rem; }

.preisbeispiele {
  list-style: none;
  margin: .8rem 0 1rem;
  padding: 0;
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: 12px;
  overflow: hidden;
}
.preisbeispiele li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  max-width: none;
  padding: .85rem 1rem;
  border-top: 1px solid var(--linie);
}
.preisbeispiele li:first-child { border-top: 0; }
.preisbeispiele .was { display: block; font-size: .85rem; color: var(--leise); }
.preisbeispiele .betrag {
  font-family: var(--schrift-titel);
  font-size: 1.35rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.preisbeispiele .statt {
  display: block;
  font-family: var(--schrift-ui);
  font-size: .8rem;
  color: var(--leise);
  text-align: right;
}
.preisbeispiele .hervorgehoben { background: var(--kasten); }
.preisbeispiele .hervorgehoben .was { color: var(--tinte); }

/* Lieferumfang: was drin ist und wie es kommt – über dem Kaufknopf. */
.lieferumfang {
  margin: 1.8rem 0 .4rem;
  padding: 1.2rem 1.1rem 1rem;
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: 12px;
}
.lieferumfang .ueberzeile { margin-bottom: .2rem; }
.abschnitt-preise .lieferumfang h3 { margin: 0 0 .6rem; }
.lieferumfang h4 {
  margin: .9rem 0 .35rem;
  font-family: var(--schrift-ui);
  font-size: .9rem;
  font-weight: 700;
}
.lieferumfang ul { margin: 0; padding-left: 1.1rem; }
.lieferumfang li { margin: .25rem 0; font-size: .95rem; }
.abschnitt .lieferumfang-rueckgabe {
  max-width: none;
  margin: 1rem 0 0;
  padding-top: .8rem;
  border-top: 1px solid var(--linie);
  font-size: .9rem;
  color: var(--leise);
}
@media (min-width: 40rem) {
  .lieferumfang-spalten {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.4rem;
  }
}

/* ---------------- Ablauf ---------------- */

.schritte { list-style: none; margin: 1.6rem 0 0; padding: 0; }
.schritte li { position: relative; display: flex; gap: 1rem; padding-bottom: 1.6rem; }
.schritte li:last-child { padding-bottom: 0; }
/* Eine feine Linie verbindet die Kreise. */
.schritte li:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 1.25rem;
  top: 2.5rem;
  bottom: 0;
  width: 1px;
  background: var(--linie);
}
.schrittnummer {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border: 1.5px solid var(--akzent);
  border-radius: 50%;
  background: var(--kasten);
  font-family: var(--schrift-titel);
  font-size: 1.15rem;
}
.schritte strong, .schritttext { display: block; }
.schritttext { margin-top: .15rem; }

/* ---------------- Gratis-Formular ---------------- */

.merkmale {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.2rem;
  margin: 0 0 1.6rem;
  padding: 0;
}
.merkmale li { display: flex; align-items: center; gap: .35rem; font-size: .92rem; font-weight: 700; }
.merkmale .symbol { margin-top: 0; }
.formularkarte {
  background: #fff;
  border: 1px solid var(--linie);
  border-top: 3px solid var(--akzent);
  border-radius: 12px;
  padding: 1.3rem 1.25rem .4rem;
  margin: 0 0 1rem;
}
.formularkarte .kleingedruckt { margin-top: .9rem; }

/* ---------------- Fragen ---------------- */

.fragen details { border-bottom: 1px solid var(--linie); max-width: 44rem; }
.fragen details p { margin: 0 0 1.1rem; }

/* ---------------- Grundsätze ---------------- */

.grundsaetze { list-style: none; margin: 1.4rem 0 1.2rem; padding: 0; }
.grundsaetze li {
  display: flex;
  gap: .9rem;
  padding: 1rem 0;
  border-top: 1px solid var(--linie);
}
.grundsaetze .symbol { width: 1.5rem; height: 1.5rem; }
.grundsaetze strong, .grundsatztext { display: block; }
.grundsatztext { margin-top: .15rem; font-size: .96rem; }

/* ---------------- Schluss ---------------- */

.schluss { text-align: center; padding: 4rem 0; }
.schluss p { margin-left: auto; margin-right: auto; }
.schluss .knopfreihe { align-items: center; margin-bottom: 1.2rem; }
.kreise.klein { width: 4.5rem; margin: 0 auto 1.2rem; }
.schluss .kreis-eins { stroke: var(--akzent-dunkel); }

/* ---------------- Größere Bildschirme ---------------- */

@media (min-width: 48rem) {
  .seitenkopf-innen, .start .seitenkopf-innen { padding-top: 0; }
  .kopf-reiter {
    order: 0;
    width: auto;
    margin: 0 0 0 auto;
    padding: 0 .4rem 0 0;
    gap: 1.6rem;
    font-size: .92rem;
  }
  .kopf-reiter .nur-breit { display: inline; }
  .abschnitt { padding: 5.5rem 0; }
  .abschnitt h2 { font-size: 2rem; }
  .knopfreihe { flex-direction: row; flex-wrap: wrap; }
  .knopf.gross { width: auto; }
  .schluss .knopfreihe { justify-content: center; }
  /* Tablet: zwei Kästen nebeneinander, der fünfte über die ganze Breite. */
  .fuer-wen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fuer-wen li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (min-width: 60rem) {
  .stimmen { grid-template-columns: repeat(3, 1fr); }
  /* Computer: oben die zwei Readings für einen Menschen, darunter die
     drei gemeinsamen (sechs Spalten, je zwei oder drei breit). */
  .angebote { margin-top: 3rem; }
  .fuer-wen { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.2rem; }
  .fuer-wen li { grid-column: span 2; }
  .fuer-wen li:nth-child(-n+2) { grid-column: span 3; }
  .fuer-wen li:last-child:nth-child(odd) { grid-column: span 2; }
  .aufmacher { padding: 4rem 0 4.5rem; }
  .aufmacher h1 { font-size: 3.2rem; }
  .aufmacher-text { max-width: 46rem; }
  /* Rechts neben der Überschrift war Platz: dort steht Johannes als Karte. */
  .aufmacher-raster {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 19rem;
    column-gap: 4rem;
    align-items: center;
  }
  .aufmacher-text { grid-column: 1; grid-row: 1; }
  .johannes {
    grid-column: 2;
    grid-row: 1;
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    margin: 0;
    padding: 2rem 1.6rem;
    border: 0;
    border-radius: 16px;
    background: var(--kasten);
  }
  .johannes-foto { width: 10.5rem; height: 10.5rem; border-width: 3px; }
  .johannes-gruss { font-size: 1.4rem; margin-top: .4rem; }
  .johannes-text { grid-column: auto; }
  .angebote { grid-column: 1 / -1; }
  .blatt svg { max-width: 14rem; }
  .vertrauenszeilen {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.6rem;
    margin-top: 3.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--linie);
  }
  .zweispaltig {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 4rem;
    align-items: start;
  }
  .reading-raster {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 4rem;
    align-items: start;
  }
  .reading-raster > * { grid-column: 1; }
  .reading-raster .kapitelkarte { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; }
  .abschnitt-gratis .zweispaltig { align-items: center; }
  .verbindungsarten { display: grid; grid-template-columns: 1fr 1fr; column-gap: 3rem; }
  .fassungen { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 2rem; }
  .schritte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
  .schritte li { flex-direction: column; padding-bottom: 0; }
  .schritte li:not(:last-child)::before { display: none; }
  .grundsaetze { display: grid; grid-template-columns: 1fr 1fr; column-gap: 3rem; }
}

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

@media print {
  @page { margin: 18mm 16mm; }
  body { background: #fff; font-size: 11.5pt; }
  main { max-width: none; padding: 0; }
  .seitenkopf, .seitenfuss, .drucken, .erfolgskasten, .entwurfshinweis { display: none; }
  .reading .kapitel + .kapitel { border-top: none; padding-top: 0; }
  h2, h3 { page-break-after: avoid; break-after: avoid; }
  .block, .frage, .uebersicht { page-break-inside: avoid; }
  .rechenweg { background: none; padding: 0; }
  a { color: inherit; text-decoration: none; }
}

/* ---------------- Ratgeber-Seiten (seit 8. Oktober 2026) ----------------
   /human-design-kinder/, /human-design-partnerschaft/ … Schmale Spalte
   wie Rechtstexte und Kurzprofil, lange Texte gut lesbar gegliedert. */

.ratgeber { padding: 2rem 0 1rem; }
.ratgeber-kopf h1 { margin-bottom: 1.2rem; }
.ratgeber h2 { font-size: 1.4rem; margin: 2.2rem 0 .6rem; }
.ratgeber h3 { font-size: 1.1rem; margin: 1.5rem 0 .3rem; }
.ratgeber-liste { margin: .5rem 0 1rem; padding-left: 1.2rem; }
.ratgeber-liste li { margin: .35rem 0; }
.ratgeber-kasten {
  margin: 1.6rem 0;
  padding: .9rem 1.1rem;
  background: var(--kasten);
  border-left: 3px solid var(--akzent);
  border-radius: 0 10px 10px 0;
}
.ratgeber-kasten p { margin: 0; }
.ratgeber-formular { margin: 1rem 0 1.8rem; }
.ratgeber-foto {
  display: block;
  width: 12rem; max-width: 60%; height: auto;
  margin: 0 0 1.4rem;
  border-radius: 50%;
}
.ratgeber-fragen { margin-top: .4rem; }

/* Der Kasten mit Preis und dem Weg zur Bestellung. */
.angebot {
  margin: 2rem 0 1.6rem;
  padding: 1.3rem 1.2rem .8rem;
  background: #fff;
  border: 1px solid var(--linie);
  border-top: 3px solid var(--akzent);
  border-radius: 12px;
}
.ratgeber .angebot h2 { margin: .2rem 0 .4rem; }
.angebot-preis { font-family: var(--schrift-titel); font-size: 1.15rem; margin: 0 0 .8rem; }
.angebot .merkmale { flex-direction: column; align-items: flex-start; }
.angebot .merkmale li { font-weight: 400; align-items: flex-start; }
.angebot .knopfreihe { margin-bottom: .2rem; }

/* Wer dahinter steht – am Ende jeder Ratgeber-Seite. */
.ratgeber-autor {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin-top: 2.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--linie);
  font-size: .95rem;
}
.ratgeber-autor img { flex-shrink: 0; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
.ratgeber-autor p { margin: 0 0 .3rem; }
.ratgeber-autor-name { font-weight: 700; }

.fuss-ratgeber { margin-bottom: .5rem; }