/* =========================================================================
   High-Intensiv — Die 1:1-Begleitung
   Eigenes Stylesheet. Angelegt 30.08.2026 von Claude-Bali-IPD nach dem
   Gestaltungskonzept vom selben Tag.

   Die These: Diese Seite ist nicht symmetrisch gebaut, sondern wie ein
   Briefbogen — eine linksbuendige Textachse mit beschriebenem Rand. Deshalb
   liest sie sich als Zuwendung eines Menschen und nicht als Angebot eines
   Hauses. Der Rest des Hauses zentriert; diese Seite nicht.
   ========================================================================= */

@font-face { font-family:"Marke"; src:url("schrift/marke-regular.woff2") format("woff2");  font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Marke"; src:url("schrift/marke-medium.woff2") format("woff2");   font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Marke"; src:url("schrift/marke-semibold.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:"Marke"; src:url("schrift/marke-italic.woff2") format("woff2");   font-weight:400; font-style:italic;  font-display:swap; }

:root {
  --tinte:#16211D; --tinte2:#0E1815; --papier:#F8F6F1; --papier2:#F0EDE4;
  --gold:#A8823C; --goldtext:#8C6A2B; --gold2:#C9A55E;
  --grau:#5F6C67; --hell:#DCE5E1; --linie:#DAD2C1;
  --serif:"Marke","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:"Segoe UI",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --breit:1180px; --lesen:660px; --rand:clamp(22px,5vw,48px);
  --s1:20px; --s2:40px; --s3:clamp(48px,6vw,72px);
  --s4:clamp(64px,9vw,96px); --s5:clamp(120px,11vw,168px);
}

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
html,body { overflow-x:clip; }

body {
  background:var(--papier); color:var(--tinte);
  font-family:var(--serif); font-size:19.5px; line-height:1.62;
  font-variant-numeric:oldstyle-nums proportional-nums;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  hyphens:none;
}
p { text-wrap:pretty; }

/* Markieren in der Hausfarbe — auch das gehoert zum Eindruck. */
::selection { background:rgba(168,130,60,.18); color:var(--tinte); }

/* --------------------------------------------------------- Die Briefachse */

.achse {
  max-width:var(--breit); margin:0 auto; padding:0 var(--rand);
  display:grid; grid-template-columns:132px 40px minmax(0,var(--lesen)) 1fr;
}
.achse > .rand { grid-column:1; }
.achse > * { grid-column:3; }
.achse > .voll { grid-column:1 / -1; }

/* Die Kapitelziffer steht still, waehrend ihr Kapitel laeuft. */
.rand {
  position:sticky; top:40vh; align-self:start;
  font-family:var(--serif); font-size:17px; line-height:1;
  letter-spacing:.06em; color:var(--goldtext);
}
.rand .marke-zeit {
  display:block; margin-top:14px;
  font-family:var(--sans); font-size:11.5px; font-weight:600;
  letter-spacing:.20em; text-transform:uppercase; line-height:1.7;
}

/* ---------------------------------------------------------------- Buehne */

.buehne {
  position:relative; min-height:88svh; display:flex; align-items:flex-end;
  overflow:hidden; background:var(--tinte2);
}
.buehne-bild {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
  transform:scale(1.035);
}
.buehne-schleier {
  position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(14,24,21,.30) 0%,rgba(14,24,21,.72) 62%,var(--tinte2) 100%);
}
.buehne .achse { position:relative; width:100%; padding-bottom:var(--s4); }
.buehne .auszeichnung { color:var(--gold2); }
.buehne h1 {
  font-family:var(--serif); font-weight:400;
  font-size:clamp(38px,5.6vw,68px); line-height:1.04; letter-spacing:-.028em;
  color:var(--papier); max-width:17ch; margin:18px 0 0 -.04em;
  text-wrap:balance; text-shadow:0 2px 40px rgba(14,24,21,.5);
}
.buehne .untertitel {
  color:var(--hell); opacity:.8; font-size:19.5px; margin-top:18px; max-width:44ch;
}
.buehne .strich { display:block; width:1px; height:48px; margin-top:var(--s2);
  background:linear-gradient(to bottom,rgba(201,165,94,.9),rgba(201,165,94,0)); }

/* ------------------------------------------------------------ Textkoerper */

.auszeichnung {
  display:block; font-family:var(--sans); font-size:12.5px; font-weight:600;
  letter-spacing:.17em; line-height:1.9; text-transform:uppercase;
  color:var(--goldtext);
}
/* ACHTUNG (04.09.2026): Die Zeile darunter wirkt bei <section class="achse">
   NICHT — .achse setzt „padding:0 var(--rand)" und schlaegt als Klasse das
   Element. Sektionen haben also senkrecht keinen eigenen Abstand; die Luft
   kommt von Baendern und Bildern dazwischen. Folgen zwei Sektionen direkt
   aufeinander (oder eine Sektion auf .limit), war die Luecke 0 px — Daniel:
   „Haeufige Fragen ist doch viel zu nah am Text davor." Gemessen an fuenf
   Stellen. Die zwei Regeln danach schliessen genau diese Luecken, ohne die
   Abstaende neben Baendern und Bildern zu verdoppeln. */
section { padding:var(--s5) 0; }
section + section { padding-top:0; }
section.achse + section.achse { padding-top:var(--s5); }
.limit { margin:var(--s5) 0; }
h2 {
  font-family:var(--serif); font-weight:400;
  font-size:clamp(27px,3.2vw,38px); line-height:1.14; letter-spacing:-.018em;
  max-width:20ch; margin:10px 0 var(--s2); text-wrap:balance;
}
p + p { margin-top:26px; }
section p + h3, section p + .liste { margin-top:var(--s3); }
h3 {
  font-family:var(--serif); font-weight:500; font-size:22px; line-height:1.3;
  margin:var(--s2) 0 12px;
}
a { color:var(--tinte); text-decoration:none; border-bottom:1px solid var(--gold);
  transition:color 180ms ease,border-color 180ms ease; }
a:hover { color:var(--goldtext); border-bottom-color:var(--goldtext); }

/* Das einzige Initial der Seite. */
.anrede > p:first-of-type::first-letter {
  float:left; font-family:var(--serif); font-weight:400;
  font-size:66px; line-height:.82; margin:.02em .12em 0 -.02em;
}

/* ------------------------------------------------------------ Dunkle Baender */

.band {
  background:var(--tinte2); color:var(--hell);
  padding:132px 0; margin:var(--s5) 0;
}
.band .kernsatz {
  font-family:var(--serif); font-weight:400;
  font-size:clamp(29px,3.6vw,46px); line-height:1.22; letter-spacing:-.016em;
  color:#F3EFE6; max-width:20ch; margin-left:-.04em; text-wrap:balance;
}
.band .kernsatz em { font-style:normal; color:var(--gold2); }
.band p { color:var(--hell); opacity:.78; max-width:46ch; margin-top:var(--s2); }
/* Das zweite Band traegt bewusst kein Gold. */
.band.ohne-gold .kernsatz em { color:inherit; }

/* ---------------------------------------------------- Zeitachse (Kapitel V) */


/* ------------------------------------------------------- Leistungsliste */

.liste { list-style:none; }
.liste li { position:relative; padding:22px 0 22px 22px;
  border-bottom:1px solid var(--linie); }
.liste li:first-child { border-top:1px solid var(--linie); }
.liste li::before { content:""; position:absolute; left:0; top:.86em;
  width:7px; height:1px; background:var(--gold); }
.liste .zeile { display:block; font-family:var(--serif); font-weight:500;
  font-size:18.5px; line-height:1.4; letter-spacing:-.004em; }
.liste .beisatz { display:block; margin-top:6px; font-size:15px; line-height:1.58;
  color:var(--grau); }

/* --------------------------------------------------------- Videostimme */

.videoband { background:var(--papier2); padding:120px 0; margin:var(--s5) 0; }
.videoband .auszeichnung { margin-bottom:var(--s2); }
/* Marcels Aufnahme ist HOCHFORMAT (360x636). Ein 820px breites Feld waere
   absurd — deshalb steht das Video schmal auf der Achse, die Bildunterschrift
   daneben im freien Raum rechts. */
.videostelle { display:grid; grid-template-columns:minmax(0,340px) 1fr;
  gap:var(--s2); align-items:end; }
.videorahmen { position:relative; aspect-ratio:360/636; overflow:hidden;
  background:var(--tinte2); }
.videorahmen::after { content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(14,24,21,0) 46%,rgba(14,24,21,.62) 100%); }
.videorahmen video, .videorahmen iframe { width:100%; height:100%; display:block;
  border:0; object-fit:cover; }
.videolos { position:absolute; left:34px; bottom:34px; z-index:2;
  width:66px; height:66px; border:1px solid var(--gold); border-radius:50%;
  background:transparent; cursor:pointer; display:flex; align-items:center;
  justify-content:center; transition:background 220ms ease; }
.videolos::before { content:""; width:0; height:0; margin-left:1.5px;
  border-style:solid; border-width:7px 0 7px 12px;
  border-color:transparent transparent transparent var(--gold2);
  transition:border-color 220ms ease; }
.videolos:hover { background:var(--gold2); }
.videolos:hover::before { border-left-color:var(--tinte); }
.videolos.weg { opacity:0; pointer-events:none; }
.videounter { font-family:var(--serif); font-style:italic; font-size:15.5px;
  line-height:1.5; color:var(--grau); max-width:34ch; }

/* --------------------------------------------------------------- Zitat */

.zitat { max-width:560px; margin-left:34px; padding-left:26px;
  border-inline-start:1px solid rgba(168,130,60,.45); }
.zitat p { font-size:21px; line-height:1.70; letter-spacing:-.006em; }
.zitat p + p { margin-top:22px; }
.zitat p:first-child { text-indent:-.42em; hanging-punctuation:first; }
.zitat .ausbruch { font-size:25px; line-height:1.42; color:var(--tinte);
  margin-top:26px; }
.zitat .wer { display:flex; align-items:center; gap:12px; margin-top:26px;
  font-family:var(--sans); font-size:12.5px; font-weight:600;
  letter-spacing:.17em; text-transform:uppercase; color:var(--goldtext); }
.zitat .wer::before { content:""; width:22px; height:1px; background:var(--gold);
  flex:none; }

/* -------------------------------------------------------- Zwei Wege (X) */

.wege { display:grid; grid-template-columns:minmax(0,380px) 1px minmax(0,380px);
  gap:var(--s2); align-items:start; }
.wege .linie { background:var(--linie); align-self:stretch; }
.weg h3 { margin-top:0; }
.weg .dauer { font-family:var(--sans); font-size:11.5px; font-weight:600;
  letter-spacing:.20em; text-transform:uppercase; color:var(--goldtext);
  display:block; margin-bottom:10px; }
.weg p { font-size:18px; }

/* ------------------------------------------------------------ Abschluss */

.abschluss { background:var(--tinte2); color:var(--hell); padding:var(--s5) 0; }
.abschluss h2 { color:var(--papier); }
.abschluss p { color:var(--hell); opacity:.8; max-width:46ch; }
.abschluss .auszeichnung { color:var(--gold2); }
.knopf {
  position:relative; display:inline-block; margin-top:var(--s2);
  font-family:var(--sans); font-size:13.5px; font-weight:600;
  letter-spacing:.17em; text-transform:uppercase; color:#16211D;
  background:linear-gradient(168deg,#F0D9A2 0%,#C9A55E 46%,#A8823C 100%);
  padding:24px 56px; border:0; overflow:hidden; cursor:pointer;
  box-shadow:0 1px 0 rgba(255,255,255,.32) inset,0 16px 40px -14px rgba(201,165,94,.8);
  transition:transform 220ms cubic-bezier(.2,.6,.2,1),box-shadow 220ms cubic-bezier(.2,.6,.2,1);
}
.knopf::after { content:""; position:absolute; inset:0;
  background:linear-gradient(105deg,rgba(255,255,255,0) 38%,rgba(255,255,255,.45) 50%,rgba(255,255,255,0) 62%);
  transform:translateX(-110%); }
.knopf.laeuft::after { animation:knopf-streif 1400ms cubic-bezier(.2,.6,.2,1) 1 forwards; }
@keyframes knopf-streif { from { transform:translateX(-110%); } to { transform:translateX(110%); } }
.knopf:hover { transform:translateY(-2px);
  box-shadow:0 1px 0 rgba(255,255,255,.36) inset,0 24px 52px -16px rgba(201,165,94,.95); }
.unterschrift { display:block; width:168px; height:auto; margin-top:var(--s3); }
.datum { display:block; margin-top:12px; font-family:var(--sans); font-size:12px;
  font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(220,229,225,.62); }

/* ---------------------------------------------------------- Lesefaden */

.faden { position:fixed; top:0; left:clamp(10px,2vw,26px); width:1px; height:100vh;
  z-index:40; pointer-events:none; display:flex; flex-direction:column;
  justify-content:center; gap:1px; }
.faden i { display:block; flex:1; background:var(--linie);
  transform-origin:top; transition:background 300ms ease; }
.faden i.gelesen { background:rgba(168,130,60,.32); }
.faden i.jetzt   { background:var(--gold); }

/* ------------------------------------------------------------- Papierkorn */

body::before { content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
  opacity:.03; mix-blend-mode:multiply; }
.band::after, .buehne::after, .abschluss::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
  opacity:.05; mix-blend-mode:screen; }
.band, .abschluss { position:relative; }
body > * { position:relative; z-index:1; }

/* ------------------------------------------------------------ Einblendung */

.steigt { opacity:0; transform:translateY(14px);
  transition:opacity 620ms cubic-bezier(.2,.6,.2,1),transform 620ms cubic-bezier(.2,.6,.2,1); }
.steigt.da { opacity:1; transform:none; }

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

.fuss { border-top:1px solid var(--linie); padding:var(--s3) 0;
  font-family:var(--sans); font-size:11.5px; font-weight:600;
  letter-spacing:.17em; text-transform:uppercase; color:var(--grau); }
.fuss a { color:var(--grau); border-bottom:0; display:inline-block; padding:11px 0; }
.fuss a:hover { color:var(--tinte); }

/* ------------------------------------------------------------ Schmalbild */

@media (max-width:980px) {
  /* Die Briefachse hat vier Spalten: 132px Rand, 40px Luft, die Textspalte,
     dann Rest. Hier wurden bisher nur die KINDER in Spalte 1 geschoben — die
     Achse selbst behielt ihre vier Spuren. Damit landete der ganze Text in
     der 132px schmalen Randspalte: auf dem Telefon war die Seite eine
     Buchstabensaeule. Gemessen am 30.08.2026 bei 375px: Textspalte 159px,
     Absaetze 132px breit. Die Seite wird per WhatsApp verschickt, also liest
     sie fast jeder zuerst am Telefon.
     Die Achse braucht auf schmalen Schirmen genau eine Spur. */
  .achse { grid-template-columns:minmax(0,1fr); }
  .achse,   .achse > *, .achse > .voll, .zeit-schritt { grid-column:1; max-width:var(--lesen); }
  .achse > .voll { max-width:none; }
  .rand { position:static; margin-bottom:12px;
    font-family:var(--sans); font-size:11.5px; font-weight:600;
    letter-spacing:.20em; text-transform:uppercase; }
  .rand .marke-zeit { display:inline; margin:0 0 0 10px; }
  .zeit-schritt { grid-template-columns:1fr; gap:8px; }
  .zeit-text { grid-column:1; }
  body { font-size:18px; line-height:1.64; }
  .videostelle { grid-template-columns:1fr; }
  .videorahmen { max-width:340px; }
  .wege { grid-template-columns:1fr; }
  .wege .linie { height:1px; align-self:auto; }
  .zitat { margin-left:0; }
  .faden { display:none; }
  .band { padding:var(--s4) 0; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.001ms !important;
    transition-duration:.001ms !important; }
  .steigt { opacity:1; transform:none; }
  .buehne-bild { transform:scale(1); }
}

/* ------------------------------------------ Ergaenzungen 30.08. (Pruefung) */

/* Der Mensch, um den es geht — Portraet neben der Anrede. */
.anrede-mit-bild { display:grid; grid-template-columns:minmax(0,1fr) 200px;
  gap:var(--s2); align-items:start; }
.portraet { width:200px; height:auto; display:block; margin:0;
  filter:grayscale(.25) contrast(1.02);
  outline:1px solid rgba(22,33,29,.08); outline-offset:-1px; }
.portraet-unter { display:block; margin-top:12px; font-family:var(--serif);
  font-style:italic; font-size:14.5px; line-height:1.5; color:var(--grau); }

/* Die frühe Zahl direkt nach der Anrede. */

/* Das Jahr in Zahlen — Tabelle ohne Tabellenoptik. */
.fakten { margin-top:var(--s3); }
.fakten div { display:grid; grid-template-columns:minmax(0,200px) minmax(0,1fr);
  gap:var(--s1); padding:16px 0; border-bottom:1px solid var(--linie); }
.fakten div:first-child { border-top:1px solid var(--linie); }
.fakten dt { font-family:var(--sans); font-size:11.5px; font-weight:600;
  letter-spacing:.17em; text-transform:uppercase; color:var(--goldtext);
  padding-top:4px; }
.fakten dd { margin:0; font-size:18px; }
.fakten dd span { display:block; margin-top:4px; font-size:15px; color:var(--grau); }

/* Zweiter, leiser Weg im Abschluss. */
.leiser { display:inline-block; margin-top:var(--s2); padding:12px 0;
  font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.17em;
  text-transform:uppercase; color:var(--gold2);
  border-bottom:1px solid rgba(201,165,94,.45); padding-bottom:3px; }
.leiser:hover { color:var(--papier); border-bottom-color:var(--gold2); }
.wege-knoepfe { display:flex; flex-wrap:wrap; gap:var(--s2); align-items:center; }
.abschluss .kontakt { margin-top:var(--s2); font-size:16px; color:var(--hell);
  opacity:.6; }
.abschluss .kontakt a { color:var(--hell); border-bottom-color:rgba(220,229,225,.3); }

/* Marcel: wer er ist, unter dem Standbild. */
.videounter strong { display:block; font-style:normal; font-weight:500;
  color:var(--tinte); font-size:17px; margin-bottom:6px; }

@media (max-width:980px) {
  .anrede-mit-bild { grid-template-columns:1fr; }
  .portraet { width:180px; }
  .fakten div { grid-template-columns:1fr; gap:6px; }
}

/* ------------------------------------------------------ Das Tor (Passwort) */
.buehne-tor { min-height:100svh; background:
  radial-gradient(90% 120% at 50% 30%, #1E2E28 0%, var(--tinte) 48%, var(--tinte2) 100%); }
.buehne-tor .buehne-schleier { background:none; }
.tor { display:flex; flex-wrap:wrap; gap:var(--s1); align-items:center;
  margin-top:var(--s2); }
.tor label { width:100%; color:var(--gold2); }
.tor input {
  font-family:var(--serif); font-size:19px; color:var(--papier);
  background:none; border:0; border-bottom:1px solid rgba(201,165,94,.5);
  padding:12px 4px; min-width:220px; outline:0;
  transition:border-color 180ms ease;
}
.tor input:focus-visible { outline:2px solid var(--gold2); outline-offset:3px;
  border-bottom-color:var(--gold2); }
.tor .knopf { margin-top:0; padding:18px 40px; font-size:12.5px; }

/* ------------------------------------------------- Preistafel (30.08.) */
.preise { display:grid; grid-template-columns:1fr 1fr; gap:var(--s2);
  margin-top:var(--s3); }
.preis { border-top:1px solid var(--gold); padding-top:20px; }
.preis .dauer { display:block; font-family:var(--sans); font-size:11.5px;
  font-weight:600; letter-spacing:.20em; text-transform:uppercase;
  color:var(--goldtext); margin-bottom:12px; }
.preis .summe { display:block; font-family:var(--serif); font-weight:500;
  font-size:30px; line-height:1.2; letter-spacing:-.006em;
  font-variant-numeric:lining-nums tabular-nums; margin-bottom:10px; }
.preis .dazu { display:block; font-size:16px; line-height:1.55; color:var(--grau); }
.fussnote { margin-top:var(--s2); font-size:16px; color:var(--grau); }

/* ------------------------------------------------- Buchungsformular */
.buchung { margin-top:var(--s3); }
.buchung .gruppe { border:0; margin:0 0 var(--s3); }
.buchung legend { display:flex; align-items:baseline; gap:14px; width:100%;
  border-bottom:1px solid var(--linie); padding-bottom:10px; margin-bottom:22px; }
.buchung .gruppe-zahl { font-family:var(--serif); font-size:15px;
  letter-spacing:.06em; color:var(--goldtext);
  font-variant-numeric:lining-nums; }
.buchung .gruppe-name { font-family:var(--sans); font-size:11.5px;
  font-weight:600; letter-spacing:.17em; text-transform:uppercase; color:var(--grau); }

.wahl { display:grid; grid-template-columns:1fr 1fr; gap:var(--s1); }
.wahl label { display:block; cursor:pointer; border:1px solid var(--linie);
  padding:20px; transition:border-color 180ms ease, background 180ms ease; }
.wahl label:hover { border-color:var(--grau); }
.wahl input { position:absolute; opacity:0; width:0; height:0; }
.wahl span { display:block; }
.wahl strong { display:block; font-family:var(--serif); font-weight:500;
  font-size:19px; margin-bottom:6px; }
.wahl em { display:block; font-style:normal; font-size:15px; line-height:1.5;
  color:var(--grau); font-variant-numeric:lining-nums tabular-nums; }
.wahl input:checked + span strong { color:var(--goldtext); }
.wahl label:has(input:checked) { border-color:var(--gold);
  background:rgba(168,130,60,.05); }
.wahl input:focus-visible + span { outline:2px solid var(--gold);
  outline-offset:6px; }

.buchung label { display:block; font-family:var(--sans); font-size:13px;
  font-weight:600; letter-spacing:.10em; text-transform:uppercase;
  color:var(--grau); margin:0 0 8px; }
.buchung input[type=text], .buchung input[type=email], .buchung input[type=tel],
.buchung textarea {
  width:100%; font-family:var(--serif); font-size:19px; line-height:1.5;
  padding:12px 0; margin:0 0 24px; color:var(--tinte); background:none;
  border:0; border-bottom:1px solid var(--linie); border-radius:0;
  transition:border-color 180ms ease;
}
.buchung textarea { border:1px solid var(--linie); padding:14px; resize:vertical; }
.buchung input:hover, .buchung textarea:hover { border-bottom-color:var(--grau); }
.buchung input:focus-visible, .buchung textarea:focus-visible {
  outline:2px solid var(--gold); outline-offset:3px;
  border-bottom-color:var(--gold); }
.buchung textarea:focus-visible { border-color:var(--gold); }
.buchung .zeile2 { display:grid; grid-template-columns:1fr 1fr; gap:0 var(--s1); }
.buchung .zustimmung { display:flex; gap:12px; align-items:flex-start;
  margin:6px 0 var(--s2); }
.buchung .zustimmung input { flex:none; width:24px; height:24px; margin-top:2px;
  accent-color:var(--gold); }
.buchung .zustimmung label { font-family:var(--serif); font-size:16px;
  letter-spacing:0; text-transform:none; color:var(--grau); margin:0;
  line-height:1.55; }
.buchung .knopf { margin-top:0; }
.hinweis { font-size:15.5px; color:var(--grau); margin-top:14px; }
.nachsatz { margin-top:18px; }

/* Rueckmeldung nach dem Absenden */
.antwort { border:1px solid var(--gold); padding:26px 28px; margin:var(--s2) 0;
  background:var(--papier2); }
.antwort strong { display:block; font-family:var(--serif); font-weight:500;
  font-size:22px; margin-bottom:10px; }

@media (max-width:720px) {
  .preise, .wahl, .buchung .zeile2 { grid-template-columns:1fr; }
  .buchung input[type=text], .buchung input[type=email],
  .buchung input[type=tel], .buchung textarea { font-size:17px; }
  .wahl label { padding:16px; }
}

/* Offene Frage an Daniel — faellt auf, damit sie nicht live geht. */
.offen { border-left:2px solid var(--gold); padding:14px 18px; background:rgba(168,130,60,.07);
  font-size:16px; color:var(--goldtext); }

/* =========================================================================
   Nachtrag 30.08.2026 — die drei Handgriffe aus der zweiten Personarunde.
   ========================================================================= */

/* „Weiß ich noch nicht" — dritte Wahl, ueber die volle Breite und leiser als
   die beiden echten Optionen. Ohne sie bricht das Formular jeden ab, der noch
   nicht weiss, was er will; genau der soll ja anrufen. */
.wahl .weiss-nicht { grid-column:1 / -1; padding:14px 20px;
  border-style:dashed; border-color:rgba(218,210,193,.9); }
.wahl .weiss-nicht strong { font-size:17px; margin-bottom:2px; color:var(--grau); }
.wahl .weiss-nicht em { font-size:14.5px; }
.wahl .weiss-nicht:has(input:checked) strong { color:var(--goldtext); }

/* Freiwilliges Feld: die Beschriftung sagt es, nicht erst die Fehlermeldung. */
.buchung label .freiwillig { display:inline; margin-left:8px; font-weight:400;
  letter-spacing:.02em; text-transform:none; font-size:12px; color:var(--grau);
  opacity:.85; font-style:italic; }

/* Der leise Weg im dunklen Abschluss: ein Feld statt eines leeren Mailfensters. */
.spaeter { margin-top:var(--s4); padding-top:var(--s2);
  border-top:1px solid rgba(220,229,225,.16); max-width:46ch; }
.spaeter-kopf { display:block; font-family:var(--sans); font-size:11.5px;
  font-weight:600; letter-spacing:.17em; text-transform:uppercase;
  color:var(--gold2); margin:0 0 10px; }
.spaeter .hinweis { color:var(--hell); opacity:.62; margin:0 0 20px; font-size:16px; }
.spaeter-zeile { display:flex; flex-wrap:wrap; gap:16px; align-items:flex-end; }
.spaeter-zeile input { flex:1 1 240px; font-family:var(--serif); font-size:18px;
  line-height:1.5; padding:11px 0; color:var(--papier); background:none;
  border:0; border-bottom:1px solid rgba(220,229,225,.3); border-radius:0;
  transition:border-color 180ms ease; }
.spaeter-zeile input::placeholder { color:var(--hell); opacity:.35; }
.spaeter-zeile input:hover { border-bottom-color:rgba(201,165,94,.6); }
.spaeter-zeile input:focus-visible { outline:2px solid var(--gold2);
  outline-offset:3px; border-bottom-color:var(--gold2); }
.leiser-knopf { flex:none; font-family:var(--sans); font-size:11.5px;
  font-weight:600; letter-spacing:.17em; text-transform:uppercase;
  color:var(--gold2); background:none; cursor:pointer;
  border:1px solid rgba(201,165,94,.45); border-radius:0; padding:13px 22px;
  min-height:44px; transition:color 180ms ease, border-color 180ms ease,
  background 180ms ease; }
.leiser-knopf:hover { color:var(--tinte2); background:var(--gold2);
  border-color:var(--gold2); }
.leiser-knopf:focus-visible { outline:2px solid var(--gold2); outline-offset:3px; }

/* Die Wahlkarten hatten die Versalien von `.buchung label` geerbt: „ZWÖLF
   MONATE", „ANONYM", „DARÜBER WILL ICH SPRECHEN." — auf einer Seite, die als
   handgeschriebener Brief gebaut ist, schreit das. Gesehen 30.08.2026 im
   Browser, nicht im Quelltext. */
.wahl label, .wahl strong, .wahl em { text-transform:none; letter-spacing:0; }
.wahl strong { font-weight:500; }

/* Der leise Weg unter den PayPal-Karten: Ueberweisung nach Indonesien fuer
   Menschen ohne PayPal (Daniel 11.09.). Kein Kasten, ein Satz mit Punkt davor. */
.buchung label.zahlweg-leise { display:flex; gap:12px; align-items:flex-start;
  margin:14px 0 0; padding:0; cursor:pointer; font-family:var(--serif);
  font-size:16px; line-height:1.5; font-weight:400; letter-spacing:0;
  text-transform:none; color:var(--grau); }
.buchung label.zahlweg-leise input { position:static; opacity:1; width:16px;
  height:16px; margin:5px 0 0; flex:0 0 auto; accent-color:var(--gold); }
.buchung label.zahlweg-leise:has(input:checked) { color:var(--tinte); }
.buchung label.zahlweg-leise input:focus-visible { outline:2px solid var(--gold);
  outline-offset:3px; }

/* Die Einwilligung der Wiedervorlage — echtes Haekchen auf dunklem Grund.
   Vorher stand hier ein verstecktes Feld mit `ja`; das erzeugt einen Nachweis
   ueber eine Einwilligung, die niemand gegeben hat. */
.spaeter-zustimmung { display:flex; gap:12px; align-items:flex-start;
  margin:22px 0 0; }
.spaeter-zustimmung input { flex:none; width:24px; height:24px; margin-top:1px;
  accent-color:var(--gold2); }
.spaeter-zustimmung label { font-family:var(--serif); font-size:15.5px;
  line-height:1.5; letter-spacing:0; text-transform:none;
  color:var(--hell); opacity:.75; margin:0; }
.spaeter-zustimmung a { color:var(--hell); border-bottom:1px solid rgba(220,229,225,.35); }
.spaeter-zustimmung a:hover { color:var(--gold2); border-bottom-color:var(--gold2); }

/* Die drei Fragen zum Stillhalten. Kein Knopf, keine Auswertung — deshalb auch
   keine Formularoptik. Nummern im Rand, damit sie als Reihe lesbar sind. */
.stillfragen { list-style:none; counter-reset:frage; margin:var(--s2) 0 0; }
.stillfragen li { counter-increment:frage; position:relative;
  padding:0 0 0 46px; margin:0 0 22px; font-size:20px; line-height:1.5; }
.stillfragen li::before { content:counter(frage); position:absolute; left:0; top:2px;
  font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.12em;
  color:var(--goldtext); font-variant-numeric:lining-nums;
  border:1px solid var(--linie); width:28px; height:28px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; }
@media (max-width:720px) { .stillfragen li { font-size:18px; padding-left:40px; } }

/* ============================================================
   Fassung 4 · Bausteine fuer Daniels Originaltext (31.08.2026)
   ============================================================ */

/* Der Stern-Hinweis oben: was offiziell und anonym heisst. */
.sternnote { font-size:16.5px; line-height:1.6; color:var(--grau); }
.sternnote strong { color:var(--tinte); font-weight:500; }

/* Der Auftakt-Absatz — groesser als der Fliesstext, traegt den Einstieg. */
.auftakt { font-size:23px; line-height:1.5; letter-spacing:-.004em; }

/* Zweite Zeile unter einem Bandsatz, leiser. */
.kernsatz-unter { margin-top:14px; font-family:var(--sans); font-size:13px;
  font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold2); opacity:.85; }
.band.ohne-gold .kernsatz-unter { color:var(--hell); opacity:.55; }

/* Daniels Versalien-Rufe. Gross gesetzt waeren sie Geschrei — hier stehen sie
   als eigener Block, gesperrt und ruhig. */
.ruf { margin-top:var(--s2); padding:22px 26px; border-left:2px solid var(--gold);
  background:rgba(168,130,60,.06); font-family:var(--sans); font-size:14px;
  font-weight:600; letter-spacing:.10em; line-height:1.8; color:var(--goldtext); }

/* Unterzeile unter einer Ueberschrift. */
.unterzeile { margin-top:-6px; font-family:var(--serif); font-style:italic;
  font-size:18px; color:var(--grau); }

/* Die Leistungsliste. */
.leistungen { margin-top:var(--s3); }
.leistungen div { padding:24px 0; border-bottom:1px solid var(--linie); }
.leistungen div:first-child { border-top:1px solid var(--linie); }
.leistungen dt { font-family:var(--sans); font-size:11.5px; font-weight:600;
  letter-spacing:.17em; text-transform:uppercase; color:var(--goldtext);
  margin-bottom:10px; }
.leistungen dd { margin:0; font-size:18px; line-height:1.62; }

/* Ein Bild ueber die volle Breite, als Atempause zwischen zwei Kapiteln. */
.vollbild { margin:var(--s5) 0; }
.vollbild img { display:block; width:100%; height:clamp(220px,42vw,520px);
  object-fit:cover; filter:grayscale(.18) contrast(1.03); }

/* „Achtung, streng limitiert." — der einzige laute Block der Seite. */
.limit { background:var(--tinte2); color:var(--hell); padding:var(--s4) 0;
  position:relative; }
.limit::after { content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(201,165,94,.5),transparent); }
.limit .auszeichnung { color:var(--gold2); }
.limit-satz { font-family:var(--serif); font-size:clamp(26px,3.4vw,38px);
  line-height:1.25; color:var(--papier); margin-top:14px; max-width:20ch; }
.limit-unter { margin-top:var(--s1); font-size:16.5px; color:var(--hell);
  opacity:.7; }
.telegram { display:inline-block; margin-top:18px; padding:15px 30px;
  font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.17em;
  text-transform:uppercase; color:var(--gold2);
  border:1px solid rgba(201,165,94,.5); min-height:44px;
  transition:color 180ms ease, background 180ms ease, border-color 180ms ease; }
.telegram:hover { color:var(--tinte2); background:var(--gold2);
  border-color:var(--gold2); }
.telegram:focus-visible { outline:2px solid var(--gold2); outline-offset:3px; }
/* Der PayPal-Knopf mit Buchungskennung ist ein <button> (inc/zahlseite.php, 15.09.) — gleiche Optik wie der Link. */
button.telegram { background:transparent; cursor:pointer; line-height:1.3; }
.zahl-form { margin:0; }

/* Im Anmeldeformular tragen die beiden Wahlkarten jetzt Daniels vollen
   Wortlaut samt Preis — deshalb untereinander statt nebeneinander. */
/* (aufgehoben 11.09.: die Wahlkarten stehen wieder in zwei Spalten) */
.wahl em b { font-weight:600; color:var(--goldtext); font-size:17px;
  font-variant-numeric:lining-nums; }

@media (max-width:720px) {
  .auftakt { font-size:20px; }
  .ruf { padding:18px 20px; font-size:13px; letter-spacing:.08em; }
  .leistungen dd { font-size:17px; }
}

/* Ein Portraet neben einer Stimme. */
.stimmbild { float:right; width:260px; margin:6px 0 var(--s1) var(--s2); }
.stimmbild img { display:block; width:100%; height:auto;
  filter:grayscale(.22) contrast(1.02);
  outline:1px solid rgba(22,33,29,.08); outline-offset:-1px; }
.stimmbild figcaption { margin-top:10px; font-family:var(--serif); font-style:italic;
  font-size:14.5px; color:var(--grau); }
.vollbild.schmal img { height:clamp(200px,34vw,400px); }
@media (max-width:720px) {
  .stimmbild { float:none; width:200px; margin:0 0 var(--s1); }
}

/* Der eine Preis. Keine Wahl mehr, deshalb kein Auswahlfeld — eine Angabe. */
.preisblock { border:1px solid var(--linie); border-left:2px solid var(--gold);
  padding:26px 28px; margin:0 0 var(--s3); background:rgba(168,130,60,.04); }
.preisblock-dauer { display:block; font-family:var(--sans); font-size:11.5px;
  font-weight:600; letter-spacing:.17em; text-transform:uppercase;
  color:var(--goldtext); }
.preisblock-summe { display:block; margin-top:8px; font-family:var(--serif);
  font-weight:500; font-size:34px; line-height:1.15; letter-spacing:-.006em;
  font-variant-numeric:lining-nums tabular-nums; }
.preisblock-dazu { display:block; margin-top:12px; font-size:16px; line-height:1.55;
  color:var(--grau); }
@media (max-width:720px) {
  .preisblock { padding:20px 22px; }
  .preisblock-summe { font-size:29px; }
}

/* ============================================================
   Akasha-Onlineworkshop (02.09.2026)
   ============================================================ */
.buehne-akasha .buehne-bild { object-position:center 42%; }
.buehne-zeile { margin-top:14px; font-family:var(--sans); font-size:13px;
  font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold2); }

/* Die fuenf Abende. */
.abende { margin-top:var(--s3); counter-reset:abend; }
.abende div { padding:26px 0; border-bottom:1px solid var(--linie); }
.abende div:first-child { border-top:1px solid var(--linie); }
.abende dt { counter-increment:abend; font-family:var(--sans); font-size:11.5px;
  font-weight:600; letter-spacing:.17em; text-transform:uppercase;
  color:var(--goldtext); margin-bottom:12px; display:flex; align-items:center;
  gap:12px; }
.abende dt::before { content:counter(abend); flex:none; width:26px; height:26px;
  border:1px solid var(--linie); border-radius:50%; display:flex;
  align-items:center; justify-content:center; font-size:12px;
  font-variant-numeric:lining-nums; letter-spacing:0; }
.abende dd { margin:0; font-size:18px; line-height:1.62; }

/* Haeufige Fragen. */
.faq { margin-top:var(--s3); }
.faq div { padding:22px 0; border-bottom:1px solid var(--linie); }
.faq div:first-child { border-top:1px solid var(--linie); }
.faq dt { font-family:var(--serif); font-weight:500; font-size:19px;
  margin-bottom:8px; }
.faq dd { margin:0; font-size:17px; line-height:1.6; color:var(--grau); }

.leistungen dd b { font-weight:600; color:var(--goldtext);
  font-variant-numeric:lining-nums; }

@media (max-width:720px) {
  .abende dd, .faq dd { font-size:17px; }
  .faq dt { font-size:18px; }
}

/* Der Preis im Anmeldeblock. */
.limit-preis { margin-top:18px; font-family:var(--serif); font-weight:500;
  font-size:clamp(34px,4.4vw,52px); line-height:1.1; color:var(--gold2);
  font-variant-numeric:lining-nums tabular-nums; }
.zahlweg { margin-top:var(--s1); }

/* PayPals Knopf bringt seine eigene Optik mit; hier nur Platz und Breite. */
.zahlweg .limit-unter { margin-bottom:14px; }
#paypal-container-6NA4HXVGPU3NL { max-width:420px; min-height:48px; }

/* Der Streichpreis. Eine Tatsache, kein Argument — deshalb leise. */
.preis-alt { display:inline-block; margin-right:10px; color:var(--grau);
  text-decoration:line-through; text-decoration-color:rgba(95,108,103,.7);
  font-variant-numeric:lining-nums; }
.limit-alt { margin-top:18px; font-family:var(--serif); font-size:22px;
  line-height:1; color:var(--hell); opacity:.55; font-variant-numeric:lining-nums; }
.limit-alt s { text-decoration-color:rgba(220,229,225,.7); }
.limit-alt + .limit-preis { margin-top:6px; }
.nur-vorleser { position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; }

/* Die zwei Ratenwege — zwei Zeilen, keine Karten, kein Verkauf. */
.raten { margin:var(--s1) 0 var(--s2); }
.raten div { display:grid; grid-template-columns:minmax(0,150px) minmax(0,1fr);
  gap:var(--s1); padding:14px 0; border-bottom:1px solid var(--linie); }
.raten div:first-child { border-top:1px solid var(--linie); }
.raten dt { font-family:var(--sans); font-size:11.5px; font-weight:600;
  letter-spacing:.17em; text-transform:uppercase; color:var(--goldtext);
  padding-top:4px; }
.raten dd { margin:0; font-size:18px; }
.raten dd b { font-weight:600; color:var(--goldtext); font-variant-numeric:lining-nums; }
@media (max-width:720px) { .raten div { grid-template-columns:1fr; gap:6px; } }

/* Akasha: nach der Anmeldung — der Hinweis im dunklen Block. */
.limit .angekommen { margin-top:var(--s2); color:var(--gold2); opacity:1;
  font-family:var(--serif); font-size:19px; }

/* Raten-Link auf hellem Grund (Zahlseite). */
.telegram-hell { color:var(--goldtext); border-color:rgba(168,130,60,.55); }
.telegram-hell:hover { color:var(--papier); background:var(--gold); border-color:var(--gold); }

/* ------------------------------------- Einstieg mit Portraet (Daniel 25.10.2026) */
/* „Lass doch das Bild so wie es vorher war. Mach etwas mehr Abstand und das Portrait in schön mit dazu."
   .achse setzt padding 0 var(--rand) und schlaegt section{padding} (siehe oben) - darum hier eigens. */
section.achse.anrede { padding-top:var(--s5); padding-bottom:var(--s4); }
.anrede-mit-bild { grid-column:3 / -1; max-width:980px; grid-template-columns:minmax(0,560px) 300px; gap:clamp(40px,6vw,90px); align-items:center; }
.anrede .sternnote { font-size:19px; line-height:1.75; }
.anrede .sternnote strong { display:inline-block; margin-top:4px; }
.portraet-rahmen { position:relative; width:300px; }
.portraet-rahmen::before { content:""; position:absolute; inset:16px -16px -16px 16px;
  border:1px solid rgba(201,165,94,.6); pointer-events:none; }
.anrede .portraet { position:relative; width:300px; aspect-ratio:4 / 5; object-fit:cover; object-position:50% 20%;
  filter:none; outline:0; box-shadow:0 30px 70px -34px rgba(14,24,21,.55); }
.anrede .portraet-unter { margin-top:26px; text-align:right; }
@media (max-width:980px) {
  section.achse.anrede { padding-top:var(--s4); }
  .anrede-mit-bild { grid-column:auto; grid-template-columns:1fr; gap:var(--s3); }
  .portraet-rahmen, .anrede .portraet { width:min(72vw,300px); }
  .portraet-rahmen { margin:0 auto; }
  .anrede .portraet-unter { text-align:center; }
}