/* Marius Höfinger – Handy-Fassung der Magazine (15.10.2026, Sebastian/ORION; Vorbild: Kosmetik-Wagram-Heft).
   Wirkt NUR, wenn <html class="pager"> gesetzt ist (Schalter im <head>: Breite ≤ 760 px oder Handy quer).
   Statt Page-Flip: jede Magazinseite = eine Bildschirmseite, randlos; waagrecht wischen (scroll-snap), senkrecht in der Seite scrollen.
   Kopfleiste (Logo + Menü) und Fußleiste (Pfeile + Kapitel/Seite) liegen AUSSERHALB des Scrollbereichs → überdecken nie Inhalt.
   Fotos immer ganz im Originalformat (contain/Abzug, nie cover). Die Computer-Ansicht (Page-Flip) bleibt unberührt. */
.pager{--kopf:calc(60px + env(safe-area-inset-top,0px));--fuss:calc(68px + env(safe-area-inset-bottom,0px));--rand:22px;--oben:26px;--unten:34px}
@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:22px}}
.pager,.pager body{height:100%;overflow:hidden}
.pager body{background:var(--paper);overscroll-behavior:none}
.pager .tisch{display:block;height:100%;padding:0}
.pager .pfeil,.pager .laschen,.pager .leiste,.pager .kapnav,.pager .hk-pfad,.pager .hk-r,.pager .hk-logo,.pager .s-fuss{display:none!important}

/* Kopfleiste: Logo + Name links, Menü rechts */
.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(8px,env(safe-area-inset-right,0px)) 0 max(14px,env(safe-area-inset-left,0px));
  background:var(--paper);border-bottom:1px solid var(--line)}
.pager .hk-marke{display:flex;align-items:center;gap:10px;min-height:48px;min-width:0;padding:0;text-decoration:none;color:var(--ink)}
.pager .hk-marke img{width:42px;height:auto;flex:none}
.pager .hk-marke b{display:block;font:500 15px/1.1 var(--sans);white-space:nowrap}
.pager .hk-marke small{display:block!important;margin-top:3px;font:600 10px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--orange-t);opacity:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pg-burger{position:relative;flex:none;width:50px;height:50px;border-radius:50%;display:grid;place-items:center;color:var(--ink)}
.pg-burger span{position:absolute;left:15px;right:15px;height:1.6px;border-radius:2px;background:currentColor;transition:transform .28s cubic-bezier(.2,.7,.2,1),opacity .2s ease}
.pg-burger span:nth-child(1){transform:translateY(-6px)}
.pg-burger span:nth-child(3){transform:translateY(6px);left:21px}
.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);left:15px}
.pg-burger:focus-visible,.pg-pfeil:focus-visible,.pg-menue :focus-visible,.pager .hk-marke:focus-visible,.pager #buch :focus-visible{outline:2px solid var(--orange-t);outline-offset:2px}

/* Menü */
.pg-menue{position:fixed;inset:var(--kopf) 0 0;z-index:41;background:var(--paper);overflow-y:auto;overscroll-behavior:contain;
  padding:14px 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 .24s ease}
@keyframes pgein{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.pg-heim{display:flex;align-items:center;gap:12px;min-height:56px;font:600 12px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);text-decoration:none}
.pg-heim span{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center}
.pg-heim svg{width:18px;height:18px}
.pg-menue .kicker{font-size:11px;margin:22px 0 10px}
.pg-kap{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.pg-kap button{width:100%;min-height:58px;display:flex;align-items:baseline;gap:.5em;padding:14px 2px;border-bottom:1px solid var(--line);text-align:left;font:300 25px/1.1 var(--serif);color:var(--ink)}
.pg-kap button i{flex:1;border-bottom:1px dotted var(--mute);transform:translateY(-.25em);min-width:1em}
.pg-kap button b{font:600 12px var(--sans);letter-spacing:.1em;color:var(--orange-t)}
.pg-kap button[aria-current=true]{box-shadow:inset 3px 0 0 var(--orange);padding-left:14px}
.pg-kap button[aria-current=true] span{color:var(--orange-t)}
.pg-andere{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.pg-andere a{display:block;padding:14px 2px;min-height:56px;border-bottom:1px solid var(--line);font:300 23px/1.15 var(--serif);color:var(--ink);text-decoration:none}
.pg-andere a em{color:var(--orange-t)}
.pg-wege{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 0}
.pg-wege .knopf{font-size:13px;min-height:50px;padding:0 22px}
.pg-recht{margin-top:20px;font:500 11px/1.6 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.pg-recht a{color:var(--mute);text-decoration:none;display:inline-block;padding:9px 0}
@media (max-height:500px){.pg-kap{columns:2;column-gap:28px}.pg-kap li{break-inside:avoid}.pg-kap button{min-height:50px;font-size:21px;padding:10px 2px}}

/* Fußleiste: große Pfeile + Kapitel / Seite */
.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(20,20,20,.22);display:grid;place-items:center;color:var(--ink);background:var(--paper);transition:background .2s,color .2s,opacity .2s,border-color .2s}
.pg-pfeil svg{width:24px;height:24px}
.pg-pfeil.vor{border-color:var(--orange);color:var(--orange-t)}
.pg-pfeil:active{background:var(--orange);border-color:var(--orange);color:#111}
.pg-pfeil:disabled{opacity:.25;border-color:rgba(20,20,20,.22);color:var(--ink)}
.pg-zahl{flex:1;min-width:0;text-align:center;margin:0;font:600 10.5px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--orange-t);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pg-zahl b{display:block;margin-top:3px;font:300 17px/1.1 var(--serif);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 .7em;font-size:15px}}

/* Seiten-Pager zwischen Kopf- und Fußleiste */
.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:16px;filter:none;transform:none!important;transition:none}
.pager #buch::-webkit-scrollbar{display:none}
.pager #buch::before,.pager #buch::after,.pager .seite::after{display:none!important}
.pager #buch>.seite{position:relative;flex:0 0 100%;width:100%;height:100%;scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden;border-radius:0}
.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}
@media (min-width:600px){.pager .seite:not(.voll):not(.rasterseite):not(.doppelseite):not(.bild-hoch) .s-in{padding-left:max(var(--rand),calc(50% - 320px));padding-right:max(var(--rand),calc(50% - 320px))}}

/* Größer lesen */
.pager .kicker{font-size:.72em;margin-bottom:1.1em}
.pager h2{font-size:2.6em;line-height:1.02}
.pager .lead{font-size:1.18em;line-height:1.38}
.pager .text,.pager .text.eins{columns:1;font-size:1em;line-height:1.62;margin-top:1.3em}
.pager .text p{margin-bottom:.9em}
.pager .initiale::first-letter{font-size:3.3em}
.pager .knoepfe{gap:.6em;margin-top:1.8em}
.pager .knopf{font-size:.82em;min-height:50px;padding:0 1.5em;justify-content:center}
.pager figcaption,.pager .raster-cap{font-size:.78em}

/* Lange Seiten: Verlauf unten zeigt „hier geht es weiter“ (nur solange noch Inhalt folgt) */
.pager .seite::before{content:"";position:absolute;left:0;right:0;bottom:0;height:44px;z-index:3;pointer-events:none;opacity:0;transition:opacity .25s;
  background:linear-gradient(180deg,rgba(246,243,238,0),var(--paper) 85%)}
.pager .seite.mehr::before{opacity:1}
.pager .seite.titel::before,.pager .seite.rueck::before{display:none}

/* Titel (Cover mit Slideshow) – Satz nach der Breite, Fotos ganz (contain) */
.pager .seite.titel{container-type:size;background:#111}
.pager .t-kopf{top:5cqi;left:6cqi;right:6cqi}
.pager .t-mast{font-size:17cqi;line-height:.8;white-space:nowrap}
.pager .t-zeile{font-size:max(10px,2.7cqi);margin-top:3cqi;padding-top:2.6cqi}
.pager .t-unten{left:6cqi;right:6cqi;bottom:6cqi}
.pager .t-unten h1{font-size:min(14cqi,9cqh);line-height:.95}
.pager .t-lines{font-size:max(10.5px,2.9cqi);gap:.35em 1.1em}
.pager .t-bild .c-bild.quer{inset:var(--q-oben,30cqi) 5cqi var(--q-unten,50cqi)}
.pager .t-bild .c-bild.quer img{object-fit:contain}
@media (max-height:500px){
  .pager .t-mast{font-size:min(9cqi,20cqh)}
  .pager .t-bild .c-bild:not(.quer){left:44%}
  .pager .t-kopf{top:6cqh;left:4cqw;right:60%}
  .pager .t-unten{left:4cqw;right:60%;bottom:6cqh}
  .pager .t-zeile{font-size:9.5px;margin-top:8px;padding-top:7px}
  .pager .t-lines{font-size:9.5px;margin-top:8px;padding-top:7px}
  .pager .t-bild .c-bild.quer{inset:5cqh 4cqw 5cqh 44%}
  .pager .t-unten h1{font-size:min(5.4cqi,14cqh)}
  .pager .titel .t-bild::after{background:linear-gradient(90deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,.2) 40%,rgba(0,0,0,0) 50%)}
}

/* Inhaltsverzeichnis */
.pager .inhalt h2{font-size:3.4em}
.pager .ihv{margin-top:1em}
.pager .ihv button{min-height:54px;font-size:1.36em;padding:.55em 0}
.pager .ihv button i{font-size:.48em}
.pager .inhalt .editorial{margin-top:1.8em;font-size:1em}

/* Text-Seiten */
.pager .editorial h2,.pager .kapitel-auf h2{font-size:2.7em}
.pager .fakten{gap:.8em;margin-top:1.5em}
.pager .fakten dt{font-size:.62em}
.pager .fakten dd{font-size:1em}
.pager .zahlen{margin-top:1.8em}
.pager .zahlen b{font-size:2.2em}
.pager .zahlen span{font-size:.64em}
.pager .s-in>.text,.pager .s-in>.lead,.pager .s-in>.fakten,.pager .s-in>.platzhalter{margin-bottom:1.6em}
.pager .editorial .abzug-s.unten{margin-top:1.8em;align-self:stretch;width:100%}
.pager .editorial .abzug-s.unten img{width:100%;max-height:none}
.pager .zitat blockquote{font-size:1.9em}
.pager .zitat .s-in{justify-content:center}

/* Preise: als ruhige Liste (Name links, Preis rechts, Zusatz darunter) – am Handy lesbarer als zwei Spalten */
.pager .preise{grid-template-columns:1fr;gap:0;padding-top:0}
.pager .preise>div{display:grid;grid-template-columns:1fr auto;column-gap:1em;align-items:baseline;padding:.9em 0;border-bottom:1px solid var(--line)}
.pager .preise>div small:first-child{grid-column:1;grid-row:1;font-size:.72em;color:var(--ink2)}
.pager .preise>div b{grid-column:2;grid-row:1;font-size:1.6em;white-space:nowrap}
.pager .preise>div small+b+small{grid-column:1/-1;grid-row:2;margin-top:.3em;font-size:.66em}
.pager .preis-gross{flex-wrap:wrap;gap:.3em .8em}
.pager .schritte{grid-template-columns:1fr;gap:1em}
.pager .schritte p{font-size:.95em}

/* Bildseiten: Abzug so groß wie möglich, ganz, im Originalformat */
.pager .voll .s-in,.pager .rasterseite .s-in,.pager .doppelseite .s-in,.pager .bild-hoch .s-in,.pager .platzhalter-seite .s-in{overflow:hidden;padding:18px max(14px,env(safe-area-inset-right,0px)) 16px max(14px,env(safe-area-inset-left,0px))}
.pager .voll .s-in{justify-content:center;align-items:center}
.pager .abzug-s{padding:.6em}
.pager .abzug-s.fit,.pager .voll.hoch .abzug-s.fit{width:min(100cqw,calc((100cqh - 1.2em - 2.6em) * var(--ar) + 1.2em))}
.pager .rasterseite .s-in{padding-top:16px;padding-bottom:12px}
.pager .doppelseite .s-in{display:flex;flex-direction:column;justify-content:center;align-items:center;container-type:size}
.pager .doppel,.pager .doppel.ganz{position:relative;inset:auto;top:auto;bottom:auto;left:auto;right:auto;overflow:visible;container-type:normal;
  width:min(100cqw,calc((100cqh - 2.6em) * var(--ar)));background:var(--matt);padding:.6em;box-shadow:0 1px 2px rgba(0,0,0,.06),0 1.2em 2.2em -1.4em rgba(0,0,0,.45)}
.pager .doppel img,.pager .doppel.ganz img{position:static;width:100%;height:auto;max-width:100%;left:auto;clip-path:none;object-fit:contain}
.pager .doppel figcaption{position:static;margin:.7em .1em 0;white-space:normal}
.pager .bild-hoch .s-in{justify-content:center;align-items:center;container-type:size}
.pager .portrait-gross{height:auto;width:100%;display:block}
.pager .portrait-gross img{width:100%;height:auto}
.pager .unterzeile{text-align:center;font-size:1.05em}
.pager .platzhalter-seite .platzhalter{width:100%}

/* Kontakt / Weiterlesen / Rückseite */
.pager .kontakt .s-in{justify-content:flex-start}
.pager .kontakt .knoepfe .knopf{flex:1 1 auto}
.pager .zeiten{grid-template-columns:1fr;gap:1.1em;padding-top:1.2em}
.pager .zeiten dd{font-size:1em}
.pager .weiter b{font-size:1.6em}
.pager .weiter a{padding:1.05em 0}
.pager .rueck .s-in{justify-content:safe center}
.pager .r-logo{width:44%;max-width:220px}
.pager .r-zeile{font-size:2em}
.pager .r-link{display:inline-block;padding:1em 1.4em;min-height:48px;font-size:.9em}

/* Handy quer: Text mittig in Lesespalte, Bilder füllen die Höhe */
@media (max-height:500px){
  .pager h2{font-size:2.2em}.pager .inhalt h2{font-size:2.6em}
  .pager .zitat blockquote{font-size:1.6em}
}

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