/* ============================================================
   CORE SERVICES
   Material: echtes Liquid Glass (SVG-Displacement-Refraktion)
   Hintergründe: Beams (Hero · Ablauf, gedämpft) · FlowField (CTA)
   ============================================================ */

:root{
  --void:#04070E; --deep:#070C18;
  --line:rgba(126,178,224,.13);
  --line-grey:rgba(214,222,232,.2);

  --cyan:#2EA8F0; --cyan-hi:#7FD9FF; --cyan-deep:#0A5D9E;
  --blue-dk:#123A73;
  --amber:#FFB454; --good:#3FD6A0;

  --ink:#E7F0FA; --ink-soft:#A9BDD4; --ink-mute:#6C819B;

  --grey-fill:radial-gradient(88.26% 88.26% at 50% 50%,
              rgba(208,208,208,.2) 0%, rgba(185,185,185,.08) 100%);
  --grey-soft:radial-gradient(88% 88% at 50% 0%,
              rgba(208,208,208,.1) 0%, rgba(185,185,185,.03) 100%);
  --strip:radial-gradient(32.39% 3394.32% at 50% 50%,
              rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 100%);

  --display:'Archivo',system-ui,sans-serif;
  --body:'Manrope',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;

  --gut:clamp(16px,4.6vw,72px);
  --max:1280px;
  --navh:clamp(58px,6.6vw,70px);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  /* Sagt dem Browser, dass diese Seite dunkel ist. Damit zeichnet er
     alles, was WIR nicht stylen können, von sich aus passend: die
     aufklappende Liste eines <select>, Scrollbalken, das Autofill-Menü,
     die Datumsauswahl. Ohne das kommen diese Teile vom Betriebssystem
     hellgrau zurück — mitten in einem schwarzen Layout. */
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
/* Viele Komponenten setzen eigene display-Werte (.btn, .form, ...), die
   sonst das hidden-Attribut überstimmen würden (Autor- schlägt User-Agent-
   Regel bei gleicher Spezifität, unabhängig von der Deklarationsreihenfolge).
   hidden soll aber IMMER zuverlässig ausblenden. */
[hidden]{display:none !important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;
  scroll-padding-top:calc(var(--navh) + 40px);
  overflow-x:hidden;width:100%}
body{margin:0;background:var(--void);color:var(--ink);
  font-family:var(--body);font-weight:350;
  font-size:clamp(14.5px,.95vw,17px);line-height:1.65;
  overflow-x:hidden;width:100%;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ol,ul{margin:0;padding:0;list-style:none}

h1,h2,h3{font-family:var(--display);font-weight:800;font-stretch:118%;
  text-transform:uppercase;letter-spacing:-.015em;line-height:.96;margin:0}
h1{font-size:clamp(2.05rem,5.4vw,4.05rem);line-height:.98}
h2{font-size:clamp(1.75rem,4.2vw,3.4rem)}
h3{font-size:clamp(1rem,1.5vw,1.3rem);font-stretch:106%;letter-spacing:.005em;line-height:1.12}
p{margin:0}

.eyebrow{font-family:var(--mono);font-size:.66rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--cyan-hi);display:inline-flex;align-items:center;gap:.7em}
.eyebrow::before{content:'';width:24px;height:1px;
  background:linear-gradient(90deg,transparent,var(--cyan))}
.lead{color:var(--ink-soft);font-size:clamp(.95rem,1.05vw,1.06rem);max-width:56ch}
.mono{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em}

/* ============================================================
   MATERIAL — Glas
   .lg  = echte Refraktion (JS hängt backdrop-filter an)
   .glass = leichtes Glas ohne Displacement (für große Flächen)
   ============================================================ */
.lg,.glass{position:relative;isolation:isolate;
  background:linear-gradient(180deg, rgba(14,18,28,.2), rgba(10,14,22,.34));
  box-shadow:
    0 24px 60px rgba(0,0,0,.45),
    inset 0 1px 1px rgba(255,255,255,.5),
    inset 0 -8px 20px rgba(255,255,255,.06),
    inset 0 0 0 1px rgba(255,255,255,.13);
}
.glass{background:var(--grey-soft),
  linear-gradient(158deg, rgba(24,36,58,.5), rgba(8,14,26,.45));
  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  border-radius:18px;overflow:hidden}
.lg{border-radius:24px}
/* Fallback, bis JS greift bzw. wenn die echte SVG-Refraktion nicht
   verfügbar ist (Klasse .no-refraction auf <html>, siehe liquid-glass.js) */
.lg{backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%)}
/* Ohne echte Refraktion trägt nichts mehr die "Dicke" des Glases — dafür
   kräftiger tönen, angeglichen an die übrigen Glas-Flächen der Seite
   (.glass, .account-drop.lg), die ohnehin nie echte Refraktion nutzen. */
.no-refraction .lg{
  background:linear-gradient(158deg, rgba(26,38,60,.58), rgba(9,14,26,.62));
}

/* Spekular-Sichel oben — das, was Glas dick aussehen lässt */
.lg::before,.glass::before{content:'';position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;z-index:3;
  background:
    linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 38%),
    radial-gradient(120% 60% at 50% -14%, rgba(255,255,255,.3), transparent 58%);
  mix-blend-mode:screen;opacity:.55}
/* Glanzpunkt folgt der Maus */
.lg::after,.glass::after{content:'';position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;z-index:3;
  background:radial-gradient(280px circle at var(--mx,50%) var(--my,0%),
    rgba(220,238,255,.14), transparent 60%);
  opacity:0;transition:opacity .45s var(--ease)}
.lg:hover::after,.glass:hover::after{opacity:1}
.lg > *,.glass > *{position:relative;z-index:2}

.hairline{position:absolute;top:0;left:0;right:0;height:1px;z-index:4;pointer-events:none;
  background:linear-gradient(90deg,transparent 6%,
    color-mix(in srgb, var(--accent,var(--cyan)) 50%, transparent) 26%,
    color-mix(in srgb, var(--accent,var(--cyan-hi)) 92%, #fff) 50%,
    color-mix(in srgb, var(--accent,var(--cyan)) 50%, transparent) 74%,transparent 94%);
  opacity:.5;transition:opacity .5s var(--ease)}
.hairline::after{content:'';position:absolute;inset:-9px 24% -9px 24%;
  background:linear-gradient(90deg,transparent,
    color-mix(in srgb, var(--accent,var(--cyan)) 40%, transparent),transparent);
  filter:blur(9px);opacity:.8}
.glass:hover .hairline{opacity:1}

.dots{position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(196,210,226,.2) 1px, transparent 1px);
  background-size:15px 15px;
  mask-image:linear-gradient(200deg,#000 0%,transparent 46%);
  -webkit-mask-image:linear-gradient(200deg,#000 0%,transparent 46%);opacity:.45}
.lightbar{position:absolute;left:8%;right:8%;height:38px;border-radius:2px;
  background:var(--strip);z-index:0;pointer-events:none}
.brackets::before{}
.bracket-tl,.bracket-br{position:absolute;width:15px;height:15px;z-index:5;
  pointer-events:none;border-color:var(--cyan);opacity:.45}
.bracket-tl{top:14px;left:14px;border-top:1px solid;border-left:1px solid}
.bracket-br{bottom:14px;right:14px;border-bottom:1px solid;border-right:1px solid}

/* ---------- Atmosphäre ---------- */
.atmos{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.mesh{position:absolute;inset:0;background:
  radial-gradient(120% 80% at 50% -10%, rgba(46,168,240,.1), transparent 60%),
  linear-gradient(180deg, var(--void) 0%, var(--deep) 45%, var(--void) 100%)}
.grid-bg{position:absolute;inset:-2px;
  background-image:
    linear-gradient(to right, rgba(126,178,224,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(126,178,224,.05) 1px, transparent 1px);
  background-size:clamp(44px,6vw,74px) clamp(44px,6vw,74px);
  mask-image:radial-gradient(120% 70% at 50% 0%, #000 20%, transparent 75%);
  -webkit-mask-image:radial-gradient(120% 70% at 50% 0%, #000 20%, transparent 75%)}
.grain{position:fixed;inset:-60px;z-index:98;pointer-events:none;opacity:.1;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
  animation:grainShift 6s steps(6) infinite}
@keyframes grainShift{0%{transform:translate(0,0)}20%{transform:translate(-12px,8px)}
  40%{transform:translate(9px,-14px)}60%{transform:translate(-8px,-6px)}
  80%{transform:translate(14px,10px)}100%{transform:translate(0,0)}}

/* ---------- Ambient: weiche Lichtkreise am Rand ----------
   Eine fixe Ebene über der Atmosphäre (z-index 0) und unter dem Inhalt
   (z-index 2). Sie begleitet das Scrollen, statt mit der Seite
   wegzulaufen — das ist der Punkt: die Ränder sollen dauerhaft leben.

   Weil die Glasflächen backdrop-filter nutzen, ziehen sie diese Ebene
   beim Darüberscrollen mit durch die Brechung. Deshalb sind die Werte
   bewusst niedrig gehalten: was hier zu kräftig ist, wird im Glas doppelt
   so laut. Gesetzt werden Größe/Deckkraft/Unschärfe je Kreis inline von
   site.js — hier stehen nur Verhalten und Bewegung.

   Bewusst nur Licht, keine erkennbaren Formen: Markenzeichen am Rand
   haben mit dem Inhalt konkurriert statt ihn zu tragen.

   Longhand statt animation-Kurzschreibweise: mit zwei var()-Zeitwerten in
   einer Kurzschreibweise ist die Zuordnung Dauer/Verzögerung schwer zu
   lesen und leicht kaputtzumachen. Der negative Delay startet jeden
   Kreis mitten im Zyklus, sonst atmen alle im Gleichtakt. */
.ambient{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.amb-orb{position:absolute;width:var(--s);height:var(--s);border-radius:50%;
  background:radial-gradient(circle at 50% 50%, var(--c), transparent 70%);
  filter:blur(var(--b));opacity:var(--o);
  animation-name:ambPulse;animation-duration:var(--d);
  animation-timing-function:ease-in-out;animation-iteration-count:infinite;
  animation-direction:alternate;animation-delay:var(--delay)}
@keyframes ambPulse{
  from{transform:scale(1) translate3d(0,0,0);opacity:var(--o)}
  to{transform:scale(1.3) translate3d(var(--dx),var(--dy),0);opacity:calc(var(--o) * 1.85)}}

/* Beams — Hero (voll) und gedämpfte Wiederholungen an weiteren Stellen der Seite */
.beams-wrap{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  mask-image:linear-gradient(180deg,#000 0%,#000 62%,transparent 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 62%,transparent 100%)}
.beams-wrap canvas{position:absolute;inset:0;width:100%;height:100%;filter:blur(14px)}
/* Gedämpfte Wiederholung mitten auf der Seite: blendet oben UND unten aus */
.beams-wrap--ambient{
  mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 78%,transparent 100%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 78%,transparent 100%)}

.cta-sec{position:relative}

.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut);position:relative;z-index:2}
section{position:relative;z-index:2}
.sec-pad{padding-block:clamp(62px,10vw,148px)}

/* ============================================================
   HEADER — schwebendes Glas-Panel
   ============================================================ */
.nav{position:fixed;top:clamp(10px,1.6vw,20px);left:0;right:0;z-index:60;
  display:flex;justify-content:center;pointer-events:none;
  transition:top .45s var(--ease)}
.nav.stuck{top:clamp(8px,1.1vw,13px)}
.bar{pointer-events:auto;position:relative;
  width:min(1180px, calc(100% - clamp(14px,4vw,52px)));
  border-radius:clamp(18px,2vw,26px);
  transition:width .5s var(--ease), box-shadow .5s var(--ease)}
.nav.stuck .bar{width:min(1030px, calc(100% - clamp(14px,4vw,52px)))}
.bar-inner{--bar-gap:clamp(10px,1.8vw,26px);
  position:relative;z-index:4;display:flex;align-items:center;
  gap:var(--bar-gap);height:var(--navh);padding-inline:clamp(12px,1.8vw,20px)}
.bar .lightbar{top:0;height:30px;left:12%;right:12%;display:none}

.brand{display:flex;flex-direction:column;line-height:1;margin-right:auto}
.brand b{font-family:var(--display);font-weight:900;font-stretch:112%;
  font-size:clamp(.9rem,1.1vw,1rem);letter-spacing:.01em;text-transform:uppercase}
.brand b span{color:var(--cyan)}
.brand i{font-style:normal;font-family:var(--mono);font-size:.5rem;
  letter-spacing:.26em;color:var(--ink-mute);margin-top:5px;white-space:nowrap}

/* ---------- Buttons ----------
   Grundzustand ist bewusst STATISCH. Der Schweif-Glanz und das Anheben beim
   Hover werden weiter unten nur für echte Desktop-Sessions zugeschaltet
   (--desktop-fx, siehe "Bewegungs-Feinschliff"). Touch-Geräte inkl. iPad
   melden hover:none und bekommen dadurch nie einen Hover-Zustand, der dort
   ohnehin nur als hängenbleibender "klebriger" Effekt sichtbar wäre. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:13px 22px;border-radius:12px;font-family:var(--mono);
  font-size:.73rem;letter-spacing:.13em;text-transform:uppercase;white-space:nowrap;
  position:relative;overflow:hidden;
  transition:box-shadow .3s var(--ease), background .3s var(--ease)}
.btn-primary{background:linear-gradient(135deg, var(--cyan), var(--cyan-deep));
  color:#02060C;font-weight:500;
  box-shadow:0 10px 30px -12px rgba(46,168,240,.8),
    inset 0 1px 0 rgba(255,255,255,.45)}
.btn-ghost{color:var(--ink);
  background:linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.03));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16), inset 0 1px 0 rgba(255,255,255,.3);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
/* Auf Touch gibt es kein Hover — dort ist das kurze Aufleuchten beim
   Antippen die ehrlichere Rückmeldung. */
.btn:active{box-shadow:0 6px 18px -10px rgba(46,168,240,.8)}
.btn-ghost:active{background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.06))}
.bar .btn{padding:11px 16px}

/* ---------- Konto-Dropdown (Header, jede Seite) ----------
   Der Auslöser selbst ist ein .icon-btn wie der Warenkorb, siehe
   Shop-Abschnitt weiter unten. */
.account{position:relative;flex:0 0 auto}
/* Echtes Liquid Glass wie die Header-Bar (SVG-Refraktion, wird von
   account-menu.js beim ersten Öffnen per LiquidGlass.attach() angehängt) —
   nicht der nachgebaute Blur-Look. Die Deklarationen hier setzen nur
   Geometrie und Tönung; den backdrop-filter schreibt LiquidGlass selbst,
   der .lg-Fallback aus dem Material-Block greift solange bzw. in Browsern
   ohne SVG-Backdrop-Support. */
.account-drop{position:absolute;top:calc(100% + 10px);right:0;min-width:200px;
  padding:8px;border-radius:16px;z-index:5;overflow:hidden;
  animation:dropIn .2s var(--ease-out)}
.account-drop.lg{background:linear-gradient(180deg, rgba(16,24,38,.62), rgba(9,14,24,.7))}
@keyframes dropIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.account-drop-email{font-family:var(--mono);font-size:.6rem;letter-spacing:.03em;
  color:var(--ink-mute);padding:8px 10px 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-drop-link{display:block;width:100%;text-align:left;padding:10px;
  border-radius:9px;font-size:.85rem;color:var(--ink-soft);transition:color .2s,background .2s}
.account-drop-link:hover{color:var(--ink);background:rgba(255,255,255,.08)}

/* ---------- Hero-Kulisse: scripts.png ----------
   Die Montage der Script-Interfaces liegt HINTER dem Resource-Monitor
   (z-index 1 gegen z-index 2 des .wrap) und ragt rechts aus dem Bild.
   Sie soll Tiefe geben, nicht um Aufmerksamkeit konkurrieren — daher
   niedrige Deckkraft, eine Spur Unschärfe und eine radiale Maske, die
   sie nach links und unten in den Hintergrund auflöst.

   Als background-image statt <img>: fehlt die Datei, rendert schlicht
   nichts — kein kaputtes Bildsymbol, kein JS-Fallback nötig. Leg
   scripts.png neben index.html, dann erscheint sie von selbst. */
.hero-shot{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.hero-shot i{position:absolute;top:-4%;right:-16%;width:min(1120px,74%);height:112%;
  display:block;
  background:url("../scripts.png") no-repeat right center/contain;
  /* opacity:.32;filter:blur(.6px) saturate(112%); */
  mask-image:radial-gradient(115% 95% at 100% 32%, #000 34%, transparent 76%);
  -webkit-mask-image:radial-gradient(115% 95% at 100% 32%, #000 34%, transparent 76%);
  animation:shotFloat 19s ease-in-out infinite alternate}
@keyframes shotFloat{from{transform:translate3d(0,0,0)}to{transform:translate3d(-14px,-22px,0)}}
/* Lichtschein dahinter — löst die harte Kante der Montage auf und bindet
   sie an die Blau-Palette der Seite. */
.hero-shot b{position:absolute;top:14%;right:-8%;width:min(760px,52%);aspect-ratio:1;
  display:block;border-radius:50%;
  background:radial-gradient(circle at 50% 50%, rgba(46,168,240,.22), transparent 66%);
  filter:blur(48px);animation:shotGlow 11s ease-in-out infinite alternate}
@keyframes shotGlow{from{opacity:.75;transform:scale(1)}to{opacity:1;transform:scale(1.12)}}

/* ---------- Hero ---------- */
.hero{padding-top:calc(var(--navh) + clamp(56px,10vh,130px));
  padding-bottom:clamp(44px,7vw,100px)}
.hero-grid{display:grid;grid-template-columns:1fr .92fr;gap:clamp(34px,5vw,72px);align-items:center}
.hero h1{margin:20px 0 24px}
.hero h1 .accent{background:linear-gradient(103deg, var(--cyan-hi), var(--cyan) 48%, var(--cyan-deep));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}
/* Kennzahlenreihe unter dem Hero. Feine Trennstriche statt reiner
   Abstände — vier Werte nebeneinander lesen sich sonst als ein Block. */
.trust{display:grid;grid-template-columns:repeat(4,auto);gap:clamp(10px,1.8vw,24px);
  justify-content:start;margin-top:40px;padding-top:24px;border-top:1px solid var(--line)}
.trust div{padding-left:clamp(10px,1.8vw,24px);border-left:1px solid var(--line)}
.trust div:first-child{padding-left:0;border-left:0}
.trust div b{display:flex;align-items:baseline;gap:.05em;
  font-family:var(--display);font-weight:800;font-stretch:112%;
  font-size:clamp(1.25rem,2.1vw,1.62rem);line-height:1}
/* Die Einheit kleiner und in Akzentfarbe: so haben "40+", "<0.05ms" und
   "5,0/5" dasselbe optische Gewicht, statt dass der Zusatz den Wert
   überstrahlt. */
.trust div b em{font-style:normal;color:var(--cyan);font-size:.66em;font-weight:700}
.trust div span{font-family:var(--mono);font-size:.57rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-mute);display:block;margin-top:9px}

/* Monitor */
.monitor{overflow:hidden;transform-style:preserve-3d}
.mon-head{display:flex;align-items:center;gap:12px;padding:13px 16px;
  border-bottom:1px solid rgba(255,255,255,.09)}
.mon-head .dot{width:7px;height:7px;border-radius:50%;background:var(--good);
  box-shadow:0 0 0 0 rgba(63,214,160,.6);animation:pulse 2.4s infinite;flex:0 0 auto}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(63,214,160,0)}100%{box-shadow:0 0 0 0 rgba(63,214,160,0)}}
.mon-head .ttl{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase}
.mon-head .live{margin-left:auto;font-family:var(--mono);font-size:.57rem;letter-spacing:.18em;color:var(--good)}
.mon-body{padding:14px 16px}
.res-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(34px,70px) 42px;
  align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.055)}
.res-row:last-child{border-bottom:0}
.res-row .name{font-family:var(--mono);font-size:.69rem;color:var(--ink-soft);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.res-row .bar{height:3px;border-radius:2px;background:rgba(255,255,255,.14);overflow:hidden}
.res-row .bar i{display:block;height:100%;border-radius:2px;
  background:linear-gradient(90deg,var(--cyan-deep),var(--cyan-hi));transition:width .9s var(--ease)}
.res-row .ms{font-family:var(--mono);font-size:.69rem;text-align:right}
.mon-graph{padding:4px 16px 0}
.mon-graph canvas{width:100%;height:56px;display:block}
.mon-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:11px 16px 14px;border-top:1px solid rgba(255,255,255,.09);
  font-family:var(--mono);font-size:.59rem;letter-spacing:.1em;color:var(--ink-mute)}
.mon-foot b{color:var(--amber);font-weight:400}

.float-chip{position:absolute;padding:10px 15px;border-radius:13px;
  font-family:var(--mono);font-size:.59rem;letter-spacing:.12em;color:var(--ink-soft);
  z-index:6;white-space:nowrap}
.chip-a{top:-18px;right:22px;animation:bob 7s ease-in-out infinite}
.chip-b{bottom:-20px;left:-16px;animation:bob 9s ease-in-out infinite reverse}
@keyframes bob{50%{transform:translateY(-11px)}}

.strip-sec{border-block:1px solid var(--line);padding:14px 0;overflow:hidden;
  background:rgba(6,11,20,.4);position:relative;z-index:2}
.strip-track{display:flex;gap:44px;width:max-content;animation:slide 34s linear infinite}
.strip-track span{font-family:var(--mono);font-size:.65rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-mute);white-space:nowrap;
  display:flex;align-items:center;gap:44px}
.strip-track span::after{content:'';width:4px;height:4px;border-radius:50%;background:var(--cyan);opacity:.5}
@keyframes slide{to{transform:translateX(-50%)}}

.sec-head{max-width:64ch;margin-bottom:clamp(32px,5vw,62px)}
.sec-head h2{margin:16px 0 16px}

/* ---------- Floating Paths: animierter Blau-Akzent HINTER Content ----------
   Portiert aus EINBAUEN!/backgroundpaths.txt (kokonutui, React/Framer Motion) auf
   statisches SVG + CSS. Wie im Original: die Pfade bleiben an ihrer gezeichneten
   Position (kein Scrollen/Wandern über die Seite) und bekommen nur die dauerhafte,
   sanfte Y-Bob-Animation aus der Quelle (dort: y:[0,-15,0], repeat:Infinity je
   Pfad, siehe FloatingPaths -> motion.path). Läuft als Hintergrund-Ebene INNERHALB
   einer Sektion (z.B. hinter den Leistungen-Cards) statt eigenen Platz zu
   beanspruchen — daher absolute/inset:0 mit negativem z-index innerhalb der
   Sektion (die selbst durch position:relative + z-index einen eigenen
   Stacking-Context bildet, siehe section{} weiter oben). */
.path-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1;opacity:.85}
.path-bg svg{width:100%;height:100%;display:block}
.path-bg path{animation:pathBob var(--bd,8s) ease-in-out infinite;animation-delay:var(--pd,0s)}
@keyframes pathBob{50%{transform:translateY(var(--by,-40px))}}

/* ---------- Elegant Shapes: zweiter Eyecatcher (schwebende Glas-Formen) ----------
   Portiert aus EINBAUEN!/shapesHero.txt — statt Tailwind-Divs nutzt es die schon
   vorhandene .glass-Materialsprache der Seite, nur großflächiger und sehr dezent.
   KEIN overflow:hidden — die Shapes sollen an den Rändern frei über die
   Sektionsgrenze hinaus "durch die Website floaten" statt abgeschnitten zu
   werden (der horizontale Bleed wird global schon von body{overflow-x:hidden}
   eingefangen, es entsteht also kein Scrollbalken).
   z-index:-1 aus demselben Grund wie .path-bg: muss zuverlässig HINTER dem
   restlichen (nicht positionierten) Sektionsinhalt liegen, nicht nur zufällig
   durch Quellreihenfolge. */
.shape-field{position:absolute;inset:0;pointer-events:none;z-index:-1}
.eshape{position:absolute;border-radius:28px;
  background:linear-gradient(135deg, color-mix(in srgb, var(--cyan) 16%, transparent), transparent 70%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06), inset 0 1px 0 rgba(255,255,255,.1);
  transform:rotate(var(--r,0deg));
  animation:eshapeBob var(--bob,10s) ease-in-out infinite}
.eshape::after{content:'';position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.08), transparent 70%)}
@keyframes eshapeBob{50%{transform:rotate(var(--r,0deg)) translateY(-16px)}}

.svc{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
.svc-card{padding:26px 24px 28px;transition:transform .45s var(--ease-out)}
.svc-card .num{font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;color:var(--cyan);opacity:.75}
.svc-card h3{margin:14px 0 11px}
.svc-card p{color:var(--ink-soft);font-size:.9rem}
.svc-card .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.tag{font-family:var(--mono);font-size:.57rem;letter-spacing:.09em;padding:4px 9px;
  border-radius:7px;background:rgba(255,255,255,.05);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);color:var(--ink-mute)}

.work{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:14px}
.work--full{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
@media (min-width:900px){.work--full{grid-template-columns:repeat(2,1fr)}}
.work-card{padding:0;--accent:var(--cyan);
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease)}
.work-vis{height:clamp(140px,17vw,168px);position:relative;overflow:hidden;
  background:
    radial-gradient(90% 130% at 50% 118%, color-mix(in srgb, var(--accent) 36%, transparent), transparent 66%),
    var(--grey-soft), linear-gradient(160deg, rgba(24,32,46,.5), rgba(6,11,20,.55));
  border-bottom:1px solid rgba(255,255,255,.08)}
.work-vis::before{content:'';position:absolute;inset:0;
  background-image:
    linear-gradient(to right, rgba(196,210,226,.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(196,210,226,.07) 1px, transparent 1px);
  background-size:26px 26px;
  mask-image:radial-gradient(70% 70% at 50% 100%, #000, transparent 72%);
  -webkit-mask-image:radial-gradient(70% 70% at 50% 100%, #000, transparent 72%)}
.work-vis::after{content:'';position:absolute;inset:0;
  background-image:radial-gradient(color-mix(in srgb, var(--accent) 26%, transparent) 1px, transparent 1px);
  background-size:14px 14px;
  mask-image:linear-gradient(215deg,#000 0%,transparent 42%);
  -webkit-mask-image:linear-gradient(215deg,#000 0%,transparent 42%);opacity:.55}
.work-vis .plate{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-family:var(--display);font-weight:900;font-stretch:120%;text-transform:uppercase;
  font-size:clamp(1.7rem,3.6vw,2.1rem);letter-spacing:-.02em;color:transparent;
  -webkit-text-stroke:1px color-mix(in srgb, var(--accent) 55%, transparent);
  opacity:.5;transition:opacity .5s var(--ease), letter-spacing .6s var(--ease)}
.work-card:hover .plate{opacity:.9;letter-spacing:.03em}
.work-vis .badge,.work-vis .msbadge{position:absolute;top:15px;z-index:3;
  font-family:var(--mono);font-size:.55rem;letter-spacing:.15em;text-transform:uppercase}
.work-vis .badge{left:17px;color:color-mix(in srgb, var(--accent) 68%, #fff);
  display:flex;align-items:center;gap:7px}
.work-vis .badge::before{content:'';width:4px;height:4px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 8px 1px var(--accent)}
.work-vis .msbadge{right:17px;color:var(--ink-mute);letter-spacing:.1em}
.work-info{padding:20px 22px 24px}
.work-info h3{margin-bottom:9px;overflow-wrap:anywhere}
.work-info p{color:var(--ink-soft);font-size:.87rem}
.work-info .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:15px}

/* ---------- Arbeiten: automatische Idle-Animation ----------
   Kein Klick-Gate mehr — die Cards zeigen sich direkt (Showcase ist das
   Wichtigste), bekommen aber einen leisen, endlos laufenden Atem-Glow auf
   Plate/Badge, damit die Sektion auch ohne Hover lebendig wirkt. */
.work-card{animation:workBreathe 6s var(--ease) infinite;animation-delay:var(--d,0ms)}
.work-card:nth-child(2){animation-duration:6.6s}
.work-card:nth-child(3){animation-duration:7.2s}
.work-card:nth-child(4){animation-duration:6.9s}
@keyframes workBreathe{0%,100%{box-shadow:0 24px 60px rgba(0,0,0,.45),inset 0 1px 1px rgba(255,255,255,.5),
    inset 0 -8px 20px rgba(255,255,255,.06),inset 0 0 0 1px rgba(255,255,255,.13)}
  50%{box-shadow:0 24px 60px rgba(0,0,0,.45),inset 0 1px 1px rgba(255,255,255,.5),
    inset 0 -8px 20px rgba(255,255,255,.06),
    inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, rgba(255,255,255,.13))}}
.work-more{display:flex;justify-content:center;margin-top:clamp(20px,3vw,30px)}
.work-more .btn .arr{transition:transform .3s var(--ease-out)}
.work-more .btn:hover .arr{transform:translateX(4px)}

/* ---------- Rezensionen: automatischer Zweizeiler-Marquee ---------- */
.testi-rows{display:flex;flex-direction:column;gap:14px;margin-top:clamp(32px,5vw,54px);
  overflow:hidden;
  mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%)}
.testi-track{display:flex;gap:14px;width:max-content;animation:testiSlide 52s linear infinite}
.testi-track--b{animation-duration:60s;animation-direction:reverse}
.testi-rows:hover .testi-track{animation-play-state:paused}
@keyframes testiSlide{to{transform:translateX(-50%)}}
.testi-card{flex:0 0 auto;width:min(80vw,320px);padding:22px 22px 20px;--accent:var(--cyan)}
.testi-stars{color:var(--amber);letter-spacing:.18em;font-size:.82rem;
  filter:drop-shadow(0 0 6px rgba(255,180,84,.45))}
.testi-quote{color:var(--ink-soft);font-size:.87rem;line-height:1.6;margin:14px 0 20px}
.testi-who{display:flex;align-items:center;gap:12px}
.testi-avatar{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;flex:0 0 auto;font-family:var(--mono);font-size:.66rem;font-weight:600;
  color:#02060C;background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 35%,#fff));
  box-shadow:0 0 0 1px rgba(255,255,255,.16), 0 6px 16px -6px color-mix(in srgb,var(--accent) 65%,transparent)}
.testi-meta{display:flex;flex-direction:column;gap:2px;line-height:1.25}
.testi-meta b{font-family:var(--display);font-weight:700;font-stretch:110%;font-size:.82rem;
  text-transform:none;letter-spacing:0}
.testi-meta i{font-style:normal;font-family:var(--mono);font-size:.56rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-mute)}

/* ---------- Ablauf ---------- */
#ablauf{overflow:hidden}
/* --tl-pad/--tl-line/--tl-dot sind auf .tl gesetzt, damit .tl-node (im li, also
   bereits um --tl-pad nach rechts verschoben) exakt auf der Linie zentriert
   werden kann, statt wie zuvor doppelt verschoben zu werden. */
.tl{position:relative;max-width:900px;margin-inline:auto;
  --tl-pad:clamp(52px,7vw,86px);--tl-line:clamp(20px,2.7vw,32px);--tl-dot:clamp(34px,4.4vw,42px);
  padding-left:var(--tl-pad)}
.tl::before{content:'';position:absolute;left:var(--tl-line);top:6px;bottom:6px;width:2px;
  background:linear-gradient(180deg,transparent 0%, rgba(255,255,255,.14) 6%,
    rgba(255,255,255,.14) 94%, transparent 100%)}
.tl::after{content:'';position:absolute;left:var(--tl-line);top:6px;width:2px;
  height:var(--fill,0%);
  /* Fade nur als kurzer, FIXER Comet-Tail an der Spitze (nicht proportional zur
     Höhe) — sonst verblasst die Linie bei --fill:100% über hunderte Pixel ins
     Nichts, während der Box-Shadow (an die ganze Box gebunden) blau weiterglüht. */
  background:linear-gradient(180deg, var(--cyan-hi) 0, var(--cyan) 30%,
    var(--cyan) calc(100% - 56px), transparent 100%);
  box-shadow:0 0 14px 1px rgba(46,168,240,.55);transition:height 1.1s var(--ease-out)}
.tl-step{position:relative;padding-bottom:clamp(14px,1.8vw,20px)}
.tl-step:last-child{padding-bottom:0}
.tl-node{position:absolute;left:calc(var(--tl-line) - var(--tl-pad) - var(--tl-dot)/2);
  top:clamp(16px,2vw,22px);
  width:var(--tl-dot);height:var(--tl-dot);border-radius:50%;
  display:flex;align-items:center;justify-content:center;z-index:3;
  font-family:var(--mono);font-size:clamp(.6rem,.8vw,.7rem);letter-spacing:.06em;
  color:var(--ink-mute);
  background:linear-gradient(180deg, rgba(28,36,50,.95), rgba(8,12,20,.95));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14), inset 0 1px 0 rgba(255,255,255,.3);
  transition:color .5s var(--ease), box-shadow .5s var(--ease)}
.tl-step.in .tl-node{color:var(--cyan-hi);
  box-shadow:inset 0 0 0 1px rgba(46,168,240,.55), inset 0 1px 0 rgba(255,255,255,.35),
    0 0 22px -4px rgba(46,168,240,.85)}
.tl-step::before{content:'';position:absolute;
  left:calc(var(--tl-line) + var(--tl-dot)/2 - var(--tl-pad));
  top:calc(clamp(16px,2vw,22px) + var(--tl-dot)/2);
  width:calc(var(--tl-pad) - var(--tl-line) - var(--tl-dot)/2);
  height:1px;background:linear-gradient(90deg, rgba(255,255,255,.2), transparent);z-index:1}
.tl-card{padding:20px 22px 22px}
.tl-card .lbl{font-family:var(--mono);font-size:.57rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--cyan);opacity:.8}
.tl-card h3{margin:9px 0 8px;font-size:clamp(.98rem,1.35vw,1.14rem)}
.tl-card p{color:var(--ink-soft);font-size:.88rem;max-width:62ch}

/* ---------- FAQ ---------- */
.faq{max-width:880px;margin-inline:auto}
.q{border-bottom:1px solid rgba(255,255,255,.09)}
.q button{width:100%;display:flex;align-items:center;gap:16px;text-align:left;
  padding:20px 2px;font-family:var(--display);font-weight:700;font-stretch:106%;
  font-size:clamp(.95rem,1.35vw,1.14rem);text-transform:uppercase;transition:color .3s}
.q button:hover{color:var(--cyan-hi)}
.q .ico{margin-left:auto;flex:0 0 26px;width:26px;height:26px;border-radius:8px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);position:relative;transition:.4s var(--ease)}
.q .ico::before,.q .ico::after{content:'';position:absolute;left:50%;top:50%;
  background:var(--cyan);transform:translate(-50%,-50%);transition:.4s var(--ease)}
.q .ico::before{width:9px;height:1px}
.q .ico::after{width:1px;height:9px}
.q.open .ico{background:rgba(46,168,240,.16);transform:rotate(135deg)}
.q.open .ico::after{opacity:0}
.q .a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease-out)}
.q.open .a{grid-template-rows:1fr}
.q .a > div{overflow:hidden}
.q .a p{color:var(--ink-soft);font-size:.92rem;padding:0 42px 22px 2px;max-width:70ch}

/* ---------- CTA ---------- */
.cta{padding:clamp(38px,6vw,76px) clamp(20px,5vw,64px);text-align:center;
  border-radius:clamp(20px,2.6vw,32px);overflow:hidden}
/* Statisches Punktraster für die CTA-Karte — gleiche Optik wie das
   .dots-Raster, das sonst auf der Seite vorkommt, nur ohne Fade-Maske
   (soll die ganze Karte gleichmäßig füllen). */
.dots-static::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(196,210,226,.2) 1px, transparent 1px);
  background-size:15px 15px;opacity:.45}
.cta-ghost{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);
  font-family:var(--display);font-weight:900;font-stretch:125%;text-transform:uppercase;
  font-size:clamp(4rem,15vw,11rem);line-height:1;white-space:nowrap;color:transparent;
  -webkit-text-stroke:1px rgba(220,235,255,.07);z-index:0;pointer-events:none;user-select:none}
.cta .lightbar{bottom:0;height:56px; display:none}
.cta h2{margin:16px auto 16px;max-width:18ch}
.cta .lead{margin-inline:auto}
.cta-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.cta-note{font-family:var(--mono);font-size:.59rem;letter-spacing:.13em;
  color:var(--ink-mute);margin-top:22px}

footer{border-top:1px solid var(--line);padding-block:44px 26px;position:relative;z-index:2}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:32px clamp(20px,4vw,56px)}
.foot-col{display:flex;flex-direction:column;gap:12px}
.foot-col h4{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-mute);margin:0 0 2px}
.foot-col a{font-size:.85rem;color:var(--ink-soft);transition:color .25s;width:fit-content}
.foot-col a:hover{color:var(--cyan-hi)}
.foot-brand .mono{color:var(--ink-mute);margin:2px 0 4px}
.foot-bottom{border-top:1px solid var(--line);margin-top:36px;padding-top:22px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.foot-bottom .mono{color:var(--ink-mute)}
.lang-switch{display:flex;gap:2px;padding:3px;border-radius:10px;
  background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.lang-switch button{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;
  padding:6px 12px;border-radius:7px;color:var(--ink-mute);
  transition:color .2s,background .2s}
.lang-switch button:hover{color:var(--ink)}
.lang-switch button.is-active{color:#02060C;background:var(--cyan-hi)}
/* Sprachabhängige Hinweise (z.B. "Rezensionen im Originalwortlaut", der nur
   für englische Besucher Sinn ergibt). Über CSS statt über das
   hidden-Attribut, damit es schon beim ersten Paint stimmt und nicht
   kurz aufblitzt. i18n.js setzt dafür <html lang>. */
[data-lang-only]{display:none}
html[lang="en"] [data-lang-only="en"],
html[lang="de"] [data-lang-only="de"]{display:block}
.testi-orig-note{text-align:center;color:var(--ink-mute);margin-top:14px;font-size:.62rem}
.foot-legal-note{color:var(--ink-mute);font-size:.75rem;margin-top:10px}

.rev{opacity:0;transform:translateY(24px);
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out);
  transition-delay:var(--d,0ms)}
.rev.in{opacity:1;transform:none}
.line-mask{overflow:hidden;display:block}
.line-mask > span{display:block;transform:translateY(105%);
  animation:lineUp 1.15s var(--ease-out) forwards;animation-delay:var(--ld,0ms)}
@keyframes lineUp{to{transform:none}}

#lg-defs{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}

/* ---------- Page-Loader ----------
   Sitzt als erstes Element im body, VOR jedem anderen Inhalt — das
   externe Stylesheet blockiert das erste Paint, dadurch erscheint der
   Loader ohne Flackern, bevor irgendwas anderes sichtbar wird. Wird von
   site.js entfernt, sobald Web-Fonts geladen sind (mit Mindestanzeigezeit
   und Fallback-Timeout, siehe dort). */
.page-loader{position:fixed;inset:0;z-index:999;display:flex;
  align-items:center;justify-content:center;background:var(--void);
  transition:opacity .5s var(--ease-out), visibility .5s var(--ease-out)}
.page-loader.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
.page-loader-mark{display:flex;flex-direction:column;align-items:center;gap:18px;
  animation:loaderPulse 1.8s ease-in-out infinite}
.page-loader-mark b{font-family:var(--display);font-weight:900;font-stretch:112%;
  font-size:clamp(1rem,2vw,1.25rem);letter-spacing:.01em;text-transform:uppercase;color:var(--ink)}
.page-loader-mark b span{color:var(--cyan)}
.page-loader-bar{display:block;width:120px;height:2px;border-radius:2px;
  overflow:hidden;position:relative;background:rgba(255,255,255,.1)}
.page-loader-bar::after{content:'';position:absolute;top:0;bottom:0;left:-40%;width:40%;
  border-radius:2px;background:linear-gradient(90deg,transparent,var(--cyan-hi),transparent);
  animation:loaderSweep 1.1s ease-in-out infinite}
@keyframes loaderPulse{50%{opacity:.55}}
@keyframes loaderSweep{0%{left:-40%}100%{left:100%}}
@media (prefers-reduced-motion: reduce){
  .page-loader-mark{animation:none}
  .page-loader-bar::after{animation:none;left:0;width:100%;opacity:.35}
}

/* ---------- Simple content pages (Impressum etc.) ---------- */
.page-hero{padding-top:calc(var(--navh) + clamp(40px,8vh,90px));padding-bottom:clamp(20px,4vw,40px)}
.legal{max-width:76ch}
.legal h2{font-size:clamp(1.4rem,2.4vw,1.9rem);margin:0 0 14px}
.legal h3{margin:30px 0 10px;color:var(--cyan-hi)}
.legal p,.legal li{color:var(--ink-soft);font-size:.94rem;margin:0 0 10px}
.legal a{color:var(--cyan-hi);text-decoration:underline;text-underline-offset:3px}
.legal ul{padding-left:1.2em;list-style:disc}
.legal-nav{display:flex;gap:8px;flex-wrap:wrap;margin:26px 0 40px}
.legal-nav a{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;
  text-transform:uppercase;padding:9px 14px;border-radius:10px;color:var(--ink-soft);
  background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
  transition:color .25s, background .25s}
.legal-nav a:hover,.legal-nav a[aria-current="page"]{color:var(--cyan-hi);background:rgba(255,255,255,.09)}

/* ---------- Formulare (Kontakt, Login/Signup) ---------- */
.form{display:flex;flex-direction:column;gap:16px;max-width:480px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{display:flex;flex-direction:column;gap:8px;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-mute)}
.field textarea{resize:vertical;min-height:120px}

/* ---------- Eingabefelder (eine Definition für die ganze Seite) ----------
   border:0 + appearance:none sind hier das Entscheidende, nicht Deko: die
   UA-Stylesheets geben input/textarea/select standardmäßig `border-style:
   inset`. Eine Inset-Border zeichnet oben/links dunkel und unten/rechts
   hell — auf dunklem Grund sah das aus wie eine "halbe Border" unten und
   rechts, quer durch alle Formulare. appearance:none nimmt zusätzlich iOS
   Safari die eigene Innenschatten-/Radius-Behandlung ab.
   Optik danach: ein gleichmäßiger 1px-Ring, kein 3D-Bevel. */
.form input,.form textarea,.form select,
.admin-toolbar input,.order-admin-row select{
  font:inherit;font-family:var(--body);font-size:.92rem;color:var(--ink);
  appearance:none;-webkit-appearance:none;border:0;margin:0;
  background:linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.03));
  border-radius:12px;padding:12px 14px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  transition:box-shadow .25s var(--ease), background .25s var(--ease)}
.form input::placeholder,.form textarea::placeholder{color:var(--ink-mute);opacity:1}
.form input:hover,.form textarea:hover,.admin-toolbar input:hover{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.form input:focus,.form textarea:focus,.form select:focus,
.admin-toolbar input:focus,.order-admin-row select:focus{outline:0;
  background:linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.04));
  box-shadow:inset 0 0 0 1px var(--cyan), 0 0 0 3px rgba(46,168,240,.16)}
.form input:disabled,.form textarea:disabled{opacity:.55;cursor:not-allowed}
/* Ungültige Felder erst nach einem Prüfversuch rot färben, nicht schon beim
   Tippen — :invalid allein würde ein leeres Pflichtfeld sofort anmeckern,
   bevor der Nutzer überhaupt etwas eingeben konnte. Die Klasse sitzt pro
   Schritt (.step-panel), nicht auf dem Formular: sonst färbt der Prüfversuch
   in Schritt 2 auch die noch nie gezeigten Felder in Schritt 4 rot. */
.was-validated input:invalid,.was-validated textarea:invalid{
  box-shadow:inset 0 0 0 1px rgba(255,138,128,.75)}
/* Chrome-Autofill malt sonst ein hellblaues/gelbes Feld mit dunkler Schrift
   mitten ins dunkle Layout. Der riesige inset-Schatten überdeckt das,
   die lange transition verhindert das kurze Aufblitzen beim Fokus. */
.form input:-webkit-autofill,
.form input:-webkit-autofill:hover,
.form input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--ink);caret-color:var(--ink);
  -webkit-box-shadow:0 0 0 1000px #131b29 inset, inset 0 0 0 1px rgba(255,255,255,.14);
  transition:background-color 9999s ease-out, box-shadow .25s var(--ease)}
/* Zahlenfelder: die Spinner-Pfeile passen optisch nicht ins Dark-UI. */
.form input[type="number"]{-moz-appearance:textfield}
.form input[type="number"]::-webkit-outer-spin-button,
.form input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.form input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none}
.form-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.form-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form-msg{font-family:var(--mono);font-size:.72rem;letter-spacing:.03em;color:var(--good)}
.form-msg.is-error{color:#FF8A80}

/* ---------- Auth (dashboard.html) ---------- */
.auth-card{max-width:480px;padding:30px 28px 32px;margin-bottom:32px}
.auth-tabs{display:flex;gap:6px;margin-bottom:22px}
.auth-tabs button{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;
  text-transform:uppercase;padding:9px 16px;border-radius:10px;color:var(--ink-mute);
  background:rgba(255,255,255,.04);transition:color .25s,background .25s}
.auth-tabs button.active{color:var(--ink);background:rgba(255,255,255,.09)}
.auth-forgot{font-family:var(--mono);font-size:.66rem;letter-spacing:.05em;
  color:var(--ink-mute);text-decoration:underline;text-underline-offset:3px}
.auth-forgot:hover{color:var(--cyan-hi)}
.auth-msg{margin-top:16px;font-family:var(--mono);font-size:.72rem;color:var(--good)}
.auth-msg.is-error{color:#FF8A80}

/* ---------- Dashboard: Aufträge ---------- */
.dash-head{display:flex;justify-content:space-between;align-items:center;
  gap:16px;flex-wrap:wrap;margin-bottom:26px}
.dash-head p{color:var(--ink-soft);font-size:.9rem}
.orders-state{color:var(--ink-mute);font-family:var(--mono);font-size:.78rem}
.orders-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.order-card{padding:22px 22px 24px}
.order-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.order-desc{color:var(--ink-soft);font-size:.87rem;margin-top:10px}
.order-meta{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.05em;color:var(--ink-mute)}
.order-files{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.order-dl{padding:8px 14px;font-size:.65rem}
.status-pill{flex:0 0 auto;font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;
  text-transform:uppercase;padding:5px 11px;border-radius:8px;white-space:nowrap}
.status-angefragt{color:var(--ink-mute);background:rgba(255,255,255,.06)}
.status-in-arbeit{color:var(--cyan-hi);background:rgba(46,168,240,.14)}
.status-review{color:var(--amber);background:rgba(255,180,84,.14)}
.status-abgeschlossen{color:var(--good);background:rgba(63,214,160,.14)}

/* Generischer Punkte+Linie-Stepper — für den Auftragsfortschritt (order-card)
   UND die Schrittanzeige des Kontaktformulars (gleiche Optik, andere Anzahl
   Punkte je nach Markup, kein zusätzlicher CSS-Aufwand nötig). */
.stepper{position:relative;display:flex;justify-content:space-between;
  align-items:center;height:10px;margin:4px 2px}
.stepper-track{position:absolute;left:5px;right:5px;top:50%;height:2px;
  background:rgba(255,255,255,.1);transform:translateY(-50%);
  border-radius:2px;overflow:hidden}
.stepper-fill{display:block;height:100%;width:0%;
  background:linear-gradient(90deg,var(--cyan-deep),var(--cyan-hi));
  transition:width .9s var(--ease-out)}
.stepper-dot{position:relative;z-index:1;width:10px;height:10px;border-radius:50%;
  background:rgba(255,255,255,.14);box-shadow:0 0 0 3px var(--deep);
  transition:background .4s var(--ease), box-shadow .4s var(--ease)}
.stepper-dot.is-done{background:var(--cyan-hi);
  box-shadow:0 0 0 3px var(--deep), 0 0 8px 1px rgba(46,168,240,.55)}
.stepper-dot.is-current{background:var(--amber);
  box-shadow:0 0 0 3px var(--deep), 0 0 10px 2px rgba(255,180,84,.65)}
.order-stepper{margin:16px 2px 2px}

/* ---------- Onboarding: leerer Dashboard-Zustand ---------- */
.orders-onboard{padding:34px 28px;text-align:center;max-width:480px;margin-inline:auto}
.orders-onboard p{color:var(--ink-soft);font-size:.9rem;margin-bottom:20px}
.dash-greeting{animation:popIn .6s var(--ease-out)}
@keyframes popIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- Mehrstufiges Formular (Kontakt) ---------- */
.step-form .stepper{max-width:220px;margin:0 auto 28px}
.step-panel{display:none}
/* flex+gap statt einzelner Margins auf .field/.step-q/.chip-select/.step-nav:
   so bekommt JEDES Element im Schritt denselben Abstand zum nächsten, egal in
   welcher Reihenfolge sie stehen — vorher hatten nur einzelne Elemente eine
   Margin, zwei aufeinanderfolgende .field (z.B. Name+E-Mail, UI-Referenzen+
   Sonstiges) klebten dadurch ohne jeden Abstand aneinander. */
.step-panel.active{display:flex;flex-direction:column;gap:16px;animation:stepIn .45s var(--ease-out)}
@keyframes stepIn{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
.chip-select{display:flex;flex-wrap:wrap;gap:8px}
.chip-select button{font-family:var(--mono);font-size:.68rem;letter-spacing:.05em;
  padding:9px 14px;border-radius:10px;color:var(--ink-soft);
  background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
  transition:color .25s,background .25s,box-shadow .25s}
.chip-select button.is-active{color:#02060C;background:var(--cyan-hi);
  box-shadow:inset 0 0 0 1px var(--cyan-hi)}
.step-nav{display:flex;justify-content:center;gap:12px}
.step-back{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-mute);padding:13px 10px}
.step-back:hover{color:var(--ink)}
.step-success{text-align:center;padding:10px 0}
.success-check{width:52px;height:52px;margin:0 auto 18px;display:block}
.success-check circle{fill:none;stroke:var(--good);stroke-width:2;opacity:.35}
.success-check path{fill:none;stroke:var(--good);stroke-width:2.5;stroke-linecap:round;
  stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24;
  animation:strokeIn .5s var(--ease-out) .15s forwards}
@keyframes strokeIn{to{stroke-dashoffset:0}}
.step-q{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-mute)}
.field label i{font-style:normal;text-transform:none;letter-spacing:0;opacity:.7}

/* ---------- Auftragsanfrage: Alternativweg-Hinweis (anfrage.html) ---------- */
.altpath{display:flex;align-items:center;justify-content:space-between;gap:20px;
  flex-wrap:wrap;padding:24px 28px}
.altpath-body h3{font-size:1rem;margin-bottom:6px}
.altpath-body p{color:var(--ink-soft);font-size:.87rem;max-width:56ch}
.req-discord-note{text-align:center;color:var(--ink-mute);font-size:.62rem;margin-top:22px}
.req-discord-note a{color:var(--cyan-hi);text-decoration:underline;text-underline-offset:3px}
.req-customer-note{color:var(--ink-mute);margin-top:clamp(24px,4vw,36px);text-align:center}
.req-customer-note a{color:var(--cyan-hi);text-decoration:underline;text-underline-offset:3px}

/* ---------- Admin ---------- */
.admin-section{margin-top:clamp(36px,5vw,56px)}
.admin-section h2{font-size:clamp(1.2rem,2vw,1.5rem);margin-bottom:16px}
.admin-toolbar{margin-bottom:16px;max-width:340px}
.admin-toolbar input{width:100%}
.order-admin-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;align-items:center}
/* Grundoptik kommt aus der gemeinsamen Feld-Definition weiter oben (inkl.
   border:0/appearance:none), hier nur Typo + kompaktere Maße. Der eigene
   Pfeil ist nötig, weil appearance:none den nativen ausblendet. */
.order-admin-row select{font-family:var(--mono);font-size:.65rem;
  letter-spacing:.06em;text-transform:uppercase;
  padding:9px 30px 9px 12px;border-radius:10px;cursor:pointer;
  background-image:linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.03)),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'><path d='M1 1l4 4 4-4' fill='none' stroke='%236C819B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat, no-repeat;
  background-position:center, right 11px center}
.order-admin-row select option{background:#0B1220;color:var(--ink)}
.file-btn{position:relative;overflow:hidden;cursor:pointer}
.file-btn input{position:absolute;inset:0;opacity:0;cursor:pointer}
/* Dateiliste im Admin-Auftrag: Name + Ersetzen + Löschen je Zeile. Im
   Kunden-Dashboard bleibt .order-files die Reihe aus Download-Buttons. */
.order-files-admin{flex-direction:column;gap:6px}
.order-file-row{display:flex;align-items:center;gap:6px;padding:6px 7px 6px 11px;
  border-radius:9px;background:rgba(255,255,255,.04);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.order-file-name{flex:1 1 auto;min-width:0;font-family:var(--mono);font-size:.64rem;
  letter-spacing:.03em;color:var(--ink-soft);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.order-file-act{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:7px;color:var(--ink-mute);
  transition:color .2s,background .2s}
.order-file-act:hover{color:var(--ink);background:rgba(255,255,255,.09)}
.order-file-del:hover{color:#FF8A80;background:rgba(255,138,128,.12)}
.order-delete{margin-left:auto}
.order-owner{font-family:var(--mono);font-size:.66rem;letter-spacing:.04em;
  color:var(--ink-mute);margin-top:6px}
.lead-list{display:flex;flex-direction:column;gap:10px}
.lead-card{padding:16px 18px;display:flex;justify-content:space-between;
  align-items:flex-start;gap:16px;transition:opacity .3s var(--ease)}
.lead-card.is-done{opacity:.5}
.lead-card .lead-body p{color:var(--ink-soft);font-size:.85rem;margin-top:6px;
  max-width:60ch;white-space:pre-line}
.lead-card .lead-meta{font-family:var(--mono);font-size:.62rem;letter-spacing:.05em;
  color:var(--ink-mute);margin-top:8px}
.lead-actions{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex:0 0 auto}
.lead-actions .btn{padding:9px 16px;font-size:.62rem}
.lead-delete,.order-delete{display:flex;align-items:center;justify-content:center;
  width:30px;height:30px;
  border-radius:8px;color:var(--ink-mute);transition:color .2s,background .2s}
.lead-delete:hover,.order-delete:hover{color:#FF8A80;background:rgba(255,138,128,.12)}

/* ---------- Responsive ---------- */
@media (max-width:1040px){
  .hero-grid{grid-template-columns:1fr;gap:44px}
  .chip-a{right:12px} .chip-b{left:6px;bottom:-16px}
  .foot-grid{grid-template-columns:1fr 1fr}
  /* Einspaltiger Hero: die Kulisse liegt jetzt hinter der Überschrift
     statt neben ihr — deutlich zurücknehmen, damit der Text trägt. */
  .hero-shot i{opacity:.16;width:96%;right:-24%}
}
@media (max-width:760px){
  .bar{width:calc(100% - clamp(14px,4vw,28px))}
  .nav.stuck .bar{width:calc(100% - clamp(14px,4vw,28px))}
  .brand i{display:none}
  /* Zweispaltig hätte jede zweite Zeile einen Trennstrich am linken
     Rand — dort trennt der Zeilenumbruch schon. */
  .trust{grid-template-columns:repeat(2,1fr);gap:18px 20px;justify-content:stretch}
  .trust div:nth-child(odd){padding-left:0;border-left:0}
  .float-chip{display:none}
  .work,.svc{grid-template-columns:1fr}
  .cta-ghost{font-size:22vw}
  /* Dekorative Glas-Shapes bleeden bewusst über den Sektionsrand hinaus
     (siehe .shape-field weiter oben) — bei schmalen Viewports rücken sie
     dadurch so nah zusammen, dass sie sich überlappen. Auf Handy-Breite
     ist der Effekt verzichtbar, also blenden wir ihn hier komplett aus. */
  .shape-field{display:none}
  /* Auf Handybreite bleibt vom Hero nur Text — eine Montage dahinter
     wäre nicht Tiefe, sondern Unruhe. Der Lichtschein bleibt. */
  .hero-shot i{display:none}
}
@media (max-width:620px){
  .foot-grid{grid-template-columns:1fr}
}
@media (max-width:460px){
  .tl{--tl-pad:56px;padding-left:var(--tl-pad)}
  .tl-card{padding:17px 16px 19px}
  .btn{padding:12px 16px;font-size:.67rem}
  .hero-cta .btn,.cta-btns .btn{flex:1 1 100%}
}
/* ---------- Bewegungs-Feinschliff: Effekte nur auf echtem Desktop ----------
   Bedingungen zusammen gelesen: eine echte Maus (hover:hover + pointer:fine)
   UND ein großes Fenster. iPads/Tablets fallen schon über hover:none raus —
   auch das iPad Pro im Querformat, das mit 1366px sonst als "Desktop"
   durchginge. Die Breitengrenze nimmt zusätzlich kleine/geteilte
   Desktop-Fenster raus. Alles andere bleibt bewusst statisch. */
@media (hover:hover) and (pointer:fine) and (min-width:1280px){
  .btn{transition:transform .3s var(--ease-out), box-shadow .3s var(--ease), background .3s var(--ease)}
  .btn-primary::after{content:'';position:absolute;top:0;left:-120%;width:60%;height:100%;
    background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);
    transition:left .7s var(--ease)}
  .btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 40px -12px rgba(46,168,240,.95)}
  .btn-primary:hover::after{left:130%}
  .btn-ghost:hover{transform:translateY(-2px);
    background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.06))}
  .svc-card:hover{transform:translateY(-5px)}
}
/* Der Cursor-Glanz auf Glasflächen braucht zwingend einen Mauszeiger. */
@media not all and (hover:hover){
  .lg::after,.glass::after{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
  .rev{opacity:1;transform:none}
  .line-mask > span{transform:none}
}
:focus-visible{outline:2px solid var(--cyan-hi);outline-offset:3px;border-radius:4px}

/* ============================================================
   ============================================================
   SHOP — Tebex-Storefront
   Alles ab hier gehört zum Shop-Teil der Seite (Scripts, Warenkorb,
   Produktseiten, Docs, Support). Bewusst dieselbe Materialsprache wie
   oben: .glass/.lg als Träger, Hairline als Akzent, Mono für Labels,
   Cyan als einzige Signalfarbe. Keine zweite Designsprache.
   ============================================================
   ============================================================ */

/* Sperrt das Scrollen hinter Drawer/Modal, ohne die Scrollposition zu
   verlieren (overflow auf <html>, nicht position:fixed auf <body>). */
html.no-scroll{overflow:hidden}

/* Nur für Screenreader — sichtbar nichts, im Accessibility-Baum alles.
   Bewusst nicht display:none, das würde das Label auch dort entfernen. */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ============================================================
   HEADER — Navigation mit Tabs, Warenkorb und Tebex-Konto
   ============================================================ */
/* Wer schiebt hier wen?
   Früher trug die Marke margin-right:auto und drückte alles nach rechts.
   Mit den Tabs daneben ging das nicht mehr auf. Das auto liegt jetzt auf
   der Aktionsgruppe: Marke und Tabs stehen links zusammen, Warenkorb,
   Konto und Burger immer ganz rechts. Wichtig fürs Handy — dort sind die
   Tabs ausgeblendet, und ein auto auf .nav-links würde ersatzlos
   wegfallen, sodass die drei Icons direkt am Schriftzug kleben. */
.bar .brand{margin-right:clamp(8px,1.4vw,18px)}
.nav-links{display:flex;align-items:center;gap:2px}
.nav-actions{margin-left:auto}
.nav-links a{position:relative;font-family:var(--mono);font-size:.68rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-mute);padding:9px 13px;border-radius:10px;
  white-space:nowrap;transition:color .25s var(--ease), background .25s var(--ease)}
.nav-links a:hover{color:var(--ink);background:rgba(255,255,255,.06)}
.nav-links a[aria-current="page"]{color:var(--ink)}
/* Der Punkt markiert die aktive Seite ruhiger als eine Unterstreichung,
   die im Glas-Header immer wie ein Fremdkörper wirkt. */
.nav-links a[aria-current="page"]::after{content:'';position:absolute;left:50%;bottom:3px;
  width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--cyan);
  box-shadow:0 0 8px 1px rgba(46,168,240,.9)}
.nav-links .nav-sep{width:1px;height:16px;margin-inline:8px;background:var(--line-grey);opacity:.4}
.nav-links a.is-soft{color:var(--ink-mute);opacity:.72}

.nav-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}

/* Konto-Dropdown: zwei beschriftete Blöcke (Shop / Custom Development),
   damit klar ist, in welchem der beiden Konten man gerade landet. */
.account-drop{min-width:232px}
.account-drop-head{color:var(--ink-mute);font-size:.53rem;letter-spacing:.18em;
  padding:8px 10px 5px}
.account-drop-sep{display:block;height:1px;margin:7px 6px;background:rgba(255,255,255,.09)}
.account-drop-link[disabled]{opacity:.55;pointer-events:none}

.icon-btn{position:relative;display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;color:var(--ink-soft);flex:0 0 auto;
  background:linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.03));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16), inset 0 1px 0 rgba(255,255,255,.3);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:color .25s, background .25s, box-shadow .25s}
.icon-btn:hover,.icon-btn[aria-expanded="true"]{color:var(--ink);
  background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.06))}
.icon-btn.has-items{color:var(--cyan-hi);
  box-shadow:inset 0 0 0 1px rgba(127,217,255,.4), inset 0 1px 0 rgba(255,255,255,.3)}
.cart-badge{position:absolute;top:-3px;right:-3px;min-width:17px;height:17px;padding:0 4px;
  border-radius:9px;display:none;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:.55rem;font-weight:500;color:#02060C;
  background:linear-gradient(135deg,var(--cyan-hi),var(--cyan));
  box-shadow:0 0 0 2px var(--void), 0 4px 12px -3px rgba(46,168,240,.9)}
.cart-badge.is-filled{display:flex;animation:badgePop .38s var(--ease-out)}
@keyframes badgePop{0%{transform:scale(.4)}60%{transform:scale(1.18)}100%{transform:scale(1)}}

/* Burger — erscheint erst, wenn die Tabs nicht mehr in die Bar passen */
.nav-burger{display:none;flex-direction:column;justify-content:center;gap:4px;
  width:38px;height:38px;border-radius:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.03));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.nav-burger span{display:block;width:15px;height:1.5px;margin-inline:auto;border-radius:2px;
  background:var(--ink-soft);transition:transform .35s var(--ease-out), opacity .25s}
.nav-burger.is-open span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.nav-burger.is-open span:nth-child(2){opacity:0}
.nav-burger.is-open span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

.mobile-nav{position:fixed;inset:0;z-index:59;padding:calc(var(--navh) + 34px) var(--gut) 32px;
  background:rgba(4,7,14,.86);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  opacity:0;visibility:hidden;transition:opacity .3s var(--ease), visibility .3s}
.mobile-nav.is-open{opacity:1;visibility:visible}
.mobile-nav-panel{display:flex;flex-direction:column;gap:2px;max-width:520px;margin-inline:auto}
/* :not(.btn) ist hier kein Feinschliff: ohne den Ausschluss überschreibt
   diese Regel (0,1,1) den Button-Stil (0,1,0), und die CTA am Ende des
   Menüs käme als weitere Textzeile mit Trennlinie heraus. */
.mobile-nav a:not(.btn){display:flex;align-items:center;justify-content:space-between;
  padding:16px 4px;border-bottom:1px solid rgba(255,255,255,.07);
  font-family:var(--display);font-weight:700;font-stretch:106%;text-transform:uppercase;
  font-size:1.05rem;color:var(--ink-soft);transition:color .25s}
.mobile-nav a:not(.btn):hover,.mobile-nav a[aria-current="page"]{color:var(--cyan-hi)}
.mobile-nav .btn{margin-top:22px;justify-content:center}

/* ============================================================
   WARENKORB-DRAWER
   ============================================================ */
.cart-overlay{position:fixed;inset:0;z-index:200;display:flex;justify-content:flex-end;
  background:rgba(3,6,12,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;transition:opacity .35s var(--ease), visibility .35s}
.cart-overlay.is-open{opacity:1;visibility:visible}
.cart-drawer{width:min(420px,100%);height:100%;border-radius:0;display:flex;flex-direction:column;
  transform:translateX(102%);transition:transform .45s var(--ease-out);
  background:var(--grey-soft), linear-gradient(200deg, rgba(20,30,50,.92), rgba(6,10,20,.96))}
.cart-overlay.is-open .cart-drawer{transform:none}
/* Der Spekular-Verlauf von .glass ist auf Karten gerechnet; über eine
   bildschirmhohe Fläche gezogen würde er das obere Drittel auswaschen. */
.cart-drawer::before{opacity:.28;
  background:linear-gradient(180deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 14%)}
@media (min-width:560px){
  .cart-drawer{height:calc(100% - 24px);margin:12px;border-radius:20px}
}
.cart-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:24px 22px 18px;border-bottom:1px solid rgba(255,255,255,.08)}
.cart-count{color:var(--ink-mute);margin-top:10px}
.cart-x,.modal-x{display:flex;align-items:center;justify-content:center;width:32px;height:32px;
  border-radius:10px;color:var(--ink-mute);flex:0 0 auto;transition:color .2s, background .2s}
.cart-x:hover,.modal-x:hover{color:var(--ink);background:rgba(255,255,255,.09)}
.cart-body{flex:1;overflow-y:auto;padding:16px 22px;display:flex;flex-direction:column;gap:8px}

/* Zeile im Warenkorb: Vorschaubild · Name+Preis · Entfernen.
   --thumb hält Bild und Text-Platzhalter exakt gleich groß, damit die
   Liste nicht springt, je nachdem ob ein Tebex-Bild gepflegt ist. */
.cart-item{--thumb-w:56px;--thumb-h:42px;
  display:flex;align-items:center;gap:13px;padding:11px 12px;border-radius:13px;
  background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
  animation:cartIn .35s var(--ease-out)}
@keyframes cartIn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
.cart-item-shot,.cart-item-plate{flex:0 0 auto;
  width:var(--thumb-w);height:var(--thumb-h);border-radius:10px;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 34%, transparent)}
.cart-item-shot{object-fit:cover;background:rgba(255,255,255,.04)}
.cart-item-plate{display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:.55rem;letter-spacing:.06em;
  color:color-mix(in srgb, var(--accent) 80%, #fff);
  background:radial-gradient(120% 120% at 50% 0%, color-mix(in srgb, var(--accent) 28%, transparent), transparent 70%),
    rgba(255,255,255,.04)}
/* Name und Preis erben sonst die Fließtext-Zeilenhöhe (1.65). Zwei Zeilen
   mit je ~7px Leading oben und unten sind der Grund, warum der Block
   vorher nach unten verrutscht wirkte und zu weit auseinanderstand. */
.cart-item-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.cart-item-info b{font-family:var(--display);font-weight:700;font-stretch:108%;font-size:.87rem;
  line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cart-item-info .mono{color:var(--cyan-hi);line-height:1.2;font-size:.7rem}
.cart-item-x{flex:0 0 auto;width:26px;height:26px;border-radius:8px;color:var(--ink-mute);
  display:flex;align-items:center;justify-content:center;transition:color .2s, background .2s}
.cart-item-x:hover{color:#FF8A80;background:rgba(255,138,128,.12)}

.cart-empty{text-align:center;padding:44px 12px;display:flex;flex-direction:column;
  align-items:center;gap:12px;margin:auto 0}
.cart-empty-ico{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;color:var(--ink-mute);background:rgba(255,255,255,.04);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.cart-empty b{font-family:var(--display);font-weight:800;font-stretch:110%;text-transform:uppercase;
  font-size:1rem}
.cart-empty p{color:var(--ink-mute);font-size:.85rem;max-width:30ch}
.cart-empty .btn{margin-top:6px}

.cart-upsell{margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.08);
  display:flex;flex-direction:column;gap:8px}
.cart-upsell-row{display:flex;align-items:center;gap:12px;padding:12px 13px;border-radius:13px;
  background:linear-gradient(120deg, color-mix(in srgb, var(--accent) 10%, transparent), rgba(255,255,255,.03));
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent)}
.cart-upsell-row b{display:block;font-family:var(--display);font-weight:700;font-stretch:108%;font-size:.82rem}
.cart-upsell-row p{color:var(--ink-mute);font-size:.74rem;line-height:1.45;margin-top:4px}
.cart-upsell-add{flex:0 0 auto;font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;
  padding:8px 12px;border-radius:9px;color:#02060C;white-space:nowrap;
  background:linear-gradient(135deg,var(--cyan-hi),var(--cyan));
  transition:box-shadow .25s, transform .25s var(--ease-out)}
.cart-upsell-add:hover{transform:translateY(-1px);box-shadow:0 10px 24px -10px rgba(46,168,240,.95)}

.cart-foot{padding:18px 22px 22px;border-top:1px solid rgba(255,255,255,.08);
  display:flex;flex-direction:column;gap:12px;background:rgba(4,8,16,.4)}
.cart-total{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.cart-total .mono{color:var(--ink-mute);text-transform:uppercase}
.cart-total b{font-family:var(--display);font-weight:800;font-stretch:112%;
  font-size:clamp(1.3rem,2.4vw,1.6rem);color:var(--cyan-hi)}
.cart-checkout{width:100%}
.cart-checkout .arr{transition:transform .3s var(--ease-out)}
.cart-checkout:hover .arr{transform:translateX(4px)}
.cart-checkout:disabled{opacity:.6;pointer-events:none}
.cart-note{color:var(--ink-mute);text-align:center;font-size:.56rem}
.cart-clear{font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;color:var(--ink-mute);
  text-transform:uppercase;padding:4px;transition:color .2s}
.cart-clear:hover{color:#FF8A80}

/* ============================================================
   MODALE (Upsell, Spotlight, Schnellansicht)
   ============================================================ */
.modal-overlay{position:fixed;inset:0;z-index:220;display:flex;align-items:center;
  justify-content:center;padding:clamp(14px,4vw,32px);
  background:rgba(3,6,12,.7);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;transition:opacity .32s var(--ease), visibility .32s}
.modal-overlay.is-open{opacity:1;visibility:visible}
.modal-card{position:relative;width:100%;max-width:520px;max-height:88vh;overflow-y:auto;
  padding:clamp(26px,4vw,36px);border-radius:22px;
  transform:translateY(18px) scale(.97);transition:transform .38s var(--ease-out)}
.modal-overlay.is-open .modal-card{transform:none}
.modal-x{position:absolute;top:14px;right:14px;z-index:5}

.upsell-confirm{display:inline-flex;align-items:center;gap:9px;font-size:.78rem;
  color:var(--ink-soft);padding:7px 13px 7px 8px;border-radius:99px;margin-bottom:20px;
  background:rgba(63,214,160,.1);box-shadow:inset 0 0 0 1px rgba(63,214,160,.26)}
.upsell-confirm b{font-weight:600;color:var(--ink)}
.upsell-check{width:19px;height:19px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;color:#02060C;background:var(--good);flex:0 0 auto}
.upsell-card h3{font-size:clamp(1.15rem,2.2vw,1.5rem)}
.upsell-reason{color:var(--ink-soft);font-size:.9rem;margin-top:10px;max-width:44ch}
.upsell-product{display:flex;align-items:center;gap:14px;margin:22px 0;padding:16px;
  border-radius:16px;
  background:linear-gradient(130deg, color-mix(in srgb, var(--accent) 13%, transparent), rgba(255,255,255,.03));
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 26%, transparent)}
.upsell-plate{flex:0 0 auto;width:50px;height:50px;border-radius:13px;
  display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:.58rem;
  color:color-mix(in srgb, var(--accent) 82%, #fff);
  background:radial-gradient(120% 120% at 50% 0%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent)}
.upsell-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.upsell-cat{color:color-mix(in srgb, var(--accent) 75%, #fff);text-transform:uppercase;font-size:.56rem}
.upsell-body b{font-family:var(--display);font-weight:700;font-stretch:108%;font-size:.95rem}
.upsell-body p{color:var(--ink-mute);font-size:.78rem;line-height:1.5}
.upsell-price{flex:0 0 auto;font-family:var(--display);font-weight:800;font-stretch:112%;
  font-size:1.05rem;color:var(--cyan-hi)}
.upsell-actions{display:flex;gap:10px;flex-wrap:wrap}
.upsell-actions .btn{flex:1 1 auto;justify-content:center}

/* ============================================================
   SPOTLIGHT — dezentes Pop-up für das neueste Script
   Kommt von unten rechts als Karte, nicht als Vollbild-Sperre:
   es soll auffallen, aber niemanden aussperren.
   ============================================================ */
.spotlight{position:fixed;right:clamp(12px,2.4vw,26px);bottom:clamp(12px,2.4vw,26px);
  z-index:180;width:min(360px, calc(100vw - 24px));padding:20px 20px 22px;border-radius:20px;
  opacity:0;transform:translateY(22px) scale(.97);pointer-events:none;
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out)}
.spotlight.is-open{opacity:1;transform:none;pointer-events:auto}
.spotlight-x{position:absolute;top:11px;right:11px;width:26px;height:26px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;color:var(--ink-mute);
  transition:color .2s, background .2s;z-index:5}
.spotlight-x:hover{color:var(--ink);background:rgba(255,255,255,.09)}
.spotlight-top{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.spotlight-plate{flex:0 0 auto;width:44px;height:44px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:.55rem;
  color:color-mix(in srgb, var(--accent) 82%, #fff);
  background:radial-gradient(120% 120% at 50% 0%, color-mix(in srgb, var(--accent) 32%, transparent), transparent 70%);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 42%, transparent)}
.spotlight-eyebrow{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:.56rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--cyan-hi)}
.spotlight-eyebrow::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--cyan);
  box-shadow:0 0 8px 1px var(--cyan);animation:pulse 2.4s infinite}
.spotlight h4{font-family:var(--display);font-weight:800;font-stretch:112%;text-transform:uppercase;
  font-size:1.02rem;letter-spacing:-.01em;margin:5px 0 0}
.spotlight p{color:var(--ink-soft);font-size:.83rem;line-height:1.55}
.spotlight-foot{display:flex;align-items:center;gap:10px;margin-top:16px;flex-wrap:wrap}
.spotlight-price{font-family:var(--display);font-weight:800;font-stretch:112%;font-size:1.05rem;
  color:var(--cyan-hi);margin-right:auto}
.spotlight .btn{padding:11px 16px;font-size:.66rem}
.spotlight-note{font-family:var(--mono);font-size:.53rem;letter-spacing:.11em;color:var(--ink-mute);
  margin-top:13px;text-transform:uppercase}

/* ============================================================
   TOAST
   ============================================================ */
.toast{position:fixed;left:50%;bottom:26px;z-index:300;transform:translate(-50%,22px);
  display:flex;align-items:center;gap:10px;max-width:min(440px,calc(100vw - 28px));
  padding:12px 18px;border-radius:13px;font-size:.83rem;color:var(--ink);
  background:linear-gradient(180deg, rgba(22,32,50,.95), rgba(9,14,26,.97));
  box-shadow:0 20px 50px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.14);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  opacity:0;pointer-events:none;transition:opacity .3s var(--ease), transform .35s var(--ease-out)}
.toast.is-in{opacity:1;transform:translate(-50%,0)}
.toast-ico{width:19px;height:19px;border-radius:50%;flex:0 0 auto;display:flex;
  align-items:center;justify-content:center;color:#02060C;background:var(--good)}

/* ============================================================
   PAKETKARTEN — der Kern des Shops
   Baut bewusst auf .work-card auf (gleiches Visual, gleicher Rhythmus),
   ergänzt aber Preis, Kaufen-Button und Framework-Chips.
   ============================================================ */
.pkg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(285px,1fr));gap:14px}
@media (min-width:1100px){.pkg-grid{grid-template-columns:repeat(3,1fr)}}

.pkg-card{--accent:var(--cyan);position:relative;padding:0;display:flex;flex-direction:column;
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease)}
.pkg-card-link{position:absolute;inset:0;z-index:4}
.pkg-vis{position:relative;height:clamp(146px,17vw,172px);overflow:hidden;
  background:
    radial-gradient(90% 130% at 50% 118%, color-mix(in srgb, var(--accent) 36%, transparent), transparent 66%),
    var(--grey-soft), linear-gradient(160deg, rgba(24,32,46,.5), rgba(6,11,20,.55));
  border-bottom:1px solid rgba(255,255,255,.08)}
.pkg-vis::before{content:'';position:absolute;inset:0;
  background-image:
    linear-gradient(to right, rgba(196,210,226,.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(196,210,226,.07) 1px, transparent 1px);
  background-size:26px 26px;
  mask-image:radial-gradient(70% 70% at 50% 100%, #000, transparent 72%);
  -webkit-mask-image:radial-gradient(70% 70% at 50% 100%, #000, transparent 72%)}
.pkg-vis::after{content:'';position:absolute;inset:0;
  background-image:radial-gradient(color-mix(in srgb, var(--accent) 26%, transparent) 1px, transparent 1px);
  background-size:14px 14px;
  mask-image:linear-gradient(215deg,#000 0%,transparent 42%);
  -webkit-mask-image:linear-gradient(215deg,#000 0%,transparent 42%);opacity:.55}
.pkg-plate{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-family:var(--display);font-weight:900;font-stretch:120%;text-transform:uppercase;
  font-size:clamp(1.7rem,3.6vw,2.1rem);letter-spacing:-.02em;color:transparent;
  -webkit-text-stroke:1px color-mix(in srgb, var(--accent) 55%, transparent);
  opacity:.5;transition:opacity .5s var(--ease), letter-spacing .6s var(--ease)}
.pkg-card:hover .pkg-plate{opacity:.9;letter-spacing:.03em}
/* Echtes Tebex-Bild überlagert die generierte Grafik, sobald eines gepflegt ist */
.pkg-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;
  opacity:.92;transition:transform .7s var(--ease-out), opacity .4s}
.pkg-card:hover .pkg-shot{transform:scale(1.04)}

.pkg-badges{position:absolute;top:14px;left:14px;z-index:3;display:flex;flex-direction:column;
  gap:6px;align-items:flex-start}
.pkg-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:8px;
  font-family:var(--mono);font-size:.53rem;letter-spacing:.14em;text-transform:uppercase;
  color:color-mix(in srgb, var(--accent) 70%, #fff);
  background:rgba(6,11,20,.68);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent)}
.pkg-badge::before{content:'';width:4px;height:4px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 8px 1px var(--accent)}
.pkg-badge--new{color:var(--good);box-shadow:inset 0 0 0 1px rgba(63,214,160,.4)}
.pkg-badge--new::before{background:var(--good);box-shadow:0 0 8px 1px var(--good)}
.pkg-badge--top{color:var(--amber);box-shadow:inset 0 0 0 1px rgba(255,180,84,.4)}
.pkg-badge--top::before{background:var(--amber);box-shadow:0 0 8px 1px var(--amber)}

.pkg-ms{position:absolute;top:15px;right:16px;z-index:3;font-family:var(--mono);font-size:.55rem;
  letter-spacing:.1em;color:var(--ink-mute)}
.pkg-fw{position:absolute;left:14px;bottom:14px;z-index:3;display:flex;gap:5px;flex-wrap:wrap}
.fw-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 8px;border-radius:7px;
  font-family:var(--mono);font-size:.52rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-soft);background:rgba(6,11,20,.7);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.13)}
.fw-chip::before{content:'';width:4px;height:4px;border-radius:50%;background:var(--good);opacity:.85}
.pkg-body{padding:19px 21px 6px;display:flex;flex-direction:column;flex:1}
.pkg-cat{font-family:var(--mono);font-size:.55rem;letter-spacing:.16em;text-transform:uppercase;
  color:color-mix(in srgb, var(--accent) 72%, #fff);margin-bottom:9px}
.pkg-name{font-family:var(--display);font-weight:800;font-stretch:108%;text-transform:none;
  font-size:1.02rem;letter-spacing:-.005em;overflow-wrap:anywhere;margin:0 0 9px}
.pkg-desc{color:var(--ink-soft);font-size:.855rem;line-height:1.6;flex:1;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pkg-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}

.pkg-foot{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;
  gap:10px;margin-top:16px;padding:14px 21px 18px;border-top:1px solid rgba(255,255,255,.08)}
.pkg-price{display:flex;flex-direction:column;gap:2px;line-height:1.1}
.pkg-price span{font-family:var(--mono);font-size:.52rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-mute)}
.pkg-price b{font-family:var(--display);font-weight:800;font-stretch:112%;font-size:1.15rem;
  color:var(--ink)}
.btn-buy{display:inline-flex;align-items:center;gap:8px;padding:11px 16px;border-radius:11px;
  font-family:var(--mono);font-size:.65rem;letter-spacing:.11em;text-transform:uppercase;
  color:#02060C;white-space:nowrap;position:relative;overflow:hidden;
  background:linear-gradient(135deg, var(--cyan), var(--cyan-deep));
  box-shadow:0 10px 26px -14px rgba(46,168,240,.9), inset 0 1px 0 rgba(255,255,255,.4);
  transition:transform .3s var(--ease-out), box-shadow .3s var(--ease), background .3s}
.btn-buy:hover{transform:translateY(-2px);box-shadow:0 16px 34px -14px rgba(46,168,240,1)}
/* "Liegt schon im Warenkorb" — gilt für die Karten-Buttons wie für den
   großen Button in der Kaufbox, beide tragen [data-buy]. Die Beschriftung
   wechselt in js/cart.js mit, ein zusätzliches Häkchen wäre doppelt. */
.btn-buy.in-cart,.btn.in-cart{color:var(--good);background:rgba(63,214,160,.12);
  box-shadow:inset 0 0 0 1px rgba(63,214,160,.4)}
.btn-buy.in-cart::after,.btn.in-cart::after{display:none}
.btn-buy.in-cart:hover{transform:none;box-shadow:inset 0 0 0 1px rgba(63,214,160,.6)}

.pkg-card:hover{transform:translateY(-5px)}
@media not all and (hover:hover){.pkg-card:hover{transform:none}}

/* Ladezustand: gleiche Silhouette wie eine echte Karte, damit beim
   Eintreffen der Tebex-Daten nichts springt. */
.pkg-skeleton{position:relative;overflow:hidden;min-height:360px;border-radius:18px;
  background:linear-gradient(158deg, rgba(24,36,58,.35), rgba(8,14,26,.3));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.pkg-skeleton::after{content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.06) 50%,transparent 80%);
  animation:skelSweep 1.5s linear infinite}
@keyframes skelSweep{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

/* ============================================================
   KATALOG-STEUERUNG (scripts.html)
   ============================================================ */
.store-controls{display:flex;flex-direction:column;gap:14px;margin-bottom:clamp(24px,4vw,38px)}
/* Zwei Filterreihen (Kategorie, Framework). Die feste Mindestbreite des
   Labels hält die Chips beider Reihen auf derselben Startlinie —
   ohne sie tanzen die Gruppen je nach Wortlänge gegeneinander. */
.filter-group{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.filter-label{flex:0 0 auto;min-width:82px;
  font-family:var(--mono);font-size:.58rem;letter-spacing:.17em;text-transform:uppercase;
  color:var(--ink-mute)}
@media (max-width:620px){
  .filter-group{gap:8px}
  .filter-label{min-width:0;width:100%}
}
.filter-tabs{display:flex;flex-wrap:wrap;gap:7px}
.filter-tab{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.65rem;
  letter-spacing:.09em;text-transform:uppercase;padding:9px 15px;border-radius:11px;
  color:var(--ink-soft);background:rgba(255,255,255,.05);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.11);
  transition:color .25s, background .25s, box-shadow .25s}
.filter-tab:hover{color:var(--ink);background:rgba(255,255,255,.09)}
.filter-tab[aria-pressed="true"]{color:#02060C;background:var(--cyan-hi);
  box-shadow:inset 0 0 0 1px var(--cyan-hi)}
.filter-tab .cnt{font-size:.9em;opacity:.6}
.filter-tab[aria-pressed="true"] .cnt{opacity:.65}

.store-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.search-box{position:relative;flex:1 1 260px;max-width:440px}
.search-box svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);
  color:var(--ink-mute);pointer-events:none}
.search-box input{width:100%;font:inherit;font-family:var(--body);font-size:.9rem;color:var(--ink);
  appearance:none;-webkit-appearance:none;border:0;margin:0;padding:12px 14px 12px 42px;
  border-radius:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.03));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  transition:box-shadow .25s var(--ease), background .25s var(--ease)}
.search-box input::placeholder{color:var(--ink-mute);opacity:1}
.search-box input:focus{outline:0;
  background:linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.04));
  box-shadow:inset 0 0 0 1px var(--cyan), 0 0 0 3px rgba(46,168,240,.16)}
.search-box input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none}

.sort-select{position:relative;flex:0 0 auto}
/* background-COLOR ist hier kein Feinschliff, sondern die Reparatur:
   `appearance:none` entfernt nur das native Aussehen, nicht die
   UA-Hintergrundfarbe eines <select> (system `Field`, also Weiß). Wer
   danach bloß `background-image` setzt, legt seinen Verlauf über Weiß —
   das Feld blieb hell und die helle Schrift darauf unlesbar.
   Zusammen mit color-scheme:dark auf :root ist auch die aufklappende
   Liste dunkel, statt vom Betriebssystem hell gezeichnet zu werden. */
.sort-select select{font-family:var(--mono);font-size:.65rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-soft);cursor:pointer;
  appearance:none;-webkit-appearance:none;border:0;margin:0;
  padding:12px 34px 12px 15px;border-radius:12px;
  background-color:#101828;
  background-image:linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.03)),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'><path d='M1 1l4 4 4-4' fill='none' stroke='%236C819B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat, no-repeat;
  background-position:center, right 13px center;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  transition:box-shadow .25s, color .25s}
.sort-select select:hover{color:var(--ink);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.sort-select select:focus{outline:0;box-shadow:inset 0 0 0 1px var(--cyan), 0 0 0 3px rgba(46,168,240,.16)}
.sort-select select option{background-color:#101828;color:var(--ink);
  font-family:var(--body);text-transform:none;letter-spacing:0}

.store-meta{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;color:var(--ink-mute);
  margin-bottom:18px}
.store-meta b{color:var(--cyan-hi);font-weight:400}
.store-status{display:inline-flex;align-items:center;gap:8px}
.store-status::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--good);
  box-shadow:0 0 8px 1px rgba(63,214,160,.7)}
.store-status.is-preview::before{background:var(--amber);box-shadow:0 0 8px 1px rgba(255,180,84,.7)}
/* Erscheint erst, sobald wirklich gefiltert wird — ein dauerhaft
   sichtbares "Zurücksetzen" ohne etwas zurückzusetzen ist nur Rauschen. */
.store-reset{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-mute);margin-left:12px;padding:4px 9px;border-radius:7px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);transition:color .2s, background .2s}
.store-reset:hover{color:var(--ink);background:rgba(255,255,255,.07)}

.empty-note{grid-column:1/-1;text-align:center;padding:clamp(46px,8vw,80px) 20px;border-radius:18px;
  background:rgba(255,255,255,.02);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.empty-note b{display:block;font-family:var(--display);font-weight:800;font-stretch:110%;
  text-transform:uppercase;font-size:1.05rem;margin-bottom:8px}
.empty-note p{color:var(--ink-mute);font-size:.88rem;max-width:38ch;margin-inline:auto}

/* Hinweisbanner, wenn der Shop noch nicht mit Tebex verbunden ist */
.notice{display:flex;align-items:flex-start;gap:13px;padding:15px 18px;border-radius:14px;
  margin-bottom:22px;background:rgba(255,180,84,.07);
  box-shadow:inset 0 0 0 1px rgba(255,180,84,.26)}
.notice-ico{flex:0 0 auto;width:20px;height:20px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;font-family:var(--mono);font-size:.65rem;
  color:#02060C;background:var(--amber)}
.notice p{color:var(--ink-soft);font-size:.83rem;line-height:1.55}
.notice b{color:var(--amber);font-weight:600}

/* ============================================================
   PRODUKTSEITE (script.html)
   ============================================================ */
.product-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,.85fr);
  gap:clamp(20px,3vw,34px);align-items:start}
@media (max-width:1000px){.product-grid{grid-template-columns:1fr}}

.product-hero{--accent:var(--cyan);position:relative;height:clamp(200px,26vw,320px);
  border-radius:20px;overflow:hidden;margin-bottom:clamp(22px,3.4vw,32px);
  background:
    radial-gradient(90% 130% at 50% 118%, color-mix(in srgb, var(--accent) 34%, transparent), transparent 66%),
    var(--grey-soft), linear-gradient(160deg, rgba(24,32,46,.55), rgba(6,11,20,.6));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.product-hero::before{content:'';position:absolute;inset:0;
  background-image:
    linear-gradient(to right, rgba(196,210,226,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(196,210,226,.06) 1px, transparent 1px);
  background-size:34px 34px;
  mask-image:radial-gradient(70% 70% at 50% 100%, #000, transparent 74%);
  -webkit-mask-image:radial-gradient(70% 70% at 50% 100%, #000, transparent 74%)}
.product-hero .pkg-plate{font-size:clamp(2.6rem,7vw,4.4rem)}
.product-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.product-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  flex-wrap:wrap;margin-bottom:20px}
.product-head h1{font-size:clamp(1.7rem,4vw,2.9rem);text-transform:none;letter-spacing:-.015em;
  overflow-wrap:anywhere}
.product-sub{color:var(--ink-soft);font-size:clamp(.95rem,1.05vw,1.05rem);max-width:62ch;
  margin-top:16px}

.product-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:12px;
  margin:clamp(24px,3.5vw,34px) 0}
.fact{padding:15px 16px;border-radius:13px;background:rgba(255,255,255,.035);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)}
.fact b{display:block;font-family:var(--display);font-weight:800;font-stretch:110%;
  font-size:1.05rem;line-height:1.1}
.fact span{display:block;font-family:var(--mono);font-size:.53rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-mute);margin-top:7px}

.product-prose{color:var(--ink-soft);font-size:.94rem;line-height:1.75;max-width:70ch}
.product-prose h2{font-size:clamp(1.2rem,2vw,1.6rem);margin:32px 0 14px}
.product-prose h3{margin:26px 0 10px;color:var(--cyan-hi)}
.product-prose p{margin:0 0 14px}
.product-prose ul{padding-left:1.2em;list-style:disc;margin:0 0 16px}
.product-prose li{margin-bottom:7px}
.product-prose a{color:var(--cyan-hi);text-decoration:underline;text-underline-offset:3px}
.product-prose img{border-radius:14px;margin:18px 0}
.product-prose code{font-family:var(--mono);font-size:.85em;padding:2px 6px;border-radius:5px;
  background:rgba(255,255,255,.07)}

.feature-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px;
  margin:22px 0 0}
.feature-item{display:flex;align-items:flex-start;gap:11px;padding:13px 15px;border-radius:12px;
  background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);
  font-size:.85rem;color:var(--ink-soft);line-height:1.5}
.feature-check{flex:0 0 auto;width:18px;height:18px;border-radius:50%;margin-top:1px;
  display:flex;align-items:center;justify-content:center;color:var(--cyan-hi);
  background:rgba(46,168,240,.14);box-shadow:inset 0 0 0 1px rgba(46,168,240,.34)}

/* Kaufbox — bleibt beim Scrollen sichtbar, das ist der Kaufmoment */
.buybox{position:sticky;top:calc(var(--navh) + 24px);padding:24px 22px 26px;border-radius:20px}
.buybox-price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.buybox-price b{font-family:var(--display);font-weight:900;font-stretch:114%;
  font-size:clamp(1.9rem,3.4vw,2.5rem);line-height:1;
  background:linear-gradient(103deg, var(--cyan-hi), var(--cyan) 55%, var(--cyan-deep));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.buybox-price span{font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-mute)}
.buybox .btn{width:100%;justify-content:center;margin-top:18px}
.buybox-list{display:flex;flex-direction:column;gap:11px;margin-top:22px;padding-top:20px;
  border-top:1px solid rgba(255,255,255,.09)}
.buybox-list li{display:flex;align-items:flex-start;gap:10px;font-size:.82rem;color:var(--ink-soft)}
.buybox-list svg{flex:0 0 auto;margin-top:3px;color:var(--good)}
.buybox-note{font-family:var(--mono);font-size:.54rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-mute);text-align:center;margin-top:16px}

.related{margin-top:clamp(50px,7vw,84px)}

/* ============================================================
   DOKUMENTATION (docs.html)
   ============================================================ */
.docs-layout{display:grid;grid-template-columns:236px minmax(0,1fr);
  gap:clamp(24px,4vw,52px);align-items:start}
@media (max-width:900px){.docs-layout{grid-template-columns:1fr}}

.docs-side{position:sticky;top:calc(var(--navh) + 24px);max-height:calc(100vh - var(--navh) - 48px);
  overflow-y:auto;padding-right:6px;scrollbar-width:thin}
@media (max-width:900px){
  .docs-side{position:static;max-height:none;padding:16px;border-radius:16px;
    background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
}
.docs-side h4{font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-mute);margin:22px 0 8px}
.docs-side h4:first-child{margin-top:0}
.docs-side a{display:block;padding:7px 11px;border-radius:9px;font-size:.83rem;
  color:var(--ink-soft);transition:color .2s, background .2s}
.docs-side a:hover{color:var(--ink);background:rgba(255,255,255,.06)}
.docs-side a.is-active{color:var(--cyan-hi);background:rgba(46,168,240,.1);
  box-shadow:inset 0 0 0 1px rgba(46,168,240,.22)}

.docs-main{min-width:0}
.docs-search{margin-bottom:22px}
.doc-section{scroll-margin-top:calc(var(--navh) + 34px);margin-bottom:clamp(38px,6vw,64px)}
.doc-section > h2{font-size:clamp(1.35rem,2.6vw,2rem);margin-bottom:8px}
.doc-lede{color:var(--ink-soft);font-size:.95rem;max-width:66ch;margin-bottom:24px}
.doc-block{padding:22px 24px 24px;border-radius:16px;margin-bottom:12px}
.doc-block h3{margin-bottom:10px;color:var(--ink)}
.doc-block p{color:var(--ink-soft);font-size:.89rem;line-height:1.7;margin-bottom:12px}
.doc-block p:last-child{margin-bottom:0}
.doc-block ul,.doc-block ol{padding-left:1.25em;list-style:disc;color:var(--ink-soft);
  font-size:.89rem;line-height:1.7;margin-bottom:12px}
.doc-block ol{list-style:decimal}
.doc-block li{margin-bottom:6px}
.doc-block a{color:var(--cyan-hi);text-decoration:underline;text-underline-offset:3px}
.doc-block code,.inline-code{font-family:var(--mono);font-size:.84em;padding:2px 6px;
  border-radius:5px;background:rgba(255,255,255,.07);color:var(--cyan-hi)}

.code-block{position:relative;margin:14px 0;border-radius:13px;overflow:hidden;
  background:rgba(3,7,14,.72);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.code-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 13px;border-bottom:1px solid rgba(255,255,255,.08);
  font-family:var(--mono);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-mute)}
.code-copy{font-family:var(--mono);font-size:.56rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-mute);padding:3px 8px;border-radius:6px;transition:color .2s, background .2s}
.code-copy:hover{color:var(--cyan-hi);background:rgba(46,168,240,.12)}
.code-block pre{margin:0;padding:14px 15px;overflow-x:auto;
  font-family:var(--mono);font-size:.76rem;line-height:1.75;color:var(--ink-soft)}
.code-block pre::-webkit-scrollbar{height:6px}
.code-block pre::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:3px}

.callout{display:flex;gap:12px;padding:15px 17px;border-radius:13px;margin:14px 0;
  background:rgba(46,168,240,.07);box-shadow:inset 0 0 0 1px rgba(46,168,240,.22)}
.callout-ico{flex:0 0 auto;width:20px;height:20px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;font-family:var(--mono);font-size:.62rem;
  color:#02060C;background:var(--cyan-hi)}
.callout p{color:var(--ink-soft);font-size:.85rem;line-height:1.65;margin:0}
.callout--warn{background:rgba(255,180,84,.07);box-shadow:inset 0 0 0 1px rgba(255,180,84,.24)}
.callout--warn .callout-ico{background:var(--amber)}

.doc-table{width:100%;border-collapse:collapse;margin:14px 0;font-size:.83rem}
.doc-table th,.doc-table td{text-align:left;padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,.08);vertical-align:top}
.doc-table th{font-family:var(--mono);font-size:.56rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-mute);font-weight:400}
.doc-table td{color:var(--ink-soft)}
.doc-table code{white-space:nowrap}
.table-scroll{overflow-x:auto}

/* ============================================================
   SUPPORT
   ============================================================ */
.channel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:14px}
.channel-card{padding:26px 24px 28px;display:flex;flex-direction:column;
  transition:transform .45s var(--ease-out)}
.channel-ico{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;
  justify-content:center;color:color-mix(in srgb, var(--accent,var(--cyan)) 80%, #fff);
  background:radial-gradient(120% 120% at 50% 0%, color-mix(in srgb, var(--accent,var(--cyan)) 26%, transparent), transparent 70%);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent,var(--cyan)) 36%, transparent);
  margin-bottom:16px}
.channel-card h3{margin-bottom:9px}
.channel-card p{color:var(--ink-soft);font-size:.87rem;flex:1}
.channel-meta{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.55rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-mute);margin-top:16px}
.channel-card .btn{margin-top:18px;justify-content:center}

.status-bar{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding:18px 22px;border-radius:16px;margin-bottom:clamp(26px,4vw,40px)}
.status-list{display:flex;gap:20px;flex-wrap:wrap}
.status-item{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.62rem;
  letter-spacing:.08em;color:var(--ink-soft)}
.status-item::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--good);
  box-shadow:0 0 0 0 rgba(63,214,160,.6);animation:pulse 2.6s infinite}

/* ============================================================
   HOMEPAGE-BAUSTEINE
   ============================================================ */
/* Vertrauensleiste unter dem Hero */
.badge-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.mini-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 13px;border-radius:10px;
  font-family:var(--mono);font-size:.58rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-soft);background:rgba(255,255,255,.045);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.11)}
.mini-badge svg{color:var(--cyan-hi)}

/* Schritt-für-Schritt "So läufts" — kompakter als die Custom-Timeline */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;
  counter-reset:step}
.step-card{position:relative;padding:26px 22px 28px}
.step-card::before{counter-increment:step;content:'0' counter(step);
  font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;color:var(--cyan);opacity:.75}
.step-card h3{margin:13px 0 10px}
.step-card p{color:var(--ink-soft);font-size:.87rem}

/* Vergleich Shop vs. Custom — führt beide Geschäftszweige sauber zusammen */
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
.split-card{padding:clamp(26px,3.4vw,38px);display:flex;flex-direction:column}
.split-card h3{font-size:clamp(1.05rem,1.7vw,1.35rem);margin:14px 0 12px}
.split-card p{color:var(--ink-soft);font-size:.89rem}
.split-card ul{display:flex;flex-direction:column;gap:9px;margin:18px 0 0;flex:1}
.split-card li{display:flex;align-items:flex-start;gap:10px;font-size:.85rem;color:var(--ink-soft)}
.split-card li svg{flex:0 0 auto;margin-top:3px;color:var(--cyan-hi)}
.split-card .btn{margin-top:24px;align-self:flex-start}

/* Bewertungs-Kopfzeile mit Durchschnitt */
.rating-summary{display:flex;align-items:center;justify-content:center;gap:clamp(16px,3vw,34px);
  flex-wrap:wrap;margin-top:26px}
.rating-score{display:flex;align-items:baseline;gap:8px}
.rating-score b{font-family:var(--display);font-weight:900;font-stretch:114%;
  font-size:clamp(2rem,4vw,2.8rem);line-height:1;color:var(--amber)}
.rating-score span{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;color:var(--ink-mute)}
.rating-stars{color:var(--amber);letter-spacing:.2em;font-size:1rem;
  filter:drop-shadow(0 0 8px rgba(255,180,84,.4))}

/* ============================================================
   RESPONSIVE — Shop
   ============================================================ */
@media (max-width:1080px){
  .nav-links{display:none}
  .nav-burger{display:flex}
}
@media (min-width:1081px){
  .mobile-nav{display:none}
}
@media (max-width:760px){
  .pkg-grid{grid-template-columns:1fr}
  .buybox{position:static}
  .spotlight{left:clamp(12px,2.4vw,26px);width:auto}
}
@media (hover:hover) and (pointer:fine) and (min-width:1280px){
  .channel-card:hover{transform:translateY(-5px)}
  .btn-buy::after{content:'';position:absolute;top:0;left:-120%;width:60%;height:100%;
    background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);
    transition:left .7s var(--ease)}
  .btn-buy:hover::after{left:130%}
}
@media (prefers-reduced-motion:reduce){
  .spotlight,.modal-card,.cart-drawer,.toast{transition:opacity .2s !important}
  .pkg-skeleton::after{animation:none}
}