/* ============================================================
   CodeElite — styles.css
   Software-Marke der Elite Partners GmbH.
   Terminal-/IDE-Look mit zwei Farbmodi:
   - Dunkel: Neon auf Fast-Schwarz (Standard bei dunklem System)
   - Hell:   «Papier»-Grau/Weiss, dunkle Schrift, abgedunkeltes Grün
   Farben ausschliesslich über Tokens auf :root bzw.
   html[data-theme="light"]. data-theme setzt js/theme-init.js
   synchron im <head> (kein Aufblitzen).
   Massstab (Runde 2): ca. 15–20 % kompakter, zentral über Tokens.
   Schrift: JetBrains Mono überall.
   WICHTIG: <html> bekommt KEINEN eigenen Hintergrund – sonst malt der
   body-Hintergrund über die Canvas-Animation (#fx-bg, z-index:-1).
   ============================================================ */

/* ---------- Selbst gehostete Schrift (JetBrains Mono, Variable Font) ---------- */
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:100 800;
  font-display:swap;
  src:url('/assets/fonts/jetbrainsmono.woff2') format('woff2');
}
/* Metrik-angepasster Fallback (Consolas ~0.55em → JetBrains Mono 0.6em Zeichenbreite) */
@font-face{
  font-family:'JetBrains Mono Fallback';
  font-style:normal;
  font-weight:100 500;
  src:local('Consolas');
  size-adjust:109%;
}
@font-face{
  font-family:'JetBrains Mono Fallback';
  font-style:normal;
  font-weight:600 900;
  src:local('Consolas Bold'),local('Consolas-Bold');
  size-adjust:109%;
}

/* ============================================================
   TOKENS
   ============================================================ */
:root{
  color-scheme:dark;

  /* Flächen */
  --bg:#0A0A0A;
  --surface:#1A1A1A;
  --surface-2:#121212;
  --surface-3:#161616;
  --line:#333333;
  --line-strong:#4a4a4a;
  --band:rgba(18,18,18,.78);        /* halbtransparente Bänder: Animation scheint durch */
  --header-bg:rgba(10,10,10,.82);
  --float-bg:rgba(20,20,20,.88);

  /* Akzente */
  --neon:#39FF88;
  --neon-2:#5DCAA5;
  --neon-rgb:57,255,136;
  --neon2-rgb:93,202,165;
  --on-neon:#04140b;                /* Schrift auf grünen Flächen */
  --danger:#ff5c7a;

  /* Text */
  --text:#E6EAE8;
  --muted:#9E9E9E;
  --code:#5DCAA5;
  --placeholder:#858585;
  --field-line:#606060;
  --dot:#3a3a3a;

  /* Effekte */
  --glow:0 0 14px rgba(var(--neon-rgb),.45);
  --glow-sm:0 0 8px rgba(var(--neon-rgb),.30);
  --grad:linear-gradient(135deg,var(--neon) 0%,var(--neon-2) 100%);
  --shadow-sm:0 2px 12px rgba(0,0,0,.45);
  --shadow-md:0 10px 30px rgba(0,0,0,.55);
  --shadow-lg:0 20px 50px rgba(0,0,0,.65);
  --sheen:rgba(255,255,255,.18);

  /* Hintergrund-Animation (js/effects.js liest diese Werte) */
  --fx-dot:57,255,136;
  --fx-line:57,255,136;
  --fx-mouse:93,202,165;
  --fx-strength:1;
  --fx-opacity:.85;
  --cursor-glow:rgba(57,255,136,.10);
  --cursor-blend:screen;

  /* Massstab */
  --fs-base:15px;
  --radius:12px; --radius-lg:16px;
  --container:1060px; --header-h:60px;
  --gutter:22px;
  --sec-y:4rem;                     /* Abstand zwischen Sektionen */
  --pad-card:1.25rem;
  --gap:1.1rem;

  --font:'JetBrains Mono','JetBrains Mono Fallback',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
}

/* Heller Modus: explizit gewählt … */
html[data-theme="light"]{
  color-scheme:light;
  --bg:#F3F4F1;
  --surface:#FFFFFF;
  --surface-2:#ECEEEA;
  --surface-3:#E3E6E1;
  --line:#CBD1CA;
  --line-strong:#A9B1A8;
  --band:rgba(236,238,234,.80);
  --header-bg:rgba(243,244,241,.86);
  --float-bg:rgba(255,255,255,.92);

  --neon:#0A7A3D;                  /* 5.0:1 auf --bg, 5.4:1 auf Weiss (WCAG AA) */
  --neon-2:#0E6B57;                /* 5.8:1 auf --bg */
  --neon-rgb:10,122,61;
  --neon2-rgb:14,107,87;
  --on-neon:#FFFFFF;               /* 5.4:1 auf --neon */
  --danger:#B3203C;

  --text:#141A16;                  /* 16:1 */
  --muted:#4B524D;                 /* 7.4:1 */
  --code:#0E6B57;
  --placeholder:#5F6661;           /* ≥ 4.5:1 auf --surface-2 */
  --field-line:#8E968F;
  --dot:#C5CBC4;

  --glow:0 0 0 3px rgba(var(--neon-rgb),.16);
  --glow-sm:0 0 0 2px rgba(var(--neon-rgb),.12);
  --shadow-sm:0 2px 10px rgba(20,30,24,.07);
  --shadow-md:0 10px 28px rgba(20,30,24,.10);
  --shadow-lg:0 18px 44px rgba(20,30,24,.13);
  --sheen:rgba(255,255,255,.35);

  --fx-dot:10,122,61;
  --fx-line:10,122,61;
  --fx-mouse:14,107,87;
  --fx-strength:1.25;
  --fx-opacity:.75;
  --cursor-glow:rgba(10,122,61,.07);
  --cursor-blend:multiply;
}
/* … oder ohne JS per System-Einstellung */
@media (prefers-color-scheme:light){
  html:not([data-theme]){
    color-scheme:light;
    --bg:#F3F4F1; --surface:#FFFFFF; --surface-2:#ECEEEA; --surface-3:#E3E6E1;
    --line:#CBD1CA; --line-strong:#A9B1A8; --band:rgba(236,238,234,.80);
    --header-bg:rgba(243,244,241,.86); --float-bg:rgba(255,255,255,.92);
    --neon:#0A7A3D; --neon-2:#0E6B57; --neon-rgb:10,122,61; --neon2-rgb:14,107,87;
    --on-neon:#FFFFFF; --danger:#B3203C;
    --text:#141A16; --muted:#4B524D; --code:#0E6B57; --placeholder:#5F6661; --field-line:#8E968F; --dot:#C5CBC4;
    --glow:0 0 0 3px rgba(10,122,61,.16); --glow-sm:0 0 0 2px rgba(10,122,61,.12);
    --shadow-sm:0 2px 10px rgba(20,30,24,.07); --shadow-md:0 10px 28px rgba(20,30,24,.10); --shadow-lg:0 18px 44px rgba(20,30,24,.13);
    --sheen:rgba(255,255,255,.35);
  }
}

/* ---------- Reset / Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{font-size:var(--fs-base);scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px);-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font);
  font-size:1rem;
  line-height:1.65;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{margin:0;font-weight:700;line-height:1.18;letter-spacing:-.02em}
p{margin:0}
::selection{background:rgba(var(--neon-rgb),.28);color:var(--text)}

/* Statischer Verlauf als Grund-Hintergrund (bleibt auch bei «Bewegung reduzieren») */
body::before{
  content:"";
  position:fixed;inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(1100px 560px at 80% -10%, rgba(var(--neon-rgb),.07), transparent 60%),
    radial-gradient(860px 480px at 0% 100%, rgba(var(--neon2-rgb),.05), transparent 60%);
}

.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}

/* ---------- Utility ---------- */
.eyebrow{font-size:.84rem;font-weight:500;color:var(--neon-2);letter-spacing:.02em;margin-bottom:.8rem}
.eyebrow .tok{color:var(--muted)}
.neon{color:var(--neon)}
.text-muted{color:var(--muted)}
.sr-only{
  position:absolute !important;
  width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);
  white-space:nowrap;border:0;
}
/* Blinkender Cursor — endet nach wenigen Zyklen (< 5 s, WCAG 2.2.2) */
.blink{animation:blink 1.05s steps(1) 4;color:var(--neon)}
@keyframes blink{50%{opacity:0}}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  min-height:42px;
  font-family:var(--font);font-size:.93rem;font-weight:600;
  padding:.55rem 1.1rem;border-radius:9px;
  border:1px solid transparent;cursor:pointer;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
  white-space:nowrap;
}
.btn-sm{padding:.4rem .85rem;font-size:.88rem;min-height:40px}
.btn-block{width:100%}
.btn-primary{background:var(--neon);color:var(--on-neon);border-color:var(--neon)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--glow)}
.btn-ghost{background:transparent;color:var(--neon);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--neon);box-shadow:var(--glow-sm);transform:translateY(-2px)}
.btn::before{content:"$ ";color:currentColor;opacity:.55;font-weight:700}
.btn.no-prompt::before{content:none}

/* ---------- Skip-Link ---------- */
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--neon);color:var(--on-neon);padding:.65rem 1rem;font-weight:700;border-radius:0 0 8px 0}
.skip-link:focus{left:0;outline:2px solid var(--on-neon);outline-offset:-4px}
#main:focus{outline:none}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  height:var(--header-h);
  background:var(--header-bg);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.header-inner{display:flex;align-items:center;gap:.7rem;height:100%}
.brand{display:inline-flex;align-items:center;gap:.55rem}
.header-inner > .brand{margin-right:auto}
.brand-mark{
  display:grid;place-items:center;
  width:30px;height:30px;border-radius:8px;
  background:var(--surface);border:1px solid var(--line);
  box-shadow:var(--glow-sm);
}
.brand-mark svg{width:18px;height:18px}
/* Logo-Striche folgen dem Farbmodus (überschreibt die SVG-Attribute) */
.brand-mark svg path{stroke:var(--neon)}
.brand-mark svg line{stroke:var(--neon-2)}
.brand-name{font-size:1.07rem;font-weight:700;letter-spacing:-.03em;color:var(--text)}
.brand-accent{color:var(--neon)}
.brand-cursor{color:var(--neon);animation:blink 1.05s steps(1) 4;margin-left:1px}

.nav-links{display:flex;align-items:center;gap:1.2rem;order:1}
.nav-links a:not(.btn){font-size:.9rem;color:var(--muted);transition:color .15s;white-space:nowrap}
.nav-links a:not(.btn):hover{color:var(--text)}
.nav-links a.active:not(.btn){color:var(--neon)}
.nav-links .nav-konto{border-color:var(--line-strong)}

.nav-toggle{
  display:none;flex-direction:column;justify-content:center;gap:5px;order:3;
  width:42px;height:42px;background:transparent;border:1px solid var(--line);
  border-radius:9px;cursor:pointer;padding:0 10px;
}
.nav-toggle span{height:2px;width:100%;background:var(--neon);border-radius:2px;transition:.25s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- Hell/Dunkel-Umschalter ---------- */
.theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-width:42px;height:42px;padding:0 10px;order:2;
  font-family:var(--font);font-size:.9rem;color:var(--neon);
  background:transparent;border:1px solid var(--line);border-radius:9px;cursor:pointer;
  transition:border-color .2s, box-shadow .2s, color .2s;
}
.theme-toggle:hover{border-color:var(--neon);box-shadow:var(--glow-sm)}
.theme-toggle .ti{width:19px;height:19px;flex:0 0 auto;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
/* Im dunklen Modus zeigt der Knopf die Sonne (→ hell), im hellen den Mond (→ dunkel) */
.theme-toggle .ti-moon{display:none}
html[data-theme="light"] .theme-toggle .ti-sun{display:none}
html[data-theme="light"] .theme-toggle .ti-moon{display:block}
@media (prefers-color-scheme:light){
  html:not([data-theme]) .theme-toggle .ti-sun{display:none}
  html:not([data-theme]) .theme-toggle .ti-moon{display:block}
}
.theme-toggle--menu{display:none}

/* ---------- Sections ---------- */
section{padding:var(--sec-y) 0}
.section-head{max-width:680px;margin-bottom:2rem}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
h1{font-size:clamp(1.8rem,4.3vw,2.75rem)}
h2{font-size:clamp(1.35rem,2.7vw,1.85rem)}
h3{font-size:1.07rem}
.lead{color:var(--muted);font-size:clamp(1rem,1.6vw,1.07rem);margin-top:.8rem}

/* ---------- Hero ---------- */
.hero{padding:3rem 0 2.5rem}
.hero-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:2.4rem;align-items:center}
.hero h1{font-size:clamp(1.8rem,3.8vw,2.5rem)}
.wordmark{font-size:clamp(2.1rem,5.4vw,3.4rem);letter-spacing:-.04em}
.wordmark .brand-accent{color:var(--neon)}
.wordmark .brand-cursor{color:var(--neon);animation:blink 1.05s steps(1) 4}
.hero-sub{color:var(--muted);font-size:clamp(1rem,1.6vw,1.1rem);margin:1rem 0 1.4rem;max-width:44ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:.75rem}

/* ---------- Terminal-Fenster ---------- */
.terminal{
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:11px;
  box-shadow:var(--shadow-lg), 0 0 0 1px rgba(var(--neon-rgb),.05);
  overflow:hidden;
}
.terminal-bar{
  display:flex;align-items:center;gap:.45rem;
  padding:.6rem .8rem;
  background:var(--surface-3);border-bottom:1px solid var(--line);
}
.term-dot{width:10px;height:10px;border-radius:50%;background:var(--dot)}
.term-dot.g{background:var(--neon);box-shadow:var(--glow-sm)}
.term-dot.y{background:var(--neon-2)}
.term-title{margin-left:.5rem;font-size:.8rem;color:var(--muted)}
.terminal-body{padding:1.05rem 1.15rem 1.25rem;font-size:.92rem;line-height:1.85}
.term-line{white-space:pre-wrap;word-break:break-word}
.term-prompt{color:var(--neon);font-weight:700;margin-right:.5rem}
.term-cmd{color:var(--text)}
.term-out{color:var(--muted)}
.term-out .ok{color:var(--neon);font-weight:700}
.term-out .tag{color:var(--neon-2)}
.term-out .err{color:var(--danger)}
.term-slogan{color:var(--text);font-weight:600;margin-top:.3rem}
.term-slogan .ok{color:var(--neon)}
.term-slogan .tag{color:var(--neon-2)}
.type-cursor{
  display:inline-block;width:.6ch;height:1.05em;transform:translateY(.16em);
  background:var(--neon);margin-left:2px;
  animation:blink 1.05s steps(1) 4;
}
.term-out,.term-slogan{transition:opacity .35s ease}
.js .term-hidden{visibility:hidden;opacity:0}

/* ---------- Cards ---------- */
.grid{display:grid;gap:var(--gap)}
.cards-2{grid-template-columns:repeat(2,1fr)}
.cards-3{grid-template-columns:repeat(3,1fr)}
.cards-4{grid-template-columns:repeat(2,1fr)}

.card{
  position:relative;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:var(--pad-card);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover{transform:translateY(-3px);border-color:var(--neon);box-shadow:var(--glow-sm)}
.card h3{margin-bottom:.45rem}
.card p{color:var(--muted);font-size:1rem}

.card-editor{padding:0;overflow:hidden}
.card-editor .card-bar{
  display:flex;align-items:center;gap:.45rem;
  padding:.5rem .8rem;background:var(--surface-3);border-bottom:1px solid var(--line);
}
.card-editor .card-bar .fname{font-size:.8rem;color:var(--muted);margin-left:.4rem}
.card-editor .card-body{padding:var(--pad-card)}

.card-index{font-size:.8rem;color:var(--neon-2);margin-bottom:.5rem}
.feature-list{display:grid;gap:.4rem;margin-top:.85rem}
.feature-list li{color:var(--text);font-size:.97rem;padding-left:1.3rem;position:relative}
.feature-list li::before{content:"›";position:absolute;left:0;color:var(--neon);font-weight:700}

/* ---------- Bausteine (Leistungen) ---------- */
.capabilities{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:var(--gap)}
.cap{
  position:relative;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:var(--pad-card);
  transition:opacity .6s ease, transform .6s ease, border-color .2s ease, box-shadow .2s ease;
}
.cap.reveal{transition-delay:calc(var(--i,0) * 70ms), calc(var(--i,0) * 70ms), 0s, 0s}
.cap:hover{border-color:var(--neon);box-shadow:var(--glow-sm)}
.cap h3{font-size:.95rem;color:var(--neon-2);margin-bottom:.7rem;letter-spacing:.01em}
.cap ul{margin:0;padding:0;list-style:none;display:grid;gap:.35rem}
.cap li{position:relative;padding-left:1.2rem;color:var(--muted);font-size:.97rem;line-height:1.55}
.cap li::before{content:"› ";position:absolute;left:0;color:var(--neon);font-weight:700}
.cap p{color:var(--muted);font-size:1rem;line-height:1.6}

/* ---------- Modell-Karten (Preise) ---------- */
.model-card h3{font-size:1.15rem;color:var(--neon)}
.model-card .model-when{color:var(--text);font-weight:600;margin-bottom:.55rem}

/* ---------- Prozess-Schritte ---------- */
.steps{counter-reset:step;display:grid;gap:.85rem;position:relative}
.step{
  position:relative;
  display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:start;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:1rem 1.15rem;transition:border-color .2s, box-shadow .2s;
}
.step:hover{border-color:var(--neon);box-shadow:var(--glow-sm)}
.step .step-no{
  counter-increment:step;
  display:grid;place-items:center;min-width:34px;height:34px;
  border:1px solid var(--line);border-radius:8px;
  color:var(--neon);font-weight:700;font-size:.86rem;
  background:var(--bg);position:relative;z-index:3;
}
.step .step-no::before{content:"0" counter(step)}
.step h3{font-size:1rem;margin-bottom:.15rem}
.step p{color:var(--muted);font-size:.97rem}
/* Linie auf der Mitte der Nummern: Padding 1.15rem + Rand 1px + halbe Badge 17px − halbe Linie 1px */
.steps::before{
  content:"";position:absolute;left:calc(1.15rem + 17px);top:calc(1rem + 18px);bottom:8px;width:2px;z-index:2;
  background:linear-gradient(var(--neon),var(--neon-2));opacity:.25;pointer-events:none;
}
.steps__progress{
  position:absolute;left:calc(1.15rem + 17px);top:calc(1rem + 18px);width:2px;height:0;z-index:2;
  max-height:calc(100% - 1rem - 26px);pointer-events:none;
  background:linear-gradient(var(--neon),var(--neon-2));box-shadow:var(--glow-sm);
  transition:height .2s linear;
}

/* ---------- Tech-Stack Chips ---------- */
.stack{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.2rem}
.stack .chip,.marquee .chip{
  font-size:.86rem;color:var(--text);
  background:var(--surface);border:1px solid var(--line);
  padding:.35rem .7rem;border-radius:8px;transition:.18s;
}
.stack .chip::before,.marquee .chip::before{content:"# ";color:var(--neon);font-weight:700}
.stack .chip:hover,.marquee .chip:hover{border-color:var(--neon);box-shadow:var(--glow-sm);color:var(--neon)}

/* ---------- Bänder (halbtransparent, damit die Animation durchscheint) ---------- */
.section-alt,.network{background:var(--band);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* ---------- Elite-Partners-Karten ---------- */
.family-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);margin-top:2rem}
.family-card{
  display:block;padding:var(--pad-card);border-radius:var(--radius);
  background:var(--surface);border:1px solid var(--line);
  transition:transform .2s, box-shadow .2s, border-color .2s;
}
.family-card:hover{transform:translateY(-3px);border-color:var(--neon);box-shadow:var(--glow-sm)}
.family-card .fc-name{font-size:1.07rem;font-weight:700;margin-bottom:.15rem}
.family-card .fc-role{font-size:.88rem;color:var(--muted)}
.family-card .fc-arrow{margin-top:.8rem;color:var(--neon);font-size:.86rem}
.family-card.is-current{
  border-color:var(--neon);
  background:linear-gradient(180deg, rgba(var(--neon-rgb),.10), rgba(var(--neon-rgb),.02)), var(--surface);
  box-shadow:var(--glow-sm);
}
.family-card.is-current .fc-here{color:var(--neon);font-weight:700}
.network-example{color:var(--muted);font-size:.95rem;text-align:center;margin:1.6rem auto 0;max-width:60ch}
.network-example .tok{color:var(--neon-2)}

/* ---------- CTA-Band ---------- */
.cta-band{text-align:center}
.cta-inner{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:2.6rem 1.6rem;box-shadow:var(--shadow-md);position:relative;overflow:hidden;
}
.cta-inner::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(560px 180px at 50% 0%, rgba(var(--neon-rgb),.10), transparent 70%);
}
.cta-inner h2{margin-bottom:.65rem}
.cta-inner p{color:var(--muted);max-width:54ch;margin:0 auto 1.4rem}
.cta-inner .btn{position:relative;z-index:1}

/* ---------- Page-Hero (Unterseiten) ---------- */
.page-hero{padding:2.6rem 0 .5rem}
.page-hero h1{font-size:clamp(1.7rem,3.8vw,2.4rem)}

/* ---------- Zwei-Spalten Inhalt ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:2.4rem;align-items:center}
.split--top{align-items:start}
.value-list{display:grid;gap:.8rem;margin-top:1.2rem}
.split--top .value-list{margin-top:0}
.value-list li{
  padding:.85rem 1rem;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);color:var(--text);
}
.value-list li b{color:var(--neon);font-weight:700}
.value-list li span{display:block;color:var(--muted);font-size:.97rem;margin-top:.15rem}
.value-list li span a{color:var(--neon)}
.feature-list--roomy{gap:.6rem;margin-top:0}

/* ---------- Kontakt / Formular ---------- */
.contact-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:2.4rem;align-items:start}
.contact-info .info-row{margin-bottom:1.05rem}
.contact-info .info-row .lbl{font-size:.8rem;color:var(--neon-2)}
.contact-info .info-row .val{color:var(--text)}
.contact-info .info-row .val-link{color:var(--neon);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}

.form{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.6rem}
.form-title{font-size:1.1rem;margin-bottom:.35rem;color:var(--text)}
.form-legend{color:var(--muted);font-size:.86rem;margin-bottom:1rem}
.field{margin-bottom:.95rem}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.field label{display:block;font-size:.86rem;color:var(--muted);margin-bottom:.35rem}
.field label .opt{color:var(--muted);font-size:.78rem}
.field input,.field textarea,.field select{
  width:100%;min-height:42px;font-family:var(--font);font-size:.95rem;color:var(--text);
  padding:.6rem .8rem;background:var(--surface-2);
  border:1px solid var(--field-line);border-radius:9px;
  transition:border-color .15s, box-shadow .15s;
}
.field input::placeholder,.field textarea::placeholder{color:var(--placeholder)}
.field select{appearance:none;-webkit-appearance:none;padding-right:2.2rem;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--neon) 50%),linear-gradient(135deg,var(--neon) 50%,transparent 50%);
  background-position:calc(100% - 18px) 55%,calc(100% - 13px) 55%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.field select option{background:var(--surface);color:var(--text)}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--neon);box-shadow:0 0 0 3px rgba(var(--neon-rgb),.15);
}
.field textarea{resize:vertical;min-height:110px}
.field .error{color:var(--danger);font-size:.82rem;margin-top:.3rem;min-height:1em}
.field.invalid input,.field.invalid textarea{border-color:var(--danger)}
.form-note{color:var(--muted);font-size:.84rem;margin-top:.7rem}
.form-note a{color:var(--neon);text-decoration:underline;text-underline-offset:.2em}
.form-status{margin-top:.9rem;font-size:.92rem;color:var(--neon)}
.req{color:var(--neon)}
.hp-field{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* ---------- Rechtstexte ---------- */
.legal{max-width:780px}
.legal h2{margin:1.8rem 0 .7rem;font-size:1.2rem;color:var(--neon-2)}
.legal p{color:var(--muted);margin-bottom:.75rem}
.legal a{color:var(--neon);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.legal a:hover,.legal a:focus-visible{text-decoration-thickness:2px}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--line);background:var(--surface-2);padding:2.8rem 0 1.6rem}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:1.8rem}
.footer-desc{color:var(--muted);font-size:.9rem;margin-top:.85rem;max-width:34ch}
.footer-col h4,.footer-col .footer-h{font-size:.82rem;color:var(--neon-2);margin:0 0 .7rem;font-weight:600;line-height:1.15;letter-spacing:.03em}
/* Touch-Ziel ≈ 40px (Zeilenhöhe ~23px + 2 × 8px Padding) */
.footer-col a,.footer-col .current{display:block;color:var(--muted);font-size:.9rem;padding:.5rem 0;transition:color .15s}
.footer-col a:hover{color:var(--neon)}
.footer-col .current{color:var(--text)}
.footer-col .current::after{content:" ✦";color:var(--neon)}
.footer-bottom{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem;
  margin-top:2rem;padding-top:1.2rem;border-top:1px solid var(--line);
}
.footer-bottom p{color:var(--muted);font-size:.82rem}
.footer-tag{color:var(--neon-2)}

/* ---------- Reveal-Animation ---------- */
/* Inhalt ist OHNE JS sichtbar; nur mit .js auf <html> wird er für die Animation versteckt. */
.reveal{transition:opacity .6s ease, transform .6s ease;transition-delay:calc(var(--i,0) * 70ms)}
.js .reveal{opacity:0;transform:translateY(16px)}
.reveal.visible{opacity:1;transform:none}
.reveal[data-tilt]{transition-delay:calc(var(--i,0) * 70ms), 0s, 0s, 0s}
.js .reveal--left{transform:translateX(-24px)}
.js .reveal--right{transform:translateX(24px)}
.js .reveal--scale{transform:scale(.95)}
.reveal--left.visible,.reveal--right.visible,.reveal--scale.visible{transform:none}

/* ============================================================
   EFFEKTE — transform/opacity-basiert, reduced-motion-sicher
   ============================================================ */

/* SVG-Icons & Icon-Tiles */
.icon{width:22px;height:22px;display:block;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.icon-tile{
  display:grid;place-items:center;width:44px;height:44px;border-radius:11px;
  color:var(--neon);background:linear-gradient(180deg,rgba(var(--neon-rgb),.10),rgba(var(--neon-rgb),.02));
  border:1px solid var(--line);margin-bottom:.85rem;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card:hover .icon-tile{border-color:var(--neon);box-shadow:var(--glow-sm);transform:translateY(-2px)}
.icon-tile .icon{width:22px;height:22px}

/* Animierter Neon-Rand */
.card{isolation:isolate}
.card::after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;
  background:conic-gradient(from var(--a,0deg), transparent 0 55%, var(--neon) 75%, var(--neon-2) 85%, transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .3s ease;z-index:1;
}
.card:hover::after{opacity:.9;animation:spin-border 3.5s linear infinite}
@property --a{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes spin-border{to{--a:360deg}}

/* Button-Sheen */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::after{
  content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;z-index:-1;
  background:linear-gradient(100deg,transparent,var(--sheen),transparent);
  transform:skewX(-18deg);transition:none;
}
.btn:hover::after{animation:sheen .8s ease}
@keyframes sheen{from{left:-120%}to{left:150%}}

/* Nav-Underline */
.nav-links a:not(.btn){position:relative}
.nav-links a:not(.btn)::after{
  content:"";position:absolute;left:0;right:100%;bottom:-6px;height:2px;
  background:var(--neon);box-shadow:var(--glow-sm);transition:right .28s ease;
}
.nav-links a:not(.btn):hover::after,.nav-links a.active:not(.btn)::after{right:0}

/* Scroll-Progress */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:60;pointer-events:none;background:transparent}
.scroll-progress__bar{height:100%;width:100%;transform:scaleX(0);transform-origin:0 50%;background:var(--grad);box-shadow:var(--glow);will-change:transform}

/* Cursor-Glow (wird erst bei echter Mausbewegung eingeblendet, siehe effects.js) */
.cursor-glow{
  position:fixed;top:0;left:0;width:320px;height:320px;border-radius:50%;pointer-events:none;z-index:40;
  transform:translate3d(-50%,-50%,0);left:-9999px;
  background:radial-gradient(circle, var(--cursor-glow), transparent 62%);
  mix-blend-mode:var(--cursor-blend);transition:opacity .3s ease;opacity:0;
}

/* Card-Tilt */
[data-tilt]{transform-style:preserve-3d;transition:opacity .6s ease, transform .18s ease, border-color .2s ease, box-shadow .2s ease}
.tilt-on{will-change:transform}

/* Stats (Zusagen) */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.stat{
  text-align:center;padding:1.4rem .9rem;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);transition:border-color .25s, box-shadow .25s, transform .25s;
}
.stat:hover{border-color:var(--neon);box-shadow:var(--glow-sm);transform:translateY(-3px)}
.stat__num{font-size:2.1rem;font-weight:800;line-height:1;color:var(--neon);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.stat__num .suffix{color:var(--neon-2)}
.stat__num--word{font-size:clamp(1.25rem,2.2vw,1.55rem);line-height:1.15;letter-spacing:-.02em}
.stat__num abbr{text-decoration:none}
.stat__label{color:var(--muted);font-size:.93rem;margin-top:.5rem}

/* Tech-Marquee mit Pause-Knopf (WCAG 2.2.2) */
.marquee{overflow:hidden;position:relative;margin-top:1.2rem;
  -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.marquee__track{display:flex;gap:0;width:max-content;animation:marquee 32s linear infinite}
.marquee:hover .marquee__track,.marquee:focus-within .marquee__track{animation-play-state:paused}
.marquee .chip{white-space:nowrap;margin-right:.6rem}
@keyframes marquee{to{transform:translateX(-50%)}}
.marquee-wrap{position:relative}
.marquee-toggle{display:inline-flex;align-items:center;min-height:40px;padding:.4rem .9rem;margin-bottom:.3rem;
  font-family:var(--font);font-size:.86rem;font-weight:600;color:var(--neon);background:transparent;
  border:1px solid var(--line);border-radius:9px;cursor:pointer}
.marquee-toggle[hidden]{display:none}
.marquee-toggle::before{content:"❚❚";font-size:.7rem;margin-right:.55rem;letter-spacing:-.1em}
.marquee-toggle[aria-pressed="true"]::before{content:"▶"}
.marquee-toggle:hover{border-color:var(--neon);box-shadow:var(--glow-sm)}
.marquee-wrap.is-paused .marquee__track{animation-play-state:paused}
.stack-note{color:var(--muted);font-size:.97rem;line-height:1.65;margin-top:1.4rem;max-width:72ch}

/* FAQ-Accordion */
.faq{display:grid;gap:.7rem;max-width:800px}
.faq__item{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);overflow:hidden;transition:border-color .25s}
.faq__item.open{border-color:var(--neon);box-shadow:var(--glow-sm)}
.faq__q{
  width:100%;min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  background:transparent;border:0;cursor:pointer;color:var(--text);font-family:var(--font);
  font-size:.97rem;font-weight:600;text-align:left;padding:.9rem 1.1rem;
}
.faq__q::before{content:"$ ";color:var(--neon);font-weight:700}
.faq__q .chev{color:var(--neon);transition:transform .3s ease;flex:0 0 auto}
.faq__item.open .chev{transform:rotate(45deg)}
.faq__a{display:grid;grid-template-rows:1fr;transition:grid-template-rows .32s ease}
.js .faq__a{grid-template-rows:0fr}
.js .faq__item.open .faq__a{grid-template-rows:1fr}
.faq__a > div{overflow:hidden}
.js .faq__a > div{visibility:hidden;transition:visibility 0s linear .32s}
.js .faq__item.open .faq__a > div{visibility:visible;transition-delay:0s}
.faq__a p{color:var(--muted);font-size:1rem;padding:0 1.1rem 1rem}
.faq__a a{color:var(--neon);text-decoration:underline;text-underline-offset:.2em}

/* Wordmark-Glitch */
.brand-name{position:relative}
.brand:hover .brand-name{animation:glitch .4s steps(2) 1}
@keyframes glitch{
  0%{text-shadow:0 0 0 transparent}
  20%{text-shadow:-2px 0 var(--neon),2px 0 var(--neon-2)}
  40%{text-shadow:2px 0 var(--neon),-2px 0 var(--neon-2);transform:translateX(1px)}
  60%{text-shadow:-1px 0 var(--neon-2),1px 0 var(--neon)}
  100%{text-shadow:0 0 0 transparent;transform:none}
}

/* Scroll-to-Top */
.to-top{
  position:fixed;right:20px;bottom:20px;z-index:45;
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  min-height:42px;min-width:42px;
  padding:.5rem .75rem;border-radius:9px;font-size:.82rem;font-weight:600;
  color:var(--neon);background:var(--float-bg);backdrop-filter:blur(6px);
  border:1px solid var(--line);cursor:pointer;font-family:var(--font);
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .3s ease, transform .3s ease, border-color .25s, box-shadow .25s;
}
.to-top.show{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{border-color:var(--neon);box-shadow:var(--glow-sm)}

/* Fokus-Sichtbarkeit */
:focus-visible{outline:2px solid var(--neon);outline-offset:2px}
.faq__q:focus-visible{outline:2px solid var(--neon);outline-offset:-3px}
.nav-links a:focus-visible,.btn:focus-visible,.to-top:focus-visible,.theme-toggle:focus-visible{outline-offset:3px}

/* Typewriter-Rotator */
.type-rotate{color:var(--neon)}
.type-rotate::after{content:"▋";color:var(--neon);animation:blink 1.05s steps(1) 4;margin-left:1px}

/* Ambient-Canvas («Fäden»): liegt hinter allem, Bänder sind halbtransparent */
#fx-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:var(--fx-opacity)}

/* ============================================================
   BAUSTEINE (Inhalte)
   ============================================================ */
.hero-sub--tight{margin-top:-.5rem}
.hero-points{display:flex;flex-wrap:wrap;gap:.35rem 1.2rem;margin-top:1.3rem}
.hero-points li{color:var(--muted);font-size:.9rem;padding-left:1.15rem;position:relative}
.hero-points li::before{content:"✓";position:absolute;left:0;color:var(--neon);font-weight:700}

.section-tight{padding-top:.75rem}
.section-more{margin-top:1.6rem}
.link-arrow{color:var(--neon);font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.25em}
.link-arrow::after{content:" →"}
.link-arrow:hover,.link-arrow:focus-visible{text-decoration-thickness:2px}
.inline-link{color:var(--neon);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.inline-link:hover,.inline-link:focus-visible{text-decoration-thickness:2px}
.fineprint{color:var(--muted);font-size:.86rem;margin-top:1.3rem}
.fineprint a{color:var(--neon);text-decoration:underline;text-underline-offset:.2em}

.card-title{font-size:1.1rem;margin-bottom:.45rem;line-height:1.25}
.card-no{color:var(--neon-2);font-weight:600}
.card-link{display:inline-block;margin-top:.9rem;font-size:.92rem;padding:.35rem 0}
.inline-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.8rem 1.4rem;
  margin-top:1.8rem;padding:1rem 1.15rem;border:1px dashed var(--line);border-radius:var(--radius);background:var(--band)}
.inline-cta p{color:var(--text);font-weight:600}
.inline-cta p::before{content:"// ";color:var(--neon-2)}

/* «Ihre Wünsche sind der Bauplan» (Home) */
.promise{
  display:grid;grid-template-columns:1.15fr .85fr;gap:2rem;align-items:center;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:1.8rem;box-shadow:var(--shadow-md);position:relative;overflow:hidden;
}
.promise::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--grad)}
.promise h2{margin-bottom:.6rem}
.promise p{color:var(--muted)}
.promise p + p{margin-top:.7rem}
.promise .link-arrow{display:inline-block;margin-top:1rem}
.promise-list{display:grid;gap:.6rem}
.promise-list li{padding:.75rem .9rem;border:1px solid var(--line);border-radius:10px;background:var(--surface-2)}
.promise-list b{display:block;color:var(--neon);font-size:.95rem}
.promise-list span{color:var(--muted);font-size:.95rem}

/* Bereichs-Teaser (Home) */
.teaser-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.teaser{display:flex;flex-direction:column;gap:.35rem;height:100%}
.teaser h3{font-size:1rem}
.teaser p{font-size:.97rem}
.teaser .teaser-go{margin-top:auto;padding-top:.6rem;color:var(--neon);font-size:.88rem;font-weight:600}
a.card{display:block}
a.card:focus-visible{outline-offset:3px}

/* Praxis-Liste */
.built-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.built{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);padding:1.1rem 1.15rem;
  transition:border-color .2s, box-shadow .2s}
.built:hover{border-color:var(--neon);box-shadow:var(--glow-sm)}
.built h3{font-size:.98rem;line-height:1.35;margin-bottom:.35rem}
.built h3::before{content:"> ";color:var(--neon)}
.built p{color:var(--muted);font-size:.95rem;line-height:1.55}
/* Fallbeispiele (Leistungen) */
.built-grid--cases{grid-template-columns:repeat(2,1fr)}
.built .case-tag{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--neon-2);margin-bottom:.3rem}
.built-grid--cases .built h3{font-size:1.02rem;margin-bottom:.7rem}
.case{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.45rem .8rem}
.case dt{font-size:.78rem;font-weight:700;color:var(--text);padding-top:.15rem;letter-spacing:.02em}
.case dd{margin:0;color:var(--muted);font-size:.93rem;line-height:1.55}
.card-foot{margin-top:.8rem;font-size:.92rem;color:var(--muted);font-style:italic}

/* «Ihre Idee, unser Code» (Leistungen) */
.idea-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);margin-top:1.6rem}
.idea-limits{margin-top:1.6rem;padding:1.1rem 1.2rem;border:1px solid var(--line);border-left:3px solid var(--neon-2);border-radius:var(--radius);background:var(--surface)}
.idea-limits h3{font-size:1rem;margin-bottom:.4rem;color:var(--text)}
.idea-limits p{color:var(--muted)}

/* Kontakt: Ablauf danach */
.next-steps{counter-reset:ns;display:grid;gap:.6rem;margin-top:1.3rem}
.next-steps li{counter-increment:ns;position:relative;padding:.75rem .9rem .75rem 3rem;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.next-steps li::before{content:counter(ns);position:absolute;left:.85rem;top:.75rem;width:1.5rem;height:1.5rem;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:6px;color:var(--neon);font-weight:700;font-size:.82rem}
.next-steps b{display:block;color:var(--text);font-size:.97rem}
.next-steps span{color:var(--muted);font-size:.95rem}
.terminal--spaced{margin-top:1.3rem}
.info-title{font-size:1.05rem;margin:1.6rem 0 0}

/* KI-Abschnitt (Über uns) */
.ai-points{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap);margin-top:1.4rem}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  /* Mobile-Navigation (Brand + 7 Menüpunkte passen nicht mehr nebeneinander) */
  .nav-toggle{display:flex}
  .nav-links{
    position:fixed;top:var(--header-h);left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--bg);border-bottom:1px solid var(--line);
    padding:.4rem var(--gutter) 1.1rem;
    max-height:calc(100vh - var(--header-h));overflow-y:auto;overscroll-behavior:contain;
    transform:translateY(-130%);transition:transform .28s ease, visibility 0s linear .28s;visibility:hidden;
    box-shadow:var(--shadow-md);
  }
  .nav-links.open{transform:translateY(0);visibility:visible;transition:transform .28s ease, visibility 0s}
  .nav-links a:not(.btn){padding:.75rem 0;border-bottom:1px solid var(--line)}
  .nav-links a:not(.btn)::after{content:none}
  .nav-links .btn{margin-top:.9rem;min-height:44px}
  .nav-links .btn + .btn{margin-top:.55rem}
  .theme-toggle--menu{display:flex;justify-content:flex-start;width:100%;height:auto;min-height:44px;margin-top:.55rem;padding:.5rem .9rem}
  body.nav-open{overflow:hidden}
  .teaser-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  :root{--sec-y:3.2rem}
  .hero-inner{grid-template-columns:1fr;gap:1.8rem}
  .hero-sub{max-width:none}
  .cards-3,.cards-4,.family-grid,.split,.contact-inner,.promise,.idea-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .built-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  :root{--gutter:16px;--sec-y:2.7rem;--pad-card:1.1rem}
  .cards-2,.teaser-grid,.ai-points{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr}
  .form{padding:1.15rem}
  .promise{padding:1.25rem}
  .footer-bottom{flex-direction:column}
  .stats-grid{grid-template-columns:1fr}
  .to-top{right:14px;bottom:14px}
  .built-grid{grid-template-columns:1fr}
  .case{grid-template-columns:1fr;gap:.15rem}
  .case dd{margin-bottom:.45rem}
  .inline-cta{flex-direction:column;align-items:stretch;text-align:left}
  .inline-cta .btn{width:100%}
  .hero-cta .btn{width:100%}
  .cta-inner{padding:2rem 1.1rem}
}

/* Fallback ohne backdrop-filter */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .site-header{background:var(--bg)}
  .to-top{background:var(--surface)}
}

/* ---------- Reduced Motion: nur statischer Hintergrund ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  html{scroll-behavior:auto}
  .reveal,.js .reveal{opacity:1;transform:none}
  .blink,.brand-cursor,.wordmark .brand-cursor,.type-cursor,.type-rotate::after{animation:none}
  .js .faq__a > div{transition-delay:0s !important}
  .cursor-glow,#fx-bg{display:none !important}
  .marquee__track{animation:none !important;flex-wrap:wrap;width:auto;row-gap:.5rem}
  .marquee{-webkit-mask:none !important;mask:none !important}
  .marquee-toggle{display:none !important}
  .card::after{display:none !important}
  [data-tilt]{transform:none !important}
}

/* 404 */
.narrow{max-width:620px}

/* Beispiel-Kasten (Leistungen: 4D Security) – bewusst unaufdringlich */
.example-box{margin-top:1.6rem;padding:1.1rem 1.2rem;border:1px dashed var(--line);border-radius:var(--radius);background:var(--band);max-width:820px}
.example-tag{font-size:.8rem;color:var(--neon-2);margin-bottom:.3rem}
.example-box h3{font-size:1rem;margin-bottom:.45rem}
.example-box p{color:var(--muted)}
.example-dims{display:flex;flex-wrap:wrap;gap:.4rem .6rem;margin:.8rem 0}
.example-dims li{font-size:.9rem;color:var(--text);padding:.25rem .6rem;border:1px solid var(--line);border-radius:7px;background:var(--surface)}
.example-dims b{color:var(--neon);margin-right:.25rem}
.example-note{font-size:.9rem}