/* Marius Höfinger – Handy-Fassung der Startseite (15.10.2026, Sebastian/ORION).
   Wirkt NUR mit <html class="pager"> (Schalter im <head>: Breite ≤ 760 px oder Handy quer). Computer-Ansicht (Regal) bleibt unberührt.
   Idee: Am Handy wird der Bildschirm selbst zum Heft. Erst ein Titelblatt mit allen drei Magazinen auf einen Blick (direkt antippbar),
   darunter je Magazin ein bildschirmfüllendes Cover-Kapitel (Scroll-Snap) mit der Cover-Slideshow, Titel und „Aufschlagen“.
   Fotos immer ganz, im Originalformat (object-fit:contain, kein Zoom/Zuschnitt). Farben/Schriften aus regal.css. */
.pager{--hs-kopf:calc(62px + env(safe-area-inset-top,0px));--hs-rand:max(20px,env(safe-area-inset-left,0px));--hs-rand-r:max(20px,env(safe-area-inset-right,0px));--hs-unten:max(22px,env(safe-area-inset-bottom,0px))}
html.pager{height:auto;overflow-x:hidden;overflow-y:auto;scroll-snap-type:y mandatory;scroll-padding-top:0}
.pager body{height:auto;min-height:100%;overflow:visible;overflow-x:hidden}
.pager .marke-logo,.pager .kopf,.pager .raum,.pager .fuss{display:none!important}

/* ---------- Kopfleiste ---------- */
.hs-kopf{position:fixed;inset:0 0 auto;z-index:30;height:var(--hs-kopf);display:flex;align-items:center;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));
  transition:background-color .35s ease,box-shadow .35s ease,-webkit-backdrop-filter .35s,backdrop-filter .35s}
.hs-kopf.fest{background:rgba(27,25,22,.78);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 1px 0 rgba(243,239,232,.08)}
.hs-marke{display:flex;align-items:center;gap:11px;min-height:48px;text-decoration:none;color:var(--ink);margin-right:auto;min-width:0}
.hs-marke img{width:44px;height:auto;flex:none;filter:drop-shadow(0 2px 8px rgba(0,0,0,.35))}
.hs-marke span{min-width:0}
.hs-marke b{display:block;font:500 15.5px/1.1 var(--sans);letter-spacing:-.005em;white-space:nowrap}
.hs-marke small{display:block;margin-top:3px;font:500 10px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);white-space:nowrap}
.hs-galerie{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 14px;border:1px solid rgba(243,239,232,.32);border-radius:99px;
  font:500 12.5px var(--sans);color:var(--ink);text-decoration:none;white-space:nowrap;flex:none}
.hs-galerie svg{width:15px;height:15px;color:var(--orange)}
.hs-galerie:active{border-color:var(--orange);color:var(--orange)}
.hs-burger{position:relative;flex:none;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:var(--ink);background:none;border:0;cursor:pointer;padding:0}
.hs-burger span{position:absolute;left:14px;right:14px;height:1.6px;border-radius:2px;background:currentColor;transition:transform .3s var(--ease),opacity .2s ease}
.hs-burger span:nth-child(1){transform:translateY(-6px)}
.hs-burger span:nth-child(3){transform:translateY(6px);left:20px}
.hs-burger[aria-expanded=true] span:nth-child(1){transform:rotate(45deg)}
.hs-burger[aria-expanded=true] span:nth-child(2){opacity:0}
.hs-burger[aria-expanded=true] span:nth-child(3){transform:rotate(-45deg);left:14px}
@media (max-width:359px){.hs-marke small{display:none}.hs-galerie{padding:0 11px}}

/* ---------- Titelblatt: alle drei Magazine auf einen Blick ---------- */
.hs-intro{position:relative;min-height:100svh;scroll-snap-align:start;display:flex;flex-direction:column;
  padding:calc(var(--hs-kopf) + 4vh) var(--hs-rand-r) var(--hs-unten) var(--hs-rand);overflow:hidden}
.hs-intro::before{content:"";position:absolute;inset:-10% -20% auto;height:80%;pointer-events:none;
  background:radial-gradient(50% 55% at 50% 0%,rgba(255,226,180,.14) 0%,rgba(255,226,180,.04) 50%,rgba(255,226,180,0) 75%)}
.hs-kicker{position:relative;font:500 10.5px/1.5 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--mute);margin:0 0 14px}
.hs-intro h1{position:relative;text-wrap:balance;font:300 clamp(46px,15.4vw,76px)/.9 var(--serif);letter-spacing:-.035em;margin:0}
.hs-intro h1 em{color:var(--orange);font-weight:300}
.hs-lead{position:relative;font:300 italic 18px/1.4 var(--serif);color:#cfc7bb;margin:18px 0 0;max-width:30em}
.hs-index{position:relative;list-style:none;margin:auto 0 0;padding:26px 0 0;counter-reset:hs}
.hs-index li{border-top:1px solid rgba(243,239,232,.16)}
.hs-index li:last-child{border-bottom:1px solid rgba(243,239,232,.16)}
.hs-index a{display:grid;grid-template-columns:62px minmax(0,1fr) 40px;align-items:center;gap:16px;min-height:112px;padding:14px 0;text-decoration:none;color:var(--ink)}
.hs-mini{position:relative;width:62px;aspect-ratio:21/28.5;background:#0e0d0c;border-radius:1px 3px 3px 1px;overflow:hidden;
  box-shadow:inset 2px 0 0 rgba(0,0,0,.4),inset 3px 0 0 rgba(255,255,255,.08),0 10px 18px -8px rgba(0,0,0,.9)}
.hs-mini img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.hs-ix{min-width:0}
.hs-ix small{display:block;font:600 10px/1.3 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--orange)}
.hs-ix b{display:block;margin-top:6px;font:300 29px/1 var(--serif);letter-spacing:-.02em}
.hs-ix b em{color:var(--orange);font-weight:300}
.hs-ix span{display:block;margin-top:6px;font:400 12px/1.35 var(--sans);color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hs-pfeil{width:40px;height:40px;border-radius:50%;border:1px solid rgba(243,239,232,.26);display:grid;place-items:center;transition:background .25s,border-color .25s,color .25s}
.hs-pfeil svg{width:17px;height:17px}
.hs-index a:active .hs-pfeil{background:var(--orange);border-color:var(--orange);color:#111}
.hs-index a:active .hs-ix b{color:var(--orange)}
.hs-runter{position:relative;align-self:center;display:inline-flex;flex-direction:column;align-items:center;gap:4px;margin-top:16px;min-height:44px;padding:4px 18px;
  font:600 10px var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--mute);text-decoration:none}
.hs-runter svg{width:18px;height:18px;animation:hsWipp 2.4s ease-in-out infinite}
@keyframes hsWipp{0%,60%,100%{transform:none}75%{transform:translateY(4px)}}

/* ---------- Cover-Kapitel: ein Magazin = ein Bildschirm ---------- */
.hs-mag{position:relative;height:100svh;min-height:520px;scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden;
  border-top:1px solid rgba(243,239,232,.07)}
.hs-mag::before{content:"";position:absolute;inset:-5% -25% auto;height:75%;pointer-events:none;
  background:radial-gradient(48% 55% at 50% 0%,rgba(255,226,180,.17) 0%,rgba(255,226,180,.05) 48%,rgba(255,226,180,0) 74%)}
.hs-flaeche{position:absolute;inset:0;display:flex;flex-direction:column;text-decoration:none;color:#fff;-webkit-tap-highlight-color:transparent;
  padding:calc(var(--hs-kopf) + 14px) var(--hs-rand-r) var(--hs-unten) var(--hs-rand)}
.hs-flaeche:focus-visible{outline:2px solid var(--orange);outline-offset:-6px}
.hs-kopfzeile{position:relative;flex:none;overflow:hidden}
.hs-mast{display:block;font:600 min(16.2vw,12svh)/.8 var(--serif);letter-spacing:-.04em;text-transform:uppercase;white-space:nowrap;padding-top:.06em}
.hs-zeile{display:flex;justify-content:space-between;gap:12px;margin-top:12px;padding-top:10px;border-top:1px solid rgba(255,255,255,.6);
  font:500 10.5px var(--sans);letter-spacing:.2em;text-transform:uppercase}
.hs-zeile b{font-weight:600;color:var(--orange)}
.hs-foto{position:relative;flex:1 1 auto;min-height:120px;margin:20px calc(-1 * var(--hs-rand-r)) 18px calc(-1 * var(--hs-rand))}
.hs-foto .c-bilder{position:absolute;inset:0}
.hs-foto .c-bild,.hs-foto .c-bild.quer{position:absolute;inset:0}
.hs-foto .c-bild img,.hs-foto .c-bild.quer img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 50%;
  filter:drop-shadow(0 18px 26px rgba(0,0,0,.55)) drop-shadow(0 2px 4px rgba(0,0,0,.35))}
.hs-unten{position:relative;flex:none}
.hs-titel{display:block;font:300 min(12.4vw,8.4svh)/.95 var(--serif);letter-spacing:-.03em}
.hs-titel em{color:var(--orange);font-weight:300}
.hs-lines{list-style:none;margin:12px 0 0;padding:10px 0 0;border-top:1px solid rgba(255,255,255,.4);display:flex;flex-wrap:wrap;gap:4px 14px;
  font:500 10.5px/1.5 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:#e9e3da}
.hs-lines li::before{content:"● ";color:var(--orange);font-size:.7em;vertical-align:.15em}
.hs-cta{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:16px;min-height:56px;padding:0 6px 0 22px;border-radius:99px;
  background:var(--orange);color:#111;font:600 14px var(--sans);letter-spacing:.02em;box-shadow:0 14px 30px -14px rgba(255,148,0,.55);transition:transform .2s ease,background .2s}
.hs-cta i{width:44px;height:44px;border-radius:50%;background:#111;color:var(--orange);display:grid;place-items:center;font-style:normal;flex:none}
.hs-cta i svg{width:18px;height:18px;transition:transform .3s var(--ease)}
.hs-flaeche:active .hs-cta{transform:scale(.98);background:#ffa21f}
.hs-flaeche:active .hs-cta i svg{transform:translateX(3px)}

/* ---------- Kontakt / Fuß ---------- */
.hs-fuss{position:relative;scroll-snap-align:end;padding:54px var(--hs-rand-r) calc(var(--hs-unten) + 8px) var(--hs-rand);border-top:1px solid rgba(243,239,232,.1);
  background:linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.32))}
.hs-fuss .hs-kicker{margin-bottom:10px}
.hs-tel{display:inline-block;font:300 34px/1.1 var(--serif);letter-spacing:-.02em;color:var(--ink);text-decoration:none;padding:4px 0}
.hs-mail{display:inline-block;font:400 16px var(--sans);color:#d8d0c4;text-decoration:none;padding:8px 0;border-bottom:1px solid rgba(216,208,196,.35)}
.hs-fakten{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px;margin:28px 0 0;padding:18px 0 0;border-top:1px solid rgba(243,239,232,.16)}
.hs-fakten dt{font:600 10px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin-bottom:6px}
.hs-fakten dd{margin:0;font:400 14px/1.5 var(--sans);color:#e2dbd0}
.hs-fakten .breit{grid-column:1/-1}
.hs-gal-gross{display:flex;align-items:center;gap:16px;margin-top:30px;min-height:72px;padding:14px 18px;border:1px solid rgba(243,239,232,.24);border-radius:14px;
  text-decoration:none;color:var(--ink);background:rgba(243,239,232,.03)}
.hs-gal-gross svg{width:26px;height:26px;color:var(--orange);flex:none}
.hs-gal-gross b{display:block;font:400 21px/1.1 var(--serif)}
.hs-gal-gross small{display:block;margin-top:4px;font:400 12.5px var(--sans);color:var(--mute)}
.hs-gal-gross i{margin-left:auto;font-style:normal;color:var(--orange);font-size:20px}
.hs-gal-gross:active{border-color:var(--orange)}
.hs-recht{margin:30px 0 0;font:500 11px/1.6 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.hs-recht a{display:inline-block;color:#cfc7bb;text-decoration:none;padding:10px 0}
.hs-recht span{opacity:.5;margin:0 .5em}
.hs-copy{margin:8px 0 0;font:400 11px var(--sans);color:var(--mute);opacity:.7}

/* ---------- Menü ---------- */
.hs-menue{position:fixed;inset:0;z-index:29;overflow-y:auto;overscroll-behavior:contain;
  padding:calc(var(--hs-kopf) + 20px) var(--hs-rand-r) calc(var(--hs-unten) + 10px) var(--hs-rand);
  background:rgba(22,20,18,.97);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);animation:hsMenue .32s var(--ease)}
.hs-menue[hidden]{display:none}
@keyframes hsMenue{from{opacity:0}to{opacity:1}}
.hs-menue ol{list-style:none;margin:0;padding:0;border-top:1px solid rgba(243,239,232,.7)}
.hs-menue ol li{animation:hsZeile .5s var(--ease) both}
.hs-menue ol li:nth-child(2){animation-delay:.05s}.hs-menue ol li:nth-child(3){animation-delay:.1s}
@keyframes hsZeile{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.hs-menue ol a{display:flex;align-items:baseline;gap:14px;min-height:76px;padding:18px 0;border-bottom:1px solid rgba(243,239,232,.14);text-decoration:none;color:var(--ink)}
.hs-menue ol small{font:600 11px var(--sans);letter-spacing:.14em;color:var(--orange);width:2.2em;flex:none}
.hs-menue ol b{font:300 31px/1.05 var(--serif);letter-spacing:-.02em}
.hs-menue ol b em{color:var(--orange);font-weight:300}
.hs-menue ol a:active b{color:var(--orange)}
.hs-m-wege{display:grid;gap:10px;margin-top:26px}
.hs-m-wege a{display:flex;align-items:center;gap:14px;min-height:56px;padding:0 18px;border:1px solid rgba(243,239,232,.22);border-radius:99px;
  font:500 14.5px var(--sans);color:var(--ink);text-decoration:none}
.hs-m-wege a svg{width:19px;height:19px;color:var(--orange);flex:none}
.hs-m-wege a.voll{background:var(--orange);border-color:var(--orange);color:#111}
.hs-m-wege a.voll svg{color:#111}
.hs-menue .hs-recht{margin-top:22px}

.hs-kopf :focus-visible,.hs-menue :focus-visible,.hs-fuss :focus-visible,.hs-index :focus-visible,.hs-runter:focus-visible{outline:2px solid var(--orange);outline-offset:3px}

/* ---------- Bewegung: sanftes Einblenden, leichte Parallaxe (per JS --p), Überblendung der Cover ---------- */
.hs-anim .hs-mag .hs-mast{transform:translateY(105%);transition:transform 1s var(--ease)}
.hs-anim .hs-mag .hs-zeile,.hs-anim .hs-mag .hs-unten>*{opacity:0;transform:translateY(14px);transition:opacity .8s ease,transform .9s var(--ease)}
.hs-anim .hs-mag .hs-foto{opacity:0;transition:opacity 1.1s ease .1s}
.hs-anim .hs-mag.da .hs-mast{transform:none}
.hs-anim .hs-mag.da .hs-zeile{opacity:1;transform:none;transition-delay:.25s}
.hs-anim .hs-mag.da .hs-foto{opacity:1}
.hs-anim .hs-mag.da .hs-unten>*{opacity:1;transform:none}
.hs-anim .hs-mag.da .hs-unten>:nth-child(1){transition-delay:.3s}
.hs-anim .hs-mag.da .hs-unten>:nth-child(2){transition-delay:.42s}
.hs-anim .hs-mag.da .hs-unten>:nth-child(3){transition-delay:.54s}
.hs-anim .hs-foto .c-bilder{transform:translate3d(0,calc(var(--p,0) * -34px),0);will-change:transform}
.hs-anim .hs-kopfzeile{transform:translate3d(0,calc(var(--p,0) * 22px),0)}
.hs-anim .hs-intro>*{animation:hsAuf .9s var(--ease) both}
.hs-anim .hs-intro>.hs-kicker{animation-delay:.05s}.hs-anim .hs-intro>h1{animation-delay:.12s}.hs-anim .hs-intro>.hs-lead{animation-delay:.22s}
.hs-anim .hs-intro>.hs-index{animation-delay:.32s}.hs-anim .hs-intro>.hs-runter{animation-delay:.5s}
@keyframes hsAuf{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ---------- Handy quer: zweispaltig (Text links, Foto rechts) ---------- */
@media (orientation:landscape){
  .pager{--hs-kopf:calc(54px + env(safe-area-inset-top,0px));--hs-unten:max(14px,env(safe-area-inset-bottom,0px))}
  .hs-intro{display:grid;grid-template-columns:1fr 1.05fr;grid-template-rows:auto auto 1fr auto;column-gap:36px;padding-top:calc(var(--hs-kopf) + 10px)}
  .hs-kicker{grid-column:1}.hs-intro h1{grid-column:1;font-size:clamp(36px,6.4vw,58px)}.hs-lead{grid-column:1;font-size:15px}
  .hs-index{grid-column:2;grid-row:1/5;align-self:center;margin:0;padding:0}
  .hs-index a{min-height:0;padding:10px 0;grid-template-columns:40px 1fr 36px}
  .hs-mini{width:40px}.hs-ix b{font-size:23px}.hs-index a{grid-template-columns:40px minmax(0,1fr) 36px}
  .hs-runter{grid-column:1;grid-row:4;align-self:end;justify-self:start;padding-left:0}
  .hs-mag{min-height:300px}
  .hs-flaeche{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);grid-template-rows:auto 1fr;column-gap:30px;padding-top:calc(var(--hs-kopf) + 4px)}
  .hs-kopfzeile{grid-column:1;grid-row:1}
  .hs-mast{font-size:min(8.4vw,15svh)}
  .hs-zeile{margin-top:8px;padding-top:7px}
  .hs-unten{grid-column:1;grid-row:2;align-self:end}
  .hs-titel{font-size:min(5.4vw,11svh)}
  .hs-lines{margin-top:8px;padding-top:7px;font-size:9.5px}
  .hs-cta{margin-top:10px;min-height:48px}.hs-cta i{width:38px;height:38px}
  .hs-foto{grid-column:2;grid-row:1/3;margin:0 calc(-1 * var(--hs-rand-r)) 0 0}
  .hs-fuss{display:grid;grid-template-columns:1fr 1fr;column-gap:36px}
  .hs-fuss>*{grid-column:1}.hs-fuss .hs-fakten,.hs-fuss .hs-gal-gross{grid-column:2}.hs-fuss .hs-fakten{grid-row:1/4;margin-top:0;border-top:0;padding-top:0}
  .hs-menue ol{columns:1}.hs-menue ol a{min-height:58px;padding:12px 0}.hs-menue ol b{font-size:25px}
  .hs-m-wege{grid-template-columns:1fr 1fr 1fr}
}
/* Hohe Bildschirme hochkant: Titel etwas tiefer setzen, damit das Titelblatt ausgewogen gefüllt ist */
@media (orientation:portrait) and (min-height:780px){.hs-intro{padding-top:calc(var(--hs-kopf) + 9vh)}}
/* Niedrige Bildschirme hochkant (z. B. iPhone SE) */
@media (orientation:portrait) and (max-height:700px){
  .hs-intro h1{font-size:clamp(40px,12vw,54px)}.hs-lead{font-size:15.5px}
  .hs-index a{min-height:84px;grid-template-columns:48px minmax(0,1fr) 40px;padding:10px 0}.hs-mini{width:48px}.hs-ix b{font-size:25px}
  .hs-lines{display:none}
}

@media (prefers-reduced-motion:reduce){
  html.pager{scroll-behavior:auto}
  .hs-runter svg,.hs-menue,.hs-menue ol li{animation:none}
  .hs-burger span,.hs-cta,.hs-cta i svg,.hs-kopf{transition:none}
}