/* du digital — styles (dunkles Violett-System, Mehrseiten) */

/* ---------- Fonts (self-hosted, DSGVO-konform) ---------- */
@font-face{
  font-family:"Clash Display";
  src:url("fonts/ClashDisplay-Variable.woff2") format("woff2-variations");
  font-weight:200 700;
  font-display:swap;
}
@font-face{
  font-family:"Satoshi";
  src:url("fonts/Satoshi-Variable.woff2") format("woff2-variations");
  font-weight:300 900;
  font-display:swap;
}

/* ---------- Tokens ---------- */
:root{
  --bg:#08080D;
  --surface:#101018;
  --card:rgba(255,255,255,.03);
  --line:rgba(255,255,255,.09);
  --line-strong:rgba(255,255,255,.17);
  --line-control:rgba(255,255,255,.42);  /* Formular-Ränder, 3:1 auf dunkel */

  --paper:#FFFFFF;
  --body:#B7B7C3;
  --muted:#8C8C9A;

  --blue:#0A6CFF;
  --violet:#7C3AED;
  --magenta:#D93BB0;
  --violet-text:#A78BFA;      /* kleines Violett auf dunkel, AA-sicher */
  --grad:linear-gradient(104deg,var(--blue) 0%,var(--violet) 46%,var(--magenta) 100%);
  --glow:0 14px 40px -14px rgba(124,58,237,.55);

  /* Lehrly (eigene Produktmarke, helles Band) */
  --chalk:#14503C;
  --coral:#E36B3F;
  --paperwarm:#F6F2E9;
  --line-warm:#E4DCCB;

  --font-display:"Clash Display","Satoshi",system-ui,sans-serif;
  --font-body:"Satoshi",system-ui,-apple-system,"Segoe UI",sans-serif;

  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --ease:cubic-bezier(0.4,0,0.2,1);
  --dur-micro:160ms; --dur-ui:260ms; --dur-enter:700ms;

  --pad:clamp(20px,4.5vw,64px);
  --radius:16px;
}

/* ---------- Base ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--paper);
  font-family:var(--font-body);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:1200px;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
[id]{scroll-margin-top:96px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
section{padding:84px 0;position:relative}
@media(min-width:760px){section{padding:112px 0}}

h1,h2,h3{font-family:var(--font-display);font-weight:600;letter-spacing:-.025em;line-height:1.05;color:var(--paper);text-wrap:balance}
h1{font-size:clamp(2.6rem,8vw,5.6rem)}
h2{font-size:clamp(1.9rem,4.6vw,3.2rem)}
h3{font-size:1.2rem;letter-spacing:-.015em;line-height:1.25}

p{color:var(--body)}
.lead{font-size:clamp(1.02rem,1.4vw,1.2rem);color:var(--body);max-width:50ch}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

.skip-link{
  position:absolute;top:10px;left:10px;z-index:100;
  background:var(--paper);color:#0A0A0F;font-weight:600;font-size:.9rem;
  padding:10px 16px;border-radius:10px;transform:translateY(-300%);
}
.skip-link:focus{transform:none}

/* Blaues Quadrat — das Satzzeichen der Marke (aus dem Logo) */
.sq{display:inline-block;width:9px;height:9px;background:var(--blue);flex:0 0 auto}
h1 .sq,h2 .sq{width:.13em;height:.13em;margin-left:.07em}
.sq--grad{background:var(--grad)}
.sq--coral{background:var(--coral)}

.kicker{
  font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  color:var(--muted);display:inline-flex;align-items:center;gap:10px;
}
.kicker .sq{width:8px;height:8px}
.lehrly .kicker{color:#6C6659}

.idx{font-family:var(--font-display);font-size:.82rem;letter-spacing:.14em;font-weight:600;color:var(--violet-text)}

.badge{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.8rem;font-weight:500;color:var(--body);
  border:1px solid var(--line);border-radius:999px;padding:8px 16px;
  background:rgba(255,255,255,.03);
}
.badge .sq{width:7px;height:7px;background:var(--grad)}

/* ---------- Header ---------- */
header{
  position:fixed;inset:0 0 auto 0;z-index:60;
  border-bottom:1px solid transparent;
  transition:background var(--dur-ui) var(--ease),border-color var(--dur-ui);
}
header.stuck{background:rgba(8,8,13,.78);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom-color:var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px}
.logo{display:flex;align-items:center;gap:10px;color:var(--paper)}
.logo svg{height:24px;width:auto}
.logo .word{font-family:var(--font-display);font-weight:600;font-size:.64rem;letter-spacing:.4em;text-transform:uppercase;padding-top:3px}
.nav-links{display:none;align-items:center;gap:26px}
.nav-links a{font-size:.9rem;color:var(--body);padding:4px 0;position:relative;transition:color var(--dur-micro)}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;border-radius:2px;
  background:var(--grad);transform:scaleX(0);transform-origin:right;
  transition:transform var(--dur-ui) var(--ease-out);
}
.nav-links a:hover{color:var(--paper)}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav-links a[aria-current="page"]{color:var(--paper);font-weight:600}
.nav-links a[aria-current="page"]::before{
  content:"";position:absolute;left:50%;top:-6px;transform:translateX(-50%);
  width:6px;height:6px;background:var(--grad);
}
a.nav-cta{display:none}
@media(min-width:1080px){
  .nav-links{display:flex}
  a.nav-cta{display:inline-flex}
}

/* Mobile-Menü */
.menu-btn{
  display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;padding:0 8px;background:none;border:0;cursor:pointer;
}
.menu-btn span{display:block;height:2px;width:100%;background:var(--paper);transition:transform var(--dur-ui) var(--ease-out),opacity var(--dur-micro)}
.menu-open .menu-btn span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-open .menu-btn span:nth-child(2){opacity:0}
.menu-open .menu-btn span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(min-width:1080px){.menu-btn{display:none}}

.mobile-menu{
  position:fixed;inset:0;z-index:55;background:var(--bg);
  display:flex;flex-direction:column;justify-content:center;
  padding:96px var(--pad) 48px;overflow-y:auto;
  opacity:0;visibility:hidden;transition:opacity var(--dur-ui) var(--ease),visibility 0s linear var(--dur-ui);
}
@media(max-height:640px){.mobile-menu{justify-content:flex-start}}
.menu-open .mobile-menu{opacity:1;visibility:visible;transition:opacity var(--dur-ui) var(--ease)}
.mobile-menu nav{display:flex;flex-direction:column}
.mobile-menu nav a{
  font-family:var(--font-display);font-weight:600;font-size:1.55rem;letter-spacing:-.02em;
  padding:15px 0;border-bottom:1px solid var(--line);color:var(--paper);
  display:flex;align-items:baseline;gap:14px;
}
.mobile-menu nav a .idx{font-size:.75rem}
.mobile-menu .btn{margin-top:32px;align-self:flex-start}
.menu-open{overflow:hidden}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--grad);background-size:160% 100%;color:#fff;
  font-weight:600;font-size:.94rem;font-family:var(--font-body);
  padding:14px 26px;border-radius:999px;border:0;cursor:pointer;
  transition:transform var(--dur-micro) var(--ease),background-position 400ms var(--ease),box-shadow var(--dur-ui);
}
.btn:hover{transform:translateY(-2px);background-position:70% 0;box-shadow:var(--glow)}
.btn svg{transition:transform var(--dur-ui) var(--ease-out)}
.btn:hover svg{transform:translateX(4px)}
.btn:focus-visible,a:focus-visible,button:focus-visible{outline:2px solid var(--violet-text);outline-offset:3px}
.btn-ghost{background:transparent;color:var(--paper);border:1px solid var(--line-strong);box-shadow:none}
.btn-ghost:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.32);box-shadow:none}
.lehrly .btn{background:var(--chalk);color:#fff}
.lehrly .btn:hover{background:#0E3D2E;box-shadow:0 14px 34px -16px rgba(20,80,60,.6)}
.lehrly .btn-ghost{background:transparent;color:#20221F;border-color:#CFC7B4}
.lehrly .btn-ghost:hover{background:#fff;border-color:var(--chalk)}

/* ---------- Abschnitts-Varianten ---------- */
.on-dark{background:radial-gradient(900px 460px at 18% 0%,rgba(124,58,237,.16),transparent 70%),var(--bg)}
.on-tint{background:var(--surface)}

/* ---------- Hero (Start) ---------- */
.hero{
  padding-top:clamp(150px,20vw,220px);padding-bottom:clamp(72px,10vw,120px);
  text-align:center;overflow:hidden;
}
.hero .wrap{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:0}
.hero h1{margin:26px 0 22px;max-width:16ch}
.hero .lead{margin:0 auto;max-width:44ch}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px;margin-top:38px}

/* Typewriter */
.type-line{display:inline-flex;align-items:baseline;justify-content:center;white-space:nowrap}
.caret{
  display:inline-block;width:3px;height:.82em;margin-left:6px;border-radius:2px;
  background:var(--violet-text);align-self:center;
  animation:blink 1.05s steps(1) infinite;
}
@keyframes blink{50%{opacity:0}}

/* Bewegter Hero-Hintergrund */
.hero-bg{position:absolute;inset:-10% 0 0 0;z-index:0;pointer-events:none;overflow:visible}
.orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.5;will-change:transform}
.orb--blue{width:44vw;height:44vw;max-width:560px;max-height:560px;left:6%;top:8%;
  background:radial-gradient(circle,rgba(10,108,255,.75),transparent 65%);animation:drift1 26s ease-in-out infinite alternate}
.orb--violet{width:52vw;height:52vw;max-width:660px;max-height:660px;right:2%;top:2%;
  background:radial-gradient(circle,rgba(124,58,237,.7),transparent 65%);animation:drift2 32s ease-in-out infinite alternate}
.orb--magenta{width:38vw;height:38vw;max-width:480px;max-height:480px;left:38%;top:34%;
  background:radial-gradient(circle,rgba(217,59,176,.5),transparent 65%);animation:drift3 22s ease-in-out infinite alternate}
@keyframes drift1{from{transform:translate(0,0) scale(1)}to{transform:translate(9vw,7vh) scale(1.15)}}
@keyframes drift2{from{transform:translate(0,0) scale(1.1)}to{transform:translate(-8vw,10vh) scale(.92)}}
@keyframes drift3{from{transform:translate(0,0) scale(.95)}to{transform:translate(6vw,-6vh) scale(1.18)}}
.hero-grid-lines{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(ellipse 75% 62% at 50% 36%,#000 25%,transparent 72%);
  mask-image:radial-gradient(ellipse 75% 62% at 50% 36%,#000 25%,transparent 72%);
}

/* Unterseiten-Hero (mit kleiner Orb-Bühne) */
.page-hero{
  padding-top:clamp(140px,17vw,190px);padding-bottom:clamp(40px,6vw,72px);overflow:hidden;
  background:radial-gradient(720px 400px at 82% -10%,rgba(124,58,237,.18),transparent 70%),
             radial-gradient(560px 320px at 8% -14%,rgba(10,108,255,.12),transparent 70%);
}
.page-hero .wrap{position:relative;z-index:2}
.page-hero h1{font-size:clamp(2.3rem,6vw,4.2rem);margin:20px 0 22px;max-width:16ch}
.page-hero .lead{max-width:52ch}
.page-hero .hero-actions{justify-content:flex-start;margin-top:32px}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.8rem;color:var(--muted);margin-bottom:18px}
.crumbs a{border-bottom:1px solid var(--line-strong);transition:color var(--dur-micro),border-color var(--dur-micro)}
.crumbs a:hover{color:var(--paper);border-color:var(--paper)}
.crumbs .sep{color:var(--line-strong)}

.line-mask{display:block;overflow:hidden}
.line-mask>span{display:block;animation:rise 800ms var(--ease-out) 120ms both}
.line-mask:nth-of-type(2)>span{animation-delay:240ms}
@keyframes rise{from{transform:translateY(105%)}to{transform:none}}

/* ---------- Marquee ---------- */
.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0;overflow:hidden;background:rgba(255,255,255,.02)}
.marquee-track{display:flex;width:max-content;animation:slide 44s linear infinite}
.marquee span{
  font-family:var(--font-display);font-weight:500;font-size:1rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);padding:0 22px;white-space:nowrap;
  display:flex;align-items:center;gap:22px;
}
.marquee .sq{width:7px;height:7px;background:var(--grad)}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- Leistungs-Karten ---------- */
.cards{display:grid;grid-template-columns:1fr;gap:18px;margin-top:clamp(44px,6vw,64px)}
@media(min-width:760px){.cards{grid-template-columns:repeat(3,1fr);gap:22px}}
.card{
  position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(24px,3vw,32px);display:flex;flex-direction:column;overflow:hidden;
  transition:border-color var(--dur-ui),transform var(--dur-ui) var(--ease-out);
}
.card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--grad);opacity:.85}
.card::after{
  content:"";position:absolute;top:-40%;right:-30%;width:70%;height:70%;border-radius:50%;
  background:var(--violet);filter:blur(70px);opacity:.1;transition:opacity var(--dur-ui);pointer-events:none;
}
.card:hover{border-color:var(--line-strong);transform:translateY(-4px)}
.card:hover::after{opacity:.24}
.card>*{position:relative;z-index:1}
.card .ico{color:var(--violet-text);margin-bottom:16px}
.card h3{margin-bottom:10px}
.card p{color:var(--body);font-size:.95rem;margin-bottom:20px}
.card ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.card li{
  font-size:.8rem;color:var(--body);border:1px solid var(--line);
  padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.02);
}
.card .more{
  display:inline-flex;align-items:center;gap:8px;margin-top:20px;
  font-size:.9rem;font-weight:600;color:var(--paper);
}
.card .more svg{transition:transform var(--dur-ui) var(--ease-out)}
.card .more:hover svg{transform:translateX(4px)}
.card .more:hover{color:var(--violet-text)}

/* ---------- Workflow-Demo ---------- */
.flow{
  display:grid;grid-template-columns:1fr;gap:0;margin-top:clamp(44px,6vw,64px);
  counter-reset:node;
}
@media(min-width:860px){.flow{grid-template-columns:repeat(4,1fr) ;gap:0}}
.flow-node{
  position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;display:flex;flex-direction:column;gap:6px;
  transition:border-color var(--dur-ui),background var(--dur-ui),transform var(--dur-ui) var(--ease-out),box-shadow var(--dur-ui);
}
.flow-node .ico{color:var(--muted);transition:color var(--dur-ui);margin-bottom:8px}
.flow-node strong{font-weight:600;font-size:.98rem;color:var(--paper)}
.flow-node small{color:var(--muted);font-size:.82rem}
.flow-node.active{border-color:rgba(167,139,250,.6);background:rgba(124,58,237,.10);transform:translateY(-3px);box-shadow:var(--glow)}
.flow-node.active .ico{color:var(--violet-text)}
.flow-sep{
  display:flex;align-items:center;justify-content:center;color:var(--line-strong);
  padding:6px 0;
}
@media(min-width:860px){
  .flow{grid-template-columns:1fr 34px 1fr 34px 1fr 34px 1fr}
  .flow-sep{padding:0}
}
.flow-sep svg{width:16px;height:16px}
@media(max-width:859px){.flow-sep svg{transform:rotate(90deg)}}

/* ---------- Zahlen ---------- */
.stats{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:clamp(40px,6vw,60px)}
@media(min-width:860px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat .num{
  font-family:var(--font-display);font-weight:600;font-size:clamp(2.4rem,5.5vw,3.6rem);
  letter-spacing:-.02em;line-height:1;background:var(--grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.stat small{display:block;margin-top:10px;color:var(--muted);font-size:.88rem;max-width:20ch}

/* ---------- Statement ---------- */
.statement .big{
  font-family:var(--font-display);font-weight:600;letter-spacing:-.025em;line-height:1.14;
  font-size:clamp(1.55rem,3.8vw,2.7rem);max-width:24ch;margin-top:26px;color:var(--paper);
}
.statement .big em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- Prozess-Schritte ---------- */
.steps{display:grid;grid-template-columns:1fr;gap:18px;margin-top:clamp(44px,6vw,64px)}
@media(min-width:760px){.steps{grid-template-columns:repeat(3,1fr);gap:22px}}
.step{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(22px,3vw,30px);transition:border-color var(--dur-ui),transform var(--dur-ui) var(--ease-out);
}
.step:hover{border-color:var(--line-strong);transform:translateY(-3px)}
.step .num{
  font-family:var(--font-display);font-weight:600;font-size:2rem;letter-spacing:-.02em;line-height:1;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  display:block;margin-bottom:14px;
}
.step h3{margin-bottom:8px;font-size:1.1rem}
.step p{color:var(--body);font-size:.93rem}

/* ---------- Hairline-Listen ---------- */
.linklist{list-style:none;border-top:1px solid var(--line)}
.linklist li{
  padding:11px 0;border-bottom:1px solid var(--line);font-size:.95rem;color:var(--body);
  display:flex;align-items:baseline;gap:12px;
}
.linklist li::before{content:"";width:6px;height:6px;background:var(--grad);flex:0 0 auto;transform:translateY(-1px)}
.linklist--cols{display:grid;grid-template-columns:1fr 1fr;column-gap:28px;border-top:0}
.linklist--cols li:nth-child(-n+2){border-top:1px solid var(--line)}
.split{display:grid;grid-template-columns:1fr;gap:clamp(36px,5vw,64px);margin-top:clamp(48px,6vw,80px);align-items:start}
@media(min-width:960px){.split{grid-template-columns:1fr 1.1fr}}
.split h3{margin-bottom:14px}
.split .group + .group{margin-top:36px}

/* ---------- Medien ---------- */
figure.media{margin:0}
.media .frame{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:#0C0C12}
.media .frame img{width:100%;height:auto}
.media .frame--light{background:var(--surface)}
figcaption{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:14px;
  font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--muted);
}
figcaption .sq{width:8px;height:8px;background:var(--grad)}

/* NFC-Karten-Mockup */
.card-stage{display:flex;justify-content:center;position:relative;padding:clamp(28px,4vw,44px) 0}
.card-stage::before{
  content:"";position:absolute;inset:12% 10%;background:var(--grad);
  filter:blur(70px);opacity:.3;border-radius:50%;pointer-events:none;
}
.nfc-card{
  position:relative;width:min(100%,360px);aspect-ratio:1.586/1;background:#0B0B10;
  border-radius:16px;padding:24px;display:flex;flex-direction:column;justify-content:space-between;
  box-shadow:0 30px 60px -22px rgba(0,0,0,.65);transform:rotate(-3deg);
  transition:transform 500ms var(--ease-out);
}
.nfc-card::after{
  content:"";position:absolute;inset:0;border-radius:16px;padding:1px;background:var(--grad);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
}
.nfc-card:hover{transform:rotate(0) translateY(-5px)}
.nfc-card .logo{color:#fff}
.nfc-card .meta{display:flex;justify-content:space-between;align-items:flex-end;color:var(--muted)}
.nfc-card .meta small{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase}

/* ---------- Lehrly (helles Band) ---------- */
.lehrly{background:var(--paperwarm);color:#20221F}
.lehrly h1,.lehrly h2,.lehrly h3{color:var(--chalk)}
.lehrly p,.lehrly .lead{color:#4A4A44}
.lehrly-grid{display:grid;grid-template-columns:1fr;gap:clamp(40px,5vw,72px);align-items:center}
@media(min-width:960px){.lehrly-grid{grid-template-columns:1.1fr .9fr}}
.lehrly-list{list-style:none;margin-top:26px;border-top:1px solid var(--line-warm)}
.lehrly-list li{
  display:flex;gap:12px;align-items:baseline;font-size:.97rem;color:#4A4A44;
  padding:12px 0;border-bottom:1px solid var(--line-warm);
}
.lehrly-list li::before{content:"";width:7px;height:7px;background:var(--coral);flex:0 0 auto;transform:translateY(-1px)}
.lehrly figcaption{color:#6C6659}
.lehrly figcaption .sq{background:var(--coral)}

.phone-stage{display:flex;justify-content:center;position:relative}
.phone{
  position:relative;width:min(100%,290px);border:8px solid #1C1F1A;border-radius:34px;overflow:hidden;
  background:#1C1F1A;box-shadow:0 24px 48px -24px rgba(20,50,40,.45);
}
.phone img{width:100%;height:auto;border-radius:26px}

/* ---------- Projekte ---------- */
.cases{display:flex;flex-direction:column;gap:clamp(64px,9vw,110px);margin-top:clamp(48px,7vw,88px)}
.case{display:grid;grid-template-columns:1fr;gap:clamp(32px,5vw,64px);align-items:center}
@media(min-width:960px){
  .case{grid-template-columns:1fr 1.1fr}
  .case:nth-child(even) .case-media{order:-1}
}
.case-head{display:flex;align-items:baseline;gap:16px;border-top:1px solid var(--line-strong);padding-top:22px}
.case-head .num{
  font-family:var(--font-display);font-weight:600;font-size:2.2rem;letter-spacing:-.02em;line-height:1;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.case h2{font-size:clamp(1.7rem,3.6vw,2.5rem);margin:14px 0 6px}
.case .tag{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--muted)}
.case p{margin-top:14px;max-width:48ch}
.case .facts{list-style:none;margin-top:22px;border-top:1px solid var(--line)}
.case .facts li{
  font-size:.9rem;color:var(--body);padding:10px 0;border-bottom:1px solid var(--line);
  display:flex;align-items:baseline;gap:10px;
}
.case .facts li::before{content:"";width:6px;height:6px;background:var(--grad);flex:0 0 auto;transform:translateY(-1px)}
.case .more{
  display:inline-flex;align-items:center;gap:8px;margin-top:24px;
  font-size:.9rem;font-weight:600;color:var(--paper);
}
.case .more svg{transition:transform var(--dur-ui) var(--ease-out)}
.case .more:hover svg{transform:translateX(4px)}
.case .more:hover{color:var(--violet-text)}

/* Projekt-Teaser (Start) */
.pcards{display:grid;grid-template-columns:1fr;gap:18px;margin-top:clamp(44px,6vw,64px)}
@media(min-width:860px){.pcards{grid-template-columns:repeat(3,1fr);gap:22px}}
a.pcard{
  display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;
  transition:border-color var(--dur-ui),transform var(--dur-ui) var(--ease-out),box-shadow var(--dur-ui);
}
a.pcard:hover{border-color:var(--line-strong);transform:translateY(-5px);box-shadow:0 24px 50px -28px rgba(0,0,0,.8)}
.pcard .shot{aspect-ratio:16/10;overflow:hidden;border-bottom:1px solid var(--line);background:#0C0C12}
.pcard .shot img{width:100%;height:100%;object-fit:cover;transition:transform 700ms var(--ease-out)}
a.pcard:hover .shot img{transform:scale(1.05)}
.pcard .shot svg{width:100%;height:100%}
.pcard .txt{padding:20px 22px 22px;display:flex;flex-direction:column;gap:4px}
.pcard .tag{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--muted)}
.pcard strong{font-family:var(--font-display);font-weight:600;font-size:1.15rem;color:var(--paper);display:flex;align-items:center;gap:10px}
.pcard strong svg{transition:transform var(--dur-ui) var(--ease-out);color:var(--violet-text)}
a.pcard:hover strong svg{transform:translateX(4px)}

/* ---------- Über ---------- */
.about-facts{list-style:none;margin-top:30px;border-top:1px solid var(--line)}
.about-facts li{
  display:flex;gap:14px;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--line);
  font-size:.97rem;color:var(--body);
}
.about-facts li::before{content:"";width:7px;height:7px;background:var(--grad);flex:0 0 auto;transform:translateY(-1px)}
.about-quote{margin-top:28px;padding-left:20px;border-left:2px solid var(--violet);color:var(--body);font-size:1.05rem}
.about-cols{display:grid;grid-template-columns:1fr;gap:clamp(36px,5vw,72px);align-items:start}
@media(min-width:960px){.about-cols{grid-template-columns:1.15fr .85fr}}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line);margin-top:clamp(36px,5vw,56px)}
.q{border-bottom:1px solid var(--line)}
.q button{
  width:100%;background:none;border:0;color:var(--paper);cursor:pointer;
  font-family:var(--font-body);font-size:clamp(1rem,1.6vw,1.15rem);font-weight:500;text-align:left;
  padding:24px 44px 24px 0;position:relative;transition:color var(--dur-micro);
}
.q button:hover{color:var(--violet-text)}
.q button::after{
  content:"";position:absolute;right:6px;top:50%;width:9px;height:9px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-70%) rotate(45deg);transition:transform var(--dur-ui) var(--ease-out);
}
.q.open button{color:var(--violet-text)}
.q.open button::after{transform:translateY(-30%) rotate(-135deg)}
.q .a{overflow:hidden}
.js .q .a{max-height:0;transition:max-height 380ms var(--ease-out)}
.q .a p{color:var(--body);padding:0 40px 26px 0;max-width:66ch}

/* ---------- Kontakt ---------- */
.contact{display:grid;grid-template-columns:1fr;gap:clamp(40px,5vw,72px)}
@media(min-width:960px){.contact{grid-template-columns:1fr 1.1fr}}
.contact-meta{display:flex;flex-direction:column;gap:20px;margin-top:30px}
.contact-meta small{display:block;color:var(--muted);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;margin-bottom:4px}
.contact-meta a{border-bottom:1px solid var(--line-strong);transition:border-color var(--dur-micro),color var(--dur-micro)}
.contact-meta a:hover{color:var(--violet-text);border-color:var(--violet-text)}

form{display:flex;flex-direction:column;gap:16px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--muted)}
input,select,textarea{
  background:rgba(255,255,255,.04);border:1px solid var(--line-control);border-radius:12px;
  color:var(--paper);font-family:var(--font-body);font-size:1rem;padding:13px 15px;width:100%;
  transition:border-color var(--dur-micro),box-shadow var(--dur-micro);
  -webkit-appearance:none;appearance:none;
}
select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23FFFFFF' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 3px rgba(124,58,237,.22)}
textarea{min-height:130px;resize:vertical}

/* Umfrage-Formular (3 Fragen) */
.fprogress{display:none;flex-direction:column;gap:14px;margin-bottom:32px}
.js .fprogress{display:flex}
.fprogress-bar{height:2px;background:var(--line);position:relative}
#fprogress-fill{position:absolute;inset:0 auto 0 0;width:33.34%;background:var(--grad);transition:width var(--dur-ui) var(--ease-out)}
.fstep{border:0;padding:0;margin:0;min-width:0}
.js .fstep{display:none}
.js .fstep.active{display:block}
.fstep + .fstep{margin-top:40px}
.js .fstep + .fstep{margin-top:0}
.fq{
  float:left;width:100%;padding:0;margin-bottom:20px;
  font-family:var(--font-display);font-weight:600;font-size:1.4rem;
  letter-spacing:-.015em;line-height:1.2;color:var(--paper);
}
.fq:focus{outline:none}
.fhint{font-size:.95rem;color:var(--muted);margin:0 0 18px;clear:both}
.fstep .field{clear:both;margin-bottom:16px}
.fstep .consent{clear:both;margin-top:6px}
.fstep .form-note{clear:both;margin-top:10px}
.opts{display:grid;grid-template-columns:1fr;gap:10px;clear:both}
@media(min-width:560px){.opts{grid-template-columns:1fr 1fr}}
.opt{
  display:flex;align-items:center;border:1px solid var(--line-control);border-radius:12px;
  padding:16px;cursor:pointer;font-size:.97rem;color:var(--paper);position:relative;
  background:rgba(255,255,255,.02);
  transition:border-color var(--dur-micro),background var(--dur-micro);
}
.opt:hover{border-color:rgba(255,255,255,.36)}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt span{display:flex;align-items:center;gap:12px}
.opt span::before{
  content:"";width:10px;height:10px;border:1px solid var(--line-control);background:rgba(255,255,255,.06);flex:0 0 auto;
  transition:background var(--dur-micro),border-color var(--dur-micro);
}
.opt:has(input:checked){border-color:rgba(167,139,250,.65);background:rgba(124,58,237,.12)}
.opt:has(input:checked) span::before{background:var(--grad);border-color:transparent}
.opt:has(input:focus-visible){outline:2px solid var(--violet-text);outline-offset:3px}
.fnav{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px;clear:both}
.fnext,.fback{display:none}
.js .fnext,.js .fback{display:inline-flex}

.consent{display:flex;gap:12px;align-items:flex-start;font-size:.87rem;color:var(--body);margin-top:4px}
.consent input{width:18px;height:18px;flex:0 0 auto;margin-top:2px;accent-color:var(--violet);-webkit-appearance:checkbox;appearance:auto}
.consent a{text-decoration:underline;text-underline-offset:3px}
.form-note{font-size:.9rem;color:var(--violet-text);min-height:22px}

/* ---------- CTA-Band ---------- */
.cta-band{text-align:center;overflow:hidden}
.cta-band .wrap{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}
.cta-band::before{
  content:"";position:absolute;left:50%;top:12%;transform:translateX(-50%);
  width:min(70vw,760px);height:70%;background:var(--grad);filter:blur(120px);opacity:.22;
  border-radius:50%;pointer-events:none;
}
.cta-band h2{margin:16px 0 18px;max-width:16ch}
.cta-band .lead{max-width:40ch;margin:0 auto}
.cta-band .hero-actions{margin-top:32px;justify-content:center}

/* ---------- Footer ---------- */
footer{background:#060609;color:var(--muted);font-size:.9rem;padding:64px 0 36px;border-top:1px solid var(--line)}
.foot-grid{display:grid;grid-template-columns:1fr;gap:40px;padding-bottom:48px;border-bottom:1px solid var(--line)}
@media(min-width:760px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.foot-brand .logo{color:var(--paper);margin-bottom:18px}
.foot-brand p{color:var(--muted);max-width:30ch;font-size:.9rem}
.foot-brand a{color:var(--body);border-bottom:1px solid var(--line-strong);transition:color var(--dur-micro),border-color var(--dur-micro)}
.foot-brand a:hover{color:var(--paper);border-color:var(--paper)}
.foot-col small{display:block;color:var(--muted);font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;margin-bottom:14px}
.foot-col nav{display:flex;flex-direction:column;gap:10px}
.foot-col a{color:var(--body);transition:color var(--dur-micro);font-size:.9rem}
.foot-col a:hover{color:var(--paper)}
.foot-bottom{display:flex;flex-direction:column;gap:10px;padding-top:28px;font-size:.82rem;color:var(--muted)}
@media(min-width:760px){.foot-bottom{flex-direction:row;align-items:center;justify-content:space-between}}
.foot-links{display:flex;flex-wrap:wrap;gap:22px}
.foot-links a{color:var(--body)}
.foot-links a:hover{color:var(--paper)}

/* ---------- Sticky Mobile-CTA ---------- */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom));
  background:rgba(8,8,13,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  transform:translateY(110%);visibility:hidden;
  transition:transform var(--dur-ui) var(--ease-out),visibility 0s linear var(--dur-ui);
}
.cta-visible .sticky-cta{transform:none;visibility:visible;transition:transform var(--dur-ui) var(--ease-out)}
.menu-open .sticky-cta{visibility:hidden}
.sticky-cta .btn{width:100%;justify-content:center;padding:13px 20px}
@media(min-width:760px){.sticky-cta{display:none}}
.menu-open .sticky-cta{transform:translateY(110%)}
/* Platz für die Leiste, damit sie das Seitenende nicht verdeckt */
@media(max-width:759px){
  .cta-visible footer{padding-bottom:calc(36px + 112px + env(safe-area-inset-bottom))}
}

/* ---------- Rechtliches ---------- */
.legal{padding-top:clamp(140px,16vw,180px)}
.legal h1{font-size:clamp(2rem,5vw,3.2rem);margin-bottom:40px}
.legal h2{font-size:1.3rem;margin:44px 0 12px}
.legal p,.legal li{color:var(--body);max-width:70ch}
.legal ul{padding-left:20px;margin:10px 0}
.legal a{border-bottom:1px solid var(--line-strong)}
.legal a:hover{color:var(--violet-text);border-color:var(--violet-text)}

/* ---------- 404 ---------- */
.notfound{padding-top:clamp(160px,20vw,220px);padding-bottom:clamp(88px,12vw,140px)}
.notfound .code{
  font-family:var(--font-display);font-weight:600;font-size:clamp(4rem,14vw,9rem);
  letter-spacing:-.03em;line-height:1;background:var(--grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.notfound h1{font-size:clamp(1.8rem,4.5vw,3rem);margin:18px 0 16px}

/* ---------- Reveals (nur mit JS aktiv — ohne JS bleibt alles sichtbar) ---------- */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity var(--dur-enter) var(--ease-out),transform var(--dur-enter) var(--ease-out)}
.js .reveal.is-visible{opacity:1;transform:none}
.js .reveal-group>*{opacity:0;transform:translateY(26px);transition:opacity var(--dur-enter) var(--ease-out),transform var(--dur-enter) var(--ease-out)}
.js .reveal-group.is-visible>*{opacity:1;transform:none}
.js .reveal-group.is-visible>*:nth-child(2){transition-delay:90ms}
.js .reveal-group.is-visible>*:nth-child(3){transition-delay:180ms}
.js .reveal-group.is-visible>*:nth-child(4){transition-delay:270ms}
.js .reveal-group.is-visible>*:nth-child(5){transition-delay:360ms}
.js .reveal-group.is-visible>*:nth-child(6){transition-delay:450ms}
.js .reveal-group.is-visible>*:nth-child(7){transition-delay:540ms}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal,.reveal-group>*,.line-mask>span{opacity:1!important;transform:none!important}
  .orb{animation:none!important}
}