/* Kosmetik Wagram – Heft zum Blättern. Alle Maße in em: heft.js setzt die Basisgröße nach Seitenhöhe. */
@import url(../fonts/fonts.css);
:root{
  --paper:#FCFBF9; --paper2:#F5F2EF; --tisch:#E9E4DF; --ink:#2A2725; --ink2:#5E5753; --mute:#736C67; --line:rgba(42,39,37,.14);
  --akzent:#5C0022; --akzent2:#AB5A7A;
  --display:'Newsreader', Georgia, serif; --text:'Newsreader', Georgia, serif; --label:'Plus Jakarta Sans', 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%,#F3EFEB 0%,var(--tisch) 60%,#DFD8D2 100%);color:var(--ink);font:400 16px/1.5 var(--text);-webkit-font-smoothing:antialiased;overflow:hidden}
img{display:block;max-width:100%}
em{font-style:italic;color:var(--akzent)}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}

/* Kopf */
.hk{position:fixed;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 28px;z-index:20}
.hk-marke img{height:34px;width:auto}
.hk-hinweis{font:500 12px var(--label);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.hk-link{font:500 12px var(--label);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);text-decoration:none;border:1px solid var(--line);padding:9px 16px;border-radius:99px;background:rgba(252,251,249,.6)}
.hk-link:hover{border-color:var(--akzent);color:var(--akzent)}

/* Tisch + Buch */
.tisch{height:100svh;display:grid;grid-template-columns:auto 1fr auto;align-items:center;padding:64px 22px 54px;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(60,40,35,.22)) drop-shadow(0 4px 8px rgba(60,40,35,.12))}
.pfeil{width:52px;height:52px;border-radius:50%;border:1px solid var(--line);background:rgba(252,251,249,.7);font:300 30px/1 var(--display);color:var(--ink2);transition:.2s}
.pfeil:hover{border-color:var(--akzent);color:var(--akzent);background:var(--paper)}
.pfeil:disabled{opacity:.25;pointer-events:none}

/* Register-Laschen am rechten Buchrand */
.laschen{position:absolute;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:6px;z-index:5}
.laschen button{writing-mode:vertical-rl;font:500 11px var(--label);letter-spacing:.12em;text-transform:uppercase;background:var(--paper2);color:var(--ink2);padding:16px 8px 16px 9px;border-radius:0 6px 6px 0;box-shadow:2px 2px 6px rgba(60,40,35,.1);transition:.25s;border-left:2px solid transparent}
.laschen button:hover{background:var(--paper);color:var(--akzent);transform:translateX(3px)}
.laschen button[aria-current=true]{background:var(--akzent);color:#fff;transform:translateX(5px)}

.leiste{position:fixed;bottom:16px;left:0;right:0;text-align:center;font:500 11px var(--label);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);pointer-events:none}

/* Seite */
.seite{background:var(--paper);overflow:hidden;font-size:inherit}
.seite .s-in{position:absolute;inset:0;padding:3.4em 3.1em 4em;display:flex;flex-direction:column;overflow:hidden}
.stf__item.--left .s-in,.seite.links .s-in{padding-right:3.6em}
.seite::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,0) 88%,rgba(60,40,35,.09) 100%)}
.stf__item.--right::after{background:linear-gradient(270deg,rgba(0,0,0,0) 88%,rgba(60,40,35,.1) 100%)}
.s-fuss{position:absolute;left:3.1em;right:3.1em;bottom:1.7em;display:flex;justify-content:space-between;font:500 .66em var(--label);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.stf__item.--right .s-fuss{flex-direction:row-reverse}

.kicker{font:500 .7em var(--label);letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin:0 0 1.2em;display:flex;align-items:center;gap:.9em}
.kicker i{font-style:normal;color:var(--akzent)}
.kicker::after{content:"";width:3em;height:1px;background:var(--akzent2)}
h2,h3,.aussage{font-family:var(--display);font-weight:420;letter-spacing:-.018em;margin:0;color:var(--ink)}
h2{font-size:2.55em;line-height:1.04}
h3{font-size:1.9em;line-height:1.06}
h4{font:500 1.12em/1.2 var(--display);margin:0}
.lead{font:400 italic 1.14em/1.45 var(--text);color:var(--ink2);margin:1.1em 0 0}
.lead.klein{font-size:1em}
p{margin:0}
.hinweis{font:400 .72em/1.45 var(--label);color:var(--mute);margin-top:auto}
.knopf{display:inline-flex;align-items:center;justify-content:center;font:500 .72em var(--label);letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--ink);color:var(--ink);padding:1em 1.5em;border-radius:99px;text-decoration:none;transition:.2s;white-space:nowrap}
.knopf:hover{background:var(--ink);color:var(--paper)}
.knopf.voll{background:var(--akzent);border-color:var(--akzent);color:#fff}
.knopf.voll:hover{background:var(--ink);border-color:var(--ink)}
.knoepfe{display:flex;flex-wrap:wrap;gap:.6em;margin-top:1.4em}
figure{margin:0;position:relative}
figure img{width:100%;height:100%;object-fit:cover}
figcaption{font:italic .78em var(--text);color:var(--ink2);margin-top:.6em}

/* Titel */
.titel{background:#2A1F1F;color:#fff}
.t-bild{position:absolute;inset:0}
.t-bild img,.t-bild video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.t-bild::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(252,251,249,.94) 0%,rgba(252,251,249,.55) 26%,rgba(252,251,249,0) 44%,rgba(30,18,20,0) 60%,rgba(30,18,20,.6) 100%)}
.t-oben{position:absolute;top:2em;left:2.6em;right:2.6em;display:flex;justify-content:space-between;font:500 .68em var(--label);letter-spacing:.16em;text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:.9em}
.t-name{position:absolute;top:1.2em;left:.55em;right:1em;font:400 6.1em/.86 var(--display);letter-spacing:-.035em;color:var(--ink);margin:0;padding-top:.32em}
.t-name em{color:var(--akzent)}
.t-unten{position:absolute;left:2.6em;right:2.6em;bottom:2.4em;color:#fff}
.t-unten h1{font:420 2.6em/1 var(--display);margin:0 0 .5em;letter-spacing:-.02em}
.t-unten h1 em{color:#fff}
.t-unten ul{list-style:none;margin:0;padding:.8em 0 0;border-top:1px solid rgba(255,255,255,.55);display:grid;grid-template-columns:1fr 1fr;gap:.4em 1.4em;font:500 .66em/1.4 var(--label);letter-spacing:.06em;text-transform:uppercase}

/* Inhalt */
.inhalt h2{font-size:4em}
.ihv{list-style:none;margin:1.6em 0 0;padding:0;border-top:1px solid var(--ink)}
.ihv button{width:100%;display:flex;align-items:baseline;gap:.6em;padding:.75em 0;border-bottom:1px solid var(--line);font:400 1.35em var(--display);text-align:left}
.ihv button i{flex:1;border-bottom:1px dotted var(--mute);transform:translateY(-.25em)}
.ihv button b{font:500 .55em var(--label);color:var(--akzent);letter-spacing:.1em}
.ihv button:hover span{color:var(--akzent)}
.editorial{margin-top:auto;font:400 italic 1.05em/1.5 var(--text);color:var(--ink2);padding-top:1.4em;border-top:1px solid var(--line)}

/* Bildseiten */
.bildseite .s-in{padding:0}
.bildseite .voll{position:absolute;inset:0}
.bildseite figcaption{position:absolute;left:1.4em;bottom:1.2em;margin:0;background:rgba(252,251,249,.86);padding:.35em .8em}
.bildseite .s-fuss{color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.4)}
.bildseite .s-fuss span:last-child{display:none}

/* Text */
.text h2{font-size:2.8em}
.spalten{columns:2;column-gap:1.6em;margin-top:1.6em;font-size:.9em;line-height:1.55}
.spalten p+p{margin-top:.8em}
.initiale::first-letter{float:left;font:400 3.6em/.8 var(--display);color:var(--akzent);margin:.06em .1em 0 0}
.first .preis-gross{margin-top:auto;display:flex;align-items:baseline;gap:.8em;border-top:1px solid var(--ink);padding-top:1em}
.first .preis-gross b{font:420 3.6em/1 var(--display);color:var(--akzent)}
.first .preis-gross span{font:500 .7em var(--label);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.first h2{font-size:3.1em}

/* Zitat */
.oben-bild{height:42%;flex:none;margin:-3.4em -3.1em 1.6em}
.stf__item.--left .oben-bild{margin-right:-3.6em}
.oben-bild.hoch{height:48%}
.oben-bild figcaption{position:absolute;left:1.4em;bottom:1em;margin:0;background:rgba(252,251,249,.86);padding:.3em .8em}
.zitat blockquote{margin:0;font:400 1.75em/1.18 var(--display);letter-spacing:-.01em}
.zitat cite{display:block;margin-top:.7em;font:500 .4em var(--label);letter-spacing:.16em;text-transform:uppercase;color:var(--mute);font-style:normal}
.paar{display:grid;grid-template-columns:1fr 1fr;gap:.8em;margin-top:auto;height:24%}

/* Prinzip */
.prinzip{background:var(--paper2)}
.prinzip .aussage{font-size:3.5em;line-height:1.02;margin-top:1.2em}
.prinzip .unten-text{margin-top:auto;font-size:.95em;line-height:1.55;color:var(--ink2);border-top:1px solid var(--line);padding-top:1.2em}

/* Schritte */
.schritte{list-style:none;margin: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:italic 400 1em var(--display);color:var(--akzent)}
.schritte p{font-size:.84em;line-height:1.45;color:var(--ink2);margin-top:.3em}

/* Register */
.register h2{font-size:2.1em}
.reg{list-style:none;margin:1.2em 0 0;padding:0;border-top:1px solid var(--ink)}
.reg button{width:100%;display:grid;grid-template-columns:2em 1fr auto;align-items:baseline;gap:.5em;padding:.42em 0;border-bottom:1px solid var(--line);text-align:left;transition:.2s}
.reg button i{font:500 .62em var(--label);color:var(--mute);font-style:normal;letter-spacing:.08em}
.reg button span{font:400 1.08em var(--display)}
.reg button small{font:500 .6em var(--label);color:var(--mute);letter-spacing:.06em;text-transform:uppercase}
.reg button:hover span,.reg button[aria-pressed=true] span{color:var(--akzent)}
.reg button[aria-pressed=true]{padding-left:.6em;background:linear-gradient(90deg,rgba(92,0,34,.06),transparent)}
.register-detail{background:var(--paper2)}
.rd{display:flex;flex-direction:column;height:100%;animation:rdein .45s ease}
@keyframes rdein{from{opacity:0;transform:translateY(.6em)}to{opacity:1;transform:none}}
.rd-bild{height:40%;flex:none;margin:-3.4em -3.1em 1.4em;overflow:hidden}
.rd-bild img{width:100%;height:100%;object-fit:cover}
.rd h3{font-size:2.3em}
.rd-nutzen{font:400 italic 1.08em/1.4 var(--text);color:var(--ink2);margin-top:.5em}
.rd ul{list-style:none;padding:0;margin:1em 0 0;font-size:.82em;line-height:1.4}
.rd ul li{display:grid;grid-template-columns:5.5em 1fr;gap:.8em;padding:.45em 0;border-top:1px solid var(--line)}
.rd ul b{font:500 .82em var(--label);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.rd-preise{margin-top:.8em;border-top:1px solid var(--ink);padding-top:.5em}
.rd-preise p{display:flex;justify-content:space-between;font-size:.86em;padding:.2em 0}
.rd-preise b{font:500 1.05em var(--display);color:var(--akzent)}
.rd .knopf{align-self:flex-start;margin-top:auto}

/* Pflege + Shop */
.pflege h2{font-size:2.3em}
.wege{display:grid;grid-template-columns:1fr 1fr;gap:1.2em;margin-top:auto}
.wege div{border-top:1px solid var(--ink);padding-top:.7em}
.wege p{font-size:.84em;line-height:1.45;color:var(--ink2);margin-top:.3em}
.shop h2{font-size:2.6em}
.pks{display:grid;grid-template-columns:1fr 1fr;gap:1.1em 1.2em}
.pks.zwei{margin-top:auto}
.pks.vier{grid-template-rows:1fr 1fr;flex:1;min-height:0}
.pk{display:flex;flex-direction:column;min-height:0;border-top:1px solid var(--ink);padding-top:.6em}
.pk-bild{flex:1;min-height:5em;background:#fff;overflow:hidden;margin-bottom:.6em}
.pks.zwei .pk-bild{flex:none;height:12em}
.pk-bild img{width:100%;height:100%;object-fit:contain;padding:.4em}
.pk h4{font-size:1em;line-height:1.15}
.pk p{font-size:.72em;line-height:1.35;color:var(--ink2);margin-top:.2em}
.pk-fuss{display:flex;align-items:center;gap:.5em;margin-top:.5em;font-size:.78em}
.pk-fuss b{font:500 1.1em var(--display);color:var(--akzent)}
.pk-fuss span{color:var(--mute);font-size:.86em;flex:1}
.pk-add{font:500 .82em var(--label);letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--ink);border-radius:99px;padding:.5em .9em;transition:.2s}
.pk-add:hover,.pk-add[aria-pressed=true]{background:var(--akzent);border-color:var(--akzent);color:#fff}
.pk.gutschein{justify-content:center;background:var(--paper2);padding:1em;border-top:1px solid var(--akzent)}
.pk.gutschein h4{font-size:1.5em;color:var(--akzent)}
.pk.gutschein .knopf{align-self:flex-start;margin-top:.9em}
.shop .hinweis{margin-top:1em}

/* Foto + Kontakt */
.foto h2{font-size:2.3em}
.kontakt h2{font-size:2.8em}
.adresse{font:400 1.12em/1.45 var(--display);margin-top:1.3em}
.zeiten{width:100%;border-collapse:collapse;margin-top:1.4em;font-size:.88em}
.zeiten td{padding:.5em 0;border-top:1px solid var(--line)}
.zeiten td+td{text-align:right}

/* Rückseite */
.rueck{background:var(--paper2)}
.rueck .s-in{align-items:center;justify-content:center;text-align:center}
.r-logo{width:52%;height:auto}
.r-zeile{font:400 2.3em/1.05 var(--display);margin-top:1.4em}
.r-adr{font:500 .72em/1.8 var(--label);letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);margin-top:2em}
.r-ki{font:italic .74em var(--text);color:var(--mute);margin-top:2.6em;max-width:24em}
.r-link{margin-top:1.6em;font:500 .72em var(--label);letter-spacing:.1em;text-transform:uppercase;color:var(--akzent)}

/* Merkliste */
.merk{position:fixed;left:22px;bottom:18px;z-index:30;font:500 12px var(--label);letter-spacing:.1em;text-transform:uppercase;background:var(--akzent);color:#fff;padding:12px 18px;border-radius:99px;box-shadow:0 8px 24px rgba(92,0,34,.25)}
.merk b{margin-left:6px}
.ml{position:fixed;left:22px;bottom:72px;z-index:31;width:min(360px,calc(100vw - 44px));background:var(--paper);padding:22px;box-shadow:0 20px 60px rgba(40,25,25,.25);font-size:15px}
.ml-kopf{display:flex;justify-content:space-between;align-items:center}
.ml-kopf h3{font-size:24px}
.ml-liste{list-style:none;padding:0;margin:14px 0;max-height:40vh;overflow:auto}
.ml-liste li{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-top:1px solid var(--line);font-size:14px}
.ml-liste button{color:var(--mute)}
.ml-summe{display:flex;justify-content:space-between;border-top:1px solid var(--ink);padding-top:10px}
.ml .knopf{font-size:11px}
.ml .hinweis{font-size:11px;margin-top:12px}

/* Handy: eine Seite, Laschen unten als Leiste */
@media (max-width:760px){
  .hk{padding:10px 16px}.hk-hinweis{display:none}.hk-marke img{height:28px}
  .tisch{grid-template-columns:1fr;padding:54px 10px 64px}
  .pfeil{display:none}
  .laschen{position:fixed;top:auto;bottom:0;left:0;right:0;transform:none;flex-direction:row;gap:0;overflow-x:auto;background:var(--paper);border-top:1px solid var(--line);padding:0 6px;scrollbar-width:none}
  .laschen button{writing-mode:horizontal-tb;border-radius:0;box-shadow:none;background:none;padding:15px 11px;white-space:nowrap;font-size:10.5px}
  .laschen button[aria-current=true]{background:none;color:var(--akzent);transform:none;box-shadow:inset 0 -2px 0 var(--akzent)}
  .leiste{display:none}
  .merk{bottom:60px;left:auto;right:12px}
  .ml{left:12px;bottom:110px}
  .spalten{columns:1}
}
@media (prefers-reduced-motion:reduce){.rd{animation:none}}
.handy .seite .s-in{overflow-y:auto;-webkit-overflow-scrolling:touch}
.unten-bild{margin:auto -3.6em -4em -3.1em;height:30%;flex:none}
.mitte-bild{flex:1;min-height:6em;margin:1.4em 0}
.paar{height:34%}
.pks.zwei .pk-bild{height:auto;flex:1}
.shop .pks.zwei{flex:1;min-height:0;margin-top:1.4em}
.shop .pks.zwei .pk{min-height:0}
.kontakt .zeiten{margin-top:0}
.handy .mitte-bild{flex:none;height:14em}
.seite:has(.unten-bild) .s-fuss{color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.45)}
.handy .t-name{font-size:4.3em;left:.6em}
.handy .t-unten ul{grid-template-columns:1fr}
/* Papier: feine Faser + leichte Wölbung zum Bund */
.seite{background-color:var(--paper);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .27 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.prinzip,.register-detail,.rueck{background-color:var(--paper2)}
.stf__item.--left::after{background:linear-gradient(90deg,rgba(0,0,0,0) 80%,rgba(60,40,35,.05) 92%,rgba(60,40,35,.16) 100%)}
.stf__item.--right::after{background:linear-gradient(270deg,rgba(0,0,0,0) 82%,rgba(60,40,35,.06) 93%,rgba(60,40,35,.18) 100%)}
.titel::after{background:linear-gradient(270deg,rgba(0,0,0,0) 94%,rgba(0,0,0,.18) 100%)}
/* Editorial */
.ed-kopf{display:grid;grid-template-columns:38% 1fr;gap:1.6em;align-items:end;margin-top:.4em}
.ed-bild{aspect-ratio:4/5;overflow:hidden}
.ed-kopf h2{font-size:2.7em;line-height:1.02}
.ed-text{margin-top:1.8em;font-size:.98em;line-height:1.6;color:var(--ink)}
.ed-text p+p{margin-top:.8em}
.ed-gruss{margin-top:auto;font:400 1.5em var(--display);border-top:1px solid var(--line);padding-top:.8em;display:flex;justify-content:space-between;align-items:baseline}
.ed-gruss small{font:500 .42em var(--label);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.handy .ed-kopf{grid-template-columns:40% 1fr}
.handy .ed-kopf h2{font-size:2em}
.handy .ed-gruss{flex-direction:column;gap:.3em}
/* Schub: geschlossenes Heft steht mittig, öffnet sich zur Mitte */
#buch,.laschen{transition:none}
.bereit #buch,.bereit .laschen{transition:transform .9s cubic-bezier(.45,.05,.25,1)}
#buch{transform:translateX(var(--schub,0px))}
.laschen{transform:translate(var(--schubL,0px),-50%)}
.handy .laschen{transform:none}
@media (prefers-reduced-motion:reduce){#buch,.laschen{transition:none}}
/* Zen-Titel: helles Tuschebild, dunkle Schrift */
.titel.zen{background:#F4EEE6;color:var(--ink)}
.titel.zen .t-bild img,.titel.zen .t-bild video{object-position:50% 100%}
.titel.zen .t-bild::after{background:linear-gradient(180deg,rgba(244,238,230,.0) 0%,rgba(244,238,230,0) 62%,rgba(244,238,230,.78) 86%,rgba(244,238,230,.92) 100%)}
.titel.zen .t-unten{color:var(--ink)}
.titel.zen .t-unten h1 em{color:var(--akzent)}
.titel.zen .t-unten ul{border-top-color:rgba(42,39,37,.35);color:var(--ink2)}
/* Zen: Text in den Nebel, unten bleiben Blüten und Wasser frei */
.titel.zen .t-unten{top:41%;bottom:auto;right:38%}
.titel.zen .t-unten h1{font-size:2.3em}
.titel.zen .t-unten ul{grid-template-columns:1fr}
.titel.zen .t-bild::after{background:linear-gradient(100deg,rgba(244,238,230,.7) 0%,rgba(244,238,230,.35) 45%,rgba(244,238,230,0) 70%)}
.handy .titel.zen .t-unten{right:30%;top:40%}

/* ===== Papier-Look v2: alles im Beige des Covers ===== */
:root{--paper:#F4EEE6;--paper2:#ECE4D8;--tisch:#E3D9CB}
body{background-color:#E6DDD0;background-image:
  radial-gradient(120% 90% at 50% 42%,rgba(250,246,240,.75) 0%,rgba(250,246,240,0) 62%),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .36 0 0 0 0 .28 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.seite{background-color:var(--paper)}
.prinzip,.register-detail,.rueck{background-color:var(--paper2)}
.pk-bild{background:#FBF8F3}
.hk-link{background:rgba(244,238,230,.7);border-color:rgba(42,39,37,.18)}
.pfeil{background:rgba(244,238,230,.75);border-color:rgba(42,39,37,.16)}

/* Register-Laschen wie gestanzte Papierreiter */
.laschen{gap:4px}
.laschen button{position:relative;background:linear-gradient(90deg,#E9E0D2 0%,#F2EBE1 60%,#EFE7DC 100%);color:var(--ink2);
  font:500 10.5px var(--label);letter-spacing:.16em;padding:18px 9px 18px 10px;border-radius:0 9px 9px 0;
  border:1px solid rgba(42,39,37,.1);border-left:0;box-shadow:1px 1px 3px rgba(60,40,30,.12),inset -1px 0 0 rgba(255,255,255,.5);transform:none}
.laschen button::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.6;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .34 0 0 0 0 .28 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.laschen button:hover{background:linear-gradient(90deg,#EDE5D9,#F7F2EA);color:var(--ink);transform:translateX(3px)}
.laschen button[aria-current=true]{background:linear-gradient(90deg,#F1EADF,#F9F5EF);color:var(--akzent);transform:translateX(7px);
  box-shadow:2px 2px 6px rgba(60,40,30,.16),inset -3px 0 0 var(--akzent)}

/* Cover: Schrift über dem Bambus lesbar halten (Papier-Halo) */
.titel.zen .t-name,.titel.zen .t-unten h1{text-shadow:0 0 .12em #F4EEE6,0 0 .3em #F4EEE6,0 0 .55em rgba(244,238,230,.9)}
.titel.zen .t-unten ul{text-shadow:0 0 6px #F4EEE6,0 0 12px #F4EEE6}
.titel.zen .t-bild::after{background:
  radial-gradient(70% 34% at 30% 26%,rgba(244,238,230,.82) 0%,rgba(244,238,230,.45) 55%,rgba(244,238,230,0) 100%),
  radial-gradient(60% 26% at 26% 52%,rgba(244,238,230,.78) 0%,rgba(244,238,230,.35) 60%,rgba(244,238,230,0) 100%)}
.handy .laschen button{background:none;border:0;box-shadow:none}
.handy .laschen button::before{display:none}
.handy .laschen{background:var(--paper)}
/* Bibliotheks-Lücke bei weichem Umschlag: beim Zuklappen bleibt die Innenseite flach liegen.
   Solange Titel/Rückseite gerade umschlagen, die statisch liegende Innenseite ausblenden. */
.seite.stf__item{transition:opacity .22s ease}
/* (Regel „Nachbarseite beim Zuklappen ausblenden“ entfernt: sie traf die gerade umblätternde Seite) */

/* Prinzip-Seite: Bild füllt die Mitte */
.prinzip-bild{flex:1;min-height:0;margin:1.6em 0 1.4em;overflow:hidden}
.prinzip-bild img{width:100%;height:100%;object-fit:cover}
.prinzip .unten-text{margin-top:0}

/* ===== Heft-Haptik (v14): Papierstapel, Bund, Korn, Glanzumschlag, Auflage ===== */
#buch{position:relative;filter:drop-shadow(0 2px 2px rgba(60,40,35,.18)) drop-shadow(0 18px 22px rgba(60,40,35,.18)) drop-shadow(0 46px 60px rgba(60,40,35,.16))}
/* Papierstapel an den Außenkanten – Dicke folgt dem Lesefortschritt (heft.js setzt --dl / --dr in px) */
#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,#ddd4c9 1px 2px,#efe9e1 2px 3px)}
#buch::before{left:calc(var(--dl,0px) * -1);width:var(--dl,0px);border-radius:3px 0 0 3px;box-shadow:inset 2px 0 3px rgba(60,40,35,.18)}
#buch::after{right:calc(var(--dr,0px) * -1);width:var(--dr,0px);border-radius:0 3px 3px 0;box-shadow:inset -2px 0 3px rgba(60,40,35,.18)}
#buch.zu-vorne::before{opacity:0}
#buch.zu-vorne::after{right:auto;left:100%}
#buch.zu-hinten::after{opacity:0}
/* Papierkorn auf allen Seiten */
.seite{background-color:var(--paper);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .27 0 0 0 0 .24 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* Bund: Papier wölbt sich zur Mitte – Schatten in der Falz, kleiner Lichtgrat davor */
.stf__item.--left::after{background:
  linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.10) 3%,rgba(255,255,255,0) 9%),
  linear-gradient(90deg,rgba(0,0,0,0) 74%,rgba(255,255,255,.18) 84%,rgba(60,40,35,.06) 90%,rgba(60,40,35,.20) 97%,rgba(40,25,20,.34) 100%)}
.stf__item.--right::after{background:
  linear-gradient(270deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.10) 3%,rgba(255,255,255,0) 9%),
  linear-gradient(270deg,rgba(0,0,0,0) 76%,rgba(255,255,255,.16) 85%,rgba(60,40,35,.07) 91%,rgba(60,40,35,.22) 97%,rgba(40,25,20,.36) 100%)}
/* Glanz-Umschlag (gestrichenes Papier) auf Titel und Rückseite */
.titel::before,.rueck::before{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;
  background:linear-gradient(118deg,rgba(255,255,255,0) 28%,rgba(255,255,255,.22) 38%,rgba(255,255,255,.05) 46%,rgba(255,255,255,0) 58%),
  linear-gradient(0deg,rgba(255,255,255,.06),rgba(255,255,255,0) 30%);mix-blend-mode:screen}
.titel::after{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;box-shadow:inset 3px 0 0 rgba(255,255,255,.35),inset 7px 0 10px rgba(0,0,0,.12)}
.seite::after{z-index:5}
/* Bund dezenter (Sebastian 08.10.) */
.stf__item.--left::after{background:linear-gradient(90deg,rgba(0,0,0,0) 86%,rgba(255,255,255,.10) 91%,rgba(60,40,35,.05) 95%,rgba(60,40,35,.13) 100%)}
.stf__item.--right::after{background:linear-gradient(270deg,rgba(0,0,0,0) 87%,rgba(255,255,255,.10) 92%,rgba(60,40,35,.05) 96%,rgba(60,40,35,.14) 100%)}

/* Schriftzug wie auf Reginas Visitenkarte (statt Logo-Grafik, 12.10.2026) */
.wortmarke{display:inline-flex;flex-direction:column;align-items:center;line-height:1;font-family:var(--label);text-decoration:none}
.wortmarke b{font-weight:500;font-size:17px;letter-spacing:.06em;color:#980C54}
.wortmarke small{font-weight:400;font-size:10.5px;letter-spacing:.08em;color:#A8A8A8;margin-top:5px}
.wortmarke i{font-style:normal;font-weight:500;font-size:11px;letter-spacing:.06em;color:#980C54;margin-top:1.4em}
.wortmarke.gross b{font-size:1.9em}.wortmarke.gross small{font-size:1.05em}.wortmarke.gross i{font-size:1.05em}
@media (max-width:700px){.wortmarke b{font-size:15px}.wortmarke small{font-size:9.5px}}
.rd-mehr a{font:500 .72em var(--label);letter-spacing:.08em;text-transform:uppercase;color:var(--akzent)}

/* Unterschrift (aus Reginas Mail-Signatur nachgezeichnet, SVG) – 12.10.2026 */
.wortmarke .sig{display:block;height:30px;width:auto;margin:0 0 3px}
.wortmarke .sig + b{font-size:12.5px;letter-spacing:.12em}
.wortmarke .sig ~ small{font-size:9px;margin-top:3px}
.wortmarke.gross .sig{height:auto;width:100%;margin-bottom:.5em}
.wortmarke.gross .sig + b{font-size:1.5em}.wortmarke.gross .sig ~ small{font-size:1em}
.sig-zitat{display:inline-block;height:2.4em;width:auto;vertical-align:middle;margin-top:.4em}
.gruss-sig{display:inline-flex;align-items:center;gap:.5em}.sig-gruss{height:2.6em;width:auto}
@media (max-width:700px){.wortmarke .sig{height:24px}.wortmarke .sig + b{font-size:11px}.wortmarke .sig ~ small{display:none}}
.hk-marke .wortmarke small{display:none}

/* Preise vollständig, lange Listen scrollen in der Seite */
.rd-preise{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-right:.3em;scrollbar-width:thin}
.rd-preise p.rd-info{font-style:italic;color:var(--ink2);font-size:.78em}
.rd .knopf{flex:none;margin-top:.8em}
/* Links in Fließtext/Hinweisen nie Browser-Blau */
.seite a:not(.knopf),.r-recht a,.hinweis a{color:var(--akzent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.seite a:not(.knopf):hover{color:var(--akzent2)}
/* Handy: ganze Detailseite scrollt, Preise immer sichtbar */
.handy .rd{overflow-y:auto;overscroll-behavior:contain}
.handy .rd-bild{height:26%}
.handy .rd-preise{flex:none;overflow:visible}
.handy .rd .knopf{margin-bottom:2.6em}
/* Rückseite: Unterschrift dezenter (Sebastian 12.10.: „zu mächtig“) */
.wortmarke.gross .sig{width:auto;height:2.6em;margin-bottom:.45em}
.wortmarke.gross .sig + b{font-size:1.15em;letter-spacing:.14em}
.wortmarke.gross .sig ~ small{font-size:.85em}
/* Handy: Seiten mit viel Inhalt (z. B. Kontakt) dürfen innen scrollen statt abzuschneiden */
.handy .seite .s-in{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}

/* ===== Medical-Look v3 (14.10.2026, Reginas Wunsch): heller, kühler, „clean“ – Beere #980C54 bleibt ===== */
:root{--paper:#FAFAF9;--paper2:#F1F2F2;--tisch:#E6E9EA;--ink:#25272A;--ink2:#55595E;--mute:#6C7075;--line:rgba(30,34,40,.13);--beere:#980C54}
body{background-color:#E9ECED;background-image:
  radial-gradient(120% 90% at 50% 42%,rgba(255,255,255,.8) 0%,rgba(255,255,255,0) 62%),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .33 0 0 0 0 .35 0 0 0 0 .38 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.seite{background-color:var(--paper);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .31 0 0 0 0 .33 0 0 0 .035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.prinzip,.register-detail,.rueck{background-color:var(--paper2)}
.pk-bild{background:#fff}
.hk-link{background:rgba(250,250,249,.75);border-color:rgba(30,34,40,.16)}
.pfeil{background:rgba(250,250,249,.8);border-color:rgba(30,34,40,.14)}
#buch{filter:drop-shadow(0 2px 2px rgba(30,40,50,.14)) drop-shadow(0 18px 22px rgba(30,40,50,.13)) drop-shadow(0 46px 60px rgba(30,40,50,.12))}
#buch::before,#buch::after{background:repeating-linear-gradient(90deg,#f8f9f9 0 1px,#dde0e3 1px 2px,#eef0f1 2px 3px)}
.stf__item.--left::after{background:linear-gradient(90deg,rgba(0,0,0,0) 86%,rgba(255,255,255,.10) 91%,rgba(30,40,50,.04) 95%,rgba(30,40,50,.11) 100%)}
.stf__item.--right::after{background:linear-gradient(270deg,rgba(0,0,0,0) 87%,rgba(255,255,255,.10) 92%,rgba(30,40,50,.04) 96%,rgba(30,40,50,.12) 100%)}
.laschen button{background:linear-gradient(90deg,#E6E9EB 0%,#F2F3F4 60%,#EEF0F1 100%);border-color:rgba(30,34,40,.1);box-shadow:1px 1px 3px rgba(30,40,50,.1),inset -1px 0 0 rgba(255,255,255,.6)}
.laschen button:hover{background:linear-gradient(90deg,#ECEEF0,#F8F9F9)}
.laschen button[aria-current=true]{background:linear-gradient(90deg,#F2F3F4,#FCFCFC);box-shadow:2px 2px 6px rgba(30,40,50,.13),inset -3px 0 0 var(--akzent)}
.handy .laschen button{background:none;box-shadow:none}
.handy .laschen button[aria-current=true]{box-shadow:inset 0 -2px 0 var(--akzent)}
picture{display:contents}

/* Titel „clean“: Kopf, Studiofotos im Querformat (nie beschnitten), Spruch */
.titel.klar{background:var(--paper);color:var(--ink)}
.titel.klar::after{box-shadow:inset 3px 0 0 rgba(255,255,255,.5),inset 7px 0 10px rgba(30,40,50,.07)}
.t-klar{position:absolute;inset:0;display:flex;flex-direction:column;padding:2em 2.6em 2.3em}
.titel.klar .t-oben{position:static;flex:none}
.t-kopf{flex:none;margin-top:1.15em}
.titel.klar .t-name{position:static;font:400 5.6em/.86 var(--display);letter-spacing:-.035em;color:var(--ink);padding:0;margin:0 0 0 -.05em}
.t-claim{margin:.85em 0 0 .1em;font:400 1.02em/1 var(--label);letter-spacing:.14em;color:#8C9096}
.t-show{position:relative;flex:none;width:100%;aspect-ratio:3/2;margin-top:auto;overflow:hidden;background:var(--paper2)}
.t-dia{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1.8s ease-in-out}
.t-dia.an{opacity:1}
.t-dia img{width:100%;height:100%;object-fit:cover}
.titel.klar .t-unten{position:static;flex:none;margin-top:1.3em;color:var(--ink);border-top:1px solid var(--line);padding-top:1em}
.titel.klar .t-unten h1{font:400 1.72em/1.16 var(--display);letter-spacing:-.012em;margin:0;color:var(--ink);max-width:17em}
.titel.klar .t-unten h1 em{color:var(--beere)}
.handy .titel.klar .t-name{font-size:4.3em}
.handy .t-klar{padding:1.7em 1.6em 2em}
.handy .titel.klar .t-unten h1{font-size:1.5em}
@media (prefers-reduced-motion:reduce){.t-dia{transition:none}}

/* Zitat-Seite: längerer Spruch („Mein Fokus …“) */
.zitat blockquote.lang{font-size:1.45em;line-height:1.24}
/* Porträt in Ich-Form (mehr Text): etwas kompakter, Bild unten schmaler */
.text .spalten{font-size:.84em;line-height:1.5;margin-top:1.2em}
.text .lead{font-size:1.04em}
.seite .unten-bild{height:24%}
/* Handy: Seite 6 zeigt das Produktbild (vorher zusammengeklappt), Porträt-Text läuft nicht unter die Fußzeile */
.handy .prinzip-bild{flex:none;height:13em;margin:1.2em 0}
.handy .seite.text .s-in{bottom:3.6em}
.handy .seite.text .unten-bild{margin:1.4em -3.6em 0 -3.1em;height:13em}
.handy .seite:has(.unten-bild) .s-fuss{color:var(--mute);text-shadow:none}
/* Handy: Register-Bild genau so groß wie sichtbar (vorher breiter als der Ausschnitt → Motive am Rand abgeschnitten) */
.handy .rd-bild{margin:0 0 1.2em;height:24%}
/* Handy-Titel: Foto randlos, Schrift größer – kein Loch zwischen Kopf und Bild */
.handy .titel.klar .t-name{font-size:5.1em}
.handy .t-claim{font-size:1.1em}
.handy .t-show{width:auto;margin-left:-1.6em;margin-right:-1.6em}
.handy .titel.klar .t-unten h1{font-size:1.75em}

/* Änderungen 15.10.2026 (2. Runde, Sebastian/ORION) */
/* Kopf links: „medical skincare“ zart grau unter KOSMETIK WAGRAM (war ausgeblendet) */
.hk-marke .wortmarke small{display:block;color:#A8A8A8;font-size:9px;margin-top:3px}
/* Pflege-Seiten: Kontakt-Links, Bestell-Hinweis, Online-Shop nur als letzte Alternative */
.wege p a,.bestell-hinweis a,.shop-alt a{color:var(--akzent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.bestell-hinweis{font:400 .95em/1.45 var(--text);color:var(--ink);margin-top:.7em}
.shop-alt{font:400 .8em/1.45 var(--label);color:var(--ink2);margin-top:auto;padding-top:.8em}
.shop-alt + .hinweis{margin-top:.5em}
/* Kontakt: Stornobedingungen direkt sichtbar */
.kontakt .hinweis{margin-top:.8em}
.storno{font:400 .68em/1.42 var(--label);color:var(--ink2);margin-top:.5em}
.storno h4{font:500 1em/1.3 var(--label);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);margin:.55em 0 .15em}
.storno p{margin:0 0 .2em}
/* Kontakt (Computer): Platz für den vollen Storno-Text – das kleine Raumfoto entfällt dort (am Handy bleibt es) */
html:not(.pager) .kontakt:has(.storno) .mitte-bild{display:none}
html:not(.pager) .kontakt:has(.storno) .zeiten{margin-top:1.4em}
/* Kopf: Wortmarke mit „medical skincare“ etwas kompakter, damit sie nicht ans Heft stößt */
.hk{padding-top:10px}.hk-marke .wortmarke small{font-size:8.5px;margin-top:2px}
/* 15.10.2026: Foto & Make-up auch am Computer ohne Gutschein-Foto (Regina: generell weg) */
.foto .oben-bild{display:none}
.foto .s-in{display:flex;flex-direction:column;justify-content:center;height:100%}

/* Änderungen 15.10.2026 (3. Runde, Sebastian/ORION): Seite 15 Raumfoto, 16 Kontakt, 17|18 Marius-Doppelseite – Fotos im Originalformat */
.quer-bild{margin:0;flex:none}
.quer-bild img{display:block;width:100%;height:auto}
.raumseite .s-in{padding:0;justify-content:center}
.marius-a .quer-bild{margin-top:auto}
.marius-b .quer-bild{margin:-3.4em -3.1em 1.8em}
.marius-b .unten-text{margin-top:0}
.marius-b .knopf{align-self:flex-start;margin-top:1.4em}
.seite.raumseite .s-in{padding:0!important}
.marius-a .aussage{margin-top:.9em}
/* 15.10.2026: Rückseite – „medical skincare“ auch am Handy zeigen (Regina) */
.rueck .wortmarke.gross .sig ~ small{display:block!important;color:#A8A8A8}

/* 4. Runde 15.10.2026: Porträt-Seite am Computer – Bildstreifen höher (2:1), damit Regina UND die Behandlung drauf sind; Text etwas kompakter */
html:not(.pager) .seite.text:not(.first) .unten-bild{height:auto;aspect-ratio:2/1}
html:not(.pager) .seite.text:not(.first) .unten-bild img{height:100%}
html:not(.pager) .seite.text:not(.first) .unten-bild{aspect-ratio:2.4/1}
html:not(.pager) .seite.text:not(.first) .spalten{font-size:.8em;line-height:1.46;margin-top:.9em}
html:not(.pager) .seite.text:not(.first) .lead{margin-top:.8em}
html:not(.pager) .seite.text:not(.first) .unten-bild{position:relative;min-height:0;overflow:hidden}
html:not(.pager) .seite.text:not(.first) .unten-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* 16.10.2026: Instagram/Facebook – fester Platz unten rechts (Computer), Kontaktseite, Rückseite */
.sozial{display:inline-flex;gap:.55em;align-items:center;vertical-align:middle}
.sozial a{display:inline-flex;align-items:center;gap:.4em;color:var(--akzent);text-decoration:none;transition:color .2s,transform .2s}
.sozial a:hover{color:var(--akzent2);transform:translateY(-1px)}
.sozial svg{width:1.25em;height:1.25em;flex:none}
.sozial-fix{position:fixed;right:22px;bottom:12px;z-index:5;gap:.7em;font-size:15px}
.sozial-fix a{width:2.1em;height:2.1em;justify-content:center;border-radius:50%;background:rgba(252,251,249,.85);box-shadow:0 1px 4px rgba(42,39,37,.12)}
.sozial-zeile{margin-top:.9em;font:500 .72em var(--label);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);display:flex;align-items:center;gap:.8em;flex-wrap:wrap}
.sozial-text a{font:500 1em var(--label);letter-spacing:.06em;text-transform:none}
.r-sozial{margin-top:.8em;justify-content:center;font-size:1.05em}