/* THE BOUND GAMES · Landingpage
   Palette, Schriften und Satzregeln stammen aus der Cover-Werkstatt
   (cover/src/tokens.css, cover/CLAUDE.md). Kein Wamoco-Design: das hier
   gehört zum Buch, nicht zur Agentur.

   Die drei Entwürfe geben der Seite ihre drei Gründe:
     A · Das Wappen        → blutrot, Rankwerk, Lorbeer   (Die Spiele)
     B · Das Armband       → warmes Schwarz, Gold, Dornen (Hero, Register)
     C · Der goldene Käfig → Champagner, Damast, Ketten   (Oben, Entwürfe)
   Und über allem der Reim des Buches: Inschrift gegen Registereintrag.
   Cinzel für alles, was in Stein steht. IBM Plex Mono für alles, was im
   Register steht. */

:root{
  --nacht:#0A0806; --nacht-2:#16110A; --nacht-3:#241a0e;
  --gold-deep:#5E4310; --gold-mid:#A9832F; --gold:#C9A24B;
  --gold-hi:#F2DFA4; --gold-spec:#FFF8E4;
  --stahl-deep:#3A4351; --stahl:#8E9BAE; --stahl-hi:#D6DEE9;
  --blut:#75171A;
  --champ:#D8C08A; --champ-hi:#EFE0BC; --champ-lo:#A98A4C; --tinte:#16110A;

  --f-i:"Cinzel",Georgia,serif;
  --f-k:"Cormorant Garamond",Georgia,serif;
  --f-r:"IBM Plex Mono",ui-monospace,monospace;

  --linie:rgba(201,162,75,.22);
  --text:rgba(243,224,182,.84);
  --text-leise:rgba(230,204,154,.76);

  --foil:linear-gradient(176deg,#8A6A22 0%,#C9A24B 12%,#EFDCA0 26%,#FFF8E4 36%,
    #E4C578 48%,#9A7628 62%,#C9A24B 80%,#F2E0A6 92%,#8A6A22 100%);

  --rand:clamp(20px,5vw,56px);
  --breit:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--nacht);color:var(--text);
  font-family:var(--f-k);font-size:clamp(17px,1.15vw,20px);line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.sprung{position:absolute;left:-9999px;top:0;z-index:99;background:var(--nacht-2);
  color:var(--gold-hi);padding:10px 16px;font-family:var(--f-r);font-size:12px}
.sprung:focus{left:12px;top:12px}

/* ---- Grundflächen: alles Ornament wird gezeichnet, nichts ist ein Bild ---- */
.grund{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
.korn{position:absolute;inset:0;z-index:1;pointer-events:none;
  mix-blend-mode:soft-light;opacity:.34}
section,.fuss{position:relative;isolation:isolate}
.mitte{position:relative;z-index:2;max-width:var(--breit);margin:0 auto;
  padding-inline:var(--rand)}

/* ---- Satz ---------------------------------------------------------------- */
.ivory{
  background:linear-gradient(180deg,#FFFEF8 0%,#FDF4E0 40%,#F0DCB4 72%,#DCC08A 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 0 rgba(34,4,6,.5)) drop-shadow(0 9px 22px rgba(0,0,0,.6));
}
.kicker{font-family:var(--f-r);font-weight:400;font-size:clamp(10px,1vw,11.5px);
  letter-spacing:.52em;text-indent:.52em;text-transform:uppercase;
  color:var(--text-leise);margin:0 0 18px}
.kicker--gold{color:rgba(214,178,98,.9)}
.kicker--hell{color:rgba(250,226,198,.86)}
.kicker--tinte{color:rgba(48,32,6,.86)}

.h2{font-family:var(--f-i);font-weight:700;line-height:1.08;
  font-size:clamp(28px,4.4vw,52px);letter-spacing:.02em;margin:0 0 22px;
  background:linear-gradient(180deg,#FFFEF8 0%,#F5E6C6 55%,#D9BC84 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.h2--hell{background:linear-gradient(180deg,#FFFEF8 0%,#FBEDD3 60%,#EFD6A6 100%);
  -webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 2px 0 rgba(30,2,4,.45))}
.h2--tinte{background:linear-gradient(180deg,#2A1C06 0%,#16110A 100%);
  -webkit-background-clip:text;background-clip:text}

.vorspann{max-width:62ch;margin:0 0 42px;font-size:1.06em;color:rgba(243,224,182,.78)}
.vorspann--eng{max-width:56ch}
.vorspann--hell{color:rgba(252,234,206,.82)}
.vorspann--tinte{color:rgba(32,22,4,.94)}

.linie{height:1px;width:min(420px,60%);margin:clamp(16px,2.4vh,26px) auto;
  background:linear-gradient(90deg,transparent,rgba(201,162,75,.7),transparent)}

/* ---- Kopfbalken ---------------------------------------------------------- */
.balken{position:fixed;top:0;left:0;right:0;z-index:40;
  display:flex;align-items:center;gap:20px;
  padding:10px max(var(--rand),14px);
  padding-top:calc(10px + env(safe-area-inset-top,0px));
  background:linear-gradient(180deg,rgba(10,8,6,.96),rgba(10,8,6,.82));
  border-bottom:1px solid var(--linie);
  transform:translateY(-102%);transition:transform .35s ease}
.balken.sichtbar{transform:none}
.balken__titel{font-family:var(--f-i);font-weight:700;font-size:13px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold-hi);
  text-decoration:none;white-space:nowrap}
.balken__nav{display:flex;gap:22px;margin-left:auto}
.balken__nav a{font-family:var(--f-r);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--text-leise);text-decoration:none;
  padding-block:4px;border-bottom:1px solid transparent}
.balken__nav a:hover{color:var(--gold-hi);border-bottom-color:var(--gold-mid)}
@media(max-width:900px){.balken__nav{display:none}
  .balken__titel{margin:0 auto}}

/* ---- Hero ---------------------------------------------------------------- */
.hero{min-height:100svh;display:flex;flex-direction:column;align-items:center;
  text-align:center;overflow:hidden;
  padding:clamp(58px,8.5vh,104px) var(--rand) 0}
.hero .kicker{color:rgba(240,218,172,.92);
  text-shadow:0 1px 8px rgba(0,0,0,.7)}
.hero__innen{position:relative;z-index:2;width:100%;max-width:960px}
.hook{font-family:var(--f-r);font-weight:400;
  font-size:clamp(11px,1.5vw,17px);letter-spacing:.38em;text-indent:.38em;
  line-height:1.95;text-transform:uppercase;color:rgba(240,218,170,.95);
  margin:0 0 clamp(2px,1.2vh,14px);
  text-shadow:0 2px 10px rgba(0,0,0,.94),0 0 22px rgba(0,0,0,.8)}
.hook b{font-weight:600;color:rgba(252,238,206,.97)}

/* z-index:0 statt des frueheren filter: der Stapelkontext muss bleiben, damit
   ::before mit z-index:-1 im Armband liegt und nicht hinter dem Hero. Der
   Schlagschatten haengt jetzt am Bild selbst, damit der weit ueberstehende
   Schein in keinem Filterbereich eines Elternteils mehr steckt. */
.armband{position:relative;z-index:0;width:min(430px,56vw);margin:0 auto 6px}
.armband::before{content:"";position:absolute;inset:-22% -14% -30%;
  background:radial-gradient(52% 46% at 50% 62%,rgba(226,150,44,.34) 0%,
    rgba(160,96,24,.16) 42%,rgba(0,0,0,0) 74%);z-index:-1}
.armband__bild{position:relative;z-index:1;
  width:100%;height:auto;aspect-ratio:1172/825;
  filter:drop-shadow(0 26px 40px rgba(0,0,0,.6))}
/* Der Schein ist ein fertig weichgezeichnetes Bild (10-armband.sh), kein
   CSS-Filter. Vorher lag hier eine zweite Kopie des Armbands mit
   filter:blur() und mix-blend-mode:screen — auf iOS stand darum ein harter
   heller Kasten um das Armband: Safari beschneidet Weichzeichnung und
   Mischung am Elementrahmen, also genau an der Bildkante. Das gebackene PNG
   bringt seinen transparenten Rand mit und kann nirgends abreißen. Die
   Prozente sind der Rand aus 10-armband.sh: Stand 2026-10-25: 1172 x 825. */
.armband__schein{position:absolute;z-index:0;pointer-events:none;
  left:-23.12%;top:-32.85%;width:146.25%;height:auto;opacity:.92}

.titel{margin:0;position:relative;z-index:2;display:flex;flex-direction:column;
  align-items:center;line-height:.92}
.titel__the{font-family:var(--f-i);font-weight:600;
  font-size:clamp(12px,1.5vw,20px);letter-spacing:.7em;text-indent:.7em;
  color:rgba(228,196,136,.94);text-transform:uppercase;margin-bottom:.35em;
  /* Das Wort liegt auf der leuchtenden Innenseite des Armbands. Ohne den
     dunklen Hof verliert es dort den Kontrast. */
  text-shadow:0 2px 10px rgba(8,5,2,.92), 0 0 24px rgba(8,5,2,.75)}
.titel__wort{font-family:var(--f-i);font-weight:900;text-transform:uppercase;
  font-size:clamp(46px,10.6vw,132px);letter-spacing:.01em}
/* Die Wortmarke vom Cover (seit 2026-10-25) statt gesetzter Titelzeilen:
   Zierversalien, Ring um O und U, Prägung. Ein dunkler Hof hält sie auf der
   leuchtenden Innenseite des Armbands lesbar, wie vorher beim THE. */
.titel__marke{display:block;width:clamp(280px,58vw,640px);height:auto;margin:0 auto;
  filter:drop-shadow(0 2px 14px rgba(8,5,2,.75))}

.unterzeile{font-family:var(--f-k);font-style:italic;font-weight:500;
  font-size:clamp(18px,2.5vw,32px);color:rgba(243,222,176,.94);margin:0}
.autor{font-family:var(--f-i);font-weight:600;font-size:clamp(11px,1.3vw,15px);
  letter-spacing:.44em;text-indent:.44em;text-transform:uppercase;
  color:rgba(248,232,196,.9);margin:clamp(12px,1.8vh,18px) 0 0}
.hero__pitch{max-width:50ch;margin:clamp(18px,2.8vh,34px) auto 0;
  font-size:clamp(15px,1.2vw,19px);color:rgba(240,216,166,.72)}

.hero__band{position:relative;z-index:2;width:100%;
  margin-top:auto;padding:clamp(14px,2.4vh,20px) var(--rand);
  border-top:1px solid var(--linie);
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px;
  font-family:var(--f-r);font-size:clamp(9.5px,1.05vw,12px);
  letter-spacing:.3em;text-transform:uppercase;color:rgba(216,180,102,.88)}
.hero__band i{width:4px;height:4px;transform:rotate(45deg);
  background:rgba(201,162,75,.5)}

/* ---- Die Welt ------------------------------------------------------------ */
.welt{padding:clamp(72px,11vh,132px) 0 0;text-align:center}
.welt .vorspann{margin-inline:auto;text-align:left}
.spalt{display:grid;grid-template-columns:1fr 1fr;margin-top:clamp(24px,4vh,48px)}
.feld{position:relative;display:flex;align-items:center;
  padding:clamp(34px,4.4vw,58px) clamp(22px,3.6vw,52px);
  min-height:clamp(420px,52vh,600px);text-align:left;overflow:hidden}
.feld__innen{position:relative;z-index:2}
.feld__marke{font-family:var(--f-r);font-size:10.5px;letter-spacing:.34em;
  text-transform:uppercase;margin:0 0 14px}
.feld__titel{font-family:var(--f-i);font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;font-size:clamp(17px,1.9vw,24px);margin:0 0 22px}
.liste{list-style:none;margin:0;padding:0;display:grid;gap:15px;font-size:.98em}
.liste li{padding-left:22px;position:relative}
.liste li::before{content:"";position:absolute;left:0;top:.62em;
  width:6px;height:6px;transform:rotate(45deg)}
.feld--unten{background:linear-gradient(180deg,#F4F7FA,#DCE4EE);color:#2C3441}
.feld--unten .feld__marke{color:rgba(44,52,65,.96)}
.feld--unten .feld__titel{color:#20262F}
.feld--unten .liste li::before{background:rgba(58,67,81,.42)}
.feld--unten strong{color:#161B22}
.feld--unten em{font-style:italic;color:#20262F}
.feld--oben{background:linear-gradient(180deg,#171008,#0C0904);color:rgba(240,216,166,.8)}
.feld--oben .feld__marke{color:rgba(214,178,98,.88)}
.feld--oben .feld__titel{color:var(--gold-hi)}
.feld--oben .liste li::before{background:rgba(201,162,75,.6)}
.feld--oben strong{color:var(--gold-hi);font-weight:600}
@media(min-width:900px){.armband{margin-bottom:2%}}
@media(max-width:880px){.spalt{grid-template-columns:1fr}
  .feld{min-height:0}}

.inschrift{position:relative;z-index:2;margin:0;
  padding:clamp(22px,3.4vh,34px) var(--rand);text-align:center;
  background:linear-gradient(90deg,#0C0904,#1A1206 50%,#0C0904);
  border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);
  font-family:var(--f-i);font-weight:600;
  font-size:clamp(10.5px,1.35vw,17px);letter-spacing:.2em;line-height:2;
  text-transform:uppercase;color:rgba(226,190,124,.8)}
.inschrift i{display:inline-block;font-style:normal;color:rgba(201,162,75,.5);
  padding-inline:.8em}

/* ---- Das Register -------------------------------------------------------- */
.register{padding:clamp(76px,12vh,140px) 0}
.zeilen{list-style:none;counter-reset:z;margin:0 0 30px;padding:0;
  border-top:1px solid var(--linie)}
.zeilen li{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 26px;
  padding:16px 4px;border-bottom:1px solid var(--linie);
  opacity:0;transform:translateY(10px);transition:opacity .6s ease,transform .6s ease}
.zeilen li.sichtbar{opacity:1;transform:none}
.zeilen code{font-family:var(--f-r);font-weight:500;
  font-size:clamp(12px,1.35vw,16px);letter-spacing:.1em;color:var(--gold-hi);
  min-width:min(100%,27em)}
.zeilen span{font-size:.95em;color:var(--text-leise);flex:1}
.zeilen--leer code{color:rgba(158,172,190,.92)}
.zeilen--leer code i{display:inline-block;width:8em;border-bottom:1px dashed rgba(142,155,174,.45);
  margin-left:1.2em;transform:translateY(-.28em);animation:blinken 2.6s steps(2) infinite}
@keyframes blinken{0%,60%{opacity:.75}61%,100%{opacity:.25}}
@media(max-width:820px){
  /* Schmal bricht die Zeile sonst in eine zwei Wörter breite Spalte */
  .zeilen li{flex-direction:column;gap:7px}
  .zeilen code{min-width:0}
  .zeilen span{flex:none}
}
.nachsatz{max-width:56ch;margin:0;font-style:italic;
  font-size:clamp(17px,1.35vw,21px);color:rgba(243,224,182,.9)}

/* ---- Die Spiele ---------------------------------------------------------- */
.spiele{padding:clamp(76px,12vh,140px) 0;color:rgba(252,234,206,.84)}
.karten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,20px);
  margin-bottom:clamp(36px,6vh,60px)}
@media(max-width:940px){.karten{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.karten{grid-template-columns:1fr}}
.karte{position:relative;display:flex;flex-direction:column;
  padding:22px 20px 52px;background:linear-gradient(168deg,rgba(28,4,8,.72),rgba(12,2,4,.78));
  border:1px solid rgba(226,150,110,.24)}
.karte h3{font-family:var(--f-i);font-weight:700;font-size:clamp(16px,1.7vw,21px);
  letter-spacing:.12em;text-transform:uppercase;margin:0 0 10px;
  color:rgba(255,246,224,.96)}
.karte .regel{font-family:var(--f-k);font-style:italic;font-size:1.04em;
  margin:0 0 12px;color:rgba(255,232,196,.92)}
.karte .dazu{margin:0;font-size:.93em;color:rgba(248,222,196,.82)}
.karte .klasse{position:absolute;left:20px;bottom:18px;font-family:var(--f-r);
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,236,216,.98);background:rgba(28,6,8,.78);
  border:1px solid rgba(226,150,110,.55);padding:5px 10px}
.karte .klasse--iv{color:rgba(255,238,216,.99);border-color:rgba(255,196,150,.7);
  background:rgba(38,8,8,.80)}
.spruch{margin:0;max-width:60ch;font-family:var(--f-k);font-style:italic;
  font-size:clamp(19px,2.1vw,29px);line-height:1.42;color:rgba(255,244,220,.94);
  border-left:1px solid rgba(226,150,110,.5);padding-left:clamp(18px,2.4vw,30px)}
.spruch cite{display:block;margin-top:16px;font-style:normal;font-family:var(--f-r);
  font-size:clamp(11px,1.1vw,13px);letter-spacing:.12em;
  color:rgba(248,216,188,.82)}

/* ---- Die Figuren --------------------------------------------------------- */
.figuren{padding:clamp(76px,12vh,140px) 0}
.paar{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.8vw,26px);
  margin-bottom:34px}
@media(max-width:820px){.paar{grid-template-columns:1fr}}
.person{display:flex;flex-direction:column;
  padding:clamp(26px,3vw,40px);border:1px solid var(--linie);
  background:linear-gradient(170deg,rgba(22,17,10,.86),rgba(10,8,6,.9))}
.person p{margin:0 0 14px;font-size:.98em}
.person__marke{font-family:var(--f-r);font-size:10px;letter-spacing:.32em;
  text-transform:uppercase;color:rgba(214,178,98,.88);margin:0 0 12px}
.person__name{font-family:var(--f-i);font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;font-size:clamp(20px,2.4vw,30px);margin:0 0 18px;
  color:var(--gold-hi);display:flex;align-items:baseline;gap:14px}
.person__name i{font-family:var(--f-r);font-style:normal;font-size:12px;
  letter-spacing:.18em;color:rgba(214,178,98,.86)}
.person__satz{font-family:var(--f-k);font-style:italic;
  font-size:clamp(18px,1.8vw,25px);line-height:1.34;color:rgba(252,238,206,.96);
  margin:22px 0 0;margin-top:auto;padding-top:18px;
  border-top:1px solid var(--linie)}
.person--register{border-color:rgba(142,155,174,.26);
  background:linear-gradient(170deg,rgba(18,21,26,.9),rgba(9,10,12,.92))}
.person--register .person__marke{color:rgba(166,180,198,.94);font-family:var(--f-r)}
.person--register .person__name{color:var(--stahl-hi);font-family:var(--f-r);
  font-weight:500;letter-spacing:.14em;font-size:clamp(17px,1.9vw,24px)}
.person--register .person__name i{color:rgba(166,180,198,.9)}
.person--register .person__satz{color:var(--stahl-hi);font-family:var(--f-r);
  font-style:normal;font-size:clamp(12px,1.2vw,15px);letter-spacing:.14em;
  text-transform:uppercase;line-height:1.6;
  border-top-color:rgba(142,155,174,.26)}
.dritte{max-width:64ch;margin:0 0 44px;color:var(--text-leise)}
.dritte strong{color:var(--gold-hi);font-weight:600}
.stimmen{display:grid;gap:22px;border-top:1px solid var(--linie);padding-top:34px}
.stimmen p{margin:0;display:grid;gap:6px}
.stimmen span{font-family:var(--f-r);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(214,178,98,.86)}
.stimmen b{font-family:var(--f-k);font-style:italic;font-weight:500;
  font-size:clamp(20px,2.6vw,34px);line-height:1.3;
  background:var(--foil);-webkit-background-clip:text;background-clip:text;
  color:transparent}

/* Der Leitsatz. Er steht allein, nach den drei Machtsätzen, und widerspricht
   ihnen. Deshalb keine Karte, kein Rahmen, nur eine Linie darüber. */
.leitsatz{margin:clamp(34px,5vh,52px) 0 0;padding-top:clamp(26px,3.6vh,38px);
  border-top:1px solid var(--linie);text-align:center;
  font-family:var(--f-k);font-style:italic;font-weight:500;
  font-size:clamp(23px,3.4vw,42px);line-height:1.25;
  color:rgba(252,240,212,.96);text-shadow:0 2px 14px rgba(8,5,2,.8)}

/* ---- Aus dem Buch -------------------------------------------------------
   Die Zitatkacheln. Jede Karte bringt ihren eigenen Grund mit, genau wie
   .person: auf gemaltem Ornament wäre eine feine Serifenschrift sonst
   dasselbe Kontrastproblem wie seinerzeit in der Fragen-Sektion.
   Die Anspielzeile steht leise, die Antwort im Blattgold. Das ist derselbe
   Reim wie im Rest der Seite, nur auf Dialog angewandt. */
.zitate{padding:clamp(76px,12vh,140px) 0}
/* Derselbe Schleier wie in der Fragen-Sektion, aus demselben Grund: Überschrift,
   Vorspann und Leitsatz liegen hier ohne eigene Fläche auf gemaltem Rankwerk,
   und WCAG allein sieht die Unruhe eines solchen Grundes nicht. Die Kacheln
   selbst brauchen ihn nicht, sie bringen ihre Fläche mit. */
.zitate::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,4,2,.34) 0%,rgba(5,4,2,.86) 16%,
    rgba(5,4,2,.88) 86%,rgba(5,4,2,.40) 100%)}
.zitate .mitte{position:relative;z-index:2}
.wechsel{display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(12px,1.6vw,22px);margin-top:clamp(28px,4.5vh,46px)}
@media(max-width:820px){.wechsel{grid-template-columns:1fr}}
.rede{margin:0;display:flex;flex-direction:column;justify-content:center;gap:14px;
  padding:clamp(24px,2.8vw,38px);border:1px solid var(--linie);
  background:linear-gradient(170deg,rgba(14,10,5,.94),rgba(6,4,2,.96))}
/* Das Regelwerk ist das Herz des Abschnitts und steht deshalb über beide
   Spalten, dafür eine Spur kleiner gesetzt: sonst erschlägt es die Kacheln. */
.rede--breit{grid-column:1/-1}
.rede--breit .rede__ab{font-size:clamp(21px,2.3vw,30px);line-height:1.38}
.rede__auf{margin:0;font-size:clamp(17px,1.5vw,22px);line-height:1.48;
  color:rgba(246,232,200,.92)}
.rede__auf em{font-style:italic;color:var(--gold-hi)}
/* Die Antwortzeile ist ohnehin kursiv. Eine Betonung darin dreht sich deshalb
   um: sie steht aufrecht. Genauso macht es der Satz im Buch mit *gehorchst*. */
.rede__ab em{font-style:normal}
/* Zwei Antwortzeilen in einer Kachel (Befehl und Nachschlag) stehen enger. */
.rede__ab+.rede__ab{margin-top:-4px}
.rede__ab{margin:0;font-family:var(--f-k);font-style:italic;font-weight:600;
  font-size:clamp(25px,3vw,38px);line-height:1.24;
  color:var(--gold-spec)}
/* Drei Sprecher: die mittlere Zeile gehoert ihr, deshalb ein Strich davor. */
.rede--drei .rede__auf+.rede__auf{padding-left:14px;
  border-left:1px solid var(--linie)}

/* ---- Das Versprechen ----------------------------------------------------- */
.versprechen{padding:clamp(76px,12vh,140px) 0;
  background:linear-gradient(180deg,#0A0806,#140E07 50%,#0A0806)}
.marken{list-style:none;margin:0 0 clamp(36px,6vh,56px);padding:0;
  display:flex;flex-wrap:wrap;gap:10px}
.marken li{font-family:var(--f-r);font-size:clamp(9.5px,1vw,11.5px);
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold-hi);
  border:1px solid rgba(201,162,75,.4);padding:8px 13px;
  transition:background .2s ease,color .2s ease}
.marken li:hover{background:var(--gold-hi);color:var(--nacht)}
/* Die Welt-Schlagworte: andere Suchraeume als die Romance-Tropes, deshalb
   auch optisch als eigene Reihe erkennbar. */
.marken--welt li{color:rgba(196,214,236,.92);border-color:rgba(140,170,206,.42)}
.marken--welt li:hover{background:rgba(196,214,236,.94);color:var(--nacht)}
.marken--welt{margin-top:clamp(20px,3vh,32px);padding-top:clamp(20px,3vh,32px);
  border-top:1px solid var(--linie)}
.zweispalt{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,44px);
  margin-bottom:36px}
@media(max-width:760px){.zweispalt{grid-template-columns:1fr}}
.klein{font-family:var(--f-i);font-weight:700;font-size:12px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--gold);margin:0 0 12px;
  padding-bottom:10px;border-bottom:1px solid var(--linie)}
.zweispalt p{margin:0;font-size:.98em}
.regal{margin:0;font-family:var(--f-k);font-size:clamp(17px,1.5vw,21px);
  color:rgba(243,226,190,.92);max-width:62ch}
.regal em{font-style:italic;color:rgba(252,240,210,.97)}

/* ---- Die Verortung im Hero ----------------------------------------------
   Die drei Begriffe, über die das Buch in der SF-Ecke gefunden werden soll.
   Bewusst klein und leise: sie sollen die Leserin einordnen, nicht anspringen. */
.verortung{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:12px;margin:clamp(16px,2.4vh,26px) 0 0;
  font-family:var(--f-r);font-size:clamp(9px,1vw,11px);
  letter-spacing:.3em;text-transform:uppercase;color:rgba(232,200,128,.94);
  text-shadow:0 1px 8px rgba(0,0,0,.8)}
.verortung i{width:4px;height:4px;transform:rotate(45deg);
  background:rgba(201,162,75,.45)}

/* ---- Die Fragen ---------------------------------------------------------- */
.fragen{position:relative;padding:clamp(76px,12vh,140px) 0;overflow:hidden}
/* Ein Schleier zwischen Ornament und Satz. Die Dornenranken laufen sonst quer
   durch die Zeilen, und acht Fragen in einer feinen Serifenschrift sind etwas
   anderes als ein einzelner Leitsatz darauf. Nach WCAG bestand die Stelle,
   weil der Kontrast gegen den Mittelwert stimmt — gemessen wurde die
   Unruhe des Grundes erst, nachdem sie beim Lesen auffiel. */
.fragen::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,4,2,.34) 0%,rgba(5,4,2,.88) 18%,
    rgba(5,4,2,.90) 84%,rgba(5,4,2,.40) 100%)}
.fragen .mitte{position:relative;z-index:2}
.saeulen{display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(26px,4vw,64px);margin-top:clamp(8px,1.6vh,18px)}
@media(max-width:820px){.saeulen{grid-template-columns:1fr;gap:34px}}
.fragenliste{list-style:none;margin:0;padding:0;display:grid;gap:0}
.fragenliste li{position:relative;padding:clamp(15px,2vh,20px) 0 clamp(15px,2vh,20px) 26px;
  border-bottom:1px solid var(--linie);
  font-family:var(--f-k);font-weight:500;
  font-size:clamp(18px,1.68vw,24px);line-height:1.45;
  color:rgba(252,242,222,.97)}
.fragenliste li:last-child{border-bottom:0}
.fragenliste li::before{content:"";position:absolute;left:0;top:calc(.72em + 8px);
  width:7px;height:7px;transform:rotate(45deg);background:rgba(201,162,75,.55)}

/* ---- Das Cover ----------------------------------------------------------
   Ein Entwurf, nicht drei: der Autor hat entschieden. Deshalb steht das Bild
   jetzt groß neben dem Text statt in einer Reihe von Gleichwertigen. */
.cover{padding:clamp(76px,12vh,140px) 0;color:#2A2008}
.coverzeile{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(30px,5vw,80px);align-items:center}
@media(max-width:880px){.coverzeile{grid-template-columns:1fr;
  gap:clamp(28px,5vh,46px)}}
.covertafel{margin:0}
.covertafel img{display:block;width:100%;height:auto;
  box-shadow:0 26px 60px rgba(40,26,4,.42);
  transition:transform .5s ease}
.covertafel:hover img{transform:translateY(-8px)}
.klappentext{display:grid;gap:clamp(14px,2vh,20px);max-width:52ch}
.klappentext p{margin:0;font-size:1.02em;line-height:1.6;color:rgba(30,21,4,.94)}
.klappentext b{color:#1A1302;font-weight:600}
.covernotizen{list-style:none;margin:clamp(24px,3.4vh,34px) 0 0;padding:0;
  display:grid;gap:clamp(14px,2vh,20px)}
.covernotizen li{position:relative;padding-left:24px;
  font-size:.97em;color:rgba(32,22,4,.9)}
.covernotizen li::before{content:"";position:absolute;left:0;top:.62em;
  width:6px;height:6px;transform:rotate(45deg);background:rgba(72,50,10,.5)}
.covernotizen b{color:#201804}
.mono{font-family:var(--f-r);font-size:.9em;letter-spacing:.12em}

/* ---- Die Liste ----------------------------------------------------------- */
.liste-cta{padding:clamp(70px,11vh,126px) 0;text-align:center;
  background:linear-gradient(180deg,#0A0806,#171008 52%,#0A0806);
  border-top:1px solid var(--linie)}
.liste-cta .h2,.liste-cta .vorspann{margin-inline:auto}
.liste-cta .vorspann{text-align:left}

/* ---- Rezensionsexemplar (arc.html) --------------------------------------
   Kopf = der Hero der Landingpage, nur kompakter. Das Formular ist eine
   Karte im Stil der Figurenkarten (.person). */
.arc-kopf{padding:clamp(64px,9vh,92px) var(--rand) clamp(40px,6vh,64px);
  text-align:center;overflow:hidden;border-bottom:1px solid var(--linie)}
.arc-kopf__innen{position:relative;z-index:2;max-width:960px;margin:0 auto}
.arc-kopf .kicker{color:rgba(240,218,172,.92);text-shadow:0 1px 8px rgba(0,0,0,.8)}
.arc-kopf .armband{width:min(300px,62vw)}
.arc-kopf .titel__wort{font-size:clamp(40px,6.4vw,80px)}
.arc-kopf .titel__marke{width:clamp(240px,44vw,440px)}

.arc{padding:clamp(48px,8vh,90px) 0 clamp(64px,10vh,110px)}
.arc__karte{max-width:600px;margin:0 auto;padding:clamp(24px,4vw,44px);
  border:1px solid var(--linie);
  background:linear-gradient(170deg,rgba(22,17,10,.92),rgba(10,8,6,.94))}
.arc__kopf{display:flex;gap:clamp(18px,3vw,28px);align-items:center;
  padding-bottom:clamp(20px,3vh,28px);border-bottom:1px solid var(--linie)}
.arc__cover{width:clamp(76px,14vw,96px);height:auto;flex:none;
  box-shadow:0 12px 28px rgba(0,0,0,.6)}
.arc__titel{font-family:var(--f-i);font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;line-height:1.12;font-size:clamp(20px,2.6vw,28px);
  margin:0 0 12px;color:var(--gold-hi)}
.arc__link{font-family:var(--f-r);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--text-leise);text-decoration:none;
  padding-bottom:2px;border-bottom:1px solid var(--linie)}
.arc__link:hover{color:var(--gold-hi);border-bottom-color:var(--gold-mid)}
.arc__text{margin:clamp(20px,3vh,26px) 0 clamp(24px,3.4vh,30px);font-size:.98em;
  color:rgba(243,224,182,.8)}
.arc__text p{margin:0 0 12px}
.arc__text p:last-child{margin:0}
.arc__text b{color:var(--gold-hi);font-weight:600}

.arc__felder{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:520px){.arc__felder{grid-template-columns:1fr}}
.arc__feld{display:grid;gap:8px}
.arc__feld span,.arc__formate legend{font-family:var(--f-r);font-size:10px;
  letter-spacing:.32em;text-transform:uppercase;color:rgba(214,178,98,.88)}
.arc__feld input{font-family:var(--f-r);font-size:15px;letter-spacing:.08em;
  color:var(--champ-hi);background:rgba(6,4,2,.6);border:1px solid var(--linie);
  border-radius:0;padding:12px 14px;width:100%;caret-color:var(--gold-hi);
  transition:border-color .2s ease}
.arc__feld input:hover{border-color:rgba(201,162,75,.4)}
.arc__feld input:focus{outline:none;border-color:var(--gold)}

.arc__formate{border:0;padding:0;margin:22px 0 0;display:grid;
  grid-template-columns:1fr 1fr;gap:12px}
.arc__formate legend{padding:0;margin-bottom:8px}
.arc__formate label{position:relative;cursor:pointer}
.arc__formate input{position:absolute;opacity:0;pointer-events:none}
.arc__formate span{display:grid;gap:3px;height:100%;padding:13px 14px 13px 36px;
  border:1px solid var(--linie);background:rgba(6,4,2,.6);
  transition:border-color .2s ease,background .2s ease}
.arc__formate span::before{content:"";position:absolute;left:15px;top:19px;
  width:7px;height:7px;transform:rotate(45deg);
  border:1px solid rgba(201,162,75,.55)}
.arc__formate b{font-family:var(--f-r);font-weight:500;font-size:12px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--text-leise)}
.arc__formate i{font-style:normal;font-size:.86em;line-height:1.35;color:var(--text-leise)}
.arc__formate label:hover span{border-color:rgba(201,162,75,.4)}
.arc__formate input:checked + span{border-color:var(--gold);
  background:linear-gradient(170deg,rgba(201,162,75,.16),rgba(201,162,75,.05))}
.arc__formate input:checked + span::before{background:var(--gold-hi);border-color:var(--gold-hi)}
.arc__formate input:checked + span b{color:var(--gold-hi)}
.arc__formate input:focus-visible + span{outline:2px solid var(--gold);outline-offset:3px}

.arc__fehler{margin:20px 0 0;padding:12px 14px;border:1px solid rgba(160,40,40,.75);
  background:rgba(117,23,26,.3);color:var(--champ-hi);font-size:.96em}
.arc__los{display:block;width:100%;margin-top:26px;padding:17px 20px;cursor:pointer;
  font-family:var(--f-r);font-weight:600;font-size:12px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--nacht);border:0;background:var(--foil);
  transition:filter .2s ease}
.arc__los:hover{filter:brightness(1.1)}
.arc__hinweis{margin:14px 0 0;text-align:center;font-family:var(--f-r);font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-leise)}

/* ---- Fuß ----------------------------------------------------------------- */
.fuss{padding:clamp(56px,9vh,96px) 0 clamp(40px,7vh,72px);text-align:center;
  border-top:1px solid var(--linie)}
.fuss__titel{font-family:var(--f-i);font-weight:900;text-transform:uppercase;
  font-size:clamp(22px,3.2vw,40px);letter-spacing:.06em;margin:0 0 16px;
  background:var(--foil);-webkit-background-clip:text;background-clip:text;
  color:transparent}
.fuss__zeile{font-family:var(--f-r);font-size:clamp(10px,1.05vw,12px);
  letter-spacing:.26em;text-transform:uppercase;color:var(--text-leise);margin:0}
/* Nur der Name ist geschützt, nicht die ganze Zeile. Beide Teile auf nowrap
   und ohne Leerraum dazwischen ergaben eine unteilbare Einheit, die auf
   schmalen Geräten rechts hinauslief. Das <wbr> davor ist die einzige
   erlaubte Umbruchstelle. */
.fuss__zeile .nobr{white-space:nowrap}
.fuss__zeile i{font-style:normal;padding-inline:.7em;color:rgba(201,162,75,.4)}
.fuss__notiz{max-width:52ch;margin:26px auto 0;font-size:.92em;
  color:rgba(232,208,160,.84)}
.fuss__recht{margin:22px 0 0;font-family:var(--f-r);font-size:11px;
  letter-spacing:.2em;text-transform:uppercase}
.fuss__recht a{color:var(--text-leise);text-decoration:none;
  border-bottom:1px solid var(--linie)}
.fuss__recht a:hover{color:var(--gold-hi)}
.fuss__recht i{font-style:normal;padding-inline:.9em;color:rgba(201,162,75,.4)}

/* Aufruf zum Handeln, im Markup noch stillgelegt (siehe index.html) */
.cta{margin-top:34px}
.cta__text{margin:0 0 16px;font-size:1.02em;color:rgba(243,224,182,.8)}
.cta__knopf{display:inline-block;font-family:var(--f-r);font-size:11.5px;
  letter-spacing:.24em;text-transform:uppercase;text-decoration:none;
  color:var(--gold-hi);border:1px solid rgba(201,162,75,.5);padding:13px 26px;
  transition:background .2s ease,color .2s ease}
.cta__knopf:hover{background:var(--gold-hi);color:var(--nacht)}

/* ---- Auftauchen ---------------------------------------------------------- */
.auf{opacity:0;transform:translateY(16px);
  transition:opacity .7s ease,transform .7s ease}
.auf.sichtbar{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .auf,.zeilen li{opacity:1;transform:none;transition:none}
  .zeilen--leer code i{animation:none}
  .balken{transition:none}
}