/*
Theme Name: Licht und Wort
Description: Christliche Seite in Weinrot und Gold mit Sonne, Rollo-Flächen, Rollo-Seitenübergang, aufklappbaren Rollos, Vers des Tages, Beiträge-Raster, Buch-Effekten, Kontaktformular und Kacheln. Arbeitet mit dem Plugin „Licht und Wort Inhalte“ zusammen.
Author: Frank Kührig
Version: 1.1.1
Requires at least: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: licht-und-wort
*/

/* Layout: Nachtseite in Weinrot mit Sternenhimmel und Sonnenaufgang auf der Startseite, helle Pergamentflächen für Textblöcke, sieben Seiten, die wie Rollos wechseln. Bewusst nur ein Look (dunkel). */
:root{
  --deep:#2d0a14;
  --night:#4d1322;
  --night-2:#5e1a2b;
  --gold:#c9a24d;
  --gold-soft:#f0d98f;
  --ivory:#f3e6c8;
  --muted:#d6c6a2;
  --paper:#f1e4c3;
  --ink:#3a1018;
  --ink-muted:#6e4a50;
  --gold-ink:#8a6420;
  --line:rgba(243,230,200,.16);
  --font-display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --font-body:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;font-size:100%}
html.big{font-size:120%}
body{background:var(--deep);color:var(--ivory);font-family:var(--font-body);font-size:1.0625rem;line-height:1.65;overflow-x:hidden}
h1,h2,h3{font-family:var(--font-display);font-weight:500;line-height:1.08;margin:0;text-wrap:balance}
p{margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold-soft);outline-offset:3px}
.wrap{width:100%;max-width:1120px;margin-inline:auto;padding-inline:20px}
.eyebrow{font-size:.75rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-soft)}
.page[hidden]{display:none}

.progress{position:fixed;left:0;top:0;height:2px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:var(--gold);z-index:70}

/* Kopfleiste */
.bar{position:fixed;left:0;right:0;top:0;z-index:50;padding:calc(14px + env(safe-area-inset-top,0px)) 20px 14px;display:flex;align-items:center;justify-content:space-between;gap:12px;transition:transform .5s cubic-bezier(.2,.8,.2,1),background .4s,box-shadow .4s}
.bar.solid{background:rgba(45,10,20,.92);backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--line)}
.bar.hide{transform:translateY(-110%)}
.brand{font-family:var(--font-display);font-size:1.6rem;font-weight:600;text-decoration:none;white-space:nowrap}
.brand i{color:var(--gold-soft)}
.links{display:flex;align-items:center;gap:2px}
.links a{font-size:.84rem;letter-spacing:.06em;text-decoration:none;padding:8px 12px;position:relative;white-space:nowrap}
.links a::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:1px;background:var(--gold-soft);transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.links a:hover::after,.links a:focus-visible::after,.links a[aria-current="page"]::after{transform:scaleX(1)}
.links a[aria-current="page"]{color:var(--gold-soft)}
.tools-r{display:flex;align-items:center;gap:8px}
.pill{all:unset;cursor:pointer;border:1px solid var(--line);border-radius:99px;padding:6px 14px;font-size:.8rem;letter-spacing:.06em;transition:border-color .3s,background .3s}
.pill:hover,.pill:focus-visible{border-color:var(--gold-soft);background:rgba(240,217,143,.1)}
.menu{display:none}
@media(max-width:1020px){
  .menu{display:inline-block}
  .links{position:fixed;inset:0;z-index:-1;flex-direction:column;justify-content:center;gap:6px;background:rgba(45,10,20,.98);display:none}
  .links.open{display:flex}
  .links a{font-family:var(--font-display);font-size:2rem;letter-spacing:0;padding:8px 20px}
}

/* Kopf Startseite */
.hero{position:relative;overflow:hidden;min-height:760px;display:flex;align-items:flex-start;background:linear-gradient(180deg,#1f0610 0%,#4d1322 45%,#a45a45 70%,#2d0a14 100%)}
.hero::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(ellipse 62% 48% at 50% 36%,rgba(35,6,16,.62),rgba(35,6,16,.25) 55%,transparent 78%)}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero .wrap{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px;padding-top:92px;will-change:transform}
.hero h1{font-size:clamp(2.5rem,6.2vw,4.4rem);max-width:12ch;text-shadow:0 2px 24px rgba(30,5,12,.45)}
.ln{display:block;overflow:hidden;padding-bottom:.08em}
.ln>span{display:block}
.ln em{color:var(--gold-soft)}
@keyframes rise{from{transform:translateY(105%)}to{transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes sway{0%,100%{transform:translateX(-50%) rotate(-.35deg)}50%{transform:translateX(-50%) rotate(.35deg)}}
.hcross{position:relative;width:26px;height:44px;animation:fade 1.6s .1s both}
.hcross::before,.hcross::after{content:"";position:absolute;background:#f6e3a6}
.hcross::before{left:11.5px;top:0;bottom:0;width:3px}
.hcross::after{left:0;right:0;top:13px;height:3px}
.hero .eyebrow{animation:fade 1.2s .4s both;font-size:.95rem;font-weight:600;color:#f6e3a6;text-shadow:0 1px 16px rgba(30,5,12,.9)}
.orn{width:min(300px,70%);height:20px;animation:fade 1.4s .7s both}
.lead{max-width:44ch;font-size:1.2rem;color:rgba(243,230,200,.9);text-shadow:0 1px 18px rgba(30,5,12,.95),0 0 3px rgba(30,5,12,.6);animation:fade 1.4s .8s both}
.cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;animation:fade 1.4s .95s both}
.hero .btn.gold{background:#3a0e1b;color:#f6e3a6;border-color:rgba(240,217,143,.6);box-shadow:0 10px 30px rgba(30,5,12,.45)}
.hero .btn.gold::before{background:#5a1a2b}
.hero .btn.line{background:#3a0e1b;color:#f6e3a6;border-color:rgba(240,217,143,.6);box-shadow:0 10px 30px rgba(30,5,12,.45)}
.hero .btn.line::before{background:#5a1a2b}
.btn{--x:0px;--y:0px;position:relative;display:inline-flex;align-items:center;gap:10px;padding:15px 28px;border-radius:99px;font:600 .95rem var(--font-body);letter-spacing:.04em;text-decoration:none;border:1px solid transparent;cursor:pointer;overflow:hidden;isolation:isolate;transform:translate(var(--x),var(--y));transition:transform .3s ease-out,color .4s}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;transform:translateY(102%);transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.btn:hover::before,.btn:focus-visible::before{transform:none}
.btn .arr{transition:transform .4s}
.btn:hover .arr{transform:translateX(5px)}
.btn.gold{background:var(--gold-soft);color:#2d0a14}
.btn.gold::before{background:#fff}
.btn.line{color:var(--ivory);border-color:rgba(243,230,200,.42);background:rgba(45,10,20,.55)}
.btn.line::before{background:rgba(201,162,77,.28)}
.btn.ink{background:var(--ink);color:var(--ivory)}
.btn.ink::before{background:var(--gold)}
.btn.ink:hover{color:#2d0a14}
.btn.inkline{color:var(--ink);border-color:rgba(58,16,24,.4)}
.btn.inkline::before{background:rgba(58,16,24,.1)}
/* Jalousie beim Scrollen und beim Seitenwechsel */
.paper,.band{position:relative}
.hem{position:absolute;left:0;right:0;top:0;height:14px;transform:translateY(-100%);background:linear-gradient(180deg,#d9b460,#8a6420);box-shadow:0 8px 22px rgba(0,0,0,.45);z-index:5;pointer-events:none;opacity:0}
.shutter{position:fixed;left:0;right:0;top:0;height:100%;z-index:90;pointer-events:none;transform:translateY(calc(-100% - 24px));transition:transform .72s cubic-bezier(.65,0,.25,1)}
.shutter.closed{transform:none;pointer-events:auto}
.shutter .cloth{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(ellipse 55% 38% at 50% 64%,rgba(240,217,143,.30),transparent 72%),repeating-linear-gradient(180deg,rgba(255,255,255,.035) 0 2px,transparent 2px 10px),linear-gradient(180deg,#2d0a14,#4d1322 62%,#5e1a2b)}
.shutter .mark{display:grid;gap:18px;justify-items:center}
.shutter .mark .x{position:relative;width:26px;height:44px}
.shutter .mark .x::before,.shutter .mark .x::after{content:"";position:absolute;background:var(--gold-soft)}
.shutter .mark .x::before{left:11.5px;top:0;bottom:0;width:3px}
.shutter .mark .x::after{left:0;right:0;top:13px;height:3px}
.shutter .mark b{font-family:var(--font-display);font-weight:600;font-size:2.1rem;color:var(--ivory)}
.shutter .mark i{color:var(--gold-soft)}
.shutter .hem2{position:absolute;left:0;right:0;bottom:-16px;height:16px;background:linear-gradient(180deg,#d9b460,#8a6420);box-shadow:0 12px 28px rgba(0,0,0,.55)}

.essay{display:grid;gap:18px;max-width:68ch;margin-inline:auto}
.essay h2{font-size:clamp(1.6rem,3vw,2.1rem);margin-top:22px;color:var(--ink)}
.essay p,.essay li{color:var(--ink);font-size:1.08rem;line-height:1.7}
.essay ul{margin:0;padding-left:1.3rem;display:grid;gap:12px}
.essay .pull{margin:6px 0;font-size:1.35rem}
.essay .pull cite{display:block;margin-top:8px;font-style:normal;font-family:var(--font-body);font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-ink)}
.kv{margin:0;display:grid;gap:0;border-top:1px solid rgba(58,16,24,.22)}
.kv>div{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,2fr);gap:18px;padding:16px 0;border-bottom:1px solid rgba(58,16,24,.22)}
.kv dt{font-family:var(--font-display);font-size:1.3rem;color:var(--gold-ink)}
.kv dd{margin:0;color:var(--ink);line-height:1.6}
@media(max-width:640px){.kv>div{grid-template-columns:minmax(0,1fr);gap:4px}}

/* Kopf Unterseiten */
.phead{position:relative;overflow:hidden;padding:150px 0 90px;background:linear-gradient(180deg,#2d0a14,#4d1322 70%,#5e1a2b)}
.phead .rays-wrap{bottom:-120%}
.phead .wrap{position:relative;z-index:2;display:grid;gap:18px;max-width:900px;margin-inline:auto}
.phead h1{font-size:clamp(2.3rem,5vw,3.6rem)}
.phead p{max-width:52ch;color:rgba(243,230,200,.84);font-size:1.15rem}
.phead .verse-line{font-family:var(--font-display);font-style:italic;font-size:clamp(1.3rem,3vw,1.8rem);color:var(--gold-soft);max-width:40ch}

section{padding-block:52px}
.head{display:grid;gap:14px;max-width:660px;margin-bottom:44px}
.head h2{font-size:clamp(1.8rem,3.8vw,2.6rem)}
.head p{color:var(--muted)}
.reveal{opacity:0;transform:translateY(26px);transition:transform 1.1s cubic-bezier(.2,.8,.2,1),opacity 1.1s ease}
.reveal.in{opacity:1;transform:none}

/* Vers des Tages */
.verse-sec{padding-block:44px 0;margin-top:0;position:relative;z-index:6}
.vcard{--mx:50%;--my:0%;position:relative;overflow:hidden;background:linear-gradient(180deg,#5a1a2b,#3a0e1b);border:1px solid var(--line);border-radius:6px;padding:clamp(28px,4.5vw,52px);text-align:center;display:grid;gap:20px;box-shadow:0 40px 80px -40px rgba(0,0,0,.7)}
.vcard::before{content:"";position:absolute;inset:0;background:radial-gradient(520px circle at var(--mx) var(--my),rgba(240,217,143,.13),transparent 60%);pointer-events:none}
.vcard>*{position:relative}
.vq{font-family:var(--font-display);font-style:italic;font-size:clamp(1.4rem,3.2vw,2.1rem);line-height:1.3;text-wrap:balance;transition:opacity .4s,transform .4s;max-width:28ch;margin:0 auto}
.vq.swap{opacity:0;transform:translateY(12px)}
.vref{color:var(--gold-soft);letter-spacing:.14em;font-size:.85rem;text-transform:uppercase;transition:opacity .4s}
.vref.swap{opacity:0}
.vbtns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* Pergament */
.paper{background:radial-gradient(900px 520px at 78% 18%,rgba(201,162,77,.26),transparent 70%),radial-gradient(760px 520px at 8% 85%,rgba(138,100,32,.16),transparent 70%),var(--paper);background-size:100% 150%,100% 150%,auto;background-repeat:no-repeat;color:var(--ink)}
.paper .eyebrow{color:var(--gold-ink)}
.paper .head p{color:var(--ink-muted)}
.rollo{border-top:1px solid rgba(58,16,24,.22)}
.item{border-bottom:1px solid rgba(58,16,24,.22)}
.rb{all:unset;box-sizing:border-box;width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:28px 4px;cursor:pointer}
.rb:focus-visible{outline:2px solid var(--gold-ink);outline-offset:-2px}
.rb .t{display:flex;align-items:baseline;gap:18px;min-width:0}
.rb .n{font-family:var(--font-display);font-size:1.5rem;color:var(--gold-ink);flex:none;width:1.6rem}
.rb h3{font-size:clamp(1.5rem,3.4vw,2.3rem);transition:transform .5s cubic-bezier(.2,.8,.2,1),color .4s}
.rb:hover h3{transform:translateX(10px);color:var(--gold-ink)}
.plus{flex:none;width:40px;height:40px;border:1px solid rgba(58,16,24,.32);border-radius:50%;position:relative;transition:transform .55s cubic-bezier(.2,.8,.2,1),background .4s,border-color .4s}
.plus::before,.plus::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:1.5px;margin:-.75px 0 0 -7px;background:var(--ink);transition:transform .55s cubic-bezier(.2,.8,.2,1),background .3s}
.plus::after{transform:rotate(90deg)}
.item.open .plus{background:var(--ink);border-color:var(--ink);transform:rotate(180deg)}
.item.open .plus::before,.item.open .plus::after{background:var(--paper)}
.item.open .plus::after{transform:rotate(0)}
.rbody{display:grid;grid-template-rows:0fr;transition:grid-template-rows .7s cubic-bezier(.2,.8,.2,1)}
.item.open .rbody{grid-template-rows:1fr}
.rin{overflow:hidden;min-height:0}
.rin>div{padding:0 4px 32px 4px;max-width:64ch;color:var(--ink-muted);display:grid;gap:14px;clip-path:inset(0 0 100% 0);transition:clip-path .8s cubic-bezier(.2,.8,.2,1) .05s}
.item.open .rin>div{clip-path:inset(0 0 0 0)}
.rin a{color:var(--ink);font-weight:600;text-underline-offset:4px;text-decoration-color:var(--gold-ink)}
.rin .ref{font-style:italic;color:var(--gold-ink)}
.paper.indent .rin>div{padding-left:calc(1.6rem + 22px)}

/* Zitatband */
.band{position:relative;overflow:hidden;padding-block:78px;text-align:center;background:radial-gradient(800px 420px at 50% 40%,rgba(201,162,77,.2),transparent 70%),linear-gradient(180deg,#2d0a14,#5a1a2b);background-size:100% 160%,auto;background-repeat:no-repeat}
.band .wrap{position:relative;z-index:2;display:grid;gap:24px;justify-items:center}
.band blockquote{margin:0;font-family:var(--font-display);font-style:italic;font-size:clamp(1.5rem,3.4vw,2.4rem);line-height:1.25;max-width:26ch;text-wrap:balance}
.band cite{font-style:normal;color:var(--gold-soft);font-size:.85rem;letter-spacing:.2em;text-transform:uppercase}

/* Bibelwort-Karten */
.vgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:20px}
.vitem{--mx:50%;--my:50%;position:relative;overflow:hidden;border:1px solid var(--line);border-radius:6px;padding:30px;display:grid;gap:16px;align-content:start;background:rgba(255,255,255,.04);transition:transform .55s cubic-bezier(.2,.8,.2,1),border-color .4s}
.vitem::before{content:"";position:absolute;inset:0;background:radial-gradient(260px circle at var(--mx) var(--my),rgba(240,217,143,.16),transparent 65%);opacity:0;transition:opacity .4s;pointer-events:none}
.vitem:hover{transform:translateY(-8px);border-color:rgba(240,217,143,.7)}
.vitem:hover::before{opacity:1}
.vitem>*{position:relative}
.vitem blockquote{margin:0;font-family:var(--font-display);font-style:italic;font-size:1.5rem;line-height:1.3}
.vitem cite{font-style:normal;color:var(--gold-soft);font-size:.8rem;letter-spacing:.18em;text-transform:uppercase}

/* Zwei Spalten */
.cols{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:start}
@media(max-width:860px){.cols{grid-template-columns:minmax(0,1fr);gap:40px}}
.prose{display:grid;gap:18px;max-width:58ch}
.prose.paperp{color:var(--ink-muted)}
.prose h3{font-size:1.9rem;color:var(--ink)}
.pull{border-left:2px solid var(--gold);padding:4px 0 4px 22px;font-family:var(--font-display);font-style:italic;font-size:1.55rem;line-height:1.3;color:var(--ivory)}
.pull.ink{color:var(--ink);border-left-color:var(--gold-ink)}
.stack{display:grid;gap:26px}
.step-box{margin-top:30px;border:1px solid var(--line);border-radius:6px;padding:clamp(26px,4vw,44px);background:linear-gradient(180deg,#5a1a2b,#3a0e1b);display:grid;gap:18px}
.step-box[hidden]{display:none}
.step-box ol{margin:0;padding-left:1.2rem;display:grid;gap:10px;color:var(--muted)}
.note{font-size:.9rem;color:var(--muted);border-top:1px solid var(--line);padding-top:14px}
.paper .note{color:var(--ink-muted);border-top-color:rgba(58,16,24,.2)}

/* Karten für Schriften, Adressen, Hörbeispiele */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:18px}
.card{--mx:50%;--my:50%;position:relative;overflow:hidden;display:flex;flex-direction:column;gap:10px;min-height:150px;padding:26px;border:1px solid var(--line);border-radius:6px;background:rgba(255,255,255,.04);text-decoration:none;transition:transform .55s cubic-bezier(.2,.8,.2,1),border-color .4s}
.card::before{content:"";position:absolute;inset:0;background:radial-gradient(260px circle at var(--mx) var(--my),rgba(240,217,143,.16),transparent 65%);opacity:0;transition:opacity .4s;pointer-events:none}
.card:hover,.card:focus-visible{transform:translateY(-6px);border-color:rgba(240,217,143,.7)}
.card:hover::before{opacity:1}
.card>*{position:relative}
.card h3{font-size:1.5rem}
.card .dom{font-size:.8rem;letter-spacing:.08em;color:var(--gold-soft);overflow-wrap:anywhere}
.card .go{margin-top:auto;font-weight:600;color:var(--gold-soft);display:inline-flex;gap:8px}
.card .go span{transition:transform .35s}
.card:hover .go span{transform:translateX(6px)}
.tag{align-self:flex-start;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;border:1px solid var(--line);border-radius:99px;padding:3px 10px;color:var(--muted)}
.paper .card{border-color:rgba(58,16,24,.22);background:rgba(58,16,24,.04)}
.paper .card .tag{border-color:rgba(58,16,24,.25);color:var(--ink-muted)}
.paper .card:hover{border-color:var(--gold-ink)}
.paper .card .dom{color:var(--gold-ink)}

/* Kontakt */
.mail{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.mail code{font:600 1.15rem var(--font-body);padding:12px 18px;border:1px solid var(--line);border-radius:6px;overflow-wrap:anywhere;user-select:all;background:rgba(255,255,255,.04)}

/* Beiträge */
.tools{display:flex;gap:10px;align-items:center;margin-bottom:22px}
.round{all:unset;box-sizing:border-box;width:48px;height:48px;border-radius:50%;border:1px solid rgba(243,230,200,.38);display:grid;place-items:center;cursor:pointer;font-size:1.1rem;transition:background .35s,color .35s,transform .3s}
.round:hover,.round:focus-visible{background:var(--gold-soft);color:#2d0a14;transform:scale(1.07)}
.bar2{flex:1;height:1px;background:var(--line);position:relative;margin-left:14px}
.bar2 i{position:absolute;left:0;top:-1px;height:3px;width:20%;background:var(--gold)}
.track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 20px 28px;margin-inline:-20px;scrollbar-width:none;cursor:grab}
.track::-webkit-scrollbar{display:none}
.track.drag{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.post{--mx:50%;--my:50%;position:relative;flex:0 0 min(340px,84%);scroll-snap-align:start;min-width:0;overflow:hidden;background:rgba(255,255,255,.045);border:1px solid var(--line);border-radius:6px;padding:30px;display:flex;flex-direction:column;gap:14px;transition:transform .55s cubic-bezier(.2,.8,.2,1),border-color .4s;user-select:none}
.post::before{content:"";position:absolute;inset:0;background:radial-gradient(260px circle at var(--mx) var(--my),rgba(240,217,143,.16),transparent 65%);opacity:0;transition:opacity .4s;pointer-events:none}
.post:hover{transform:translateY(-8px);border-color:rgba(240,217,143,.7)}
.post:hover::before{opacity:1}
.post>*{position:relative}
.meta{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-soft)}
.post h3{font-size:1.75rem}
.post p{color:var(--muted);font-size:.98rem}
.post .more{margin-top:auto;font-weight:600;color:var(--gold-soft)}
.how{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:18px;counter-reset:s}
.how div{counter-increment:s;border-top:2px solid var(--gold-ink);padding-top:16px;display:grid;gap:8px}
.how div::before{content:"Schritt " counter(s);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-ink)}
.how h3{font-size:1.5rem}
.how p{color:var(--ink-muted)}

footer{border-top:1px solid var(--line);padding:56px 20px calc(48px + env(safe-area-inset-bottom,0px));text-align:center;color:var(--muted);font-size:.9rem}
footer .brand{display:inline-block;margin-bottom:10px;color:var(--ivory)}
footer p{max-width:62ch;margin:8px auto 0}

.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,30px);opacity:0;background:var(--gold-soft);color:#2d0a14;padding:12px 22px;border-radius:99px;font-weight:600;font-size:.9rem;z-index:80;transition:transform .4s,opacity .4s;pointer-events:none}
.toast.show{transform:translate(-50%,0);opacity:1}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rays,.cue::after{animation:none}
  .ln>span,.cross,.lead,.cta,.hero .eyebrow{animation:none}
  .reveal{transform:none;opacity:1}
  *{transition-duration:.01ms!important}
}

/* ===== Bücher aus der Stille ===== */
.links a.spec{border:1px solid rgba(240,217,143,.65);border-radius:99px;padding:6px 14px;color:var(--gold-soft)}
.links a.spec:hover,.links a.spec[aria-current=page]{background:rgba(201,162,77,.22)}
.bk{display:grid;grid-template-columns:minmax(0,236px) minmax(0,1fr);gap:clamp(24px,4.5vw,56px);align-items:center}
.bk.rev{grid-template-columns:minmax(0,1fr) minmax(0,236px)}
.bk.rev .cov{order:2}
.cov{margin:0;justify-self:center;width:100%;max-width:236px;perspective:900px}
.cov a{--rx:0deg;--ry:0deg;position:relative;display:block;border-radius:3px;overflow:hidden;box-shadow:0 1px 0 rgba(240,217,143,.6),0 18px 40px rgba(30,5,12,.42),0 0 0 1px rgba(201,162,77,.55);transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s;animation:bkfloat 7s ease-in-out infinite}
.cov a::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,244,205,.38) 50%,transparent 65%);transform:translateX(-120%);transition:transform .9s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.cov a:hover::after,.cov a:focus-visible::after{transform:translateX(120%)}
.cov a:hover,.cov a:focus-visible{animation-play-state:paused;box-shadow:0 1px 0 rgba(240,217,143,.9),0 26px 52px rgba(30,5,12,.5),0 0 0 1px rgba(240,217,143,.95)}
.bk.rev .cov a{animation-delay:-3s}
@keyframes bkfloat{0%,100%{translate:0 0}50%{translate:0 -6px}}
.cov img{display:block;width:100%;height:auto}
.bk .no{font-size:.75rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-ink)}
.bk h2{margin:.3em 0 .15em;font-size:clamp(1.9rem,4vw,2.7rem)}
.bk .sub{font-family:var(--font-display);font-style:italic;font-size:1.3rem;color:var(--ink-muted);margin-bottom:.3em}
.bk .au{font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:1em}
.bk .txt{display:grid;gap:.8em;max-width:64ch}
.bk .txt p.lastp{font-family:var(--font-display);font-style:italic;font-size:1.25rem;line-height:1.35;color:var(--ink);border-left:2px solid var(--gold);padding-left:16px}
.bk .act{margin-top:1.3em}
.btn.amz{background:#3a0e1b;color:#f6e3a6;border-color:rgba(138,100,32,.7)}
.btn.amz::before{background:#5a1a2b}
.bk-sec+.bk-sec{border-top:1px solid rgba(138,100,32,.35)}
.tease{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,56px);align-items:center}
.tease .row{display:flex;gap:clamp(10px,2vw,18px);justify-content:center}
.tease .row a{flex:1 1 0;min-width:0;max-width:138px;border-radius:3px;overflow:hidden;box-shadow:0 12px 30px rgba(0,0,0,.45),0 0 0 1px rgba(201,162,77,.5);transition:transform .6s cubic-bezier(.2,.8,.2,1),box-shadow .5s}
.tease .row a:nth-child(2){transform:translateY(-12px)}
.tease .row a:hover{transform:translateY(-14px);box-shadow:0 20px 40px rgba(0,0,0,.5),0 0 0 1px rgba(240,217,143,.9)}
.tease .row img{display:block;width:100%;height:auto}
.tease h2{margin:.3em 0 .4em;font-size:clamp(1.9rem,4vw,2.7rem)}
.tease p{max-width:50ch;opacity:.92}
.tease .act{margin-top:1.3em}
.bintro{max-width:66ch;display:grid;gap:.9em}
@media(max-width:760px){.bk,.bk.rev,.tease{grid-template-columns:1fr}.bk.rev .cov{order:0}.cov{max-width:200px}.tease .row{order:-1}}
@media(prefers-reduced-motion:reduce){.cov a{animation:none}.cov a::after{display:none}.tease .row a,.tease .row a:hover{transform:none}}

a.post{text-decoration:none;color:inherit;-webkit-user-drag:none}
.post .more{transition:transform .35s}.post:hover .more{transform:translateX(6px)}
.phead .refline{font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-soft);opacity:.85}
.essay .pray{border-left:2px solid var(--gold);padding-left:16px;color:var(--ink)}
.essay h2:first-child{margin-top:0}
/* ==========================================================================
   Ergänzungen für WordPress
   Alles oberhalb ist die freigegebene Gestaltung der Vorschau (unverändert).
   Hier folgen nur Regeln, die dafür sorgen, dass Inhalte aus dem WordPress-Editor
   (Gruppen, Zitate, Knöpfe, Listen) GENAUSO aussehen wie in der Vorschau.
   ========================================================================== */

/* Browser-Standardrand um die Seite entfernen (die freigegebene Vorschau lief in einem Rahmen ohne Rand) */
body{margin:0}

/* Ohne JavaScript bleibt alles sichtbar und bedienbar */
html:not(.js) .reveal,html.lw-nojs .reveal{opacity:1;transform:none}
html:not(.js) .shutter,html.lw-nojs .shutter{display:none}
html:not(.js) .rollo details,html.lw-nojs .rollo details{border-bottom:1px solid rgba(58,16,24,.22);padding:22px 4px}
html:not(.js) .rollo summary,html.lw-nojs .rollo summary{font-family:var(--font-display);font-size:clamp(1.5rem,3.4vw,2.3rem);cursor:pointer}
html:not(.js) .rollo details>p,html.lw-nojs .rollo details>p{margin-top:12px;color:var(--ink-muted)}
html.js .lw-hidden{display:none}

/* Abstände, die in der Vorschau direkt am Element standen */
.abstand-oben{margin-top:56px}
.cta.abstand-oben-40{margin-top:40px}
.cta.start{justify-content:flex-start;animation:none}
.tease-sec{padding:clamp(48px,7vw,84px) 0}
.bk-sec{padding:clamp(40px,5.5vw,72px) 0}
.prose h2.gross{font-size:2.4rem}
.step-box .wp-block-buttons{justify-self:start}
.step-box .note a{color:var(--gold-soft)}
.step-box .eyebrow{margin:0}
/* Überschriftszeile (eyebrow) ist im Editor ein Absatz: Farbe wie in der Vorschau */
.head p.eyebrow{color:var(--gold-soft)}
.paper .head p.eyebrow{color:var(--gold-ink)}

/* In der Vorschau ein echter Button (Text mittig), im Editor ein Link */
.lw-yes .wp-block-button__link,.lw-yes.wp-block-button__link{text-align:center}

/* Knöpfe aus dem Editor (Block „Knöpfe“) = Knöpfe der Vorschau */
.wp-block-buttons{margin:0}
.wp-block-button,.wp-block-buttons>.wp-block-button{margin:0;display:flex}
.wp-block-button .wp-block-button__link{--x:0px;--y:0px;position:relative;display:inline-flex;align-items:center;gap:10px;padding:15px 28px;border-radius:99px;font:600 .95rem var(--font-body);letter-spacing:.04em;text-decoration:none;border:1px solid transparent;cursor:pointer;overflow:hidden;isolation:isolate;transform:translate(var(--x),var(--y));transition:transform .3s ease-out,color .4s;box-shadow:none;height:auto}
.wp-block-button .wp-block-button__link::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;transform:translateY(102%);transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.wp-block-button .wp-block-button__link:hover::before,.wp-block-button .wp-block-button__link:focus-visible::before{transform:none}
.wp-block-button .wp-block-button__link .arr{transition:transform .4s}
.wp-block-button .wp-block-button__link:hover .arr{transform:translateX(5px)}
.wp-block-button.is-style-gold .wp-block-button__link{background:var(--gold-soft);color:#2d0a14}
.wp-block-button.is-style-gold .wp-block-button__link::before{background:#fff}
.wp-block-button.is-style-line .wp-block-button__link{color:var(--ivory);border-color:rgba(243,230,200,.42);background:rgba(45,10,20,.55)}
.wp-block-button.is-style-line .wp-block-button__link::before{background:rgba(201,162,77,.28)}
.wp-block-button.is-style-ink .wp-block-button__link{background:var(--ink);color:var(--ivory)}
.wp-block-button.is-style-ink .wp-block-button__link::before{background:var(--gold)}
.wp-block-button.is-style-ink .wp-block-button__link:hover{color:#2d0a14}
.wp-block-button.is-style-inkline .wp-block-button__link{color:var(--ink);border-color:rgba(58,16,24,.4);background:transparent}
.wp-block-button.is-style-inkline .wp-block-button__link::before{background:rgba(58,16,24,.1)}
.wp-block-button.is-style-amz .wp-block-button__link{background:#3a0e1b;color:#f6e3a6;border-color:rgba(138,100,32,.7)}
.wp-block-button.is-style-amz .wp-block-button__link::before{background:#5a1a2b}

/* Bibelwort-Karten (Zitat-Block mit Klasse „vitem“) */
blockquote.vitem{margin:0}
.vitem p{margin:0;font-family:var(--font-display);font-style:italic;font-size:1.5rem;line-height:1.3;color:inherit}
.paper .vitem{border-color:rgba(58,16,24,.22);background:rgba(58,16,24,.04)}
.paper .vitem p{color:var(--ink)}
.paper .vitem cite{color:var(--gold-ink)}

/* Zitatband: Zitat-Block */
.band .wp-block-quote{display:contents;margin:0;font-family:var(--font-body);font-style:normal;font-size:1.0625rem;line-height:1.65;max-width:none;text-wrap:wrap}
.band .wp-block-quote p{margin:0;font-family:var(--font-display);font-style:italic;font-size:clamp(1.5rem,3.4vw,2.4rem);line-height:1.25;max-width:26ch;text-wrap:balance;color:inherit}

/* Hervorgehobene Zitate in Schriften und Beiträgen */
.essay .pull p{margin:0;font:inherit;color:inherit;line-height:inherit}
blockquote.pull{margin:0}
.essay blockquote.pull{margin:6px 0}

/* Frage-und-Antwort-Liste (Gruppe „kv“) */
.kv .k{margin:0;font-family:var(--font-display);font-size:1.3rem;line-height:1.65;color:var(--gold-ink)}
.kv .v{margin:0;font-size:1.0625rem;color:var(--ink);line-height:1.6}

/* Inhalte, die der Editor als Listen/Absätze in den Rollos ausgibt */
.rin>div>p{margin:0}

/* Bilder und Audio in Karten */
.card img{display:block;width:100%;height:auto;border-radius:3px}
.card audio,.card video{width:100%;max-width:100%}

/* Buchtexte: der letzte Absatz ist der hervorgehobene Schlusssatz */
.bk .txt>p:last-child:not(:first-child){font-family:var(--font-display);font-style:italic;font-size:1.25rem;line-height:1.35;color:var(--ink);border-left:2px solid var(--gold);padding-left:16px}

/* Fußzeile: rechtliche Seiten */
footer .flinks{display:flex;gap:6px 22px;justify-content:center;flex-wrap:wrap;margin-top:16px}
footer .flinks a{color:var(--muted);text-decoration-color:rgba(214,198,162,.4);text-underline-offset:4px}
footer .flinks a:hover{color:var(--gold-soft)}

/* Angemeldet: Verwaltungsleiste von WordPress */
body.admin-bar .bar,body.admin-bar .progress{top:32px}
@media(max-width:782px){body.admin-bar .bar,body.admin-bar .progress{top:46px}}
@media(max-width:600px){body.admin-bar .bar,body.admin-bar .progress{top:0}}

/* Medien, die Du selbst einfügst (Bilder, Videos, Audio, Spalten, Tabellen) */
.essay img,.prose img,.rin img{max-width:100%;height:auto}
.wp-block-image{margin:0}
.wp-block-image img{height:auto;max-width:100%;border-radius:3px}
.wp-block-image figcaption,.wp-element-caption{font-size:.85rem;color:var(--ink-muted);margin-top:8px;text-align:center}
.wp-block-audio audio,.wp-block-video video{width:100%;max-width:100%}
.wp-block-embed iframe,.wp-block-embed__wrapper iframe{max-width:100%}
.wp-block-columns{display:flex;flex-wrap:wrap;gap:24px}
.wp-block-column{flex:1 1 0;min-width:0}
@media(max-width:781px){.wp-block-column{flex-basis:100%!important}}
.wp-block-separator{border:0;border-top:1px solid rgba(58,16,24,.22);margin:28px 0}
.wp-block-table{overflow-x:auto}
.wp-block-table table{border-collapse:collapse;width:100%}
.wp-block-table td,.wp-block-table th{border:1px solid rgba(58,16,24,.22);padding:8px 12px}
.wp-block-file a{font-weight:600}
.has-text-align-center{text-align:center}
.has-text-align-right{text-align:right}
.alignleft{float:left;margin:0 1.2em 1em 0}
.alignright{float:right;margin:0 0 1em 1.2em}
.aligncenter{margin-inline:auto}
.wp-block-spacer{clear:both}
.screen-reader-text{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Seiten, die nur aus Fließtext bestehen (zum Beispiel Impressum, Datenschutz) */
.paper .essay a{color:var(--ink);text-underline-offset:4px;text-decoration-color:var(--gold-ink)}
.paper .essay h3{font-size:1.4rem;color:var(--ink);margin-top:10px}

/* ==========================================================================
   Neu (13.10.2026): Fragen-Kacheln, neueste Beiträge, Gebetsanliegen-Band,
   Kontaktformular, quadratische Extras-Kacheln
   ========================================================================== */

/* Fragen, die viele bewegen (Kacheln auf Pergament; die ganze Kachel ist anklickbar) */
.card.frage{min-height:0;gap:12px}
.card.frage>h3{position:static;font-size:1.45rem;line-height:1.15}
.card.frage h3 a{color:inherit;text-decoration:none}
.card.frage h3 a::after{content:"";position:absolute;inset:0;z-index:2}
.card.frage .ex{margin:0;color:var(--ink-muted);font-size:.98rem}
.card.frage .go{margin:auto 0 0;font-weight:600;font-size:.95rem;color:var(--gold-ink);display:inline-flex;gap:8px}
.card.frage .go::after{content:"→";display:inline-block;transition:transform .35s}
.card.frage:hover .go::after{transform:translateX(6px)}
.card.frage:focus-within{outline:2px solid var(--gold-ink);outline-offset:3px}
.cards.fragen{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){.cards.fragen{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.cards.fragen{grid-template-columns:minmax(0,1fr)}}

/* Neueste Beiträge: Karten wie im Karussell, hier nebeneinander */
.postgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:20px}
.postgrid .post{flex:none;min-width:0}
.postgrid+.cta.start{justify-content:center}

/* Gebetsanliegen-Band */
.band.gebet{padding-block:clamp(64px,9vw,96px)}
.band.gebet .wrap{max-width:780px}
.band.gebet h2{font-size:clamp(1.8rem,4vw,2.9rem);max-width:20ch}
.band.gebet p:not(.eyebrow){max-width:52ch;font-size:1.1rem;color:rgba(243,230,200,.9)}
.band.gebet .cta.start{justify-content:center}

/* Kontaktseite: links Erklärung, rechts das Formular */
.kgrid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,5vw,64px);align-items:start}
@media(max-width:860px){.kgrid{grid-template-columns:minmax(0,1fr)}}
.kinfo-wrap{display:grid;gap:0;min-width:0}
.kinfo-wrap .head{margin-bottom:26px}
.kinfo{margin:0 0 22px;padding:0;list-style:none;display:grid;gap:14px}
.kinfo li{padding-left:18px;border-left:2px solid var(--gold);color:var(--muted)}
.kinfo li strong{color:var(--ivory)}
.kform-wrap{min-width:0}

/* Kontaktformular */
.kform{position:relative;scroll-margin-top:110px;background:linear-gradient(180deg,#5a1a2b,#3a0e1b);border:1px solid var(--line);border-radius:6px;padding:clamp(24px,4vw,40px);box-shadow:0 40px 80px -40px rgba(0,0,0,.7)}
.kform form{display:grid;gap:22px;margin:0}
.kfeld{display:grid;gap:8px;min-width:0;align-content:start}
.kfeld>label,.kopt legend{font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-soft)}
.khint{margin-left:8px;font-size:.72rem;letter-spacing:.04em;text-transform:none;color:var(--muted)}
.kform input[type=text],.kform input[type=email],.kform textarea{width:100%;font:inherit;font-size:1.0625rem;line-height:1.5;color:var(--ivory);background:rgba(255,255,255,.06);border:1px solid rgba(243,230,200,.28);border-radius:6px;padding:14px 16px;transition:border-color .3s,box-shadow .3s,background .3s}
.kform textarea{min-height:170px;resize:vertical;line-height:1.55}
.kform ::placeholder{color:rgba(214,198,162,.62);opacity:1}
.kform input[type=text]:focus,.kform input[type=email]:focus,.kform textarea:focus{outline:none;border-color:var(--gold-soft);box-shadow:0 0 0 3px rgba(240,217,143,.22);background:rgba(255,255,255,.09)}
.kform input:-webkit-autofill{-webkit-text-fill-color:var(--ivory);caret-color:var(--ivory);-webkit-box-shadow:0 0 0 1000px #4a1424 inset;transition:background-color 9999s}
.kform [aria-invalid=true]{border-color:#ffb4a4}
.krow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
@media(max-width:560px){.krow{grid-template-columns:minmax(0,1fr)}}
.kopt{border:0;margin:0;padding:0;min-width:0}
.kopt legend{padding:0;margin-bottom:10px}
.kpills{display:flex;flex-wrap:wrap;gap:10px;position:relative}
.kpills input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.kpills label{cursor:pointer;display:inline-flex;align-items:center;padding:10px 20px;border-radius:99px;border:1px solid rgba(243,230,200,.35);background:rgba(45,10,20,.55);color:var(--ivory);font:600 .95rem var(--font-body);letter-spacing:.03em;transition:background .3s,color .3s,border-color .3s}
.kpills label:hover{border-color:var(--gold-soft)}
.kpills input:checked+label{background:var(--gold-soft);color:#2d0a14;border-color:transparent}
.kpills input:focus-visible+label{outline:2px solid var(--gold-soft);outline-offset:3px}
.kcheck-row{grid-template-columns:auto minmax(0,1fr);align-items:start;column-gap:12px;row-gap:6px}
.kcheck-row input{width:22px;height:22px;margin:2px 0 0;accent-color:var(--gold-soft)}
.kfeld.kcheck-row>label{font-size:.92rem;letter-spacing:0;text-transform:none;color:var(--muted);line-height:1.5}
.kcheck-row label a{color:var(--gold-soft)}
.kcheck-row .kerr{grid-column:1/-1}
.kerr{margin:0;font-size:.9rem;color:#ffb4a4}
.kfehler{margin-bottom:22px;padding:14px 18px;border:1px solid rgba(255,180,164,.5);border-radius:6px;background:rgba(120,20,30,.35);color:#ffd9d0}
.kfehler ul{margin:6px 0 0;padding-left:1.2rem}
.kfehler:focus{outline:none}
.khp{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.kbtns{display:flex;flex-wrap:wrap;gap:12px}
.btn.is-sending{opacity:.65;pointer-events:none}
.kdanke{display:grid;gap:14px;justify-items:center;text-align:center}
.kdanke .kcheck{color:var(--gold-soft)}
.kdanke h3{font-size:clamp(1.8rem,3.4vw,2.4rem)}
.kdanke p{max-width:44ch;color:var(--muted)}
.kdanke .kbtns{justify-content:center;margin-top:6px}

/* Extras: kleine quadratische Kacheln */
.kacheln{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px}
.kachel{--mx:50%;--my:50%;position:relative;overflow:hidden;aspect-ratio:1/1;display:flex;flex-direction:column;justify-content:space-between;gap:8px;padding:18px;border:1px solid var(--line);border-radius:6px;background:rgba(255,255,255,.04);color:inherit;text-decoration:none;cursor:pointer;transition:transform .55s cubic-bezier(.2,.8,.2,1),border-color .4s,box-shadow .4s}
.kachel::before{content:"";position:absolute;inset:0;background:radial-gradient(260px circle at var(--mx) var(--my),rgba(240,217,143,.16),transparent 65%);opacity:0;transition:opacity .4s;pointer-events:none}
.kachel:hover,.kachel:focus-visible,.kachel:focus-within{transform:translateY(-6px);border-color:rgba(240,217,143,.7)}
.kachel:hover::before{opacity:1}
.kachel>*{position:relative;z-index:1}
.kachel>.kbild{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;opacity:.3;border-radius:0}
.ksym{width:30px;height:30px;flex:none;color:var(--gold-soft)}
.kmid{display:grid;gap:6px;min-width:0}
.kachel h3{font-size:clamp(1.3rem,2.4vw,1.55rem);line-height:1.08;overflow-wrap:anywhere;hyphens:auto;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.kst{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.kfoot{display:flex;align-items:center;gap:10px;min-height:34px}
.kachel .go{display:inline-flex;gap:8px;font-weight:600;font-size:.92rem;color:var(--gold-soft)}
.kachel .go span{transition:transform .35s}
.kachel:hover .go span{transform:translateX(6px)}
.kachel-leer{cursor:default}
.kachel-leer::before{display:none}
.kachel-leer:hover{transform:none;border-color:var(--line)}
.kplay{all:unset;box-sizing:border-box;position:relative;flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;cursor:pointer;background:var(--gold-soft);color:#2d0a14;transition:transform .3s}
.kplay[hidden]{display:none}
.kplay:hover{transform:scale(1.08)}
.kplay:focus-visible{outline:2px solid var(--gold-soft);outline-offset:3px}
.kplay svg{display:block;width:18px;height:18px}
.kplay .kp-pause{display:none}
.kachel.is-playing .kp-play{display:none}
.kachel.is-playing .kp-pause{display:block}
.kachel.is-playing{border-color:var(--gold-soft);box-shadow:0 0 0 1px rgba(240,217,143,.45),0 22px 50px -22px rgba(0,0,0,.75)}
.kbar{flex:1;min-width:0;height:3px;border-radius:2px;background:rgba(243,230,200,.22);overflow:hidden}
.kbar i{display:block;height:100%;width:0;background:var(--gold-soft)}
.kachel audio{width:100%;max-width:100%}
.kachel.kjs audio{display:none}
html:not(.js) .kachel[data-audio],html.lw-nojs .kachel[data-audio]{aspect-ratio:auto}
@media(prefers-reduced-motion:reduce){.kachel,.kachel:hover{transform:none}}

/* Bücher zum Download (13.10.2026): Preis, Kaufknopf, Leseprobe */
.bk .preis{margin:1.3em 0 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;color:var(--ink-muted)}
.bk .preis .pl{font-size:.75rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-ink)}
.bk .preis strong{font-family:var(--font-display);font-size:1.9rem;line-height:1;color:var(--ink)}
.bk .preis .ph{font-size:.85rem}
.bk .preis+.act{margin-top:.9em}
.bk .act{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.bk .cov a:not([href]){cursor:default}
.btn.is-leer,.btn.is-leer:hover{opacity:.6;cursor:default;pointer-events:none;transform:none}
.btn.is-leer::before{display:none}
.btn.inkline .arr{transition:transform .4s}

/* ==========================================================================
   Buch-Effekte (13.10.2026): Buch in 3D, Glanz, Glitzern, Einschweben, Kaufknopf, „Blick ins Buch“
   Alles ist Zusatz: Ohne Skript und bei „weniger Bewegung“ bleibt die Seite ruhig und vollständig bedienbar.
   Alle Bewegungsregeln hängen an html.bfx; diese Klasse setzt das Skript nur, wenn Bewegung erwünscht ist.
   ========================================================================== */
@property --ga{syntax:"<number>";inherits:true;initial-value:0}

/* 1) Titelbild: Seitenkante, Falz am Buchrücken, Schein dahinter, Schatten am Boden (auch ohne Skript) */
.cov{position:relative}
.cov a{--gx:30%;--gy:20%;box-shadow:1px 0 0 0 #f4ecd3,2px 0 0 0 #cdbf95,3px 0 0 0 #f4ecd3,4px 0 0 0 #cdbf95,0 1px 0 rgba(240,217,143,.6),0 18px 40px rgba(30,5,12,.42),0 0 0 1px rgba(201,162,77,.55);transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s,--ga .6s ease}
.cov a:hover,.cov a:focus-visible{box-shadow:1px 0 0 0 #f4ecd3,2px 0 0 0 #cdbf95,3px 0 0 0 #f4ecd3,4px 0 0 0 #cdbf95,0 1px 0 rgba(240,217,143,.9),0 26px 52px rgba(30,5,12,.5),0 0 0 1px rgba(240,217,143,.95)}
.cov a::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(circle at var(--gx) var(--gy),rgba(255,247,220,var(--ga)),transparent 58%),linear-gradient(90deg,rgba(18,3,7,.34) 0,rgba(255,240,200,.2) 1.3%,rgba(18,3,7,.2) 3.1%,rgba(255,255,255,0) 7%)}
.cov::before{content:"";position:absolute;inset:-12% -22%;pointer-events:none;background:radial-gradient(closest-side,rgba(255,232,160,.7),rgba(255,232,160,0));opacity:.6}
.cov::after{content:"";display:block;height:16px;width:72%;margin:22px auto 0;border-radius:50%;background:radial-gradient(ellipse at center,rgba(30,5,12,.34),rgba(30,5,12,0) 70%)}
html.bfx .cov::before{animation:bkhalo 7s ease-in-out infinite}
html.bfx .cov::after{animation:bkshadow 7s ease-in-out infinite}
html.bfx .bk.rev .cov::before,html.bfx .bk.rev .cov::after{animation-delay:-3s}
@keyframes bkhalo{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:.9;transform:scale(1.07)}}
@keyframes bkshadow{0%,100%{transform:scale(1);opacity:.95}50%{transform:scale(.84);opacity:.6}}

/* 1a) Das Buch als Körper (setzt das Skript zusammen): Rücken mit Titel, Seitenkante, Boden, Deckel-Glanz.
       Es dreht sich beim Scrollen langsam, wiegt sich leicht und folgt der Maus – mit der Maus lässt sich der Rücken und die Seitenkante ansehen. */
html.bfx .cov a{--yaw:18deg;--hx:0deg;overflow:visible;border-radius:0;box-shadow:none;transform-style:preserve-3d;transform:rotateX(var(--hx)) rotateY(var(--yaw))}
html.bfx .cov a:hover,html.bfx .cov a:focus-visible{box-shadow:none}
html.bfx .cov a::before,html.bfx .cov a::after{display:none}
.b3d{--t:28px;--spc:#3a0e1b;position:relative;display:block;transform-style:preserve-3d}
html.bfx .cov .b3d{animation:bksway 9s ease-in-out infinite}
html.bfx .bk.rev .cov .b3d{animation-delay:-4.5s}
html.bfx .cov a:hover .b3d,html.bfx .cov a:focus-visible .b3d{animation-play-state:paused}
@keyframes bksway{0%,100%{transform:rotateY(-4deg) rotateX(1deg)}50%{transform:rotateY(4deg) rotateX(-1deg)}}
.b3d img{position:relative;display:block;width:100%;height:auto;transform:translateZ(calc(var(--t) / 2));box-shadow:0 0 0 1px rgba(201,162,77,.6)}
.b3d .f{position:absolute;display:block;pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.b3d .sp{left:0;top:0;width:var(--t);height:100%;transform:translateX(calc(var(--t) / -2)) rotateY(-90deg);overflow:hidden;
  background:linear-gradient(180deg,transparent 5.5%,rgba(240,217,143,.9) 5.5% 6.2%,transparent 6.2% 7.8%,rgba(240,217,143,.65) 7.8% 8.3%,transparent 8.3% 91.7%,rgba(240,217,143,.65) 91.7% 92.2%,transparent 92.2% 93.8%,rgba(240,217,143,.9) 93.8% 94.5%,transparent 94.5%),
  linear-gradient(90deg,rgba(0,0,0,.45),rgba(255,255,255,.13) 24%,rgba(0,0,0,.08) 62%,rgba(0,0,0,.5)),var(--spc)}
.b3d .spt{position:absolute;left:0;right:0;top:11%;bottom:11%;display:flex;align-items:center;justify-content:center;writing-mode:vertical-rl;transform:rotate(180deg);font:600 clamp(11px,calc(var(--t) * .5),14px)/1 var(--font-display);letter-spacing:.07em;color:#f0d98f;white-space:nowrap;text-shadow:0 1px 0 rgba(0,0,0,.45);overflow:hidden}
.b3d .pg{right:0;top:2px;width:var(--t);height:calc(100% - 4px);transform:translateX(calc(var(--t) / 2 - 1.5px)) rotateY(90deg);background:linear-gradient(180deg,rgba(0,0,0,.14),transparent 14%,transparent 86%,rgba(0,0,0,.16)),repeating-linear-gradient(90deg,#f7f0da 0 1px,#d8cba2 1px 2px)}
.b3d .tp{left:1px;top:0;width:calc(100% - 2px);height:var(--t);transform:translateY(calc(var(--t) / -2 + 1.5px)) rotateX(90deg);background:linear-gradient(90deg,rgba(0,0,0,.2),transparent 12%,transparent 88%,rgba(0,0,0,.14)),repeating-linear-gradient(0deg,#f7f0da 0 1px,#d8cba2 1px 2px)}
.b3d .bt{left:1px;top:100%;width:calc(100% - 2px);height:var(--t);transform:translateY(calc(var(--t) / -2 - 1.5px)) rotateX(-90deg);background:linear-gradient(90deg,rgba(0,0,0,.28),rgba(0,0,0,.1)),repeating-linear-gradient(0deg,#e9dfc0 0 1px,#c7b98c 1px 2px)}
.b3d .bf{left:0;top:0;width:100%;height:100%;transform:rotateY(180deg) translateZ(calc(var(--t) / 2));background:linear-gradient(90deg,rgba(0,0,0,.3),rgba(0,0,0,.05)),var(--spc)}
.b3d .fg{left:0;top:0;width:100%;height:100%;transform:translateZ(calc(var(--t) / 2 + .5px));background:radial-gradient(circle at var(--gx) var(--gy),rgba(255,247,220,var(--ga)),transparent 58%),linear-gradient(90deg,rgba(18,3,7,.34) 0,rgba(255,240,200,.2) 1.3%,rgba(18,3,7,.2) 3.1%,rgba(255,255,255,0) 7%)}
.b3d .sw{left:0;top:0;width:100%;height:100%;transform:translateZ(calc(var(--t) / 2 + 1px));background:linear-gradient(105deg,transparent 35%,rgba(255,244,205,.4) 50%,transparent 65%) 135% 0/260% 100% no-repeat;transition:background-position .95s cubic-bezier(.2,.8,.2,1)}
html.bfx .cov a:hover .b3d .sw,html.bfx .cov a:focus-visible .b3d .sw{background-position:-35% 0}

/* Glitzern um das Buch (die kleinen Sterne setzt das Skript) */
.spk{position:absolute;z-index:3;left:var(--l);top:var(--t);width:var(--s);height:var(--s);margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);border-radius:50%;background:radial-gradient(circle,#fff 0 14%,#dcb24e 34%,rgba(184,138,46,0) 66%);pointer-events:none;opacity:0;animation:bkspk 4.6s ease-in-out infinite;animation-delay:var(--d)}
.spk::before,.spk::after{content:"";position:absolute;left:50%;top:50%;background:linear-gradient(90deg,transparent,rgba(196,150,52,.95),transparent);transform:translate(-50%,-50%)}
.spk::before{width:420%;height:1px}
.spk::after{width:1px;height:420%;background:linear-gradient(180deg,transparent,rgba(196,150,52,.95),transparent)}
@keyframes bkspk{0%,70%,100%{opacity:0;transform:scale(.2) rotate(0deg)}82%{opacity:1;transform:scale(1) rotate(25deg)}92%{opacity:.4;transform:scale(.6) rotate(40deg)}}

/* 2) Einschweben: das Buch klappt beim Erscheinen zur Seite auf; die Preislinie zeichnet sich */
html.bfx .bk.reveal:not(.in) .cov{opacity:0;transform:perspective(900px) rotateY(-64deg) translateX(-26px)}
html.bfx .bk.rev.reveal:not(.in) .cov{transform:perspective(900px) rotateY(64deg) translateX(26px)}
html.bfx .bk.reveal .cov{transform-origin:0 50%;transition:transform 1.3s cubic-bezier(.2,.8,.2,1) .2s,opacity .9s ease .2s}
html.bfx .bk.rev.reveal .cov{transform-origin:100% 50%}
.bk .preis strong{position:relative;display:inline-block}
.bk .preis strong::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:linear-gradient(90deg,var(--gold),rgba(201,162,77,0));transform-origin:0 50%}
html.bfx .bk.reveal:not(.in) .preis strong::after{transform:scaleX(0)}
html.bfx .bk.reveal .preis strong::after{transition:transform 1.1s cubic-bezier(.2,.8,.2,1) .8s}

/* 3) Kaufknopf: Goldschimmer läuft darüber, der Download-Pfeil bewegt sich */
.btn.buy{gap:12px}
.btn.buy .dl{display:inline-grid;place-items:center;width:20px;height:20px;flex:none}
.btn.buy .dl svg{display:block;overflow:visible}
.btn.buy::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,236,170,.5) 50%,transparent 65%);transform:translateX(-135%)}
html.bfx .btn.buy::after{animation:buyshine 5.5s ease-in-out infinite}
html.bfx .btn.buy:hover::after,html.bfx .btn.buy:focus-visible::after{animation-duration:1.8s}
html.bfx .btn.buy .dl-a{animation:dlidle 5.5s ease-in-out infinite}
html.bfx .btn.buy:hover .dl-a,html.bfx .btn.buy:focus-visible .dl-a{animation:dlhover .8s ease-in-out infinite}
@keyframes buyshine{0%,55%{transform:translateX(-135%)}85%,100%{transform:translateX(135%)}}
@keyframes dlidle{0%,60%,100%{transform:translateY(0)}72%{transform:translateY(3px)}84%{transform:translateY(0)}}
@keyframes dlhover{0%,100%{transform:translateY(-1px)}50%{transform:translateY(3.5px)}}
.btn.blick{gap:10px;background:transparent}
.btn.blick .bi{display:inline-grid;place-items:center;width:20px;height:20px;flex:none;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.btn.blick .bi svg{display:block}
.btn.blick:hover .bi,.btn.blick:focus-visible .bi{transform:scale(1.14) rotate(-6deg)}

/* 4) „Blick ins Buch“: Fenster, in dem das Buch erscheint und sich die Seite daneben aufklappt */
html.bkv-lock{overflow:hidden}
.bkv{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:clamp(10px,3vw,32px);visibility:hidden;opacity:0;transition:opacity .4s ease,visibility 0s linear .4s}
.bkv.open{visibility:visible;opacity:1;transition:opacity .4s ease,visibility 0s}
.bkv-back{position:absolute;inset:0;background:rgba(22,3,9,.8);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);cursor:pointer}
.bkv-card{position:relative;display:grid;grid-template-columns:minmax(0,310px) minmax(0,1fr);grid-template-rows:minmax(0,1fr);width:min(980px,100%);max-height:min(90vh,780px);max-height:min(90dvh,780px);border-radius:8px;box-shadow:0 40px 90px rgba(0,0,0,.6),0 0 0 1px rgba(240,217,143,.45)}
.bkv.nocov .bkv-card{grid-template-columns:minmax(0,1fr);width:min(660px,100%)}
.bkv.nocov .bkv-left{display:none}
.bkv.nocov .bkv-page{border-radius:8px}
.bkv-left{position:relative;display:grid;place-items:center;padding:clamp(22px,4vw,40px);background:radial-gradient(ellipse at 50% 38%,#6b1d2e 0,#3a0e1b 62%,#26060f 100%);border-radius:8px 0 0 8px;overflow:hidden}
.bkv-left::before{content:"";position:absolute;inset:-20%;background:radial-gradient(closest-side,rgba(240,217,143,.22),rgba(240,217,143,0));pointer-events:none}
.bkv-book{position:relative;width:100%;max-width:224px}
.bkv-book>img{position:relative;display:block;width:100%;height:auto;border-radius:3px;box-shadow:1px 0 0 0 #f4ecd3,2px 0 0 0 #cdbf95,3px 0 0 0 #f4ecd3,4px 0 0 0 #cdbf95,0 22px 44px rgba(0,0,0,.55),0 0 0 1px rgba(240,217,143,.7)}
.bkv-stage{position:relative;perspective:900px}
.bkv-stage .b3d{transform:rotateY(18deg)}
.bkv-stage::after{content:"";position:absolute;left:12%;right:2%;bottom:-26px;height:18px;border-radius:50%;background:radial-gradient(ellipse at center,rgba(0,0,0,.5),rgba(0,0,0,0) 70%)}
.bkv-page{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;color:var(--ink);background:linear-gradient(135deg,#f9f0d6,#f1e4c3);border-radius:0 8px 8px 0}
.bkv-page::before{content:"";position:absolute;left:0;top:0;bottom:0;width:16px;background:linear-gradient(90deg,rgba(58,16,24,.28),rgba(58,16,24,0));pointer-events:none;z-index:1}
.bkv-scroll{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:clamp(24px,3.6vw,42px) clamp(22px,3.4vw,40px) 14px clamp(28px,3.8vw,46px)}
.bkv-body .no{font-size:.75rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-ink)}
.bkv-body h2{margin:.3em 0 .15em;font-size:clamp(1.7rem,3.4vw,2.3rem);color:var(--ink);padding-right:34px}
.bkv-body .sub{font-family:var(--font-display);font-style:italic;font-size:1.2rem;line-height:1.3;color:var(--ink-muted);margin-bottom:.3em}
.bkv-body .au{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:1em}
.bkv-body .txt{display:grid;gap:.8em;font-size:1rem;max-width:64ch}
.bkv-body .txt>p{margin:0}
.bkv-body .txt>p:last-child:not(:first-child){font-family:var(--font-display);font-style:italic;font-size:1.2rem;line-height:1.35;color:var(--ink);border-left:2px solid var(--gold);padding-left:16px}
.bkv-foot{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between;padding:14px clamp(22px,3.4vw,40px) clamp(16px,2.4vw,26px) clamp(28px,3.8vw,46px);border-top:1px solid rgba(138,100,32,.3)}
.bkv-foot .preis{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;color:var(--ink-muted)}
.bkv-foot .preis .pl{font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-ink)}
.bkv-foot .preis strong{font-family:var(--font-display);font-size:1.7rem;line-height:1;color:var(--ink)}
.bkv-foot .preis .ph{font-size:.8rem}
.bkv-foot .act{display:flex;flex-wrap:wrap;gap:10px;margin:0}
.bkv-close{position:absolute;top:10px;right:10px;z-index:3;width:38px;height:38px;border-radius:50%;border:1px solid rgba(138,100,32,.55);background:rgba(251,245,230,.92);color:var(--ink);font:400 1.5rem/1 var(--font-body);cursor:pointer;display:grid;place-items:center;padding:0;transition:background .3s,transform .3s}
.bkv-close:hover,.bkv-close:focus-visible{background:var(--gold-soft);transform:rotate(90deg)}
html.bfx .bkv-card{transform:perspective(1700px) rotateY(-12deg) translateY(24px) scale(.95);transition:transform .9s cubic-bezier(.2,.8,.2,1)}
html.bfx .bkv.open .bkv-card{transform:none}
html.bfx .bkv-stage{opacity:0;transform:translateY(18px) scale(.92);transition:transform .9s cubic-bezier(.2,.8,.2,1) .05s,opacity .6s ease .05s}
html.bfx .bkv.open .bkv-stage{opacity:1;transform:none}
html.bfx .bkv-stage .b3d{transform:rotateY(-100deg);transition:transform 1.5s cubic-bezier(.2,.8,.2,1) .1s}
html.bfx .bkv.open .bkv-stage .b3d{transform:rotateY(18deg);animation:bkdsway 9s ease-in-out 1.7s infinite}
@keyframes bkdsway{0%,100%{rotate:y -3deg}50%{rotate:y 5deg}}
html.bfx .bkv-page{transform-origin:0 50%;transform:perspective(1700px) rotateY(-88deg);transition:transform 1s cubic-bezier(.2,.8,.2,1) .15s}
html.bfx .bkv.open .bkv-page{transform:none}
html.bfx .bkv-page::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,rgba(20,4,8,.6),rgba(20,4,8,0) 60%);opacity:1;pointer-events:none;z-index:2;transition:opacity 1s ease .15s}
html.bfx .bkv.open .bkv-page::after{opacity:0}
@media(max-width:760px){
  .bkv-card{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);max-height:min(92vh,800px);max-height:min(92dvh,800px)}
  .bkv-left{padding:16px 16px 24px;border-radius:8px 8px 0 0}
  .bkv-book{max-width:104px}
  .bkv-page{border-radius:0 0 8px 8px}
  .bkv-page::before{display:none}
  .bkv-scroll{padding:20px 20px 12px}
  .bkv-foot{padding:12px 20px 16px}
  html.bfx .bkv-page{transform-origin:50% 0;transform:perspective(1200px) rotateX(-80deg)}
  html.bfx .bkv-page::after{background:linear-gradient(180deg,rgba(20,4,8,.6),rgba(20,4,8,0) 60%)}
}
@media(prefers-reduced-motion:reduce){.cov::before,.cov::after,.btn.buy::after,.btn.buy .dl-a,.spk,.b3d{animation:none}.spk{display:none}}

/* ==========================================================================
   Büchervorstellung dezent (13.10.2026): kleine Zusatzoption, kein Verkaufsauftritt.
   Nur der Hinweis auf der STARTSEITE ist klein und ruhig. Die Seite „Meine Bücher“ stellt die Bücher wieder groß vor.
   ========================================================================== */
/* Startseite: schmales, ruhiges Band mit drei kleinen Titelbildern */
.tease-sec{padding:clamp(26px,3.4vw,38px) 0;border-top:1px solid rgba(201,162,77,.16)}
.tease{grid-template-columns:minmax(0,1fr) auto;gap:clamp(18px,4vw,52px)}
.tease .eyebrow{font-size:.68rem;letter-spacing:.3em}
.tease h2{margin:.22em 0 .3em;font-size:clamp(1.3rem,2.1vw,1.6rem)}
.tease p{max-width:56ch;font-size:.92rem;line-height:1.55;opacity:.8}
.tease .act{margin-top:.95em}
.tease .btn,.tease .btn.gold{padding:9px 20px;font-size:.82rem}
.tease .btn.gold{background:transparent;color:var(--gold-soft);border-color:rgba(240,217,143,.42)}
.tease .btn.gold::before{background:rgba(240,217,143,.16)}
.tease .btn.gold:hover,.tease .btn.gold:focus-visible{color:var(--gold-soft);border-color:rgba(240,217,143,.8)}
.tease .row{gap:10px;align-items:center}
.tease .row a{flex:none;width:clamp(52px,5.4vw,66px);max-width:none;box-shadow:0 8px 20px rgba(0,0,0,.4),0 0 0 1px rgba(201,162,77,.45)}
.tease .row a:nth-child(2){transform:translateY(-6px)}
.tease .row a:hover{transform:translateY(-9px);box-shadow:0 14px 28px rgba(0,0,0,.5),0 0 0 1px rgba(240,217,143,.9)}
/* Große Bildschirme (ab 1000 Pixel Breite): die drei kleinen Titelbilder etwa doppelt so groß (14.10.2026); darunter bleibt alles wie bisher */
@media(min-width:1000px){
  .tease .row{gap:14px}
  .tease .row a{width:clamp(96px,8.6vw,124px)}
  .tease .row a:nth-child(2){transform:translateY(-10px)}
  .tease .row a:hover{transform:translateY(-14px)}
}

@media(max-width:760px){
  .tease{grid-template-columns:1fr;gap:16px}
  .tease .row{justify-content:flex-start;gap:9px}
  .tease .row a{width:50px}
  .tease p{font-size:.9rem}
}

/* Zarte Beitragszeile unter dem Preis (13.10.2026): kursiv, ganz klein, mit goldenem Vierzack-Stern wie der Sternenstaub der Seite */
.bk .preis .pb,.bkv-foot .preis .pb{flex:0 0 100%;display:flex;align-items:center;gap:.6em;margin:.35em 0 0;font-family:var(--font-display);font-style:italic;font-weight:500;font-size:1.04rem;line-height:1.3;letter-spacing:.012em;color:var(--ink-muted)}
.bk .preis .pb::before,.bkv-foot .preis .pb::before{content:"";flex:none;width:.74em;height:.74em;background:linear-gradient(135deg,var(--gold-soft),var(--gold) 55%,var(--gold-ink));clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%)}
.bkv-foot .preis .pb{font-size:.98rem;margin-top:.25em}
html.bfx .bk.reveal:not(.in) .preis .pb{opacity:0;transform:translateY(5px)}
html.bfx .bk.reveal .preis .pb{transition:opacity 1.3s ease 1.35s,transform 1.3s cubic-bezier(.2,.8,.2,1) 1.35s}
html.bfx .bk .preis .pb::before,html.bfx .bkv-foot .preis .pb::before{animation:pbstern 5.2s ease-in-out 2.4s infinite}
@keyframes pbstern{0%,100%{transform:scale(.92);opacity:.8}50%{transform:scale(1.22);opacity:1}}
@media(prefers-reduced-motion:reduce){html.bfx .bk .preis .pb::before,html.bfx .bkv-foot .preis .pb::before{animation:none}}
@media(max-width:760px){.bk .preis .pb{font-size:1rem}.bkv-foot .preis .pb{font-size:.94rem}}

/* Meine Bücher: große, ausgefüllte Vorstellung auf dem Bildschirm (13.10.2026); Tablet und Handy behalten die bewährten Maße */
@media(min-width:1000px){
  .bk-sec{padding:clamp(52px,6vw,84px) 0}
  .bk{grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(40px,5vw,72px)}
  .bk.rev{grid-template-columns:minmax(0,1fr) minmax(0,300px)}
  .cov{max-width:300px}
  .bk .no{font-size:.8rem}
  .bk h2{font-size:clamp(2.2rem,3.4vw,3rem)}
  .bk .sub{font-size:1.42rem}
  .bk .au{font-size:.86rem}
  .bk .txt{font-size:1.04rem;line-height:1.66;max-width:66ch}
  .bk .txt>p:last-child:not(:first-child){font-size:1.34rem}
  .bk .preis strong{font-size:2.05rem}
  .bk .preis .pb{font-size:1.02rem}
  .bk .act .btn,.bk .act .btn.buy,.bk .act .btn.blick{padding:13px 28px;font-size:.95rem}
}

/* Feinschliff Schriftsatz (13.10.2026): Untertitel ausgewogen umbrechen, Absätze ohne einzelnes Wort in der letzten Zeile */
.bk .sub,.bkv .sub{text-wrap:balance}
.bk .txt>p{text-wrap:pretty}
.tease p{text-wrap:pretty}

/* Preise (13.10.2026): einfache, klar lesbare Schrift (die Textschrift der Seite, Ziffern gleich hoch, kräftig) statt der verzierten Überschriftenschrift;
   der goldene Streif darunter hält etwa 3 mm Abstand zur Zahl und läuft wie eine Sternschnuppe zart aus */
.bk .preis strong,.bkv-foot .preis strong{font-family:var(--font-body);font-weight:600;font-style:normal;font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum" 1,"tnum" 1;letter-spacing:.01em;font-size:1.8rem;line-height:1}
.bkv-foot .preis strong{font-size:1.6rem}
.bk .preis strong::after{bottom:-13px;right:-.7em;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--gold-soft) 0,var(--gold) 38%,rgba(201,162,77,0) 100%)}
.bkv-foot .preis strong{position:relative;display:inline-block}
.bkv-foot .preis strong::after{content:"";position:absolute;left:0;right:-.7em;bottom:-12px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--gold-soft) 0,var(--gold) 38%,rgba(201,162,77,0) 100%)}
@media(min-width:1000px){.bk .preis strong{font-size:2.05rem}}
.bk .preis .pb{margin-top:calc(1em + 4px)}
.bkv-foot .preis .pb{margin-top:1.05em}

/* Rollo auf allen Unterseiten (13.10.2026): Die dunklen Hauptabschnitte fahren wie die hellen Flächen auf und zu, mit goldenem Saum.
   Die Fläche ist einen Hauch heller als der Seitengrund, damit man das Rollo sieht. Die Klasse setzt app.js (nur mit Bewegung). */
.rollo-sec{position:relative;background-color:#3a1020;background-image:radial-gradient(900px 480px at 78% 14%,rgba(201,162,77,.14),transparent 70%),linear-gradient(180deg,#4f1728 0%,#3a1020 55%,#2f0b16 100%);background-size:100% 150%,100% 150%;background-repeat:no-repeat}

/* ==========================================================================
   Rückseite und „Blick ins Buch“ mit echten Seiten (14.10.2026)
   Zusatz zu den Buch-Effekten oben; nichts davon ändert die Darstellung ohne Rückseiten-Dateien.
   ========================================================================== */
/* Rückseite des Umschlags auf der Rückfläche des 3D-Buches */
.b3d.hat .bf{background:linear-gradient(90deg,rgba(0,0,0,.24),rgba(0,0,0,0) 12%),var(--rk,none) center/100% 100% no-repeat,var(--spc);box-shadow:inset 0 0 0 1px rgba(201,162,77,.6)}
/* Während die Maus über dem Buch ist, steht das Wiegen still (die Maus steuert die Drehung) */
html.bfx .cov a.hv .b3d{animation-play-state:paused}
html.bfx .cov a.hv .b3d .sw{background-position:-35% 0}
/* Knopf „Rückseite ansehen“ */
.rueck-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:max-content;max-width:none;white-space:nowrap;margin:24px 0 0 50%;transform:translateX(-50%);padding:.62em 1.25em;border:1px solid rgba(138,100,32,.6);border-radius:999px;background:transparent;color:var(--ink);font:600 .8rem/1.1 var(--font-body);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:background .3s,border-color .3s,transform .3s}
.rueck-btn:hover,.rueck-btn:focus-visible{background:var(--gold-soft);border-color:var(--gold-ink)}
.rueck-btn .ri{display:inline-grid;place-items:center;width:16px;height:16px;flex:none;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.rueck-btn .ri svg{display:block}
.rueck-btn[aria-pressed="true"] .ri{transform:rotate(180deg)}
.bkv-left .rueck-btn{margin-top:34px;color:var(--gold-soft);border-color:rgba(240,217,143,.55)}
.bkv-left .rueck-btn:hover,.bkv-left .rueck-btn:focus-visible{background:rgba(240,217,143,.16);border-color:var(--gold-soft)}
/* Im Fenster dreht sich das Buch auf Knopfdruck zur Rückseite */
html.bfx .bkv.open .bkv-stage.flip .b3d{transform:rotateY(-180deg)}

/* „Blick ins Buch“: die echten Seiten der Leseprobe zum Umblättern */
.bkv{--rh:calc(min(94vh,860px) - 250px)}
@supports (height:1dvh){.bkv{--rh:calc(min(94dvh,860px) - 250px)}}
.bkv.read .bkv-card{max-height:min(94vh,860px);max-height:min(94dvh,860px)}
.bkv.read .bkv-scroll{display:flex;flex-direction:column;overflow:hidden;padding-top:22px;padding-bottom:4px}
.bkv.read .bkv-body{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;align-items:baseline;min-height:0}
.bkv.read .bkv-body h2{margin:0 0 12px;padding-right:46px;font-size:clamp(1.25rem,2.2vw,1.55rem);line-height:1.2}
.bkv.read .bkv-body .bkv-read{grid-column:1 / -1}
.bkv.read .bkv-foot{flex-wrap:nowrap;align-items:center;gap:12px 18px;padding-top:12px;padding-bottom:clamp(14px,2vw,20px)}
.bkv.read .bkv-foot .preis{flex:1 1 0;min-width:0}
.bkv.read .bkv-foot .act{flex:none}
.bkv-sheet{height:var(--rh);display:flex;justify-content:center;align-items:center;touch-action:pan-y pinch-zoom}
.bkv-pg{display:block;height:100%;width:auto;max-width:100%;object-fit:contain;background:#f6efdc;border-radius:2px;box-shadow:0 0 0 1px rgba(138,100,32,.4),0 12px 28px rgba(58,16,24,.3)}
html.bfx .bkv-pg.tf{animation:bkvtf .6s cubic-bezier(.2,.8,.2,1);transform-origin:0 50%}
html.bfx .bkv-pg.tb{animation:bkvtb .6s cubic-bezier(.2,.8,.2,1);transform-origin:100% 50%}
@keyframes bkvtf{from{transform:perspective(1500px) rotateY(-68deg);opacity:.25}to{transform:none;opacity:1}}
@keyframes bkvtb{from{transform:perspective(1500px) rotateY(68deg);opacity:.25}to{transform:none;opacity:1}}
.bkv-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px clamp(22px,3.4vw,40px) 10px clamp(28px,3.8vw,46px)}
.bkv-nav[hidden]{display:none}
.bkv-nav .btn{min-height:40px;padding:.45em 1.1em;font-size:.88rem;background:transparent;color:var(--ink);border:1px solid rgba(58,16,24,.4);cursor:pointer}
.bkv-nav .btn:hover,.bkv-nav .btn:focus-visible{background:var(--gold-soft)}
.bkv-nav .btn[disabled]{opacity:.4;cursor:default;pointer-events:none}
.bkv-cnt{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);text-align:center;white-space:nowrap}
@media(max-width:760px){
  .bkv.read .bkv-left{display:none}
  .bkv.read .bkv-card{max-height:min(92vh,800px);max-height:min(92dvh,800px)}
  .bkv.read .bkv-foot{flex-wrap:wrap}
  .bkv.read .bkv-foot .preis{flex:1 1 auto}
  .bkv.read .bkv-body{display:block}
  .bkv.read .bkv-body .no{display:none}
  .bkv.read .bkv-body h2{margin:0 0 10px}
  .bkv.read .bkv-card{grid-template-rows:minmax(0,1fr)}
  .bkv.read .bkv-scroll{display:block;overflow:auto;padding:18px 16px 8px}
  .bkv.read .bkv-body h2{padding-right:40px}
  .bkv-sheet{height:auto;display:block}
  .bkv-pg{width:100%;height:auto}
  .bkv-nav{padding:6px 16px 8px}
  .bkv-nav .btn{padding:.45em .9em}
  .bkv-cnt{font-size:.7rem;letter-spacing:.07em}
}
@media(prefers-reduced-motion:reduce){.rueck-btn,.rueck-btn .ri{transition:none}}

/* 14.10.2026 – Bücher-Seite: Einleitung bündig mit der Seitenüberschrift, erster Satz als große Zeile (sonst wirkt die Fläche rechts leer) */
.bintro{max-width:760px;margin-left:max(0px,calc((100% - 860px) / 2));margin-right:auto;gap:1.1em}
.bintro p:first-child{font-family:var(--font-display);font-size:clamp(1.3rem,2.2vw,1.65rem);line-height:1.4;color:var(--ink)}

/* 14.10.2026 – Falls ein Block doch mit zusätzlichem Innen-Behälter ausgeliefert wird (andere WordPress-Einstellungen): Behälter ohne eigene Box behandeln */
.wp-block-group__inner-container{display:contents}