/* =====================================================================
   Hywatech Leistungsbroschüre 2026 – digitales Blättermagazin
   Designsystem übernommen von hywatech.netlify.app (Farben, Schriften,
   Glas-Flächen, Pillen). Seiteninhalte skalieren über --fs mit der
   Seitenbreite, damit jede Seite wie ein gedrucktes A4-Blatt wirkt.
   ===================================================================== */
:root{
  --bg:#EEF5FC; --bg-deep:#DDEAF8; --paper:#FBFDFF; --line:#D3E0EF; --dot:#C6D6EA;
  --blue:#2496ED; --blue-h:#1268BC; --blue-deep:#156FC6; --water:#7DBDF0; --sky:#CFE6FB;
  --signal:#F28C28; --red:#D8412F; --sage:#7DAA5A; --butter:#F6BE45;
  --ink:#0E2742; --ink-2:#3D5876; --muted:#566D88; --night:#0D1A2D;
  --glass:rgba(255,255,255,.62); --glass-strong:rgba(255,255,255,.82); --glass-border:rgba(255,255,255,.95);
  --shadow-soft:0 18px 40px -22px rgba(14,39,66,.45);
  --display:'Bricolage Grotesque','Arial Rounded MT Bold',ui-sans-serif,system-ui,sans-serif;
  --sans:'Instrument Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; background:var(--bg); color:var(--ink); font:16px/1.5 var(--sans); -webkit-font-smoothing:antialiased; overflow:hidden; overscroll-behavior:none}
a{color:inherit}
button{font:inherit; color:inherit}
img{max-width:100%}
:focus-visible{outline:2px solid var(--blue-deep); outline-offset:2px}
.sr{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
svg{width:1em; height:1em; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none}
.pages-src,.print-root{display:none}

/* ---------- Bühne: heller Boden mit Iso-Raster wie die 3D-Welt der Website ---------- */
.app{position:fixed; inset:0; overflow:hidden}
.stage{position:absolute; inset:0; overflow:hidden; background:
  radial-gradient(900px 600px at 50% 46%, rgba(255,255,255,.75), transparent 70%),
  radial-gradient(700px 700px at 92% 10%, rgba(36,150,237,.12), transparent 70%),
  radial-gradient(800px 800px at 4% 96%, rgba(125,189,240,.28), transparent 70%),
  linear-gradient(var(--bg), var(--bg-deep))}
.stage::before{content:""; position:absolute; left:50%; top:50%; width:260vmax; height:260vmax; margin:-130vmax 0 0 -130vmax; pointer-events:none;
  background-image:linear-gradient(rgba(150,182,218,.22) 1px, transparent 1px), linear-gradient(90deg, rgba(150,182,218,.22) 1px, transparent 1px);
  background-size:56px 56px; transform:rotateX(58deg) rotateZ(-38deg); transform-origin:50% 50%;
  -webkit-mask-image:radial-gradient(closest-side, #000 30%, transparent 78%); mask-image:radial-gradient(closest-side, #000 30%, transparent 78%)}

/* ---------- Kopfzeile ---------- */
.topbar{position:absolute; z-index:30; top:0; left:0; right:0; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:calc(14px + env(safe-area-inset-top,0px)) calc(18px + env(safe-area-inset-right,0px)) 0 calc(18px + env(safe-area-inset-left,0px)); pointer-events:none}
.topbar > *{pointer-events:auto}
.brand{display:inline-flex; align-items:center; gap:14px; height:52px; padding:0 22px; border-radius:999px; background:var(--paper); text-decoration:none; box-shadow:0 8px 20px -14px rgba(14,39,66,.5)}
.brand img{height:21px; width:auto; display:block}
.brand-sep{width:1px; height:20px; background:var(--line)}
.brand-title{font:500 13px/1 var(--mono); letter-spacing:.02em; color:var(--ink-2); white-space:nowrap}
.brand-title b{color:var(--blue-deep); font-weight:500}
.top-actions{display:flex; align-items:center; gap:10px}
.demo-badge{font:500 11px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2); background:var(--glass); border:1px solid var(--glass-border); padding:8px 11px; border-radius:999px; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px)}
.pill{display:inline-flex; align-items:center; justify-content:center; gap:8px; height:44px; padding:0 20px; border-radius:999px; font:600 15px/1 var(--sans); text-decoration:none; border:0; cursor:pointer; transition:background .15s, transform .15s}
.pill:active{transform:translateY(1px)}
.pill-blue{background:var(--blue-deep); color:#fff}
.pill-blue:hover{background:var(--blue-h)}
.pulse{position:relative}
.pulse::after{content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none; animation:pulse 2.6s ease-out infinite}
.pulse:hover::after{animation:none}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(36,150,237,.55)} 70%,100%{box-shadow:0 0 0 14px rgba(36,150,237,0)}}

/* ---------- Buch ---------- */
.book-wrap{position:absolute; left:0; right:0; display:grid; place-items:center; transform-origin:50% 50%; transition:transform .45s var(--ease)}
.book-wrap.panning{transition:none}
.book{position:relative; touch-action:pan-y; user-select:none; -webkit-user-select:none}
.book.zoomed{cursor:grab}
.book.zoomed:active{cursor:grabbing}
.book-shadow{position:absolute; top:0; bottom:0; border-radius:3px; pointer-events:none; z-index:0;
  box-shadow:0 2px 3px rgba(14,39,66,.12), 0 28px 60px -18px rgba(14,39,66,.42), 0 60px 120px -40px rgba(14,39,66,.35)}
.leaf{position:absolute; top:0; height:100%; transform-style:preserve-3d; -webkit-transform-style:preserve-3d; transform-origin:0 50%; will-change:transform}
.book.spread .leaf{left:50%; width:50%}
.book.single .leaf,.book.reader .leaf{left:0; width:100%}
.face{position:absolute; inset:0; overflow:hidden; background:var(--paper); backface-visibility:hidden; -webkit-backface-visibility:hidden}
.face.back{transform:rotateY(180deg)}
.face.blank{background:linear-gradient(90deg,#EEF3F8,#F7FAFD 40%,#F2F6FA)}
.face::before,.face::after{content:""; position:absolute; inset:0; pointer-events:none; z-index:20}
/* Bundsteg: leichte Wölbung zur Mitte hin */
.book.spread .face.front::before{background:linear-gradient(90deg, rgba(14,39,66,.16), rgba(14,39,66,.05) 2.2%, rgba(255,255,255,.0) 6%)}
.book.spread .face.back::before{background:linear-gradient(270deg, rgba(14,39,66,.18), rgba(14,39,66,.05) 2.2%, rgba(255,255,255,.0) 6%)}
/* Licht beim Umblättern (JS setzt --sh) */
.face.front::after{background:linear-gradient(90deg, rgba(255,255,255,.0) 10%, rgba(14,39,66,.38)); opacity:var(--sh,0)}
.face.back::after{background:linear-gradient(270deg, rgba(255,255,255,.12) 10%, rgba(14,39,66,.34)); opacity:var(--sh,0)}
.cast{position:absolute; top:0; height:100%; width:50%; pointer-events:none; opacity:0; z-index:60}
.cast-r{left:50%; background:linear-gradient(90deg, rgba(14,39,66,.5), rgba(14,39,66,.12) 30%, rgba(14,39,66,0) 70%)}
.cast-l{left:0; background:linear-gradient(270deg, rgba(14,39,66,.5), rgba(14,39,66,.12) 30%, rgba(14,39,66,0) 70%)}
.book.single .cast-r,.book.reader .cast-r{left:0; width:100%}
.book.single .cast-l,.book.reader .cast-l{display:none}
/* Papierkanten des Seitenstapels */
.stack{position:absolute; top:3px; bottom:3px; pointer-events:none; z-index:0; border-radius:2px;
  background:repeating-linear-gradient(90deg, #fff 0 1px, #D9E3EE 1px 2px)}
.stack-r{right:auto}
/* Eselsohr zum Anfassen */
.corner{position:absolute; bottom:0; width:12%; aspect-ratio:1; border:0; padding:0; background:none; cursor:pointer; z-index:200; touch-action:none}
.corner::before{content:""; position:absolute; bottom:0; width:0; height:0; transition:width .28s var(--ease), height .28s var(--ease); filter:drop-shadow(-2px -2px 3px rgba(14,39,66,.25))}
.corner-next{right:0}
.corner-next::before{right:0; background:linear-gradient(to top left, #E3EBF4 0 49.5%, rgba(14,39,66,.25) 49.6%, #F3F7FB 51%, #FFFFFF 85%)}
.corner-prev{left:0}
.corner-prev::before{left:0; background:linear-gradient(to top right, #E3EBF4 0 49.5%, rgba(14,39,66,.25) 49.6%, #F3F7FB 51%, #FFFFFF 85%); filter:drop-shadow(2px -2px 3px rgba(14,39,66,.25))}
.corner:hover::before,.corner.tease::before{width:62%; height:62%}
.corner[hidden]{display:none}
.book.dragging .corner,.book.zoomed .corner{display:none}

/* Seitenpfeile */
.side-nav{position:absolute; z-index:25; top:50%; width:52px; height:52px; margin-top:-10px; border-radius:50%; border:1px solid var(--glass-border); background:var(--glass-strong);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:var(--shadow-soft); display:grid; place-items:center; cursor:pointer; font-size:22px; color:var(--ink);
  transition:transform .15s, background .15s, opacity .2s}
.side-nav:hover{background:#fff; transform:scale(1.06)}
.side-nav:disabled{opacity:0; pointer-events:none}
.side-nav.prev{left:22px} .side-nav.next{right:22px}
.app.mode-reader .side-nav{display:none}

/* Einstiegshinweis */
.hint{position:absolute; z-index:26; left:50%; bottom:calc(var(--dockH,96px) + 14px); transform:translateX(-50%); display:flex; align-items:center; gap:12px; padding:10px 18px 10px 12px;
  border-radius:999px; background:var(--night); color:#fff; box-shadow:0 18px 40px -18px rgba(13,26,45,.7); transition:opacity .4s, transform .4s; white-space:nowrap}
.hint.out{opacity:0; transform:translateX(-50%) translateY(8px)}
.hint[hidden]{display:none}
.hint{pointer-events:none}
.h-touch{display:none!important}
@media (hover:none) and (pointer:coarse){ .h-desk{display:none!important} .h-touch{display:block!important} }
.hint b{display:block; font:600 14px/1.2 var(--sans)}
.hint small{display:block; font:400 12.5px/1.3 var(--sans); color:#B9C9DC}
.hint-ico{position:relative; width:30px; height:30px; border-radius:50%; background:var(--blue-deep); flex:none}
.hint-ico i{position:absolute; left:9px; top:9px; width:12px; height:12px; border-radius:50%; background:#fff; animation:swipe 1.8s var(--ease) infinite}
@keyframes swipe{0%{transform:translateX(5px); opacity:0} 20%{opacity:1} 80%{transform:translateX(-6px); opacity:1} 100%{transform:translateX(-7px); opacity:0}}

/* ---------- Steuerleiste ---------- */
.dock{position:absolute; z-index:30; left:50%; bottom:calc(14px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); padding:8px 10px 8px; border-radius:24px;
  background:var(--glass-strong); border:1px solid var(--glass-border); backdrop-filter:blur(18px) saturate(1.5); -webkit-backdrop-filter:blur(18px) saturate(1.5); box-shadow:0 24px 50px -28px rgba(14,39,66,.55)}
.dock-row{display:flex; align-items:center; gap:2px}
.ib{position:relative; display:grid; place-items:center; width:42px; height:42px; border:0; border-radius:14px; background:transparent; cursor:pointer; font-size:19px; color:var(--ink); transition:background .15s, color .15s}
.ib:hover{background:rgba(36,150,237,.1); color:var(--blue-deep)}
.ib:disabled{opacity:.32; pointer-events:none}
.ib[aria-pressed="false"]{color:var(--muted)}
.ib.on{background:var(--blue-deep); color:#fff}
.dock-sep{width:1px; height:24px; background:var(--line); margin:0 6px}
/* Play: Kreis mit Fortschrittsring bis zum nächsten Umblättern */
.ib.play{border-radius:50%; background:var(--blue-deep); color:#fff; font-size:17px}
.ib.play:hover{background:var(--blue-h); color:#fff}
.ib.play svg{fill:currentColor; stroke-width:1.5; margin-left:2px}
.ib.play.on{background:var(--ink)}
.ib.play.on svg{fill:none; stroke-width:2.6; margin-left:0}
.ib.play::before{content:""; position:absolute; inset:-4px; border-radius:50%; pointer-events:none; opacity:0; transition:opacity .2s;
  background:conic-gradient(var(--blue) calc(var(--p,0)*1turn), rgba(36,150,237,.15) 0);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px)); mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px))}
.ib.play.on::before{opacity:1}
.dock-pages{display:flex; align-items:baseline; gap:6px; height:42px; padding:0 14px; border:0; border-radius:14px; background:var(--bg); cursor:pointer; font:500 14px/42px var(--mono); color:var(--ink-2); min-width:104px; justify-content:center}
.dock-pages b{font-weight:500; color:var(--ink)}
.dock-pages:hover{background:var(--sky)}
[data-tip]:hover::after{content:attr(data-tip); position:absolute; bottom:calc(100% + 30px); left:50%; transform:translateX(-50%); white-space:nowrap; font:500 12px/1 var(--sans); color:#fff; background:var(--night); padding:7px 9px; border-radius:8px; pointer-events:none}
.scrub{position:relative; padding:2px 8px 8px}
.scrub input{-webkit-appearance:none; appearance:none; width:100%; height:18px; background:transparent; cursor:pointer; margin:0; display:block}
.scrub input::-webkit-slider-runnable-track{height:4px; border-radius:4px; background:linear-gradient(90deg, var(--blue-deep) var(--pct,0%), var(--line) var(--pct,0%))}
.scrub input::-moz-range-track{height:4px; border-radius:4px; background:linear-gradient(90deg, var(--blue-deep) var(--pct,0%), var(--line) var(--pct,0%))}
.scrub input::-webkit-slider-thumb{-webkit-appearance:none; width:16px; height:16px; margin-top:-6px; border-radius:50%; background:#fff; border:3px solid var(--blue-deep); box-shadow:0 2px 6px rgba(14,39,66,.3)}
.scrub input::-moz-range-thumb{width:12px; height:12px; border-radius:50%; background:#fff; border:3px solid var(--blue-deep)}
.scrub-tip{position:absolute; bottom:calc(100% + 6px); transform:translateX(-50%); font:500 12px/1 var(--sans); background:var(--night); color:#fff; padding:7px 9px; border-radius:8px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .15s}
.scrub:hover .scrub-tip,.scrub.active .scrub-tip{opacity:1}

/* ---------- Seitenübersicht ---------- */
.sheet{position:fixed; inset:0; z-index:50; display:grid; place-items:end center}
.sheet[hidden]{display:none}
.sheet-backdrop{position:absolute; inset:0; background:rgba(13,26,45,.32); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); animation:fade .25s both}
.sheet-panel{position:relative; width:min(1180px, calc(100% - 24px)); max-height:min(86vh, 860px); margin-bottom:12px; overflow:auto; border-radius:28px; background:var(--paper); box-shadow:0 40px 90px -30px rgba(13,26,45,.6); animation:rise .35s var(--ease) both}
.sheet-head{position:sticky; top:0; z-index:2; display:flex; justify-content:space-between; align-items:center; padding:20px 22px 14px 28px; background:linear-gradient(var(--paper) 70%, rgba(251,253,255,0))}
.sheet-kicker{margin:0 0 4px; font:500 11px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--blue-deep)}
.sheet-head h2{margin:0; font:800 30px/1 var(--display); letter-spacing:-.03em}
.thumbs{display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:26px 22px; padding:6px 28px 30px}
.thumb{appearance:none; border:0; padding:0; background:none; cursor:pointer; text-align:left; display:flex; flex-direction:column; gap:10px}
.thumb-pages{display:flex; justify-content:center; border-radius:6px; transition:transform .2s var(--ease)}
.thumb:hover .thumb-pages{transform:translateY(-3px)}
.thumb-p{position:relative; width:50%; aspect-ratio:210/297; overflow:hidden; background:var(--paper); box-shadow:0 1px 2px rgba(14,39,66,.15), 0 14px 26px -16px rgba(14,39,66,.5)}
.thumb-p.solo-r{margin-left:50%} .thumb-p.solo-l{margin-right:50%}
.thumb-p > .page{position:absolute; left:0; top:0; width:600px; height:848.6px; --fs:13.92px; transform-origin:0 0; pointer-events:none}
.thumb.cur .thumb-p{outline:3px solid var(--blue); outline-offset:3px}
.thumb-cap{display:flex; gap:10px; align-items:baseline; font:600 14px/1.25 var(--sans)}
.thumb-cap span{font:500 12px/1 var(--mono); color:var(--blue-deep); white-space:nowrap}
@keyframes fade{from{opacity:0}}
@keyframes rise{from{opacity:0; transform:translateY(24px)}}

.toast{position:absolute; z-index:40; left:50%; bottom:calc(var(--dockH,96px) + 14px); transform:translate(-50%,10px); padding:11px 16px; border-radius:12px; background:var(--night); color:#fff; font:500 14px/1.3 var(--sans);
  opacity:0; pointer-events:none; transition:opacity .25s, transform .25s; white-space:normal; width:max-content; max-width:calc(100vw - 32px); text-align:center; overflow-wrap:anywhere}
.toast.show{opacity:1; transform:translate(-50%,0)}

/* =====================================================================
   SEITEN – alle Maße in em, Basis --fs (≈ 2,3 % der Seitenbreite)
   ===================================================================== */
.page{position:relative; width:100%; height:100%; display:flex; flex-direction:column; overflow:hidden; background:var(--paper); color:var(--ink);
  font-size:var(--fs,13px); line-height:1.5; font-family:var(--sans); -webkit-print-color-adjust:exact; print-color-adjust:exact}
.page p{margin:0}
.page em{font-style:normal; color:var(--blue-deep)}
.pg-head{display:flex; justify-content:space-between; gap:1em; padding:2.3em 3em 0; font:500 .62em/1 var(--mono); letter-spacing:.09em; text-transform:uppercase; color:var(--muted); flex:none}
.pg-head::after{content:none}
.pg-body{flex:1 1 auto; min-height:0; display:flex; flex-direction:column; padding:2.1em 3em 0}
.pg-foot{display:flex; justify-content:space-between; align-items:center; padding:1em 3em 2em; font:500 .62em/1 var(--mono); letter-spacing:.06em; color:var(--muted); flex:none}
.pg-num{display:inline-grid; place-items:center; min-width:2.6em; height:2.6em; padding:0 .5em; border-radius:999px; background:var(--bg); color:var(--ink); font-weight:500}

.eyebrow{display:flex; align-items:center; gap:.7em; font:500 .7em/1.2 var(--mono); letter-spacing:.09em; text-transform:uppercase; color:var(--blue-deep)}
.eyebrow::before{content:""; width:.75em; height:.75em; border-radius:50%; background:var(--blue); box-shadow:0 0 0 .3em rgba(36,150,237,.18); flex:none}
.eyebrow.on-blue{color:#CFE6FB}
.eyebrow.on-blue::before{background:#fff; box-shadow:0 0 0 .3em rgba(255,255,255,.2)}
.h{font:800 2.45em/.98 var(--display); letter-spacing:-.045em; margin:.42em 0 .42em; text-wrap:balance; font-variation-settings:"opsz" 96}
.h3{font:800 1.5em/1.08 var(--display); letter-spacing:-.03em; margin:.5em 0 .7em; text-wrap:balance}
.lead{font-size:1em; line-height:1.5; color:var(--ink-2); max-width:42em}
.mini-h{font:600 .66em/1 var(--mono)!important; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); margin:0 0 .9em!important}
.fine{font-size:.66em; color:var(--muted); margin-top:auto!important; padding-top:.8em}
.chip{display:inline-flex; align-items:center; font:500 .74em/1 var(--mono); padding:.6em .85em; border-radius:999px; background:var(--bg); color:var(--ink-2)}
.cols-2{display:grid; grid-template-columns:1fr 1fr; gap:0 1.6em}
.chk{list-style:none; margin:0; padding:0; display:grid; gap:.55em}
.chk li{position:relative; padding-left:1.9em; font-size:.92em; line-height:1.4}
.chk li::before{content:""; position:absolute; left:0; top:.05em; width:1.3em; height:1.3em; border-radius:50%; background:var(--sky) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23156FC6' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/62% no-repeat}
.chk.tight{gap:.5em 1.4em}

/* 3D-Flächen */
.gl{position:relative; margin:0; min-height:0}
.gl canvas{position:absolute; inset:0; width:100%; height:100%; display:block}
.gl canvas.gl-live{cursor:grab; touch-action:pan-y}
.gl canvas.gl-live:active{cursor:grabbing}
.gl-hint{position:absolute; right:.6em; top:.6em; display:inline-flex; align-items:center; gap:.45em; padding:.45em .75em; border-radius:999px; background:rgba(255,255,255,.86); font:500 .62em/1 var(--mono); color:var(--ink-2); pointer-events:none; box-shadow:0 6px 14px -10px rgba(14,39,66,.5)}
.gl-hint svg{font-size:1.25em}
.hs{position:absolute; z-index:3; width:1.75em; height:1.75em; margin:-.875em 0 0 -.875em; padding:0; border-radius:50%; border:.17em solid #fff; background:var(--blue-deep); color:#fff;
  font:600 .78em/1 var(--mono); display:grid; place-items:center; cursor:pointer; box-shadow:0 .3em .8em -.2em rgba(14,39,66,.6); transition:transform .15s, background .15s}
.hs::after{content:""; position:absolute; inset:-.45em; border-radius:50%; border:.12em solid rgba(36,150,237,.6); animation:ring 2.4s var(--ease) infinite; pointer-events:none}
.hs:hover,.hs.lit{transform:scale(1.18); background:var(--signal)}
.hs[hidden]{display:none}
@keyframes ring{0%{transform:scale(.6); opacity:1} 100%{transform:scale(1.5); opacity:0}}
.legend{list-style:none; margin:.6em 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:.4em 1.4em; counter-reset:lg}
.legend[hidden]{display:none}
.legend li{position:relative; padding-left:2em; font-size:.8em; line-height:1.35; color:var(--ink-2); cursor:default; border-radius:.5em; transition:color .15s}
.legend li::before{counter-increment:lg; content:counter(lg); position:absolute; left:0; top:-.05em; width:1.45em; height:1.45em; border-radius:50%; background:var(--bg); color:var(--blue-deep); font:600 .9em/1.45em var(--mono); text-align:center; transition:background .15s, color .15s}
.legend li b{color:var(--ink)}
.legend li.lit{color:var(--ink)}
.legend li.lit::before{background:var(--signal); color:#fff}
.tag{position:absolute; z-index:3; transform:translate(-50%,-140%); padding:.5em .8em; border-radius:999px; background:var(--butter); color:var(--ink); font:500 .68em/1 var(--mono); white-space:nowrap; box-shadow:0 .4em 1em -.5em rgba(14,39,66,.6); pointer-events:none}
.tag[hidden]{display:none}
.bubble{position:absolute; z-index:4; transform:translate(-50%,-100%); margin-top:-.8em; max-width:16em; padding:.7em .9em; border-radius:1em; background:var(--night); color:#fff; font:500 .78em/1.35 var(--sans); box-shadow:0 1em 2em -1em rgba(13,26,45,.7); pointer-events:none; animation:pop .25s var(--ease)}
.bubble::after{content:""; position:absolute; left:50%; bottom:-.45em; width:.9em; height:.9em; margin-left:-.45em; background:var(--night); transform:rotate(45deg); border-radius:.15em}
.bubble[hidden]{display:none}
@keyframes pop{from{opacity:0; transform:translate(-50%,-90%) scale(.9)}}
.no-gl .gl{background:linear-gradient(135deg, var(--bg), var(--bg-deep)); border-radius:1em}
.no-gl .gl::after{content:"3D-Ansicht in diesem Browser nicht verfügbar"; position:absolute; inset:0; display:grid; place-items:center; font:500 .7em/1 var(--mono); color:var(--muted)}
.no-gl .gl .hs,.no-gl .gl-hint,.no-gl .tag,.no-gl .name{display:none}

/* Segment-Umschalter (wie der Tempo-Umschalter der Website) */
.seg{display:inline-flex; align-self:flex-start; gap:.25em; padding:.28em; border-radius:999px; background:var(--bg); margin:.9em 0 .2em}
.seg button{appearance:none; border:0; background:transparent; padding:.62em 1.05em; border-radius:999px; font:600 .78em/1 var(--sans); color:var(--ink-2); cursor:pointer; transition:background .2s, color .2s}
.seg button:hover{color:var(--ink)}
.seg button.on{background:var(--ink); color:#fff}

/* ---------- 01 Titel ---------- */
.cover{background:var(--bg)}
.cover-top{position:absolute; left:0; right:0; top:0; height:64%}
.gl-cover{position:absolute; inset:0}
.cover-brand{position:absolute; left:2.4em; top:2.2em; z-index:3; padding:1em 1.4em; border-radius:999px; background:var(--paper); box-shadow:0 .7em 1.6em -1.1em rgba(14,39,66,.55)}
.cover-brand img{display:block; height:1.7em; width:auto}
.cover-issue{position:absolute; right:2.4em; top:2.2em; z-index:3; display:flex; flex-direction:column; align-items:flex-end; gap:.25em; font:500 .66em/1 var(--mono); letter-spacing:.09em; text-transform:uppercase; color:var(--ink-2)}
.cover-issue b{font:800 2.6em/1 var(--display); letter-spacing:-.03em; color:var(--blue-deep)}
.cover-band{position:absolute; left:0; right:0; bottom:0; height:43%; z-index:2; padding:5.2em 3em 2.6em; display:flex; flex-direction:column; justify-content:flex-end;
  background:radial-gradient(60em 30em at 90% 0%, rgba(125,189,240,.45), transparent 60%), linear-gradient(160deg, #1F86DA, var(--blue-deep) 55%, #0F5AA6); color:#fff;
  clip-path:polygon(0 17%, 100% 0, 100% 100%, 0 100%)}
.cover-band h1{font:800 3.35em/.95 var(--display); letter-spacing:-.05em; margin:.35em 0 .4em; text-wrap:balance; font-variation-settings:"opsz" 96}
.cover-band h1 em{color:#BFE0FB}
.cover-sub{font-size:1.04em; line-height:1.45; color:#E2F0FC; max-width:34em}
.cover-chips{list-style:none; display:flex; flex-wrap:wrap; gap:.45em; padding:0; margin:1.3em 0 0}
.cover-chips li{font:500 .7em/1 var(--mono); padding:.65em .9em; border-radius:999px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28)}
.accent{position:absolute; left:3em; top:5.2em; display:flex; gap:.3em}
.accent i{display:block; height:.32em; width:2.4em; border-radius:1em; background:#fff}
.accent i:nth-child(2){background:var(--water); width:1.4em}
.accent i:nth-child(3){background:var(--signal); width:.8em}

/* ---------- 02 Editorial & Inhalt ---------- */
.editorial p{font-size:.92em; line-height:1.55; color:var(--ink-2)}
.initial{float:left; font:800 3.3em/.82 var(--display); color:var(--blue-deep); margin:.06em .12em 0 0}
.sign{display:flex; align-items:center; gap:.9em; margin:1.5em 0 0}
.sign img{width:2.6em; height:2.6em; padding:.5em; border-radius:50%; background:var(--bg)}
.sign b{display:block; font:700 1em/1.2 var(--display); letter-spacing:-.01em}
.sign small{display:block; font:500 .66em/1.4 var(--mono); color:var(--muted); letter-spacing:.04em}
.toc{margin-top:auto; padding-top:1.4em}
.toc-h{font:800 1.5em/1 var(--display); letter-spacing:-.03em; margin:0 0 .5em!important}
.toc{display:grid; grid-template-columns:1fr 1fr; column-gap:1.4em; align-content:start}
.toc-h{grid-column:1/-1}
.toc-row{display:grid; grid-template-columns:2.3em 1fr auto; align-items:center; gap:.3em; padding:.6em .2em; border-top:1px solid var(--line); text-decoration:none; transition:background .15s, padding .2s; border-radius:.4em}
.toc-row:nth-last-child(-n+2){border-bottom:1px solid var(--line)}
.toc-row:hover{background:var(--bg); padding-left:.6em}
.toc-n{font:500 .8em/1 var(--mono); color:var(--blue-deep)}
.toc-t b{display:block; font:600 .95em/1.2 var(--sans)}
.toc-t small{display:block; font-size:.74em; color:var(--muted); line-height:1.35}
.toc-a{font-size:1.1em; color:var(--blue-deep); transition:transform .2s}
.toc-row:hover .toc-a{transform:translateX(.25em)}

/* ---------- Rauten (Quadrat-Motiv aus dem Hywatech-Logo) ---------- */
.gems{pointer-events:none}
.gem{position:absolute; left:var(--x); top:var(--y); width:var(--s); height:var(--s); transform:translate(-50%,-50%) rotate(45deg); border-radius:.55em; overflow:hidden; background:var(--gc,var(--blue))}
.gem.ph{border:.32em solid #fff; box-shadow:0 1.3em 2.4em -1.3em rgba(14,39,66,.6); background:var(--bg)}
.gem.ph img{position:absolute; left:50%; top:50%; width:142%; height:142%; max-width:none; transform:translate(-50%,-50%) rotate(-45deg); object-fit:cover}
.gem.line{background:none; border:.16em solid var(--gc)}
.gem.logo{display:grid; place-items:center; border:.32em solid #fff; background:linear-gradient(135deg,var(--blue),var(--blue-deep)); box-shadow:0 1.3em 2.4em -1.3em rgba(14,39,66,.6)}
.gem.logo img{width:46%; height:auto; transform:rotate(-45deg)}
.cover-gems{position:absolute; inset:0; z-index:3}
.cover-gems .g1{--x:79%; --y:52.5%; --s:9.6em}
.cover-gems .g2{--x:96%; --y:41.5%; --s:6.2em}
.cover-gems .g3{--x:60.5%; --y:58.4%; --s:2.6em; --gc:var(--blue)}
.cover-gems .g4{--x:63.5%; --y:50%; --s:1.7em; --gc:var(--water)}
.cover-gems .g5{--x:94.5%; --y:60.8%; --s:1.6em; --gc:var(--night)}
.cover-gems .g6{--x:57%; --y:52.6%; --s:1.05em; --gc:var(--signal)}
.cover-gems .g7{--x:88%; --y:30%; --s:2.4em; --gc:var(--blue); background:none; border:.16em solid var(--blue); border-radius:.4em}
.hatch{position:absolute; right:0; top:0; width:42%; height:34%; z-index:2; pointer-events:none;
  background:repeating-linear-gradient(135deg, rgba(36,150,237,.28) 0 1.5px, transparent 1.5px 11px);
  -webkit-mask-image:linear-gradient(225deg,#000 10%,transparent 62%); mask-image:linear-gradient(225deg,#000 10%,transparent 62%)}
.gems-fig{position:relative; margin:0; min-height:15em}
.gems-fig .d1{--x:48%; --y:36%; --s:11.6em}
.gems-fig .d2{--x:72%; --y:71%; --s:6.2em}
.gems-fig .d3{--x:17%; --y:71%; --s:2.6em; --gc:var(--blue)}
.gems-fig .d4{--x:31%; --y:85%; --s:1.6em; --gc:var(--water)}
.gems-fig .d5{--x:88%; --y:8%; --s:1.2em; --gc:var(--signal)}
.gems-fig figcaption{position:absolute; left:0; right:0; bottom:0; padding:.6em .75em; border-radius:.8em; background:rgba(255,255,255,.92); font-size:.68em; line-height:1.3; color:var(--ink-2); box-shadow:0 .6em 1.4em -1em rgba(14,39,66,.5)}
.gems-fig figcaption b{color:var(--ink); font-weight:600}
.gem-lbl{position:absolute; z-index:2; white-space:nowrap; padding:.4em .6em; border-radius:.45em; font:600 .6em/1 var(--mono); letter-spacing:.04em; text-transform:uppercase; color:#fff; box-shadow:0 .4em 1em -.6em rgba(14,39,66,.7)}
.gem-lbl.l1{left:99%; top:36%; transform:translate(-100%,-50%); background:#3F51C0}
.gem-lbl.l2{left:47%; top:71%; transform:translate(-100%,-50%); background:var(--ink)}
.gem.ph.dark{background:#000}
.gem.ph.dark img{transform:translate(-50%,-50%) rotate(-45deg) scale(1.55)}
.rpt-kpis b{transition:color .3s}
.rpt-kpis b.neu{color:#4B3AFF}

/* ---------- Daumenregister an der Außenkante ---------- */
.reg{position:absolute; z-index:6; top:calc(7.4em + var(--ri)*11em); font:600 .6em/1 var(--mono); letter-spacing:.06em; text-transform:uppercase;
  width:3.2em; height:10.4em; display:flex; align-items:center; justify-content:center; gap:.7em; writing-mode:vertical-rl;
  background:var(--rc); color:#fff; text-decoration:none; transition:width .2s var(--ease)}
.reg b{font-weight:600; opacity:.7}
.reg-l{left:0; border-radius:0 .9em .9em 0; transform:rotate(180deg)}
.reg-r{right:0; border-radius:.9em 0 0 .9em}
.reg:hover{width:3.8em}
.book.reader .reg{display:none}

/* ---------- 03 Zahlen ---------- */
.gl-map{flex:1 1 auto; min-height:14em; margin:.2em -1.5em 0}
.map-legend{position:absolute; left:1.5em; top:.6em; display:flex; align-items:center; gap:.6em; font:500 .64em/1.3 var(--mono); color:var(--ink-2)}
.map-legend small{color:var(--muted); margin-left:.4em}
.lg-dot{width:.9em; height:.9em; border-radius:50%; background:var(--blue); box-shadow:0 0 0 .3em rgba(36,150,237,.2)}
.map-scale{position:absolute; right:1.5em; bottom:.5em; display:flex; align-items:center; gap:.5em; font:500 .6em/1 var(--mono); color:var(--muted)}
.map-scale i{width:6em; height:.5em; border-radius:1em; background:linear-gradient(90deg, #D3E3F4, #7DBDF0, #2496ED, #156FC6)}
.kpis{display:grid; grid-template-columns:1fr 1fr; gap:.6em; margin-top:.4em}
.kpi{padding:.85em 1em .8em; border-radius:1em; background:var(--bg)}
.kpi b{display:block; font:800 2em/1 var(--display); letter-spacing:-.04em; color:var(--ink); font-variant-numeric:tabular-nums}
.kpi span{display:block; margin-top:.4em; font-size:.74em; color:var(--ink-2); line-height:1.35}
.kpi:first-child{background:var(--blue-deep)} .kpi:first-child b{color:#fff} .kpi:first-child span{color:#D6EAFB}
.for{display:flex; flex-wrap:wrap; align-items:center; gap:.4em; margin-top:.9em!important}
.for-l{font:500 .7em/1 var(--mono); color:var(--muted); margin-right:.3em; text-transform:uppercase; letter-spacing:.08em}

/* ---------- 04 Zählerwechsel ---------- */
.facts{display:grid; grid-template-columns:repeat(3,1fr); gap:.6em; margin:1.2em 0 1.3em}
.facts div{padding:.8em .9em; border-radius:1em; border:1px solid var(--line)}
.facts b{display:block; font:800 1.55em/1 var(--display); letter-spacing:-.03em; color:var(--blue-deep)}
.facts span{display:block; font-size:.72em; color:var(--ink-2); margin-top:.35em; line-height:1.3}
.split{display:grid; grid-template-columns:1fr 1.15fr; gap:1.4em; flex:1 1 auto; min-height:0}
.photo{position:relative; margin:0; border-radius:1.2em; overflow:hidden; min-height:12em; background:var(--bg)}
.photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.photo figcaption{position:absolute; left:.7em; right:.7em; bottom:.7em; padding:.6em .75em; border-radius:.8em; background:rgba(255,255,255,.88); font-size:.68em; line-height:1.3; color:var(--ink-2); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px)}
.photo figcaption span{display:inline-block; margin-right:.4em; padding:.25em .5em; border-radius:.4em; background:var(--signal); color:#fff; font:600 .9em/1 var(--mono)}
.split .chk{gap:.62em}

/* ---------- 05 Messstelle ---------- */
.gl-meter{flex:1 1 auto; min-height:15em; margin:0 -1.2em; border-radius:1.4em; background:radial-gradient(closest-side at 50% 60%, #fff, rgba(255,255,255,0)), linear-gradient(180deg, var(--bg) 0%, rgba(238,245,252,0) 90%)}
.gl-reading{position:absolute; left:1.2em; bottom:.8em; padding:.5em .8em; border-radius:.7em; background:var(--night); color:#B6D58F; font:500 .66em/1 var(--mono); pointer-events:none}
.gl-reading b{color:#fff; font-weight:500; font-variant-numeric:tabular-nums}
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:.6em; margin-top:1.1em}
.stats div{padding:.75em .85em; border-radius:1em; background:var(--bg)}
.stats b{display:block; font:800 1.45em/1 var(--display); letter-spacing:-.03em}
.stats span{display:block; font-size:.7em; color:var(--ink-2); margin-top:.35em; line-height:1.3}
.callout{margin-top:.8em; padding:.85em 1em .85em 3em; border-radius:1em; position:relative; background:#FFF6EB; color:#6B4513; font-size:.8em; line-height:1.45; overflow:hidden}
.callout-img{float:right; width:6.4em; height:4.8em; margin:-.2em -.35em .1em .9em; border-radius:.7em; object-fit:cover; object-position:45% 55%; box-shadow:0 .5em 1em -.7em rgba(107,69,19,.6)}
.callout::before{content:"!"; position:absolute; left:1em; top:.85em; width:1.4em; height:1.4em; border-radius:50%; background:var(--signal); color:#fff; font:700 .9em/1.55em var(--mono); text-align:center}
.callout b{color:#4A2E0A}

/* ---------- 06 Hydrant ---------- */
.gl-hydrant{flex:1 1 auto; min-height:15em; margin:.4em -1.2em 0}
.gauge-bar{position:absolute; left:1.2em; right:1.2em; bottom:.4em; display:flex; flex-wrap:wrap; gap:.35em; align-items:center; pointer-events:none}
.gauge-bar > span{display:inline-flex; align-items:baseline; gap:.35em; padding:.5em .7em; border-radius:.7em; background:rgba(255,255,255,.9); box-shadow:0 .4em 1em -.7em rgba(14,39,66,.5); font:500 .64em/1 var(--mono); color:var(--ink-2)}
.gauge-bar i{font-style:normal; color:var(--muted)}
.gauge-bar b{font-weight:500; color:var(--ink); font-variant-numeric:tabular-nums}
.gauge-bar .gb-state{background:var(--night); color:#B6D58F}
.gauge-bar .gb-state.on{color:#7DBDF0}

/* ---------- 07 Protokoll ---------- */
.proto{margin-top:1.3em; border-radius:1.3em; background:#fff; border:1px solid var(--line); box-shadow:0 1.4em 2.8em -2em rgba(14,39,66,.55); overflow:hidden}
.proto-head{display:flex; justify-content:space-between; align-items:center; padding:.95em 1.1em; background:var(--night); color:#fff}
.proto-k{display:block; font:500 .62em/1 var(--mono); letter-spacing:.09em; text-transform:uppercase; color:#8FB4DA; margin-bottom:.35em}
.proto-head b{font:800 1.35em/1 var(--display); letter-spacing:-.02em}
.pill-ok{display:inline-flex; align-items:center; gap:.4em; padding:.5em .8em; border-radius:999px; background:#E7F4DC; color:#3C6B1E; font:600 .72em/1 var(--sans)}
.proto-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin:0; padding:.3em .6em}
.proto-grid div{padding:.55em .5em; border-bottom:1px dashed var(--line)}
.proto-grid dt{font:500 .58em/1 var(--mono); letter-spacing:.07em; text-transform:uppercase; color:var(--muted)}
.proto-grid dd{margin:.35em 0 0; font-size:.8em; font-weight:600; line-height:1.25}
.proto-defect{display:flex; align-items:center; gap:.8em; margin:.7em 1.1em 0; padding:.7em .8em; border-radius:.9em; background:#FFF6EB}
.proto-defect b{display:block; font-size:.84em}
.proto-defect small{display:block; font-size:.7em; color:var(--ink-2)}
.proto-photos{display:grid; grid-template-columns:repeat(4,1fr); gap:.45em; padding:.8em 1.1em}
.proto-photos img{width:100%; aspect-ratio:1; object-fit:cover; border-radius:.6em; display:block}
.proto-more small{display:block; margin-top:.35em; font:500 .62em/1 var(--sans); color:var(--muted)}
.proto-more{display:grid; place-content:center; text-align:center; aspect-ratio:1; border-radius:.6em; background:var(--bg); font:600 .9em/1 var(--mono); color:var(--ink-2)}
.proto-foot{display:flex; justify-content:space-between; padding:.7em 1.1em .9em; border-top:1px solid var(--line); font:500 .62em/1 var(--mono); color:var(--muted)}
.cls{display:inline-grid; place-items:center; width:1.9em; height:1.9em; border-radius:.55em; font:700 .82em/1 var(--mono); color:#fff; flex:none}
.cls-a{background:var(--red)} .cls-b{background:var(--signal)} .cls-c{background:var(--sage)}
.classes{margin-top:1.4em}
.cls-row{display:flex; align-items:center; gap:.8em; padding:.45em 0}
.cls-row p{font-size:.82em; color:var(--ink-2); line-height:1.35}
.cls-row b{color:var(--ink)}

/* ---------- 08 Funk ---------- */
.gl-radio{flex:1 1 auto; min-height:12em; margin:.5em -1.2em 0}
.radio-hud{position:absolute; left:1.2em; top:.5em; display:flex; gap:.4em; pointer-events:none}
.radio-hud > span{display:inline-flex; align-items:center; gap:.45em; padding:.5em .75em; border-radius:999px; background:rgba(255,255,255,.92); font:500 .64em/1 var(--mono); color:var(--ink-2); box-shadow:0 .4em 1em -.7em rgba(14,39,66,.5)}
.radio-hud b{font-weight:500; color:var(--ink)}
.rh-live i{width:.6em; height:.6em; border-radius:50%; background:var(--sage); animation:blink 1.2s steps(1) infinite}
@keyframes blink{50%{opacity:.25}}
.tag-cloud{background:#fff; color:var(--blue-deep)}
.cmp{width:100%; border-collapse:separate; border-spacing:0; margin-top:.8em; font-size:.76em}
.cmp th,.cmp td{text-align:left; padding:.5em .55em; border-bottom:1px solid var(--line); line-height:1.25; vertical-align:top}
.cmp thead th{font:600 .9em/1 var(--mono); color:var(--ink-2); border-bottom:2px solid var(--line)}
.cmp tbody th{font-weight:600; color:var(--muted); width:24%}
.cmp td{color:var(--ink-2); transition:background .2s, color .2s}
.cmp .hl{background:var(--sky); color:var(--ink)}
.cmp thead .hl{background:var(--ink); color:#fff}
.cmp thead th:first-child + th.hl{border-top-left-radius:.6em}
.brands{margin-top:1.1em}
.brand-row{display:flex; align-items:center; justify-content:space-between; gap:1em; padding:.3em 0}
.brand-row img{height:1.7em; width:auto; max-width:16%; object-fit:contain; filter:grayscale(1) contrast(.9); opacity:.75}
.brands .fine{margin-top:.5em!important; padding-top:0}

/* ---------- 09 AquaFlow ---------- */
.af-top{display:flex; justify-content:space-between; align-items:center}
.af-logo{height:2.1em; width:auto}
.devices{position:relative; margin:1.2em 0 1.6em; padding-right:5em}
.stoerer{position:absolute; z-index:5; right:10.4em; top:-2.8em; width:7.5em; height:7.5em; margin:0; padding:.7em; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  background:radial-gradient(circle at 35% 30%, #F6A54A, var(--signal) 55%, #E07A1F); color:#fff; transform:rotate(-11deg); box-shadow:0 1em 2em -1em rgba(224,122,31,.85), inset 0 0 0 .18em rgba(255,255,255,.22)}
.stoerer::before{content:""; position:absolute; inset:.38em; border-radius:50%; border:.12em dashed rgba(255,255,255,.65); pointer-events:none}
.stoerer small{font:600 .5em/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; opacity:.92}
.stoerer b{font:800 .9em/1.02 var(--display); letter-spacing:-.02em; margin:.32em 0 .28em; text-wrap:balance}
.stoerer span{font:600 .6em/1.1 var(--sans); opacity:.95}
.stoerer.go{animation:stempel .65s var(--ease) both}
@keyframes stempel{0%{transform:rotate(-24deg) scale(1.5); opacity:0} 60%{transform:rotate(-8deg) scale(.94); opacity:1} 100%{transform:rotate(-11deg) scale(1)}}
.tablet{position:relative; padding:.65em; border-radius:1.4em; background:#16263B; box-shadow:0 2em 3em -2em rgba(14,39,66,.65)}
.tablet-bar{display:flex; gap:.3em; padding:.1em .1em .6em}
.tablet-bar button{appearance:none; border:0; padding:.5em .8em; border-radius:999px; background:rgba(255,255,255,.08); color:#AFC3DA; font:500 .66em/1 var(--mono); cursor:pointer}
.tablet-bar button.on{background:#fff; color:var(--ink)}
.tablet-screen{position:relative; aspect-ratio:700/438; border-radius:.8em; overflow:hidden; background:#F4F7FA}
.shot{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .35s}
.shot.on{opacity:1}
.live-chip{position:absolute; left:1.4em; bottom:-1em; display:inline-flex; align-items:center; gap:.5em; padding:.6em .9em; border-radius:999px; background:var(--night); color:#DCE8F5; font:500 .64em/1 var(--mono); box-shadow:0 1em 2em -1em rgba(13,26,45,.8)}
.live-chip i{width:.65em; height:.65em; border-radius:50%; background:#E64A3B; box-shadow:0 0 0 .3em rgba(230,74,59,.25); animation:blink 1.1s steps(1) infinite}
.live-chip b{color:#fff; font-weight:500; font-variant-numeric:tabular-nums}
.phone{position:absolute; right:0; top:2.8em; width:10.2em; padding:.45em; border-radius:1.6em; background:#16263B; box-shadow:0 2em 3em -1.6em rgba(14,39,66,.75)}
.phone-notch{width:3.2em; height:.5em; margin:.15em auto .35em; border-radius:1em; background:#0B1625}
.phone-shot{display:block; width:100%; height:auto; border-radius:1.2em; background:#F6F7F9}
.ph-k{font:500 .55em/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--blue-deep)}
.ph-t{font:800 .95em/1.15 var(--display); margin:.3em 0 .6em!important}
.ph-card{padding:.55em .6em; border-radius:.7em; background:var(--bg)}
.ph-card small{display:block; font-size:.55em; color:var(--muted)}
.ph-card b{display:block; font-size:.72em}
.ph-s{font-size:.6em; color:var(--muted); margin:.7em 0 .35em!important}
.ph-slots{display:flex; flex-wrap:wrap; gap:.25em}
.ph-slots span{font:500 .52em/1 var(--mono); padding:.55em .5em; border-radius:.5em; border:1px solid var(--line); color:var(--ink-2)}
.ph-slots span.on{background:var(--blue-deep); border-color:var(--blue-deep); color:#fff}
.ph-btn{display:block; margin-top:.8em; padding:.65em; border-radius:999px; background:var(--ink); color:#fff; text-align:center; font:600 .6em/1 var(--sans)}
.feed{margin:.1em 0 1.1em}
.feed .mini-h span{margin-left:.6em; padding:.3em .5em; border-radius:999px; background:var(--bg); letter-spacing:.04em}
.feed ul{list-style:none; margin:0; padding:0; display:grid; gap:.32em}
.feed li{display:flex; align-items:center; gap:.65em; padding:.5em .75em; border-radius:.75em; background:var(--bg); font-size:.74em; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.feed li.new{animation:feedin .5s var(--ease)}
@keyframes feedin{from{opacity:0; transform:translateY(-.6em)}}
.feed time{font:500 .92em/1 var(--mono); color:var(--muted)}
.feed i{width:.6em; height:.6em; border-radius:50%; background:var(--sage); flex:none}
.feed i.warn{background:var(--signal)} .feed i.info{background:var(--blue)}
.feed b{color:var(--ink); font-weight:600}
.feat{list-style:none; margin:auto 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:.8em 1.4em}
.feat li{font-size:.78em; color:var(--ink-2); line-height:1.35; padding-left:1.1em; border-left:2px solid var(--blue)}
.feat b{display:block; color:var(--ink); font-size:1.05em}

/* ---------- 10 Ablauf ---------- */
.steps{list-style:none; margin:.6em 0 0; padding:0; display:grid; gap:.3em; position:relative}
.steps::before{content:""; position:absolute; left:3.2em; top:2em; bottom:2em; width:2px; background:repeating-linear-gradient(var(--water) 0 .35em, transparent .35em .7em)}
.steps li{display:grid; grid-template-columns:6.4em 1fr; gap:1em; align-items:center}
.gl-token{width:6.4em; height:6.4em; border-radius:50%; background:radial-gradient(closest-side, #fff 60%, rgba(255,255,255,0))}
.st-h{display:flex; flex-wrap:wrap; align-items:center; gap:.45em; margin-bottom:.4em!important}
.steps li:nth-child(1){--sc:var(--ink)} .steps li:nth-child(2){--sc:var(--blue-deep)} .steps li:nth-child(3){--sc:var(--blue)} .steps li:nth-child(4){--sc:#E07A1F}
.rib{display:inline-block; padding:.42em 1.5em .42em .75em; background:var(--sc); color:#fff; font:800 1.02em/1.1 var(--display); letter-spacing:-.015em; clip-path:polygon(0 0,100% 0,calc(100% - .7em) 100%,0 100%); border-radius:.35em 0 0 .35em}
.tri{display:grid; place-items:end center; width:2.9em; height:2.5em; padding-bottom:.32em; margin-left:-.5em; background:var(--sc); color:#fff; font:600 .62em/1 var(--mono); clip-path:polygon(50% 0,100% 100%,0 100%)}
.st-h em{font:500 .56em/1 var(--mono)!important; color:var(--ink-2)!important; background:var(--bg); padding:.45em .6em; border-radius:999px; letter-spacing:.02em}
.steps p:not(.st-h){font-size:.82em; color:var(--ink-2); line-height:1.45}
.dotcal{margin-top:auto; padding:1em 1.1em .85em; border-radius:1.2em; background:var(--bg)}
.dc-head{display:flex; justify-content:space-between; align-items:baseline}
.dc-unit{font:500 .58em/1 var(--mono); color:var(--muted); letter-spacing:.06em; text-transform:uppercase}
.dc-grid{display:grid; grid-template-columns:8em 1fr; gap:.48em .6em; align-items:center}
.dc-l{font-size:.68em; color:var(--ink-2); white-space:nowrap}
.dc-wk,.dc-row{display:grid; grid-template-columns:repeat(var(--wk,15),1fr); justify-items:center; align-items:center}
.dc-wk span{font:500 .54em/1 var(--mono); color:var(--muted)}
.dc-row i{width:.66em; height:.66em; border-radius:50%; background:#D3E0EF; transition:transform .3s}
.dc-row i.on{background:var(--c)}
.dc-row i.pk{transform:scale(1.4); box-shadow:0 0 0 .14em rgba(255,255,255,.9)}
.dotcal.go .dc-row i.on{animation:dotin .45s var(--ease) both; animation-delay:calc(var(--d)*35ms)}
@keyframes dotin{from{transform:scale(0)}}
.dc-note{display:flex; align-items:center; gap:.5em; margin-top:.75em!important; font:500 .58em/1 var(--mono); color:var(--muted)}
.dc-note i{width:.9em; height:.9em; border-radius:50%; background:var(--blue-deep)}
.dc-note i.pk{width:1.2em; height:1.2em; margin-left:.8em}

/* ---------- 10 Ankündigung ---------- */
.letter-wrap{display:grid; grid-template-columns:1.3fr 1fr; gap:1.5em; align-items:center; margin:1.1em 0 0; flex:1 1 auto; min-height:0}
.letter{position:relative; margin:0 0 1.2em; transform:rotate(-1.6deg)}
.letter::before{content:""; position:absolute; inset:0; background:#F4F7FB; border-radius:.2em; transform:rotate(3.4deg) translate(.5em,.2em); box-shadow:0 1em 2em -1.3em rgba(14,39,66,.5); z-index:-1}
.letter img{display:block; width:100%; height:auto; border-radius:.2em; background:#fff; box-shadow:0 .15em .4em rgba(14,39,66,.14), 0 1.8em 2.8em -1.5em rgba(14,39,66,.6)}
.letter figcaption{position:absolute; left:.2em; bottom:-1.8em; font:500 .58em/1 var(--mono); letter-spacing:.04em; color:var(--muted)}
.legend-col{grid-template-columns:1fr; gap:.85em; margin:0}
.legend-col li{font-size:.84em; line-height:1.4}

/* ---------- 12 Fortschrittsbericht (Vorschau wie das PDF aus AquaFlow) ---------- */
.lead-s{font-size:.92em}
.rb{display:flex; flex-direction:column; flex:1 1 auto; min-height:0; margin-top:.9em}
.rb-bar{display:flex; align-items:center; gap:.55em; margin-bottom:.75em}
.rb-tabs{display:inline-flex; gap:.15em; padding:.2em; border-radius:.75em; background:#EEF0F6; flex:none}
.rb-tabs button{appearance:none; border:0; background:transparent; padding:.55em .95em; border-radius:.55em; font:600 .76em/1 var(--sans); color:#566D88; cursor:pointer; transition:background .15s, color .15s}
.rb-tabs button:hover{color:var(--ink)}
.rb-tabs button.on{background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(14,39,66,.16)}
.rb-sel{appearance:none; -webkit-appearance:none; flex:1 1 auto; min-width:0; padding:.6em 2em .6em .8em; border:1px solid var(--line); border-radius:.65em; font:500 .76em/1.1 var(--sans); color:var(--ink); cursor:pointer;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23566D88' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right .65em center/1em}
.rb-sel[hidden],.rb-ges[hidden]{display:none}
.rb-ges{flex:1 1 auto; font-size:.7em; line-height:1.3; color:var(--muted)}
.rb-dl{display:inline-flex; align-items:center; gap:.5em; flex:none; padding:.68em 1.05em; border:0; border-radius:.65em; background:#4B3AFF; color:#fff; font:600 .76em/1 var(--sans); cursor:pointer; white-space:nowrap; transition:background .15s, transform .15s}
.rb-dl:hover{background:#3527D8}
.rb-dl:active{transform:translateY(1px)}
.rb-dl svg{font-size:1.2em}
.rb-dl[aria-busy="true"]{opacity:.75; cursor:progress}
.rpt{position:relative; flex:1 1 auto; min-height:0; overflow:hidden; margin:0; padding:1.5em 1.9em 1.1em; border:1px solid var(--line); border-radius:.45em; background:#fff;
  font:400 .7em/1.45 'Plus Jakarta Sans','Instrument Sans',system-ui,sans-serif; color:#0E2742; box-shadow:0 .2em .5em rgba(14,39,66,.08), 0 1.6em 3em -2em rgba(14,39,66,.5)}
.rpt.swap{animation:rptin .35s var(--ease)}
@keyframes rptin{from{opacity:.4; transform:translateY(.3em)}}
.rpt p{margin:0}
.rpt-tag{position:absolute; right:0; bottom:0; padding:.45em .8em; border-radius:.6em 0 0 0; background:#EEECFF; color:#3527D8; font:600 .68em/1 var(--sans); letter-spacing:.04em; text-transform:uppercase}
.rpt-head{display:flex; justify-content:space-between; align-items:flex-start}
.rpt-head img{height:2.3em; width:auto; display:block}
.rpt-head p{display:flex; flex-direction:column; align-items:flex-end; gap:.35em; font-size:.75em; color:#566D88}
.rpt-head b{font-weight:600; text-transform:uppercase; letter-spacing:.01em}
.rpt-title{margin-top:1.1em!important; font:700 2.2em/1.1 'Plus Jakarta Sans',var(--sans); letter-spacing:-.01em}
.rpt-sub{margin-top:.25em!important; font-size:1.05em; font-weight:500; color:#3D5876}
.rpt-kpis{display:grid; grid-template-columns:repeat(5,1fr); gap:.85em; margin-top:1.2em}
.rpt-kpis div{padding:.85em .95em .75em; border:1px solid #D9E2EE; border-radius:.6em; background:#F4F8FD; min-width:0}
.rpt-kpis b{display:block; font-size:1.6em; font-weight:700; line-height:1.1; color:#0E2742}
.rpt-kpis span{display:block; margin-top:.45em; font-size:.75em; font-weight:500; line-height:1.25; color:#566D88; text-transform:uppercase}
.rpt-kpis .q{background:#EEECFF}
.rpt-kpis .q b{color:#3527D8}
.rpt-bar{display:flex; height:1.15em; margin-top:1.5em; border-radius:1em; overflow:hidden; background:#F4F8FD}
.rpt-bar i{display:block; height:100%; transition:width .6s var(--ease)}
.rpt-legend{display:flex; flex-wrap:wrap; gap:.3em 2.2em; margin-top:.75em; font-size:.75em; color:#3D5876}
.rpt-legend span{display:inline-flex; align-items:center; gap:.6em}
.rpt-legend b{font-weight:600; margin-right:-1.2em}
.rpt-legend i{width:1em; height:1em; border-radius:50%}
.rpt-h{font-family:inherit; line-height:1.3; margin:1.1em 0 .32em!important; font-size:.8em; font-weight:600; letter-spacing:.01em; text-transform:uppercase; color:#3527D8}
.rpt-text{font-size:1em; line-height:1.45}
.rpt-table{width:100%; border-collapse:collapse; font-size:.85em; font-variant-numeric:tabular-nums}
.rpt-table th,.rpt-table td{padding:.33em .7em; text-align:right; white-space:nowrap}
.rpt-table thead th{background:#0E2742; color:#fff; font-size:.88em; font-weight:600; padding:.5em .7em}
.rpt-table thead th:first-child,.rpt-table tbody th,.rpt-table tfoot th{text-align:left}
.rpt-table tbody th{font-weight:500}
.rpt-table tbody tr:nth-child(even){background:#F4F8FD}
.rpt-table td.z{color:#566D88}
.rpt-table tfoot th,.rpt-table tfoot td{font-weight:700; border-top:1.5px solid #0E2742; padding-top:.5em}
.rpt-stand{display:grid; grid-template-columns:1fr 1fr; gap:.2em 3em; margin:0; font-size:.9em}
.rpt-stand div{display:flex; justify-content:space-between; gap:1em; padding-right:1.5em}
.rpt-stand dt{color:#3D5876}
.rpt-stand dd{margin:0; font-weight:600}
.rpt-foot{display:flex; justify-content:space-between; gap:1em; margin-top:1.3em!important; padding:.6em 7.5em 0 0; border-top:1px solid #D9E2EE; font-size:.7em; color:#566D88}

/* ---------- 11 Referenzen ---------- */
.refs{display:grid; grid-template-columns:repeat(3,1fr); gap:.6em; margin-top:.6em}
.ref{padding:.9em .9em 1em; border-radius:1.1em; background:var(--bg); display:flex; flex-direction:column}
.ref:nth-child(2){background:var(--night); color:#fff} .ref:nth-child(2) p,.ref:nth-child(2) .ref-u{color:#B9C9DC} .ref:nth-child(2) .ref-tag{background:rgba(255,255,255,.12); color:#fff}
.ref-tag{align-self:flex-start; font:500 .58em/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; padding:.5em .6em; border-radius:999px; background:#fff; color:var(--blue-deep)}
.ref-n{font:800 1.9em/1 var(--display); letter-spacing:-.04em; margin-top:.6em}
.ref-u{font-size:.72em; color:var(--ink-2); margin-top:.2em}
.ref p{font-size:.68em; line-height:1.4; color:var(--ink-2); margin-top:.7em!important}
.quote{margin:1.1em 0 0; padding:0 0 0 1.1em; border-left:3px solid var(--blue)}
.quote.q-alt{border-left-color:var(--signal); margin-top:.9em}
.quote blockquote{margin:0; font:600 .98em/1.4 var(--display); letter-spacing:-.01em; text-wrap:pretty}
.quote figcaption{display:flex; align-items:center; gap:.6em; margin-top:.55em}
.q-av{display:grid; place-items:center; width:2.2em; height:2.2em; border-radius:50%; background:var(--sky); color:var(--blue-deep); font:600 .64em/1 var(--mono)}
.quote figcaption b{display:block; font-size:.72em}
.quote figcaption small{display:block; font-size:.64em; color:var(--muted)}
.faq{margin-top:1.4em}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none; cursor:pointer; padding:.62em 2em .62em 0; font-size:.84em; font-weight:600; position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; position:absolute; right:.2em; top:50%; transform:translateY(-50%); width:1.4em; height:1.4em; border-radius:50%; background:var(--bg); display:grid; place-items:center; font:500 1em/1 var(--mono); color:var(--blue-deep); transition:transform .2s}
.faq details[open] summary::after{content:"–"}
.faq details p{font-size:.76em; color:var(--ink-2); line-height:1.45; padding:0 1em .75em 0}

.rings{display:grid; grid-template-columns:1fr 1fr 1.1fr; gap:.6em; margin-top:1.1em}
.ring{display:grid; grid-template-columns:3.3em 1fr; column-gap:.7em; align-items:center; align-content:center; padding:.7em .8em; border-radius:1em; background:var(--bg)}
.ring svg{grid-row:1/3; width:3.3em; height:3.3em; transform:rotate(-90deg); stroke-width:3.6}
.r-bg{fill:none; stroke:#D3E0EF}
.r-fg{fill:none; stroke:var(--blue-deep); stroke-linecap:round; stroke-dasharray:var(--v) 100}
.ring:nth-child(2) .r-fg{stroke:var(--signal)}
.ring.go .r-fg{animation:ringfill 1.4s var(--ease) both}
@keyframes ringfill{from{stroke-dasharray:0 100}}
.ring b{font:800 1.3em/1 var(--display); letter-spacing:-.03em; align-self:end}
.ring span{font-size:.64em; color:var(--ink-2); line-height:1.3; align-self:start; margin-top:.25em}
.rating{display:flex; flex-direction:column; justify-content:center; gap:.15em; padding:.7em .9em; border-radius:1em; background:var(--night); color:#fff}
.rating b{font:800 1.8em/1 var(--display); letter-spacing:-.03em}
.stars{color:var(--butter); letter-spacing:.12em; font-size:.9em; line-height:1}
.rating small{font-size:.58em; color:#B9C9DC; line-height:1.3}

/* ---------- 12 Rückseite ---------- */
.back{background:var(--bg)}
.back-top{position:absolute; left:0; right:0; top:0; height:47%}
.gl-team{position:absolute; inset:0}
.team-k{position:absolute; left:3em; top:2.4em; font:800 1.3em/1.1 var(--display); letter-spacing:-.02em}
.team-k small{display:block; margin-top:.4em; font:500 .5em/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.name{position:absolute; z-index:3; transform:translate(-50%,1.1em); display:flex; flex-direction:column; align-items:center; padding:.4em .65em; border-radius:.7em; background:rgba(255,255,255,.92); font:500 .56em/1.2 var(--mono); color:var(--muted); white-space:nowrap; pointer-events:none; box-shadow:0 .4em 1em -.7em rgba(14,39,66,.6)}
.name b{font:700 1.45em/1.1 var(--sans); color:var(--ink)}
.name i{font-style:normal}
.back-band{position:absolute; left:0; right:0; bottom:0; height:57%; padding:5.6em 3em 2.2em; display:flex; flex-direction:column; color:#fff;
  background:radial-gradient(50em 30em at 10% 0%, rgba(36,150,237,.45), transparent 60%), linear-gradient(170deg, #12345A, var(--night)); clip-path:polygon(0 0, 100% 13%, 100% 100%, 0 100%)}
.back-band h2{font:800 2.3em/1 var(--display); letter-spacing:-.045em; margin:.45em 0 .9em; text-wrap:balance}
.back-band h2 em{color:var(--water)}
.contact{display:flex; justify-content:space-between; align-items:flex-end; gap:1.5em}
.c-list{list-style:none; margin:0; padding:0; display:grid; gap:.7em}
.c-list li{display:flex; align-items:center; gap:.7em; font-size:1em}
.c-list svg{width:2.2em; height:2.2em; padding:.55em; border-radius:50%; background:rgba(255,255,255,.1); color:var(--water); stroke-width:1.8}
.c-list a{text-decoration:none; font-weight:600}
.c-list a:hover{text-decoration:underline}
.c-list small{font:500 .62em/1 var(--mono); color:#8FA6C1; margin-left:.3em}
.qr{display:flex; flex-direction:column; align-items:center; gap:.5em; padding:.8em .8em .7em; border-radius:1.1em; background:#fff; color:var(--ink); flex:none}
.qr img{width:7.4em; height:7.4em; display:block}
.qr span{font:500 .56em/1 var(--mono); letter-spacing:.04em; color:var(--ink-2)}
.cta{align-self:flex-start; display:inline-flex; align-items:center; gap:.6em; margin-top:1.3em; padding:.85em 1.3em; border-radius:999px; background:var(--blue); color:#fff; text-decoration:none; font:600 .95em/1 var(--sans); transition:background .15s, gap .2s}
.cta:hover{background:#3BA3F0; gap:.9em}
.back-foot{margin-top:auto; display:flex; justify-content:space-between; align-items:flex-end; gap:1em; padding-top:1em; border-top:1px solid rgba(255,255,255,.14)}
.back-foot img{height:1.3em; width:auto; display:block; margin-bottom:.15em}
.back-foot p{font:400 .58em/1.5 var(--mono); color:#8FA6C1; text-align:right}

/* =====================================================================
   Lesemodus (schmale Displays): Seiten fließen, scrollen in sich
   ===================================================================== */
.book.reader .face{border-radius:18px}
.book.reader .page{overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; overscroll-behavior:contain}
.book.reader .pg-head{padding:1.6em 1.5em 0}
.book.reader .pg-body{flex:none; padding:1.4em 1.5em 0}
.book.reader .pg-foot{padding:1.6em 1.5em 1.6em}
.book.reader .h{font-size:2.2em}
.book.reader .cols-2,.book.reader .split,.book.reader .legend,.book.reader .feat{grid-template-columns:1fr}
.book.reader .chk.cols-2{grid-template-columns:1fr}
.book.reader .photo{min-height:13em}
.book.reader .gl-map{flex:none; height:20em; margin:0 -.8em}
.book.reader .gl-meter{flex:none; height:19em; margin:0 -.5em}
.book.reader .gl-hydrant{flex:none; height:21em; margin:.4em -.5em 0}
.book.reader .gl-radio{flex:none; height:15em; margin:.5em -.5em 0}
.book.reader .facts,.book.reader .stats{grid-template-columns:1fr 1fr 1fr}
.book.reader .refs{grid-template-columns:1fr}
.book.reader .rings{grid-template-columns:1fr 1fr}
.book.reader .rating{grid-column:1/-1}
.book.reader .proto-grid{grid-template-columns:1fr 1fr}
.book.reader .devices{padding-right:0}
.book.reader .phone{position:relative; top:auto; right:auto; margin:2em auto 0; width:11em}
.book.reader .stoerer{right:-.2em; top:2.6em; width:6.4em; height:6.4em}
.book.reader .toc{margin-top:1.4em; grid-template-columns:1fr}
.book.reader .faq,.book.reader .gantt,.book.reader .feat{margin-top:1.4em}
.book.reader .fine{margin-top:1em!important}
.book.reader .cmp{font-size:.7em}
.book.reader .cover,.book.reader .back{overflow:hidden}
.book.reader .cover .cover-band{padding:4.4em 1.5em 2em; height:auto; min-height:46%}
.book.reader .cover-band h1{font-size:2.6em}
.book.reader .accent{display:none}
.book.reader .cover-top{height:58%}
.book.reader .cover-brand{left:1.2em; top:1.2em}
.book.reader .cover-issue{right:1.2em; top:1.4em}
.book.reader .back-band{padding:4.6em 1.5em 1.6em; height:auto; min-height:60%}
.book.reader .back-top{height:44%}
.book.reader .back-band h2{font-size:1.9em}
.book.reader .contact{flex-direction:column; align-items:flex-start}
.book.reader .qr{display:none}
.book.reader .team-k{left:1.5em; top:1.4em}
.book.reader .letter-wrap{grid-template-columns:1fr}
.book.reader .letter{margin:0 .6em 2em}
.book.reader .rb-bar{flex-wrap:wrap}
.book.reader .rb-sel,.book.reader .rb-ges{flex-basis:100%; order:3}
.book.reader .rb-ges{min-height:2.5em}
.book.reader .rpt{font-size:.74em; padding:1.2em 1.1em 1em; flex:none}
.book.reader .rpt-kpis{grid-template-columns:repeat(3,1fr); gap:.6em}
.book.reader .rpt-stand{grid-template-columns:1fr}
.book.reader .rpt-foot{padding-right:0; flex-direction:column}
.book.reader .name i{display:none}
.book.reader .name{padding:.35em .55em}
.book.reader .cover-gems .g1{--x:80%; --y:43.5%; --s:7.2em}
.book.reader .cover-gems .g2{--x:97%; --y:33.5%; --s:4.8em}
.book.reader .cover-gems .g3{--x:60%; --y:48%; --s:2em}
.book.reader .cover-gems .g4{--x:63%; --y:41%; --s:1.3em}
.book.reader .cover-gems .g5{--x:95%; --y:50.5%; --s:1.2em}
.book.reader .cover-gems .g6{--x:56.5%; --y:44%; --s:.9em}

/* Kleine Viewports: Steuerleiste verschlanken */
@media (max-width:640px){
  .dock-row .dock-sep:nth-child(2){display:block; margin:0 3px}
  .brand{height:44px; padding:0 16px; gap:10px}
  .brand img{height:17px}
  .brand-title{display:none} .brand-sep{display:none}
  .demo-badge{display:none}
  .pill{height:40px; padding:0 16px; font-size:14px}
  .dock{left:12px; right:12px; transform:none; padding:6px 6px 6px}
  .dock-row{justify-content:space-between}
  .ib.opt,.dock-sep{display:none}
  .dock-pages{min-width:0; flex:1; margin:0 4px}
  .scrub{padding:2px 6px 6px}
  [data-tip]:hover::after{display:none}
}
@media (max-width:900px){ .demo-badge{display:none} }

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms!important; animation-iteration-count:1!important}
  .book-wrap{transition:none}
}

/* =====================================================================
   Druck / PDF: alle Seiten nacheinander im A4-Format
   ===================================================================== */
@media print{
  @page{size:A4 portrait; margin:0}
  html,body{height:auto; overflow:visible; background:#fff}
  .app{display:none!important}
  .print-root{display:block!important}
  .print-root .page{width:210mm; height:296.5mm; --fs:4.87mm; break-after:page; page-break-after:always; overflow:hidden}
  .print-root .page:last-child{break-after:auto; page-break-after:auto}
  .gl-hint,.hs,.bubble{display:none!important}
  .print-root *,.print-root *::before,.print-root *::after{box-shadow:none!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; animation:none!important; transition:none!important}
  .print-root .cover-gems .g2{--x:89%}
  .print-root .letter .hs{display:grid!important}
  .print-root .letter .hs::after{display:none}
  .print-root .proto{border:1px solid var(--line)}
  .print-root .letter img{border:1px solid var(--line)}
  .faq details{break-inside:avoid}
}