/* ==========================================================================
   KENBES.de — moderne Stilschicht
   --------------------------------------------------------------------------
   Additiv auf die praktisch-Startseite (nach start-praktisch.css + aufwertung.css).
   Nur auf der Startseite eingebunden. Schwarz/Gold bleibt zwingend; nutzt die
   vorhandenen Tokens und die selbst gehosteten Schriften (kein Google).
   Fasst den Konfigurator NICHT an — nur Rahmen, Kopf, Headline, Karten,
   Knoepfe, Reveals, Ambient. CSP-konform (kein Inline, alles hier).
   ========================================================================== */

/* --- Ambient: fester Gold-Schimmer + feines Raster hinter allem ---------- */
body.praktisch{
  background:
    radial-gradient(55% 45% at 80% 5%, rgba(232,192,68,.10), transparent 60%),
    radial-gradient(42% 40% at 5% 22%, rgba(232,192,68,.05), transparent 60%),
    linear-gradient(rgba(255,255,255,.016) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.016) 1px, transparent 1px),
    var(--bg);
  background-size: auto, auto, 58px 58px, 58px 58px, auto;
  background-attachment: fixed;
}

/* --- Scroll-Fortschrittsbalken ------------------------------------------ */
.modern-prog{position:fixed;top:0;left:0;height:2px;width:100%;z-index:60;
  transform-origin:left center;transform:scaleX(0);
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  box-shadow:0 0 12px rgba(232,192,68,.6);will-change:transform;
  animation:mProg linear both;animation-timeline:scroll(root)}
@keyframes mProg{to{transform:scaleX(1)}}

/* --- Glas-Kopf (blurrt beim Scrollen) ----------------------------------- */
.praktisch .site-head{transition:background .3s ease, border-color .3s ease, backdrop-filter .3s ease}
.praktisch .site-head.scrolled{background:rgba(13,13,13,.72);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid var(--line)}

/* --- Nav-Unterstrich beim Hover (nur Textlinks, nicht Knoepfe) ----------- */
.praktisch .nav > a:not(.btn){position:relative}
.praktisch .nav > a:not(.btn)::after{content:"";position:absolute;left:0;bottom:-3px;width:0;height:2px;background:var(--accent);transition:width .25s cubic-bezier(.22,1,.36,1)}
.praktisch .nav > a:not(.btn):hover::after{width:100%}

/* --- Gold-Verlaufs-Headline (der bereits goldene span) ------------------- */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .praktisch .start-konfigurator h1 span{
    background:linear-gradient(118deg,var(--accent),#ffe9a6,var(--accent));
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--accent)}
}

/* --- Leistungskarten: Lift + Gold-Glow + Icon-Kick ---------------------- */
.praktisch .leistung{position:relative;overflow:hidden;transition:transform .35s cubic-bezier(.22,1,.36,1),border-color .3s ease,box-shadow .35s ease,background .3s ease}
.praktisch .leistung::before{content:"";position:absolute;inset:0 0 auto;height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:0;transition:opacity .3s}
.praktisch .leistung::after{content:"";position:absolute;width:240px;height:240px;right:-80px;top:-80px;background:radial-gradient(circle,rgba(232,192,68,.13),transparent 70%);opacity:0;transition:opacity .4s;pointer-events:none}
.praktisch .leistung:hover{transform:translateY(-6px);border-color:var(--line-stark);box-shadow:0 30px 60px -32px #000}
.praktisch .leistung:hover::before,.praktisch .leistung:hover::after{opacity:1}
.praktisch .leistung:hover a{color:var(--accent)}

/* --- Gold-Knopf: Glanz-Durchlauf beim Hover ----------------------------- */
.praktisch .btn--primary{position:relative;overflow:hidden;transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s ease,background .2s ease}
.praktisch .btn--primary:hover{transform:translateY(-2px);box-shadow:0 14px 36px -12px rgba(232,192,68,.6)}
.praktisch .btn--primary::after{content:"";position:absolute;top:0;left:-130%;width:60%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-18deg);transition:left .6s cubic-bezier(.22,1,.36,1)}
.praktisch .btn--primary:hover::after{left:150%}

/* --- Dyno-Kurve: kraeftigerer Gold-Glow --------------------------------- */
.praktisch .aw-c-nach{filter:drop-shadow(0 0 8px rgba(232,192,68,.5))}

/* --- Markenkacheln: leichter Lift --------------------------------------- */
.praktisch .aw-marken__grid a{transition:color .2s ease,border-color .2s ease,background .2s ease,transform .25s cubic-bezier(.22,1,.36,1)}
.praktisch .aw-marken__grid a:hover{transform:translateY(-3px)}

/* --- Kontakt: sanfter Gold-Schein oben ---------------------------------- */
.praktisch #kontakt{position:relative;isolation:isolate}
.praktisch #kontakt::before{content:"";position:absolute;inset:0 0 auto;height:320px;z-index:-1;
  background:radial-gradient(60% 100% at 50% 0,rgba(232,192,68,.07),transparent 70%);pointer-events:none}

/* --- Scroll-Reveal: ruht sichtbar; .in spielt nur die Animation ---------- */
@media (prefers-reduced-motion:no-preference){
  .js-modern .m-rv.in{animation:mRv .7s cubic-bezier(.22,1,.36,1) both}
  .js-modern .m-rv.m-d1.in{animation-delay:.08s}
  .js-modern .m-rv.m-d2.in{animation-delay:.16s}
  .js-modern .m-rv.m-d3.in{animation-delay:.24s}
}
@keyframes mRv{from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .modern-prog{display:none}
}

/* ==========================================================================
   Kino-Hero "KENBES Modern" (24.10.2026)
   --------------------------------------------------------------------------
   Grosser Text-Hero mit Dyno-Panel ueber dem Konfigurator. Additiv, der
   Konfigurator bleibt unangetastet darunter. Schwarz/Gold, eigene Schriften,
   CSP-sicher (Dyno zeichnet per CSS-Animation, keine JS-Stile).
   ========================================================================== */
.praktisch .mh{ padding:clamp(40px,6vw,84px) 0 clamp(36px,4vw,60px); position:relative; }
.praktisch .mh__grid{ display:grid; grid-template-columns:1.06fr .94fr; gap:clamp(28px,5vw,60px); align-items:center; }
.praktisch .mh__h1{ font-family:var(--display); font-weight:800; font-size:clamp(46px,8vw,102px); line-height:.9; letter-spacing:-1px; margin:0; }
.praktisch .mh__h1 span{ display:block; background:linear-gradient(118deg,var(--accent),#ffe9a6,var(--accent)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:var(--accent); }
.praktisch .mh__lead{ color:var(--fg); font-size:clamp(17px,2.2vw,21px); max-width:40ch; margin:22px 0 0; }
.praktisch .mh__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:28px; }
.praktisch .mh__meta{ display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:28px; font-size:13.5px; color:var(--fg-3); }
.praktisch .mh__meta b{ color:var(--fg); font-family:var(--display); font-weight:700; font-size:17px; }
.praktisch .mh__meta span{ display:inline-flex; align-items:center; gap:8px; }
.praktisch .mh__meta i{ width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px var(--accent); }
.praktisch .mh__stage{ position:relative; }
.praktisch .mh__panel{ position:relative; background:linear-gradient(165deg,var(--bg-3),var(--bg)); border:1px solid var(--line); border-top:2px solid var(--accent); border-radius:12px; padding:22px; box-shadow:0 40px 90px -42px #000; }
.praktisch .mh__panel svg{ display:block; width:100%; height:auto; }
.praktisch .mh__cap{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:10.5px; letter-spacing:1.4px; text-transform:uppercase; color:var(--fg-3); margin-bottom:8px; }
.praktisch .mh__cap b{ color:var(--accent); opacity:.6; font-weight:400; }
.praktisch .mh-grid{ stroke:var(--line); stroke-width:1; }
.praktisch .mh-ax{ fill:var(--fg-3); font-family:var(--mono); font-size:10px; }
.praktisch .mh-vor{ stroke:#5a616d; stroke-width:2.4; fill:none; }
.praktisch .mh-nach{ stroke:var(--accent); stroke-width:3.4; fill:none; filter:drop-shadow(0 0 7px rgba(232,192,68,.5)); }
.praktisch .mh-fill{ fill:url(#mhg); opacity:.15; }
.praktisch .mh-peak{ fill:var(--accent); font-family:var(--display); font-weight:800; font-size:15px; }
.praktisch .mh__legend{ display:flex; gap:18px; margin-top:11px; font-size:12px; color:var(--fg-2); }
.praktisch .mh__legend i{ display:inline-block; width:20px; height:3px; border-radius:2px; vertical-align:middle; margin-right:7px; }
.praktisch .mh__chip{ position:absolute; display:flex; align-items:center; gap:10px; background:var(--glas); border:1px solid var(--line-stark); border-radius:12px; padding:11px 14px; box-shadow:0 22px 44px -20px #000; }
.praktisch .mh__chip b{ font-family:var(--display); font-weight:800; font-size:21px; color:var(--accent); line-height:1; }
.praktisch .mh__chip span{ font-size:11px; color:var(--fg-2); line-height:1.15; }
.praktisch .mh__chip--1{ top:-20px; right:-12px; }
.praktisch .mh__chip--2{ bottom:-18px; left:-14px; }
.praktisch .mh-marq{ border-block:1px solid var(--line); background:var(--bg-2); overflow:hidden; padding:16px 0; }
.praktisch .mh-marq__row{ display:flex; width:max-content; gap:42px; font-family:var(--display); font-weight:600; font-size:16px; letter-spacing:.4px; color:var(--fg-3); white-space:nowrap; }
.praktisch .mh-marq__row span{ display:inline-flex; gap:42px; }
.praktisch .mh-marq__row b{ color:var(--accent); }
/* Konfigurator-Ueberschrift wird unter dem Hero zur Abschnitts-Ueberschrift */
.praktisch .start-konfigurator h1{ font-size:clamp(1.9rem,3.6vw,2.7rem); }
@media (prefers-reduced-motion:no-preference){
  .praktisch .mh-draw{ stroke-dasharray:760; stroke-dashoffset:760; animation:mhDraw 1.6s cubic-bezier(.22,1,.36,1) .35s forwards; }
  .praktisch .mh__chip--1{ animation:mhF1 7s ease-in-out infinite; }
  .praktisch .mh__chip--2{ animation:mhF2 8s ease-in-out infinite; }
  .praktisch .mh-marq__row{ animation:mhMarq 32s linear infinite; }
}
@keyframes mhDraw{ to{ stroke-dashoffset:0 } }
@keyframes mhF1{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-11px)} }
@keyframes mhF2{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(9px)} }
@keyframes mhMarq{ to{ transform:translateX(-50%) } }
@media(max-width:900px){
  .praktisch .mh__grid{ grid-template-columns:1fr; }
  .praktisch .mh__stage{ margin-top:8px; }
  .praktisch .mh__chip--1{ right:6px; } .praktisch .mh__chip--2{ left:6px; }
}
.praktisch .eyebrow .z{ color:var(--accent); font-weight:700; }
.praktisch .mh .eyebrow{ font-family:var(--mono); letter-spacing:2px; text-transform:uppercase; color:var(--fg-3); display:inline-flex; gap:10px; align-items:center; }
.praktisch .mh-key-vor{ background:#5a616d; }
.praktisch .mh-key-nach{ background:var(--accent); }
/* Marken-Zeile ueber der Hero-Headline: "KENBES" im Logo-Schnitt */
.praktisch .mh__h1 .mh__marke{ display:block; font-family:var(--marke); font-style:italic; font-weight:800; color:var(--accent); -webkit-text-fill-color:var(--accent); font-size:.4em; letter-spacing:1px; line-height:1; margin-bottom:10px; }
/* Variante A: Marken-Zeile mit Goldlinie ueber der Tagline */
.praktisch .mh__h1 span{ display:inline; }
.praktisch .mh__brand{ display:flex; align-items:center; gap:16px; margin-bottom:16px; }
.praktisch .mh__brand b{ font-family:var(--marke); font-style:italic; font-weight:800; color:var(--accent); font-size:clamp(19px,2.6vw,26px); letter-spacing:1px; line-height:1; }
.praktisch .mh__brand .rule{ flex:1; height:1px; background:linear-gradient(90deg,var(--accent),transparent); }
/* Variante B: horizontales Lockup — grosses KENBES | Gold-Strich | Tagline */
.praktisch .mh-hb{ display:flex; align-items:center; gap:clamp(18px,3vw,30px); margin:0; }
.praktisch .mh-hb__k{ font-family:var(--marke); font-style:italic; font-weight:800; color:var(--accent); font-size:clamp(46px,10vw,98px); line-height:.86; letter-spacing:1px; }
.praktisch .mh-hb__bar{ width:3px; align-self:stretch; min-height:74px; background:linear-gradient(var(--accent),transparent); border-radius:2px; flex:0 0 auto; }
.praktisch .mh-hb__t{ font-family:var(--display); font-weight:700; font-size:clamp(26px,4.6vw,46px); line-height:1.02; color:var(--fg); }
@media(max-width:620px){
  .praktisch .mh-hb{ flex-direction:column; align-items:flex-start; gap:10px; }
  .praktisch .mh-hb__bar{ display:block; width:64px; height:3px; min-height:0; align-self:flex-start; background:linear-gradient(90deg,var(--accent),transparent); }
  .praktisch .mh-hb__k{ font-size:clamp(42px,15vw,72px); }
  .praktisch .mh-hb__t{ font-size:clamp(26px,7vw,38px); }
}

/* Offenes Mobilmenue: die Kopfzeile darf keinen Weichzeichner tragen.
   backdrop-filter macht sie zum Bezugsrahmen fuer das position:fixed-Menue
   darin - das Menue war dann nur kopfzeilenhoch (gemessen 100px statt 664px
   auf dem iPhone), sobald .scrolled gesetzt war. Die Gegenregel in style.css
   (body.menue-offen .site-head) verliert gegen .praktisch .site-head.scrolled
   an Spezifitaet; diese hier gewinnt. Ohne Uebergang, sonst blendet der
   Filter noch .3s nach und das Menue springt erst danach auf volle Hoehe. */
@media (max-width:1000px){
  body.praktisch.menue-offen .site-head,
  body.praktisch.menue-offen .site-head.scrolled{
    backdrop-filter:none; -webkit-backdrop-filter:none;
    background:transparent; border-bottom-color:transparent; transition:none;
  }
}