/* ════════════════════════════════════════════════════════════
   onlytap – Startseite
   ════════════════════════════════════════════════════════════ */
:root {
  --blue:#235DA0; --blue-dark:#1a4a82;
  --ink:#130F1D; --ink-soft:#55525f; --ink-muted:#8b8893;
  --line:#ececf0; --tile:#f6f6f7;
}
.hm-wrap { max-width:1280px; margin:0 auto; padding:0 24px; }
.hm-sec { padding:56px 0; }
.hm-sec-head { text-align:center; margin:0 0 30px; }
.hm-sec-head h2 { font-size:clamp(24px,3vw,32px); font-weight:800; letter-spacing:-.6px; line-height:1.1; margin:0 0 6px; }
.hm-sec-head p { font-size:14.5px; color:var(--ink-muted); font-weight:600; margin:0; }

/* Reveal – gestaffelte Kinder statt ganzer Block */
.hm-reveal .hm-sec-head,
.hm-reveal .hm-cat,
.hm-reveal .hm-best > *,
.hm-reveal .hm-pro > div,
.hm-reveal .hm-pro-item,
.hm-reveal .hm-faq details,
.hm-reveal .hm-cats-more,
.hm-reveal .hm-faq-more {
  opacity:0; transform:translateY(26px);
  transition:opacity .7s cubic-bezier(.22,1,.32,1), transform .7s cubic-bezier(.22,1,.32,1);
  will-change:opacity, transform;
}
.hm-reveal.in .hm-sec-head,
.hm-reveal.in .hm-cat,
.hm-reveal.in .hm-best > *,
.hm-reveal.in .hm-pro > div,
.hm-reveal.in .hm-pro-item,
.hm-reveal.in .hm-faq details,
.hm-reveal.in .hm-cats-more,
.hm-reveal.in .hm-faq-more { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .hm-reveal *{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ── Hero: helle Bühne (onlytap-CI) ───────────────────────── */
.hm-hero-dark { position:relative; overflow:hidden; color:var(--ink);
  background:linear-gradient(165deg,#f4f4f5 0%,#ececed 55%,#e6e6e8 100%);
  padding:72px 0; }
.hm-orb { position:absolute; border-radius:50%; filter:blur(80px); animation:hm-drift 12s ease-in-out infinite alternate; pointer-events:none; }
.hm-orb.o1 { width:460px; height:460px; background:#d3d3d6; opacity:.55; top:-160px; left:-90px; }
.hm-orb.o2 { width:380px; height:380px; background:#dcdce0; opacity:.5; bottom:-180px; right:4%; animation-delay:2.5s; }
.hm-orb.o3 { width:280px; height:280px; background:#cfcfd3; opacity:.5; top:8%; right:-100px; animation-delay:5s; }
@keyframes hm-drift { from { transform:translate(0,0) scale(1); } to { transform:translate(46px,26px) scale(1.12); } }
@media (prefers-reduced-motion:reduce){ .hm-orb{ animation:none; } }

.hm-hero { display:grid; grid-template-columns:1.1fr 1fr; gap:48px; align-items:center; position:relative; z-index:2; }
.hm-hero-eyebrow { display:inline-block; height:26px; line-height:26px; padding:0 13px; background:rgba(35,93,160,.09); color:var(--blue); font-size:11.5px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; border-radius:10px; margin-bottom:0; }
/* Hero-Textspalte: EIN einheitlicher Abstand zwischen allen Elementen */
.hm-hero > div:first-child { display:flex; flex-direction:column; align-items:flex-start; gap:24px; }
/* Zeilenvorschub (Half-Leading) trimmen → 22px Box = 22px sichtbar */
.hm-hero h1, .hm-hero-lead {
  text-box-trim:trim-both; text-box-edge:cap alphabetic;
  text-box:trim-both cap alphabetic;   /* Kurzform, moderne Browser */
}
.hm-hero h1 { font-size:clamp(34px,4.8vw,56px); font-weight:800; letter-spacing:-1.4px; line-height:1.06; margin:0; }
/* Claim-Headline: feste 2 Zeilen, skaliert damit nichts umbricht */
.hm-hero h1.h1-claim { font-size:clamp(24px,4.6vw,46px); line-height:1.22; }
.hm-hero h1.h1-claim .l { display:block; white-space:nowrap; }

/* Papierkarten reißt auseinander (mit Papiertextur) */
.tear { position:relative; display:inline-block; }
.tear .tw-base { transition:opacity .9s cubic-bezier(.4,0,.2,1); }
.tear .tw-top, .tear .tw-bot, .tear .tw-topw, .tear .tw-botw {
  position:absolute; left:0; top:0; white-space:nowrap; opacity:0;
  transition:transform 1.2s cubic-bezier(.4,0,.2,1), opacity .9s cubic-bezier(.4,0,.2,1); will-change:transform, opacity;
  transform:translateZ(0); backface-visibility:hidden; }
/* schwarze Hälften – Schnitt entlang der gezackten Rissstelle */
.tear .tw-top { color:inherit; clip-path:polygon(0% 0%,100% 0%,100% 44%,90% 54%,80% 44%,70% 54%,60% 44%,50% 54%,40% 44%,30% 54%,20% 44%,10% 54%,0% 44%); }
.tear .tw-bot { color:inherit; clip-path:polygon(0% 44%,10% 54%,20% 44%,30% 54%,40% 44%,50% 54%,60% 44%,70% 54%,80% 44%,90% 54%,100% 44%,100% 100%,0% 100%); }
/* weiße Kante – ragt leicht über den Schnitt hinaus, liegt HINTER schwarz → weiß nur am Riss sichtbar */
.tear .tw-topw { color:#fff; clip-path:polygon(0% 0%,100% 0%,100% 49%,90% 59%,80% 49%,70% 59%,60% 49%,50% 59%,40% 49%,30% 59%,20% 49%,10% 59%,0% 49%); }
.tear .tw-botw { color:#fff; clip-path:polygon(0% 39%,10% 49%,20% 39%,30% 49%,40% 39%,50% 49%,60% 39%,70% 49%,80% 39%,90% 49%,100% 39%,100% 100%,0% 100%); }
.tear.is-torn .tw-base { opacity:0; }
.tear.is-torn .tw-top, .tear.is-torn .tw-topw { opacity:1; transform:translateY(-.085em); }
.tear.is-torn .tw-bot, .tear.is-torn .tw-botw { opacity:1; transform:translateY(.085em); }
@media (hover:hover){
  .hm-hero h1.h1-claim:hover .tear .tw-base { opacity:0; }
  .hm-hero h1.h1-claim:hover .tear .tw-top, .hm-hero h1.h1-claim:hover .tear .tw-topw { opacity:1; transform:translateY(-.085em); }
  .hm-hero h1.h1-claim:hover .tear .tw-bot, .hm-hero h1.h1-claim:hover .tear .tw-botw { opacity:1; transform:translateY(.085em); }
}
@media (prefers-reduced-motion:reduce){
  .tear .tw-top, .tear .tw-bot { transition:none; }
  .tear.is-torn .tw-base { opacity:1; } .tear.is-torn .tw-top, .tear.is-torn .tw-bot { opacity:0; }
}
.hm-hero h1 .b { background:linear-gradient(90deg,#235DA0,#4b8fe0); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hm-hero-lead { font-size:16px; line-height:1.5; color:var(--ink-soft); max-width:480px; margin:0; }
.hm-lead-mobile { display:none; }   /* Standard: Desktop-Subline */
.hm-hero-cta { display:flex; gap:12px; flex-wrap:wrap; }
.hm-btn { display:inline-flex; align-items:center; justify-content:center; gap:9px; height:48px; padding:0 22px; border:1.5px solid transparent; border-radius:10px; font-family:inherit; font-size:14.5px; font-weight:800; cursor:pointer; text-decoration:none; transition:background .15s, border-color .15s, color .15s, transform .15s; }
.hm-btn svg { width:17px; height:17px; flex:none; }
/* Schieberegler-Icon: Thumbs animieren bei Hover/Klick */
.ic-sliders .th { transform-box:fill-box; transform-origin:center; transition:transform .3s ease; }
.hm-btn.primary:hover .ic-sliders .t1,
.hm-btn.primary:active .ic-sliders .t1 { animation:sl-bob 1.1s ease-in-out infinite; }
.hm-btn.primary:hover .ic-sliders .t2,
.hm-btn.primary:active .ic-sliders .t2 { animation:sl-bob 1.1s ease-in-out infinite .18s; }
.hm-btn.primary:hover .ic-sliders .t3,
.hm-btn.primary:active .ic-sliders .t3 { animation:sl-bob 1.1s ease-in-out infinite .36s; }
@keyframes sl-bob { 0%,100%{ transform:translateY(-3.5px); } 50%{ transform:translateY(3.5px); } }
@media (prefers-reduced-motion:reduce){ .ic-sliders .th{ animation:none !important; } }
.hm-btn.primary { background:var(--ink); color:#fff; }
.hm-btn.primary:hover { background:#000; transform:translateY(-2px); }
.hm-btn.ghost { background:var(--ink); color:#fff; border-color:var(--ink); }
.hm-btn.ghost:hover { background:#000; border-color:#000; }
.hm-trust { display:flex; gap:20px; flex-wrap:wrap; margin-top:28px; font-size:12.5px; font-weight:700; color:var(--ink-muted); }
.hm-trust span { display:inline-flex; align-items:center; gap:7px; }
.hm-trust svg { width:15px; height:15px; color:var(--blue); }
.hm-trust .t-green svg { color:#1a9a5b; }
.hm-trust-track { display:flex; }
.hm-trust-set { display:flex; gap:20px; flex-wrap:wrap; }
.hm-trust-dup { display:none; }   /* Desktop: nur ein Set, statisch */

/* Text-Reveal beim Laden */
.hm-hero .rv { opacity:0; transform:translateY(22px); animation:hm-rv .8s cubic-bezier(.22,1,.32,1) forwards; }
.hm-hero .rv.d1 { animation-delay:.15s; } .hm-hero .rv.d2 { animation-delay:.3s; }
.hm-hero .rv.d3 { animation-delay:.5s; } .hm-hero .rv.d4 { animation-delay:.7s; }
@keyframes hm-rv { to { opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .hm-hero .rv{ opacity:1; transform:none; animation:none; } }

/* Hero-Visual: Bühne mit Puls-Ringen */
.hm-stage { position:relative; min-height:360px; display:flex; align-items:center; justify-content:center; }
.hm-ring { position:absolute; width:310px; height:310px; border-radius:50%; border:1px solid rgba(35,93,160,.18); animation:hm-ringpulse 3.2s ease-out infinite; pointer-events:none; }
.hm-ring.r2 { animation-delay:1.6s; }
@keyframes hm-ringpulse { 0%{ transform:scale(.65); opacity:0; } 25%{ opacity:1; } 100%{ transform:scale(1.45); opacity:0; } }
@media (prefers-reduced-motion:reduce){ .hm-ring{ animation:none; opacity:.25; } }
.hm-hero-dark .hm-card { box-shadow:0 22px 50px rgba(19,15,29,.16); }
.hm-card { position:relative; width:300px; aspect-ratio:85.6/54; border-radius:16px; transform:rotate(-6deg); box-shadow:0 30px 60px rgba(19,15,29,.25); color:#fff;
  background:linear-gradient(135deg, rgba(255,255,255,.16), transparent 42%), linear-gradient(160deg,#3a74bb,#215691 65%,#173f6e); }

/* Karten-Stapel: rotiert im Wechsel durch die Materialien */
.hm-stack { position:relative; width:196px; aspect-ratio:55/85; }
.hm-stack .hm-card { aspect-ratio:55/85; border-radius:10px; }
.hm-stack .hm-card { position:absolute; inset:0; width:100%; transition:transform .8s cubic-bezier(.22,1,.32,1), opacity .8s ease, box-shadow .8s ease; will-change:transform; }
.hm-stack .hm-card.is-front { transform:rotate(-6deg) scale(1); z-index:3; opacity:1; box-shadow:0 30px 60px rgba(19,15,29,.28); }
.hm-stack .hm-card.is-mid { transform:translate(52px,-30px) rotate(7deg) scale(.92); z-index:2; opacity:.9; box-shadow:0 18px 40px rgba(19,15,29,.16); }
.hm-stack .hm-card.is-back { transform:translate(-48px,26px) rotate(-16deg) scale(.86); z-index:1; opacity:.75; box-shadow:0 10px 26px rgba(19,15,29,.12); }
@media (prefers-reduced-motion:reduce){ .hm-stack .hm-card{ transition:none; } }
@media (max-width:900px){ .hm-stack{ width:260px; } .hm-stack .hm-card.is-mid{ transform:translate(36px,-20px) rotate(7deg) scale(.92); } .hm-stack .hm-card.is-back{ transform:translate(-34px,18px) rotate(-14deg) scale(.86); } }
.hm-card-in { position:absolute; inset:0; padding:18px; display:flex; flex-direction:column; justify-content:space-between; z-index:2; }
.hm-card-mark { width:28px; height:28px; }
.hm-card-mark svg { width:100%; height:100%; }
.hm-card-name { font-size:15px; font-weight:800; letter-spacing:-.2px; }
.hm-card-sub { font-size:10px; font-weight:600; opacity:.72; }
.hm-card-nfc { position:absolute; right:16px; bottom:14px; width:22px; height:22px; opacity:.9; }
.hm-card-nfc svg { width:100%; height:100%; }
.hm-tapwave { position:absolute; width:340px; height:340px; border-radius:50%; border:1.5px solid rgba(35,93,160,.18); animation:hm-pulse 2.6s ease-out infinite; }
.hm-tapwave.w2 { animation-delay:1.3s; }
@keyframes hm-pulse { 0%{ transform:scale(.6); opacity:0; } 30%{ opacity:1; } 100%{ transform:scale(1.25); opacity:0; } }
@media (prefers-reduced-motion:reduce){ .hm-tapwave{ animation:none; opacity:.4; } }

/* ── Kategorien ───────────────────────────────────────────── */
.hm-cats { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.hm-cat { position:relative; display:flex; flex-direction:column; justify-content:flex-end; min-height:240px; border-radius:14px; overflow:hidden; text-decoration:none; color:#fff; padding:22px 24px; transition:transform .18s, box-shadow .18s; }
.hm-cat:hover { transform:translateY(-4px); box-shadow:0 22px 48px rgba(19,15,29,.18); }
.hm-cat::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 30%, rgba(10,14,22,.55)); }
.hm-cat > * { position:relative; z-index:2; }
.hm-cat b { font-size:20px; font-weight:800; letter-spacing:-.3px; }
.hm-cat span { font-size:13px; font-weight:600; opacity:.85; margin-top:3px; }
.hm-cat .price { display:inline-flex; align-items:center; gap:6px; margin-top:12px; font-size:13px; font-weight:800; }
.hm-cat .price svg { width:15px; height:15px; transition:transform .18s; }
.hm-cat span.hm-cat-tag { position:absolute; top:16px; left:16px; z-index:2; align-self:flex-start; margin:0; height:26px; line-height:26px; padding:0 13px; font-size:11.5px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; opacity:1; color:#fff; background:rgba(255,255,255,.16); border-radius:10px; }
/* Kategorie ist noch nicht startklar: Hinweis deutlich, Kachel etwas ruhiger */
.hm-cat span.hm-tag-bald { background:rgba(78,163,255,.22); box-shadow:inset 0 0 0 1px rgba(120,180,255,.45); }
.hm-cat.is-bald { opacity:.9; }
.hm-cat.is-bald:hover { opacity:1; }
.hm-cat-mat { font-size:12px !important; font-weight:600; opacity:.72 !important; margin-top:8px !important; }
.hm-cats-note { text-align:center; margin:36px 0 0; font-size:13px; color:var(--ink-muted); font-weight:500; }
.hm-cats-note b { color:var(--ink-soft); font-weight:800; }
.hm-cat:hover .price svg { transform:translateX(4px); }
.hm-cats-more { display:none; text-align:center; margin-top:18px; }
.hm-cats-dots { display:none; }
.hm-botband { display:none; }   /* nur Mobile */
.hm-btn-outline { display:inline-flex; align-items:center; justify-content:center; height:48px; padding:0 26px; border-radius:10px; background:transparent; color:var(--ink); border:1.5px solid var(--ink); font-size:14.5px; font-weight:800; text-decoration:none; transition:background .15s, color .15s; }
.hm-btn-outline:hover { background:var(--ink); color:#fff; }

/* ── Bestseller ───────────────────────────────────────────── */
.hm-best { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.hm-prod { display:flex; flex-direction:column; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#fff; text-decoration:none; color:inherit; transition:transform .18s, box-shadow .18s, border-color .18s; }
.hm-prod-img { aspect-ratio:4/3; position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden; color:#fff; }
.hm-prod-img img { width:100%; height:100%; object-fit:cover; }
.hm-prod-badge { position:absolute; top:14px; left:14px; z-index:2; height:24px; display:inline-flex; align-items:center; padding:0 11px; border-radius:8px; font-size:11px; font-weight:800; letter-spacing:.5px; text-transform:uppercase;
  -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px); background:rgba(255,255,255,.28); border:1px solid rgba(255,255,255,.5); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.5); }
.hm-prod-mark { width:30px; height:30px; position:absolute; top:16px; right:16px; opacity:.95; }
.hm-prod-mark svg { width:100%; height:100%; }
.hm-prod-nfc { width:24px; height:24px; position:absolute; bottom:14px; right:16px; opacity:.9; }
.hm-prod-nfc svg { width:100%; height:100%; }
.hm-prod-body { padding:15px 18px; display:flex; flex-direction:column; gap:12px; }
.hm-prod-name { font-size:17px; font-weight:800; }
.hm-prod-mat { font-size:13px; color:var(--ink-muted); font-weight:600; }
.hm-prod-foot { display:flex; align-items:center; justify-content:space-between; margin-top:12px; gap:10px; }
.hm-prod-price { display:flex; align-items:baseline; gap:8px; }
.hm-prod-price .pfx { font-size:13px; font-weight:700; color:var(--ink-muted); align-self:center; }
.hm-prod-price .now { font-size:19px; font-weight:800; }
.hm-prod-price .old { font-size:13.5px; color:var(--ink-muted); text-decoration:line-through; font-weight:600; }
.hm-prod-add { width:40px; height:40px; border-radius:12px; border:none; background:var(--ink); color:#fff; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:background .15s; }
.hm-prod-add:hover { background:var(--blue); }
.hm-prod-add svg { width:18px; height:18px; }
.hm-best-team { text-align:center; margin:36px 0 0; font-size:13.5px; color:var(--ink-muted); font-weight:500; }
.hm-best-team a { color:var(--ink-soft); text-decoration:underline; text-underline-offset:2px; font-weight:600; }
.hm-best-team a:hover { color:var(--blue); }
.hm-best-team .tm-br { display:none; }
@media (max-width:600px){ .hm-best-team .tm-br { display:inline; } }

/* Produkt-Übersicht: dunkler Hero (Stil Aktuelles-Seite) */
.pgh-hero { position:relative; overflow:hidden; color:#fff; background:#0a0812; min-height:clamp(320px,40vw,460px); display:flex; align-items:center; justify-content:center; text-align:center; }
.pgh-bg { position:absolute; top:-22%; left:0; right:0; height:144%; z-index:0; pointer-events:none; background:url(/img/textures/tex-metall.webp) center/cover no-repeat; opacity:.7; will-change:transform; }
.pgh-ov { position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg,rgba(10,8,18,.32) 0%,rgba(10,8,18,.55) 60%,rgba(10,8,18,.9) 100%); }
.pgh-glow { position:absolute; z-index:1; top:50%; left:50%; width:min(900px,90vw); height:min(560px,64vw); transform:translate(-50%,-50%); border-radius:50%; pointer-events:none; background:radial-gradient(ellipse at center,rgba(58,124,205,.45) 0%,rgba(35,93,160,0) 66%); filter:blur(34px); }
.pgh-c { position:relative; z-index:2; max-width:720px; padding:clamp(48px,8vw,96px) 24px; }
.pgh-c h1 { font-size:clamp(40px,7vw,80px); font-weight:900; letter-spacing:-2px; line-height:1; margin:0 0 16px; color:#fff; opacity:0; animation:pghIn 1s cubic-bezier(.2,.7,.2,1) .12s forwards; }
.pgh-c p { font-size:clamp(15px,1.9vw,18px); color:rgba(255,255,255,.72); line-height:1.6; margin:0 auto; max-width:540px; opacity:0; animation:pghIn 1s ease .34s forwards; }
@keyframes pghIn { from{opacity:0;transform:translateY(18px);} to{opacity:1;transform:none;} }
@media(prefers-reduced-motion:reduce){ .pgh-c h1,.pgh-c p{opacity:1!important;animation:none!important;transform:none!important;} }

/* Produkt-Übersicht: Kategorie-Filter + Sortierung + Grid */
#pgRoot .pg-sec { padding-top:40px; padding-bottom:56px; }
#pgRoot .hm-best-team { margin-top:56px; }
.pg-toolbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; margin:0 0 40px; }
.pg-sortwrap { display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; color:var(--ink-muted); white-space:nowrap; }
.pg-sort { font-family:inherit; font-size:13.5px; font-weight:700; color:var(--ink); border:1.5px solid var(--line); border-radius:10px; padding:8px 32px 8px 12px; cursor:pointer;
  -webkit-appearance:none; appearance:none;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23130f1d' 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 11px center; background-size:12px; }
.pg-sort:hover { border-color:var(--blue); }
.pg-filter { display:flex; flex-wrap:wrap; gap:10px; margin:0; }
.pg-chip { padding:9px 18px; border-radius:999px; border:1.5px solid var(--line); background:#fff; font-family:inherit; font-weight:700; font-size:14px; color:var(--ink); cursor:pointer; transition:background .15s, color .15s, border-color .15s; }
.pg-chip:hover { border-color:var(--blue); }
.pg-chip.on { background:var(--ink,#130f1d); color:#fff; border-color:var(--ink,#130f1d); }
.pg-grid { margin-bottom:12px; }
@media (max-width:600px){
  .pg-grid { display:grid; grid-template-columns:1fr; gap:16px; overflow:visible; }
  .pg-grid .hm-prod { flex:none; width:auto; scroll-snap-align:none; }
}
.hm-prod-imglink { display:block; text-decoration:none; }
/* Bild-Karten als 3D-Mockup (wie Vorschau) */
.hm-prod-stage { display:grid; place-items:center; padding:22px; background:radial-gradient(120% 120% at 50% 0%, #ffffff, #eef0f4); perspective:900px; overflow:hidden; }
.hm-prod-mock { display:block; width:76%; aspect-ratio:85/54; position:relative; border-radius:12px; overflow:hidden;
  border:1.5px solid #8a6039; box-shadow:0 14px 26px rgba(19,15,29,.20), 0 4px 8px rgba(19,15,29,.12);
  transform:rotateY(-9deg) rotateX(5deg); transform-origin:center;
  transition:transform 1.2s cubic-bezier(.22,.61,.36,1), box-shadow .6s; will-change:transform; }
.hm-prod-mock img { width:100%; height:100%; object-fit:cover; display:block; }
.hm-prod-mock::after { content:''; position:absolute; inset:0; background:linear-gradient(120deg, rgba(255,255,255,.28), transparent 45%); pointer-events:none; }
/* Hover: Karte schwebt sanft hin & her (Klasse per JS, damit das Ende weich ausläuft) */
.hm-prod-mock.is-floating { animation:hm-mock-float 3.6s ease-in-out infinite; }
@keyframes hm-mock-float {
  0%,100% { transform:rotateY(-9deg) rotateX(5deg) translateY(-2px); }
  50%     { transform:rotateY(2deg) rotateX(4deg) translateY(-9px); }
}
@media(prefers-reduced-motion:reduce){ .hm-prod-mock, .hm-prod-mock.is-floating{ transition:none; animation:none; } }
.hm-prod-titlerow { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.hm-prod-titlerow .hm-prod-name { min-width:0; }
.hm-prod-titlerow .hm-prod-price { margin:0; flex:none; }
.hm-prod-bullets { list-style:none; margin:-5px 0 0; padding:0; display:flex; flex-wrap:wrap; align-items:center; gap:0 6px; font-size:13px; font-weight:600; color:var(--ink-soft); line-height:1.5; }
.hm-prod-bullets li { display:inline; }
.hm-prod-bullets li:not(:first-child)::before { content:"·"; margin-right:6px; color:var(--ink-muted); }
.hm-prod-actions { display:flex; flex-direction:row; gap:8px; }
.hm-prod-btn { flex:1 1 0; min-width:0; height:42px; padding:0 10px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; gap:7px; font-family:inherit; font-weight:800; font-size:14px; white-space:nowrap; text-decoration:none; cursor:pointer; transition:background .15s, border-color .15s, color .15s; }
.hm-btn-ic { width:16px; height:16px; flex:none; transform-origin:center; }
.hm-prod-btn .ic-sliders { width:16px; height:16px; flex:none; }
.hm-prod-btn.primary > svg { width:16px; height:16px; flex:none; }
/* Auge blinzelt bei Hover */
.hm-prod-btn.ghost:hover .hm-btn-ic { animation:eye-blink 1.6s ease-in-out infinite; }
@keyframes eye-blink { 0%,40%,100%{ transform:scaleY(1); } 47%{ transform:scaleY(.12); } 54%{ transform:scaleY(1); } 61%{ transform:scaleY(.12); } 68%{ transform:scaleY(1); } }
/* Konfigurieren: Slider-Thumbs wippen wie im Hero */
.hm-prod-btn.primary:hover .ic-sliders .t1 { animation:sl-bob 1.1s ease-in-out infinite; }
.hm-prod-btn.primary:hover .ic-sliders .t2 { animation:sl-bob 1.1s ease-in-out infinite .18s; }
.hm-prod-btn.primary:hover .ic-sliders .t3 { animation:sl-bob 1.1s ease-in-out infinite .36s; }
@media(prefers-reduced-motion:reduce){ .hm-prod-btn.ghost:hover .hm-btn-ic, .hm-prod-btn.primary:hover .ic-sliders .th{ animation:none !important; } }
.hm-prod-btn.primary { background:var(--blue); color:#fff; border:1.5px solid var(--blue); }
.hm-prod-btn.primary:hover { background:var(--blue-dark, #1a4a82); border-color:var(--blue-dark, #1a4a82); }
.hm-prod-btn.ghost { background:#fff; color:var(--ink); border:1.5px solid var(--line); }
.hm-prod-btn.ghost:hover { border-color:var(--blue); color:var(--blue); }

/* ── PRO-Teaser ───────────────────────────────────────────── */
.hm-pro { position:relative; overflow:hidden; background:linear-gradient(135deg, #14192b, #0f1d33 55%, #16294a); border-radius:14px; padding:52px 48px; display:grid; grid-template-columns:1.2fr 1fr; gap:40px; align-items:center; color:#fff; }
.hm-pro-copy, .hm-pro-compare { position:relative; z-index:1; }
.hm-pro-top { display:flex; align-items:center; gap:14px; margin-bottom:22px; }
.hm-pro-top .hm-pro-lockup, .hm-pro-top .hm-pro-price { margin:0; }
.hm-pro-top .hm-pro-price { align-items:center; }
.hm-pro-lockup { display:inline-flex; align-items:center; gap:6px; margin-bottom:28px; }
.hm-pro-logo { height:22px; width:auto; display:block; filter:brightness(0) invert(1); }
.hm-pro-lockup .g-pro { height:21px; font-size:11.5px; background:#fff; color:var(--blue); box-shadow:inset 0 -1px 0 rgba(0,0,0,.06); }
.hm-pro h2 { font-size:clamp(24px,3vw,34px); font-weight:800; letter-spacing:-.6px; margin:0 0 12px; line-height:1.15; }
.hm-pro p { font-size:15px; line-height:1.65; color:rgba(255,255,255,.75); margin:0 0 24px; max-width:460px; }
.hm-pro-p-mobile { display:none; }
.hm-pro-h-mobile { display:none; }
.hm-pro-price { display:inline-flex; align-items:baseline; gap:6px; margin-bottom:14px; }
.hm-pro-price b { font-size:15px; font-weight:800; color:rgba(255,255,255,.9); }
.hm-pro-price small { font-size:13px; font-weight:600; color:rgba(255,255,255,.5); }
.hm-pro-cta-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.hm-pro-cta { display:inline-flex; align-items:center; gap:9px; background:#fff; color:var(--ink); border-radius:14px; padding:14px 24px; font-size:14.5px; font-weight:800; text-decoration:none; transition:transform .15s, background .15s; }
.hm-pro-cta:hover { transform:translateY(-2px); }
.hm-pro-cta.ghost { background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.28); }
.hm-pro-cta.ghost:hover { border-color:#fff; background:rgba(255,255,255,.06); }
.hm-pro-note { margin-top:14px; font-size:12.5px; font-weight:600; color:rgba(255,255,255,.55); }
.hm-pc-cap { display:flex; align-items:center; justify-content:space-between; padding:4px 14px 8px; }
.hm-pc-cap span { font-size:11px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:rgba(255,255,255,.45); }
.hm-pc-cap a { font-size:12.5px; font-weight:700; color:#fff; text-decoration:none; }
.hm-pc-badge { display:inline-flex; align-items:center; height:21px; padding:0 8px; border-radius:7px; background:#fff; color:var(--blue); font-size:11px; font-weight:800; letter-spacing:.6px; }
.hm-pc-cap a:hover { text-decoration:underline; }

/* Free-vs-PRO-Vergleich */
.hm-pro-compare { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); border-radius:16px; padding:6px 8px; }
.hm-pc-row { display:grid; grid-template-columns:1fr 58px 58px; align-items:center; gap:8px; padding:12px 14px; }
.hm-pc-row + .hm-pc-row { border-top:1px solid rgba(255,255,255,.08); }
.hm-pc-head { font-size:11px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:rgba(255,255,255,.5); }
.hm-pc-head .hm-pc-pro { color:var(--blue); }
.hm-pc-feat { font-size:13.5px; font-weight:600; color:rgba(255,255,255,.9); }
.hm-pc-free, .hm-pc-pro { display:flex; align-items:center; justify-content:center; text-align:center; }
.hm-pc-ic { width:17px; height:17px; vertical-align:middle; }
.hm-pc-ic.ok { color:#4fe0a0; }
.hm-pc-ic.no { color:rgba(255,255,255,.28); }


/* ── FAQ ──────────────────────────────────────────────────── */
.hm-faq { max-width:780px; margin:0 auto; }
.hm-faq details { border:1px solid var(--line); border-radius:14px; padding:2px 20px; margin-bottom:12px; background:#fff; }
.hm-faq summary { cursor:pointer; font-weight:800; font-size:15.5px; padding:16px 0; list-style:none; }
.hm-faq summary::-webkit-details-marker { display:none; }
.hm-faq summary::after { content:'+'; float:right; color:var(--blue); font-weight:900; font-size:20px; line-height:1; }
.hm-faq details[open] summary::after { content:'–'; }
.hm-faq p { margin:0 0 16px; font-size:14.5px; line-height:1.65; color:var(--ink-soft); }
.hm-faq-more { text-align:center; margin-top:22px; }

/* FAQ-Konfigurator-Promo – nur Desktop sichtbar (Basis: aus) */
.hm-faq-promo { display:none; }
.hm-faq-promo-card {
  position:relative; overflow:hidden; display:flex; flex-direction:column;
  height:100%; border-radius:20px; padding:32px 30px; text-decoration:none;
  background:linear-gradient(158deg,#2a6bb4 0%,#235DA0 42%,#173c6b 100%);
  color:#fff; box-shadow:0 24px 52px rgba(19,51,90,.30);
  transition:transform .38s cubic-bezier(.22,1,.32,1), box-shadow .38s ease;
}
.hm-faq-promo-card::before {   /* sanfter Lichtschein oben rechts */
  content:''; position:absolute; top:-40%; right:-30%; width:80%; height:80%;
  background:radial-gradient(circle, rgba(255,255,255,.22), transparent 70%); pointer-events:none;
}
.hm-faq-promo-card:hover { transform:translateY(-5px); box-shadow:0 34px 66px rgba(19,51,90,.40); }
.hm-faq-promo-eyebrow { display:inline-flex; align-items:center; gap:7px; font-size:11px; font-weight:800;
  letter-spacing:.7px; text-transform:uppercase; color:#c3d8ef; position:relative; z-index:1; }
.hm-faq-promo-eyebrow svg { width:15px; height:15px; }
.hm-faq-promo-card h3 { font-size:23px; line-height:1.16; font-weight:800; letter-spacing:-.6px;
  margin:14px 0 10px; position:relative; z-index:1; text-wrap:balance; }
.hm-faq-promo-card h3 br { display:block; }
.hm-faq-promo-card p { font-size:14px; line-height:1.6; font-weight:500; margin:0;
  color:rgba(255,255,255,.85); position:relative; z-index:1; }
.hm-faq-promo-visual { position:relative; flex:1; min-height:210px; margin:18px 0 22px; }
.hm-faq-promo-img { position:absolute; top:50%; left:50%; width:122px; border-radius:8px;
  box-shadow:0 18px 36px rgba(0,0,0,.38); transition:transform .4s cubic-bezier(.22,1,.32,1); }
.hm-faq-promo-img.c-back  { transform:translate(-24%,-50%) rotate(9deg); }
.hm-faq-promo-img.c-front { transform:translate(-76%,-50%) rotate(-7deg); z-index:1; }
.hm-faq-promo-card:hover .hm-faq-promo-img.c-back  { transform:translate(-20%,-54%) rotate(11deg); }
.hm-faq-promo-card:hover .hm-faq-promo-img.c-front { transform:translate(-80%,-56%) rotate(-9deg); }
.hm-faq-support-vis { flex:1; display:flex; align-items:center; justify-content:center; margin:18px 0 22px; }
.hm-faq-support-vis svg { width:96px; height:96px; color:#fff; opacity:.16; }
.hm-faq-promo-btn { align-self:stretch; margin-top:auto; background:#fff; color:var(--ink);
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-weight:800; font-size:14px; padding:13px 22px; border-radius:10px; position:relative; z-index:1;
  transition:background .2s ease; }
.hm-faq-promo-btn svg { width:17px; height:17px; flex:none; }
.hm-faq-promo-card:hover .hm-faq-promo-btn { background:#eef2f7; }
/* Regler-Animation bei Card-Hover (wie Hero-Button) */
.hm-faq-promo-card:hover .hm-faq-promo-btn .ic-sliders .t1 { animation:sl-bob 1.1s ease-in-out infinite; }
.hm-faq-promo-card:hover .hm-faq-promo-btn .ic-sliders .t2 { animation:sl-bob 1.1s ease-in-out infinite .18s; }
.hm-faq-promo-card:hover .hm-faq-promo-btn .ic-sliders .t3 { animation:sl-bob 1.1s ease-in-out infinite .36s; }

.hm-foot-space { height:0; }

/* ── Kunden-Logos im Hero: beschriftete Glasleiste ── */
/* Cluster: Buttons geben die Breite vor, Glasleiste dehnt sich genau darauf */
.hm-hero-cluster { display:flex; flex-direction:column; align-items:flex-start;
  width:fit-content; max-width:100%; gap:24px; }
.hm-hero-proof { align-self:stretch; display:flex; flex-direction:column; gap:15px; margin-top:0;
  padding:18px 26px; border-radius:10px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.11);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.hm-hero-proof-label { font-size:10.5px; font-weight:800; letter-spacing:1.3px;
  text-transform:uppercase; color:#fff; }
/* width:0 + min-width:100% → Logos treiben die Panelbreite nicht auf, füllen sie aber aus */
/* width:0 + min-width:100% → Logos treiben die Panelbreite nicht auf, füllen sie aber aus */
.hm-hero-logos { width:0; min-width:100%; }
.hm-hlogos-track { display:flex; width:100%; }
.hm-hlogos-set { display:flex; flex:1; align-items:center; justify-content:space-between; gap:16px; }
.hm-hlogos-dup { display:none; }   /* Desktop: nur ein Satz, über volle Breite verteilt */
/* Label: Kurzform aus */
.hm-hero-proof-label .lbl-short { display:none; }
.hm-hlogo { height:16px; width:auto; object-fit:contain; opacity:.85;
  filter:brightness(0) invert(1); transition:opacity .25s ease; }
.hm-hlogo:hover { opacity:1; }
.hm-hlogo.l-h2k    { height:15px; }
.hm-hlogo.l-wisag  { height:18px; }
.hm-hlogo.l-signal { height:13px; }
.hm-hlogo.l-vonovia{ height:14px; }
.hm-hlogo.l-dieder { height:14px; }
/* auf hellem Hero (falls jemals) Logos dunkel */
.hm-hero-dark:not(.is-dark) .hm-hero-proof { background:rgba(0,0,0,.04); border-color:rgba(0,0,0,.08); }
.hm-hero-dark:not(.is-dark) .hm-hero-proof-label { color:#6b7688; }
.hm-hero-dark:not(.is-dark) .hm-hlogo { filter:grayscale(1); opacity:.6; }

/* ── Trust-Leiste (unter Hero) ── */
.hm-trustbar { max-width:1232px; margin:0 auto; padding:26px 24px 4px; }
.hm-trustbar-row { display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:14px 40px; }
.hm-trustbar-row span { display:inline-flex; align-items:center; gap:9px;
  font-size:14px; font-weight:700; color:var(--ink-soft); white-space:nowrap; }
.hm-trustbar-row span svg { width:19px; height:19px; flex-shrink:0; }
.hm-trustbar-row .t-green svg { color:#2fa860; }
@media (max-width:600px){
  .hm-trustbar { padding:20px 20px 2px; }
  .hm-trustbar-row { gap:12px 26px; }
  .hm-trustbar-row span { font-size:13px; }
  /* FAQ-Abschluss-Button auf volle Breite */
  .hm-faq-more .hm-btn { display:flex; width:100%; }
  /* PRO-Teaser: Logo, Badge und Preis passen nebeneinander nicht mehr
     auf eine Zeile – der Preis wurde mitten im Betrag umgebrochen
     („ab 1,90“ / „€“). Deshalb hier Logo-Zeile über Preis-Zeile. */
  .hm-pro-top { flex-wrap:wrap; gap:8px 14px; }
  .hm-pro-price { flex-wrap:wrap; }
  .hm-pro-price b, .hm-pro-price small { white-space:nowrap; }
}

/* ── FAQ in graue Kachel ── */
.hm-faq-layout { background:#f2f2f4; border-radius:22px; padding:26px 20px; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width:900px) {
  .hm-hero-dark { padding:44px 0; }
  .hm-hero .hm-stage { order:-1; }                 /* Karten über dem Text */
  .hm-hero-dark.is-dark .hm-stage { min-height:240px !important; }
  .hm-hero h1.h1-claim { font-size:clamp(28px,4.6vw,46px); }
  /* Abstände kompakter – einheitlich per Gap */
  .hm-hero { gap:22px; }
  .hm-hero > div:first-child { gap:16px; }
  .hm-hero-cluster { gap:16px; }
  .hm-hero-cta { gap:10px; }
  /* Trust als durchlaufendes Band (rechts→links) */
  .hm-hero > div { min-width:0; }   /* verhindert, dass das max-content-Band die Spalte aufbläht */
  .hm-trust { margin-top:14px; min-width:0; overflow:hidden; -webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); }
  .hm-trust-track { flex-wrap:nowrap; width:max-content; animation:hm-marquee 18s linear infinite; }
  .hm-trust-set { flex:none; flex-wrap:nowrap; padding-right:20px; }
  .hm-trust-dup { display:flex; }
  @keyframes hm-marquee { from { transform:translateX(0); } to { transform:translateX(-50%); } }
  @media (prefers-reduced-motion:reduce){ .hm-trust-track { animation:none; } }

  /* Kategorien: symmetrische Abschnitts-Abstände + horizontal scrollen */
  .hm-sec { padding:40px 0; }
  .hm-sec-head { margin-bottom:20px; }
  .hm-sec-head h2 { margin-bottom:3px; }
  .hm-cats { display:flex; grid-template-columns:none; overflow-x:auto; scroll-snap-type:x mandatory;
    gap:16px; margin:0; padding:2px 0 6px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .hm-cats::-webkit-scrollbar { display:none; }
  /* volle Breite (wie der Button), quadratisch, grau, Ecken wie Buttons */
  .hm-cat { flex:0 0 100%; width:100%; aspect-ratio:1/1; min-height:0; scroll-snap-align:center;
    background:#e5e5e8 !important; color:var(--ink); border-radius:14px; padding:22px 24px; }
  .hm-cat:hover { transform:none; box-shadow:none; }

  /* Reihenfolge mobil: Bestseller direkt nach Hero, dann Kategorien */
  .hm-wrap { display:flex; flex-direction:column; }
  .hm-sec-gray { order:-1; }
  /* Bestseller weiß (wie Desktop), kein grauer Band */
  .hm-sec-gray { background:#fff; margin:0; padding:40px 0; }
  /* Kategorien grau (full-bleed) */
  #kategorien { background:#f2f2f4; margin:0 -24px; padding:40px 24px; }
  /* PRO: voller dunkler Hintergrund (wie Hero), keine Kachel, linksbündig */
  .hm-pro-sec { padding:0; }
  .hm-pro { border-radius:0; margin:0 -24px; padding:48px 24px; }
  .hm-pro-cta { width:100%; justify-content:center; }
  .hm-pro h2 { font-size:30px; }
  .hm-pro-h-desktop { display:none; }
  .hm-pro-h-mobile { display:inline; }
  .hm-pro-p-desktop { display:none; }
  .hm-pro-p-mobile { display:block; }
  .hm-pro-note { text-align:center; }
  /* Fuß-Trust-Band: läuft rechts→links (wie Hero-Trust) */
  .hm-foot-space { height:0; }
  .hm-botband { display:block; overflow:hidden; padding:22px 0; margin-top:6px;
    -webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); }
  .hm-botband-track { display:flex; width:max-content; animation:hm-marquee 20s linear infinite; }
  .hm-botband-set { display:flex; flex:none; padding-right:22px; }
  .hm-botband-set span { display:inline-flex; align-items:center; gap:7px; padding-right:22px; font-size:12.5px; font-weight:700; color:var(--ink-muted); white-space:nowrap; }
  .hm-botband-set svg { width:15px; height:15px; flex:none; color:var(--blue); }
  .hm-botband-set .t-green svg { color:#1a9a5b; }
  @media (prefers-reduced-motion:reduce){ .hm-botband-track { animation:none; } }
  .hm-best { display:flex; grid-template-columns:none; overflow-x:auto; scroll-snap-type:x mandatory;
    gap:16px; margin:0; padding:2px 0 6px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .hm-best::-webkit-scrollbar { display:none; }
  .hm-prod { flex:0 0 100%; width:100%; scroll-snap-align:center; }
  .hm-prod:hover { transform:none; box-shadow:none; border-color:var(--line); }
  .hm-prod-stage { padding:16px; }
  /* Mobile: Schwebe-Animation läuft dauerhaft (kein Hover) */
  .hm-prod-mock { animation:hm-mock-float 3.6s ease-in-out infinite; }
  .hm-prod-body { padding:13px 14px; gap:10px; }
  .hm-prod-name { font-size:16px; }
  /* Bullets kompakter, damit sie einzeilig bleiben */
  .hm-prod-bullets { font-size:11.5px; gap:0 4px; }
  .hm-prod-bullets li:not(:first-child)::before { margin-right:4px; }
  /* Preis oben links über dem Titel, kleiner als Titel */
  .hm-prod-titlerow { flex-direction:row; align-items:baseline; justify-content:space-between; gap:10px; }
  .hm-prod-price { margin:0; flex:none; }
  .hm-prod-price .now { font-size:14px; }
  .hm-prod-price .pfx { font-size:12px; }
  /* Buttons full-width, untereinander */
  .hm-prod-actions { flex-direction:column; gap:8px; }
  .hm-prod-btn { width:100%; flex:0 0 auto; height:44px; font-size:14px; }
  .hm-cat::after { display:none; }
  .hm-cat span { opacity:.72; }
  .hm-cats-dots { display:flex; justify-content:center; gap:7px; margin-top:14px; }
  .hm-cats-dots span { width:7px; height:7px; border-radius:50%; background:rgba(19,15,29,.2); transition:background .2s, width .2s; }
  .hm-cats-dots span.on { width:20px; border-radius:4px; background:var(--ink); }
  .hm-cats-more { display:block; margin-top:16px; }
  .hm-cats-more .hm-btn-outline { width:100%; }
  /* Mobile: Karten hochkant, kompakt */
  .hm-hero .hm-stack { width:150px; }
  /* Buttons full width */
  .hm-hero-cluster { width:100%; align-items:stretch; }
  .hm-hero-cta { flex-direction:column; align-items:stretch; width:100%; }
  .hm-hero-cta .hm-btn { width:100%; }
  /* FAQ ohne graue Kachel auf Mobile */
  .hm-faq-layout { background:none; padding:0; border-radius:0; }
  /* FAQ-Button auf Mobile weiß (kein Schwarz) */
  .hm-btn.ghost { background:#fff; color:var(--ink); border-color:var(--line); }
  .hm-btn.ghost:hover { background:#fff; border-color:var(--ink); }
  /* Logos in der Glassbox durchlaufen (links→rechts sichtbar, Track läuft rechts→links) */
  .hm-hero-logos { overflow:hidden;
    -webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
    mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
  .hm-hlogos-track { width:max-content; animation:hm-logoscroll 20s linear infinite; }
  .hm-hlogos-set { flex:none; justify-content:flex-start; gap:32px; padding-right:32px; }
  .hm-hlogos-dup { display:flex; }
  @keyframes hm-logoscroll { from { transform:translateX(0); } to { transform:translateX(-50%); } }
  /* Label: Kurzform statt „…und Marktführern" */
  .hm-hero-proof-label .lbl-full { display:none; }
  .hm-hero-proof-label .lbl-short { display:inline; }
  /* Mobile-Subline zeigen, Desktop-Subline aus */
  .hm-lead-desktop { display:none; }
  .hm-lead-mobile { display:block; }
  .hm-hero-dark.is-dark .hm-stack .hm-card { box-shadow:0 10px 22px rgba(0,0,0,.32); }
  .hm-hero { grid-template-columns:1fr; gap:36px; }
  .hm-stage { min-height:280px; }
  .hm-cats { grid-template-columns:1fr; }
  .hm-cat { min-height:170px; }
  .hm-best { grid-template-columns:1fr; }
  .hm-pro { grid-template-columns:1fr; padding:36px 26px; }
}
@media (min-width:561px) and (max-width:900px) {
  .hm-cats { grid-template-columns:1fr 1fr; }
  .hm-best { grid-template-columns:1fr 1fr; }
}

/* Material-Visuals (aus product.css übernommen) */
.hm-g-pvc { background:linear-gradient(135deg, rgba(255,255,255,.16), transparent 42%), linear-gradient(160deg,#3a74bb,#215691 65%,#173f6e); }
.hm-g-holz { background:
  repeating-linear-gradient(91deg, rgba(0,0,0,.055) 0 2px, transparent 2px 8px),
  repeating-linear-gradient(89deg, rgba(255,255,255,.045) 0 1px, transparent 1px 6px),
  linear-gradient(150deg, rgba(255,240,220,.14), transparent 45%),
  linear-gradient(120deg,#a9743f,#8a5a2d 58%,#6d4322); }
.hm-g-metall { background:
  repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, transparent 1px 3px),
  linear-gradient(135deg, rgba(255,255,255,.14), transparent 38%),
  linear-gradient(140deg,#4c4956,#2b2833 55%,#15121c); }

/* Echte Holz-Texturen (Karten) */
.hm-tex { background-size:cover !important; background-position:center; }
/* Fertige Karten-Designs (Logo + NFC bereits im Bild, hochkant) */
.hm-tex-bambus   { background-image:url(/img/cards/bamboo.jpg); }
.hm-tex-kirsche  { background-image:url(/img/cards/black.jpg); }
.hm-tex-mahagoni { background-image:url(/img/cards/walnut-name.jpg); }
/* Logo/NFC-Overlay im Hero ausblenden – steckt schon im Karten-Bild */
.hm-hero .hm-card .hm-card-in, .hm-hero .hm-card .hm-card-nfc { display:none; }

/* PRO-CTA: nur Rahmen, transparent, mit PRO-Badge */
.hm-btn.pro { background:transparent; border-color:rgba(19,15,29,.2); color:var(--ink); gap:10px; }
.hm-btn.pro:hover { border-color:var(--ink); transform:translateY(-2px); }
.pro-lk { display:inline-flex; align-items:center; gap:7px; }
.pro-lk-logo { height:15px; width:auto; display:block; filter:brightness(0) invert(1); }
.hm-btn.pro .pro-lk .g-pro { height:19px; font-size:11px; }
.hm-btn.pro .glass.g-pro { height:22px; }   /* Badge-Style global in header.css */

/* ══ Hero-Variante DUNKEL (?hero=dark) ══ */
.hm-hero-dark.is-dark { background:linear-gradient(160deg,#0c0a14 0%,#100e1c 55%,#0a0812 100%); color:#f4f4f5; }
.hm-hero-dark.is-dark .hm-orb.o1 { background:#235DA0; opacity:.5; }
.hm-hero-dark.is-dark .hm-orb.o2 { background:#3f83d6; opacity:.35; }
.hm-hero-dark.is-dark .hm-orb.o3 { background:#12325f; opacity:.6; }
.hm-hero-dark.is-dark .hm-hero-eyebrow { background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.11); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  color:#c3d8ef; }
.hm-hero-dark.is-dark .hm-hero h1 { color:#f5f6f8; }
.hm-hero-dark.is-dark .hm-hero-lead { color:rgba(255,255,255,.7); }
.hm-hero-dark.is-dark .hm-trust { color:rgba(255,255,255,.6); }
.hm-hero-dark.is-dark .hm-trust svg { color:#7fb2ea; }
.hm-hero-dark.is-dark .hm-trust .t-green svg { color:#3fcf8e; }
/* Riss: helle Buchstaben, weiße Papierkante ausblenden (auf Dunkel unnötig) */
.hm-hero-dark.is-dark .tear .tw-topw, .hm-hero-dark.is-dark .tear .tw-botw { opacity:0 !important; }
/* Buttons an Dunkel anpassen */
.hm-hero-dark.is-dark .hm-btn.primary { background:#fff; color:var(--ink); }
.hm-hero-dark.is-dark .hm-btn.primary:hover { background:#eee; }
.hm-hero-dark.is-dark .hm-btn.pro { border-color:rgba(255,255,255,.6); color:#fff; }
.hm-hero-dark.is-dark .hm-btn.pro:hover { border-color:#fff; }
/* Bühne größer für epischere Karten-Bewegung + echte 3D-Tiefe */
.hm-hero-dark.is-dark .hm-stage { min-height:480px; }
.hm-hero-dark.is-dark .hm-stack { transform-style:preserve-3d; }
.hm-hero-dark.is-dark .hm-card { box-shadow:0 20px 44px rgba(0,0,0,.4); }

/* ══ Desktop-Anpassungen (Startseite) ══ */
@media (min-width:901px){
  /* Reihenfolge: erst Bestseller, dann Kategorien; EIN Abstand zwischen Sektionen (kein Doppel) */
  #hmRoot > .hm-wrap { display:flex; flex-direction:column; row-gap:90px; padding-top:90px; }
  .hm-sec { padding-top:0; padding-bottom:0; }   /* Abstand kommt vom row-gap */
  .hm-sec-gray { order:1; }        /* Bestseller */
  #kategorien   { order:2; }
  .hm-pro-sec   { order:3; }
  #faq          { order:4; }
  .hm-foot-space{ order:5; }
  /* Kategorien: grauer Vollbreiten-Hintergrund (wie Hero), quadratische Kacheln – Grau-Fläche braucht Innen-Padding */
  #kategorien { background:#f2f2f4; border-radius:0; width:100vw; margin-left:calc(50% - 50vw);
    padding:56px calc(50vw - 616px); }
  #kategorien .hm-cat { aspect-ratio:1/1; min-height:0; }

  /* FAQ: 66/33 – Fragen linksbündig, rechts Konfigurator-Werbung */
  .hm-faq-layout { display:grid; grid-template-columns:2fr 1fr; gap:40px; align-items:stretch;
    padding:44px; border-radius:26px; }
  #faq .hm-sec-head { text-align:left; margin-bottom:24px; }
  #faq .hm-faq { max-width:none; margin:0; }
  #faq .hm-faq-more { text-align:left; }
  .hm-faq-promo { display:block; }
}

/* ── Produkte, die noch nicht bestellbar sind ──────────────
   Der Server weist eine solche Bestellung ohnehin ab - aber erst am
   Ende des Checkouts. Wer bis dahin Adresse und Zahlungsart eingegeben
   hat, ist zu Recht verärgert. Deshalb sieht man es hier schon. */
.hm-prod.is-bald .hm-prod-imglink { position:relative; }
.hm-prod.is-bald .hm-prod-img { filter:grayscale(.85); opacity:.62; }
.hm-prod-bald {
  position:absolute; left:14px; top:14px; z-index:2;
  padding:5px 11px; border-radius:99px;
  background:rgba(20,20,24,.82); color:#fff;
  font-size:11.5px; font-weight:600; letter-spacing:.02em;
  backdrop-filter:blur(6px);
}
/* Beide Knöpfe treten zurück. "Ansehen" bleibt anklickbar - sonst käme
   man nicht mehr auf die Detailseite. */
.hm-prod.is-bald .hm-prod-btn { color:#8a8a92; border-color:#e4e4e8; }
.hm-prod.is-bald .hm-prod-btn.ghost:hover { color:var(--ink,#130F1D); border-color:#c9c9d1; }
.hm-prod-btn.is-aus {
  background:#f0f0f2; color:#9a9aa2; border-color:#e4e4e8;
  cursor:not-allowed; pointer-events:none;
}
.hm-prod.is-bald .hm-prod-price { color:#8a8a92; }