/* Kosmetik Wagram – Handy-Fassung des Magazins (15.10.2026, Sebastian/ORION).
   Wirkt NUR, wenn <html class="pager"> gesetzt ist (Schalter im <head>: Breite ≤ 760 px oder Handy quer).
   Statt Page-Flip: jede Magazinseite = eine Bildschirmseite, waagrecht wischen (scroll-snap), senkrecht in der Seite scrollen.
   Kopfleiste (Logo + Menü) und Fußleiste (Pfeile + Seite) liegen AUSSERHALB des Scrollbereichs → überdecken nie Text.
   Farben/Schriften/Inhalte kommen unverändert aus heft.css. Die Computer-Ansicht (Page-Flip) bleibt unberührt. */
.pager{--kopf:calc(60px + env(safe-area-inset-top,0px));--fuss:calc(66px + env(safe-area-inset-bottom,0px));--rand:22px;--oben:24px;--unten:36px}
@media (max-height:500px){.pager{--kopf:calc(50px + env(safe-area-inset-top,0px));--fuss:calc(54px + env(safe-area-inset-bottom,0px));--oben:18px;--unten:26px}}
.pager,.pager body{height:100%;overflow:hidden;background:var(--paper)}
.pager body{background-image:none;overscroll-behavior:none}
.pager .tisch{display:block;height:100%;padding:0}
.pager .pfeil,.pager .laschen,.pager .leiste,.pager .hk-hinweis,.pager .s-fuss{display:none!important}

/* Kopfleiste: Logo links, rechts Merkliste + Menü */
.pager .hk{position:fixed;inset:0 0 auto;z-index:40;height:var(--kopf);display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:env(safe-area-inset-top,0px) max(10px,env(safe-area-inset-right,0px)) 0 max(var(--rand),env(safe-area-inset-left,0px));
  background:var(--paper);border-bottom:1px solid var(--line)}
.pager .hk-marke{display:flex;align-items:center;min-height:48px;text-decoration:none}
.pager .hk-marke .wortmarke .sig{height:27px}
.pager .hk-marke .wortmarke .sig + b{font-size:11.5px}
.pg-rechts{display:flex;align-items:center;gap:8px}
.pager .merk{position:static;display:inline-flex;align-items:center;min-height:44px;padding:0 15px;font-size:11px;box-shadow:none}
.pager .merk[hidden]{display:none!important}
.pg-burger{position:relative;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;color:var(--ink)}
.pg-burger span{position:absolute;left:15px;right:15px;height:2px;border-radius:2px;background:currentColor;transition:transform .25s ease,opacity .2s ease}
.pg-burger span:nth-child(1){transform:translateY(-7px)}
.pg-burger span:nth-child(3){transform:translateY(7px)}
.pg-burger[aria-expanded=true] span:nth-child(1){transform:rotate(45deg)}
.pg-burger[aria-expanded=true] span:nth-child(2){opacity:0}
.pg-burger[aria-expanded=true] span:nth-child(3){transform:rotate(-45deg)}
.pg-burger:focus-visible,.pg-pfeil:focus-visible,.pg-menue button:focus-visible,.pager .merk:focus-visible{outline:2px solid var(--akzent);outline-offset:2px}

/* Menü (alle Kapitel) */
.pg-menue{position:fixed;inset:var(--kopf) 0 0;z-index:41;background:var(--paper);overflow-y:auto;overscroll-behavior:contain;
  padding:26px max(var(--rand),env(safe-area-inset-right,0px)) calc(30px + env(safe-area-inset-bottom,0px)) max(var(--rand),env(safe-area-inset-left,0px));animation:pgein .22s ease}
@keyframes pgein{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.pg-menue .kicker{font-size:12px;margin-bottom:14px}
.pg-menue ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.pg-menue button{width:100%;min-height:66px;display:flex;align-items:baseline;gap:.5em;padding:16px 2px;border-bottom:1px solid var(--line);text-align:left;font:400 29px/1.1 var(--display);color:var(--ink)}
.pg-menue button i{flex:1;border-bottom:1px dotted var(--mute);transform:translateY(-.25em);min-width:1em}
.pg-menue button b{font:500 13px var(--label);letter-spacing:.1em;color:var(--akzent)}
.pg-menue button[aria-current=true] span{color:var(--akzent)}
.pg-menue button[aria-current=true]{box-shadow:inset 3px 0 0 var(--akzent);padding-left:14px}
.pg-menue .pg-recht{margin-top:26px;font:500 12px/1.6 var(--label);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.pg-menue .pg-recht a{color:var(--mute);text-decoration:none;display:inline-block;padding:8px 0}
@media (max-height:500px){.pg-menue ol{columns:2;column-gap:28px}.pg-menue li{break-inside:avoid}.pg-menue button{min-height:54px;font-size:23px;padding:12px 2px}}

/* Fußleiste: Pfeile + dezente Seitenanzeige */
.pg-fuss{position:fixed;inset:auto 0 0;z-index:40;height:var(--fuss);display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:0 max(10px,env(safe-area-inset-right,0px)) env(safe-area-inset-bottom,0px) max(10px,env(safe-area-inset-left,0px));background:var(--paper);border-top:1px solid var(--line)}
.pg-pfeil{width:54px;height:54px;flex:none;border-radius:50%;border:1px solid rgba(30,34,40,.22);display:grid;place-items:center;color:var(--ink);background:var(--paper);transition:background .2s,color .2s,opacity .2s}
.pg-pfeil svg{width:24px;height:24px}
.pg-pfeil:active{background:var(--akzent);border-color:var(--akzent);color:#fff}
.pg-pfeil:disabled{opacity:.25}
.pg-zahl{flex:1;min-width:0;text-align:center;margin:0;font:500 10.5px/1.3 var(--label);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pg-zahl b{display:block;margin-top:2px;font:400 18px/1.1 var(--display);letter-spacing:0;text-transform:none;color:var(--ink)}
@media (max-height:500px){.pg-pfeil{width:46px;height:46px}.pg-zahl b{display:inline;margin:0 0 0 .6em;font-size:16px}}

/* Seiten-Pager: zwischen Kopf- und Fußleiste, waagrecht wischen */
.pager .buch-rahmen{position:fixed;top:var(--kopf);bottom:var(--fuss);left:0;right:0;height:auto;display:block;transform:none}
.pager #buch{position:absolute;inset:0;margin:0;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;font-size:17px;filter:none;transform:none;transition:none}
.pager #buch::-webkit-scrollbar{display:none}
.pager #buch::before,.pager #buch::after,.pager .seite::after,.pager .titel::before,.pager .rueck::before{display:none}
.pager #buch>.seite{position:relative;flex:0 0 100%;width:100%;height:100%;scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden}
.pager .seite .s-in{position:absolute;inset:0;display:flex;flex-direction:column;overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;
  padding:var(--oben) max(var(--rand),env(safe-area-inset-right,0px)) var(--unten) max(var(--rand),env(safe-area-inset-left,0px))}
.pager .seite .s-in>*{flex-shrink:0}
/* Querformat: Lesespalte mittig, nicht über die ganze Breite */
@media (min-width:600px){.pager .seite .s-in{padding-left:max(var(--rand),calc(50% - 330px));padding-right:max(var(--rand),calc(50% - 330px))}}

/* Größer lesen */
.pager .kicker{font-size:.76em;margin-bottom:1em}
.pager .lead{font-size:1.12em}
.pager .lead.klein{font-size:1.02em}
.pager .text .spalten,.pager .spalten{columns:1;font-size:1em;line-height:1.6;margin-top:1.3em}
.pager .text .lead{font-size:1.1em}
.pager .ed-text{font-size:1em}
.pager .hinweis{font-size:.84em;margin-top:1.4em}
.pager .knopf{font-size:.78em;min-height:50px;padding:1em 1.5em}
.pager .knoepfe{gap:.7em}
.pager figcaption{font-size:.9em}

/* Bilder: feste Seitenverhältnisse statt Prozent-Höhen (die am Handy Text überlagert/gequetscht haben) */
.pager .oben-bild,.pager .oben-bild.hoch{height:auto;aspect-ratio:4/3;margin:calc(-1 * var(--oben)) calc(-1 * var(--rand)) 1.5em}
.pager .oben-bild.hoch{aspect-ratio:1/1}
.pager .mitte-bild{flex:none;height:auto;min-height:0;aspect-ratio:3/2;margin:1.5em 0}
.pager .unten-bild,.pager .seite .unten-bild{flex:none;height:auto;aspect-ratio:4/3;margin:1.8em calc(-1 * var(--rand)) calc(-1 * var(--unten))}
.pager .prinzip-bild{flex:none;height:auto;aspect-ratio:4/3;margin:1.5em 0}
.pager .paar{height:auto;margin-top:1.6em}
.pager .paar figure{aspect-ratio:3/4}
@media (min-width:600px){.pager .oben-bild,.pager .oben-bild.hoch{aspect-ratio:16/9;margin-left:0;margin-right:0;margin-top:0}
  .pager .unten-bild,.pager .seite .unten-bild{aspect-ratio:16/9;margin:1.8em 0 0}}

/* Handy quer: Bilder nicht höher als ~60 % des Fensters, damit der Text gleich anschließt */
@media (max-height:500px){.pager .oben-bild,.pager .oben-bild.hoch,.pager .mitte-bild,.pager .prinzip-bild,.pager .unten-bild,.pager .seite .unten-bild,.pager .rd-bild{max-height:60vh}
  .pager .ed-kopf{grid-template-columns:min(42%,190px) 1fr}}

/* Titel mit Zufalls-Slideshow */
.pager .titel.klar .t-klar{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;padding:20px var(--rand) 26px}
.pager .titel.klar .t-name{font-size:4.6em}
.pager .t-claim{font-size:1.05em}
.pager .t-show{width:auto;margin:1.6em calc(-1 * var(--rand)) 0;flex:none}
.pager .titel.klar .t-unten h1{font-size:1.6em}
@media (max-height:500px){.pager .titel.klar .t-klar{display:grid;grid-template-columns:1fr 1.15fr;grid-template-rows:auto 1fr auto;column-gap:26px;padding:16px 22px}
  .pager .titel.klar .t-oben{grid-column:1/-1}
  .pager .t-kopf{grid-column:1;grid-row:2}
  .pager .t-show{grid-column:2;grid-row:2/4;margin:1em 0 0;align-self:start}
  .pager .titel.klar .t-unten{grid-column:1;grid-row:3}
  .pager .titel.klar .t-name{font-size:3.4em}
  .pager .titel.klar .t-unten h1{font-size:1.3em}}

/* Inhalt */
.pager .inhalt h2{font-size:3.4em}
.pager .ihv button{min-height:58px;font-size:1.4em}
.pager .ihv button b{font-size:.6em}
.pager .editorial{margin-top:2em}

/* Editorial */
.pager .ed-kopf{grid-template-columns:42% 1fr;gap:1.1em}
.pager .ed-kopf h2{font-size:2.05em}
.pager .ed-gruss{flex-direction:column;align-items:flex-start;gap:.4em;margin-top:1.8em}
.pager .ed-gruss small{font-size:.5em}

/* Text-, Zitat-, Prinzip-, First-Time-Seiten */
.pager .text h2,.pager .kontakt h2{font-size:2.4em}
.pager .first h2{font-size:2.6em}
.pager .first .preis-gross{margin-top:.6em;flex-wrap:wrap;gap:.3em .8em}
.pager .zitat blockquote,.pager .zitat blockquote.lang{font-size:1.6em}
.pager .zitat cite{font-size:.45em}
.pager .prinzip .aussage{font-size:2.9em;margin-top:.6em}
.pager .prinzip .unten-text{font-size:1em;margin-top:.4em}
.pager .prinzip .knopf.voll{align-self:flex-start;margin-top:1.4em}
.pager .schritte{grid-template-columns:1fr;gap:1.1em}
.pager .schritte p{font-size:1em}
.pager .schritte h4{font-size:1.2em}

/* Bildseiten: Foto füllt die Seite zwischen den Leisten */
.pager .bildseite .s-in{padding:0;overflow:hidden}
.pager .bildseite .voll{position:absolute;inset:0}

/* Behandlungen */
.pager .register h2{font-size:2.2em}
.pager .reg button{grid-template-columns:2.2em 1fr;row-gap:.15em;min-height:56px;padding:.7em 0;align-items:center}
.pager .reg button i{font-size:.72em}
.pager .reg button span{font-size:1.18em}
.pager .reg button small{grid-column:2;font-size:.66em}
.pager .reg button[aria-pressed=true]{padding-left:.6em}
.pager .rd{height:auto;overflow:visible;display:flex;flex-direction:column}
.pager .rd>*{flex-shrink:0}
.pager .rd-bild{height:auto;aspect-ratio:3/2;margin:calc(-1 * var(--oben)) calc(-1 * var(--rand)) 1.4em}
@media (min-width:600px){.pager .rd-bild{aspect-ratio:16/9;margin:0 0 1.4em}}
.pager .rd h3{font-size:2.1em}
.pager .rd ul{font-size:.95em}
.pager .rd ul li{grid-template-columns:6.2em 1fr}
.pager .rd-preise{flex:none;overflow:visible;margin-top:1.2em}
.pager .rd-preise p{font-size:1em;gap:1em;padding:.35em 0}
.pager .rd-preise p.rd-info{font-size:.9em}
.pager .rd .knopf{align-self:flex-start;margin:1.5em 0 0}
/* Behandlungen als Aufklapp-Liste (Folgeauftrag 15.10.2026) */
.pager .reg button[aria-controls]{grid-template-columns:2.2em 1fr 30px;column-gap:.5em}
.pager .reg button[aria-controls] i{grid-row:1/span 2;align-self:center}
.pager .reg .pg-chev{grid-column:3;grid-row:1/span 2;align-self:center;justify-self:end;width:24px;height:24px;color:var(--ink2);transition:transform .25s ease}
.pager .reg button[aria-expanded=true]{padding-left:0;background:none}
.pager .reg button[aria-expanded=true] span{color:var(--akzent)}
.pager .reg button[aria-expanded=true] .pg-chev{transform:rotate(180deg);color:var(--akzent)}
.pager .reg button:focus-visible{outline:2px solid var(--akzent);outline-offset:-2px}
.pager .pg-akk{padding:.2em 0 1.8em 2.7em;border-bottom:1px solid var(--line)}
.pager .pg-akk .rd{height:auto;overflow:visible}
.pager .pg-akk .rd>.kicker,.pager .pg-akk .rd>h3{display:none}
.pager .pg-akk .rd-bild,.pager .pg-akk .rd-bild{aspect-ratio:3/2;max-height:none;margin:.6em 0 1.1em}
.pager .pg-akk .rd-nutzen{margin-top:0}
.pager .pg-akk .rd ul li{grid-template-columns:5.6em 1fr}
.pager .pg-akk .rd-preise b{white-space:nowrap}
.pager .pg-akk .rd .knopf{display:inline-flex;width:auto;align-self:flex-start;grid-template-columns:none;text-align:center;padding:1em 1.6em;border:1px solid var(--ink);background:none;margin-top:1.4em}
.pager .pg-akk .rd .knopf:active{background:var(--ink);color:var(--paper)}
@media (max-width:380px){.pager .pg-akk{padding-left:0}}
@media (max-height:500px){.pager .pg-akk .rd-bild{max-height:60vh}}

/* Pflege & Shop */
.pager .pflege h2,.pager .foto h2{font-size:2.2em}
.pager .wege{grid-template-columns:1fr;margin-top:1.8em}
.pager .wege p{font-size:1em}
.pager .shop h2{font-size:2.3em}
.pager .shop .knopf{align-self:flex-start;margin-top:1.3em}
.pager .pks,.pager .pks.zwei,.pager .pks.vier{grid-template-columns:1fr 1fr;grid-template-rows:none;flex:none;gap:1.6em 1em;margin-top:1.6em;min-height:0}
.pager .pks.vier:first-child{margin-top:0}
.pager .pk{min-height:0}
.pager .pk-bild,.pager .pks.zwei .pk-bild{flex:none;height:auto;aspect-ratio:1/1;min-height:0}
.pager .pk h4{font-size:1.02em}
.pager .pk p{font-size:.84em}
.pager .pk-fuss{flex-wrap:wrap;font-size:.9em;gap:.35em .5em;margin-top:.6em}
.pager .pk-fuss span{flex:1 1 auto}
.pager .pk-add{flex:1 0 100%;min-height:44px;font-size:.78em}
.pager .pk.gutschein{grid-column:1/-1}
.pager .pk.gutschein .knopf{margin-top:1em}
@media (min-width:600px){.pager .pks,.pager .pks.zwei,.pager .pks.vier{grid-template-columns:repeat(3,1fr)}}

/* Kontakt */
.pager .adresse{font-size:1.15em}
.pager .zeiten{font-size:1em;margin-top:.4em}
.pager .zeiten td{padding:.65em 0}

/* Rückseite */
.pager .rueck .s-in{justify-content:safe center}

/* Merkliste als Blatt unter dem Kopf */
.pager .ml{position:fixed;top:calc(var(--kopf) + 8px);left:10px;right:10px;bottom:auto;width:auto;max-height:calc(100% - var(--kopf) - var(--fuss) - 16px);overflow-y:auto;z-index:42;font-size:16px}
.pager .ml-zu{width:48px;height:48px}
.pager .ml-liste button{min-width:40px;min-height:40px}
.pager .ml .knopf{font-size:12px}

@media (prefers-reduced-motion:reduce){.pager .reg .pg-chev{transition:none}.pg-menue{animation:none}.pg-burger span,.pg-pfeil{transition:none}.pager .rd{animation:none}}

/* Änderungen 15.10.2026 (2. Runde, Sebastian/ORION) */
/* Kopfleiste: „medical skincare“ zart grau unter KOSMETIK WAGRAM */
.pager .hk-marke .wortmarke .sig ~ small{display:block;font-size:8.5px;margin-top:2px;color:#A8A8A8}
@media (max-height:500px){.pager .hk-marke .wortmarke .sig{height:22px}.pager .hk-marke .wortmarke .sig ~ small{font-size:8px;margin-top:1px}}
/* Foto & Make-up: am Handy ohne Bild (Gutschein-Foto passt nicht zur Fotografie) */
.pager .foto .oben-bild{display:none}
/* Pflege-Edit + Kontakt: Hinweise lesbar */
.pager .bestell-hinweis{font-size:1.05em;margin-top:1em}
.pager .shop-alt{font-size:.92em;margin-top:1.6em}
.pager .storno{font-size:.84em;margin-top:.9em}

/* Änderungen 15.10.2026 (3. Runde, Sebastian/ORION) */
/* Bilder im Originalformat statt fixem Ausschnitt: Hautanalyse-Foto (Seite 8) und aufgeklappte Behandlungen */
.pager .oben-bild.hoch{aspect-ratio:auto;height:auto}
.pager .oben-bild.hoch img{height:auto}
.pager .pg-akk .rd-bild{aspect-ratio:auto;height:auto}
.pager .pg-akk .rd-bild img{height:auto}
/* Raumfoto-Seite + Marius-Doppelseite */
.pager .raumseite .s-in{display:flex;flex-direction:column;justify-content:center;padding:0}
.pager .quer-bild{margin:1.6em calc(-1 * var(--rand)) 0}
.pager .raumseite .quer-bild{margin:0}
.pager .marius-b .quer-bild{margin:calc(-1 * var(--oben)) calc(-1 * var(--rand)) 1.6em}
.pager .marius .aussage{font-size:2.6em}

/* 16.10.2026: Social – am Handy nicht fest unten (Fußleiste), sondern im Menü */
.pager .sozial-fix{display:none!important}
.pg-sozial{display:flex;gap:1.1em;margin:1.2em 0 .4em}
.pg-sozial a{display:inline-flex;align-items:center;gap:.45em;color:var(--akzent);text-decoration:none;font:500 15px var(--label)}
.pg-sozial svg{width:22px;height:22px}