/* Marius Höfinger – Bildband zum Blättern. Maße in em: bildband.js setzt die Basis nach Seitenhöhe. */
@import url(../fonts/fonts.css);
:root{--paper:#f6f3ee;--paper2:#ece7df;--matt:#fbfaf6;--tisch:#d9d3c9;--ink:#141414;--ink2:#4c4842;--mute:#7a756d;--line:rgba(20,20,20,.14);
  --orange:#ff9400;--orange-t:#b05f00;--serif:'Fraunces',Georgia,serif;--sans:'Inter Tight',system-ui,sans-serif}
*{box-sizing:border-box}[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:radial-gradient(120% 90% at 50% 40%,#e9e4dc 0%,var(--tisch) 62%,#cbc4b8 100%);color:var(--ink);font:400 16px/1.5 var(--sans);-webkit-font-smoothing:antialiased;overflow:hidden}
img{display:block;max-width:100%}
em{font-style:italic}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.hk{position:fixed;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 26px;z-index:20}
/* Logo (14.10.2026, Wunsch Marius): groß, freigestellt, steckt ein paar Prozent HINTER dem Heft.
   magazin.js setzt --logo-x so, dass die linke obere Heftecke ~10 % in den Logo-Durchmesser ragt (Buchrahmen liegt darüber). */
:root{--logo:clamp(108px,15.5vh,156px);--logo-x:22px;--hk-pad:26px}
.hk-logo{position:fixed;z-index:1;top:8px;left:var(--logo-x);width:var(--logo);line-height:0}
.hk-logo img{width:100%;height:auto}
.buch-rahmen{z-index:2;pointer-events:none}.buch-rahmen>*{pointer-events:auto}
.hk-marke{display:flex;align-items:center;text-decoration:none;color:var(--ink);padding-left:calc(var(--logo-x) - var(--hk-pad) + var(--logo) + 16px)}
.hk-marke b{font:500 17px/1.12 var(--sans);letter-spacing:-.005em}.hk-marke small{display:block;margin-top:3px;font-weight:400;opacity:.62;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase}
.hk-hinweis{font:500 11px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.hk-link{font:500 13px var(--sans);color:var(--ink);text-decoration:none;border:1px solid var(--line);padding:9px 16px;border-radius:99px;background:rgba(246,243,238,.7)}
.hk-link:hover{border-color:var(--ink)}
.tisch{height:100svh;display:grid;grid-template-columns:auto 1fr auto;align-items:center;padding:66px 22px 52px;gap:14px}
.buch-rahmen{position:relative;height:100%;display:flex;align-items:center;justify-content:center;min-width:0}
#buch{margin:0 auto;filter:drop-shadow(0 30px 40px rgba(40,30,20,.25)) drop-shadow(0 4px 8px rgba(40,30,20,.12));transform:translateX(var(--schub,0px))}
.bereit #buch{transition:transform .9s cubic-bezier(.45,.05,.25,1)}
.pfeil{width:52px;height:52px;border-radius:50%;border:1px solid var(--line);background:rgba(246,243,238,.75);font:300 30px/1 var(--serif);color:var(--ink2);transition:.2s}
.pfeil:hover{border-color:var(--ink);color:var(--ink);background:var(--paper)}
.pfeil:disabled{opacity:.25;pointer-events:none}
.leiste{position:fixed;bottom:16px;left:0;right:0;text-align:center;font:500 11px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);pointer-events:none}

/* Seite */
.seite{background:var(--paper);overflow:hidden}
.seite .s-in{position:absolute;inset:0;padding:3.2em 3em 3.9em;display:flex;flex-direction:column;overflow:hidden}
.seite::after{content:"";position:absolute;inset:0;pointer-events:none}
.stf__item.--left::after{background:linear-gradient(90deg,rgba(0,0,0,0) 82%,rgba(40,30,20,.05) 93%,rgba(40,30,20,.17) 100%)}
.stf__item.--right::after{background:linear-gradient(270deg,rgba(0,0,0,0) 84%,rgba(40,30,20,.06) 94%,rgba(40,30,20,.18) 100%)}
.s-fuss{position:absolute;left:3em;right:3em;bottom:1.6em;display:flex;justify-content:space-between;font:500 .62em var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.stf__item.--right .s-fuss{flex-direction:row-reverse}
.kicker{font:500 .68em var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin:0 0 1.3em;display:flex;align-items:center;gap:.9em}
.kicker::before{content:"";width:2.4em;height:1px;background:currentColor;opacity:.6}
h1,h2{font-family:var(--serif);font-weight:300;letter-spacing:-.025em;margin:0}
h2{font-size:2.9em;line-height:1}
h2 em,h1 em{font-weight:300}
p{margin:0}
.lead{font:300 italic 1.32em/1.35 var(--serif);color:var(--ink2);margin-top:1em}
figure{margin:0;position:relative}
figcaption{font:400 .7em/1.4 var(--sans);letter-spacing:.04em;color:var(--mute);margin-top:.8em}

/* Titel */
.titel{background:#111;color:#fff}
.t-bild{position:absolute;inset:0}
.t-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 46%}   /* Bildformat 14.10.2026: ganzes Foto im Passepartout, kein Zuschnitt */
.t-bild::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 52%,rgba(0,0,0,.72) 100%)}
.t-oben{position:absolute;top:2em;left:2.4em;right:2.4em;display:flex;justify-content:space-between;font:500 .66em var(--sans);letter-spacing:.16em;text-transform:uppercase;border-bottom:1px solid rgba(255,255,255,.6);padding-bottom:.9em}
.t-unten{position:absolute;left:2.4em;right:2.4em;bottom:2.4em}
.t-rubrik{font:500 .7em var(--sans);letter-spacing:.18em;text-transform:uppercase;margin-bottom:1em;color:var(--orange)}
.t-unten h1{font-size:4.4em;line-height:.95}

/* Editorial */
.editorial h2{font-size:3.2em}
.fakten{display:grid;grid-template-columns:repeat(3,1fr);gap:1em;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:1em 0;margin:1.6em 0 0}
.fakten dt{font:500 .58em var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:.4em}
.fakten dd{margin:0;font:300 .98em/1.2 var(--serif)}
.text{margin-top:1.5em;font-size:.86em;line-height:1.6;columns:2;column-gap:1.8em;color:var(--ink2)}
.text p{margin:0 0 .8em;break-inside:avoid-column}
.initiale::first-letter{float:left;font:300 3.6em/.8 var(--serif);margin:.06em .1em 0 0;color:var(--ink)}
.sig{margin-top:auto;font:300 italic 1.5em var(--serif)}
.sig small{display:block;font:500 .42em var(--sans);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-top:.3em}

/* Bilder als Abzug */
.abzug-s{background:var(--matt);padding:.75em;box-shadow:0 1px 2px rgba(0,0,0,.06),0 1.2em 2.2em -1.4em rgba(0,0,0,.45);align-self:center;max-width:100%}
.abzug-s img{width:100%;height:auto;max-height:100%}
.abzug-s figcaption{margin:.7em .1em 0}
.voll .s-in{justify-content:center;align-items:center;padding-top:4em}
.voll .abzug-s{width:100%}
/* Bildformat 14.10.2026: Abzug passt sich dem Foto an (--ar = Breite/Höhe) und wird so groß wie möglich, ohne Zuschnitt.
   Breite = min(Seitenbreite, (Seitenhöhe − Passepartout − 2 Zeilen Bildunterschrift) × Format + Passepartout) */
.voll .s-in{container-type:size}
.abzug-s.fit,.voll.hoch .abzug-s.fit{width:min(100cqw,calc((100cqh - 1.5em - 2.5em) * var(--ar) + 1.5em));height:auto;display:block;flex:none}
.abzug-s.fit img,.voll.hoch .abzug-s.fit img{width:100%;height:auto;max-height:none;object-fit:fill}
.abzug-s.fit figcaption{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.zwei .s-in{justify-content:center;gap:2.2em}
.zwei .abzug-s{width:100%}
.zitat .s-in{justify-content:space-between}
.zitat blockquote{margin:1.2em 0 0;font:300 italic 2.15em/1.15 var(--serif);letter-spacing:-.015em}
.zitat blockquote::before{content:"„";display:block;font-size:2.4em;line-height:.6;color:var(--orange);margin-bottom:.15em}
.zitat .abzug-s{width:100%}
/* Doppelseite: ein Bild über beide Seiten */
.doppelseite .s-in{padding:0}
/* Bildformat 14.10.2026: das ganze Querbild über den Bund, auf Papier mit Rand (kein Zuschnitt). Beide Hälften zeigen dasselbe,
   doppelt breite Bild – links die linke, rechts die rechte Hälfte; object-fit:contain hält das Originalformat. */
.doppel{position:absolute;top:2.6em;bottom:3.8em;overflow:hidden;background:none;container-type:size}
.doppel.links{left:2.6em;right:0}.doppel.rechts{left:0;right:2.6em}
.doppel img{position:absolute;top:0;height:100%;width:200%;max-width:none;object-fit:contain;object-position:50% 50%}
.doppel.links img{left:0}.doppel.rechts img{left:-100%}
.doppel figcaption{position:absolute;margin:0;z-index:2;color:var(--mute);white-space:nowrap;
  right:calc((200cqw - min(200cqw, 100cqh * var(--ar))) / 2);top:calc(50% + min(100cqh, 200cqw / var(--ar)) / 2 + .55em)}
.doppel.rechts{overflow:visible}.doppel.rechts img{clip-path:inset(0 0 0 50%)}
/* v8: Bund bleibt auch auf Doppelseiten sichtbar (Marius) */
/* Kontakt + Rückseite */
.kontakt .s-in{justify-content:center}
.knoepfe{display:flex;flex-wrap:wrap;gap:.6em;margin-top:2em}
.knopf{display:inline-flex;align-items:center;gap:.6em;font:600 .72em var(--sans);border:1px solid var(--ink);color:var(--ink);padding:1em 1.4em;border-radius:99px;text-decoration:none;white-space:nowrap}
.knopf.voll{background:var(--orange);border-color:var(--orange);color:#111}
.adresse{margin-top:2.4em;font:400 .82em/1.7 var(--sans);color:var(--ink2)}
.leer .s-in{justify-content:center;align-items:center}
.leer-zeile{font:300 italic 1.1em var(--serif);color:var(--mute)}
.rueck{background:var(--paper2)}
.rueck .s-in{align-items:center;justify-content:center;text-align:center}
.r-logo{width:34%;height:auto}
.r-zeile{font:300 2.3em/1.05 var(--serif);margin-top:1.2em}
.r-adr{font:500 .66em/1.9 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);margin-top:2em}
.r-link{margin-top:1.8em;font:600 .72em var(--sans);color:var(--orange-t)}
/* Zuklappen: Nachbarseite des Umschlags ausblenden (sonst blitzt sie durch) */
.seite.stf__item{transition:opacity .22s ease}
/* Zuklapp-Regel entfernt (traf die umblätternde Seite) */
.handy .seite .s-in{overflow-y:auto}

/* ===================== v8 Magazin: Kopf mit Pfad, Reiter, Titel, Inhalt, Bund ===================== */
.hk{gap:18px}
.hk-pfad{display:flex;align-items:center;gap:.6em;font:500 12px var(--sans);letter-spacing:.06em;color:var(--mute);background:rgba(246,243,238,.75);border:1px solid var(--line);border-radius:99px;padding:8px 16px;white-space:nowrap;overflow:hidden;max-width:46vw}
.hk-pfad a{color:var(--ink2);text-decoration:none}.hk-pfad a:hover{color:var(--ink)}
.hk-pfad i{font-style:normal;opacity:.4}
.hk-pfad span{color:var(--ink2)}
.hk-pfad b{color:var(--orange-t);font-weight:600;overflow:hidden;text-overflow:ellipsis}
.hk-r{display:flex;gap:8px}
.hk-link.voll{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.leiste{display:flex;justify-content:center;gap:2.4em}
.hinweis-blaettern{opacity:.7}

/* Reiter am rechten Buchrand – gestanzte Papierlaschen, aktive in Orange */
.laschen{position:absolute;top:50%;transform:translate(var(--schubL,0px),-50%);display:flex;flex-direction:column;gap:3px;z-index:5;height:var(--lh,auto)}
.laschen button{flex:1 1 auto;min-height:0}
.bereit .laschen{transition:transform .9s cubic-bezier(.45,.05,.25,1)}
.laschen button{position:relative;writing-mode:vertical-rl;font:600 10px var(--sans);letter-spacing:.08em;text-transform:uppercase;
  background:linear-gradient(90deg,#e4ddd2 0%,#efe9df 65%,#ebe4d9 100%);color:var(--ink2);padding:11px 8px 11px 10px;max-height:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  border-radius:0 8px 8px 0;border:1px solid rgba(20,20,20,.1);border-left:0;box-shadow:1px 1px 3px rgba(40,30,20,.14);transition:transform .25s,background .25s,color .25s}
.laschen button:hover{color:var(--ink);transform:translateX(3px)}
.laschen button[aria-current=true]{background:var(--orange);color:#111;transform:translateX(7px);box-shadow:2px 2px 7px rgba(176,95,0,.35)}

/* Titel: Magazin-Cover mit Masthead */
.titel .t-bild::after{background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.05) 26%,rgba(0,0,0,0) 48%,rgba(0,0,0,.78) 100%)}
.t-kopf{position:absolute;top:1.4em;left:2em;right:2em;z-index:2;color:#fff}
.t-mast{font:600 5.6em/.82 var(--serif);letter-spacing:-.045em;margin:0;text-transform:uppercase}
.t-zeile{display:flex;justify-content:space-between;font:500 .64em var(--sans);letter-spacing:.18em;text-transform:uppercase;border-top:1px solid rgba(255,255,255,.7);margin-top:.9em;padding-top:.8em}
.t-unten{z-index:2;left:2em;right:2em;bottom:2em;color:#fff}
.t-unten h1{font-size:4.2em;line-height:.95}
.t-unten h1 em{color:var(--orange)}
.t-lines{list-style:none;margin:1.1em 0 0;padding:.9em 0 0;border-top:1px solid rgba(255,255,255,.5);display:flex;flex-wrap:wrap;gap:.35em 1.1em;font:500 .7em var(--sans);letter-spacing:.08em;text-transform:uppercase}
.t-lines li::before{content:"● ";color:var(--orange);font-size:.7em;vertical-align:.15em}

/* Inhaltsverzeichnis */
.inhalt h2{font-size:4.2em}
.ihv{list-style:none;margin:1.4em 0 0;padding:0;border-top:1px solid var(--ink)}
.ihv button{width:100%;display:flex;align-items:baseline;gap:.8em;padding:.62em 0;border-bottom:1px solid var(--line);font:300 1.32em var(--serif);text-align:left;transition:.2s}
.ihv button i{font:600 .5em var(--sans);font-style:normal;color:var(--orange-t);letter-spacing:.1em;width:2em}
.ihv button b{flex:1;border-bottom:1px dotted var(--mute);transform:translateY(-.25em);margin-left:.4em}
.ihv button:hover{padding-left:.4em}.ihv button:hover span{color:var(--orange-t)}
.editorial{margin-top:auto}
.inhalt .editorial{font:300 italic 1.02em/1.5 var(--serif);color:var(--ink2);border-top:1px solid var(--line);padding-top:1.2em}

/* Kapitel-Auftakt */
.kapitel-auf h2{font-size:3.4em}
.kapitel-auf .text.eins,.text.eins{columns:1}
.kapitel-auf .knoepfe{margin-top:auto}
.kapitel-auf .kicker{color:var(--orange-t)}
.zahlen{display:grid;grid-template-columns:repeat(3,1fr);gap:1em;margin-top:auto;border-top:1px solid var(--ink);padding-top:1em}
.zahlen b{display:block;font:300 2.4em/1 var(--serif)}
.zahlen span{font:500 .6em/1.35 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.preise{display:grid;grid-template-columns:1fr 1fr;gap:1.2em;margin-top:auto;border-top:1px solid var(--ink);padding-top:1em}
.preise b{display:block;font:300 2em/1.1 var(--serif);color:var(--orange-t)}
.preise small{display:block;font:500 .62em/1.4 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.preis-gross{margin-top:auto;display:flex;align-items:baseline;gap:.8em;border-top:1px solid var(--ink);padding-top:1em}
.preis-gross b{font:300 3.4em/1 var(--serif);color:var(--orange-t)}
.preis-gross span{font:500 .66em var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.schritte{list-style:none;margin:1.6em 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:1.2em 1.4em}
.schritte li{border-top:1px solid var(--ink);padding-top:.7em}
.schritte b{font:600 .62em var(--sans);color:var(--orange-t);letter-spacing:.12em}
.schritte h4{font:400 1.2em var(--serif);margin:.2em 0}
.schritte p{font-size:.8em;line-height:1.45;color:var(--ink2)}
.zeiten{display:grid;grid-template-columns:1fr 1fr;gap:1em;margin:auto 0 0;border-top:1px solid var(--line);padding-top:1em}
.zeiten dt{font:500 .6em var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:.4em}
.zeiten dd{margin:0;font:400 .9em/1.5 var(--sans)}
.weiter{list-style:none;margin:1.6em 0 0;padding:0;border-top:1px solid var(--ink)}
.weiter a{display:block;padding:1em 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
.weiter b{display:block;font:300 1.7em/1.1 var(--serif)}.weiter b em{color:var(--orange-t)}
.weiter small{font:500 .62em var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.weiter a:hover b{color:var(--orange-t)}
.nur-text .s-in{justify-content:center}
.zitat-von{margin-top:1.4em;font:500 .66em var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.bild-hoch .s-in{justify-content:center;align-items:center}
.portrait-gross{width:auto;height:84%;display:flex}
.portrait-gross img{height:100%;width:auto;object-fit:contain}
.unterzeile{margin-top:1em;font:300 italic 1em var(--serif);color:var(--ink2)}
.editorial .abzug-s.unten{margin-top:auto;width:100%}
.editorial .abzug-s.unten{width:auto;max-width:100%;align-self:flex-start}   /* Bildformat 14.10.2026: Abzug so breit wie das Foto */
.editorial .abzug-s.unten img{width:auto;height:auto;max-width:100%;max-height:15em}
.vignette{width:5.4em;height:auto;opacity:.85;margin-bottom:1.2em;filter:grayscale(.2)}
.leer .s-in{text-align:center}
.leer-zeile{max-width:20em}

/* Platzhalter (Inhalt kommt von Marius) */
.platzhalter{margin-top:1.6em;border:1.5px dashed rgba(176,95,0,.55);background:repeating-linear-gradient(135deg,rgba(255,148,0,.05) 0 12px,rgba(255,148,0,0) 12px 24px);padding:1.2em 1.3em;border-radius:4px}
.platzhalter span{font:600 .6em var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--orange-t)}
.platzhalter p{font:400 .86em/1.45 var(--sans);color:var(--ink2);margin-top:.4em}
.platzhalter-seite .s-in{justify-content:center}
.platzhalter-seite .platzhalter{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;margin:0}

/* Bund (Mittelbug) – auch über Doppelseiten-Bildern */
.seite::after{z-index:4}
/* Bildformat 14.10.2026: Doppelseite auf Papier – Bund wie auf den übrigen Seiten, über dem Bild etwas kräftiger */
.stf__item.--left.doppelseite::after{background:linear-gradient(90deg,rgba(0,0,0,0) 86%,rgba(40,30,20,.06) 93%,rgba(40,30,20,.24) 100%)}
.stf__item.--right.doppelseite::after{background:linear-gradient(270deg,rgba(0,0,0,0) 88%,rgba(40,30,20,.07) 94%,rgba(40,30,20,.25) 100%)}
.doppelseite{background:var(--paper)}

/* Buch-Haptik: Papierstapel an den Kanten (wie Kosmetik-Wagram-Heft) */
#buch{position:relative}
#buch::before,#buch::after{content:"";position:absolute;top:3px;bottom:3px;z-index:0;pointer-events:none;transition:width .6s cubic-bezier(.45,.05,.25,1),opacity .4s;
  background:repeating-linear-gradient(90deg,#f6f2ec 0 1px,#d8d0c4 1px 2px,#efe9e1 2px 3px)}
#buch::before{left:calc(var(--dl,0px) * -1);width:var(--dl,0px);border-radius:3px 0 0 3px}
#buch::after{right:calc(var(--dr,0px) * -1);width:var(--dr,0px);border-radius:0 3px 3px 0}
#buch.zu-vorne::before{opacity:0}#buch.zu-vorne::after{right:auto;left:100%}#buch.zu-hinten::after{opacity:0}

/* Handy: eine Seite, Reiter als Leiste unten, Doppelseite als ganzes Bild */
@media (max-width:760px){
  :root{--logo:52px;--logo-x:12px;--hk-pad:12px}
  .hk-logo{top:3px}
  .hk-marke{padding-left:var(--logo)}
  .hk{padding:10px 12px;gap:8px}.hk-marke b{display:none}.hk-pfad{max-width:none;flex:1;font-size:11px;padding:7px 12px}
  .hk-r .hk-link:not(.voll){display:none}.hk-link{font-size:12px;padding:8px 12px}
  .tisch{grid-template-columns:1fr;padding:58px 8px 58px}
  .pfeil{display:none}
  .laschen{position:fixed;top:auto;bottom:0;left:0;right:0;transform:none!important;flex-direction:row;gap:0;overflow-x:auto;background:var(--paper);border-top:1px solid var(--line);padding:0 6px;scrollbar-width:none;z-index:30}
  .laschen::-webkit-scrollbar{display:none}
  .laschen button{flex:none;writing-mode:horizontal-tb;border:0;border-radius:0;box-shadow:none;background:none;padding:15px 11px;white-space:nowrap;font-size:10.5px;max-height:none;transform:none!important}
  .laschen button[aria-current=true]{background:none;color:var(--orange-t);box-shadow:inset 0 -3px 0 var(--orange)}
  .leiste{display:none}
  .t-mast{font-size:4.6em}
  .text{columns:1}
}
.handy .doppel.ganz{left:1.4em;right:1.4em;top:2.4em;bottom:3.6em}
.handy .doppel.ganz img{width:100%;left:0}
.handy .seite .s-in{overflow-y:auto}

/* ===== Unterseiten sichtbar: Kontaktstreifen des Kapitels unten + Hinweis am Weiter-Pfeil ===== */
.tisch{padding-bottom:86px}
.kapnav{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:15;display:flex;align-items:center;gap:14px;
  background:rgba(246,243,238,.88);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:99px;padding:7px 18px 7px 20px;box-shadow:0 8px 24px rgba(40,30,20,.12);transition:opacity .4s,transform .4s}
.kn-aus .kapnav{opacity:0;pointer-events:none;transform:translate(-50%,10px)}
.kn-titel{font:600 11px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--orange-t);white-space:nowrap}
.kn-strip{display:flex;gap:6px}
.kn-strip button{display:flex;gap:1px;padding:3px;border-radius:4px;border:1.5px solid transparent;transition:.2s;opacity:.65}
.kn-strip button:hover{opacity:1;transform:translateY(-2px)}
.kn-strip button[aria-current=true]{border-color:var(--orange);opacity:1}
.kn-strip i{display:block;width:24px;height:32px;background:#e7e1d7 center/contain no-repeat;box-shadow:0 1px 2px rgba(0,0,0,.18)}   /* Bildformat: Vorschau unbeschnitten */
.kn-strip i:not([style*=url]){background-image:repeating-linear-gradient(180deg,#e7e1d7 0 5px,#d6cfc3 5px 6px)}
.kn-zahl{font:500 11px var(--sans);letter-spacing:.1em;color:var(--mute);white-space:nowrap}
/* Weiter-Pfeil sagt, was kommt */
.pfeil{position:relative}
.pfeil.vor::after{content:attr(data-tipp);position:absolute;top:calc(100% + 10px);right:0;width:96px;text-align:right;white-space:normal;line-height:1.35;
  font:600 10.5px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.pfeil.vor.mehr{border-color:var(--orange);color:var(--orange-t);animation:stups 2.6s ease-in-out infinite}
.pfeil.vor.mehr::after{color:var(--orange-t)}
@keyframes stups{0%,70%,100%{transform:none}80%{transform:translateX(5px)}90%{transform:translateX(-2px)}}
@media (prefers-reduced-motion:reduce){.pfeil.vor.mehr{animation:none}}
@media (max-width:760px){
  .tisch{padding-bottom:104px}
  .kapnav{bottom:52px;padding:5px 12px;gap:10px;max-width:calc(100vw - 20px)}
  .kn-strip{gap:4px;overflow-x:auto;scrollbar-width:none}
  .kn-strip i{width:16px;height:22px}
  .kn-titel{max-width:30vw;overflow:hidden;text-overflow:ellipsis}
}

/* Rasterseiten: mehrere Bilder auf einer Seite */
.rasterseite .s-in{padding-top:3em;padding-bottom:4.2em}
/* Bildformat 14.10.2026: Zeilen mit gleicher Höhe und variabler Breite – jedes Foto im Originalformat (--r = 10 × Breite/Höhe, als flex-grow).
   render.php wählt die Zeilenaufteilung und liefert --f/--b, damit das ganze Raster in die Seite passt (Breite aus der Höhe). */
.raster-box{flex:1;min-height:0;container-type:size;display:flex;align-items:center;justify-content:center}
.raster{display:flex;flex-direction:column;gap:.9em;flex:none;width:min(100cqw,calc((100cqh + var(--b,0em)) * var(--f,1)))}
.reihe{display:flex;gap:.9em;align-items:flex-start}
.zelle{flex:var(--r) 0 .9em;min-width:0;background:var(--matt);padding:.45em;box-shadow:0 1px 2px rgba(0,0,0,.06),0 .9em 1.6em -1.1em rgba(0,0,0,.45)}
.zelle img{width:100%;height:auto}
.raster-cap{font:400 .7em/1.4 var(--sans);letter-spacing:.04em;color:var(--mute);margin-top:.8em}

/* Titel-Slideshow (gleiche Motive wie im Regal) */
.t-bild .c-bild{position:absolute;inset:0;opacity:0;transition:opacity 1.4s ease}
.t-bild .c-bild.aktiv{opacity:1}
/* Bildformat 14.10.2026: kein Zoom mehr (hätte die Ränder beschnitten) – nur Überblenden */
/* Querformat auf dem Umschlag: Abzug zwischen Kopf und Titel, Ränder wie der Satzspiegel */
.t-bild .c-bild.quer{inset:9em 2em 10.6em}
.t-bild .c-bild.quer img{object-position:50% 50%;filter:drop-shadow(0 .4em 1em rgba(0,0,0,.6))}
.handy .t-bild .c-bild.quer{inset:8.2em 1.6em 15.5em}
.t-bild::after{z-index:1}

/* Umschlag wie im Regal: Rücken links mit Schatten + Lichtkante → wirkt gerundet; Rückseite gespiegelt */
.seite.titel::after,.stf__item.titel::after{z-index:6;background:
  linear-gradient(90deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.28) 1.6%,rgba(255,255,255,.26) 3.2%,rgba(255,255,255,.08) 4.8%,rgba(0,0,0,.06) 6.5%,rgba(0,0,0,0) 8%),
  linear-gradient(90deg,rgba(0,0,0,0) 94%,rgba(0,0,0,.12) 100%)!important}
.seite.rueck::after,.stf__item.rueck::after{z-index:6;background:
  linear-gradient(270deg,rgba(0,0,0,.32) 0%,rgba(0,0,0,.1) 1.2%,rgba(255,255,255,.35) 2.4%,rgba(255,255,255,.08) 3.6%,rgba(0,0,0,0) 5.5%)!important}
.titel{border-radius:2px 4px 4px 2px}
/* Logo 14.10.2026: schmale Fenster */
.hk-link{white-space:nowrap}
@media (min-width:761px) and (max-width:1100px){.hk-marke small{display:none}.hk-marke b{white-space:nowrap}}
@media (max-width:380px){:root{--logo:46px}}