/* ============================================================
   VALTO — Zypern ohne Lehrgeld
   Farben, Formen und Typografie stammen aus dem VALTO-Styleguide
   und aus dem Workbook selbst. Nichts davon ist frei erfunden.
   ============================================================ */
:root{
  /* Farben. forest/gold/blush aus dem Workbook (Vektorwerte),
     sand aus dem Styleguide. */
  --forest:#1e4541;
  --forest-deep:#16332f;
  --forest-80:#4b6b67;
  --forest-40:#a5b5b3;
  --forest-12:#e4eae9;
  --gold:#cba851;
  --gold-20:#f4ecd8;
  --blush:#eb5e5d;
  --blush-20:#fbdedd;
  --sand:#fbf6e3;
  --sand-deep:#f4ecd6;
  --paper:#ffffff;

  /* „Fiona“ steht bewusst zuerst: sobald die Adobe-Lizenz geklärt ist,
     genügt das Einbinden der Schrift, hier muss nichts geändert werden.
     Bis dahin greift Prata – von allen freien Didone-Schnitten die,
     deren Haarlinien bei Fließtextgrößen nicht aufbrechen. */
  --font-display:"Fiona","Prata",Georgia,"Times New Roman",serif;
  --font-sans:"Comfortaa",ui-rounded,"Segoe UI",system-ui,-apple-system,sans-serif;

  --wrap:1320px;
  /* Lesespalte der Unterseiten. Rechtstexte brauchen kurze Zeilen,
     die Kopf- und Fusszeile bleiben aber auf voller Breite. */
  --wrap-lesen:44rem;
  --gut:clamp(1.25rem,.75rem + 2.6vw,3.5rem);
  --sec-y:clamp(4rem,2.4rem + 5.4vw,7.5rem);

  /* Radien, an den Vektorpfaden im Workbook gemessen – nicht geschätzt.
     Aufzählungspunkt S. 30: 7,02 x 4,39 pt, Bogen 3,55 pt breit.
     Goldfläche S. 4: 308,98 x 150,31 pt, Bogen 121,28 pt breit.
     Der waagerechte Radius liegt also bei rund 40–50 % der Breite, der
     senkrechte bei 100 % der Höhe. Zwei volle 100-%-Ecken ergäben eine
     spitze Linse ohne gerade Kanten – das ist nicht die Marke. */
  --leaf:40% 0 40% 0 / 100% 0 100% 0;
  --leaf-tall:100% 0 100% 0 / 31% 0 31% 0;
  --leaf-dot:50% 0 50% 0 / 100% 0 100% 0;
  --leaf-bar:100% 0 100% 0 / 21% 0 21% 0;
  --r-card:20px 20px 20px 0;
  --r-img:18px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--forest);
  font-family:var(--font-sans);
  font-size:clamp(1rem,.955rem + .2vw,1.075rem);
  line-height:1.8;font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
img{height:auto}
a{color:inherit}
h1,h2,h3,h4{margin:0;line-height:1.18;font-weight:700;letter-spacing:-.01em}
/* Lesbare Zeilenlaenge. Ohne Deckel laufen Absaetze im 1320er Container
   auf ueber 100 Zeichen. */
p{margin:0 0 1.15em;max-width:68ch}
p:last-child{margin-bottom:0}
.pull,.lead,.price,.eyebrow{max-width:none}
strong,b{font-weight:700}

.skip{position:absolute;left:-9999px;top:0;background:var(--forest);color:var(--sand);padding:.9rem 1.4rem;z-index:200;border-radius:0 0 12px 0}
.skip:focus{left:0}

:where(a,button,summary,input):focus-visible{
  outline:3px solid var(--gold);outline-offset:3px;border-radius:4px;
}

/* ---------- Layout ---------- */
.wrap{width:min(100% - var(--gut)*2,var(--wrap));margin-inline:auto}
/* Grid- und Flex-Kinder dürfen nicht unter ihre min-content-Breite
   gedrückt werden – ein Bild darin sprengt sonst die Spalte und die
   ganze Seite lässt sich seitlich scrollen. */
.hero__in>*,.media>*,.buy>*,.grid-2>*,.grid-3>*,.tiles>*,.authors__grid>*,.ftr__grid>*{min-width:0}
.mockup{min-width:0;max-width:100%}
.sec{padding-block:var(--sec-y);position:relative}
.sec--sand{background:var(--sand)}
.sec--sanddeep{background:var(--sand-deep)}
.sec--dark{background:var(--forest);color:var(--sand)}
.sec--dark h1,.sec--dark h2,.sec--dark h3{color:var(--sand)}
/* Kompaktes Band: Überschrift plus eine Kachelreihe, kein ganzes Kapitel. */
.sec--band{padding-block:clamp(3rem,2rem + 3.4vw,4.6rem)}

/* ---------- Typo-Bausteine ---------- */
.eyebrow{
  font-size:.735rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);margin:0 0 1.15rem;line-height:1.5;
}
.sec--dark .eyebrow{color:var(--gold)}

h1{font-family:var(--font-display);font-weight:400;letter-spacing:-.012em;
   font-size:clamp(2.6rem,1.45rem + 4.6vw,5rem);line-height:1.08;max-width:14em}

/* Zwischenüberschriften stehen im Workbook in Comfortaa Bold mit einem
   roten Balken davor – nicht in einer Serif. */
h2{font-size:clamp(1.6rem,1.24rem + 1.55vw,2.3rem);line-height:1.22}
/* Der rote Balken steht im Workbook INLINE vor dem ersten Wort: die erste
   Zeile rückt um seine Breite ein, alle Folgezeilen stehen bündig am Rand
   (S. 30: Zeile 1 bei x=45,35 / Zeile 2 bei x=42,53). Er ist 2,83 x 10,96 pt
   bei 14 pt Schrift, also 0,20 x 0,78 em – ein schmaler Balken mit leicht
   geschnittenen Ecken, keine lange Schräge. */
.h-mark::before{
  content:"";display:inline-block;vertical-align:baseline;
  width:.2em;height:.78em;margin-right:.42em;
  background:var(--blush);border-radius:var(--leaf-bar);
}
h3{font-size:clamp(1.1rem,1.02rem + .38vw,1.32rem);line-height:1.32}

.lead{
  font-weight:700;line-height:1.4;letter-spacing:-.008em;
  font-size:clamp(1.2rem,1.04rem + .75vw,1.6rem);
  margin-bottom:1.5rem;
}
.sec--dark .lead{color:#fff}
.note{font-size:.925rem;line-height:1.6;color:var(--forest-80)}
.sec--dark .note{color:#c2d1cf}

/* Hervorgehobene Kernaussagen. Die Serif kommt nur hier und im Hero vor. */
.pull{
  font-family:var(--font-display);font-weight:400;letter-spacing:-.01em;
  font-size:clamp(1.45rem,1.02rem + 1.95vw,2.5rem);line-height:1.32;
  margin:0;max-width:22em;
}

/* ---------- Buttons ---------- */
/* inline-block, nicht inline-flex: bei inline-flex wird jeder Textknoten
   zu einem eigenen Flex-Item und die Leerzeichen dazwischen verschwinden. */
.btn{
  display:inline-block;text-decoration:none;cursor:pointer;border:0;
  font-family:var(--font-sans);font-weight:700;
  font-size:clamp(.9rem,.83rem + .3vw,1.02rem);
  letter-spacing:.06em;text-transform:uppercase;
  line-height:1.32;text-align:center;text-wrap:balance;
  max-width:100%;
  padding:1.15rem 2.3rem;border-radius:999px;
  background:var(--forest);color:var(--sand);
  transition:background .18s ease,transform .18s ease,box-shadow .18s ease;
  box-shadow:0 1px 2px rgba(30,69,65,.18);
}
.btn:hover{background:var(--forest-deep);transform:translateY(-1px);box-shadow:0 8px 22px rgba(30,69,65,.22)}
.btn:active{transform:translateY(0)}
/* Gold mit forest-deep statt forest: 6,0:1 statt 4,7:1. Auf der goldenen
   Fläche war die Schrift vorher zu schwach. */
.btn--gold{background:var(--gold);color:var(--forest-deep);box-shadow:0 1px 2px rgba(0,0,0,.2)}
.btn--gold:hover{background:#dcbb6c;box-shadow:0 10px 26px rgba(0,0,0,.3)}
/* Nur noch eine Buttongroesse. Die kompakte Variante greift erst dort,
   wo in der Kopfzeile sonst kein Platz mehr ist. */
.btn--sm{padding:1.15rem 2.3rem;font-size:clamp(.9rem,.83rem + .3vw,1.02rem);letter-spacing:.06em}
@media(max-width:1039px){.btn--sm{padding:.95rem 1.4rem;font-size:.86rem;letter-spacing:.04em}}
.btn--wide{width:100%;max-width:26rem}
/* Ab Tablet passen auch die langen, von der Kundin vorgegebenen Labels
   in eine Zeile. Auf 390px tun sie das nicht – dort bricht der Text
   bewusst ausgeglichen um, statt aus dem Bildschirm zu laufen. */
@media(min-width:780px){.btn{white-space:nowrap;line-height:1.2}}
.btn[aria-disabled="true"],.btn:disabled{
  background:rgba(251,246,227,.13);color:#bfd0cd;cursor:not-allowed;
  box-shadow:none;transform:none;
  outline:1.5px solid rgba(251,246,227,.3);outline-offset:-1.5px;
}
/* Hinweis, warum der Button noch gesperrt ist. */
.buy__hint{margin:.85rem 0 0;font-size:.85rem;line-height:1.5;color:#c2d1cf}
.buy__hint::before{content:"";display:inline-block;width:15px;height:9px;margin-right:.6rem;
  background:var(--blush);border-radius:var(--leaf);vertical-align:.08em}

/* Stoerung beim Start der Zahlung. Steht im dunklen Kaufkasten, deshalb
   heller Text auf einer leicht abgesetzten Flaeche statt Signalrot. */
.buy__error{
  margin:.95rem 0 0;padding:.85rem 1.05rem;font-size:.9rem;line-height:1.55;
  color:#fff;background:rgba(235,94,93,.24);border-radius:12px;
  border-left:4px solid var(--blush);
}
.btn[aria-busy="true"]{opacity:.72;pointer-events:none}


.cta-row{display:grid;gap:.9rem;justify-items:start;margin-top:2rem}
.cta-row--center{justify-items:center;text-align:center}
/* In mittig gesetzten Bloecken muessen auch die Absaetze mittig sitzen –
   sonst steht der Text zwar zentriert, der Absatz aber links. */
.u-center{text-align:center}
.u-center>*{margin-inline:auto}

/* ---------- Listen mit Blatt-Bullet ---------- */
/* Aufzählung wie im Workbook S. 30: Punkt 0,70 x 0,44 em, Texteinzug 1,2 em,
   Zeilenabstand 1,6. Vorher war der Punkt fast doppelt so gross und stand
   zu weit vom Text weg. */
.leaflist{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.leaflist>li{position:relative;padding-left:1.2em;line-height:1.62}
.leaflist>li::before{
  content:"";position:absolute;left:0;top:.72em;
  width:.7em;height:.44em;background:var(--blush);border-radius:var(--leaf-dot);
}
.leaflist--gold>li::before{background:var(--gold)}
.leaflist--open>li::before{background:none;border:1.5px solid var(--blush);height:.5em}
.sec--dark .leaflist--open>li::before{border-color:var(--gold)}
/* Lange Listen laufen in zwei Spalten. Mehrspaltensatz statt Grid, damit
   von oben nach unten gelesen wird und beide Spalten gleich lang enden. */
.cols-2{display:block}
@media(min-width:760px){
  .cols-2{columns:2;column-gap:clamp(2rem,1.2rem + 2.6vw,3.6rem)}
  .cols-2>li{break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;
    margin-bottom:.9rem;display:block}
  .cols-2>li:last-child{margin-bottom:0}
}

/* ---------- Header ---------- */
.hdr{
  position:sticky;top:0;z-index:90;
  background:rgba(251,246,227,.94);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(30,69,65,.08);
  transition:box-shadow .3s ease,background .3s ease;
}
/* Grosse Kopfzeile am Seitenanfang, die beim Scrollen zusammenfährt. */
.hdr__in{display:flex;align-items:center;gap:1rem;flex-wrap:nowrap;
  min-height:104px;padding-block:1rem;
  transition:min-height .3s ease,padding-block .3s ease}
.hdr.is-small .hdr__in{min-height:64px;padding-block:.5rem}
.hdr.is-small{box-shadow:0 6px 24px rgba(30,69,65,.1);border-bottom-color:rgba(30,69,65,.14)}
.hdr__logo{color:var(--forest);flex:0 0 auto;line-height:0}
/* Ein inline-<svg> ohne height-Attribut nimmt die Ersatzgrösse 300x150 an –
   dadurch war die Kopfzeile 160 px hoch. aspect-ratio erzwingt die echten
   Proportionen aus der viewBox. */
.hdr__logo svg,.ftr__logo svg,.hdr__logo img,.ftr__logo img{aspect-ratio:281.197/54.425;height:auto;display:block}
.hdr__logo svg,.hdr__logo img{width:clamp(122px,15vw,182px);transition:width .3s ease}
.hdr.is-small .hdr__logo svg,.hdr.is-small .hdr__logo img{width:clamp(104px,16vw,132px)}
.hdr__nav{display:none;margin-left:auto;gap:1.9rem;font-size:.85rem;font-weight:500;white-space:nowrap}
.hdr__nav a{text-decoration:none;color:var(--forest);opacity:.8}
.hdr__nav a:hover{opacity:1;text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--blush)}
.hdr__cta{margin-left:auto;flex:0 0 auto;white-space:nowrap}
/* Auf schmalen Geräten muss das Header-Label einzeilig bleiben, sonst
   wächst die Kopfzeile und drängt das Logo zusammen. */
@media(max-width:560px){
  .hdr__in{min-height:78px}
  .hdr.is-small .hdr__in{min-height:58px}
  .hdr__logo svg,.hdr__logo img{width:112px}
  .hdr.is-small .hdr__logo svg,.hdr.is-small .hdr__logo img{width:92px}
  .hdr__cta{font-size:.78rem;padding:.95rem 1.15rem;letter-spacing:.02em;white-space:nowrap}
}
/* Sehr schmale Geraete (320 px): Logo, Button und Aussenabstand muessen
   zusammen unter die Bildschirmbreite passen, sonst rutscht der Button
   aus der Zeile. */
@media(max-width:400px){
  :root{--gut:.875rem}
  .hdr__in{gap:.6rem}
  .hdr__logo svg,.hdr__logo img{width:92px}
  .hdr.is-small .hdr__logo svg,.hdr.is-small .hdr__logo img{width:82px}
  .hdr__cta{font-size:.7rem;padding:.95rem .95rem;letter-spacing:.01em}
}
/* Bei 320 px reichte auch das noch nicht: gemessen 302,6 px Inhalt in
   277 px Zeile, der Button stand 12 px ueber dem Bildschirmrand. Logo,
   Abstand und Buttonpolster werden hier zusaetzlich verkleinert. Der
   Text im Button bleibt unveraendert - er stammt von der Kundin. */
@media(max-width:379px){
  :root{--gut:.75rem}
  .hdr__in{gap:.4rem}
  .hdr__logo svg,.hdr__logo img{width:78px}
  .hdr.is-small .hdr__logo svg,.hdr.is-small .hdr__logo img{width:70px}
  /* Seitliches Polster schmal, oben und unten aber gross genug:
     das Tippziel muss 44 px hoch bleiben. */
  .hdr__cta{font-size:.66rem;padding:.95rem .8rem;letter-spacing:0}
}
/* Zwischen 900 und 1040 px passten Logo + Menue + voller Button nicht in
   eine Zeile - die Kopfzeile brach um. Menue und volle Buttongroesse
   erscheinen deshalb erst ab 1040 px. */
@media(min-width:1040px){
  .hdr__nav{display:flex}
  /* Nur nach einem sichtbaren Menue. Ohne Menue behaelt der Button
     margin-left:auto und bleibt rechts, statt am Logo zu kleben. */
  .hdr__nav + .hdr__cta{margin-left:2rem}
}

/* ---------- Hero ---------- */
.hero{
  background:var(--forest);color:var(--sand);position:relative;overflow:hidden;
  padding-block:clamp(3.5rem,2rem + 6vw,6.5rem) clamp(4rem,2.4rem + 6vw,7rem);
}
/* Grosse organische Grundform, wie die Blattflächen im Workbook. */
.hero::before{
  content:"";position:absolute;pointer-events:none;
  width:min(58vw,760px);aspect-ratio:1/1.15;
  right:-18vw;top:-22vw;border-radius:var(--leaf-tall);
  background:rgba(203,168,81,.085);
}
@media(max-width:620px){.hero::before{right:-34vw;top:-30vw;width:88vw}}
.hero__in{position:relative;display:grid;gap:clamp(2.75rem,1.5rem + 5vw,4.5rem);align-items:center}
@media(min-width:940px){.hero__in{grid-template-columns:1fr 1.02fr}}
.hero__copy{max-width:36rem}
/* Wunsch der Kundin: auf dem Handy soll das Workbook frueher zu sehen
   sein, vor dem laengeren Einleitungstext. Unter 940 px loest sich
   .hero__copy auf, damit Einleitung, Buch und Resttext als drei Kacheln
   im Raster liegen und sich umsortieren lassen. Ab 940 px bleibt alles
   wie bisher - der Aufbau am Rechner wurde bereits abgenommen. */
/* .lead ist jetzt letztes Kind von .hero__intro. Die Regel
   p:last-child{margin-bottom:0} setzt dessen Abstand auf null - gemessen
   sass der Folgetext dadurch 24 px zu hoch. Der Abstand wandert deshalb
   an die Huelle. Auf dem Handy uebernimmt ihn der Rasterabstand. */
.hero__intro{margin-bottom:1.5rem}
@media(max-width:939px){
  .hero__copy{display:contents}
  .hero__intro{order:1;margin-bottom:0}
  .hero .mockup{order:2}
  .hero__rest{order:3}
}
.hero h1{margin-bottom:1.15rem}
.hero .lead{color:#fff}
.hero p:not(.lead):not(.eyebrow):not(.hero__tag){color:#dae4e2;max-width:33rem}
/* Bewusst nicht in Blush: auf dem Cover steht diese Zeile gross, hier
   klein. Blush auf Forest kommt nur auf 3,7:1 und fällt damit unter die
   Lesbarkeitsgrenze für Fliesstext. Die Marke steht stattdessen im
   Blattmarker davor. */
.hero__tag{
  margin-top:.15rem;font-size:.95rem;line-height:1.55;color:#e6eeec;
  font-weight:500;max-width:26rem;position:relative;padding-left:1.3em;
}
  .hero__tag::before{
  content:"";position:absolute;left:0;top:.66em;
  width:.72em;height:.45em;background:var(--blush);border-radius:var(--leaf-dot);
}

/* Produktdarstellung: Cover als 3D-Mockup vor einer goldenen Blattfläche.
   Die Anordnung stammt von Workbook-Seite 4: die goldene Blattform liegt
   unten rechts, das Motiv überlappt ihre obere linke Ecke. */
.mockup{
  position:relative;display:grid;place-items:center;
  padding:clamp(1rem,.5rem + 1.6vw,1.75rem);
  --book-w:min(76%,415px);
  --leaf-w:min(112%,600px);
}
.mockup__leaf{
  position:absolute;z-index:0;
  width:var(--leaf-w);aspect-ratio:1/1.06;
  left:50%;top:50%;transform:translate(-50%,-50%);
  background:var(--gold);border-radius:var(--leaf-tall);
}
/* Kleinere Variante im Kaufbereich, gleiches Grössenverhältnis. */
.mockup--sm{--book-w:min(70%,320px);--leaf-w:min(106%,470px)}
@media(max-width:620px){
  .mockup{--book-w:min(66%,240px);--leaf-w:min(100%,340px)}
  .mockup--sm{--book-w:min(64%,230px);--leaf-w:min(98%,325px)}
}
/* Weniger Drehung, damit das Cover flaechig lesbar bleibt, dafuer ein
   sichtbarer Seitenblock rechts und ein Buchruecken links. */
.book{
  position:relative;z-index:1;width:var(--book-w);
  transform:perspective(2400px) rotateY(-7deg) rotateX(.5deg) translate(-4%,-2%);
  filter:drop-shadow(-20px 30px 42px rgba(0,0,0,.46));
}
.book img{width:100%;display:block;border-radius:2px 4px 4px 2px}
/* Buchruecken links: schmaler Falz mit Schatten. */
.book::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4.5%;
  border-radius:2px 0 0 2px;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.2) 42%,rgba(255,255,255,.07) 100%);
}
/* Seitenblock rechts: liegt ausserhalb des Covers, deshalb kein overflow. */
.book::after{
  content:"";position:absolute;right:-3%;top:.8%;bottom:.8%;width:3%;
  border-radius:0 4px 4px 0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(0,0,0,.4) 0,rgba(0,0,0,0) 30%),
    repeating-linear-gradient(180deg,#f7f2e4 0 1.5px,#d5cdb8 1.5px 3px);
  box-shadow:2px 0 6px rgba(0,0,0,.28);
}

/* ---------- Karten ---------- */
.card{
  background:var(--paper);border:1px solid var(--forest-12);
  border-radius:var(--r-card);padding:clamp(1.6rem,1.1rem + 1.6vw,2.3rem);
  height:100%;
}
.sec--sand .card,.sec--sanddeep .card{border-color:rgba(30,69,65,.12)}
.card h3{margin-bottom:.7rem}
.card__num{
  font-family:var(--font-display);font-weight:400;color:var(--gold);
  font-size:2.5rem;line-height:1;display:block;margin-bottom:.7rem;
}
.grid-3{display:grid;gap:clamp(1rem,.6rem + 1.4vw,1.6rem)}
@media(min-width:820px){.grid-3{grid-template-columns:repeat(3,1fr)}}
.grid-2{display:grid;gap:clamp(1.1rem,.7rem + 1.5vw,1.9rem)}
@media(min-width:880px){.grid-2{grid-template-columns:1fr 1fr}}

/* ---------- „Das steckt drin“ ---------- */
.tiles{display:grid;gap:clamp(.7rem,.4rem + 1vw,1.1rem);
  grid-template-columns:repeat(2,1fr)}
/* Bei zwei bzw. drei Spalten bleibt die fünfte Kachel sonst allein in einer
   halben Zeile stehen. Sie läuft deshalb über die volle Breite. */
.tiles>.tile:nth-child(5){grid-column:1/-1}
@media(min-width:660px){
  .tiles{grid-template-columns:repeat(3,1fr)}
  .tiles>.tile:nth-child(5){grid-column:auto}
  .tiles>.tile:nth-child(4){grid-column:span 2}
}
@media(min-width:1040px){
  .tiles{grid-template-columns:repeat(5,1fr)}
  .tiles>.tile:nth-child(4){grid-column:auto}
}
.tile{
  background:rgba(251,246,227,.07);border:1px solid rgba(251,246,227,.16);
  border-radius:var(--r-card);padding:2rem 1.6rem 1.8rem;
  display:flex;flex-direction:column;justify-content:space-between;gap:1.6rem;
  min-height:15rem;
}
/* Jede Kachel fuehrt mit derselben goldenen Blattflaeche. Darin steht nie
   Text, nur ein Zeichen aus der Formensprache des Workbooks. */
.tile__plate{
  width:104px;height:66px;flex:0 0 auto;
  background:var(--gold);border-radius:var(--leaf);
  display:grid;place-items:center;color:var(--forest-deep);
}
.tile__plate svg{width:34px;height:34px}
/* Zeichen 1: viele Themen */
.ic-grid{display:grid;grid-template-columns:repeat(3,12px);gap:6px}
.ic-grid i{width:12px;height:7px;background:currentColor;border-radius:var(--leaf-dot)}
/* Zeichen 2: Checkliste */
.ic-check{position:relative;width:38px;height:24px;border:3px solid currentColor;border-radius:var(--leaf-dot)}
.ic-check::after{content:"";position:absolute;left:50%;top:46%;width:9px;height:15px;
  border-right:3px solid currentColor;border-bottom:3px solid currentColor;
  transform:translate(-55%,-55%) rotate(42deg)}
/* Zeichen 4: Zeitschiene */
.ic-rail{position:relative;width:42px;height:14px}
.ic-rail::before{content:"";position:absolute;left:2px;right:2px;top:6px;height:2px;background:currentColor;opacity:.55}
.ic-rail i{position:absolute;top:3px;width:13px;height:8px;background:currentColor;border-radius:var(--leaf-dot)}
.ic-rail i:nth-child(1){left:0}
.ic-rail i:nth-child(2){left:15px}
.ic-rail i:nth-child(3){left:29px}
/* Zeichen 5: gewachsene Erfahrung */
.ic-stack{position:relative;width:40px;height:32px}
.ic-stack i{position:absolute;background:currentColor;border-radius:var(--leaf-dot)}
.ic-stack i:nth-child(1){left:0;top:0;width:24px;height:9px;opacity:.42}
.ic-stack i:nth-child(2){left:8px;top:11px;width:32px;height:10px;opacity:.7}
.ic-stack i:nth-child(3){left:16px;top:23px;width:24px;height:9px}
.tile p{font-size:1.02rem;line-height:1.45;font-weight:600;margin:0;color:#fff;max-width:none}

/* ---------- Autoren-Sektion (Layout der Workbook-Seite 4) ---------- */
.authors__text{margin-bottom:clamp(2.5rem,1.5rem + 3vw,3.75rem)}
/* Gestapelt brauchen die beiden Textblöcke denselben Absatzabstand wie
   innerhalb eines Blocks, sonst kleben sie aneinander. */
.authors__grid>*+*{margin-top:1.15em}
@media(min-width:820px){
  .authors__grid{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(2.5rem,1.5rem + 3vw,4.5rem)}
  .authors__grid>*+*{margin-top:0}
}
/* Auf Workbook-Seite 4 läuft das Foto (bbox bis x=596,71 bei 595,28 pt
   Seitenbreite) über den rechten Seitenrand hinaus, ebenso die Goldfläche
   (x bis 595,28, y bis 841,64). Genau das wird hier nachgebaut: linke Kante
   auf der Satzkante, rechte Kante am Bildschirmrand. Kein negativer Rand,
   sondern ein volle Breite einnehmender Block mit berechnetem Innenabstand –
   das kann keinen Seitwärts-Scroll auslösen. */
.bleed-right{padding-left:max(var(--gut),calc((100% - var(--wrap))/2))}
.authors__figure{position:relative}
/* Die Blattmaske aus dem Workbook (S. 4): grosse Rundung oben links und
   unten rechts, die übrigen Kanten gerade. Ein voller 100%-Radius würde
   bei diesem Seitenverhältnis eine Linsenform ergeben, kein Blatt. */
.authors__photo{
  width:100%;object-fit:cover;object-position:center 30%;
  aspect-ratio:16/7.6;
  border-radius:var(--leaf);
}
@media(max-width:899px){
  .authors__photo{aspect-ratio:16/13;object-position:center 26%}
}
/* Die goldene Zitatfläche von Workbook-Seite 4.
   Wichtig: 100% auf zwei gegenüberliegende Ecken ergibt eine Linse – zwei
   Bögen zwischen denselben zwei Punkten. Die nutzbare Fläche für Text ist
   darin winzig. Im Workbook ist die Form deshalb auch keine ganze Linse,
   sondern ein grosses Blatt, das am Seitenrand abgeschnitten wird: ein
   Bogen oben links, rechts und unten gerade. Genau das wird hier
   nachgebaut – deshalb nur oben links 100% und viel Abstand nach links. */
.leafquote{
  background:var(--gold);color:var(--forest-deep);border-radius:var(--leaf);
  /* Die Blattform hat oben links UND unten rechts eine grosse Rundung
     (40 % der Breite, 100 % der Hoehe). Rechts und unten war das Polster
     bisher zu klein - die letzte Textzeile lief bei 360, 430, 768 und
     899 px aus der Flaeche heraus. Geometrisch nachgerechnet: die Zeile
     muss vor etwa 82 % der Breite enden. Rechts und unten daher genauso
     grosszuegig wie links und oben. */
  padding:clamp(3rem,2rem + 2.6vw,4.2rem) clamp(3.4rem,2.4rem + 3.4vw,5.5rem)
          clamp(2.6rem,1.9rem + 2.2vw,3.4rem) clamp(3.9rem,2.6rem + 4.4vw,7rem);
  font-weight:700;line-height:1.34;
  font-size:clamp(1.05rem,.95rem + .55vw,1.35rem);
  margin:-1rem 0 0 auto;width:min(100%,30rem);
  position:relative;z-index:2;
}
@media(min-width:900px){
  .leafquote{
    position:absolute;right:0;bottom:0;margin:0;
    transform:translateY(30%);width:min(48%,30rem);
  }
  .authors__figure{margin-bottom:clamp(4.5rem,3rem + 4.5vw,8rem)}
}
.leafquote__kicker{
  display:block;font-family:var(--font-sans);font-weight:600;
  font-size:.78rem;letter-spacing:.1em;
  opacity:.72;margin-bottom:.7rem;
}

/* ---------- Bild + Text ---------- */
/* Vertikal zentriert, damit neben einer hochformatigen Innenseite kein
   einseitiges Loch entsteht. Die Bildbreite ist gedeckelt, sonst wird die
   Spalte deutlich höher als der Text daneben. */
.media{display:grid;gap:clamp(1.8rem,1rem + 3vw,3.5rem);align-items:center}
@media(min-width:900px){
  .media{grid-template-columns:1fr 1fr}
  .media--flip .media__fig{order:2}
}
.media__fig{margin:0;position:relative;display:grid;justify-items:center}
.media__fig__inner{position:relative;width:min(100%,390px)}
/* Blattfläche hinter der Innenseite, wie die grossen Formen im Workbook. */
.media__fig__inner::before{
  content:"";position:absolute;z-index:0;width:46%;aspect-ratio:1/1.25;
  background:var(--gold);opacity:.55;border-radius:var(--leaf-tall);
  left:-7%;bottom:7%;
}
.sec--dark .media__fig__inner::before{opacity:.42}
.media__fig img{
  position:relative;z-index:1;width:100%;border-radius:var(--r-img);
  box-shadow:0 10px 24px rgba(30,69,65,.14);
}
.sec--dark .media__fig img{box-shadow:0 12px 28px rgba(0,0,0,.34)}
.media__fig figcaption{
  position:relative;z-index:1;margin-top:1rem;font-size:.82rem;letter-spacing:.02em;
  color:var(--forest-80);text-align:center;max-width:24rem;
}
.sec--dark .media__fig figcaption{color:#a9bcb9}

/* ---------- Zitatbänder ---------- */
.band{background:var(--forest);color:var(--sand);
  padding-block:clamp(3rem,1.8rem + 4vw,5rem);position:relative;overflow:hidden}
.band--gold{background:var(--gold);color:var(--forest)}
.band__in{position:relative;display:grid;gap:1.4rem;justify-items:center;text-align:center}
.band__in .pull{max-width:26em}
.band__mark{width:58px;height:34px;background:var(--blush);border-radius:var(--leaf-dot);flex:0 0 auto}
.band--gold .band__mark{background:var(--forest)}

/* ---------- Zeitleiste 90-Tage-Plan ---------- */
/* Waagerechte Schiene mit sieben Stationen. Jede Station bekommt eine
   Ziffer in der Display-Schrift, einen Blattmarker auf der Schiene und
   das Stichwort der Kundin. Die beiden Enden tragen ihre eigenen
   Zeitangaben aus dem Satz im Fliesstext. */
/* Gestapelt gehoert die Startangabe VOR die Schiene, nicht dahinter.
   display:contents loest den Wrapper auf, damit beide Angaben als eigene
   Flex-Kinder sortiert werden koennen. */
.tl{margin:clamp(2.6rem,1.8rem + 2.6vw,4rem) 0 0;display:flex;flex-direction:column}
.tl__caps{display:contents}
.tl__rail{order:2}
.tl__cap{order:1;margin:0 0 1.5rem}
.tl__cap--end{order:3;margin:1.9rem 0 0}
.tl__cap{
  display:flex;flex-wrap:wrap;gap:.75rem 1rem;align-items:center;
  font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--gold);
}
.tl__cap span{display:inline-flex;align-items:center;gap:.6rem}
.tl__cap span::before{content:"";width:1.05em;height:.62em;background:var(--gold);border-radius:var(--leaf-dot)}
/* Rechtsbuendig nur, wenn beide Marken nebeneinander in einer Zeile
   stehen. Untereinander gehoeren sie an dieselbe linke Kante wie
   die Stationen darueber. */

.tl__rail{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:1.5rem}
.tl__step{position:relative;padding-left:3.3rem;min-height:2.4rem}
.tl__step::before{ /* Schiene */
  content:"";position:absolute;left:.95rem;top:0;bottom:-1.5rem;width:2px;
  background:linear-gradient(180deg,rgba(203,168,81,.55),rgba(203,168,81,.25));
}
.tl__step:last-child::before{display:none}
.tl__step::after{ /* Knoten */
  content:"";position:absolute;left:.35rem;top:.45rem;
  width:1.35rem;height:.85rem;background:var(--gold);border-radius:var(--leaf-dot);
}
.tl__num{
  display:block;font-family:var(--font-display);font-weight:400;
  font-size:.95rem;line-height:1;color:var(--gold);opacity:.85;margin-bottom:.3rem;
}
.tl__label{display:block;font-weight:600;line-height:1.4;font-size:1rem;color:#fff}

@media(min-width:820px){
  .tl{display:block}
  .tl__caps{display:flex;justify-content:space-between;gap:1.5rem;margin-top:2rem}
  .tl__cap,.tl__cap--end{margin:0}
  .tl__cap--end{justify-content:flex-end}
  .tl__rail{grid-template-columns:repeat(7,1fr);gap:0;position:relative;padding-top:3.6rem}
  .tl__rail::before{ /* durchgehende Schiene */
    content:"";position:absolute;left:0;right:0;top:2.55rem;height:2px;
    background:linear-gradient(90deg,rgba(203,168,81,.2),var(--gold) 8%,var(--gold) 92%,rgba(203,168,81,.2));
  }
  .tl__step{padding:0 1.1rem 0 0;min-height:0}
  .tl__step::before{display:none}
  .tl__step::after{left:0;top:-1.53rem}
  .tl__num{position:absolute;top:-3.5rem;left:0;font-size:1.35rem;opacity:1}
  .tl__label{font-size:.94rem}
}

/* ---------- Tagesablauf-Panel ---------- */
.daypanel{
  background:var(--gold-20);border-radius:var(--r-card);
  padding:clamp(1.8rem,1.2rem + 2vw,2.8rem);
  display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem .8rem;
  width:min(100%,58rem);margin-inline:auto;
}
.daypanel span{font-size:.98rem}
.daypanel span{
  background:var(--paper);border:1px solid rgba(203,168,81,.45);
  border-radius:999px;padding:.5rem 1rem;font-size:.9rem;font-weight:500;line-height:1.3;
}

/* ---------- Kaufbereich ---------- */
.buy{display:grid;gap:clamp(2rem,1.2rem + 3vw,3.5rem);align-items:center}
@media(min-width:900px){.buy{grid-template-columns:.85fr 1.15fr}}
.buy__panel{
  background:rgba(251,246,227,.07);border:1px solid rgba(251,246,227,.2);
  border-radius:var(--r-card);padding:clamp(1.6rem,1.1rem + 1.8vw,2.6rem);
}
.price{display:flex;align-items:baseline;gap:.75rem;flex-wrap:wrap;margin-bottom:.35rem}
.price b{font-family:var(--font-display);font-weight:400;font-size:clamp(2.6rem,1.9rem + 2.6vw,3.8rem);line-height:1;color:#fff}
.price span{font-size:.9rem;color:#c2d1cf}
.consent{
  display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:start;
  margin:1.6rem 0;padding:1.15rem 1.25rem;
  background:rgba(0,0,0,.16);border:1px solid rgba(251,246,227,.18);border-radius:14px;
}
.consent input{
  appearance:none;width:26px;height:26px;margin:1px 0 0;flex:0 0 auto;
  border:2px solid var(--gold);border-radius:6px;background:transparent;cursor:pointer;
}
.consent input:checked{background:var(--gold);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.4l3.2 3.2L13 4.8' fill='none' stroke='%231e4541' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size:16px;background-repeat:no-repeat;background-position:center}
.consent label{font-size:.86rem;line-height:1.6;color:#dae4e2;cursor:pointer}
.trust{display:grid;gap:.5rem;margin-top:1.4rem;font-size:.85rem;color:#c2d1cf}
.trust li{position:relative;padding-left:1.25em;list-style:none;line-height:1.55}
.trust li::before{content:"";position:absolute;left:0;top:.62em;width:.7em;height:.44em;background:var(--gold);border-radius:var(--leaf-dot)}
.trust{padding:0;margin-left:0}

/* ---------- FAQ ---------- */
/* Die Fragen laufen sonst über die volle Seitenbreite – als Textblock
   viel zu weit. */
.faq{display:grid;gap:.7rem;margin-top:clamp(1.8rem,1.2rem + 2vw,2.8rem);
  width:min(100%,62rem);margin-inline:auto}
#faq>.wrap>h2{width:min(100%,62rem);margin-inline:auto}
.faq details{
  background:var(--paper);border:1px solid rgba(30,69,65,.13);
  border-radius:var(--r-card);overflow:hidden;
}
.faq summary{
  list-style:none;cursor:pointer;display:flex;gap:1rem;align-items:flex-start;
  padding:1.25rem clamp(1.15rem,.8rem + 1.2vw,1.9rem);
  font-weight:700;line-height:1.42;font-size:clamp(1rem,.96rem + .25vw,1.1rem);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";flex:0 0 auto;margin-left:auto;width:14px;height:14px;margin-top:.42em;
  border-right:2.5px solid var(--blush);border-bottom:2.5px solid var(--blush);
  transform:rotate(45deg);transition:transform .22s ease;
}
.faq details[open] summary::after{transform:rotate(-135deg)}
/* Die Frage darf nie die Hintergrundfarbe der Sektion annehmen – sonst
   verschwindet die Zeile beim Überfahren in der Seite. */
/* Kein Farbwechsel im Text und kein Fremdton: die Karte bleibt weiss und
   hebt sich beim Ueberfahren nur leicht ab. */
.faq details{transition:border-color .2s ease,box-shadow .2s ease}
.faq details:hover{border-color:rgba(30,69,65,.3);box-shadow:0 4px 16px rgba(30,69,65,.09)}
.faq details[open] summary{border-bottom:1px solid rgba(30,69,65,.1)}
.faq__body{padding:1.4rem clamp(1.15rem,.8rem + 1.2vw,1.9rem) 1.6rem}
.faq__body p:first-child{margin-top:0}

/* ---------- Abschluss ---------- */
.finale{text-align:center;max-width:44rem;margin-inline:auto}
.finale .pull{margin-bottom:1.2rem}
.finale__price{
  font-family:var(--font-display);font-weight:400;color:var(--gold);
  font-size:clamp(2.4rem,1.8rem + 2.4vw,3.4rem);line-height:1;margin:.4rem 0 .2rem;
}

/* ---------- Footer ---------- */
.ftr{background:var(--forest-deep);color:#dfe8e6;padding-block:clamp(3.5rem,2.4rem + 3.4vw,5.5rem);
  font-size:1rem;line-height:1.75}
.ftr a{color:#f4f8f7;text-decoration:none}
.ftr a:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--gold)}
.ftr__grid{display:grid;gap:2.4rem 3rem}
@media(min-width:760px){.ftr__grid{grid-template-columns:1.4fr 1fr 1fr}}
.ftr__logo{color:var(--sand);display:block;margin-bottom:1.2rem;line-height:0}
.ftr__logo svg,.ftr__logo img{width:138px}
/* h3, nicht h4: nach den <h2> der Abschnitte darf keine Ebene
   uebersprungen werden. Screenreader nutzen die Gliederung zum
   Springen, eine Luecke zerreisst sie. */
.ftr h3{font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:.55rem;font-weight:600}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:0}
/* Fingerfreundliche Trefferflächen: 16px Textzeile plus Innenabstand = 44px. */
.ftr ul a{display:inline-block;padding-block:.42rem}
.ftr__contact a{display:inline-block;padding-block:.35rem}
.hdr__nav a{display:inline-block;padding-block:.6rem}
/* § 356a BGB: die Widerrufsfunktion muss hervorgehoben und leicht
   auffindbar sein, nicht zwischen Impressum und AGB verschwinden. */
.ftr__widerruf{
  margin-top:2.6rem;padding-top:2.2rem;border-top:1px solid rgba(251,246,227,.16);
  display:flex;flex-wrap:wrap;gap:1.1rem 1.6rem;align-items:center;justify-content:space-between;
}
.ftr__widerruf .btn{background:var(--sand);color:var(--forest)}
.ftr__widerruf .btn:hover{background:#fff}
/* Trennlinie ueber die volle Breite, der Text darin mittig und breit
   genug fuer zwei Zeilen. */
.ftr__legal{margin-top:2.4rem;padding-top:1.8rem;border-top:1px solid rgba(251,246,227,.12);
  text-align:center}
.ftr__legal p{font-size:.88rem;color:#adc2bf;line-height:1.75;
  max-width:92ch;margin-inline:auto}

/* ---------- Sticky CTA (mobil) ---------- */
.sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:95;
  padding:.7rem var(--gut) calc(.7rem + env(safe-area-inset-bottom));
  background:rgba(22,51,47,.96);backdrop-filter:blur(8px);
  border-top:1px solid rgba(251,246,227,.16);
  transform:translateY(110%);transition:transform .3s ease;
}
.sticky.is-on{transform:translateY(0)}
.sticky .btn{display:block;width:100%;padding:1rem 1rem}
/* Platz, damit die Leiste die letzte Fusszeile nicht verdeckt. Der Abstand
   sitzt im Footer, nicht am body – sonst entsteht darunter ein heller Streifen. */
@media(max-width:899px){.ftr{padding-bottom:calc(clamp(3rem,2rem + 3vw,4.5rem) + 5rem)}}
@media(min-width:900px){.sticky{display:none}}

/* Sanftes Einblenden. Wird per JS aktiviert, damit ohne JavaScript
   nichts unsichtbar bleibt. */
.js-reveal .reveal{opacity:0;transform:translateY(14px);
  transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1)}
.js-reveal .reveal.is-in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js-reveal .reveal{opacity:1;transform:none}
}
html{scroll-behavior:smooth}

/* ============================================================
   Unterseiten: Rechtstexte, Widerrufsformular, Bestätigung
   ============================================================ */
.page{padding-block:clamp(3rem,2rem + 3.4vw,5rem) clamp(4rem,2.6rem + 5vw,7rem)}
.page > .wrap{width:min(100% - var(--gut)*2,var(--wrap-lesen))}
.page__head{margin-bottom:clamp(2.2rem,1.6rem + 2vw,3.2rem)}
.page__head h1{
  font-family:var(--font-sans);font-weight:700;letter-spacing:-.01em;
  font-size:clamp(1.9rem,1.4rem + 2.2vw,2.9rem);line-height:1.18;max-width:20em;
}
.page__head .note{margin-top:.9rem}

/* Fliesstext-Bereich für Rechtstexte */
.prose{width:100%}

/* Lange deutsche Woerter und die Unterstrich-Linien im
   Muster-Widerrufsformular schoben die Rechtstexte auf schmalen Handys
   ueber den Bildschirmrand hinaus (gemessen: 378 px Inhalt bei 320 px
   Anzeige). Silbentrennung und Umbruch im Wort loesen beides, ohne den
   Wortlaut der Kundin anzutasten. */
.page__head h1,.prose h2,.prose h3,.prose p,.prose li,.prose address,
.prose td,.prose th{overflow-wrap:break-word;hyphens:auto}
.prose h2{
  font-size:clamp(1.15rem,1.04rem + .5vw,1.4rem);line-height:1.32;
  margin:2.6rem 0 .9rem;
}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.02rem;margin:1.8rem 0 .6rem;font-weight:700}
.prose p{margin:0 0 1.05em;max-width:none}
.prose ul{margin:0 0 1.2em;padding:0;list-style:none;display:grid;gap:.5rem}
.prose ul>li{position:relative;padding-left:1.2em;line-height:1.62}
.prose ul>li::before{
  content:"";position:absolute;left:0;top:.72em;
  width:.7em;height:.44em;background:var(--blush);border-radius:var(--leaf-dot);
}
.prose ol{margin:0 0 1.2em;padding-left:1.4em;display:grid;gap:.5rem}
.prose ol>li{line-height:1.62;padding-left:.3em}
.prose ol>li::marker{color:var(--blush);font-weight:700}
.prose address{font-style:normal;line-height:1.75;margin:0 0 1.05em}
.prose__meta{font-size:.9rem;color:var(--forest-80);margin-bottom:2rem}

/* Ausfuelllinie im Muster-Widerrufsformular. Frueher standen dort
   Unterstriche - fuer den Browser ein einziges langes Wort, das die
   Seite auf schmalen Geraeten ueber den Rand schob. Eine echte Linie
   passt sich der Breite an und sieht gedruckt genauso aus. */
.prose .fill{
  display:block;height:1.1em;margin:.1em 0 .2em;
  border-bottom:1.5px solid rgba(30,69,65,.4);
}

/* Kasten für Hinweise und offene Punkte */
.callout{
  background:var(--sand-deep);border-radius:var(--r-card);
  padding:clamp(1.3rem,1rem + 1.2vw,1.9rem);margin:0 0 2rem;
  border-left:5px solid var(--gold);
}
.callout--open{border-left-color:var(--blush);background:var(--blush-20)}
.callout p:last-child{margin-bottom:0}
.callout h3{margin-top:0}

/* Bestelluebersicht auf der Erfolgsseite */
.tbl{
  width:100%;border-collapse:collapse;margin:0 0 2rem;
  font-size:.98rem;text-align:left;
}
.tbl th,.tbl td{padding:.85rem 0;vertical-align:top;line-height:1.55}
.tbl th{
  font-weight:600;color:var(--forest-80);white-space:nowrap;
  padding-right:1.6rem;width:11rem;
}
.tbl tr+tr th,.tbl tr+tr td{border-top:1px solid rgba(30,69,65,.14)}
@media(max-width:520px){
  .tbl,.tbl tr,.tbl th,.tbl td{display:block;width:auto}
  .tbl th{padding:0;width:auto}
  .tbl td{padding:.2rem 0 1rem}
  .tbl tr+tr th{border-top:1px solid rgba(30,69,65,.14);padding-top:1rem}
  .tbl tr+tr td{border-top:0}
}

/* Formular */
.form{width:100%}
.field{display:grid;gap:.45rem;margin-bottom:1.35rem}
.field label{font-weight:600;font-size:.95rem}
.field .hint{font-size:.85rem;color:var(--forest-80);line-height:1.5}
.field input,.field textarea{
  font-family:var(--font-sans);font-size:1rem;color:var(--forest);
  padding:.85rem 1rem;border:1.5px solid rgba(30,69,65,.28);border-radius:12px;
  background:var(--paper);width:100%;
}
.field input:focus-visible,.field textarea:focus-visible{
  outline:3px solid var(--gold);outline-offset:2px;border-color:var(--forest);
}
.field textarea{min-height:7rem;resize:vertical;line-height:1.6}
.field--error input,.field--error textarea{border-color:var(--blush)}
.field__err{font-size:.88rem;color:#b3312f;font-weight:600}
/* Honigtopf gegen automatisierte Einsendungen. Kein CAPTCHA: das Gesetz
   verlangt eine leicht zugängliche Widerrufsfunktion. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.steps{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;margin:0 0 2rem;padding:0;list-style:none;
  font-size:.9rem;font-weight:600;color:var(--forest-80)}
.steps li{display:flex;align-items:center;gap:.55rem}
.steps li::before{content:"";width:1.05em;height:.62em;border-radius:var(--leaf-dot);
  background:var(--forest-40)}
.steps li[aria-current="step"]{color:var(--forest)}
.steps li[aria-current="step"]::before{background:var(--blush)}
.steps li.is-done::before{background:var(--gold)}

.summary-box{
  background:var(--paper);border:1px solid var(--forest-12);border-radius:var(--r-card);
  padding:clamp(1.3rem,1rem + 1.2vw,1.9rem);margin:0 0 1.8rem;
}
.summary-box dl{display:grid;gap:.7rem;margin:0}
@media(min-width:520px){.summary-box dl{grid-template-columns:auto 1fr;gap:.7rem 1.6rem}}
.summary-box dt{font-weight:600;color:var(--forest-80);font-size:.92rem}
.summary-box dd{margin:0}

.notice{
  background:var(--forest);color:var(--sand);border-radius:var(--r-card);
  padding:clamp(1.4rem,1.1rem + 1.4vw,2.1rem);margin:0 0 2rem;
}
.notice h2{color:var(--sand);margin-top:0}
.notice p:last-child{margin-bottom:0}
.notice a:not(.btn){color:var(--gold)}
.notice .btn--gold{color:var(--forest-deep)}