@import url('fonts.css');

/* ============================================================
   STARVIEW — Praxis für praktische Astrologie
   Statische Website, Stand 2026
   ============================================================ */

:root {
  /* Marke: warmes Creme, Gold, Bordeaux */
  --papier:     #faf4e8;
  --papier-2:   #f3ead6;
  --flaeche:    #ffffff;
  --flaeche-2:  #fbf6ec;

  --gold:       #b8912f;
  --gold-hell:  #d3ab4f;
  --gold-zart:  #ece0c4;
  --bordeaux:   #8b1538;
  --bordeaux-d: #6d0f2b;

  --text:       #38302a;
  --text-2:     #5f544a;
  --text-3:     #8b7f71;
  --linie:      #e3d7bf;
  --linie-zart: #efe7d6;
  /* --linie-z wurde an fuenf Stellen benutzt (Tafelrahmen, Kartenlinien,
     Rahmen der Angebotskarten), war aber nirgends definiert. Ungueltige
     Farbangaben fallen auf currentColor zurueck — die Rahmen erschienen
     deshalb in Textfarbe #38302a statt als zarte Linie. Wert nach der
     Vorlage: dort ist der Kachelrahmen #F5F0E8. */
  --linie-z:    #f3ede2;

  --ok:         #4a6b3f;
  --fehler:     #9a3230;

  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  /* Cinzel: Capitalis-Schrift nach roemischem Vorbild. Sie hat nur
     Grossbuchstaben-Formen — kleingeschriebene Buchstaben erscheinen als
     kleinere Versalien. Genau der Look der Vorlage. */
  --kapitael: 'Cinzel', 'Cormorant Garamond', Georgia, serif;
  /* Kursive fuer Claim, Zitat und Leitsatz: Cormorant Garamond Italic 600 */
  /* Die Schreibschrift. Cormorant Garamond bleibt als Rueckfall
     stehen, falls die Datei einmal fehlt. */
  --schraeg: 'Marck Script', 'Cormorant Garamond', cursive;
  --sans:  'Karla', -apple-system, 'Segoe UI', Roboto, sans-serif;

  --breit: 1180px;
  --schmal: 740px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--papier);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
}

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

a { color: var(--bordeaux); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--gold); }
:focus-visible { outline: 2px solid var(--bordeaux); outline-offset: 2px; }

/* ---------- Typografie ---------- */

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.15;
  margin: 0;
  text-wrap: balance;
  letter-spacing: -.008em;
}
h1 { font-size: clamp(38px, 6.2vw, 66px); font-weight: 700; }
h2 { font-size: clamp(29px, 4vw, 40px); color: var(--bordeaux); }
h3 { font-size: 24px; color: var(--bordeaux); }
h4 { font-size: 18px; font-family: var(--sans); font-weight: 700; }

p { margin: 0; }

.vorzeile {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: 12px;
}
.vorzeile::after {
  content: "";
  flex: 1 1 auto;
  max-width: 84px;
  height: 1px;
  background: var(--gold);
  opacity: .5;
}

.lead { font-size: 19px; color: var(--text-2); max-width: 62ch; }

/* ---------- Kopfzeile ---------- */

.kopf {
  background: var(--papier);
  color: var(--text);
  border-bottom: 1px solid var(--linie);
  box-shadow: 0 1px 0 rgba(179,135,58,.18);
  position: sticky;
  top: 0;
  z-index: 40;
}
.kopf-innen {
  max-width: 1420px;
  margin: 0 auto;
  padding: 0 26px;
  display: flex;
  align-items: center;
  gap: 22px;
  min-height: 78px;
}
.marke {
  display: flex;
  align-items: center;
  gap: 13px;
  color: var(--text);
  text-decoration: none;
  padding: 12px 0;
  flex: 0 0 auto;
}
.marke-zeichen { flex: 0 0 auto; width: 36px; height: 36px; }
.marke-schrift { display: flex; flex-direction: column; gap: 2px; }
.marke b {
  font-family: var(--serif);
  font-size: 25px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--gold);
  line-height: 1;
}
.marke span {
  font-size: 10px;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--text-3);
}

.nav { display: flex; flex-wrap: wrap; gap: 2px; }
.nav a {
  color: var(--text-2);
  text-decoration: none;
  font-size: 14px;
  padding: 8px 10px;
  border-radius: 3px;
  white-space: nowrap;
}
.nav a:hover { background: var(--papier-2); color: var(--bordeaux); }
.nav a[aria-current="page"] {
  color: var(--bordeaux);
  box-shadow: inset 0 -2px 0 var(--gold);
}

.nav-schalter {
  display: none;
  background: transparent;
  border: 1px solid var(--linie);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  padding: 8px 13px;
  border-radius: 3px;
  cursor: pointer;
}

/* ---------- Grundlayout ---------- */

main { display: block; }

.bahn {
  max-width: var(--breit);
  margin: 0 auto;
  padding: 0 24px;
}
.bahn-schmal { max-width: var(--schmal); margin: 0 auto; padding: 0 24px; }

section.block { padding: 62px 0; }
section.block + section.block { border-top: 1px solid var(--linie-zart); }

.kopfzone {
  background: linear-gradient(170deg, var(--papier-2) 0%, var(--papier) 78%);
  border-bottom: 1px solid var(--linie);
  padding: 56px 0 60px;
}
.kopfzone h1 { color: var(--bordeaux); }
.kopfzone .lead { color: var(--text-2); }
.kopfzone .vorzeile { color: var(--gold); }
.kopfzone-innen { display: flex; flex-direction: column; gap: 14px; }

/* Startseiten-Auftakt mit Bild */
.auftakt {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  align-items: center;
  background:
    radial-gradient(circle at 78% 42%, rgba(212,175,95,.22) 0%, rgba(212,175,95,0) 58%),
    linear-gradient(160deg, var(--papier-2) 0%, var(--papier) 70%);
  border-bottom: 1px solid var(--linie);
  overflow: hidden;
}
.auftakt-text {
  padding: 68px 24px 72px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  justify-content: center;
  max-width: 640px;
  margin-left: auto;
}
.auftakt-text h1 { color: var(--bordeaux); }
.auftakt-text .lead { color: var(--text-2); }
.auftakt-bild {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 34px 34px 40px 0;
}
.auftakt-bild img {
  width: 100%;
  max-width: 470px;
  height: auto;
}

/* ---------- Schaltflächen ---------- */

.knopf {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  padding: 12px 22px;
  border-radius: 3px;
  border: 1px solid transparent;
  cursor: pointer;
  background: var(--bordeaux);
  color: #fff;
  transition: background .14s;
}
.knopf:hover { background: var(--bordeaux-d); color: #fff; }
.knopf-hell {
  background: transparent;
  border-color: var(--gold);
  color: var(--gold);
}
.knopf-hell:hover { background: var(--gold); color: #fff; }
.knopf-linie {
  background: transparent;
  border-color: var(--linie);
  color: var(--gold);
}
.knopf-linie:hover { background: var(--flaeche-2); color: var(--gold); }
.knopf-reihe { display: flex; flex-wrap: wrap; gap: 10px; }

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

/* ---------- Fragenliste ---------- */

.fragen {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 2px;
  background: var(--linie-zart);
  border: 1px solid var(--linie-zart);
}
.fragen li {
  background: var(--flaeche);
  padding: 18px 20px;
  font-size: 16px;
  color: var(--text-2);
  display: flex;
  gap: 12px;
}
.fragen li::before {
  content: "";
  flex: 0 0 6px;
  height: 6px;
  margin-top: 10px;
  border-radius: 50%;
  background: var(--bordeaux);
}

/* ---------- Themenraster ---------- */

/* Mindestbreiten der Raster: minmax(min(Npx, 100%), 1fr) statt
   minmax(Npx, 1fr). Sonst erzwingt die Spalte ihre Mindestbreite
   auch dann, wenn der Kasten schmaler ist — gemessen auf
   schriftliche-analysen.php bei 320 px Fensterbreite: Inhalt
   265 px, Karte 290 px, die Seite bekam eine waagrechte
   Laufleiste (319 statt 305). Mit min() aendert sich oberhalb der
   Schwelle nichts, darunter schrumpft die Spalte mit. Betrifft
   alle zehn auto-fit-Raster. */
.themen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
  gap: 26px;
}
.thema { display: flex; flex-direction: column; gap: 9px; }
.thema h3 { font-size: 20px; }
.thema p { color: var(--text-2); font-size: 16px; }
.thema-bild {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  margin-bottom: 5px;
  border: 1px solid var(--linie);
  border-radius: 3px;
}
.thema-bild img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Angebotskarten (Speisekarte) ---------- */

.angebote { display: flex; flex-direction: column; gap: 22px; }

.angebot {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-top: 2px solid var(--gold);
  border-radius: 3px;
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  overflow: hidden;
}
.angebot-haupt {
  padding: 26px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.angebot-haupt h3 { font-size: 22px; }
.angebot-haupt p { color: var(--text-2); font-size: 16px; }
.angebot-haupt .beispiel {
  font-size: 15px;
  color: var(--text-3);
  border-left: 2px solid var(--linie);
  padding-left: 14px;
  font-style: italic;
}

.inhalt-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 15.5px;
  color: var(--text-2);
}
.inhalt-liste li { display: flex; gap: 9px; }
.inhalt-liste li::before {
  content: "—";
  color: var(--bordeaux);
  flex: 0 0 auto;
}

.angebot-seite {
  background: var(--flaeche-2);
  border-left: 1px solid var(--linie);
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.kennwert { display: flex; flex-direction: column; gap: 2px; }
.kennwert dt {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-3);
  font-family: var(--sans);
}
.kennwert dd {
  margin: 0;
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
  color: var(--gold);
}
.kennwert dd small {
  display: block;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 400;
  color: var(--text-2);
  margin-top: 2px;
}
.honorar dd { color: var(--bordeaux); font-size: 26px; }

.zahlung {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 13.5px;
  color: var(--text-2);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
}
.zahlung li::after { content: " ·"; color: var(--text-3); }
.zahlung li:last-child::after { content: ""; }

/* ---------- Ablaufschritte ---------- */

.schritte {
  list-style: none;
  counter-reset: s;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.schritte li {
  counter-increment: s;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--linie-zart);
  color: var(--text-2);
  font-size: 16px;
}
.schritte li:first-child { border-top: 1px solid var(--linie); }
.schritte li::before {
  content: counter(s);
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 600;
  color: var(--bordeaux);
}

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

.formular {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  padding: 30px 30px 34px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.feldgruppe { display: flex; flex-direction: column; gap: 16px; }
.feldreihe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  gap: 16px;
}
.feld { display: flex; flex-direction: column; gap: 6px; }
.feld > label {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.feld .hinweis { font-size: 13px; color: var(--text-3); }
.pflicht { color: var(--fehler); }

input[type="text"], input[type="email"], input[type="tel"],
input[type="date"], input[type="time"], select, textarea {
  font-family: var(--sans);
  font-size: 16px;
  color: var(--text);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 3px;
  padding: 11px 13px;
  width: 100%;
}
textarea { min-height: 132px; resize: vertical; line-height: 1.55; }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--bordeaux);
  outline-offset: 0;
  border-color: var(--bordeaux);
}
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--fehler); }

.kontrollfeld {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 11px;
  align-items: start;
  font-size: 15px;
  color: var(--text-2);
}
.kontrollfeld input { margin-top: 4px; }

fieldset {
  border: 1px solid var(--linie);
  border-radius: 3px;
  padding: 18px 20px 20px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
legend {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 0 7px;
}

/* Captcha */
.captcha { display: flex; flex-direction: column; gap: 10px; }
.captcha-zeile { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.captcha-bild {
  border: 1px solid var(--linie);
  border-radius: 3px;
  background: #fff;
  flex: 0 0 auto;
}
.captcha-eingabe { flex: 1 1 190px; min-width: 170px; }
.captcha-neu {
  background: transparent;
  border: 1px solid var(--linie);
  border-radius: 3px;
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--text-2);
  padding: 9px 13px;
  cursor: pointer;
}
.captcha-neu:hover { background: var(--flaeche-2); }

/* Honeypot: für Menschen unsichtbar, für Bots sichtbar im DOM */
.falle {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* Meldungen */
.meldung {
  border: 1px solid;
  border-left-width: 3px;
  border-radius: 3px;
  padding: 16px 19px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 16px;
}
.meldung h3 { font-family: var(--sans); font-size: 16px; font-weight: 700; }
.meldung.gut    { border-color: var(--ok);     background: #f0f5ec; color: #2f4a26; }
.meldung.schlecht { border-color: var(--fehler); background: #fbeeed; color: #7b2725; }
.meldung ul { margin: 4px 0 0; padding-left: 20px; }

/* ---------- Preistabelle (schriftliche Analysen) ---------- */

.tabelle-rahmen { overflow-x: auto; border: 1px solid var(--linie); background: var(--flaeche); }
table.preise { width: 100%; border-collapse: collapse; font-size: 15.5px; }
table.preise thead th {
  text-align: left;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
  background: var(--flaeche-2);
  padding: 12px 16px;
  border-bottom: 1px solid var(--linie);
  white-space: nowrap;
}
table.preise td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--linie-zart);
  vertical-align: top;
  color: var(--text-2);
}
table.preise tbody tr:last-child td { border-bottom: none; }
table.preise td.name { color: var(--text); font-weight: 700; }
table.preise td.preis {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--bordeaux);
  white-space: nowrap;
}

/* ---------- Hinweiskasten ---------- */

.kasten {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-left: 3px solid var(--gold);
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.kasten h3 { font-size: 19px; }
.kasten p { color: var(--text-2); font-size: 16px; }

/* ---------- Über mich ---------- */

.person {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 36px;
  align-items: start;
}
.person-bild { border: 1px solid var(--linie); }
.person-text { display: flex; flex-direction: column; gap: 14px; }
.person-text p { color: var(--text-2); }

/* ---------- Fußzeile ---------- */

.fuss {
  background: var(--papier-2);
  border-top: 1px solid var(--linie);
  color: var(--text-2);
  padding: 48px 0 32px;
  font-size: 15px;
}
.fuss-innen {
  max-width: var(--breit);
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: 32px;
}
.fuss h4 {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 12px;
}
.fuss a { color: var(--bordeaux); }
.fuss a:hover { color: var(--gold); }
.fuss ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.fuss-schluss {
  max-width: var(--breit);
  margin: 34px auto 0;
  padding: 18px 24px 0;
  border-top: 1px solid var(--linie);
  font-size: 13px;
  color: var(--text-3);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  justify-content: space-between;
}

/* ---------- Abstände in Textseiten ---------- */

.textseite { display: flex; flex-direction: column; gap: 26px; }
.textseite h2 { margin-top: 12px; }
.textseite p, .textseite li { color: var(--text-2); }
.textseite dl { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.textseite dt { font-weight: 700; color: var(--text); }
.textseite dd { margin: 3px 0 0; color: var(--text-2); }

.stapel { display: flex; flex-direction: column; gap: 16px; }
.stapel-weit { display: flex; flex-direction: column; gap: 30px; }

/* ---------- Mobil ---------- */

@media (max-width: 900px) {
  .auftakt { grid-template-columns: 1fr; }
  .auftakt-text { max-width: none; padding: 48px 24px 52px; }
  .auftakt-bild { min-height: 240px; order: -1; }
  .angebot { grid-template-columns: 1fr; }
  .angebot-seite { border-left: none; border-top: 1px solid var(--linie); }
  .person { grid-template-columns: 1fr; gap: 22px; }
  .person-bild { max-width: 300px; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  /* Kopfzeile und Menue schalten inzwischen bei 1150 px um, siehe dort.
     Hier stand vorher .kopf { position: static } — das nahm dem
     aufklappenden Menue seinen Bezugsrahmen, es haette beim Scrollen
     weggewandert. */
  section.block { padding: 44px 0; }
  .kopfzone { padding: 44px 0 48px; }
  .formular { padding: 22px 20px 26px; }
  .bahn, .bahn-schmal { padding: 0 20px; }
}

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

@media print {
  .kopf, .nav-schalter, .knopf-reihe, .formular { display: none; }
  body { background: #fff; font-size: 11pt; }
  .kopfzone, .auftakt, .fuss { background: #fff !important; }
  .auftakt { grid-template-columns: 1fr; }
  .auftakt-bild { display: none; }
  .angebot, .kasten, .tabelle-rahmen { break-inside: avoid; }
}


/* ---------- Kursiver Leitsatz, wie im Markenauftritt ---------- */

.leitsatz {
  font-family: var(--schraeg);
  font-style: normal;
  font-weight: 500;
  font-size: clamp(19px, 2.4vw, 25px);
  line-height: 1.45;
  color: var(--gold);
  text-align: center;
  max-width: 46ch;
  margin: 0 auto;
}
.leitsatz-band {
  background: var(--papier-2);
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
  padding: 34px 0;
}

/* ---------- Fragenkarten mit Goldkreis, wie im Konzept ---------- */

.fragenkarten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(268px, 100%), 1fr));
  gap: 20px;
}
.fragenkarte {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 4px;
  padding: 24px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 13px;
  box-shadow: 0 1px 2px rgba(56,48,42,.04);
}
.fragenkarte-kopf { display: flex; align-items: center; gap: 13px; }
.fragenkarte-kreis {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--gold-hell), var(--gold));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  color: #fff;
  font-family: Georgia, serif;
}
.fragenkarte h3 { font-size: 21px; margin: 0; }
.fragenkarte ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 15.5px;
  color: var(--text-2);
}
.fragenkarte li { display: flex; gap: 9px; }
.fragenkarte li::before {
  content: "";
  flex: 0 0 5px;
  height: 5px;
  margin-top: 9px;
  border-radius: 50%;
  background: var(--bordeaux);
  opacity: .65;
}


/* ---------- Kopfzeile nach Mockup ---------- */

.kopf-mitte {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
}

.kopf-rechts {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 0 0 auto;
}

.knopf-kontakt {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--gold);
  color: #fff;
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 700;
  text-decoration: none;
  padding: 10px 19px;
  border-radius: 4px;
  white-space: nowrap;
  transition: background .14s;
}
.knopf-kontakt:hover { background: #a37d26; color: #fff; }

/* Der Knopf heisst jetzt „Anfrage" und traegt Bordeaux statt Gold —
   dieselbe Farbe wie alle anderen Anfrage-Knoepfe auf der Seite. Gold
   bleibt den Linien, Vorzeilen und der Schreibschrift. */
.knopf-kontakt { background: var(--bordeaux); }
.knopf-kontakt:hover { background: #a4183f; color: #fff; }
.knopf-kontakt svg { width: 17px; height: 17px; flex: 0 0 auto; }

.kopf-claim {
  font-family: var(--schraeg);
  font-style: normal;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.32;
  color: var(--gold);
  text-align: right;
  max-width: 210px;
}
.kopf-claim b { font-weight: 600; font-style: normal; display: block; font-size: 15.5px; }

@media (max-width: 1560px) { .kopf-claim { display: none; } }
@media (max-width: 1120px) { .knopf-kontakt span { display: none; } }
@media (prefers-reduced-motion: reduce) { .knopf-kontakt { transition: none; } }

/* ---------- Held nach Mockup ---------- */

.held {
  position: relative;
  /* Einfarbiger Grund plus Rad-Textur links. Wichtig: die Textur endet vor
     der Bildkante, sonst entsteht dort eine sichtbare Naht. */
  background-color: var(--papier);
  background-image: url('../bilder/tierkreisrad.svg');
  background-repeat: no-repeat;
  background-position: -230px 58%;
  background-size: auto 96%;
  border-bottom: 1px solid var(--linie);
  overflow: hidden;
}
.held-innen {
  position: relative;
  max-width: 1420px;
  margin: 0 auto;
  padding: 0 0 0 26px;
  display: grid;
  grid-template-columns: minmax(0, 47%) 1fr;
  align-items: center;
  min-height: 480px;
}
.held-text {
  display: flex;
  flex-direction: column;
  gap: 19px;
  padding: 62px 26px 66px 0;
  position: relative;
  z-index: 2;
}

/* Bildseite: Bild randlos, links weich in den Cremeton auslaufend */
.held-bild {
  position: absolute;
  inset: 0 0 0 34%;
  z-index: 1;
}
.held-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 34% center;
}
.held-bild::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    var(--papier) 0%,
    var(--papier) 6%,
    rgba(250,244,232,.92) 20%,
    rgba(250,244,232,.66) 34%,
    rgba(250,244,232,.3) 48%,
    rgba(250,244,232,.06) 62%,
    rgba(250,244,232,0) 72%
  );
}

.held-titel {
  font-family: var(--kapitael);
  font-weight: 600;
  font-size: clamp(40px, 5.4vw, 74px);
  line-height: 1.06;
  letter-spacing: .025em;
  margin: 0;
}
.held-titel .gold     { color: var(--gold); display: block; }
.held-titel .bordeaux { color: var(--bordeaux); display: block; }

.zierstrich {
  width: 74px;
  height: 2px;
  background: var(--gold);
  border: none;
  margin: 2px 0 0;
}

.held-lead {
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-2);
  max-width: 40ch;
}

/* Zitat rechts unten, auf eigenem Cremeschleier fuer Lesbarkeit */
.held-zitat {
  position: absolute;
  right: 34px;
  bottom: 34px;
  z-index: 3;
  max-width: 236px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  text-align: right;
  background: rgba(250,244,232,.82);
  backdrop-filter: blur(2px);
  border-radius: 5px;
  padding: 15px 17px 16px;
}
.held-zitat p {
  font-family: var(--schraeg);
  font-style: normal;
  font-weight: 500;
  font-size: 16.5px;
  line-height: 1.42;
  color: #7d5f19;
  margin: 0;
}
.held-zitat hr {
  width: 52px; height: 1px;
  background: var(--gold);
  border: none;
  margin: 0 0 0 auto;
}

@media (max-width: 1000.98px) {
  .held-innen {
    grid-template-columns: 1fr;
    padding: 0 22px;
    min-height: 0;
  }
  .held-text { padding: 42px 0 44px; }
  .held-bild {
    position: relative;
    inset: auto;
    aspect-ratio: 16 / 9;
    margin: 0 -22px;
  }
  .held-bild::after {
    background: linear-gradient(185deg, var(--papier) 0%, rgba(250,244,232,.35) 34%, rgba(250,244,232,0) 62%);
  }
  .held-zitat {
    position: static;
    max-width: none;
    text-align: left;
    margin: 0 0 34px;
    background: transparent;
    padding: 0;
    backdrop-filter: none;
  }
  .held-zitat hr { margin: 0; }
}

/* ---------- Fragen-Sektion: Text links, drei Karten rechts ---------- */

.fragen-raster {
  display: grid;
  grid-template-columns: minmax(255px, 1.06fr) repeat(3, minmax(196px, 1fr));
  gap: 22px;
  align-items: start;
}
.fragen-einleitung { display: flex; flex-direction: column; gap: 13px; }
.fragen-einleitung h2 {
  font-size: clamp(27px, 2.5vw, 35px);
  line-height: 1.12;
}
.fragen-einleitung p:not(.vorzeile) { font-size: 16px; color: var(--text-2); }

@media (max-width: 1080px) {
  .fragen-raster { grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); }
  .fragen-einleitung { grid-column: 1 / -1; }
}

.fragenkarte {
  background: var(--flaeche);
  border: 1px solid var(--linie-zart);
  border-radius: 8px;
  padding: 24px 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 2px 5px rgba(120,95,50,.06), 0 10px 24px rgba(120,95,50,.05);
  height: 100%;
}
.fragenkarte-kopf { display: flex; align-items: center; gap: 12px; }
.fragenkarte-kreis {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--gold-hell), var(--gold));
  display: flex;
  align-items: center;
  justify-content: center;
}
.fragenkarte-kreis svg { width: 21px; height: 21px; }
.fragenkarte h3 { font-size: 20px; margin: 0; line-height: 1.2; }

/* ---------- Angebotskarten nach Mockup ---------- */

.angebote-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px 26px;
}
.angebote-merkmale {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
}

.angebot-karten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(268px, 100%), 1fr));
  gap: 20px;
}
.angebot-karte {
  display: grid;
  grid-template-columns: 108px 1fr;
  background: var(--flaeche);
  border: 1px solid var(--linie-zart);
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 2px 5px rgba(120,95,50,.06), 0 10px 24px rgba(120,95,50,.05);
  transition: box-shadow .16s, transform .16s;
}
.angebot-karte:hover {
  box-shadow: 0 4px 9px rgba(120,95,50,.1), 0 16px 34px rgba(120,95,50,.09);
  transform: translateY(-2px);
  color: inherit;
}
.angebot-karte img { width: 100%; height: 100%; object-fit: cover; }
.angebot-karte-text {
  padding: 17px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
}
.angebot-karte h3 {
  font-size: 19px;
  line-height: 1.18;
  margin: 0;
}
.angebot-karte p { font-size: 14px; color: var(--text-2); margin: 0; }
.angebot-karte-pfeil {
  align-self: flex-start;
  margin-top: 6px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
}
.angebot-karte-pfeil svg { width: 14px; height: 14px; }
.angebot-karte:hover .angebot-karte-pfeil { background: var(--gold); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .angebot-karte { transition: none; }
  .angebot-karte:hover { transform: none; }
}

/* ---------- Abschlussband mit Zierstrichen ---------- */

.schlussband {
  background: var(--papier-2);
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
  padding: 26px 0;
}
.schlussband-innen {
  max-width: var(--breit);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 22px;
}
.schlussband-innen::before,
.schlussband-innen::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--gold);
  opacity: .45;
}
.schlussband p {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(18px, 2.2vw, 24px);
  color: var(--gold);
  text-align: center;
  margin: 0;
  flex: 0 1 auto;
}

/* ---------- Abschnittsueberschriften in Kapitaelchen ---------- */

.block h2,
.kopfzone h1,
.fragen-einleitung h2 {
  font-family: var(--kapitael);
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: none;
}

/* ---------- Pfeil im Hauptknopf ---------- */

.knopf svg { width: 16px; height: 16px; flex: 0 0 auto; }

/* ---------- Druck: Held-Bild weg ---------- */

@media print {
  .held-bild { display: none; }
  .held-innen { grid-template-columns: 1fr; padding: 0 0 18px; min-height: 0; }
  .kopf-rechts, .schlussband { display: none; }
  .fragen-raster, .angebot-karten { grid-template-columns: 1fr 1fr; }
  .fragenkarte, .angebot-karte { box-shadow: none; break-inside: avoid; }
}


/* ---------- Rad-Textur im Kopfbereich zurueckhaltend halten ---------- */

.held {
  /* Das Rad soll nur zart durchscheinen. */
  background-blend-mode: normal;
}
.held::before {
  content: "";
  position: absolute;
  inset: 0 66% 0 0;
  background: linear-gradient(to right,
    rgba(250,244,232,.9) 0%,
    rgba(250,244,232,.93) 26%,
    rgba(250,244,232,.97) 40%,
    rgba(250,244,232,1) 50%);
  z-index: 0;
  pointer-events: none;
}
.held-text { position: relative; z-index: 2; }

/* ---------- Zitatkasten naeher am Mockup ---------- */

.held-zitat {
  background: rgba(255,252,246,.92);
  border: 1px solid rgba(184,145,47,.22);
  border-radius: 7px;
  box-shadow: 0 2px 6px rgba(120,95,50,.07), 0 12px 30px rgba(120,95,50,.09);
  padding: 17px 19px 18px;
}
.held-zitat p {
  font-family: var(--schraeg);
  font-style: normal;
  font-weight: 500;
  font-size: 17px;
  line-height: 1.44;
  color: #8a6a1c;
}

/* ---------- Kontakt-Knopf groesser und klarer ---------- */

.knopf-kontakt {
  font-size: 15.5px;
  font-weight: 500;
  letter-spacing: .015em;
  padding: 11px 22px;
  border-radius: 5px;
  text-rendering: optimizeLegibility;
}
.knopf-kontakt svg { width: 18px; height: 18px; }

.kopf-claim {
  font-size: 14.5px;
  line-height: 1.34;
}
.kopf-claim b {
  font-family: var(--kapitael);
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: .04em;
}

/* ---------- Fragen-Sektion: Textspalte breiter, Karten gleich hoch ---------- */

.fragen-raster {
  grid-template-columns: minmax(288px, 1.24fr) repeat(3, minmax(184px, 1fr));
  gap: 20px;
  align-items: stretch;
}
.fragen-einleitung {
  gap: 12px;
  padding-top: 2px;
}
.fragen-einleitung .vorzeile { white-space: nowrap; }
.fragen-einleitung p:not(.vorzeile) { font-size: 15.5px; line-height: 1.58; }

.fragenkarte { padding: 22px 20px 24px; gap: 13px; }
.fragenkarte h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 20.5px;
  line-height: 1.16;
}
.fragenkarte ul { font-size: 15px; line-height: 1.5; gap: 7px; }

@media (max-width: 1160.98px) {
  .fragen-einleitung .vorzeile { white-space: normal; }
}

/* ---------- Angebotskarten: Ueberschriften in derselben Serif ---------- */

.angebot-karte h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 19.5px;
}

/* ---------- Papiertextur: sehr zarte Koernung auf dem Cremeton ---------- */

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: .5;
  background-image:
    radial-gradient(rgba(184,145,47,.055) 1px, transparent 1px),
    radial-gradient(rgba(139,21,56,.03) 1px, transparent 1px);
  background-size: 17px 17px, 29px 29px;
  background-position: 0 0, 9px 13px;
}


/* ---------- Schraege Texte: Petit Formal Script ---------- */

.kopf-claim,
.held-zitat p,
.leitsatz,
.schlussband p {
  font-family: var(--schraeg);
  font-style: normal;
  font-weight: 400;
}
.kopf-claim  { font-size: 14px; line-height: 1.45; }
.kopf-claim b {
  font-family: var(--kapitael);
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: .06em;
}
.held-zitat p { font-size: 16px; line-height: 1.5; }
.schlussband p { font-size: clamp(17px, 2vw, 22px); }

/* Cinzel laeuft optisch groesser als Cormorant — Groessen nachziehen */
.held-titel { font-size: clamp(33px, 4.4vw, 60px); letter-spacing: .015em; line-height: 1.14; }
.block h2, .kopfzone h1, .fragen-einleitung h2 { letter-spacing: .015em; }
.fragen-einleitung h2 { font-size: clamp(23px, 2.1vw, 30px); line-height: 1.2; }
.marke b { font-family: var(--kapitael); font-size: 22px; letter-spacing: .1em; }

/* ---------- Grundton mit Textur auf der ganzen Seite ---------- */

body {
  background-color: var(--papier);
  background-image:
    /* zarte Faserung */
    repeating-linear-gradient(102deg,
      rgba(150,116,58,.017) 0px, rgba(150,116,58,.017) 1px,
      rgba(150,116,58,0) 1px, rgba(150,116,58,0) 4px),
    repeating-linear-gradient(6deg,
      rgba(150,116,58,.013) 0px, rgba(150,116,58,.013) 1px,
      rgba(150,116,58,0) 1px, rgba(150,116,58,0) 6px),
    /* warme Aufhellung von oben */
    linear-gradient(178deg, rgba(255,252,244,.7) 0%, rgba(255,252,244,0) 44%);
  background-attachment: fixed, fixed, scroll;
}
/* Die Punktkoernung von vorher wird nicht mehr gebraucht */
body::before { display: none; }

/* Inhaltsflaechen heben sich vom waermeren Grund ab */
section.block { position: relative; }

/* ---------- Fragen-Sektion als heller Block ---------- */

.fragen-block {
  position: relative;
  z-index: 3;
  margin: -66px auto 0;
  max-width: 1360px;
  padding: 0 26px;
}
.fragen-tafel {
  background: rgba(255,253,248,.96);
  border: 1px solid var(--linie-z);
  border-radius: 14px;
  box-shadow: 0 3px 10px rgba(120,95,50,.07), 0 22px 54px rgba(120,95,50,.1);
  padding: 34px 32px 36px;
}
.fragen-raster {
  grid-template-columns: minmax(320px, 1.32fr) repeat(3, minmax(178px, 1fr));
  gap: 24px;
}
/* Die Karten liegen auf der Tafel: keine eigene Flaeche, nur Trennlinien */
.fragen-tafel .fragenkarte {
  background: transparent;
  border: none;
  border-left: 1px solid var(--linie-z);
  border-radius: 0;
  box-shadow: none;
  padding: 2px 0 2px 24px;
}
.fragen-tafel .fragen-einleitung { padding-right: 8px; }

@media (max-width: 1160.98px) {
  .fragen-block { margin-top: -34px; }
  .fragen-tafel { padding: 26px 22px 28px; border-radius: 10px; }
  .fragen-tafel .fragenkarte { border-left: none; border-top: 1px solid var(--linie-z); padding: 16px 0 2px; }
}
@media (max-width: 720px) {
  .fragen-block { margin-top: 0; padding: 0 18px; }
}

/* ---------- Kopfbild: unten Platz fuer die Tafel ---------- */

.held-innen { padding-bottom: 96px; }
.held-zitat { bottom: 104px; }

@media (max-width: 1000.98px) {
  .held-innen { padding-bottom: 0; }
  .held-zitat { bottom: auto; }
}


/* ---------- Kopfzeile: Cinzel braucht mehr Platz ---------- */

.nav { gap: 0; }
.nav a { font-size: 13.5px; padding: 8px 9px; }
.marke { gap: 11px; }
.marke b { font-size: 20px; letter-spacing: .09em; }
.marke span { font-size: 9.5px; letter-spacing: .17em; }
.marke-zeichen { width: 33px; height: 33px; }
.knopf-kontakt { font-size: 14.5px; padding: 10px 18px; }
.kopf-innen { gap: 16px; min-height: 72px; }

@media (max-width: 1300px) {
  .nav a { font-size: 13px; padding: 8px 7px; }
}


/* ---------- Kopfbild randlos bis zum Fensterrand ---------- */

/* Bezug ist jetzt .held (volle Fensterbreite), nicht .held-innen. */
.held-bild {
  position: absolute;
  inset: 0 0 0 43%;
  z-index: 1;
  padding: 0;
}
.held-bild img { object-position: 32% center; }

/* Der Container traegt nur noch Text und Zitat */
.held-innen {
  grid-template-columns: 1fr;
  padding: 0 26px 96px;
  min-height: 500px;
}
.held-text {
  max-width: 560px;
  padding: 64px 0 0;
}
.held-zitat { right: 30px; bottom: 108px; }

/* Der Cremeschleier ueber der Rad-Textur darf nicht ins Bild reichen */
.held::before { inset: 0 57% 0 0; }

@media (max-width: 1200px) {
  .held-bild { inset: 0 0 0 38%; }
  .held-text { max-width: 460px; }
  .held::before { inset: 0 62% 0 0; }
}

@media (max-width: 1000.98px) {
  .held-bild {
    position: relative;
    inset: auto;
    aspect-ratio: 16 / 9;
    margin: 0;
  }
  .held-innen { padding: 0 22px 0; min-height: 0; }
  .held-text { max-width: none; padding: 42px 0 40px; }
  .held::before { inset: 0; }
}

/* ---------- Mobil: Überschrift vor dem Bild ----------
   Im Markup steht das Bild zuerst, weil es auf großen Schirmen absolut
   positioniert wird. Sobald es in den Fluss zurückfällt, muss der Text
   wieder nach oben — sonst sieht man beim Öffnen nur ein Bild. */

@media (max-width: 1000.98px) {
  .held {
    display: flex;
    flex-direction: column;
  }
  .held-innen { order: 1; }
  .held-bild  { order: 2; }
}


/* ============================================================
   Nachjustierung: mehr Luft in der Fragen-Tafel,
   Angebotskarten in den Proportionen der Vorlage
   ============================================================ */

/* ---------- Fragen-Tafel: drei breite Spalten ----------
   Vier Spalten in einer Reihe liessen jeden Listenpunkt drei- bis vierzeilig
   umbrechen — das wirkte gedraengt. Die Einleitung sitzt jetzt darueber. */

.fragen-tafel { padding: 38px 40px 40px; }

.fragen-raster {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px 34px;
}
.fragen-einleitung {
  grid-column: 1 / -1;
  max-width: 74ch;
  padding-right: 0;
  margin-bottom: 4px;
}
.fragen-einleitung h2 { font-size: clamp(26px, 2.4vw, 34px); }
.fragen-einleitung p:not(.vorzeile)  { font-size: 16px; line-height: 1.62; }

/* Karten: keine Trennlinie links mehr, sondern gleichwertige Spalten
   mit zarter Linie oben — sonst haengt die erste Karte ohne Rahmen. */
.fragen-tafel .fragenkarte {
  border-left: none;
  border-top: 1px solid var(--linie-z);
  padding: 22px 0 2px;
}
.fragenkarte-kopf { gap: 13px; }
.fragenkarte h3 { font-size: 21.5px; }
.fragenkarte ul { font-size: 15.5px; line-height: 1.55; gap: 9px; }

@media (max-width: 900px) {
  .fragen-raster { grid-template-columns: 1fr; gap: 4px; }
  .fragen-tafel { padding: 28px 24px 30px; }
}

/* ---------- Angebotskarten in den Proportionen der Vorlage ---------- */

.angebot-karten {
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 22px;
}
.angebot-karte {
  grid-template-columns: 39% 1fr;
  border-radius: 10px;
  border-color: var(--linie-z);
  min-height: 132px;
}
.angebot-karte img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.angebot-karte-text {
  padding: 18px 19px 18px 20px;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 5px;
  align-content: start;
}
.angebot-karte h3 {
  font-family: var(--kapitael);
  font-weight: 600;
  font-size: 17.5px;
  line-height: 1.24;
  letter-spacing: .015em;
}
.angebot-karte p {
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text-2);
}
/* Pfeil rechts unten in der Textspalte */
.angebot-karte-pfeil {
  align-self: end;
  justify-self: end;
  margin: 4px 0 0;
  width: 32px;
  height: 32px;
}

@media (max-width: 560px) {
  .angebot-karte { grid-template-columns: 34% 1fr; min-height: 112px; }
  .angebot-karte h3 { font-size: 16.5px; }
}

/* ---------- Abschnittsabstaende: etwas mehr Ruhe ---------- */

section.block { padding: 66px 0; }
.angebote-kopf { margin-bottom: 4px; }

/* ============================================================
   Bildausschnitt und Lichtblase hinter dem Text
   ============================================================ */

/* ---------- Bild weiter nach links ----------
   object-fit: cover beschneidet bei diesem Seitenverhältnis rund 30 % der
   Bildbreite. Mit 32 % fiel der Kopf der Figur samt Radausschnitt heraus. */
.held-bild img { object-position: 17% center; }

@media (max-width: 1200px) {
  .held-bild img { object-position: 22% center; }
}

/* ---------- Lichtblase hinter dem Text ----------
   Als eigenes Element auf der Textspalte, nicht auf .held: dort erzeugte
   der Verlauf an der Bildkante eine sichtbare Naht, weil der Verlauf auf
   dem Bild gegen den reinen Grundton ausblendet. */
.held-text::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -14%;
  top: -8%;
  width: 128%;
  height: 122%;
  background:
    radial-gradient(ellipse 58% 52% at 38% 46%,
      rgba(255, 253, 247, .94) 0%,
      rgba(255, 253, 247, .78) 42%,
      rgba(255, 253, 247, .34) 68%,
      rgba(255, 253, 247, 0) 84%);
  pointer-events: none;
}

@media (max-width: 1000.98px) {
  .held-text::before { display: none; }
}

/* ============================================================
   Held-Bild: Zuschnitt passt jetzt zum Bildbereich
   ============================================================ */

/* Das Bild ist auf 1,80 : 1 zugeschnitten — dasselbe Verhältnis wie der
   Bildbereich. Damit muss object-fit kaum beschneiden, und die Figur
   behält Luft nach oben und unten wie in der Vorlage.
   Vorher: Zuschnitt 1,94 : 1 plus cover-Zoom = angeschnittene Figur. */
.held-bild img { object-position: center center; }
.held-innen { min-height: 545px; }

@media (max-width: 1200px) {
  .held-bild img { object-position: 42% center; }
  .held-innen { min-height: 480px; }
}

/* ---------- Lichtblase deutlicher ----------
   Im Mockup sitzt die Überschrift auf einem klar aufgehellten Feld.
   Zwei übereinanderliegende Ellipsen: eine große weiche für die Fläche,
   eine engere für den Bereich direkt hinter der Schrift. */
.held-text::before {
  left: -20%;
  top: -12%;
  width: 142%;
  height: 132%;
  background:
    radial-gradient(ellipse 46% 40% at 34% 40%,
      rgba(255, 254, 250, .97) 0%,
      rgba(255, 254, 250, .88) 46%,
      rgba(255, 254, 250, .42) 72%,
      rgba(255, 254, 250, 0) 88%),
    radial-gradient(ellipse 62% 58% at 40% 50%,
      rgba(253, 250, 243, .82) 0%,
      rgba(253, 250, 243, .52) 52%,
      rgba(253, 250, 243, 0) 82%);
}


/* ============================================================
   Feinschliff nach Vorlagenvergleich
   ============================================================ */

/* ---------- 1) Vorzeile im Kopfbereich ohne Zierlinie ----------
   In der Vorlage endet die Zeile nach „NEUE PERSPEKTIVEN". Die Linie
   bleibt nur bei den Abschnittsvorzeilen weiter unten. */
.held-text .vorzeile::after { display: none; }
.held-text .vorzeile {
  letter-spacing: .23em;
  font-size: 11.5px;
  gap: 0;
}

/* ---------- 2) Knoepfe mit runden Kanten ---------- */
.knopf {
  border-radius: 30px;
  padding: 14px 27px;
  font-weight: 500;
  letter-spacing: .015em;
  font-size: 15.5px;
  box-shadow: 0 2px 6px rgba(109, 15, 43, .18);
}
.knopf:hover { box-shadow: 0 3px 10px rgba(109, 15, 43, .26); }
.knopf-hell, .knopf-linie { border-radius: 30px; padding: 13px 26px; box-shadow: none; }
.knopf-kontakt { border-radius: 28px; padding: 11px 23px; }
.captcha-neu { border-radius: 22px; }
.angebot-karte-pfeil { border-radius: 50%; }

/* ---------- 3) Zitat direkt auf dem Bild, Schrift weiss ----------
   Ohne Kasten wie in der Vorlage. Damit die Schrift auf dem hellen
   Nebel lesbar bleibt, tragen die Zeilen einen weichen dunklen Schatten. */
.held-zitat {
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  padding: 0;
  max-width: 268px;
}
.held-zitat p {
  color: #fffdf7;
  font-size: 18px;
  line-height: 1.5;
  text-shadow:
    0 1px 2px rgba(74, 42, 8, .55),
    0 2px 10px rgba(74, 42, 8, .45),
    0 0 26px rgba(74, 42, 8, .3);
}
.held-zitat hr {
  background: rgba(255, 253, 247, .8);
  width: 58px;
  height: 1px;
  box-shadow: 0 1px 3px rgba(74, 42, 8, .4);
}

/* ---------- 4) Claim oben rechts dreizeilig ---------- */
.kopf-claim {
  max-width: 268px;
  font-size: 14.5px;
  line-height: 1.42;
}
.kopf-claim b { font-size: 15px; }
@media (max-width: 1620px) { .kopf-claim { display: none; } }

/* ---------- 5) Grundton waermer, Textur sichtbar ---------- */
:root {
  --papier:     #f6ecd9;
  --papier-2:   #efe2c9;
  --flaeche:    #fffdf8;
  --flaeche-2:  #f9f1e2;
  --linie:      #ddcdaa;
  --linie-zart: #e9dcc1;
}

body {
  background-color: var(--papier);
  background-image:
    /* Faserung in zwei Richtungen */
    repeating-linear-gradient(102deg,
      rgba(139, 104, 46, .045) 0px, rgba(139, 104, 46, .045) 1px,
      rgba(139, 104, 46, 0) 1px, rgba(139, 104, 46, 0) 3px),
    repeating-linear-gradient(7deg,
      rgba(139, 104, 46, .035) 0px, rgba(139, 104, 46, .035) 1px,
      rgba(139, 104, 46, 0) 1px, rgba(139, 104, 46, 0) 5px),
    /* unregelmaessige Koernung */
    radial-gradient(rgba(139, 104, 46, .05) .8px, transparent .8px),
    radial-gradient(rgba(139, 104, 46, .035) .8px, transparent .8px),
    /* warme Aufhellung von oben */
    linear-gradient(178deg, rgba(255, 251, 241, .55) 0%, rgba(255, 251, 241, 0) 38%);
  background-size: auto, auto, 13px 13px, 23px 23px, auto;
  background-position: 0 0, 0 0, 0 0, 7px 11px, 0 0;
  background-attachment: fixed, fixed, fixed, fixed, scroll;
}

/* Die helle Tafel und die Karten heben sich jetzt deutlich ab */
.fragen-tafel { background: rgba(255, 253, 248, .97); }
.angebot-karte, .fragenkarte, .kasten, .formular, .tbl-scroll, .angebot { background: var(--flaeche); }

/* Kopfbereich und Kopfzeile behalten den hellen Ton */
.held { background-color: #fbf5ea; }
.kopf { background: #fbf5ea; }
.held::before {
  background: linear-gradient(to right,
    rgba(251, 245, 234, .9) 0%,
    rgba(251, 245, 234, .93) 26%,
    rgba(251, 245, 234, .97) 40%,
    rgba(251, 245, 234, 1) 50%);
}
.held-bild::after {
  background: linear-gradient(
    to right,
    #fbf5ea 0%,
    #fbf5ea 6%,
    rgba(251, 245, 234, .92) 20%,
    rgba(251, 245, 234, .66) 34%,
    rgba(251, 245, 234, .3) 48%,
    rgba(251, 245, 234, .06) 62%,
    rgba(251, 245, 234, 0) 72%
  );
}
.held-text::before {
  background:
    radial-gradient(ellipse 46% 40% at 34% 40%,
      rgba(253, 249, 240, .97) 0%,
      rgba(253, 249, 240, .88) 46%,
      rgba(253, 249, 240, .42) 72%,
      rgba(253, 249, 240, 0) 88%),
    radial-gradient(ellipse 62% 58% at 40% 50%,
      rgba(251, 245, 234, .82) 0%,
      rgba(251, 245, 234, .52) 52%,
      rgba(251, 245, 234, 0) 82%);
}

@media (max-width: 1000.98px) {
  .held-zitat p { color: var(--bordeaux); text-shadow: none; font-size: 17px; }
  .held-zitat hr { background: var(--gold); box-shadow: none; }
}

/* ============================================================
   Kopfbereich: Höhe wächst mit der Breite mit
   ============================================================ */

/* Der Bildbereich ist 57 % der Fensterbreite. Damit sein Seitenverhältnis
   dem Bild (1,80 : 1) entspricht, muss die Höhe mitwachsen: 57 / 1,8 = 31,7 vw.
   Mit fester Höhe wurde das Bild auf breiten Schirmen vertikal beschnitten
   (bei 1913 px waren nur 91 % der Höhe sichtbar). */
.held-innen {
  min-height: clamp(470px, 31.5vw, 690px);
}

/* Der Verlauf startete mit 6 % deckendem Cremeton — das wirkte wie ein
   Abstand zwischen Text und Bild, obwohl beide sich sogar überlappen. */
.held-bild::after {
  background: linear-gradient(
    to right,
    rgba(251, 245, 234, .97) 0%,
    rgba(251, 245, 234, .84) 12%,
    rgba(251, 245, 234, .58) 26%,
    rgba(251, 245, 234, .26) 40%,
    rgba(251, 245, 234, .05) 55%,
    rgba(251, 245, 234, 0) 66%
  );
}

/* Auf sehr breiten Schirmen darf das Bild etwas früher beginnen,
   damit es näher am Text sitzt. */
@media (min-width: 1700px) {
  .held-bild { inset: 0 0 0 40%; }
  .held::before { inset: 0 60% 0 0; }
}

@media (max-width: 1000.98px) {
  .held-innen { min-height: 0; }
}

/* ---------- Höhe exakt an den Bildanteil koppeln ----------
   Der Bildbereich ist 57 % der Fensterbreite, ab 1700 px dann 60 %.
   Damit sein Seitenverhältnis dem Bild (1,80) entspricht:
     Höhe = Bildanteil / 1,80
   57 / 1,8 = 31,7 vw   ·   60 / 1,8 = 33,3 vw
   Eine einzige Formel kann beide Fälle nicht treffen. */
.held-innen { min-height: clamp(470px, 31.7vw, 700px); }

@media (min-width: 1700px) {
  .held-innen { min-height: clamp(540px, 33.4vw, 760px); }
}

@media (max-width: 1200px) and (min-width: 1001px) {
  /* Dort ist der Bildanteil 62 %: 62 / 1,8 = 34,4 vw */
  .held-innen { min-height: clamp(470px, 34.4vw, 620px); }
}


/* ============================================================
   Lesbarkeit: kräftigerer Text
   ============================================================ */

/* Kein -webkit-font-smoothing: es schaltet auf Windows das
   Subpixel-Antialiasing ab, wodurch Text dünner und flauer erscheint.
   Ohne die Eigenschaft rendert Chrome kräftiger und gleichmäßiger. */

:root {
  --text:    #2f2822;   /* war #38302a */
  --text-2:  #4b4138;   /* war #5f544a — deutlich dunkler */
  --text-3:  #7a6e5f;   /* war #8b7f71 */
}

body { font-size: 16.5px; }

/* Lauftext in den Angebotskarten: größer und dunkler.
   16 px in helleren Braunton war bei feiner Schrift zu schwach. */
.angebot-haupt p,
.thema p,
.fragenkarte ul,
.kasten p,
.textseite p,
.textseite li,
.sec-note {
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--text-2);
}

.inhalt-liste { font-size: 16px; color: var(--text-2); }
.angebot-haupt .beispiel { font-size: 15.5px; color: #6b5f52; }

/* Kennwerte in der Seitenspalte klarer */
.kennwert dt { color: #6b5f52; font-size: 11.5px; }
.kennwert dd { color: var(--text); }
.kennwert dd small { color: var(--text-2); font-size: 14px; }
.zahlung { font-size: 14.5px; color: var(--text-2); }

/* Formularhinweise */
.feld .hinweis { font-size: 13.5px; color: #6b5f52; }

/* Überschriften der Karten etwas kräftiger */
.angebot-haupt h3 { font-weight: 700; }

/* ============================================================
   Kopfbild: flacher und weiter nach rechts
   ============================================================ */

/* Der Zuschnitt ist jetzt 2,20 : 1 statt 1,80 : 1 — dadurch bleibt
   der rechte Bildteil erhalten und der Kopfbereich wird flacher.
     Höhe = Bildanteil / 2,20 */
.held-innen { min-height: clamp(420px, 25.9vw, 560px); }

@media (min-width: 1700px) {
  .held-innen { min-height: clamp(440px, 27.3vw, 600px); }
}
@media (max-width: 1200px) and (min-width: 1001px) {
  .held-innen { min-height: clamp(420px, 28.2vw, 520px); }
}
@media (max-width: 1000.98px) {
  .held-innen { min-height: 0; }
}

/* ============================================================
   Strichstärke gegen die Farbsäume
   ============================================================ */

/* Windows rendert mit ClearType (Subpixel-Antialiasing). Bei dünnen
   Strichen entstehen dabei rötliche und bläuliche Säume, die wortweise
   unterschiedlich ausfallen — der Text wirkt fleckig und flau.
   Karla 500 hat kräftigere Striche; die Säume fallen dadurch kaum
   noch auf, und der Text liest sich satter. */

body { font-weight: 500; }

.angebot-haupt p,
.thema p,
.fragenkarte ul,
.fragenkarte li,
.kasten p,
.textseite p,
.textseite li,
.inhalt-liste,
.sec-note,
.lead,
.held-lead,
.fragen-einleitung p:not(.vorzeile),
.angebot-karte p,
.zahlung,
.fuss,
.schritte li {
  font-weight: 500;
}

/* Auszeichnungen brauchen dann mehr Abstand nach oben */
strong, b, th, .grp-label, .feld > label { font-weight: 700; }

/* Die Vorzeilen und Kleintexte bleiben bei 700, sonst verlieren sie
   gegen den kräftigeren Lauftext an Wirkung */
.vorzeile, .angebote-merkmale { font-weight: 700; }

/* ---------- Kopfzeile darf breiter sein als der Inhalt ----------
   Marke, sechs Menüpunkte, Kontakt-Knopf und Claim brauchen mehr als
   die 1420 px des Inhaltscontainers — sonst rutscht „Über mich"
   in eine zweite Zeile. */
.kopf-innen { max-width: 1720px; padding: 0 32px; }
.nav { flex-wrap: nowrap; }

/* ---------- Zitat im Bild, am rechten Bildrand ----------
   Bezug ist .held (fensterbreit), nicht der 1420-px-Container. Weil
   .held-bild dort mit inset 0 aufliegt, ist der rechte Rand derselbe.
   Es liegt über dem Cremeverlauf, deshalb z-index 3. */
.held .held-zitat {
  position: absolute;
  right: 4.5%;
  bottom: 13%;
  left: auto;
  top: auto;
  z-index: 3;
  max-width: 280px;
}

@media (max-width: 1000.98px) {
  .held .held-zitat {
    position: static;
    max-width: none;
    margin: 0;
    padding: 22px 22px 26px;
    text-align: left;
  }
  .held .held-zitat p { color: #fffdf7; text-shadow: 0 1px 3px rgba(74,42,8,.7), 0 2px 12px rgba(74,42,8,.5); }
  .held .held-zitat hr { margin: 0; background: rgba(255,253,247,.8); }
}


/* ============================================================
   Schräge Texte: Cormorant Garamond Italic 600
   ============================================================ */

/* Ausgewählt aus der Vergleichsseite. Petit Formal Script war zu
   verspielt; die Renaissance-Kursive wirkt ruhiger und liest sich
   auf dem Bild besser. Gewicht 600, weil 500 auf dem hellen
   Bildhintergrund zu zart wird. */

.kopf-claim,
.held-zitat p,
.leitsatz,
.schlussband p,
.angebot-haupt .beispiel {
  font-family: var(--schraeg);
  font-style: italic;
  font-weight: 600;
}

/* Cormorant läuft kleiner als Petit Formal Script — Größen nachziehen */
.kopf-claim   { font-size: 16px;   line-height: 1.34; }
.kopf-claim b { font-size: 15px; }
.held-zitat p { font-size: 20px;   line-height: 1.42; }
.schlussband p, .leitsatz { font-size: clamp(20px, 2.3vw, 27px); }
.angebot-haupt .beispiel { font-size: 17px; line-height: 1.5; font-weight: 500; }



/* ============================================================
   Hintergrund: zurück auf gezeichnete Textur
   ============================================================ */

/* Die zwei generierten Pergament-Bilder sind zurückgenommen.
   Der Grund bleibt der wärmere Ton mit CSS-Faserung, der
   Kopfbereich trägt wieder das gezeichnete Tierkreisrad. */

body {
  background-color: var(--papier);
  background-image:
    repeating-linear-gradient(102deg,
      rgba(139, 104, 46, .045) 0px, rgba(139, 104, 46, .045) 1px,
      rgba(139, 104, 46, 0) 1px, rgba(139, 104, 46, 0) 3px),
    repeating-linear-gradient(7deg,
      rgba(139, 104, 46, .035) 0px, rgba(139, 104, 46, .035) 1px,
      rgba(139, 104, 46, 0) 1px, rgba(139, 104, 46, 0) 5px),
    radial-gradient(rgba(139, 104, 46, .05) .8px, transparent .8px),
    radial-gradient(rgba(139, 104, 46, .035) .8px, transparent .8px),
    linear-gradient(178deg, rgba(255, 251, 241, .55) 0%, rgba(255, 251, 241, 0) 38%);
  background-size: auto, auto, 13px 13px, 23px 23px, auto;
  background-position: 0 0, 0 0, 0 0, 7px 11px, 0 0;
  background-attachment: fixed, fixed, fixed, fixed, scroll;
}
body::before { display: none; }

.held {
  background-color: #fbf5ea;
  background-image: url('../bilder/tierkreisrad.svg');
  background-repeat: no-repeat;
  background-position: -230px 58%;
  background-size: auto 96%;
}

/* Der Schleier wieder kräftiger — das gezeichnete Rad ist deutlicher
   als die Pergament-Textur und würde sonst mit der Schrift konkurrieren. */
.held::before {
  inset: 0 57% 0 0;
  background: linear-gradient(to right,
    rgba(251, 245, 234, .9) 0%,
    rgba(251, 245, 234, .93) 26%,
    rgba(251, 245, 234, .97) 40%,
    rgba(251, 245, 234, 1) 50%);
}

.held-bild::after {
  background: linear-gradient(
    to right,
    rgba(251, 245, 234, .97) 0%,
    rgba(251, 245, 234, .84) 12%,
    rgba(251, 245, 234, .58) 26%,
    rgba(251, 245, 234, .26) 40%,
    rgba(251, 245, 234, .05) 55%,
    rgba(251, 245, 234, 0) 66%
  );
}

.held-text::before {
  background:
    radial-gradient(ellipse 46% 40% at 34% 40%,
      rgba(253, 249, 240, .97) 0%,
      rgba(253, 249, 240, .88) 46%,
      rgba(253, 249, 240, .42) 72%,
      rgba(253, 249, 240, 0) 88%),
    radial-gradient(ellipse 62% 58% at 40% 50%,
      rgba(251, 245, 234, .82) 0%,
      rgba(251, 245, 234, .52) 52%,
      rgba(251, 245, 234, 0) 82%);
}

.fragen-tafel { background: rgba(255, 253, 248, .97); }
.kopf { background: #fbf5ea; backdrop-filter: none; }
.fuss { background: var(--papier-2); }

@media (max-width: 1000.98px) {
  .held { background-size: auto 46%; background-position: -120px top; }
  .held::before {
    inset: 0;
    background: linear-gradient(180deg,
      rgba(251, 245, 234, .86) 0%,
      rgba(251, 245, 234, .94) 44%,
      rgba(251, 245, 234, .98) 72%);
  }
}

/* ============================================================
   Angebotskarten: vier Spalten bei Breitbild
   ============================================================ */

/* Die Sektion bekommt eine eigene, breitere Bahn — mit den 1180 px der
   Standardbahn blieben pro Karte nur 278 px, und auto-fit brach dann
   auf drei Spalten um. */
.angebot-bahn {
  max-width: 1560px;
  margin: 0 auto;
  padding: 0 26px;
}

.angebot-karten { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }

@media (min-width: 1180px) {
  /* Feste vier Spalten: verlässlich eine Zeile, kein Umbruch auf drei */
  .angebot-karten { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.angebot-karte { grid-template-columns: 42% 1fr; min-height: 148px; }
.angebot-karte-text { padding: 17px 18px 17px 19px; }
.angebot-karte h3 { font-size: 17px; }
.angebot-karte p { font-size: 13.5px; line-height: 1.44; }

@media (max-width: 1400px) and (min-width: 1180px) {
  .angebot-karte h3 { font-size: 16px; }
  .angebot-karte p { font-size: 13px; }
  .angebot-karte { grid-template-columns: 38% 1fr; }
}

/* ---------- Kartenüberschriften: langes Wort bricht sonst aus ----------
   „Beratungsanfragen" ist in Cinzel breiter als die 200 px Textspalte
   einer Viertelkarte und lief über den Rand. */
.angebot-karte h3 {
  font-size: 16px;
  line-height: 1.2;
  hyphens: auto;
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
}
.angebot-karte-text { min-width: 0; padding: 15px 15px 15px 17px; }
.angebot-karte p { font-size: 13px; line-height: 1.42; min-width: 0; }
.angebot-karte { grid-template-columns: 38% 1fr; }

@media (min-width: 1560px) {
  .angebot-karte h3 { font-size: 17px; }
  .angebot-karte p { font-size: 13.5px; }
}

/* ---------- Keine Silbentrennung in den Kartenüberschriften ----------
   „Persönliche" und „Beratungen" passen einzeln in die 191 px der
   Textspalte — hyphens: auto trennte trotzdem („Persönli-che"). */
.angebot-karte h3 {
  hyphens: none;
  -webkit-hyphens: none;
  overflow-wrap: break-word;   /* nur als Notbremse für Extremfälle */
  font-size: 15.5px;
}
@media (min-width: 1620px) {
  .angebot-karte h3 { font-size: 16.5px; }
}

/* ============================================================
   Pergament im Kopfbereich, breitere Tafel
   ============================================================ */

/* Das Bild ist beim Aufbereiten entsättigt (62 %) und aufgehellt (+26)
   worden — es ist dadurch hell genug, dass es ohne starken Schleier
   auskommt. Das Rad sitzt links im Bild und liegt damit hinter der
   Überschrift, nicht mehr halb außerhalb wie das gezeichnete SVG. */
.held {
  background-color: #fdf9ef;
  background-image: url('../bilder/held-pergament.jpg');
  background-repeat: no-repeat;
  background-position: left center;
  background-size: cover;
}

/* Nur noch ein Hauch Schleier: die Textur soll sichtbar bleiben. */
.held::before {
  inset: 0 57% 0 0;
  background: linear-gradient(to right,
    rgba(253, 249, 239, .12) 0%,
    rgba(253, 249, 239, .22) 40%,
    rgba(253, 249, 239, .6) 56%,
    rgba(253, 249, 239, .92) 68%);
}

/* Die Lichtblase trägt jetzt die Lesbarkeit — etwas kräftiger, weil
   das Rad direkt hinter der Schrift liegt. */
.held-text::before {
  background:
    radial-gradient(ellipse 44% 38% at 34% 40%,
      rgba(255, 253, 247, .96) 0%,
      rgba(255, 253, 247, .86) 48%,
      rgba(255, 253, 247, .4) 74%,
      rgba(255, 253, 247, 0) 90%),
    radial-gradient(ellipse 60% 56% at 40% 50%,
      rgba(253, 249, 239, .76) 0%,
      rgba(253, 249, 239, .46) 54%,
      rgba(253, 249, 239, 0) 84%);
}

.held-bild::after {
  background: linear-gradient(
    to right,
    rgba(253, 249, 239, .97) 0%,
    rgba(253, 249, 239, .84) 12%,
    rgba(253, 249, 239, .58) 26%,
    rgba(253, 249, 239, .26) 40%,
    rgba(253, 249, 239, .05) 55%,
    rgba(253, 249, 239, 0) 66%
  );
}

@media (max-width: 1000.98px) {
  .held { background-size: cover; background-position: left top; }
  .held::before {
    inset: 0;
    background: linear-gradient(180deg,
      rgba(253, 249, 239, .5) 0%,
      rgba(253, 249, 239, .78) 44%,
      rgba(253, 249, 239, .9) 72%);
  }
}

/* ---------- Fragen-Tafel auf etwa 78 % der Fensterbreite ---------- */

.fragen-block {
  width: 78vw;
  max-width: 1560px;
  margin: -66px auto 0;
  padding: 0;
}

@media (max-width: 1160.98px) {
  .fragen-block { width: auto; margin-top: -34px; padding: 0 22px; }
}
@media (max-width: 720px) {
  .fragen-block { margin-top: 0; padding: 0 18px; }
}

/* ---------- Tafel wirklich auf ~76 % der Fensterbreite ----------
   Die vorige Obergrenze von 1560 px griff auf einem 2560-px-Schirm
   schon bei 61 %. */
.fragen-block {
  width: 76vw;
  max-width: 1960px;
}

/* ---------- Rad neben die Überschrift ----------
   Mit background-size: cover wurde das Bild auf einem breiten Schirm so
   stark vergrößert, dass vom Rad nur ein Ausschnitt am linken Rand blieb.
   Über die Höhe skaliert bleibt es vollständig und lässt sich gezielt
   positionieren. */
.held {
  background-size: auto 118%;
  background-position: 26% center;
}

@media (max-width: 1400px) {
  .held { background-size: auto 112%; background-position: 12% center; }
}
@media (max-width: 1000.98px) {
  .held { background-size: cover; background-position: left top; }
}

/* ---------- Pergament linksbündig: keine sichtbare Bildkante ----------
   Bei background-position: 26 % begann das Bild mitten in der Fläche und
   die linke Bildkante war als senkrechte Linie zu sehen. Linksbündig
   liegt sie außerhalb, das Rad ragt von links herein — und rechts wird
   das Bildende vom Schützin-Bild überdeckt. */
.held {
  background-position: left center;
  background-size: auto 128%;
}

@media (max-width: 1400px) {
  .held { background-position: left center; background-size: auto 120%; }
}
@media (max-width: 1000.98px) {
  .held { background-size: cover; background-position: left top; }
}

/* ---------- Übergang Pergament → Schützin-Bild ----------
   Das Pergament läuft unter dem Schützin-Bild noch etwas weiter. Weil der
   Verlauf darauf am linken Rand nur 97 % deckend war, schien das Pergament
   dort mit wenigen Prozent durch — sichtbar als feine senkrechte Kante.
   Die ersten 10 % sind jetzt vollständig deckend. */
.held-bild::after {
  background: linear-gradient(
    to right,
    rgb(253, 249, 239) 0%,
    rgb(253, 249, 239) 9%,
    rgba(253, 249, 239, .82) 20%,
    rgba(253, 249, 239, .56) 32%,
    rgba(253, 249, 239, .26) 44%,
    rgba(253, 249, 239, .05) 58%,
    rgba(253, 249, 239, 0) 68%
  );
}


/* ============================================================
   KOPFBEREICH bis 1000 px — Bild, Text, Zitat untereinander
   ============================================================
   Die alten Regeln fuer diesen Bereich stammen aus der Zeit, als das
   Zitat noch im Bildelement lag: dort stand es weiss auf dem Foto und
   der Text kam vor dem Bild. Jetzt haengt es direkt an .held, damit
   waere es ohne order-Angabe an den Anfang gerutscht — weisse Schrift
   auf hellem Grund. Deshalb hier dieselbe Ordnung wie am Handy und das
   Zitat als eigener Pergamentkasten. */

@media (max-width: 1000.98px) {
  .held-bild  { order: 1; }
  .held-innen { order: 2; }
  .held-zitat { order: 3; }

  .held .held-zitat,
  .held-zitat {
    position: static;
    max-width: 620px;
    margin: 26px auto 32px;
    padding: 24px 26px 26px;
    text-align: center;
    background: var(--papier-2) url('../bilder/held-pergament.jpg') center/cover;
    border: 1px solid var(--linie);
    border-radius: 8px;
    backdrop-filter: none;
  }
  .held .held-zitat p,
  .held-zitat p {
    color: #7d5f19;
    text-shadow: none;
  }
  .held .held-zitat hr,
  .held-zitat hr {
    margin: 14px auto 0;
    background: var(--gold);
    box-shadow: none;
  }
}

/* ============================================================
   SCHMALE UND MITTLERE SCHIRME — Kopfzeile einklappen
   ============================================================
   Die Kopfzeile im Desktop-Zustand braucht 1248 px: Marke 188 +
   Menue 836 (Summe der sechs Links) + Kontaktknopf 128 + zwei
   Abstaende + 64 px Innenrand. Darunter lief sie aus dem Fenster —
   Querscrollen ab 761 px, also auf jedem Tablet im Hochformat.
   Deshalb wird sie hier zum Hamburger, und unten erscheint die
   Navigationsleiste.

   Die Grenze liegt bei 1280 px: das gibt den 1248 px etwas Reserve,
   und ein 1366-px-Laptop behaelt die volle Leiste. Mit 1151 war sie
   zu niedrig — der Hamburger verschwand, aber der Kontaktknopf stand
   dann ausserhalb des Fensters.
   Das Seitenlayout selbst schaltet erst bei 760 px um — auf einem
   Tablet ist fuer zwei Spalten genug Platz. */

@media (max-width: 1279.98px) {
  .kopf-innen { flex-wrap: nowrap; }
  .kopf-mitte { flex: 0 0 auto; order: 3; }
  .kopf-rechts { display: none; }

  /* Menüschalter als Hamburger-Symbol */
  .nav-schalter {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    padding: 0;
    align-items: center;
    order: 4;
    font-size: 0;
  }
  .nav-schalter::before,
  .nav-schalter::after {
    content: "";
    display: block;
    width: 22px;
    height: 2px;
    background: var(--gold);
    border-radius: 2px;
  }
  .nav-schalter::before { box-shadow: 0 7px 0 var(--gold); }

  /* Das Menue klappt unter der Kopfzeile auf. Bezugsrahmen ist .kopf,
     die sticky und damit positioniert ist. top richtet sich nach deren
     Hoehe: 72 px normal, 62 px im Handy-Block. */
  .nav {
    display: none;
    position: absolute;
    left: 0; right: 0;
    top: 72px;
    width: auto;
    flex-direction: column;
    gap: 0;
    background: #fdfaf2;
    border-bottom: 1px solid var(--linie);
    box-shadow: 0 12px 26px rgba(120, 95, 50, .12);
    padding: 6px 24px 12px;
    z-index: 60;
  }
  .nav.offen { display: flex; }
  .nav a {
    padding: 13px 4px;
    font-size: 15.5px;
    border-bottom: 1px solid var(--linie-zart);
    border-radius: 0;
  }
  .nav a:last-child { border-bottom: none; }
  .nav a[aria-current="page"] {
    box-shadow: inset 3px 0 0 var(--gold);
    padding-left: 12px;
  }

  /* Keine Reserve mehr: die Schnellknoepfe stehen im Fluss und
     verdecken nichts. */
  body { padding-bottom: 0; }
  .fuss { padding-bottom: 24px; }
}

@media (max-width: 760.98px) {
  .nav { top: 62px; padding: 6px 16px 12px; }
}

/* ============================================================
   MOBIL — Layout nach dem Konzept-Mockup
   ============================================================ */

@media (max-width: 760.98px) {

  /* ---------- Kopfzeile: Logo links, Menü rechts ---------- */
  /* Die Umschaltung auf den Hamburger passiert schon bei 1150 px
     (siehe dort). Hier nur noch die engeren Handy-Masse. */
  .kopf-innen { padding: 0 16px; min-height: 62px; gap: 12px; }
  .marke { gap: 9px; }
  .marke-zeichen { width: 30px; height: 30px; }
  .marke b { font-size: 18px; letter-spacing: .09em; }
  .marke span { font-size: 8.5px; letter-spacing: .16em; }
  /* ---------- Kopfbereich: Bild zuerst ---------- */
  .held { display: flex; flex-direction: column; }
  .held-bild  { order: 1; }
  .held-innen { order: 2; }

  .held-bild {
    position: relative;
    inset: auto;
    aspect-ratio: 4 / 3;
    margin: 0;
  }
  .held-bild img { object-position: 30% center; }
  /* Nach unten weich auslaufen, damit Bild und Text zusammengehören */
  .held-bild::after {
    background: linear-gradient(to bottom,
      rgba(253, 249, 239, 0) 58%,
      rgba(253, 249, 239, .55) 82%,
      rgb(253, 249, 239) 100%);
  }

  .held-innen { padding: 0 20px 4px; min-height: 0; }
  .held-text { padding: 4px 0 0; max-width: none; gap: 15px; }
  .held-text::before { display: none; }
  .held-titel { font-size: clamp(30px, 9vw, 40px); line-height: 1.1; }
  .held-lead { font-size: 16.5px; max-width: none; }
  .vorzeile { font-size: 10.5px; letter-spacing: .18em; flex-wrap: wrap; }

  /* Claim erscheint hier — im Mockup unter dem Knopf */
  .held-claim-mobil {
    display: block;
    font-family: var(--schraeg);
    font-style: italic;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.45;
    color: var(--gold);
    margin: 2px 0 0;
  }

  /* Zitat als Pergamentkasten */
  .held .held-zitat,
  .held-zitat {
    position: static;
    order: 3;
    margin: 22px 20px 26px;
    padding: 22px 22px 24px;
    max-width: none;
    text-align: center;
    background: var(--papier-2) url('../bilder/held-pergament.jpg') center/cover;
    border: 1px solid var(--linie);
    border-radius: 8px;
  }
  /* Selektor mit .held-bild davor, weil der Block fuer max-width: 1000.98px
     die Schrift auf Weiss mit Schatten setzt (Text lag dort noch im Bild).
     Auf dem Pergamentkasten waere sie unlesbar. */
  .held .held-zitat p,
  .held-zitat p {
    color: #7d5f19;
    text-shadow: none;
    font-size: 17.5px;
    line-height: 1.5;
  }
  .held .held-zitat hr,
  .held-zitat hr { margin: 12px auto 0; background: var(--gold); box-shadow: none; }

  /* ---------- Fragen: kompakte Karten ---------- */
  .fragen-block { width: auto; margin: 0; padding: 0 20px; }
  .fragen-tafel {
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 34px 0 8px;
  }
  .fragen-raster { grid-template-columns: 1fr; gap: 12px; }
  .fragen-einleitung { margin-bottom: 6px; }
  .fragen-einleitung h2 { font-size: 27px; }
  .fragen-einleitung p:not(.vorzeile) { font-size: 15.5px; }

  .fragen-tafel .fragenkarte {
    background: var(--flaeche);
    border: 1px solid var(--linie-zart);
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(120, 95, 50, .06);
    padding: 15px 16px;
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 4px 13px;
    align-items: start;
  }
  .fragenkarte-kopf {
    display: contents;
  }
  /* Der Kreis steht neben der Ueberschrift und nicht mittig neben der
     ganzen Liste — sonst wandert er bei langen Listen nach unten. */
  .fragenkarte-kreis { grid-row: 1; width: 42px; height: 42px; }
  .fragenkarte h3 { font-size: 17px; align-self: center; margin: 0; }
  .fragenkarte ul {
    grid-column: 1 / -1;
    font-size: 14px;
    line-height: 1.4;
    gap: 3px;
    align-self: start;
  }
  .fragenkarte li::before { margin-top: 7px; flex-basis: 4px; height: 4px; }

  /* ---------- Angebote: Bild oben, Text darunter ---------- */
  .angebot-bahn { padding: 0 20px; }
  .angebote-kopf { flex-direction: column; align-items: flex-start; gap: 8px; }
  .angebote-merkmale { font-size: 10.5px; letter-spacing: .14em; }
  .angebot-karten { grid-template-columns: 1fr; gap: 16px; }
  .angebot-karte {
    grid-template-columns: 1fr;
    min-height: 0;
    border-radius: 12px;
  }
  .angebot-karte img { aspect-ratio: 16 / 9; height: auto; }
  .angebot-karte-text {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    padding: 15px 17px 17px;
    gap: 3px 12px;
    align-items: center;
  }
  .angebot-karte h3 { font-size: 18.5px; grid-column: 1; }
  .angebot-karte p  { font-size: 14px; grid-column: 1; }
  .angebot-karte-pfeil {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    justify-self: end;
    margin: 0;
    width: 36px;
    height: 36px;
  }

  /* ---------- Abschlussband als Pergamentkasten ---------- */
  .schlussband {
    background: var(--papier-2) url('../bilder/held-pergament.jpg') center/cover;
    border-top: 1px solid var(--linie);
    border-bottom: 1px solid var(--linie);
    padding: 30px 0;
    margin-top: 30px;
  }
  .schlussband-innen { padding: 0 24px; }
  .schlussband-innen::before,
  .schlussband-innen::after { display: none; }
  .schlussband p { font-size: 19px; line-height: 1.5; }

  /* ---------- Abschnitte ---------- */
  section.block { padding: 34px 0; }
  .bahn, .bahn-schmal { padding: 0 20px; }
  .kasten { border-radius: 10px; padding: 18px 19px; }
  .kopfzone { padding: 32px 0 34px; }
  .kopfzone h1 { font-size: clamp(27px, 8vw, 36px); }

}

/* ============================================================
   Navigationsleiste unten
   Gleiche Schwelle wie der Hamburger: sobald das Kopfmenue
   eingeklappt ist, braucht es unten einen Schnellzugriff.
   ============================================================ */

.schnellknoepfe { display: none; }

@media (max-width: 1279.98px) {
  /* Die Knoepfe stehen im Seitenfluss, nicht darueber.
     Vorher schwebten sie fest im Fenster — und lagen damit
     zwangslaeufig immer ueber irgendeinem Abschnitt. Vier
     Anhebungen haben daran nichts geaendert, weil ein fest
     stehendes Feld sich nur verschiebt, was es verdeckt, nicht
     ob es verdeckt.

     Jetzt wie „Mehr ueber meine Beratungen": ein gewoehnlicher
     Knopf an seinem Platz, der mit der Seite laeuft. Er liegt am
     Seitenende ueber dem Fussbereich (inc/schnellknoepfe.php ist
     von inc/fuss.php eingebunden).

     Damit entfaellt auch die Reserve am body: es gibt nichts mehr,
     was den Fussbereich verdecken koennte. */
  /* Die Knoepfe liegen in der Naht zwischen Kopfbereich und erstem
     Abschnitt — der eine ganz links, der andere ganz rechts. Die
     Naht ist selbst nur wenige Pixel hoch, deshalb ueberlappen sie
     nach oben und unten je zur Haelfte: negativer Rand oben, damit
     sie in den weissen Kopfbereich hineinragen, und negativer Rand
     unten, damit der folgende Abschnitt unter ihnen anfaengt.

     z-index, weil der Fragen-Block mit seiner weissen Tafel sonst
     darueber liegt. */
  .schnellknoepfe {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 0 14px;
    position: relative;
    /* 5 und nicht 3: .fragen-block traegt selbst position: relative
       mit z-index: 3. Bei gleicher Ebene entscheidet die Reihenfolge
       im Markup, und der Block kommt danach — er lag damit UEBER den
       Knoepfen. Ein Klick auf Text oder Symbol traf gemessen
       div.fragen-tafel statt den Verweis, es passierte also nichts. */
    z-index: 5;
  }
  /* Masse von „Mehr ueber meine Beratungen" uebernommen: dort
     gemessen 56 px hoch, Polster 14/27, Schrift 15,5 px und
     Radius 30 px (also Pillenform, nicht die 3 px des
     Grundknopfs). */
  .schnellknopf {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 27px;
    border-radius: 30px;
    font-family: var(--sans);
    font-size: 15.5px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    box-sizing: border-box;
  }
  .schnellknopf svg { width: 18px; height: 18px; flex: 0 0 18px; }

  /* Derselbe Gegensatz wie im Seiteninhalt: Bordeaux fuer die
     Anfrage, ein zurueckhaltender Knopf fuer den Weg zu den
     Angeboten. */
  .schnellknopf.stiller-knopf {
    background: transparent;
    color: var(--bordeaux);
    border: 1px solid var(--linie);
  }
  .schnellknopf.stiller-knopf:hover {
    background: var(--flaeche-2);
    border-color: var(--gold);
  }
  .schnellknopf.voller-knopf {
    background: var(--bordeaux);
    color: #fff;
    border: 1px solid var(--bordeaux);
  }
  .schnellknopf.voller-knopf:hover { filter: brightness(1.1); }
  .schnellknopf[aria-current="page"] { border-color: var(--gold); }
}


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

/* Der Claim steht im Kopfbereich, solange die Kopfzeile eingeklappt ist —
   dort ist er sonst nirgends zu sehen, weil .kopf-rechts ab 1150 px
   ausgeblendet wird. Ab 1151 px steht er wieder oben rechts.
   Als Regel fuer den breiten Fall formuliert, weil die pauschale
   Ausblendung sonst nach dem Mobil-Block stehen und ihn ueberschreiben
   wuerde (gleiche Spezifitaet, spaetere Regel gewinnt). */
@media (min-width: 1280px) {
  .held-claim-mobil { display: none; }
}

/* Im mittleren Bereich hat der Kopfbereich mehr Luft */
@media (min-width: 761px) and (max-width: 1279.98px) {
  .held-claim-mobil {
    display: block;
    font-family: var(--schraeg);
    font-style: italic;
    font-weight: 600;
    font-size: 18px;
    line-height: 1.4;
    color: var(--gold);
    margin: 6px 0 0;
  }
}

/* ---------- Reihenfolge im Kopfbereich (mobil) ----------
   Bild, Text und Zitat sind Geschwister unter .held. Damit steht die
   Reihenfolge direkt hier, ohne Eingriff in die Schachtelung. */
@media (max-width: 760.98px) {
  .held-bild  { order: 1; }
  .held-innen { order: 2; }
  .held-zitat { order: 3; }
}

/* ---------- Preistabelle mobil: Zeilen werden Karten ----------
   Vier Spalten passen auf 375 px nicht. Der Rahmen ist zwar seitlich
   scrollbar, aber Querscrollen in einer Tabelle findet kaum jemand.
   Deshalb hier: Kopf ausblenden, jede Zeile als eigener Kasten, und die
   Beschriftung kommt aus data-spalte am jeweiligen Feld. */
@media (max-width: 760.98px) {
  .tabelle-rahmen {
    overflow-x: visible;
    border: none;
    background: transparent;
  }
  table.preise, table.preise tbody, table.preise tr, table.preise td {
    display: block;
    width: auto;
  }
  table.preise thead { display: none; }

  table.preise tr {
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: 10px;
    padding: 4px 0;
    margin-bottom: 12px;
  }
  table.preise tbody tr:last-child { margin-bottom: 0; }

  table.preise td {
    border-bottom: 1px solid var(--linie-zart);
    padding: 9px 15px;
  }
  table.preise tr td:last-child { border-bottom: none; }

  /* Zellen mit Beschriftung: Name links, Wert rechts */
  table.preise td[data-spalte] {
    display: grid;
    grid-template-columns: 8.5em 1fr;
    gap: 10px;
    align-items: baseline;
  }
  table.preise td[data-spalte]::before {
    content: attr(data-spalte);
    font-family: var(--sans);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-3);
  }

  /* Die erste Zelle ist die Ueberschrift der Karte und bleibt ohne Label */
  table.preise td.name {
    font-family: var(--kapitael);
    font-size: 17px;
    letter-spacing: .01em;
    padding-top: 12px;
  }
  table.preise td.preis { font-size: 16px; }
}


/* ---------- Warum .98px an den Grenzen ----------
   Die Viewport-Breite ist auf Bildschirmen mit fraktionaler
   Pixeldichte selbst fraktional (hier 1,75 Geraetepixel pro
   CSS-Pixel). window.innerWidth rundet auf 1150, eine Media Query
   rechnet aber exakt: bei tatsaechlich 1150,28 px trifft weder
   "max-width: 1150px" noch "min-width: 1280px" zu. Dann galt an
   dieser Breite keine der beiden Seiten — kein Hamburger und auch
   keine Leiste am unteren Rand. Mit .98px als Obergrenze schliessen
   die Bereiche lueckenlos aneinander an, ohne sich zu ueberlappen.
   ============================================================ */

/* ============================================================
   ABGLEICH MIT DER DESIGNVORLAGE
   ============================================================
   Werte aus dem Mockup ausgemessen (1586 px breit, Pixel gelesen):
     Kopfzeile          #FCFCF8  — weiss, nicht creme
     Menueschrift       ~14 px   (Versalhoehe 10 px / 0,72)
     Tafel              x 51 bis 1536, also 93,6 % der Fensterbreite
     Raster             484 : 318 : 318 : 318  =  1,52 : 1 : 1 : 1
     Kachelgrund        #FFFFFF, Rahmen #F5F0E8, Luecke 11 px
     Angebotsflaeche    #FEFBF8 — eigene helle Bahn

   Die Blockgrenzen sind wichtig: dieser Abschnitt steht am Dateiende
   und wuerde ohne Media-Query den Mobil- und Tabletteil ueberschreiben.
   ============================================================ */

/* ---------- Gilt auf allen Breiten ---------- */

/* Kopfzeile: in der Vorlage weiss */
.kopf { background: #fdfcf9; }

/* Der Angebotsbereich liegt auf einer eigenen, fast weissen Flaeche */
.band-hell {
  background: #fefbf8;
  border-top: 1px solid var(--linie-zart);
}


/* ---------- Ab Tablet: die Kacheln ----------
   Die drei Rubriken sind in der Vorlage eigene weisse Kacheln mit
   zartem Rahmen. Eine fruehere Regel hatte ihnen Flaeche und Rahmen
   genommen und nur eine Linie oben gelassen. border wird komplett
   gesetzt, weil dort border-left entfernt und border-top vergeben war;
   die Farben stehen fest statt als Token, weil andere Regeln die Token
   ueberschreiben (gemessen kam #FFFDF8 und #E9DCC1 heraus). */

@media (min-width: 761px) {
  .fragen-tafel .fragenkarte {
    background: #ffffff;
    border: 1px solid #f3ede2;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(120, 95, 50, .05),
                0 6px 18px rgba(120, 95, 50, .045);
    padding: 20px 19px 22px;
  }
  /* Trennbaender als abgesetzte Kaesten und nicht randlos: ueber die
     ganze Fensterbreite gezogen verschmolzen sie mit dem Seitengrund —
     man sah nur zwei duenne Linien und nicht, dass da ein eigenes
     Element steht. Jetzt mittig mit Rahmen, runden Ecken und Luft nach
     oben und unten, damit der Grund ringsum sichtbar bleibt.
     Breite und Flaeche stehen weiter unten (85 vw, weiss). */
  .schlussband {
    margin: 48px auto;
    padding: 26px 0;
  }
  .schlussband p { font-size: 21px; }

  /* Der Kasten bringt seinen eigenen Rand mit, die Zierlinien brauchen
     deshalb weniger Aussenabstand als im randlosen Band. */
  .schlussband-innen { padding: 0 30px; max-width: none; }
}


/* ---------- Ab 1161 px: Rasteraufbau der Vorlage ----------
   Text links, drei Kacheln rechts — so liegt es auch im Markup. Eine
   spaetere Regel hatte die Einleitung mit grid-column: 1 / -1 auf die
   ganze Breite gezogen und die Karten darunter geschoben.
   Unterhalb dieser Breite bleibt es bei Einleitung oben, weil vier
   Spalten dort zu schmal wuerden. */

@media (min-width: 1161px) {
  .fragen-block {
    width: 93vw;
    max-width: 1780px;
  }
  .angebot-bahn {
    width: 93vw;
    max-width: 1780px;
    padding: 0;
  }

  .fragen-tafel { padding: 13px; }

  .fragen-raster {
    grid-template-columns: minmax(0, 1.52fr) repeat(3, minmax(0, 1fr));
    gap: 12px;
    align-items: stretch;
  }

  .fragen-einleitung {
    grid-column: auto;
    max-width: none;
    margin-bottom: 0;
    padding: 22px 20px 20px 22px;
    gap: 13px;
  }

  /* Die Vorlage zeigt 30 px Versalhoehe, was bei Cinzel 43 px Grad
     entspraeche. Cinzel laeuft aber breiter als die Schrift im Mockup:
     gemessen 459 px gegen 355 px bei gleicher Hoehe. Bei 43 px bricht
     die Zeile also, obwohl die Spalte das Mass der Vorlage hat.
     2,5 vw ist der groesste Grad, der einzeilig bleibt. */
  .fragen-einleitung h2 {
    font-size: clamp(28px, 2.5vw, 42px);
    line-height: 1.08;
  }
  .fragen-einleitung p:not(.vorzeile) { font-size: 15.5px; line-height: 1.6; }

  /* Menuepunkte: in der Vorlage rund 14 px, bei uns waren es 13,5 */
  .nav a { font-size: 15px; }
}

@media (min-width: 1161px) {
  /* Vorlage: Versalhoehe 12 px, bei Cinzel also rund 17 px */
  .angebot-karte h3 { font-size: 17px; }
}


/* ============================================================
   NACHBESSERUNGEN
   ============================================================ */

/* ---------- Menueschalter: drei gleiche Striche ----------
   Vorher zeichneten ::before und ::after zwei Striche, der dritte kam
   als box-shadow des ersten. Der Flex-Abstand von 4 px addierte sich
   nur zwischen den Pseudo-Elementen, nicht zum Schatten — dadurch
   standen zwei Striche eng und der dritte abgesetzt. Jetzt drei
   Hintergrundstreifen mit festen Abstaenden: 13, 20 und 27 px in einem
   42 px hohen Feld, also gleichmaessig und oben wie unten 13 px Rand. */
@media (max-width: 1279.98px) {
  .nav-schalter {
    display: block;
    width: 42px;
    height: 42px;
    padding: 0;
    border: none;
    background-color: transparent;
    background-image:
      linear-gradient(var(--gold), var(--gold)),
      linear-gradient(var(--gold), var(--gold)),
      linear-gradient(var(--gold), var(--gold));
    background-size: 24px 2px;
    background-position: center 13px, center 20px, center 27px;
    background-repeat: no-repeat;
    /* Der Text "Menü" bleibt im Markup, damit Screenreader ihn ansagen */
    font-size: 0;
    color: transparent;
    cursor: pointer;
    order: 4;
  }
  .nav-schalter::before,
  .nav-schalter::after { content: none; display: none; }
}

/* ---------- Seitengrund: das gezeichnete Pergament ----------
   Die bisherige Faserung aus repeating-linear-gradient wirkte graubraun.
   Nur ab Tablet, weil background-attachment: fixed auf iOS nicht
   greift — dort wuerde das Bild auf die volle Dokumenthoehe gezogen. */
@media (min-width: 761px) {
  body {
    background-color: var(--papier);
    background-image: url('../bilder/held-pergament.jpg');
    background-size: cover;
    background-position: center top;
    background-attachment: fixed;
    background-repeat: no-repeat;
  }
}

/* ---------- Mehr Luft zwischen den Baendern ----------
   Die Tafel sass mit ihrem negativen Rand direkt auf der hellen
   Angebotsbahn — beide weissen Flaechen stiessen fast aneinander. */
@media (min-width: 1161px) {
  .fragen-block { margin-bottom: 56px; }
  .band-hell { padding-top: 54px; padding-bottom: 48px; }
}


/* ============================================================
   KLIENT(INN)EN ERZAEHLEN
   ============================================================
   Die Zitate sind die einzige Stelle mit Fremdtext, deshalb Pergament
   als Grund — wie die Zitatkaesten, die den Rest der Seite gliedern. */

.stimmen-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 18px;
}

.stimme {
  margin: 0;
  padding: 24px 24px 20px;
  /* Weiss wie die anderen Kacheln der Seite — das Pergament ist den
     Trennbaendern vorbehalten, sonst konkurrieren zu viele Flaechen. */
  background: #ffffff;
  border: 1px solid var(--linie-z);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 1px 3px rgba(120, 95, 50, .05);
}

.stimme p {
  margin: 0;
  font-family: var(--schraeg);
  font-style: italic;
  font-weight: 600;
  font-size: 16.5px;
  line-height: 1.5;
  color: #5f4a15;
  /* Anfuehrungszeichen setzt das CSS, damit sie nicht im Text stehen
     und dort mit der Zeichenkodierung kollidieren */
  /* Anfuehrungszeichen direkt als Zeichen und nicht als CSS-Escape:
     "E" wurde beim Erzeugen der Datei als Oktalzahl gelesen und
     landete als Steuerzeichen U+0081 im CSS — sichtbar als Kaestchen
     vor und hinter jedem Zitat. */
  quotes: "„" "“";
}
.stimme p::before { content: open-quote; }
.stimme p::after  { content: close-quote; }

.stimme footer {
  margin-top: auto;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
}

@media (max-width: 760.98px) {
  .stimmen-raster { grid-template-columns: 1fr; gap: 13px; }
  .stimme { padding: 19px 20px 17px; }
  .stimme p { font-size: 16px; }
}


/* ============================================================
   UEBER MICH auf der Startseite
   ============================================================ */

.person-zweispalt {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: 34px;
  align-items: start;
}

.person-bild-feld {
  border: 1px solid var(--linie);
  border-radius: 10px;
  overflow: hidden;
  background: var(--flaeche);
  box-shadow: 0 2px 6px rgba(120, 95, 50, .06);
}
.person-bild-feld img {
  display: block;
  width: 100%;
  height: auto;
}
/* Kein erzwungenes Quadrat mehr. portrait.jpg ist 423 x 555 (0,76 : 1);
   aspect-ratio: 1/1 zusammen mit object-fit: cover hat daraus einen
   quadratischen Ausschnitt gemacht und unten die Schultern
   abgeschnitten — obwohl in der Karte darunter Platz frei war. Ohne
   die Vorgabe traegt das Bild sein eigenes Verhaeltnis: in der
   300-px-Spalte 300 x 394 statt 300 x 300. */

/* Ein zurueckhaltender Knopf: der Bordeaux-Knopf ist fuer die Anfrage
   reserviert, ein Weiterlesen-Link soll nicht gleich stark ziehen. */
.knopf-still {
  background: transparent;
  color: var(--bordeaux);
  border: 1px solid var(--linie);
  box-shadow: none;
}
.knopf-still:hover {
  background: var(--flaeche-2);
  border-color: var(--gold);
  color: var(--bordeaux);
}

@media (max-width: 860px) {
  .person-zweispalt { grid-template-columns: 1fr; gap: 20px; }
  .person-bild-feld { max-width: 260px; }
}

/* Werdegang auf ueber-mich.php */
.werdegang {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.werdegang li {
  padding-left: 15px;
  border-left: 2px solid var(--linie);
  line-height: 1.5;
}
.werdegang b {
  display: block;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1px;
}


/* Die untere Rubrikenleiste (inc/rubriken.php) ist entfernt worden.
   Ihre Regeln standen hier noch und blieben nicht folgenlos: die
   Reserve body { padding-bottom: 54px } lag in @media (min-width:
   1280px) und hielt auf jedem Desktop einen leeren Streifen unter
   dem Fussbereich frei, obwohl es die Leiste nicht mehr gibt. */



@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Sprungziele nicht unter der Kopfzeile verstecken. 84 px: die
   Kopfzeile ist 72 px hoch, der Rest ist Luft. */
#fragen, #angebote, #stimmen, #person { scroll-margin-top: 84px; }

/* Der Ueber-mich-Text stand in einer 1141 px breiten Spalte — rund 150
   Zeichen pro Zeile. Beim Zeilenwechsel findet das Auge den Anfang der
   naechsten Zeile dann nicht mehr zuverlaessig. */
.person-zweispalt .stapel p { max-width: 68ch; }


/* ============================================================
   CLAIM IN DER KOPFZEILE
   ============================================================
   Er stand in .kopf-rechts und war damit auf allem unter 1151 px
   unsichtbar — .kopf-rechts wird dort ausgeblendet, weil der
   Kontaktknopf keinen Platz hat. Jetzt haengt er direkt an
   .kopf-innen und bekommt auf schmalen Geraeten eine eigene Zeile.
   ============================================================ */

/* Desktop: rechts aussen, wie vorher. Der Claim war zuvor ein Kind
   von .kopf-rechts, jetzt ein Geschwister — die Optik bleibt, weil er
   in derselben Flex-Reihe an derselben Stelle landet. */
.kopf-claim { order: 5; }

/* Bis 1620 px: eigene Zeile. Ab dort passt der Claim neben Menue und
   Kontaktknopf, darunter nicht — zwei aeltere Regeln blendeten ihn
   deshalb unter 1560 bzw. 1620 px einfach aus, wodurch er auf allem
   unter 1620 px voellig fehlte. Eine eigene Zeile ist besser als kein
   Claim. Die Grenze richtet sich nach der spaeteren der beiden Regeln. */
@media (max-width: 1620px) {
  /* Eigene Zeile unter Logo und Schalter. Dafuer darf die Kopfzeile
     umbrechen — mobil steht dort sonst nowrap. */
  .kopf-innen {
    flex-wrap: wrap;
    row-gap: 0;
    padding-bottom: 9px;
  }
  .kopf-claim {
    display: block;
    order: 9;
    flex: 0 0 100%;
    max-width: none;
    margin: 2px 0 0;
    padding-top: 8px;
    border-top: 1px solid var(--linie-zart);
    text-align: left;
    font-size: 15px;
    line-height: 1.38;
  }
  /* Die drei Zeilen wie in der Vorlage gestaffelt */
  .kopf-claim b { display: inline; font-size: 15.5px; }
  .kopf-claim-zeile { display: block; padding-left: 1.4em; }

  /* Der Claim steht jetzt oben — im Kopfbereich braucht er es nicht
     noch einmal. */
  .held-claim-mobil { display: none; }
}

@media (max-width: 760px) {
  .kopf-innen { min-height: 0; padding-top: 8px; padding-bottom: 8px; }
  .kopf-claim { font-size: 14px; }
  .kopf-claim b { font-size: 14.5px; }
  /* Das Menue klappt unter der gewachsenen Kopfzeile auf */
  .nav { top: 100%; }
}


/* ============================================================
   ABSCHNITTE ALS KARTEN AUF SICHTBAREM SEITENGRUND
   ============================================================
   Drei Dinge liefen zusammen und liessen die Rubriken ineinander
   uebergehen:

   1. Derselbe Pergamentgrund lag dreimal mit verschiedenen Werten
      auf der Seite — body mit cover/fixed, .held mit "auto 128%" und
      scroll, die Trennbaender mit cover. Wo .held endete, sprang das
      Muster: das war die harte Linie mitten im Hintergrund.
   2. Die Fragen-Tafel lag mit margin-top: -66px im Kopfbereich, es
      gab dort also gar keinen Abstand, sondern eine Ueberlappung.
   3. Der Angebotsbereich war ein Band ueber die ganze Fensterbreite.
      Damit stiess es oben und unten direkt an die Nachbarn — als
      Flaeche, nicht als abgesetzter Abschnitt.

   Loesung: nur der body traegt das Pergament, alle Rubriken sind
   Karten mit Abstand dazwischen. Der Seitengrund bleibt sichtbar und
   trennt die Themen.
   ============================================================ */

@media (min-width: 761px) {
  /* 1. Nur ein Pergament auf der Seite */
  .held {
    background-image: none;
    background-color: transparent;
  }

  /* 2. Kein Ueberlappen mehr, sondern Luft */
  .fragen-block {
    margin-top: 46px;
    margin-bottom: 46px;
  }

  /* 3. Der Angebotsbereich und "Ueber mich" als Karten */
  .band-hell {
    width: 93vw;
    max-width: 1780px;
    margin: 46px auto;
    border: 1px solid var(--linie-z);
    border-top: 1px solid var(--linie-z);
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(120, 95, 50, .04),
                0 8px 26px rgba(120, 95, 50, .05);
    padding: 44px 0;
  }
  /* Die Bahn darin braucht keinen eigenen Aussenrand mehr */
  .band-hell .angebot-bahn { width: auto; padding: 0 26px; }

  /* Auch der Bewertungsblock und der Abschlusskasten bekommen Luft */
  #stimmen { padding: 8px 0 0; }
  #stimmen .angebot-bahn { width: auto; padding: 0 26px; }
}

@media (min-width: 1281px) {
  /* Die Bewertungen liegen auf dem Seitengrund und brauchen dieselbe
     Aussenbreite wie die Karten daneben. */
  #stimmen .angebot-bahn {
    width: 93vw;
    max-width: 1780px;
    margin: 0 auto;
    padding: 0;
  }
}


/* ============================================================
   PERSOENLICHE BERATUNGEN — Kopfbereich mit Bild
   ============================================================ */

.seitenkopf {
  width: 93vw;
  max-width: 1780px;
  margin: 34px auto 0;
  background: var(--flaeche);
  border: 1px solid var(--linie-z);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(120, 95, 50, .04),
              0 8px 26px rgba(120, 95, 50, .05);
}
.seitenkopf-innen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: stretch;
}
.seitenkopf-text { padding: 44px 40px 46px; align-self: center; }
.seitenkopf-text h1 {
  font-size: clamp(30px, 3.1vw, 50px);
  line-height: 1.06;
  margin: 8px 0 0;
}
.seitenkopf-text .lead { margin-top: 4px; max-width: 52ch; }

.seitenkopf-bild { position: relative; min-height: 300px; }
.seitenkopf-bild img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* Der Satz sitzt im Bild und braucht deshalb Schatten, nicht Flaeche */
.seitenkopf-notiz {
  position: absolute;
  right: 26px;
  bottom: 26px;
  max-width: 15em;
  margin: 0;
  text-align: right;
  font-family: var(--schraeg);
  font-style: italic;
  font-weight: 600;
  font-size: 17px;
  line-height: 1.45;
  color: #fffdf7;
  text-shadow: 0 1px 3px rgba(74, 42, 8, .75), 0 2px 12px rgba(74, 42, 8, .55);
}

/* ============================================================
   Die vier Formate als Karten
   ============================================================ */

.preiskarten {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

.preiskarte {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid var(--linie-z);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(120, 95, 50, .05),
              0 8px 22px rgba(120, 95, 50, .05);
}
/* Das erste Format ist das ausfuehrlichste — es bekommt den goldenen
   Rand und den gefuellten Knopf, damit die Reihe einen Anker hat. */
.preiskarte-betont { border-color: var(--gold-hell); }

.preiskarte-bild {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}
.preiskarte-text {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 18px 19px 20px;
  flex: 1 1 auto;
}
.preiskarte h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.2;
  color: var(--bordeaux);
  margin: 0;
}
.preiskarte-kurz { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--text-2); }
.preiskarte-strich {
  width: 46px;
  height: 2px;
  margin: 3px 0 4px;
  border: none;
  background: var(--gold);
  opacity: .6;
}

/* Dauer und Honorar mit Symbol */
.kennzeile {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  font-size: 15px;
  color: var(--text);
}
.kennzeile svg { width: 21px; height: 21px; flex: 0 0 21px; color: var(--gold); margin-top: 1px; }
.kennzeile-preis b {
  display: block;
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.15;
}
.kennzeile-preis small {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-3);
}

.hakenliste {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  line-height: 1.42;
  color: var(--text-2);
}
.hakenliste li { display: flex; align-items: flex-start; gap: 9px; }
.hakenliste svg { width: 17px; height: 17px; flex: 0 0 17px; color: var(--gold); margin-top: 2px; }

/* Ausfuehrliche Beschreibung zum Aufklappen */
.preiskarte-mehr { margin-top: 4px; }
.preiskarte-mehr summary {
  cursor: pointer;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--gold);
  list-style: none;
}
.preiskarte-mehr summary::-webkit-details-marker { display: none; }
.preiskarte-mehr summary::after { content: " +"; }
.preiskarte-mehr[open] summary::after { content: " \2013"; }
.preiskarte-mehr summary:hover { color: var(--bordeaux); }
.preiskarte-mehr p { margin: 9px 0 0; font-size: 13.5px; line-height: 1.55; }
.preiskarte-mehr .beispiel {
  font-family: var(--schraeg);
  font-style: italic;
  font-weight: 600;
  color: #6f5417;
  border-left: 2px solid var(--linie);
  padding-left: 11px;
}

/* Der Knopf sitzt immer unten, auch wenn die Karten verschieden hoch
   befuellt sind — sonst tanzen die Knoepfe in der Reihe. */
.preiskarte-knopf {
  margin-top: auto;
  justify-content: center;
  width: 100%;
  padding-top: 11px;
  padding-bottom: 11px;
  font-size: 14.5px;
}

/* ============================================================
   Vier Zusicherungen
   ============================================================ */

.merkmalbahn {
  width: 93vw;
  max-width: 1780px;
  margin: 8px auto 0;
  background: var(--flaeche-2);
  border: 1px solid var(--linie-z);
  border-radius: 12px;
  padding: 22px 26px;
}
.merkmalbahn-innen {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px 30px;
}
.merkmal { display: flex; align-items: center; gap: 14px; }
.merkmal svg { width: 30px; height: 30px; flex: 0 0 30px; color: var(--gold); }
.merkmal b {
  display: block;
  font-family: var(--serif);
  font-size: 16.5px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.25;
}
.merkmal span { font-size: 13.5px; line-height: 1.45; color: var(--text-2); }

/* Trennlinien zwischen den vier Spalten */
@media (min-width: 901px) {
  .merkmal + .merkmal {
    border-left: 1px solid var(--linie-zart);
    padding-left: 30px;
    margin-left: -8px;
  }
}

/* ============================================================
   Ablauf, Zitat, Kontakt
   ============================================================ */

.abschluss-drei {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr) minmax(0, 1fr);
  gap: 34px;
  align-items: start;
}
.abschluss-spalte { display: flex; flex-direction: column; gap: 11px; }
.abschluss-spalte h2 { font-size: clamp(22px, 1.9vw, 29px); margin: 0; }
.abschluss-spalte p { margin: 0; }

.schritte-nummern {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.schritte-nummern li {
  display: grid;
  grid-template-columns: 27px 1fr;
  gap: 12px;
  align-items: start;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--text-2);
}
.schritt-nr {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: var(--flaeche-2);
  border: 1px solid var(--linie);
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--gold);
}

/* Der Zettel in der Mitte */
.abschluss-notiz {
  background: var(--papier-2) url('../bilder/held-pergament.jpg') center/cover;
  border: 1px solid var(--linie);
  border-radius: 10px;
  padding: 30px 26px 26px;
  text-align: center;
  align-self: center;
}
.abschluss-notiz p {
  margin: 0;
  font-family: var(--schraeg);
  font-style: italic;
  font-weight: 600;
  font-size: 19px;
  line-height: 1.5;
  color: #6f5417;
}
.abschluss-notiz hr {
  width: 68px;
  height: 1px;
  margin: 16px auto 0;
  border: none;
  background: var(--gold);
  opacity: .6;
}

/* ============================================================
   Schmalere Schirme
   ============================================================ */

@media (max-width: 1279.98px) {
  .preiskarten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .abschluss-drei { grid-template-columns: 1fr 1fr; }
  .abschluss-notiz { grid-column: 1 / -1; order: 3; }
}

@media (max-width: 900px) {
  .seitenkopf-innen { grid-template-columns: 1fr; }
  .seitenkopf-bild { order: -1; min-height: 0; aspect-ratio: 16 / 9; }
  .seitenkopf-text { padding: 26px 24px 30px; }
  .merkmalbahn-innen { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .seitenkopf {
    width: auto;
    margin: 0 20px;
    border-radius: 12px;
  }
  .seitenkopf-notiz { font-size: 15px; right: 18px; bottom: 18px; }
  .preiskarten { grid-template-columns: 1fr; gap: 14px; }
  .merkmalbahn { width: auto; margin: 0 20px; padding: 18px 19px; }
  .merkmalbahn-innen { grid-template-columns: 1fr; gap: 15px; }
  .abschluss-drei { grid-template-columns: 1fr; gap: 26px; }
  .abschluss-notiz { order: 0; }
}


/* ============================================================
   SCHREIBSCHRIFT: MARCK SCRIPT
   ============================================================
   Die bisherige Schrift war eine Antiqua, die erst durch
   font-style: italic und font-weight: 600 schraeg und kraeftig
   wurde. Marck Script bringt beides mit: sie ist von sich aus
   geneigt und hat nur einen Schnitt. Bleiben die alten Angaben
   stehen, legt der Browser eine zweite Neigung darueber und
   rechnet sich ein Fett aus — das Ergebnis ist schief und
   verschmiert. Deshalb hier fuer alle Stellen zurueck auf
   normal und 400.

   Die Schriftgrade bleiben unveraendert: den Groessenunterschied
   traegt size-adjust: 112% am @font-face in fonts.css.
   ============================================================ */

.kopf-claim,
.kopf-claim b,
.held-zitat p,
.held-claim-mobil,
.leitsatz,
.schlussband p,
.stimme p,
.beispiel,
.angebot-haupt .beispiel,
.preiskarte-mehr .beispiel,
.abschluss-notiz p,
.seitenkopf-notiz,
.p-claim, .p-band, .p-zitat {
  font-family: var(--schraeg);
  font-style: normal;
  font-weight: 400;
}

/* Der Claim hebt "Die Sterne" hervor. Ohne zweiten Schnitt geht das
   nicht ueber die Strichstaerke — dafuer eine Spur groesser. */
.kopf-claim b { font-size: 1.08em; }


/* ============================================================
   DURCHGEHENDER GRUND, WEISSERE KARTEN
   ============================================================
   Der Pergamentgrund laeuft jetzt ueber die ganze Seite. Damit
   braucht es zwei Korrekturen:

   1. Die Trennlinien, die vorher Abschnitte markiert haben, sind
      ueberfluessig — sie liegen quer im Hintergrundbild und wirken
      wie eine Naht. Betroffen sind der untere Rand des Kopfbereichs
      (die Linie unter dem Heldenbild) und die Linie zwischen zwei
      aufeinanderfolgenden Abschnitten.

   2. Die Karten hoben sich kaum noch ab: die Tafel war
      rgba(255,253,248,.97), also cremig UND durchscheinend, und die
      hellen Baender #fefbf8. Auf dem Pergament ist das fast der
      gleiche Ton. Jetzt deckendes Weiss.
   ============================================================ */

/* ---------- Keine Naht im Hintergrund ---------- */
.held { border-bottom: none; }
section.block + section.block { border-top: none; }

/* ---------- Karten deckend weiss ---------- */
.fragen-tafel {
  background-color: #ffffff;
  /* war rgba(...,.97): der Grund schien durch und nahm Kontrast */
  background-image: none;
}

.band-hell { background: #ffffff; }

.seitenkopf { background: #ffffff; }

/* Etwas mehr Rand, damit die weisse Flaeche vom Pergament absetzt */
.fragen-tafel,
.band-hell,
.seitenkopf {
  border-color: #ebe0c9;
}

/* Der graue Kasten im Abschlussbereich zieht auf demselben Grund
   ebenfalls nach. */
.kasten {
  background: #ffffff;
  border-color: #ebe0c9;
}

/* Die Merkmalbahn bleibt bewusst eine Spur waermer als die Karten —
   sie ist eine Nebenflaeche, keine Rubrik. */
.merkmalbahn { background: #fdfaf3; }


/* ============================================================
   MERKMALLEISTE WEISS
   ============================================================
   Hier stand ein Weissschleier von 45 % ueber dem ganzen
   Seitengrund. Das war der falsche Hebel: der Grund selbst war
   richtig, gewollt ist nur eine hellere Flaeche hinter dem Text
   im Kopfbereich (siehe .held-text::before weiter unten).
   ============================================================ */

/* Die Merkmalleiste zieht mit den Karten mit — sie war als
   Nebenflaeche eine Spur waermer, das faellt auf dem hellen Grund
   jetzt als Grauschleier auf. */
.merkmalbahn { background: #ffffff; }


/* ============================================================
   KOPFBEREICH: HELLE FLAECHE HINTER DEM TEXT, GROESSERE SCHRIFT
   ============================================================
   Der Seitengrund bleibt, wie er war. Abheben soll sich nur der
   Textblock im Kopfbereich — so wie in der Vorlage, wo der Text
   auf einer hellen Flaeche steht, die nach rechts ins Bild
   ausläuft.

   Dafuer gab es schon .held-text::before mit einem radialen
   Verlauf, aber mit 44 % / 38 % Ausdehnung und einem Kern von
   96 % Deckung war er zu klein und zu zart, um den Text
   tatsaechlich zu tragen. Jetzt ein weiter aufgezogener Verlauf
   mit deckendem Kern: unter dem Text volle Deckung, nach aussen
   weich auslaufend, damit keine sichtbare Kante entsteht.
   ============================================================ */

@media (min-width: 761px) {
  .held-text::before {
    display: block;
    /* Grosszuegig ueber den Text hinaus, damit der Rand des
       Verlaufs nie in die Nähe der Buchstaben kommt */
    inset: -70px -230px -100px -150px;
    background:
      radial-gradient(62% 58% at 38% 44%,
        rgb(255, 254, 250) 0%,
        rgba(255, 254, 250, .97) 42%,
        rgba(255, 254, 250, .82) 64%,
        rgba(255, 254, 250, .45) 82%,
        rgba(255, 254, 250, 0) 100%);
  }

  /* ---------- Schriftgrade im Kopfbereich ---------- */
  .held-text .vorzeile { font-size: 13px; letter-spacing: .22em; }
  .held-titel { font-size: clamp(40px, 4.5vw, 72px); }
  .held-lead  { font-size: 20px; line-height: 1.6; max-width: 26em; }

  /* ---------- Fragenkarten: Titel und Punkte ---------- */
  .fragen-tafel .fragenkarte h3 { font-size: 24px; }
  .fragen-tafel .fragenkarte li { font-size: 17.5px; line-height: 1.5; }
  .fragen-einleitung p:not(.vorzeile) { font-size: 17px; line-height: 1.6; }
}


/* ============================================================
   SPRUNGLEISTE: LINKSBUENDIG MIT FORTSCHRITTSBALKEN
   ============================================================
   Die Punkte standen im 93-vw-Raster der Karten und begannen
   dadurch mit grossem Einzug. Als Anzeige, wo man sich befindet,
   gehoert die Leiste an den Bildschirmrand — sie ist Fensterrahmen
   und nicht Seiteninhalt.

   Den Scrollfortschritt zeigt die senkrechte Achse am rechten
   Rand (inc/zeitachse.php). Hier stand vorher ein waagrechter
   Balken auf der Oberkante, gesteuert von animation-timeline:
   scroll() — der setzt Chrome 115 voraus, bleibt bei "Bewegung
   reduzieren" stumm und war deshalb nicht zu sehen.
   ============================================================ */

@media (min-width: 1280px) {

}




/* ============================================================
   VORZEILEN EINHEITLICH
   ============================================================
   Sie standen auf drei verschiedenen Graden: 13 px im
   Kopfbereich, 11,5 px bei "Meine Angebote", "Rueckmeldungen"
   und "Ueber mich" — und 17 px bei "Antworten auf Ihre Fragen".
   Die 17 px waren ein Versehen: die Regel .fragen-einleitung p
   hat den Textabsatz vergroessert und die Vorzeile mitgenommen,
   weil auch sie ein <p> ist. Dabei ist ihr ausserdem das
   Schriftgewicht von 700 auf 500 verloren gegangen.

   Jetzt alle auf 13 px bei Gewicht 700.
   ============================================================ */

@media (min-width: 761px) {
  .vorzeile {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .22em;
  }

  /* Nur der Textabsatz, nicht die Vorzeile darueber */
  .fragen-einleitung p:not(.vorzeile) {
    font-size: 17px;
    line-height: 1.6;
  }
  .fragen-einleitung .vorzeile { font-size: 13px; font-weight: 700; }

  /* Die Merkmalzeile rechts neben "Beratungen & Analysen" gehoert
     zur selben Familie von Kleintexten. */
  .angebote-merkmale { font-size: 13px; }
}


/* ============================================================
   SENKRECHTE FORTSCHRITTSACHSE
   ============================================================
   Der waagrechte Balken auf der unteren Leiste ist entfallen: er
   lief ueber animation-timeline: scroll(), das Chrome 115
   voraussetzt und bei "Bewegung reduzieren" stumm bleibt — beim
   Nutzer war er deshalb nicht zu sehen. Stattdessen diese Achse
   am rechten Rand, von JavaScript gefuellt.

   Erst ab 1280 px, also dort, wo auch die Leiste am unteren Rand
   erscheint. Darunter waere am Rand kein Platz.
   ============================================================ */

.zeitachse { display: none; }

@media (min-width: 1280px) {
  .zeitachse {
    display: block;
    position: fixed;
    right: 26px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 34;
    /* Die Achse selbst faengt keine Klicks, nur ihre Punkte */
    pointer-events: none;
  }

  /* ---------- Die Achse ---------- */
  .zeitachse-linie {
    position: absolute;
    top: 6px;
    bottom: 6px;
    right: 5px;
    width: 1px;
    background: var(--linie);
    overflow: hidden;
  }
  .zeitachse-fuellung {
    display: block;
    width: 100%;
    height: 0;
    background: linear-gradient(to bottom, var(--gold-hell), var(--gold));
    transition: height .12s linear;
  }

  /* ---------- Ein Punkt je Rubrik ---------- */
  .zeitachse-punkte {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 26px;
  }
  .zeitachse-punkte a {
    position: relative;
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    text-decoration: none;
    padding: 2px 0;
  }

  /* Die Marke ist ein kleiner Ring, der sich beim aktiven Abschnitt
     fuellt — angelehnt an die Gradmarken des Tierkreisrads. */
  .zeitachse-marke {
    width: 11px;
    height: 11px;
    flex: 0 0 11px;
    border-radius: 50%;
    border: 1px solid var(--gold);
    background: var(--papier);
    box-shadow: 0 0 0 3px rgba(246, 236, 217, .9);
    transition: background .18s, transform .18s;
  }
  .zeitachse-punkte a:hover .zeitachse-marke,
  .zeitachse-punkte a[aria-current] .zeitachse-marke {
    background: var(--gold);
    transform: scale(1.25);
  }

  /* Die Beschriftung erscheint erst bei Bedarf — die Achse soll den
     Blick nicht vom Inhalt ziehen. */
  .zeitachse-text {
    /* Aus dem Fluss genommen: mit opacity: 0 hat die Blase weiter
       Platz belegt, die Achse war dadurch so breit wie ihre
       laengste Beschriftung (192 px) und ragte in die Karten.
       Jetzt haengt sie links neben der Marke, und die Achse ist
       nur so breit wie der Ring selbst. */
    position: absolute;
    right: 100%;
    margin-right: 11px;
    font-family: var(--sans);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--text-2);
    white-space: nowrap;
    background: rgba(255, 254, 250, .96);
    border: 1px solid var(--linie-zart);
    border-radius: 6px;
    padding: 4px 9px;
    opacity: 0;
    transform: translateX(6px);
    transition: opacity .18s, transform .18s;
  }
  /* Nur bei Mausberuehrung oder Tastaturfokus — nicht dauerhaft am
     aktiven Punkt. Dauerhaft war die Achse so breit wie ihre
     laengste Beschriftung und ragte damit in die Karten hinein
     (gemessen bei 1586 px: Achse ab 1353, Tafel bis 1523). Welcher
     Abschnitt gerade laeuft, zeigt der gefuellte Ring. */
  .zeitachse-punkte a:hover .zeitachse-text,
  .zeitachse-punkte a:focus-visible .zeitachse-text {
    opacity: 1;
    transform: translateX(0);
  }
  .zeitachse-punkte a[aria-current] .zeitachse-text { color: var(--bordeaux); }
}

@media (prefers-reduced-motion: reduce) {
  .zeitachse-fuellung,
  .zeitachse-marke,
  .zeitachse-text { transition: none; }
}

/* ---------- Vorzeile im Fragenblock, mobil ----------
   Auch im Mobilteil hatten die Regeln fuer den Einleitungstext die
   Vorzeile mitgenommen: sie stand dort auf 15,5 px statt der 10,5 px
   der anderen Vorzeilen. */
@media (max-width: 760px) {
  .fragen-einleitung .vorzeile { font-size: 10.5px; font-weight: 700; }
}


/* ============================================================
   1. SEITENGRUND AUF 0,9
   ============================================================
   Ein Weissschleier von 10 % ueber dem Pergament. Der Grund
   bleibt erkennbar, verliert aber an Gewicht — die Karten und
   die Trenner darauf treten deutlicher hervor. */

@media (min-width: 761px) {
  body {
    background-image:
      linear-gradient(rgba(255, 255, 255, .1), rgba(255, 255, 255, .1)),
      url('../bilder/held-pergament.jpg');
    background-size: auto, cover;
    background-position: center top, center top;
    background-attachment: fixed, fixed;
    background-repeat: no-repeat, no-repeat;
  }
}


/* ============================================================
   2. RUBRIK-TRENNER: NOTIZ AUF EINGEROLLTEM PAPIER
   ============================================================
   Sie trugen dasselbe held-pergament.jpg wie der Seitengrund und
   verschwanden darin. Jetzt ein eigenes Blatt (trenner-rolle.jpg):
   ruhige Faserung, an den Seiten dunklere Rollkanten mit einem
   Lichtgrat — gemessen Mitte 253, Kante 126. Dazu ein weicher
   Schein nach aussen, damit das Blatt auf dem Grund aufliegt.
   Breite 85 % statt 75 %. */

@media (min-width: 761px) {
  /* Weiss wie die Karten. Hier lag ein selbst erzeugtes Papierbild
     (trenner-rolle.jpg) — dessen Rollkanten sind zu massiven braunen
     Balken geworden und die Faserung zu einem Streifenmuster. Ein
     weisses Blatt mit zartem Rand und Schatten trifft das Gemeinte
     besser als eine schlechte Textur. */
  /* Die weisse Papierrolle als border-image.
     Warum nicht als Hintergrundbild: das Bild ist 3,5 : 1, ein flaches
     Textband waere viel breiter — background-size wuerde die Rollen an
     den Enden mitstrecken und platt druecken. border-image laesst die
     beiden Kanten unveraendert und streckt nur das Blatt dazwischen.

     Die Zahlen haengen zusammen: das Bild ist 1061x300, die Rolle darin
     51 px breit (gemessen 100 px im Original von 2077 px Breite). Bei
     150 px Trennerhoehe ist der Darstellungsfaktor 150/300 = 0,5,
     also ist die Rolle 51 x 0,5 = 26 px breit — unverzerrt. Wird die
     Hoehe geaendert, muss border-image-width mitwandern. */
  .schlussband {
    width: 85vw;
    max-width: 1580px;
    min-height: 150px;
    display: flex;
    align-items: center;
    background: none;
    border: 0 solid transparent;
    border-left-width: 26px;
    border-right-width: 26px;
    border-radius: 0;
    /* Der border-image-Aufbau mit trenner-rolle.png ist raus: die
       Datei existiert nicht mehr (jede Seite holte sich einen 404),
       und die spaeteren Regeln setzen ohnehin border: none. Breite
       und Mindesthoehe bleiben stehen, daran haengt die Bandhoehe. */
    box-shadow: none;
    padding: 0;
  }
  .schlussband-innen { padding: 0 30px; width: 100%; }
  .schlussband p { font-size: 22px; }
}


/* ============================================================
   3. PREISE UND LEISTUNGEN IN DEN KARTEN
   ============================================================
   Der Preis war 21 px in Textfarbe und stand gleichwertig neben
   der Dauer. Jetzt groesser, in Bordeaux und mit mehr Luft. Die
   Hakenliste stand auf --text-2 und wirkte hart; sie bekommt den
   weicheren Ton und deutlich mehr Zeilenabstand. */

.kennzeile-preis { margin-top: 4px; }
.kennzeile-preis b {
  font-size: 30px;
  color: var(--bordeaux);
  letter-spacing: -.01em;
}
.kennzeile-preis small {
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--text-3);
}
.kennzeile-preis svg { width: 24px; height: 24px; flex-basis: 24px; }

.hakenliste {
  margin-top: 10px;
  gap: 11px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--text-3);
}
.hakenliste li { align-items: flex-start; gap: 11px; }
.hakenliste svg { width: 18px; height: 18px; flex-basis: 18px; margin-top: 1px; }

/* Die Dauer bleibt sachlich, tritt aber hinter den Preis zurueck */
.kennzeile:not(.kennzeile-preis) { font-size: 15.5px; color: var(--text-2); }


/* ============================================================
   4. SEITENKOPF DER UNTERSEITE WIE AUF DER STARTSEITE
   ============================================================
   Dort ist die Ueberschrift zweifarbig: das erste Wort in Gold,
   das zweite in Bordeaux. Auf der Beratungsseite stand sie
   einfarbig dunkel. */

.seitenkopf-text h1 { display: flex; flex-direction: column; }
.seitenkopf-text h1 .gold     { color: var(--gold); }
.seitenkopf-text h1 .bordeaux { color: var(--bordeaux); }


/* ============================================================
   5. FORTSCHRITTSACHSE NACH LINKS, IN DUNKLEN TOENEN
   ============================================================ */

@media (min-width: 1280px) {
  .zeitachse {
    right: auto;
    left: 26px;
  }
  /* Die Achse sitzt jetzt links von den Ringen */
  .zeitachse-linie { right: auto; left: 5px; }
  .zeitachse-punkte a { justify-content: flex-start; }
  /* und die Beschriftung haengt rechts davon */
  .zeitachse-text {
    right: auto;
    left: 100%;
    margin-right: 0;
    margin-left: 11px;
  }

  /* Nicht in der Fenstermitte (dort stand sie bei 900 px
     Fensterhoehe auf 381 px, also unterhalb der Blickmitte), aber
     auch nicht direkt unter der Kopfleiste — 170 px waren zu weit
     oben. 255 px sind rund ein Viertel der Fensterhoehe und lassen
     zur 126 px hohen Kopfleiste 129 px Abstand. */
  .zeitachse { top: 255px; transform: none; }

  /* Dunkle Toene statt Gold */
  .zeitachse-linie { background: rgba(56, 48, 42, .18); }
  .zeitachse-fuellung {
    background: linear-gradient(to bottom, var(--text-2), var(--text));
  }
  .zeitachse-marke {
    border-color: var(--text-2);
    background: #fffdf7;
    box-shadow: 0 0 0 3px rgba(255, 253, 247, .85);
  }
  .zeitachse-punkte a:hover .zeitachse-marke,
  .zeitachse-punkte a[aria-current] .zeitachse-marke {
    background: var(--text);
  }
  .zeitachse-text {
    color: var(--text);
    border-color: rgba(56, 48, 42, .18);
  }
  .zeitachse-punkte a[aria-current] .zeitachse-text { color: var(--text); }
}


/* ============================================================
   FEINSCHLIFF
   ============================================================ */

@media (min-width: 761px) {

  /* 1. Weniger Luft zwischen Kartenkante und "Meine Angebote".
        Gemessen waren 67 px, die aus section.block kommen. Der
        Selektor braucht deshalb das Element mit dazu: ".band-hell"
        allein hat die niedrigere Spezifitaet und wurde ueberstimmt. */
  section.band-hell { padding-top: 30px; padding-bottom: 40px; }

  /* 2. Die Fragen-Tafel wieder ein Stueck ins Heldenbild ziehen.
        Sie stand mit 46 px Abstand darunter; jetzt ueberlappt sie es
        um 44 px wie vor dem Umbau. Der Kopfbereich braucht dafuer
        einen Stapelplatz unter der Tafel. */
  .fragen-block { margin-top: -44px; position: relative; z-index: 2; }
  .held { position: relative; z-index: 1; }

  /* 3. Die Rolle war als Bild zu wuchtig — zurueck auf das weisse
        Blatt, das vorher stand. Bild und feste Hoehe entfallen. */
  .schlussband {
    min-height: 0;
    display: block;
    background: #ffffff;
    border: 1px solid #ebe0c9;
    border-radius: 10px;
    border-image: none;
    padding: 26px 0;
    box-shadow:
      0 0 0 6px rgba(255, 255, 255, .45),
      0 2px 14px rgba(120, 95, 50, .10);
  }
  .schlussband-innen { padding: 0 46px; }
}

/* ============================================================
   4. FORTSCHRITTSACHSE: DUNKEL UND OHNE KASTEN
   ============================================================
   Die Ringe waren innen weiss und lagen als helle Punkte auf dem
   hellen Grund. Jetzt dunkel gefuellt. Und die Beschriftung stand
   in einer weissen Sprechblase — sie soll wirken, als waere sie auf
   den Hintergrund geschrieben, also ohne Flaeche und ohne Rahmen.
   Was nicht der aktuelle Abschnitt ist, bleibt zurueckgenommen. */

@media (min-width: 1280px) {
  .zeitachse-linie { background: rgba(22, 29, 36, .16); }

  .zeitachse-marke {
    background: rgba(22, 29, 36, .28);
    border-color: rgba(22, 29, 36, .45);
    box-shadow: none;
  }
  .zeitachse-punkte a:hover .zeitachse-marke,
  .zeitachse-punkte a[aria-current] .zeitachse-marke {
    background: var(--text);
    border-color: var(--text);
    transform: scale(1.3);
  }

  /* Text direkt auf dem Grund: keine Flaeche, kein Rahmen, kein
     Radius. Damit er auf jedem Untergrund lesbar bleibt, traegt er
     einen hellen Schein statt eines Kastens. */
  .zeitachse-text {
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    margin-left: 13px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--text);
    text-shadow:
      0 1px 0 rgba(255, 253, 247, .9),
      0 0 5px rgba(255, 253, 247, .95),
      0 0 12px rgba(255, 253, 247, .8);
    /* Nicht aktive Punkte sind zurueckgenommen, aber lesbar —
       sie verschwinden erst ganz, wenn man die Achse verlaesst. */
    opacity: .32;
    transform: none;
  }
  .zeitachse:hover .zeitachse-text { opacity: .5; }
  .zeitachse-punkte a:hover .zeitachse-text,
  .zeitachse-punkte a:focus-visible .zeitachse-text { opacity: 1; }
  .zeitachse-punkte a[aria-current] .zeitachse-text {
    opacity: 1;
    color: var(--bordeaux);
  }
}


/* ============================================================
   TRENNER MIT ASTRO-PAPIER, FUSSBEREICH WEISS
   ============================================================ */

@media (min-width: 761px) {
  /* Das Papier ist auf 2216 x 148 zugeschnitten, also genau das
     15 : 1 des Trenners auf dem Desktop — deshalb sitzt es ohne
     Stauchung. Auf schmaleren Schirmen ist der Trenner gedrungener;
     dort beschneidet cover die Aussenraender, die Mitte mit dem Text
     bleibt in jedem Fall frei. Gemessen: Mitte Helligkeit 251,
     Ornamente 214-241 — der goldene Text traegt darauf. */
  .schlussband {
    background: #ffffff url('../bilder/trenner-astro.jpg') center/cover no-repeat;
  }
}

/* Der Fussbereich stand auf dem Cremeton und war damit die einzige
   grosse Flaeche, die nicht weiss ist. */
.fuss { background: #ffffff; }


/* ============================================================
   TRENNER BREITER ALS DIE KARTEN
   ============================================================
   Gemessen: Fragen-Tafel und Angebote liegen auf 93 vw, der Trenner
   lag auf 85 vw — damit war er 112 bis 200 px SCHMALER als die
   Boxen, nicht breiter. Jetzt 96 vw, also sichtbar ueber die Karten
   hinaus. Die Obergrenze faellt weg: sie hatte den Trenner auf einem
   1920er Schirm auf 82 % gedrueckt, wodurch der Abstand zu den
   Karten noch groesser wurde.
   ============================================================ */

@media (min-width: 761px) {
  /* 85 vw wie angesagt. Damit ist der Trenner schmaler als die
     Karten (93 vw) — das ist die bewusste Vorgabe. */
  .schlussband {
    width: 85vw;
    max-width: none;
  }
  /* Die Zierlinien beginnen hinter den Ornamenten des Papiers */
  .schlussband-innen { padding: 0 130px; }
}

@media (max-width: 1100px) {
  /* Auf schmaleren Schirmen ist das Papier gedrungener, die
     Ornamente ruecken naeher an die Mitte. */
  .schlussband-innen { padding: 0 70px; }
}


/* ============================================================
   TRENNER: RAENDER AUSWASCHEN, WEISSER SCHEIN
   ============================================================
   Wie beim Heldenbild, das nach links ins Creme auslaeuft: die
   Ornamente sollen an beiden Enden weich verschwinden statt an
   einer Kante abzubrechen. Ein Verlauf ueber dem Bild macht das —
   Weiss aussen, durchsichtig ab einem Fuenftel der Breite.

   Als Pseudo-Element und nicht als mask-image: eine Maske erzwingt
   eine eigene GPU-Ebene, das hatte an anderer Stelle schon dazu
   gefuehrt, dass gar nichts mehr gezeichnet wurde.
   ============================================================ */

@media (min-width: 761px) {
  .schlussband { position: relative; overflow: hidden; }
  .schlussband::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to right,
      #ffffff 0%,
      rgba(255, 255, 255, .82) 7%,
      rgba(255, 255, 255, 0) 21%,
      rgba(255, 255, 255, 0) 79%,
      rgba(255, 255, 255, .82) 93%,
      #ffffff 100%);
  }
  /* Der Inhalt liegt ueber dem Verlauf */
  .schlussband-innen { position: relative; z-index: 1; }

  /* Weisser Schein aussen am Rahmen */
  .schlussband {
    box-shadow:
      0 0 0 5px rgba(255, 255, 255, .85),
      0 0 18px 5px rgba(255, 255, 255, .7),
      0 2px 16px rgba(120, 95, 50, .09);
  }
}


/* ============================================================
   DREI KARTEN STATT VIER (schriftliche Beratungen)
   ============================================================ */

@media (min-width: 1280px) {
  .preiskarten-drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* Themenband mit nur zwei Spalten: Notiz links, Text rechts.
   Auf den Seiten ohne Ablaufliste faellt die dritte Spalte weg. */
@media (min-width: 901px) {
  .abschluss-zwei { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .abschluss-zwei .abschluss-notiz { grid-column: auto; order: 0; }
}


/* ============================================================
   1. TRENNER: DAS GANZE ELEMENT LAEUFT AN DEN SEITEN AUS
   ============================================================
   Zuvor wurde nur das Hintergrundbild mit einem weissen Verlauf
   ueberdeckt — die weisse Flaeche und der Rahmen blieben mit harter
   Kante stehen. Gewollt ist, dass der Trenner als Ganzes in die
   Seite uebergeht. Das geht nur mit einer Maske: sie nimmt Flaeche,
   Rahmen und Bild gemeinsam die Deckkraft.

   Rahmen und Radius entfallen dabei — ein Rahmen, der ins Nichts
   ausblendet, sieht an der Abbruchstelle immer nach Fehler aus.
   ============================================================ */

@media (min-width: 761px) {
  .schlussband {
    border: none;
    border-radius: 0;
    box-shadow: none;
    -webkit-mask-image: linear-gradient(to right,
      transparent 0%,
      rgba(0, 0, 0, .35) 4%,
      #000 14%,
      #000 86%,
      rgba(0, 0, 0, .35) 96%,
      transparent 100%);
            mask-image: linear-gradient(to right,
      transparent 0%,
      rgba(0, 0, 0, .35) 4%,
      #000 14%,
      #000 86%,
      rgba(0, 0, 0, .35) 96%,
      transparent 100%);
  }
  /* Der weisse Verlauf ueber dem Bild ist damit ueberfluessig */
  .schlussband::before { display: none; }
}


/* ============================================================
   2. PORTRAIT AUF DER ÜBER-MICH-SEITE
   ============================================================
   Das Bild war nicht beschnitten, sondern zu klein: 299 x 392 px in
   einer 300-px-Spalte, die so hoch wurde wie der Text daneben —
   darunter blieb leerer Raum. Jetzt eine breitere Spalte und ein
   Feld, das nur so hoch ist wie das Bild.
   ============================================================ */

@media (min-width: 901px) {
  .person { grid-template-columns: 380px minmax(0, 1fr); }
  .person-bild {
    align-self: start;
    border-radius: 10px;
    overflow: hidden;
    background: var(--flaeche);
    box-shadow: 0 2px 8px rgba(120, 95, 50, .07);
  }
  .person-bild img { display: block; width: 100%; height: auto; }
}


/* ============================================================
   3. HELDENBILD BLEIBT BEIM SCROLLEN STEHEN
   ============================================================
   Zweiter Anlauf. Der erste lief ueber background-attachment:
   fixed — und das war der Grund fuer den Zoom: bei "fixed" ist der
   Bezugsrahmen des Hintergrunds das FENSTER, nicht der Kasten.
   Gemessen bei 1400 px Fensterbreite: der Kasten ist 789 x 525,
   das Bild wurde darin frueher auf 1155 x 525 gerechnet. Mit fixed
   deckt es stattdessen 1400 x 880 ab, also 1935 x 880 — das
   1,68-fache. Genau das war zu sehen.

   Jetzt bleibt das <img> das Bild und behaelt seine Groesse. Ein
   kurzes Stueck Javascript in inc/fuss.php misst den Kasten und
   setzt das Bild mit position: fixed auf genau dieselbe Stelle im
   Fenster. Der Kasten bekommt clip-path: inset(0) — das
   beschneidet auch fest stehende Kinder, ohne (anders als
   transform oder filter) selbst zum Bezugsrahmen zu werden. Beim
   Scrollen wandert der Beschnitt mit, das Bild bleibt stehen und
   verschwindet nach und nach unter dem Rand.

   Erst ab 1001 px: darunter steht das Bild nicht mehr neben dem
   Text, sondern als 16:9-Streifen darueber. Ein stehendes Bild
   ergibt dort keinen Sinn.
   ============================================================ */

/* NACHTRAG 2: Der Beschnitt ist weg.

   Vorher lag clip-path: inset(0) auf dem Kasten — das Bild stand
   zwar, verschwand aber Zeile fuer Zeile unter der Unterkante des
   Kopfbereichs, und darunter uebernahm der creme Seitengrund. Genau
   das war mit „wird vom gelben Hintergrund ausgeblendet" gemeint.

   Jetzt bleibt das Motiv dauerhaft im Fenster stehen und der ganze
   Inhalt zieht darueber weg. Dafuer muss es HINTER den Inhalt:

   - z-index: -1 am Bild bringt es in die unterste Ebene des
     Wurzel-Stapels. Dort wird es nach dem Seitengrund, aber vor
     allen Kastenhintergruenden gezeichnet — also sichtbar, wo der
     Inhalt durchsichtig ist, und verdeckt, wo weisse Karten liegen.
   - Damit es dort ueberhaupt ankommt, duerfen .held und .held-bild
     keinen eigenen Stapel mehr aufmachen: ein positioniertes
     Element mit z-index: 1 schliesst seine Kinder ein, das Bild
     laege dann ueber allem Nachfolgenden statt darunter.
     .fragen-block (z-index: 2) bleibt trotzdem oben.

   Die Kanten uebernimmt eine Maske am Bild selbst. Der creme
   Verlauf lag bisher auf .held-bild::after — der scrollt mit dem
   Kasten weg und liesse das stehende Bild mit harter Kante zurueck.
   Links derselbe Verlauf wie zuvor (dicht bis 6 %, offen ab 72 %),
   unten neu, damit die Unterkante nicht als Strich quer ueber die
   Seite laeuft. */

.held-bild.steht {
  z-index: auto;
  clip-path: none;
}
.held.hat-stehendes-bild { z-index: auto; }

.held-bild.steht > img {
  z-index: -1;
  will-change: transform;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, transparent 6%, rgba(0,0,0,.4) 34%, #000 72%),
    linear-gradient(to bottom, #000 0%, #000 68%, transparent 100%);
          mask-image:
    linear-gradient(to right, transparent 0%, transparent 6%, rgba(0,0,0,.4) 34%, #000 72%),
    linear-gradient(to bottom, #000 0%, #000 68%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}

/* Der mitscrollende Schleier waere jetzt doppelt gemoppelt */
.held-bild.steht::after { display: none; }

/* ============================================================
   NOTIZZETTEL AUF DEM NEUEN PAPIER
   ============================================================
   Die Zettel trugen noch held-pergament.jpg — das kraeftige Bild
   mit Sonne und Tierkreisrad, das auch der Seitengrund benutzt.
   Jetzt notiz-astro.jpg: dasselbe generierte Papier wie im Trenner,
   nur unbeschnitten (3,1 : 1 statt 15 : 1) und auf 1400 px Breite
   gebracht. Der flache Trennerschnitt waere hier extrem gezoomt
   gewesen — der Zettel hat rund 2,6 : 1.

   Gemessen traegt die Flaeche den goldbraunen Text: Mitte
   Helligkeit 253, dunkelste Stelle 252.
   ============================================================ */

.abschluss-notiz {
  background: #ffffff url('../bilder/notiz-astro.jpg') center/cover no-repeat;
  border-color: #ebe0c9;
}

/* Der Zitatkasten im Kopfbereich und das Trennband am Handy tragen
   dasselbe Papier — sonst stehen zwei verschiedene Pergamente
   nebeneinander auf einer Seite. */
@media (max-width: 760px) {
  .held .held-zitat,
  .held-zitat,
  .schlussband,
  .stimme {
    background-image: url('../bilder/notiz-astro.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }
}


/* ============================================================
   TRENNER AUF DIE VOLLE FENSTERBREITE
   ============================================================
   Zuvor 85 vw mit einem Verlauf, der ueber 14 % der Breite lief.
   Jetzt liegt das Band von Rand zu Rand, und der durchsichtige
   Verlauf bleibt auf hoechstens ein Zehntel je Seite beschraenkt.

   width: 100% und nicht 100vw: vw rechnet die Bildlaufleiste mit.
   Gemessen sind das 15 px — bei 100vw waere das Band 1440 px breit
   in einem 1425 px breiten Dokument und die Seite haette eine
   waagrechte Laufleiste bekommen. Als direktes Kind von <main>,
   das keine Begrenzung und keinen Innenabstand hat, trifft 100 %
   genau die Dokumentbreite.

   Der Innenabstand wandert von festen 130 px auf 12 %: die goldenen
   Zierlinien sollen hinter dem Verlauf beginnen, sonst faengt die
   Linie in der auslaufenden Zone an und bricht scheinbar ab. 12 %
   liegt knapp hinter den 10 % und wandert mit der Fensterbreite mit.
   Die Begrenzung des inneren Feldes faellt weg — sonst blieben die
   Linien auf 1180 px stehen, waehrend das Band darunter weiterlaeuft.
   ============================================================ */

@media (min-width: 761px) {
  .schlussband {
    width: 100%;
    max-width: none;
    -webkit-mask-image: linear-gradient(to right,
      transparent 0%,
      #000 10%,
      #000 90%,
      transparent 100%);
            mask-image: linear-gradient(to right,
      transparent 0%,
      #000 10%,
      #000 90%,
      transparent 100%);
  }
  .schlussband-innen {
    max-width: none;
    padding: 0 12%;
  }
}


/* ============================================================
   TRENNER: OHNE PAPIER, KURZER VERLAUF
   ============================================================
   Weg soll das BILD (trenner-astro.jpg), nicht die Flaeche. Beim
   ersten Versuch hatte ich beides entfernt — dann stand die
   goldene Linie direkt auf dem Pergament des Seitengrundes und das
   weisse Band fehlte ganz.

   Jetzt: weisse Flaeche ohne Bild. Der Verlauf blendet dieses
   Weiss an beiden Enden aus, damit das Band nicht mit einer Kante
   abbricht. 10 % waren dafuer zu lang — 3,5 % je Seite, bei
   1400 px Fensterbreite rund 49 px.

   Rahmen, Radius und der weisse Schein aus den vorigen Runden
   entfallen: ein Rahmen um eine Flaeche, die an den Enden
   verschwindet, sieht an der Abbruchstelle immer falsch aus.
   ============================================================ */

@media (min-width: 761px) {
  .schlussband {
    background-image: none;
    background-color: #ffffff;
    border: none;
    border-radius: 0;
    box-shadow: none;
    /* Der Verlauf faengt nicht bei null an: am aeussersten Rand
       bleiben 50 % stehen. Bei voller Durchsichtigkeit loeste sich
       das Band schon vor dem Bildschirmrand ganz auf und wirkte
       dort abgerissen — jetzt laeuft es sichtbar ueber die Kante
       hinaus. */
    -webkit-mask-image: linear-gradient(to right,
      rgba(0, 0, 0, .5) 0%, #000 3.5%, #000 96.5%, rgba(0, 0, 0, .5) 100%);
            mask-image: linear-gradient(to right,
      rgba(0, 0, 0, .5) 0%, #000 3.5%, #000 96.5%, rgba(0, 0, 0, .5) 100%);
  }
  /* Der Innenabstand durfte vorher nicht in den Verlauf reichen.
     Jetzt beginnt die Linie schon nach 3,5 % — 5 % geben ihr etwas
     Luft und lassen sie sichtbar weiter laufen als zuvor. */
  .schlussband-innen { padding: 0 5%; }
}


/* ============================================================
   CLAIM: RECHTS NEBEN DAS MENUE
   ============================================================
   Bisher bekam der Claik unter 1621 px eine eigene Zeile quer
   ueber die Kopfleiste. Jetzt steht er dort, wo der Hamburger
   steht — rechts daneben, kleiner, rechtsbuendig.

   Nur bis 1279,98 px: ab 1280 klappt das volle Menue auf und der
   Kontaktknopf kommt zurueck. Gemessen bei 1280 px: Logo 188 +
   Menue 852 + Knopf 128 = 1168 von 1201 nutzbaren Pixeln. Fuer den
   Claim bleiben 33 px — dort muss die eigene Zeile bleiben.

   Unter 1280 ist reichlich Platz: bei 1279 px bleiben nach Logo und
   Hamburger 938 px, bei 375 px noch 111 px. Auf dem kleinsten
   Geraet bricht die zweite Zeile deshalb um (gemessen: sie braucht
   160 px bei 11 px Schrift). Das ist der Preis dafuer, dass Logo,
   Menue und Claim in eine Zeile sollen — lesbar bleibt es.
   ============================================================ */

@media (max-width: 1279.98px) {
  .kopf-innen {
    flex-wrap: nowrap;
    padding-bottom: 0;
    align-items: center;
  }
  .kopf-claim {
    order: 6;
    flex: 0 1 auto;
    /* NACHTRAG: kein Auto-Rand mehr, sondern ein fester Abstand.
       Mit zwei Auto-Raendern teilten Schalter und Claim den freien
       Raum je zur Haelfte — der Schalter stand damit in der Mitte
       und war noch zu weit links. Jetzt bekommt der Auto-Rand des
       Schalters den ganzen Rest, und der Claim behaelt nur diesen
       Sicherheitsabstand: der Schalter rueckt bis knapp an ihn
       heran. */
    margin: 0 0 0 clamp(20px, 5vw, 56px);
    padding-top: 0;
    border-top: none;
    text-align: right;
    font-size: clamp(11px, 1.45vw, 13px);
    line-height: 1.36;
    max-width: 52%;
  }
  .kopf-claim b { font-size: 1.06em; }
  /* Rechtsbuendig braucht die zweite Zeile keinen Einzug */
  .kopf-claim-zeile { padding-left: 0; }

  /* Der Hamburger stand direkt am Logo, waehrend zwischen ihm und
     dem Claim viel Luft blieb — gemessen bei 600 px Fensterbreite
     154 px.

     margin-left: auto (nicht -right: ein rechter Rand schiebt nur
     das Nachfolgende weg, das Element selbst bleibt stehen — genau
     das war der erste Versuch, und der Schalter bewegte sich
     keinen Pixel). Da der Claim ebenfalls margin-left: auto hat,
     teilen sich die beiden den uebrigen Raum: der Schalter wandert
     um die Haelfte nach rechts, der Claim bleibt am Rand.

     Das kostet den Claim keinen Platz — automatische Raender nehmen
     nur UEBRIGEN Raum. Wo keiner uebrig ist (schmale Geraete),
     bleibt der Schalter, wo er war.

     flex-shrink: 0, weil er sonst nachgibt: bei 360 px war er von
     42 auf 25 px zusammengedrueckt, die drei Striche lagen fast
     aufeinander. */
  .nav-schalter { margin-left: auto; margin-right: 0; flex: 0 0 auto; }
}


/* ============================================================
   CLAIM AUF DEM DESKTOP ZWEIZEILIG
   ============================================================
   Er stand dreizeilig, und zwar knapp: der Kasten war 233 px
   breit, die zweite Zeile („– das Leben bewusster gestalten.")
   braucht bei 16 px gemessen genau 233 px. Ein Pixel zu wenig, und
   sie fiel um.

   Der Kasten war nicht durch max-width begrenzt (268 px), sondern
   durch den Platz in der Reihe — als schrumpfbares Feld gab er
   nach, sobald das Menue breiter wurde. Mit flex-shrink: 0 behaelt
   er seine Breite, und das Menue daneben gibt nach.
   ============================================================ */

@media (min-width: 1621px) {
  .kopf-claim {
    flex: 0 0 auto;
    max-width: none;
    width: 248px;
  }
  /* Der eigentliche Grund fuer die dritte Zeile: eine Grundregel
     setzt .kopf-claim b auf display: block, „Die Sterne" stand
     deshalb allein. Nachgemessen lag der Umbruch zwischen „Die
     Sterne" (95 px) und „besser verstehen" (109 px) — zusammen
     204 px in einem 248 px breiten Kasten, also reichlich Platz.
     Fuer schmale Geraete gibt es diese Ruecknahme schon, auf dem
     Desktop fehlte sie. */
  .kopf-claim b { display: inline; }
}


/* ============================================================
   AUCH AUF KLEINEN GERAETEN NEBEN DAS MENUE
   ============================================================
   Zuvor stand der Claim unter 480 px wieder auf eigener Zeile,
   weil die zweite Zeile („– das Leben bewusster gestalten.")
   dort nicht in einem Stueck neben Logo und Hamburger passt.
   Gewuenscht ist aber die Stellung, nicht die Zeilenzahl —
   also steht er jetzt auch dort rechts oben, und der Text
   bricht um, wo es eng wird.

   Damit das so selten wie moeglich passiert, geben Logo und
   Abstaende auf schmalen Geraeten etwas nach. Gemessen bei
   375 px: nutzbar 360, davon Rand 32, Hamburger 42, Abstaende 20
   — bleiben nach einem 120 px breiten Logo rund 146 px fuer den
   Claim, und die laengere Zeile braucht bei 9,75 px genau 142 px.
   ============================================================ */

@media (max-width: 479.98px) {
  .kopf-innen { gap: 8px; padding-left: 14px; padding-right: 14px; }

  /* Logo etwas kleiner: der Wortzug traegt die Marke, die
     Unterzeile ist ohnehin nur Beiwerk. */
  .marke { gap: 7px; }
  .marke-zeichen { width: 26px; height: 26px; }
  .marke-schrift b { font-size: 15px; letter-spacing: .09em; }
  .marke-schrift span { font-size: 7.5px; letter-spacing: .11em; }

  /* Der Hamburger braucht keine 42 px — 38 sind noch bequem zu
     treffen und geben dem Claim vier Pixel mehr.

     Und er rueckt hier wieder an das Logo: unter 480 px ist kein
     Raum uebrig, den der automatische Rand verteilen koennte — er
     loest sich zu 0 auf. Dann zaehlt jeder Pixel fuer den Claim.
     Gemessen bei 320 px: mit den sechs Pixeln zurueck vier statt
     fuenf Zeilen. Ab 480 px greift margin-left: auto und der
     Schalter wandert nach rechts. */
  .nav-schalter { width: 38px; height: 38px; margin-left: -6px; }

  /* Hier zurueck auf den Auto-Rand: ein fester Abstand wuerde dem
     Claim Breite wegnehmen, und unter 480 px kostet jeder Pixel
     eine Zeile. Auto loest sich zu 0 auf, wenn nichts uebrig ist,
     haelt den Claim aber am rechten Rand, wenn doch. */
  .kopf-claim { margin-left: auto; font-size: clamp(9.5px, 2.6vw, 12px); }
}


/* ============================================================
   MOBIL: TRENNER MITTIG ZWISCHEN DIE ABSCHNITTE
   ============================================================
   Gemessen bei 390 px die sichtbaren Abstaende zwischen den
   Abschnitten: 26 / 61 / 66 / 95 / 65 / 95 / 66 / 68 px. Die
   beiden 95er sind jeweils der Raum OBERHALB eines Trenners —
   dort kam zum Polster des Abschnitts (34 px) und dem des
   Trenners (30 px) noch ein margin-top von 30 px dazu. Unterhalb
   fehlte dieser Rand, deshalb sass der Trenner nicht in der Mitte,
   sondern naeher am folgenden Abschnitt.

   Ohne diesen Rand liegen alle Abstaende bei rund 65 px.
   ============================================================ */

@media (max-width: 760px) {
  /* NACHTRAG: doch ein Rand, aber auf beiden Seiten gleich.
     Der Trenner stiess oben und unten direkt an die weissen
     Abschnitte, vom Pergament war zwischen Rubrik und Trenner
     nichts zu sehen. 22 px auf beiden Seiten legen den Grund frei
     und machen aus dem Trenner ein abgesetztes Band. Symmetrisch,
     damit er nicht wieder naeher am folgenden Abschnitt sitzt als
     am vorigen — das war der Fehler der Ausgangslage (95 px oben
     gegen 65 px unten). */
  .schlussband { margin: 22px 0; }

  /* Der Fragen-Block ist nur eine Huelle ohne eigenes Polster
     unten — ohne das hier stand der erste Trenner 31 px unter der
     Tafel statt gleichauf mit den anderen. */
  .fragen-block { padding-bottom: 34px; }

  /* ---------- Die Zeichnung im Trenner sichtbar machen ----------
     Gemessen erklaert sich, warum sie nicht zu erkennen war: das
     generierte Original hat selbst nur eine Spanne von 47
     Helligkeitsstufen (208 bis 255), und notiz-astro.jpg war davon
     noch um die Haelfte zu Weiss hin aufgehellt — Spanne 19. Auf
     einem 415 px breiten Band bleibt davon nichts uebrig.

     trenner-band.jpg ist dieselbe Vorlage, aber mit gestrecktem
     Abstand zu Weiss (Faktor 1,6 statt 0,5): Mittel 247,
     dunkelste 191, Spanne 64 — mehr als das Dreifache.

     NACHTRAG zur Bildhoehe: das Band zeigte die Zeichnung je nach
     Textmenge unterschiedlich stark. Ursache ist cover — bei einem
     hohen Band bestimmt die Hoehe die Skalierung und man sieht nur
     einen mittigen Ausschnitt. Gemessen sitzt die Zeichnung aber in
     den beiden aeusseren Zehnteln (13,6 / 6,3 links, 3,5 / 10,0
     rechts), die Mitte ist leer: bei 91 px Bandhoehe waren 100 % der
     Breite sichtbar und 3,4 % Tinte, bei 234 px nur 57 % und 0,1 %.

     Deshalb ist das Bild jetzt 1200 x 940 statt 1200 x 384 — oben
     und unten mit der jeweiligen Randzeile gepolstert (gemessen 248
     gegen 248, keine messbare Naht). Die Hoehe ist nicht geraten:
     ueber die Fensterbreiten 320 bis 760 px hat das schmalste Band
     ein Verhaeltnis von 1,31 (305 x 233 px bei 320 px, wo der
     laengste Satz auf vier Zeilen bricht). 1200 / 1,31 = 917, mit
     940 ist Reserve drin. Damit bleibt cover bei jedem gemessenen
     Bandformat von der BREITE bestimmt und die ganze Zeichnung ist
     immer zu sehen — nachgerechnet fuer alle acht Formate.

     Der Grund ist weiss wie auf dem Desktop. Beim ersten Anlauf
     stand hier creme (--papier-2) — damit war die Zeichnung zwar
     zu sehen, aber das Band war nicht mehr weiss. Mit Weiss
     bleibt vom Bild seine eigene Tonung uebrig: Papier 247,
     Linien 191. Das liest sich als weiss und die Zeichnung traegt
     trotzdem.

     background-blend-mode: multiply bleibt stehen. Auf Weiss
     rechnet es sich zu nichts, aber es haelt die Absicht fest —
     wer die Grundfarbe wieder aendert, bekommt sofort wieder ein
     durchscheinendes Papier statt eines deckenden Bildes. */
  .schlussband {
    background-color: #ffffff;
    background-image: url('../bilder/trenner-band.jpg');
    /* 100% auto statt cover: die Breite ist immer voll, die Hoehe
       ergibt sich aus dem Verhaeltnis. Mit cover war es umgekehrt —
       bei einem hohen Band bestimmte die Hoehe die Skalierung, und
       vom Rad lag nur ein waagrechter Streifen im Fenster. Genau
       das sah abgeschnitten aus.

       Dass oben und unten jetzt Platz bleibt, faellt nicht auf: das
       Papier des Bildes ist auf reines Weiss gezogen (Randzeilen
       gemessen 255,00, kein Punkt dunkler als 252) und stoesst damit
       nahtlos an die weisse Flaeche des Kastens. background-blend-
       mode braucht es dafuer nicht mehr. */
    background-size: 100% auto;
    background-position: center;
    background-repeat: no-repeat;
  }
}


/* ============================================================
   MOBIL: WEISS UNTER DEM KOPFTEXT, CREME IM ZITATKASTEN
   ============================================================
   Auf dem Desktop liegt hinter „Praktische Astrologie" ein
   nahezu weisser Schein (.held-text::before, ein Radialverlauf
   auf rgb(255,254,250)) — mobil war der abgeschaltet, der Text
   stand direkt auf dem Pergament.

   Statt den Radialverlauf nachzubauen bekommt der ganze
   Kopfbereich hier Weiss: mobil steht der Text ohnehin ueber
   dem Bild und nicht daneben, ein weicher Schein haette also
   nichts, wogegen er verlaufen koennte.

   Umgekehrt der Zitatkasten: der trug notiz-astro.jpg und wirkte
   dadurch weiss. Ohne das Bild bleibt --papier-2 (#efe2c9)
   uebrig — der creme Ton, der gemeint war.

   Die Selektoren tragen .held davor, weil die Regel, die das
   Papier gesetzt hat, ebenfalls zweistufig ist (.held
   .held-zitat). Mit einstufigem Selektor wuerde sie gewinnen,
   egal wie weit unten diese Regel steht.
   ============================================================ */

@media (max-width: 760px) {
  .held {
    background-color: #ffffff;
    background-image: none;
  }
  .held::before { display: none; }

  /* NACHTRAG: Das Bild kommt zurueck, aber ein anderes.
     Vorher lag notiz-astro.jpg darauf — mit gemessener Helligkeit
     253 praktisch weiss, deshalb wirkte der Kasten weiss statt warm.
     Ich hatte daraufhin das Bild ganz entfernt; uebrig blieb eine
     glatte creme Flaeche ohne Zeichnung.

     Jetzt derselbe Aufbau wie zwischen 761 und 1000 px, wo der
     Kasten schon immer richtig aussah: creme Grundfarbe plus
     held-pergament.jpg — das ist das warme Blatt mit dem
     gezeichneten Tierkreisrad. */
  .held .held-zitat,
  .held-zitat {
    background-color: var(--papier-2);
    background-image: url('../bilder/held-pergament.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-color: var(--linie);
  }
}


/* ============================================================
   PREISTABELLE: KARTENZEILEN AUF SEHR SCHMALEN GERAETEN
   ============================================================
   Auf schriftliche-analysen.php schob die Preistabelle bei 320 px
   die ganze Seite auf: Inhaltsbreite 265, Zelleninhalt 299, die
   Seite bekam eine waagrechte Laufleiste (319 statt 305).

   Ursache ist die Voreinstellung von Rasterfeldern: sie duerfen
   nicht schmaler werden als ihr laengstes Wort (min-width: auto).
   „Zusammenstellung" hielt die Wertspalte auf, waehrend die
   Beschriftung ihre 8,5 em behielt. minmax(0, …) hebt diese
   Sperre auf, damit beide Spalten nachgeben koennen.

   Unter 400 px reicht das nicht — dort steht die Beschriftung
   ueber dem Wert statt daneben. Zwei Spalten mit je gut 100 px
   ergeben ohnehin keine lesbare Zeile mehr.
   ============================================================ */

@media (max-width: 760.98px) {
  table.preise td[data-spalte] {
    grid-template-columns: minmax(0, 8.5em) minmax(0, 1fr);
    overflow-wrap: break-word;
  }
}

@media (max-width: 399.98px) {
  table.preise td[data-spalte] {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
}


/* ============================================================
   SEHR SCHMALE GERAETE: LANGE UEBERSCHRIFTEN TRENNEN
   ============================================================
   Auf datenschutz.php schoben die Zwischenueberschriften bei
   320 px die Seite auf: „Server-Protokolldateien" braucht in
   Cinzel mit Sperrung 295 px, verfuegbar sind 265. Deutsche
   Zusammensetzungen sind in einer gesperrten Kapitalis schnell
   breiter als ein 320-px-Schirm.

   hyphens: auto trennt nach den Regeln von lang="de" im
   <html>-Element; overflow-wrap greift, wenn kein Trennpunkt
   passt. Erst unter 400 px, damit auf normalen Geraeten keine
   Trennstriche in den Ueberschriften auftauchen.
   ============================================================ */

@media (max-width: 399.98px) {
  h1, h2, h3,
  .held-titel, .seitenkopf-text h1 {
    -webkit-hyphens: auto;
            hyphens: auto;
    overflow-wrap: break-word;
  }
}


/* Ab 1621 px ist die Kopfleiste nur 73 px hoch — die Achse darf
   entsprechend hoeher sitzen. Derselbe Abstand zur Kopfleiste wie
   darunter: 73 + 129 = 202. */
@media (min-width: 1621px) {
  .zeitachse { top: 202px; }
}


/* ============================================================
   MOBIL: PERGAMENT ALS SEITENGRUND
   ============================================================
   Das gezeichnete Pergament lag nur ab 761 px auf dem body — mobil
   blieb nur die zarte Faserung aus Farbverlaeufen uebrig, und die
   Zeichnung fehlte ganz.

   Der Grund war background-attachment: fixed, das auf iOS nicht
   greift: dort wird der Hintergrund auf die volle Dokumenthoehe
   gezogen, ein 1600x900-Bild also grotesk gestreckt. Mit
   background-attachment: scroll waere es dasselbe, denn der
   Bezugsrahmen ist dann der ganze body.

   Ein fest stehendes Pseudo-Element hat dieses Problem nicht:
   position: fixed arbeitet auf iOS korrekt. Es liegt auf z-index -2
   und damit unter dem stehenden Kopfbild (-1) und ueber der
   Leinwand.

   Zum Ausschnitt: 1600x900 in einem 415x700-Fenster mit cover
   ergibt 1245x700 — sichtbar ist das mittlere Drittel bei 78 % der
   Bildgroesse. Auf dem Desktop liegt es bei 100 %, die Zeichnung
   ist also nur unwesentlich kleiner.
   ============================================================ */

@media (max-width: 760px) {
  body::before {
    display: block;
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    /* NACHTRAG zur Lage: mit "center" war der Grund flach.
       Gemessen ueber ein 8x6-Raster sitzt die Zeichnung fast
       ausschliesslich in der linken Spalte (1,3 bis 6,4 % dunkle
       Punkte), die Mitte ist praktisch leer (0,0 bis 0,3 %). Am
       Handy sind bei cover nur 534 von 1600 px Bildbreite sichtbar,
       also ein Drittel — und mit "center" traf das genau den leeren
       Teil: 0,1 % gegen 1,5 % beim linken Ausschnitt. Deshalb
       "left". */
    background: var(--papier) url('../bilder/held-pergament.jpg') left center / cover no-repeat;
    pointer-events: none;
  }
}


/* ============================================================
   MOBIL: DIE DREI FRAGEN ALS EIGENE WEISSE KAESTEN
   ============================================================
   Auf dem Desktop stehen Einleitung und die drei Fragenkarten in
   einer breiten weissen Tafel; die Karten grenzen sich dort durch
   die Spalten des Rasters voneinander ab.

   Mobil liegt alles untereinander in derselben weissen Tafel, und
   die Karten hatten mit rgb(255,253,248) auf rgb(255,255,255) einen
   Unterschied von zwei Helligkeitsstufen — praktisch unsichtbar.

   Jetzt tritt die Tafel zurueck: ohne Flaeche steht die Einleitung
   direkt auf dem Pergament, und die drei Kaesten heben sich in
   reinem Weiss deutlich davon ab. Das Polster der Tafel bleibt, es
   traegt den Abstand zum Kopfbereich.
   ============================================================ */

@media (max-width: 760px) {
  .fragen-tafel {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .fragen-raster { gap: 14px; }
  /* Selektor zweistufig wie die Regel, die hier vorher gewann
     (.fragen-tafel .fragenkarte mit --flaeche und --linie-zart) —
     einstufig verliert er trotz spaeterer Stelle. Farben fest und
     nicht als Token, weil die Token an anderer Stelle umgesetzt
     werden; gemessen kamen sonst #FFFDF8 und #E9DCC1 heraus, also
     zwei Helligkeitsstufen Unterschied zum Weiss dahinter. */
  .fragen-tafel .fragenkarte {
    background: #ffffff;
    border: 1px solid #ddcdaa;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(120, 95, 50, .07);
  }
}


/* ============================================================
   ABSCHLUSSBLOCK BREITER
   ============================================================
   Die Bahn liegt auf 93 vw, gedeckelt bei 1780 px. Auf breiten
   Schirmen bindet der Deckel, und der Anteil sinkt: gemessen 93 %
   bei 1920 px Fensterbreite, 81 % bei 2200, 70 % bei 2560 und 62 %
   bei 2880. Fuer den Abschluss ist das zu schmal.

   Nur dort ein hoeherer Deckel — 2200 px ergibt bei 2560 px
   Fensterbreite 86 %. Unter 2365 px aendert sich nichts, dort ist
   93 vw ohnehin der kleinere Wert.

   Die uebrigen Abschnitte behalten die 1780 px: sie tragen Karten
   in Spalten, der Abschluss dagegen drei Textblocks, die mit der
   Bahn mitwachsen duerfen.
   ============================================================ */

@media (min-width: 1161px) {
  /* Der Deckel sitzt auf der Karte selbst (.band-hell mit
     width: 93vw, max-width: 1780px), nicht auf der Bahn darin —
     die hat in dieser Breite width: auto und fuellt nur die Karte.
     Mein erster Versuch auf .angebot-bahn blieb deshalb wirkungslos,
     gemessen unveraendert 1778 px. */
  #vorgespraech { max-width: 2200px; }
}


/* ============================================================
   MOBIL: TRENNERTEXT BRAUCHT DIE GANZE BANDBREITE
   ============================================================
   Der Satz brach in bis zu sechs Zeilen um, und das lag nicht an
   der Schriftgroesse: gemessen bei 320 px Fensterbreite ist das
   Band 305 px breit, dem Text standen aber nur 165 px zur
   Verfuegung. Schuld war eine Regel aus der Zeit des Pergament-
   Bandes — @media (max-width: 1100px) setzt .schlussband-innen auf
   70 px Innenabstand, weil dort die Ornamente des Papiers naeher an
   die Mitte ruecken. Sie greift auch auf dem Handy und nahm dem
   Text 140 von 305 px.

   Der spaetere Gegensatz (0 5 %) steht in @media (min-width: 761px)
   und liess das Handy aussen vor. Hier also 20 px — damit hat der
   Satz 265 statt 165 px.

   Dazu 17 statt 19 px Schrift und eine engere Zeile: das Band wird
   flacher, ohne dass der Satz seine Wirkung verliert.
   ============================================================ */

@media (max-width: 760px) {
  .schlussband-innen { padding: 0 20px; }
  .schlussband p { font-size: 17px; line-height: 1.42; }
}


/* Der svh-Anker fuer die Schnellknoepfe ist entfallen: sie stehen
   nicht mehr fest im Fenster, sondern im Seitenfluss. Damit gibt es
   auch nichts mehr, was an der wandernden Unterkante einer
   Adressleiste haengen koennte. */



/* ============================================================
   SCHNELLKNOEPFE: NUR IN DER ECHTEN NAHT UEBERLAPPEN
   ============================================================
   Bis 1000,98 px steht das Kopfbild ueber dem Text und darunter
   liegt ein weisser Streifen bis zum Fragen-Abschnitt — dort
   duerfen die Knoepfe zur Haelfte hinein- und hinausragen.
   Gemessen sitzt ihre Mitte damit genau auf der Kante
   (Kopfbereich endet und Fragen-Block beginnt bei derselben
   Zeile).

   Ab 1001 px gibt es diesen Streifen nicht: dort zieht sich der
   Fragen-Block mit margin-top: -44px unter das Bild, gemessen
   ueberlappen die beiden schon um 16 px. Ein ueberlappender Knopf
   landet dann auf der Vorzeile „Antworten auf Ihre Fragen".
   Deshalb dort ohne negative Raender, mit normalem Abstand.
   ============================================================ */

@media (max-width: 1000.98px) {
  .schnellknoepfe { margin-top: -28px; margin-bottom: -28px; }
}

@media (min-width: 1001px) and (max-width: 1279.98px) {
  .schnellknoepfe { margin: 22px 0; justify-content: center; gap: 16px; }
}

/* Auf sehr schmalen Geraeten passen zwei Knoepfe mit dem Polster
   von „Mehr ueber meine Beratungen" nicht nebeneinander: bei
   320 px Fensterbreite blieben nach Rand und Abstand 132 px je
   Knopf, „Angebote" braucht damit rund 150 px und schob die Seite
   auf. Hier also enger und eine Spur kleiner. */
@media (max-width: 374.98px) {
  /* Der negative Rand ist die halbe Knopfhoehe — hier sind die
     Knoepfe 49 statt 56 px hoch, also 24 statt 28 px, damit ihre
     Mitte weiter genau auf der Kante sitzt. */
  .schnellknoepfe { gap: 8px; padding: 0 10px; margin-top: -24px; margin-bottom: -24px; }
  .schnellknopf { padding: 12px 14px; font-size: 14px; gap: 6px; }
  .schnellknopf svg { width: 16px; height: 16px; flex: 0 0 16px; }
}


/* ============================================================
   DER SPRUCH STEHT MIT DEM SCHUETZEN
   ============================================================
   Das Motiv bleibt beim Scrollen im Fenster stehen, der Spruch
   darauf lief bisher mit der Seite weg — nach wenigen Zeilen stand
   die Schrift nicht mehr auf dem Bild.

   Das Javascript in inc/fuss.php nagelt ihn jetzt an derselben
   Stelle fest wie das Bild. Er bekommt dafuer dieselbe Ebene:
   z-index: -1, also nach dem Seitengrund und vor allen
   Kastenhintergruenden gezeichnet. Damit verschwindet er beim
   Weiterscrollen hinter den weissen Karten, genau wie das Motiv —
   er bleibt Teil des stehenden Bildes und schwebt nicht als Text
   ueber der ganzen Seite.

   pointer-events: none, weil er nun ueber der halben Fensterhoehe
   liegt und dort keine Klicks abfangen darf.
   ============================================================ */

/* bottom und right muessen weg: das Javascript setzt nur top, left
   und width. Bleiben die CSS-Werte fuer bottom (68,7 px) und right
   (64,1 px) stehen, spannt sich der feste Kasten zwischen top UND
   bottom auf — gemessen 294 statt 97 px hoch, und der Spruch sass
   dann nicht mehr im Bild. */
.held-zitat.steht-mit {
  z-index: -1;
  pointer-events: none;
  bottom: auto;
  right: auto;
  height: auto;
}


/* ============================================================
   SCHNELLKNOEPFE BIS AN DIE BILDSCHIRMKANTE
   ============================================================
   Kein Seitenabstand mehr: die Knoepfe sitzen mit ihrer Aussenkante
   auf dem Bildschirmrand. Dort ist die Rundung weg — sie wuerde
   einen Spalt zum Rand aufreissen und liesse den Knopf halb
   abgeschnitten wirken. Gerundet bleibt nur die Innenseite, die
   zur Bildschirmmitte zeigt.

   Ueber :first-child und :last-child und nicht ueber eigene
   Klassen: der Behaelter enthaelt genau zwei Verweise, links den
   ersten, rechts den zweiten (justify-content: space-between).

   Etwas tiefer als zuvor: der Rand oben geht von -28 auf -14 px,
   der unten auf -42. Die Summe bleibt -56 und damit gleich der
   Knopfhoehe — der Block nimmt also weiter keinen Platz im Fluss
   ein, der Knopf rutscht nur um 14 px nach unten.
   ============================================================ */

@media (max-width: 1000.98px) {
  .schnellknoepfe {
    padding: 0;
    margin-top: -14px;
    margin-bottom: -42px;
  }
  .schnellknopf:first-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: none;
  }
  .schnellknopf:last-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
  }
}

@media (max-width: 374.98px) {
  /* Knopfhoehe hier 49 px, also -10 und -39 statt -14 und -42. */
  .schnellknoepfe { padding: 0; margin-top: -10px; margin-bottom: -39px; }
}

/* Weil die Knoepfe 42 px unter die Kante reichen, lag die Vorzeile
   des folgenden Abschnitts darunter — sie beginnt 34 px unter der
   Kante. Der noetige Platz kommt aus dem unteren Rand der Huelle
   selbst und nicht aus einem Nachbar-Selektor: -14 oben und -18
   unten ergeben mit 56 px Knopfhoehe zusammen +24 px, die der Block
   im Fluss belegt. Alles danach rueckt also um 24 px nach unten,
   die Vorzeile faengt bei 58 px an, es bleiben 16 px Luft.

   Der erste Versuch ging ueber .schnellknoepfe + * und blieb
   wirkungslos: der naechste Geschwisterknoten ist nav.zeitachse,
   die auf dem Handy display: none hat. Der Rand landete dort und
   bewegte nichts. */
@media (max-width: 1000.98px) {
  .schnellknoepfe { margin-bottom: -18px; }
}

@media (max-width: 374.98px) {
  /* Knopfhoehe 49 px: -10 und -15 belegen ebenfalls 24 px. */
  .schnellknoepfe { margin-bottom: -15px; }
}


/* ============================================================
   SCHNELLKNOEPFE: DECKEND, KLEINER, ETWAS HOEHER
   ============================================================
   Der linke Knopf war durchsichtig — so ist der stille Knopf im
   Seiteninhalt gebaut, dort steht er aber auf einer einheitlichen
   weissen Karte. Hier liegt er zur Haelfte auf dem weissen
   Kopfbereich und zur Haelfte auf dem Pergament, und das Muster
   schien durch. Deshalb weiss und deckend.

   Kleiner: Polster 11/20 statt 14/27, Schrift 14,5 statt 15,5 px —
   damit 48 statt 56 px hoch.

   Etwas hoeher: die Mitte liegt jetzt 6 px unter der Kante statt
   14. Der Rand oben ist die halbe Knopfhoehe minus diese 6 px
   (-18), der Rand unten so gewaehlt, dass der Block wie bisher
   24 px im Fluss belegt (-6). Zur Vorzeile des naechsten
   Abschnitts, die 58 px unter der Kante beginnt, bleiben damit
   28 px Luft.
   ============================================================ */

@media (max-width: 1000.98px) {
  .schnellknopf { padding: 11px 20px; font-size: 14.5px; }
  .schnellknopf svg { width: 17px; height: 17px; flex: 0 0 17px; }

  .schnellknopf.stiller-knopf {
    background: #ffffff;
    border-color: var(--linie);
  }

  /* Summe -48 = Knopfhoehe: der Block belegt damit KEINEN Platz im
     Fluss, alles darunter steht wieder dort, wo es ohne die Knoepfe
     stuende. Die vorige Fassung belegte 24 px und schob „Antworten
     finden" aus dem ersten Bildschirm.

     Dass es ohne diese 24 px trotzdem reicht, ist eine Folge der
     kleineren Knoepfe: sie ragen nur noch 30 px unter die Kante
     (18 oben + 48 hoch), die Vorzeile beginnt 34 px darunter. */
  .schnellknoepfe { margin-top: -18px; margin-bottom: -30px; }
}

@media (max-width: 374.98px) {
  /* Knopfhoehe hier 44 px: -16 oben, -4 unten ergeben ebenfalls
     24 px im Fluss und 6 px Versatz nach unten. */
  .schnellknopf { padding: 10px 14px; font-size: 13.5px; }
  /* Knopfhoehe 44: -16 und -28 ergeben ebenfalls null Platz im
     Fluss, Unterkante 28 px unter der Kante. */
  .schnellknoepfe { margin-top: -16px; margin-bottom: -28px; }
}


/* ============================================================
   MELDUNGEN NACH DEM ABSENDEN SICHTBAR MACHEN
   ============================================================
   Das Formular schickte auf „anfrage.php#formular". Der Browser
   sprang damit an das <form> — und die Fehlermeldung steht
   DARUEBER, landete also knapp oberhalb des Bildrands. Wer unten
   am Absendeknopf stand, sah nach dem Klick scheinbar nichts: die
   Seite wirkte unveraendert, der Hinweis war ausserhalb.

   Der Anker zeigt jetzt auf den Meldungskasten selbst
   (id="meldung", sowohl beim Erfolg als beim Fehler).

   scroll-margin-top haelt ihn unter der klebenden Kopfleiste: die
   ist zwischen 62 und 126 px hoch, ohne diesen Abstand rutschte
   die Meldung darunter. tabindex="-1" im Markup erlaubt zusaetzlich
   die Tastaturfuehrung dorthin.
   ============================================================ */

.meldung { scroll-margin-top: 140px; }
.meldung:focus { outline: none; }
.meldung:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }