/* ============================================================
   SUNPEPT — UI-System (Clinical Lab, CI Navy #1C2E3A / Steelblue #C7DCE9)
   Gilt global: Tokens, transparenter Header über dunklen Heros, Bausteine, Startseite
   ============================================================ */

body{
  --navy:#1C2E3A; --navy-2:#132029; --navy-3:#0E1820;
  --steel:#C7DCE9; --steel-2:#9FC0D6; --steel-dk:#4C7A98;
  --tint:#F2F7FA; --line:#E0E9EF; --line-2:#C9D7E1;
  --mono: "Manrope", system-ui, sans-serif;
  --ease: cubic-bezier(.2,.7,.2,1);
}
.hm{ color:var(--navy); }

/* ---------- Header: transparent im Hero, solide nach Scroll ---------- */
body.has-hero .utility{ background:var(--navy-3) !important; border-bottom:1px solid rgb(199 220 233 / .08); }
body.has-hero .header{ background:transparent; border-bottom-color:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; transition:background .3s var(--ease, ease), border-color .3s, box-shadow .3s; }
body.has-hero .header:not(.is-solid) .nav > a,
body.has-hero .header:not(.is-solid) .nav > .has-menu > button,
body.has-hero .header:not(.is-solid) .icon-btn{ color:#E6EEF4; }
body.has-hero .header:not(.is-solid) .nav > a:hover,
body.has-hero .header:not(.is-solid) .nav > .has-menu > button:hover,
body.has-hero .header:not(.is-solid) .icon-btn:hover{ background:rgb(199 220 233 / .12); color:#fff; }
body.has-hero .header:not(.is-solid) .logo img{ filter:brightness(0) invert(1); }
body.has-hero .header.is-solid{ background:rgb(255 255 255 / .92); border-bottom-color:#E0E9EF; backdrop-filter:blur(14px) saturate(1.3); -webkit-backdrop-filter:blur(14px) saturate(1.3); box-shadow:0 1px 0 rgb(28 46 58 / .04), 0 10px 30px -18px rgb(28 46 58 / .25); }

/* ---------- Gemeinsame Bausteine ---------- */
.hm-label{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#6E8292; display:inline-flex; align-items:center; gap:8px; }
.hm-label::before{ content:""; width:6px; height:6px; background:var(--steel-dk); border-radius:1px; }
.hm-label--light{ color:var(--steel-2); }
.hm-label--light::before{ background:var(--steel); }
.hm-btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; height:52px; padding:0 26px; border-radius:8px; font-weight:650; font-size:15px; letter-spacing:-.005em; transition:background .2s, color .2s, border-color .2s, transform .2s var(--ease); white-space:nowrap; }
.hm-btn svg{ width:17px; height:17px; transition:transform .2s var(--ease); }
.hm-btn:hover svg{ transform:translateX(3px); }
.hm-btn--sm{ height:42px; padding:0 18px; font-size:14px; }
.hm-btn--steel{ background:var(--steel); color:var(--navy); }
.hm-btn--steel:hover{ background:#fff; }
.hm-btn--line{ border:1px solid rgb(199 220 233 / .35); color:#E6EEF4; }
.hm-btn--line:hover{ border-color:var(--steel); color:#fff; background:rgb(199 220 233 / .08); }
.hm-btn--navy{ background:var(--navy); color:#fff; }
.hm-btn--navy:hover{ background:var(--navy-2); }
.hm-link{ font-weight:650; font-size:14.5px; color:var(--navy); border-bottom:1px solid currentColor; padding-bottom:2px; white-space:nowrap; transition:color .2s; }
.hm-link:hover{ color:var(--steel-dk); }
.hm-chip{ display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 11px; border-radius:6px; font-size:13px; font-weight:600; background:rgb(199 220 233 / .14); color:#fff; border:1px solid rgb(199 220 233 / .25); }
.hm-chip.is-soon{ background:transparent; border-style:dashed; color:var(--steel-2); }
.hm-chip small{ font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:500; }

/* Animation nur, wenn JS aktiv (sonst sofort sichtbar) */
.js-anim [data-anim]{ opacity:0; transform:translateY(18px); transition:opacity .8s var(--ease), transform .8s var(--ease); transition-delay:var(--d, 0s); }
.js-anim [data-anim].is-in{ opacity:1; transform:none; }
/* Hero: reine CSS-Animation beim Laden, unabhängig von JS-Beobachtern */
.js-anim .hm-hero [data-anim]{ opacity:1; transform:none; transition:none; animation:hmIn .9s var(--ease) both; }
.js-anim .hm-hero .hm-h1-a{ animation:hmIn .9s var(--ease) .05s both; display:block; }
.js-anim .hm-hero .hm-h1-b{ animation:hmIn .9s var(--ease) .18s both; }
.js-anim .hm-hero .hm-sub{ animation-delay:.28s; }
.js-anim .hm-hero .hm-cta{ animation-delay:.38s; }
.js-anim .hm-hero .hm-facts{ animation-delay:.5s; }
.hm-stage{ animation:hmStage 1.2s var(--ease) .15s both; }
@keyframes hmIn{ from{ opacity:0; transform:translateY(16px); } }
@keyframes hmStage{ from{ opacity:0; transform:translateY(24px) scale(.98); } }
@media (prefers-reduced-motion:reduce){ .js-anim [data-anim], .js-anim .hm-hero *, .hm-stage{ opacity:1 !important; transform:none !important; transition:none !important; animation:none !important; } }

/* ---------- Hero ---------- */
.hm-hero{ position:relative; margin-top:-65px; padding:150px 0 0; background:radial-gradient(120% 90% at 75% 40%, #23394A 0%, var(--navy) 45%, var(--navy-3) 100%); color:#fff; overflow:hidden; isolation:isolate; }
.hm-hero-bg{ position:absolute; inset:0; z-index:-1; pointer-events:none; }
.hm-grid{ position:absolute; inset:0; background-image:linear-gradient(rgb(199 220 233 / .07) 1px, transparent 1px), linear-gradient(90deg, rgb(199 220 233 / .07) 1px, transparent 1px); background-size:64px 64px; mask-image:radial-gradient(90% 80% at 70% 45%, #000 20%, transparent 80%); -webkit-mask-image:radial-gradient(90% 80% at 70% 45%, #000 20%, transparent 80%); }
.hm-glow{ position:absolute; width:900px; height:900px; right:-120px; top:-60px; background:radial-gradient(circle, rgb(199 220 233 / .22) 0%, rgb(199 220 233 / .06) 35%, transparent 65%); filter:blur(10px); animation:hmGlow 9s ease-in-out infinite alternate; }
@keyframes hmGlow{ to{ transform:translate(-40px, 30px) scale(1.06); opacity:.85; } }
.hm-rule{ position:absolute; background:rgb(199 220 233 / .14); }
.hm-rule--a{ left:0; right:0; bottom:180px; height:1px; }
.hm-rule--b{ top:0; bottom:0; left:52%; width:1px; }

.hm-hero-in{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:40px; align-items:center; min-height:560px; }
.hm-eyebrow{ font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--steel-2); display:inline-flex; align-items:center; gap:10px; padding:7px 12px 7px 10px; border:1px solid rgb(199 220 233 / .22); border-radius:6px; background:rgb(199 220 233 / .05); }
.hm-pulse{ width:7px; height:7px; border-radius:50%; background:var(--steel); box-shadow:0 0 0 0 rgb(199 220 233 / .6); animation:hmPulse 2.4s infinite; }
@keyframes hmPulse{ 0%{ box-shadow:0 0 0 0 rgb(199 220 233 / .55); } 70%{ box-shadow:0 0 0 10px rgb(199 220 233 / 0); } 100%{ box-shadow:0 0 0 0 rgb(199 220 233 / 0); } }
.hm-hero h1{ margin:26px 0 24px; font-size:clamp(40px,4.4vw,64px); overflow-wrap:normal; hyphens:manual; font-weight:650; line-height:.98; letter-spacing:-.045em; color:#fff; }
.hm-h1-a, .hm-h1-b{ display:block; }
.hm-h1-b{ background:linear-gradient(90deg, var(--steel) 0%, #E9F2F8 50%, var(--steel-2) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hm-sub{ font-size:18px; line-height:1.65; color:rgb(230 238 244 / .78); max-width:46ch; }
.hm-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:36px; }

/* Bühne mit Vials */
.hm-stage{ position:relative; margin:0; padding:56px 28px 40px; }
.hm-corner{ position:absolute; width:18px; height:18px; border-color:rgb(199 220 233 / .45); border-style:solid; border-width:0; }
.hm-corner--tl{ top:0; left:0; border-top-width:1px; border-left-width:1px; }
.hm-corner--tr{ top:0; right:0; border-top-width:1px; border-right-width:1px; }
.hm-corner--bl{ bottom:0; left:0; border-bottom-width:1px; border-left-width:1px; }
.hm-corner--br{ bottom:0; right:0; border-bottom-width:1px; border-right-width:1px; }
.hm-stage-tag{ position:absolute; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--steel-2); }
.hm-stage-tag--tl{ top:14px; left:28px; } .hm-stage-tag--tr{ top:14px; right:28px; color:#E6CCAA; }
.hm-vials{ position:relative; }
.hm-vials-img{ position:relative; z-index:2; width:100%; height:auto; filter:drop-shadow(0 40px 50px rgb(0 0 0 / .45)); animation:hmFloat 7s ease-in-out infinite; }
@keyframes hmFloat{ 50%{ transform:translateY(-8px); } }
.hm-vials-ref{ position:absolute; z-index:1; left:0; width:100%; height:auto; top:86%; transform:scaleY(-1); opacity:.18; filter:blur(2px); mask-image:linear-gradient(to top, #000 0%, transparent 32%); -webkit-mask-image:linear-gradient(to top, #000 0%, transparent 32%); }
.hm-scan{ position:absolute; z-index:3; left:6%; right:6%; height:2px; top:20%; background:linear-gradient(90deg, transparent, rgb(199 220 233 / .9), transparent); box-shadow:0 0 18px 2px rgb(199 220 233 / .35); opacity:.0; animation:hmScan 6s cubic-bezier(.5,0,.5,1) infinite 1.2s; }
@keyframes hmScan{ 0%{ top:16%; opacity:0; } 10%{ opacity:.9; } 60%{ top:84%; opacity:.9; } 70%,100%{ top:84%; opacity:0; } }
.hm-call{ position:absolute; z-index:4; left:var(--x); top:12%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; pointer-events:none; }
.hm-call-dot{ order:2; width:9px; height:9px; border-radius:50%; background:var(--steel); box-shadow:0 0 0 4px rgb(199 220 233 / .2); margin-top:6px; }
.hm-call-box{ order:1; position:relative; display:flex; flex-direction:column; gap:2px; padding:9px 12px; border-radius:7px; background:rgb(19 32 41 / .78); border:1px solid rgb(199 220 233 / .28); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); white-space:nowrap; font-family:var(--mono); }
.hm-call-box::after{ content:""; position:absolute; left:50%; bottom:-22px; width:1px; height:22px; background:rgb(199 220 233 / .5); }
.hm-call-box strong{ font-family:inherit; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:#fff; font-weight:600; }
.hm-call-box em{ font-style:normal; font-size:10.5px; color:var(--steel-2); letter-spacing:.04em; }
.hm-call-box b{ font-weight:500; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:#9FE0B8; }
.hm-call-box b::before{ content:"● "; }
.hm-call--0{ top:2%; } .hm-call--1{ top:-12%; } .hm-call--2{ top:2%; }
.hm-call-box em{ display:none; }

/* Fakten-Leiste */
.hm-facts{ display:grid; grid-template-columns:repeat(4,1fr); margin:48px 0 0; border-top:1px solid rgb(199 220 233 / .16); }
.hm-facts > div{ padding:28px 24px 34px; border-left:1px solid rgb(199 220 233 / .16); }
.hm-facts > div:first-child{ border-left:0; padding-left:0; }
.hm-facts dt{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--steel-2); }
.hm-facts dd{ margin:10px 0 0; font-size:40px; font-weight:650; letter-spacing:-.04em; line-height:1; color:#fff; font-variant-numeric:tabular-nums; }
.hm-facts dd.hm-facts-s{ margin-top:8px; font-size:13.5px; font-weight:500; letter-spacing:0; color:rgb(230 238 244 / .6); }

/* ---------- Ticker ---------- */
.hm-ticker{ background:var(--steel); color:var(--navy); overflow:hidden; border-bottom:1px solid var(--steel-2); }
.hm-ticker-track{ display:flex; width:max-content; align-items:center; gap:22px; padding:15px 0; animation:hmTick 60s linear infinite; font-family:var(--mono); font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; }
.hm-ticker-track i{ font-style:normal; opacity:.45; }
@keyframes hmTick{ to{ transform:translateX(-50%); } }

/* ---------- Sektionen ---------- */
.hm-sec{ position:relative; padding:120px 0; background:#fff; }
.hm-sec--tint{ background:var(--tint); }
.hm-head{ display:grid; grid-template-columns:64px 1fr auto; gap:20px 28px; align-items:end; margin-bottom:56px; }
.hm-head--stack{ grid-template-columns:64px 1fr; align-items:start; }
.hm-idx{ align-self:start; font-family:var(--mono); font-size:13px; color:var(--steel-dk); padding-top:10px; border-top:2px solid var(--navy); }
.hm-head h2{ margin-top:14px; font-size:clamp(32px,4vw,54px); font-weight:650; letter-spacing:-.04em; line-height:1.02; color:var(--navy); }
.hm-lead{ color:#45596A; font-size:16px; line-height:1.6; max-width:40ch; margin:0; }
.hm-lead a{ color:var(--steel-dk); font-weight:650; border-bottom:1px solid currentColor; }

/* Filter */
.hm-filter{ display:inline-flex; padding:4px; border-radius:9px; background:var(--tint); border:1px solid var(--line); }
.hm-filter button{ height:36px; padding:0 16px; border-radius:6px; font-size:13.5px; font-weight:650; color:#45596A; transition:background .2s, color .2s; }
.hm-filter button.is-on{ background:var(--navy); color:#fff; }

/* Katalog mit Featured-Kachel */
.hm-cat{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.hm-cell[hidden], .hm-feat[hidden]{ display:none !important; }
.hm-cell .prod-card{ height:100%; }
.hm-cell .prod-card .pc-img{ transition:background .3s; }
.hm-cell .prod-card .pc-img img{ transition:transform .5s var(--ease); }
.hm-cell .prod-card:hover .pc-img img{ transform:scale(1.05); }
.hm-feat{ grid-column:span 2; grid-row:span 2; position:relative; display:grid; grid-template-rows:1fr auto; border-radius:14px; overflow:hidden; background:radial-gradient(90% 70% at 50% 30%, #2A4457 0%, var(--navy) 60%, var(--navy-2) 100%); color:#fff; isolation:isolate; min-height:560px; }
.hm-feat::before{ content:""; position:absolute; inset:0; z-index:-1; background-image:linear-gradient(rgb(199 220 233 / .06) 1px, transparent 1px), linear-gradient(90deg, rgb(199 220 233 / .06) 1px, transparent 1px); background-size:40px 40px; }
.hm-feat-tag{ position:absolute; top:18px; left:18px; z-index:2; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--navy); background:var(--steel); padding:5px 9px; border-radius:4px; }
.hm-feat-img{ display:grid; place-items:center; padding:64px 40px 8px; }
.hm-feat-img img{ width:auto; max-width:64%; max-height:330px; object-fit:contain; border-radius:12px; background:#fff; padding:18px; box-shadow:0 0 0 1px rgb(199 220 233 / .3), 0 0 0 10px rgb(199 220 233 / .06), 0 40px 60px -20px rgb(0 0 0 / .6); transition:transform .6s var(--ease); }
.hm-feat:hover .hm-feat-img img{ transform:translateY(-6px) rotate(-2deg); }
.hm-feat-body{ padding:28px 30px 30px; border-top:1px solid rgb(199 220 233 / .14); background:linear-gradient(180deg, rgb(19 32 41 / 0), rgb(19 32 41 / .55)); }
.hm-feat h3{ margin:10px 0 8px; font-size:30px; font-weight:650; letter-spacing:-.03em; color:#fff; }
.hm-feat p{ color:rgb(230 238 244 / .7); font-size:14px; }
.hm-feat-spec{ list-style:none; margin:18px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid rgb(199 220 233 / .14); }
.hm-feat-spec li{ padding:12px 12px 0 0; font-size:13.5px; font-weight:600; color:#fff; }
.hm-feat-spec li span{ display:block; font-family:var(--mono); font-size:10px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--steel-2); margin-bottom:4px; }
.hm-feat-foot{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:22px; }
.hm-feat-price{ font-size:26px; font-weight:700; letter-spacing:-.03em; }
.hm-feat-price .price, .hm-feat-price .woocommerce-Price-amount{ color:#fff !important; }
.hm-feat-price small, .hm-feat-price .from{ font-size:12px; color:var(--steel-2); font-weight:500; }
.hm-cat-foot{ margin-top:36px; text-align:center; }

/* ---------- Forschungsgebiete (dunkel, interaktiv) ---------- */
.hm-sec--dark{ background:var(--navy); color:#fff; overflow:hidden; }
.hm-dark-grid{ position:absolute; inset:0; background-image:linear-gradient(rgb(199 220 233 / .05) 1px, transparent 1px), linear-gradient(90deg, rgb(199 220 233 / .05) 1px, transparent 1px); background-size:64px 64px; pointer-events:none; }
.hm-sec--dark .hm-idx{ color:var(--steel); border-top-color:var(--steel); }
.hm-sec--dark h2{ color:#fff; }
.hm-sec--dark .hm-lead{ color:rgb(230 238 244 / .65); }
.hm-areas{ position:relative; display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:56px; align-items:start; }
.hm-area-list{ list-style:none; margin:0; padding:0; border-top:1px solid rgb(199 220 233 / .2); }
.hm-area-list li{ border-bottom:1px solid rgb(199 220 233 / .2); }
.hm-area{ position:relative; display:grid; grid-template-columns:48px 1fr auto 28px; gap:18px; align-items:center; padding:24px 4px; color:#fff; transition:padding .3s var(--ease), color .2s; }
.hm-area::before{ content:""; position:absolute; left:0; top:-1px; height:1px; width:0; background:var(--steel); transition:width .5s var(--ease); }
.hm-area.is-on::before{ width:100%; }
.hm-area.is-on, a.hm-area:hover{ padding-left:16px; }
.hm-area-n{ font-family:var(--mono); font-size:12.5px; color:var(--steel-2); }
.hm-area-name{ font-size:24px; font-weight:600; letter-spacing:-.025em; }
.hm-area-st{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--steel-2); }
.hm-area-go{ text-align:right; font-size:18px; color:var(--steel-2); transition:transform .3s var(--ease), color .2s; }
.hm-area.is-on .hm-area-go, a.hm-area:hover .hm-area-go{ color:var(--steel); transform:translateX(4px); }
.hm-area.is-soon .hm-area-name{ color:rgb(230 238 244 / .45); }
.hm-area.is-soon .hm-area-go{ opacity:.3; }
.hm-area-panel{ position:sticky; top:110px; min-height:360px; border:1px solid rgb(199 220 233 / .22); border-radius:14px; background:linear-gradient(160deg, rgb(199 220 233 / .10), rgb(199 220 233 / .02)); padding:34px; overflow:hidden; }
.hm-area-panel::after{ content:""; position:absolute; right:-80px; bottom:-80px; width:260px; height:260px; border-radius:50%; border:1px solid rgb(199 220 233 / .18); box-shadow:0 0 0 40px rgb(199 220 233 / .03), 0 0 0 80px rgb(199 220 233 / .02); }
.hm-ap{ display:none; position:relative; z-index:1; }
.hm-ap.is-on{ display:block; animation:hmPanel .45s var(--ease); }
@keyframes hmPanel{ from{ opacity:0; transform:translateY(10px); } }
.hm-ap-n{ font-family:var(--mono); font-size:56px; font-weight:500; line-height:1; color:var(--steel); opacity:.9; letter-spacing:-.04em; }
.hm-ap h3{ margin:22px 0 12px; font-size:30px; font-weight:650; letter-spacing:-.03em; color:#fff; }
.hm-ap p{ color:rgb(230 238 244 / .72); font-size:15.5px; line-height:1.65; max-width:40ch; }
.hm-ap-subs{ display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 28px; }
.hm-ap-soon{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#E6CCAA; }

/* ---------- Dokumentation ---------- */
.hm-doc{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:80px; align-items:center; }
.hm-doc .hm-head{ margin-bottom:28px; }
.hm-doc-lead{ margin:0 0 28px 92px; font-size:16.5px; line-height:1.7; color:#45596A; max-width:46ch; }
.hm-spec{ margin:0 0 32px 92px; border-top:1px solid var(--navy); }
.hm-spec > div{ display:grid; grid-template-columns:120px 1fr; gap:16px; padding:14px 0; border-bottom:1px solid var(--line); }
.hm-spec dt{ font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:#6E8292; padding-top:3px; }
.hm-spec dd{ margin:0; font-weight:600; font-size:15px; }
.hm-doc-copy > .hm-btn{ margin-left:92px; }
.hm-docs{ position:relative; height:600px; }
.hm-paper{ position:absolute; inset:30px 40px 40px 60px; border-radius:10px; background:#fff; border:1px solid var(--line-2); box-shadow:0 30px 60px -30px rgb(28 46 58 / .35); }
.hm-paper--3{ transform:rotate(6deg) translate(26px, 10px); background:var(--tint); }
.hm-paper--2{ transform:rotate(2.5deg) translate(12px, 4px); background:#F8FBFD; }
.hm-paper--1{ transform:rotate(-2deg); padding:30px 32px; display:flex; flex-direction:column; transition:transform .5s var(--ease); }
.hm-docs:hover .hm-paper--1{ transform:rotate(0deg) translateY(-6px); }
.hm-paper-head{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:#6E8292; padding-bottom:14px; border-bottom:2px solid var(--navy); }
.hm-paper-title{ margin:22px 0 14px; font-size:26px; font-weight:650; letter-spacing:-.03em; }
.hm-paper-rows{ margin:0; }
.hm-paper-rows > div{ display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px dashed var(--line-2); font-size:13.5px; }
.hm-paper-rows dt{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#6E8292; }
.hm-paper-rows dd{ margin:0; font-weight:600; }
.hm-paper-chart{ position:relative; margin-top:auto; padding:16px 14px 10px; border:1px solid var(--line); border-radius:8px; color:var(--steel-dk); background:var(--tint); }
.hm-paper-chart svg{ width:100%; height:70px; display:block; }
.hm-paper-chart span{ display:block; margin-top:6px; font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:#8A9BA8; }
.hm-paper-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:16px; font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:#6E8292; }
.hm-stamp{ display:inline-flex; align-items:center; height:28px; padding:0 10px; border:1.5px solid var(--steel-dk); color:var(--steel-dk); border-radius:5px; text-transform:uppercase; letter-spacing:.12em; font-size:10px; transform:rotate(-3deg); }

/* ---------- Ablauf ---------- */
.hm-steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative; counter-reset:s; }
.hm-steps::before{ content:""; position:absolute; left:0; right:0; top:22px; height:1px; background:var(--line-2); }
.hm-steps li{ position:relative; padding:0 28px 0 0; }
.hm-step-n{ position:relative; display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:var(--navy); color:var(--steel); font-family:var(--mono); font-size:12.5px; box-shadow:0 0 0 8px var(--tint); }
.hm-steps h3{ margin:26px 0 10px; font-size:21px; font-weight:650; letter-spacing:-.02em; }
.hm-steps p{ color:#45596A; font-size:14.5px; line-height:1.6; }

/* ---------- Journal ---------- */
.hm-journal{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.hm-jc{ position:relative; display:flex; flex-direction:column; min-height:280px; padding:26px; border:1px solid var(--line); border-radius:14px; background:#fff; overflow:hidden; transition:border-color .25s, transform .35s var(--ease), box-shadow .35s; }
.hm-jc::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--steel); transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease); }
.hm-jc:hover{ border-color:var(--line-2); transform:translateY(-4px); box-shadow:0 24px 40px -28px rgb(28 46 58 / .35); }
.hm-jc:hover::after{ transform:scaleX(1); }
.hm-jc-top{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:#6E8292; }
.hm-jc h3{ margin:22px 0 0; font-size:21px; font-weight:650; letter-spacing:-.02em; line-height:1.28; }
.hm-jc-foot{ margin-top:auto; padding-top:24px; display:flex; justify-content:space-between; align-items:center; font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:#6E8292; }
.hm-jc-arr{ display:grid; place-items:center; width:36px; height:36px; border-radius:50%; border:1px solid var(--line-2); color:var(--navy); font-family:inherit; transition:background .2s, color .2s, border-color .2s; }
.hm-jc:hover .hm-jc-arr{ background:var(--navy); color:#fff; border-color:var(--navy); }

/* ---------- FAQ ---------- */
.hm-faq{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.45fr); gap:80px; align-items:start; }
.hm-faq .hm-head{ margin:0; position:sticky; top:110px; }
.hm-faq .hm-lead{ margin-top:18px; }
.hm .faq-wrap{ border-top:2px solid var(--navy); }

/* ---------- Abschluss ---------- */
.hm-end{ position:relative; padding:130px 0; background:var(--navy-3); color:#fff; overflow:hidden; isolation:isolate; text-align:center; }
.hm-end-bg{ position:absolute; inset:0; z-index:-1; background:radial-gradient(60% 80% at 50% 110%, rgb(199 220 233 / .28), transparent 70%), linear-gradient(rgb(199 220 233 / .05) 1px, transparent 1px) 0 0/64px 64px, linear-gradient(90deg, rgb(199 220 233 / .05) 1px, transparent 1px) 0 0/64px 64px; }
.hm-end h2{ margin:22px auto 0; font-size:clamp(38px,5.4vw,76px); font-weight:650; letter-spacing:-.045em; line-height:1; color:#fff; max-width:16ch; }
.hm-end h2 span{ color:var(--steel); }
.hm-end .hm-cta{ justify-content:center; }

/* ---------- Responsive ---------- */
@media (max-width:1180px){
  .hm-cat{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .hm-call-box em{ display:none; }
}
@media (max-width:980px){
  .hm-hero{ padding-top:120px; }
  .hm-hero-in{ grid-template-columns:1fr; min-height:0; gap:24px; }
  .hm-rule--b{ display:none; }
  .hm-stage{ padding:56px 8px 28px; }
  .hm-facts{ grid-template-columns:repeat(2,1fr); }
  .hm-facts > div:nth-child(3){ border-left:0; padding-left:0; }
  .hm-facts > div:nth-child(n+3){ border-top:1px solid rgb(199 220 233 / .16); }
  .hm-cat{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hm-feat{ grid-column:1 / -1; grid-row:auto; min-height:0; }
  .hm-areas, .hm-doc, .hm-faq{ grid-template-columns:1fr; gap:40px; }
  .hm-area-panel{ display:none; }
  .hm-doc-lead, .hm-spec, .hm-doc-copy > .hm-btn{ margin-left:0; }
  .hm-docs{ height:500px; }
  .hm-faq .hm-head{ position:static; }
  .hm-steps{ grid-template-columns:1fr 1fr; gap:40px 0; }
  .hm-steps::before{ display:none; }
  .hm-journal{ grid-template-columns:1fr; }
  .hm-jc{ min-height:0; }
}
@media (max-width:640px){
  .hm-sec{ padding:80px 0; }
  .hm-head{ grid-template-columns:1fr; gap:14px; margin-bottom:36px; }
  .hm-head--stack{ grid-template-columns:1fr; }
  .hm-idx{ width:40px; }
  .hm-link, .hm-filter{ justify-self:start; }
  .hm-hero h1{ font-size:clamp(30px,9.2vw,40px); margin:20px 0 18px; }
  .hm-eyebrow{ font-size:9.5px; letter-spacing:.1em; white-space:normal; max-width:100%; }
  .hm-hero{ padding-top:108px; }
  .hm-call--1{ top:-16%; }
  .hm-sub{ font-size:16px; }
  .hm-cta .hm-btn{ flex:1 1 100%; }
  .hm-call-box{ padding:6px 8px; }
  .hm-call-box strong{ font-size:10px; }
  .hm-call-box b{ font-size:8.5px; }
  .hm-stage-tag{ display:none; }
  .hm-facts > div{ padding:20px 14px 22px; }
  .hm-facts > div:nth-child(odd){ padding-left:0; }
  .hm-facts dd{ font-size:32px; }
  .hm-feat-img{ padding:48px 24px 0; }
  .hm-feat-img img{ max-height:240px; }
  .hm-feat-body{ padding:22px; }
  .hm-feat h3{ font-size:24px; }
  .hm-feat-spec{ grid-template-columns:1fr 1fr; }
  .hm-feat-foot{ flex-direction:column; align-items:stretch; }
  .hm-area{ grid-template-columns:36px 1fr 20px; padding:20px 0; }
  .hm-area-st{ grid-column:2; grid-row:2; }
  .hm-area-go{ grid-column:3; grid-row:1; }
  .hm-area-name{ font-size:19px; }
  .hm-area.is-on{ padding-left:0; }
  .hm-docs{ height:440px; }
  .hm-paper{ inset:20px 16px 30px 16px; }
  .hm-paper--1{ padding:22px; }
  .hm-steps{ grid-template-columns:1fr; gap:28px; }
  .hm-end{ padding:96px 0; }
}

/* Retatrutide-Annotation unter dem mittleren Vial (Linie nach oben) */
.hm-call.hm-call--1{ top:auto; bottom:-8%; }
.hm-call--1 .hm-call-dot{ order:1; margin:0 0 6px; }
.hm-call--1 .hm-call-box{ order:2; }
.hm-call--1 .hm-call-box::after{ bottom:auto; top:-22px; }
@media (max-width:640px){ .hm-call.hm-call--1{ top:auto; bottom:-12%; } }
/* Hero ruhiger: keine durchgehenden Hilfslinien */
.hm-rule{ display:none !important; }

/* ---------- Sprachumschalter ---------- */
.lang-sw{ position:relative; margin-right:4px; }
.lang-sw-btn{ display:inline-flex; align-items:center; gap:6px; height:40px; padding:0 10px; border-radius:8px; color:var(--navy); font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.06em; transition:background .2s, color .2s; }
.lang-sw-btn svg{ width:18px; height:18px; }
.lang-sw-btn .lang-sw-chev{ width:12px; height:12px; transition:transform .2s; }
.lang-sw.is-open .lang-sw-chev{ transform:rotate(180deg); }
.lang-sw-btn:hover, .lang-sw.is-open .lang-sw-btn{ background:#F2F7FA; }
body.has-hero .header:not(.is-solid) .lang-sw-btn{ color:#E6EEF4; }
body.has-hero .header:not(.is-solid) .lang-sw-btn:hover{ background:rgb(199 220 233 / .12); color:#fff; }
.lang-sw-menu{ position:absolute; right:0; top:calc(100% + 8px); z-index:80; min-width:190px; margin:0; padding:6px; list-style:none; background:#fff; border:1px solid #E0E9EF; border-radius:12px; box-shadow:0 2px 6px rgb(28 46 58 / .06), 0 24px 48px -20px rgb(28 46 58 / .35); }
.lang-sw-menu a{ display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:8px; color:#1C2E3A; font-size:14.5px; font-weight:550; }
.lang-sw-menu a:hover{ background:#F2F7FA; }
.lang-sw-menu a.is-on{ background:#1C2E3A; color:#fff; }
.lang-sw-code{ display:inline-grid; place-items:center; min-width:30px; height:22px; border-radius:4px; background:#EAF2F7; color:#1C2E3A; font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.06em; }
.lang-sw-menu a.is-on .lang-sw-code{ background:#C7DCE9; }
.d-langs{ display:flex; gap:6px; margin-bottom:14px; }
.d-langs a{ flex:1; display:grid; place-items:center; height:40px; border-radius:8px; border:1px solid #E0E9EF; font-family:var(--mono); font-size:12.5px; font-weight:600; letter-spacing:.08em; color:#1C2E3A; }
.d-langs a.is-on{ background:#1C2E3A; border-color:#1C2E3A; color:#fff; }
@media (max-width:560px){ .lang-sw{ margin-right:0; } .lang-sw-btn{ padding:0 6px; gap:4px; } .lang-sw-btn .lang-sw-chev{ display:none; } .lang-sw-menu{ right:-40px; } }

/* ---------- Complianz „Zustimmung verwalten": sichtbarer Cookie-Button statt halb versteckter Lasche ---------- */
#cmplz-manage-consent .cmplz-manage-consent{
  animation:none !important; position:fixed !important; z-index:9990 !important;
  left:16px !important; right:auto !important; bottom:16px !important; top:auto !important;
  height:44px !important; min-width:44px !important; width:auto !important; max-width:44px; overflow:hidden; white-space:nowrap;
  padding:0 16px 0 44px !important; border:1px solid rgb(199 220 233 / .35) !important; border-radius:22px !important;
  background:#1C2E3A url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C7DCE9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.5A9 9 0 1 1 11.5 3a3 3 0 0 0 4 3.5 3 3 0 0 0 3.5 3.5 3 3 0 0 0 2 2.5z'/%3E%3Ccircle cx='8.5' cy='10.5' r='1'/%3E%3Ccircle cx='12' cy='15.5' r='1'/%3E%3Ccircle cx='16' cy='13' r='.8'/%3E%3C/svg%3E") 12px 50% / 20px 20px no-repeat !important;
  color:#fff !important; font:600 13px/42px Manrope, system-ui, sans-serif !important; letter-spacing:0 !important;
  box-shadow:0 10px 24px -10px rgb(0 0 0 / .45) !important; transition:max-width .35s cubic-bezier(.2,.7,.2,1), background-color .2s !important;
}
#cmplz-manage-consent .cmplz-manage-consent:hover, #cmplz-manage-consent .cmplz-manage-consent:focus-visible{ max-width:260px; background-color:#132029 !important; }
#cmplz-manage-consent .cmplz-manage-consent:focus-visible{ outline:2px solid #C7DCE9 !important; outline-offset:2px; }
body.has-sticky-atc #cmplz-manage-consent .cmplz-manage-consent{ bottom:84px !important; }
@media print{ #cmplz-manage-consent{ display:none !important; } }
#cmplz-manage-consent .cmplz-manage-consent{ box-sizing:border-box !important; }
#cmplz-manage-consent .cmplz-manage-consent{ padding:0 0 0 42px !important; color:transparent !important; transition:max-width .35s cubic-bezier(.2,.7,.2,1), padding .35s, color .2s, background-color .2s !important; }
#cmplz-manage-consent .cmplz-manage-consent:hover, #cmplz-manage-consent .cmplz-manage-consent:focus-visible{ padding:0 16px 0 42px !important; color:#fff !important; }

/* Sprachdialog mit mehreren Sprachen: vorgeschlagene Sprache groß, Rest zweispaltig */
.lang-modal__btns{ display:grid !important; grid-template-columns:1fr 1fr; gap:8px !important; }
.lang-opt{ padding:11px 12px !important; border-radius:10px !important; gap:10px !important; }
.lang-opt__flag{ font-size:22px !important; }
.lang-opt__txt em{ font-size:11px; }
.lang-opt.is-suggested{ grid-column:1 / -1; padding:15px 18px !important; background:#1C2E3A !important; border-color:#1C2E3A !important; color:#fff; }
.lang-opt.is-suggested strong, .lang-opt.is-suggested em, .lang-opt.is-suggested .lang-opt__arrow{ color:#fff !important; }
.lang-opt.is-suggested em{ color:#C7DCE9 !important; }
@media (max-width:420px){ .lang-modal__btns{ grid-template-columns:1fr; } }

/* ---------- RUO-/Altersbestätigung ---------- */
html.ruo-lock, html.ruo-lock body{ overflow:hidden; }
.ruo-gate{ position:fixed; inset:0; z-index:100000; display:flex; align-items:center; justify-content:center; padding:20px; }
.ruo-gate[hidden]{ display:none; }
.ruo-gate__backdrop{ position:absolute; inset:0; background:rgb(14 24 32 / .62); backdrop-filter:blur(10px) saturate(1.1); -webkit-backdrop-filter:blur(10px) saturate(1.1); animation:ruo-fade .35s ease both; }
.ruo-gate__card{ position:relative; width:min(520px,100%); max-height:calc(100dvh - 40px); overflow:auto; background:#fff; border-radius:18px; box-shadow:0 40px 90px -24px rgb(14 24 32 / .6), 0 0 0 1px rgb(199 220 233 / .25); animation:ruo-pop .45s var(--ease) .05s both; }
.ruo-gate__head{ position:relative; display:flex; align-items:center; gap:16px; padding:26px 28px 24px; color:#fff; background:
  radial-gradient(120% 140% at 100% 0%, rgb(76 122 152 / .35), transparent 60%),
  radial-gradient(rgb(199 220 233 / .13) 1px, transparent 1.2px) 0 0 / 14px 14px,
  linear-gradient(135deg, var(--navy-3), var(--navy)); overflow:hidden; }
.ruo-gate__head::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:linear-gradient(90deg, transparent, var(--steel-2), transparent); opacity:.6; }
.ruo-gate__icon{ flex:0 0 auto; width:48px; height:48px; border-radius:12px; display:grid; place-items:center; color:var(--steel); background:rgb(199 220 233 / .08); border:1px solid rgb(199 220 233 / .28); }
.ruo-gate__icon svg{ width:24px; height:24px; }
.ruo-gate__eyebrow{ display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--steel-2); margin-bottom:6px; }
.ruo-gate__title{ margin:0; font-size:clamp(21px,4.6vw,26px); font-weight:900; line-height:1.1; letter-spacing:-.01em; text-transform:uppercase; color:#fff; }
.ruo-gate__body{ padding:24px 28px 22px; }
.ruo-gate__text{ margin:0 0 18px; font-size:14.5px; line-height:1.6; color:#4A5B67; }
.ruo-gate__check{ position:relative; display:flex; align-items:flex-start; gap:14px; padding:15px 16px; margin-bottom:10px; border:1px solid var(--line-2); border-radius:12px; cursor:pointer; font-size:14.5px; line-height:1.5; color:var(--navy); transition:border-color .2s, background .2s, box-shadow .2s; }
.ruo-gate__check:hover{ border-color:var(--steel-dk); }
.ruo-gate__check strong{ font-weight:700; }
.ruo-gate__check input{ position:absolute; opacity:0; width:1px; height:1px; }
.ruo-gate__box{ flex:0 0 auto; width:22px; height:22px; margin-top:1px; border-radius:6px; border:1.5px solid var(--line-2); background:#fff; display:grid; place-items:center; color:transparent; transition:background .2s, border-color .2s, color .2s; }
.ruo-gate__box svg{ width:14px; height:14px; }
.ruo-gate__check input:checked + .ruo-gate__box{ background:var(--navy); border-color:var(--navy); color:var(--steel); }
.ruo-gate__check:has(input:checked){ border-color:var(--navy); background:var(--tint); box-shadow:0 0 0 3px rgb(199 220 233 / .55); }
.ruo-gate__check input:focus-visible + .ruo-gate__box{ outline:2px solid var(--steel-dk); outline-offset:2px; }
.ruo-gate__ok{ width:100%; margin-top:8px; text-transform:uppercase; letter-spacing:.08em; font-size:13.5px; }
.ruo-gate__ok:disabled{ background:var(--line); color:#8A9BA7; cursor:not-allowed; }
.ruo-gate__ok:disabled svg{ transform:none !important; }
.ruo-gate__no{ display:block; width:max-content; margin:14px auto 0; font-size:13.5px; font-weight:600; color:#4A5B67; border-bottom:1px solid currentColor; }
.ruo-gate__no:hover{ color:var(--navy); }
.ruo-gate__links{ margin:16px 0 0; text-align:center; font-size:12px; color:#8A9BA7; }
.ruo-gate__links a{ color:#6E8292; }
.ruo-gate__links a:hover{ color:var(--navy); }
@keyframes ruo-fade{ from{ opacity:0; } }
@keyframes ruo-pop{ from{ opacity:0; transform:translateY(14px) scale(.98); } }
@media (max-width:480px){
  .ruo-gate{ padding:12px; }
  .ruo-gate__head{ padding:22px 20px 20px; gap:14px; }
  .ruo-gate__icon{ width:42px; height:42px; }
  .ruo-gate__body{ padding:20px 20px 18px; }
  .ruo-gate__check{ padding:13px 14px; font-size:14px; }
}
@media (prefers-reduced-motion:reduce){ .ruo-gate__backdrop, .ruo-gate__card{ animation:none; } }

/* Startseite: echter Janoshik-Bericht statt Schema (v.19) */
.hm-docs--real{ height:auto; margin:0; display:grid; justify-items:center; padding:28px 0 8px; }
.hm-docs--real .hm-paper{ position:relative; inset:auto; grid-area:1/1; width:min(380px, 80%); aspect-ratio:900/1328; padding:0; overflow:hidden; }
.hm-docs--real .hm-paper--1{ display:block; padding:0; }
.hm-docs--real .hm-paper--1 img{ display:block; width:100%; height:100%; object-fit:cover; }
.hm-docs-cap{ grid-row:2; display:flex; flex-wrap:wrap; justify-content:center; gap:6px 16px; margin-top:34px; font-size:12.5px; color:#6E8292; }
.hm-docs-cap a{ color:var(--steel-dk); font-weight:600; text-decoration:none; border-bottom:1px solid rgb(76 122 152 / .35); }
.hm-docs-cap a:hover{ border-bottom-color:var(--steel-dk); }
@media (max-width:640px){ .hm-docs--real{ height:auto; } .hm-docs--real .hm-paper{ inset:auto; width:min(320px, 78%); } }

/* Telegram-Kontakt: Pille unten rechts ("Fragen? Schreib uns auf Telegram").
   Mobil nach dem ersten Scrollen nur noch als runder Button (Klasse .is-compact via ui.js).
   Ist der KI-Chat aktiv (.spchat), rutscht sie darüber. */
.sp-tg{
  position:fixed; right:24px; bottom:24px; z-index:99997;
  display:flex; align-items:center; gap:12px; padding:8px 20px 8px 8px; max-width:340px;
  border-radius:999px; background:#229ED9; color:#fff; text-decoration:none; white-space:nowrap; overflow:hidden;
  box-shadow:0 14px 32px -12px rgb(10 40 60 / .6);
  transition:background-color .2s, transform .2s, max-width .35s cubic-bezier(.2,.7,.2,1), padding .35s cubic-bezier(.2,.7,.2,1);
  font-family:Manrope, system-ui, sans-serif;
}
.sp-tg:hover, .sp-tg:focus-visible{ background:#1b8cc2; color:#fff; transform:translateY(-2px); }
.sp-tg:focus-visible{ outline:2px solid #C7DCE9; outline-offset:3px; }
.sp-tg__icon{ flex:0 0 40px; width:40px; height:40px; border-radius:50%; background:rgb(255 255 255 / .18); display:flex; align-items:center; justify-content:center; }
.sp-tg__icon svg{ width:22px; height:22px; margin-left:-2px; }
.sp-tg__text{ display:flex; flex-direction:column; line-height:1.15; transition:opacity .2s; }
.sp-tg__text small{ font-size:12px; font-weight:600; opacity:.85; }
.sp-tg__text strong{ font-size:14px; font-weight:700; }
body:has(.spchat) .sp-tg{ bottom:92px; }
html.ruo-lock .sp-tg{ display:none; }
@media (max-width:700px){
  .sp-tg{ right:14px; bottom:14px; padding:6px 16px 6px 6px; gap:10px; }
  .sp-tg__text strong{ font-size:13px; }
  .sp-tg.is-compact{ max-width:52px; padding:6px; gap:0; }
  .sp-tg.is-compact .sp-tg__text{ opacity:0; }
  body:has(.spchat) .sp-tg{ bottom:84px; }
}
@media (max-width:900px){ body.has-sticky-atc .sp-tg{ bottom:92px; } }
@media (prefers-reduced-motion:reduce){ .sp-tg{ transition:none; } }
@media print{ .sp-tg{ display:none; } }