/* =========================================================
   Nova Design – Stylesheet
   Aufgebaut nach Art der Apple-Produktseiten: Weiß und Hellgrau,
   große zentrierte Überschriften, runde Kacheln ohne Rahmen, Lila
   als Akzent. Schrift: Helvetica (auf Windows Arial). Hell und
   dunkel: folgt dem System, umschaltbar oben rechts und im Footer.
   ========================================================= */
:root{
  --bg:#FFFFFF;
  --bg-alt:#F5F5F7;
  --surface:#F5F5F7;
  --surface-alt:#FFFFFF;
  --pill:#FFFFFF;
  --ink:#1D1D1F;
  --ink-soft:#424245;
  --text:#1D1D1F;
  --muted:#6E6E73;
  --line:#D2D2D7;
  --line-strong:#C7C7CC;
  --accent:#4A35D8;
  --accent-text:#3A27B8;
  --accent-soft:#ECE9FC;
  --on-accent:#FFFFFF;
  --on-ink:#FFFFFF;
  --ok:#1C7C4B;
  --err:#B42318;
  --header-bg:rgba(251,251,253,.8);
  --chrome:#ECECF0;
  --chrome-dot:#C7C7CC;
  --device:#1D1D1F;
  --glow-logo:rgba(74,53,216,.6);
  --accent-shadow:rgba(74,53,216,.35);
  --sweep-a:#4A35D8;--sweep-b:#B03FD9;--sweep-c:#F0607A;
  --grad:linear-gradient(90deg,var(--sweep-a),var(--sweep-b) 55%,var(--sweep-c));
  --shadow:0 2px 6px rgba(0,0,0,.04),0 30px 60px -30px rgba(0,0,0,.28);
  --tt-x:0px;
  --tt-sun:var(--ink);
  --tt-moon:var(--muted);

  --f-display:Helvetica,"Helvetica Neue",Arial,sans-serif;
  --f-body:Helvetica,"Helvetica Neue",Arial,sans-serif;

  --wrap:1180px;
  --gutter:clamp(20px,4vw,44px);
  --radius:18px;
  --tile:28px;
  --hdr:52px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#000000;
    --bg-alt:#161617;
    --surface:#1D1D1F;
    --surface-alt:#1D1D1F;
    --pill:#2C2C2E;
    --ink:#F5F5F7;
    --ink-soft:#D2D2D7;
    --text:#F5F5F7;
    --muted:#86868B;
    --line:#2C2C2E;
    --line-strong:#424245;
    --accent:#8C7BFF;
    --accent-text:#A99CFF;
    --accent-soft:rgba(140,123,255,.16);
    --on-accent:#0B0B0F;
    --on-ink:#000000;
    --ok:#4CC98A;
    --err:#FF7B70;
    --header-bg:rgba(22,22,23,.8);
    --chrome:#2C2C2E;
    --chrome-dot:#48484A;
    --device:#3A3A3C;
    --glow-logo:rgba(140,123,255,.85);
    --accent-shadow:rgba(120,100,255,.45);
    --sweep-a:#8C7BFF;--sweep-b:#D17BFF;--sweep-c:#FF8A9A;
    --shadow:0 2px 6px rgba(0,0,0,.5),0 30px 60px -30px rgba(0,0,0,.9);
    --tt-x:28px;
    --tt-sun:var(--muted);
    --tt-moon:var(--ink);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#000000;
  --bg-alt:#161617;
  --surface:#1D1D1F;
  --surface-alt:#1D1D1F;
  --pill:#2C2C2E;
  --ink:#F5F5F7;
  --ink-soft:#D2D2D7;
  --text:#F5F5F7;
  --muted:#86868B;
  --line:#2C2C2E;
  --line-strong:#424245;
  --accent:#8C7BFF;
  --accent-text:#A99CFF;
  --accent-soft:rgba(140,123,255,.16);
  --on-accent:#0B0B0F;
  --on-ink:#000000;
  --ok:#4CC98A;
  --err:#FF7B70;
  --header-bg:rgba(22,22,23,.8);
  --chrome:#2C2C2E;
  --chrome-dot:#48484A;
  --device:#3A3A3C;
  --glow-logo:rgba(140,123,255,.85);
  --accent-shadow:rgba(120,100,255,.45);
  --sweep-a:#8C7BFF;--sweep-b:#D17BFF;--sweep-c:#FF8A9A;
  --shadow:0 2px 6px rgba(0,0,0,.5),0 30px 60px -30px rgba(0,0,0,.9);
  --tt-x:28px;
  --tt-sun:var(--muted);
  --tt-moon:var(--ink);
  color-scheme:dark;
}

/* ---------- Grundlagen ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
/* Endlos-Animationen außerhalb des Bildes anhalten (Klasse setzt main.js per IntersectionObserver) */
.anim-off,.anim-off::before,.anim-off::after,.anim-off *,.anim-off *::before,.anim-off *::after{animation-play-state:paused!important}
html{overscroll-behavior-y:none;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr) + 16px);-webkit-text-size-adjust:100%;background:var(--bg)}
body{overscroll-behavior-y:none;margin:0;background:var(--bg);color:var(--text);font:400 1.0625rem/1.55 var(--f-body);letter-spacing:-.005em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
::selection{background:var(--accent);color:var(--on-accent)}
img,svg,iframe{max-width:100%}
a{color:var(--accent-text);text-decoration-color:currentColor;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--accent-text)}
p,ul,ol,dl,dd,figure{margin:0}
h1,h2,h3,h4{margin:0;font-family:var(--f-display);color:var(--ink);font-optical-sizing:auto;text-wrap:balance}
h1{font-size:clamp(2.8rem,7.4vw,6rem);font-weight:700;line-height:1.02;letter-spacing:-.035em}
h2{font-size:clamp(2.2rem,5vw,4rem);font-weight:700;line-height:1.04;letter-spacing:-.03em}
h3{font-size:1.4rem;font-weight:600;line-height:1.15;letter-spacing:-.015em}
h4{font-size:1rem;font-weight:600}
h1,h2{overflow-wrap:break-word}
@media (max-width:600px){h1,h2,.statement{-webkit-hyphens:auto;hyphens:auto}}
strong{color:var(--ink);font-weight:600}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:4px}
.wrap{width:min(var(--wrap),100% - 2*var(--gutter));margin-inline:auto}
.skip{position:absolute;inset-inline-start:16px;top:8px;transform:translateY(-200%);z-index:100;background:var(--ink);color:var(--on-ink);padding:10px 14px;border-radius:8px}
.skip:focus{transform:none}
.muted{color:var(--muted)}
.small{font-size:.92rem}

@media (prefers-reduced-motion:no-preference){
  /* Nur für Browser ohne View Transitions: Farbübergang an allen Elementen (teuer) */
  .theme-switching,.theme-switching *,.theme-switching *::before,.theme-switching *::after{transition:background-color .35s ease,border-color .35s ease,color .35s ease!important}
  /* Hell/Dunkel per View Transition (main.js): die Grafikkarte überblendet zwei Bilder der Seite;
     der Schalter-Knopf gleitet dabei als eigene Ebene */
  /* Gleiche Dauer und Kurve wie die bisherigen Übergänge: Farben .35s ease, Knopf .3s cubic-bezier(.3,.7,.2,1) */
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.35s;animation-timing-function:ease}
  .vt-thema .theme-toggle .tt-knob{view-transition-name:nd-tt-knob}
  ::view-transition-group(nd-tt-knob){animation-duration:.3s;animation-timing-function:cubic-bezier(.3,.7,.2,1)}
}

/* Farbverlauf im Text (wie „Built for Apple Intelligence.“) */
.scribble{white-space:nowrap;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;padding-bottom:.06em}

/* ---------- Bewegung (nach Art der Apple-Produktseiten, siehe main.js „Bewegung“) ----------
   Auftritt beim Laden, gestaffeltes Einblenden, Farbverlauf durch Überschriften, Ebenen beim
   Scrollen, Ablauf als stehendes Kapitel, Satz der Wort für Wort aufleuchtet, Zahlen die
   hochzählen. Bei „Bewegung reduzieren“ ist alles ruhig. */
@media (prefers-reduced-motion:no-preference){
  /* Auftritt: Überschrift wird scharf und steigt auf, der Rest folgt gestaffelt */
  .hero-copy>*,.page-head .wrap>*{animation:nd-rise .9s cubic-bezier(.2,.7,.2,1) both}
  .hero-copy>h1,.page-head h1{animation-name:nd-focus;animation-duration:1.2s}
  .hero-copy>:nth-child(2),.page-head .wrap>:nth-child(2){animation-delay:.08s}
  .hero-copy>:nth-child(3),.page-head .wrap>:nth-child(3){animation-delay:.45s}
  .hero-copy>:nth-child(4),.page-head .wrap>:nth-child(4){animation-delay:.6s}
  .hero-copy>:nth-child(n+5),.page-head .wrap>:nth-child(n+5){animation-delay:.7s}
  /* Überschrift Wort für Wort (main.js packt die Wörter in .hw): steigt auf und wird scharf */
  h1.split{animation:none!important}
  h1.split .hw{display:inline-block;animation:nd-focus 1.1s cubic-bezier(.2,.7,.2,1) calc(.05s + var(--i) * 75ms) both}
  /* Der Laptop kommt von unten, der Deckel klappt beim Scrollen auf (main.js) */
  .hero figure{animation:nd-rise 1.3s cubic-bezier(.2,.7,.2,1) .5s both}
  /* Ebenen beim Scrollen: das Handy in der Projekt-Vorschau schwebt schneller */
  /* Hero-Vorschau bleibt beim Hinscrollen stehen, die Demos darin scrollen mit (main.js) */
  .edu-case .case-visual .phone{translate:0 calc(var(--pp,0) * -80px)}

  /* Gestaffeltes Einblenden beim Scrollen (Klassen setzt main.js nur unterhalb des Bildschirms) */
  .st:not(.in){opacity:0;translate:0 40px}
  .st.in{transition:opacity 1s ease var(--d,0s),translate 1s cubic-bezier(.2,.7,.2,1) var(--d,0s)}

  /* Farbverlauf läuft einmal durch die Überschrift, danach wieder einfarbig */
  .sweep{background:linear-gradient(100deg,currentColor 0 40%,var(--sweep-a) 46%,var(--sweep-b) 51%,var(--sweep-c) 56%,currentColor 62% 100%) 100% 0/280% 100% no-repeat;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  .sweep.in{background-position:0 0;transition:background-position 1.9s cubic-bezier(.45,0,.2,1) calc(var(--d,0s) + .15s)}

  /* Satz, der beim Scrollen Wort für Wort aufleuchtet */
  .words .w{opacity:.16;transition:opacity .45s ease}
  .words .w.lit{opacity:1}

  /* Highlights: Grafik der aktiven Karte baut sich auf (ohne JavaScript bleibt alles fertig stehen) */
  .hl.ready .pill{transition:translate 1.3s cubic-bezier(.2,.7,.2,1) calc(var(--i) * 70ms),opacity 1s ease calc(var(--i) * 70ms)}
  .hl.ready .hl-card:not(.is-active) .pill{translate:0 55%}
  .hl.ready .win,.hl.ready .cal,.hl.ready .ring{transition:translate 1.1s cubic-bezier(.2,.7,.2,1) .25s,opacity .9s ease .25s,scale 1.1s cubic-bezier(.2,.7,.2,1) .25s}
  .hl.ready .hl-card:not(.is-active) :is(.win,.cal,.ring){translate:-50% 60px;scale:.94;opacity:0}
  .hl.ready .win-row i{transition:scale .8s cubic-bezier(.3,1.4,.5,1) calc(.7s + var(--n,0) * 90ms)}
  .hl.ready .hl-card:not(.is-active) .win-row i{scale:.4}
  .hl.ready .file{transition:transform 1s cubic-bezier(.2,.8,.2,1.05) calc(.3s + var(--n,0) * 80ms),opacity .6s ease .3s}
  .hl.ready .hl-card:not(.is-active) .file{transform:translateX(-50%) rotate(0);opacity:0}
  .hl.ready .cal-grid i.sel{transition:scale .7s cubic-bezier(.3,1.6,.5,1) 1s,background-color .4s ease 1s}
  .hl.ready .hl-card:not(.is-active) .cal-grid i.sel{scale:.3}
  .hl.ready .cal-chip{transition:scale .7s cubic-bezier(.3,1.6,.5,1) 1.3s,opacity .3s ease 1.3s}
  .hl.ready .hl-card:not(.is-active) .cal-chip{scale:0;opacity:0}
  .hl.ready .ring-fg{transition:stroke-dashoffset 1.6s cubic-bezier(.45,0,.2,1) .5s}
  .hl.ready .hl-card:not(.is-active) .ring-fg{stroke-dashoffset:314.16}
  .hl.ready .ring-tick{transition:stroke-dashoffset .6s ease 1.9s}
  .hl.ready .hl-card:not(.is-active) .ring-tick{stroke-dashoffset:80}
  .hl-card.is-active .pill{animation:nd-float 6s ease-in-out calc(1.4s + var(--i) * -.7s) infinite alternate}
}
@media (prefers-reduced-motion:no-preference) and (min-width:1021px){
  /* Ablauf als Kapitel: der Bereich bleibt stehen, ein Satz nach dem anderen erscheint */
  .chapters{height:290vh;padding-block:0}
  .chapters>.wrap{position:sticky;top:var(--hdr);height:calc(100vh - var(--hdr));display:flex;flex-direction:column;justify-content:center}
  .chapters .head{margin-bottom:clamp(28px,4vw,48px)}
  .chapters .timeline{display:grid;gap:0;max-width:980px}
  .chapters .timeline li{grid-area:1/1;text-align:center;font-size:clamp(2rem,3.6vw,3.3rem);opacity:0;translate:0 50px;filter:blur(10px);pointer-events:none;transition:opacity .7s ease,translate .8s cubic-bezier(.2,.7,.2,1),filter .7s ease}
  .chapters .timeline li.past{translate:0 -50px}
  .chapters .timeline li.on{opacity:1;translate:none;filter:none;pointer-events:auto}
  .tl-progress{display:flex;justify-content:center;gap:10px;margin-top:clamp(36px,5vw,56px)}
  .tl-progress i{position:relative;width:56px;height:4px;border-radius:2px;overflow:hidden;background:color-mix(in srgb,var(--ink) 14%,transparent)}
  .tl-progress i::after{content:"";position:absolute;inset:0;background:var(--accent);transform:scaleX(var(--f,0));transform-origin:0 50%}
  .chapters .tl-more{text-align:center}
}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    /* Vorschauen wachsen beim Hereinscrollen (nur Browser mit scroll-gesteuerten Animationen) */
    .case-visual,.vw-stage{animation:nd-zoom linear both;animation-timeline:view();animation-range:entry 0% cover 38%}
  }
}
@keyframes nd-rise{from{opacity:0;translate:0 30px}}
@keyframes nd-focus{from{opacity:0;translate:0 .25em;filter:blur(14px)}}
@keyframes nd-open{from{opacity:0;transform:perspective(1600px) rotateX(24deg) translateY(40px) scale(.9)}}
@keyframes nd-zoom{from{scale:.88}}
@keyframes nd-float{from{translate:0 0}to{translate:0 -4%}}

/* ---------- Header (schlank, Milchglas, wie die Produkt-Navigation bei Apple) ---------- */
.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--header-bg);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid transparent;transition:border-color .3s ease,background-color .3s ease}
.site-header.is-stuck{border-bottom-color:var(--line)}
.header-inner{display:flex;align-items:center;gap:24px;height:var(--hdr)}
.logo{position:relative;display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);white-space:nowrap}
.logo:hover{color:var(--ink)}
.logo-mark{width:28px;height:28px;flex:none;overflow:visible}
.logo-mark .n{fill:none;stroke:currentColor;stroke-width:9.4;stroke-linecap:round;stroke-linejoin:round}
.logo-mark .star{fill:var(--accent)}
.logo-mark .halo{opacity:.85;transform-box:fill-box;transform-origin:center}
.logo-mark .halo-stop{stop-color:var(--glow-logo)}
.logo-mark .halo-stop-end{stop-color:var(--glow-logo);stop-opacity:0}
.logo-word{font:600 1.18rem/1 var(--f-display);letter-spacing:-.02em}
.logo-word span{font-weight:400}
/* Leuchten ums Logo als eigene Ebene statt als SVG-Animation: Animationen in SVG muss der Prozessor
   bei jedem Bild neu zeichnen, diese Ebene bewegt die Grafikkarte. Lage = SVG-Kreis (cx 54, cy 11, r 19) bei 28px. */
.site-header .logo{isolation:isolate}
.site-header .logo::before{content:"";position:absolute;z-index:-1;left:15.31px;top:-3.5px;width:16.63px;height:16.63px;border-radius:50%;background:radial-gradient(closest-side,var(--glow-logo),transparent);opacity:.85;pointer-events:none}
[dir="rtl"] .site-header .logo::before{left:auto;right:-3.94px}
.site-header .logo-mark .halo{display:none}
/* Stern ebenso als eigene Ebene (SVG-Kreis cx 54, cy 11, r 5.4 bei 28px), damit sein Puls wie vorher läuft */
.site-header .logo::after{content:"";position:absolute;left:21.2625px;top:2.45px;width:4.725px;height:4.725px;border-radius:50%;background:var(--accent);pointer-events:none}
[dir="rtl"] .site-header .logo::after{left:auto;right:2.0125px}
.site-header .logo-mark .star{display:none}
@media (prefers-reduced-motion:no-preference){
  .site-header .logo::before{animation:nova-halo 3.8s ease-in-out infinite}
  .site-header .logo::after{animation:nova-star 3.8s ease-in-out infinite}
  .site-header .logo:hover::before{animation-duration:1.6s}
}
@keyframes nova-halo{0%,100%{opacity:.55;transform:scale(.85)}50%{opacity:1;transform:scale(1.18)}}
@keyframes nova-star{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}

.main-nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.main-nav a{position:relative;color:var(--ink);opacity:.8;text-decoration:none;font-size:.82rem;font-weight:400;padding:6px 10px;border-radius:8px;transition:opacity .2s,color .2s}
.main-nav a:hover{opacity:1;color:var(--accent-text)}
.main-nav a[aria-current="page"]{opacity:1}
.main-nav a[aria-current="page"]::after{content:"";position:absolute;left:10px;right:10px;bottom:-9px;height:1px;background:var(--ink)}
.header-actions{display:flex;align-items:center;gap:8px}
.header-actions .btn-sm{padding:5px 14px;font-size:.8rem}
.lang-link,.icon-btn{display:inline-grid;place-items:center;height:34px;min-width:34px;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--ink)}
.lang-link{padding:0 10px;font-size:.85rem;font-weight:600;color:var(--muted);text-decoration:none}
.lang-link:hover{color:var(--ink);border-color:var(--line-strong)}
.icon-btn{padding:0;cursor:pointer}
.icon-btn:hover{border-color:var(--line-strong);background:var(--bg-alt)}
.icon-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.i-sun{display:var(--show-sun)}
.i-moon{display:var(--show-moon)}
/* Hell/Dunkel-Schalter in der Kopfzeile */
.theme-toggle{position:relative;display:inline-flex;align-items:center;flex:none;width:62px;height:34px;padding:0;border:1px solid var(--line);border-radius:999px;background:var(--bg-alt);cursor:pointer;transition:border-color .2s}
.theme-toggle:hover{border-color:var(--ink)}
.theme-toggle .tt-knob{position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:var(--pill);box-shadow:0 1px 3px rgba(0,0,0,.22),0 0 0 1px var(--line),0 0 14px -2px var(--glow-logo);transform:translateX(var(--tt-x));transition:transform .35s cubic-bezier(.3,1.3,.5,1)}
.theme-toggle .tt-icon{position:absolute;top:50%;z-index:1;width:16px;height:16px;margin-top:-8px;display:grid;place-items:center;pointer-events:none;transition:color .3s}
.theme-toggle .tt-sun{left:8px;color:var(--tt-sun)}
.theme-toggle .tt-moon{right:8px;color:var(--tt-moon)}
.theme-toggle svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.menu-toggle{display:none;width:42px;height:34px;border:1px solid var(--line);border-radius:10px;background:transparent;cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:5px}
.menu-toggle span{display:block;width:18px;height:2px;background:var(--ink);transition:transform .2s}
.menu-toggle[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
@media (max-width:1100px){
  .main-nav{display:none}
  .menu-toggle{display:inline-flex}
  .header-actions{margin-left:auto}
  .main-nav.open{display:flex;flex-direction:column;align-items:stretch;gap:0;position:absolute;left:0;right:0;top:100%;background:var(--bg);border-bottom:1px solid var(--line);padding:8px var(--gutter) 18px;box-shadow:0 18px 30px -20px rgba(0,0,0,.35)}
  .main-nav.open a{padding:15px 2px;border-bottom:1px solid var(--line);border-radius:0;opacity:1;font:600 1.3rem/1.2 var(--f-display)}
  .main-nav.open a:last-child{border-bottom:0}
  .main-nav.open a[aria-current="page"]::after{display:none}
  .main-nav.open a[aria-current="page"]{color:var(--accent-text)}
}
@media (max-width:600px){.header-actions .btn{display:none}.logo-word{font-size:1.12rem}}
@media (max-width:400px){.header-inner{gap:14px}}

/* ---------- Sprachmenü (zeigt das Kürzel, ein Klick öffnet alle Sprachen) ---------- */
.lang-menu{position:relative}
.lang-menu summary{list-style:none;display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 10px 0 12px;border:1px solid var(--line);border-radius:10px;color:var(--muted);font:600 .85rem/1 var(--f-body);letter-spacing:.03em;cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .15s,border-color .15s,background-color .15s}
.lang-menu summary::-webkit-details-marker{display:none}
.lang-menu summary::marker{content:""}
.lang-menu summary:hover,.lang-menu[open] summary{color:var(--ink);border-color:var(--line-strong)}
.lang-menu[open] summary{background:var(--surface)}
.lang-menu summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.lm-chev{flex:none;transition:transform .2s ease}
.lang-menu[open] .lm-chev{transform:rotate(180deg)}
.lm-panel{position:absolute;top:calc(100% + 10px);right:0;z-index:60;width:256px;max-width:calc(100vw - 32px);padding:8px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);transform-origin:top right}
.lang-menu[open] .lm-panel{animation:lm-in .18s ease-out}
@keyframes lm-in{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
.lm-title{margin:4px 10px 8px;font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.lm-panel ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.lm-panel a{display:grid;grid-template-columns:34px minmax(0,1fr) 16px;align-items:center;gap:12px;padding:8px 10px;border-radius:9px;color:var(--ink);text-decoration:none;transition:background-color .15s}
.lm-panel a:hover,.lm-panel a:focus-visible{background:var(--bg-alt);outline:none}
.lm-panel a[aria-current]{background:var(--accent-soft)}
.lm-code{display:grid;place-items:center;height:26px;border:1px solid var(--line-strong);border-radius:7px;font-size:.7rem;font-weight:700;letter-spacing:.04em;color:var(--muted)}
.lm-panel a[aria-current] .lm-code{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.lm-names{display:grid;justify-items:start;gap:2px;min-width:0}
.lm-native{font-weight:600;font-size:.95rem;line-height:1.25}
.lm-sub{font-size:.78rem;line-height:1.2;color:var(--muted)}
.lm-check{color:var(--accent-text)}
@media (prefers-reduced-motion:reduce){.lang-menu[open] .lm-panel{animation:none}.lm-chev{transition:none}}
@media (max-width:399px){.header-inner{gap:10px}.header-actions{gap:4px}.lang-menu summary{padding:0 7px 0 9px;gap:3px}.site-header .logo-word{font-size:1.12rem}}
@media (max-width:374px){.site-header .logo-word{font-size:1rem}.site-header .logo{gap:8px}}
@media (max-width:359px){.site-header .logo-word{display:none}h1{font-size:2.35rem}}

/* ---------- Buttons (Pillen) und Links mit › ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;border-radius:999px;font:500 1.0625rem/1.2 var(--f-body);letter-spacing:-.01em;text-decoration:none;text-align:center;border:1px solid var(--accent);background:var(--accent);color:var(--on-accent);cursor:pointer;transition:background-color .25s,border-color .25s,color .25s,scale .25s cubic-bezier(.3,1.4,.5,1)}
.btn:hover{background:color-mix(in srgb,var(--accent) 86%,#fff);border-color:color-mix(in srgb,var(--accent) 86%,#fff);color:var(--on-accent);scale:1.03}
.btn:active{scale:.98}
.btn .arr{display:inline-block;transition:transform .2s}
.btn:hover .arr{transform:translateX(3px)}
.btn-outline{background:transparent;color:var(--accent-text);border-color:var(--accent)}
.btn-outline:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn-accent{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn-dark{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
.btn-sm{padding:8px 16px;font-size:.92rem}
.btn-block{width:100%}
.btn:disabled{opacity:.6;cursor:wait}
.link-arrow{font-weight:400;text-decoration:none;color:var(--accent-text);border:0;padding:0}
.link-arrow::after{content:"›";display:inline-block;margin-left:.3em;font-size:1.2em;line-height:0;transition:transform .2s}
.link-arrow:hover{color:var(--accent-text);text-decoration:underline;text-underline-offset:4px}
.link-arrow:hover::after{transform:translateX(3px)}
.link-arrow.ext::after{content:"↗";font-size:1em}
.link-arrow.ext:hover::after{transform:translate(2px,-2px)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px}

/* ---------- Abschnitte: viel Weißraum, zentrierte Köpfe ---------- */
.section{padding-block:clamp(84px,11vw,160px)}
.section-alt{background:var(--bg-alt);--ring:var(--bg-alt);--surface:var(--surface-alt)}
.section-tight{padding-block:clamp(56px,7vw,100px)}
.label{display:block;font:600 clamp(1.05rem,1.5vw,1.3rem)/1.25 var(--f-display);color:var(--muted);letter-spacing:-.012em}
.lead{font-size:clamp(1.12rem,1.7vw,1.35rem);line-height:1.42;font-weight:600;color:var(--ink);letter-spacing:-.014em;max-width:46ch}
.head{display:grid;gap:14px;justify-items:center;text-align:center;max-width:920px;margin:0 auto clamp(48px,6vw,84px)}
.head > p:not(.label){color:var(--ink);font-weight:600;font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:1.42;letter-spacing:-.012em;max-width:46ch}
.head.left{justify-items:start;text-align:start;margin-inline:0;max-width:none}
.head-row{display:grid;justify-items:center;gap:22px;margin-bottom:clamp(48px,6vw,84px)}
.head-row .head{margin-bottom:0}
.cols{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,2fr);gap:clamp(28px,5vw,80px);align-items:start}
.cols-head{display:grid;gap:16px;position:sticky;top:calc(var(--hdr) + 28px)}
.cols-head p:not(.label){color:var(--muted)}
@media (max-width:920px){.cols{grid-template-columns:minmax(0,1fr)}.cols-head{position:static}}

/* ---------- Startseite: Hero (zentriert, darunter die große Vorschau und Kennzahlen) ---------- */
.hero{padding-block:clamp(44px,6.5vw,96px) clamp(84px,10vw,140px);text-align:center;overflow:hidden;overflow:clip}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center}
.hero-copy{display:grid;justify-items:center;transform-origin:50% 0;opacity:calc(1 - var(--out,0));translate:0 calc(var(--out,0) * -48px);scale:calc(1 - var(--out,0) * .05)}
.eyebrow{margin-bottom:14px;font:600 clamp(1.2rem,2vw,1.65rem)/1.2 var(--f-display);color:var(--ink);letter-spacing:-.015em}
.hero h1{max-width:17ch;margin:0;font-size:clamp(2.9rem,min(7.2vw,10vh),6.4rem);line-height:.98;letter-spacing:-.045em}
.hero .lead{margin:28px auto 0;max-width:40ch}
.hero .actions{justify-content:center;margin-top:34px}
.hero figure{width:100%;max-width:min(1120px,(100vh - var(--hdr) - 64px) * 1.38);margin-top:clamp(56px,7vw,100px)}
.hero .stage-note{justify-content:center;text-align:center}
/* Kino-Modus (main.js, nur wenn alles ins Fenster passt): Überschrift und zugeklappter Laptop
   stehen im ersten Bild; beim Scrollen bleibt der Bereich stehen, die Überschrift weicht,
   der Laptop fährt hoch und klappt auf, danach scrollen die Demos mit */
.hero.cine{padding-block:0}
.hero.cine .hero-stick{position:sticky;top:var(--hdr);overflow:visible;align-content:start}   /* nicht beschneiden: der Deckel wird beim Aufklappen perspektivisch breiter */
.hero-copy{align-content:start}
.hero.cine .hero-copy{padding-top:clamp(36px,7vh,88px)}
.hero.cine .hero-copy{position:relative;z-index:3}
.hero.cine .hero-copy.gone{pointer-events:none}
.hero.cine figure{pointer-events:none}
.hero.cine.lap-open figure :is(.preview,.phone){pointer-events:auto}
.hero.cine figure{position:absolute;left:0;right:0;top:var(--fig-top,0px);margin:0 auto;animation-delay:.6s}
.hero.cine .stage-note{opacity:var(--ph,1)}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,64px);width:100%;max-width:1000px;margin-top:clamp(72px,9vw,128px)}
.stats dt{font:700 clamp(2rem,4.6vw,3.8rem)/1.05 var(--f-display);letter-spacing:-.04em;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;padding-bottom:.08em;font-variant-numeric:tabular-nums}
.stats dd{margin-top:10px;font-size:clamp(.95rem,1.2vw,1.1rem);line-height:1.4;color:var(--muted)}
@media (max-width:700px){.stats{grid-template-columns:minmax(0,1fr);gap:40px}}

/* ---------- Live-Vorschauen (scrollbar) ---------- */
.stage{position:relative;padding:0 7%}
.stage .phone{position:absolute;z-index:3;right:0;bottom:0;width:22%;translate:calc((1 - var(--ph,1)) * 40%) 0;opacity:var(--ph,1)}
.stage-note{display:flex;gap:10px;align-items:baseline;margin-top:18px;font-size:.9rem;color:var(--muted)}
.stage-note b{color:var(--ink);font-weight:600}
.preview{position:relative;z-index:1;isolation:isolate;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface);box-shadow:var(--shadow)}
.preview-bar{display:flex;align-items:center;gap:6px;height:32px;padding:0 12px;background:var(--chrome);border-bottom:1px solid var(--line)}
.preview-bar i{width:9px;height:9px;border-radius:50%;background:var(--chrome-dot)}
.preview-bar span{margin-left:10px;font-size:.75rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.preview-frame{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--fallback,#E9E8E2)}
.preview-frame::before{content:attr(data-label);position:absolute;inset:0;display:grid;place-items:center;font:600 1.05rem/1.2 var(--f-display);color:var(--fallback-text,var(--muted))}
.phone{position:relative;isolation:isolate;border:7px solid var(--device);border-radius:28px;overflow:hidden;background:var(--device);box-shadow:0 0 0 4px var(--ring,var(--bg)),0 0 0 5px var(--line-strong),var(--shadow)}
.phone .preview-frame{aspect-ratio:390/780;border-radius:20px}

/* ---------- Leistungs-Zeilen ---------- */
.rows{list-style:none;padding:0;margin:0;border-top:1px solid var(--line-strong)}
.rows > li{border-bottom:1px solid var(--line-strong)}
.row{display:grid;grid-template-columns:56px minmax(0,1fr) auto 24px;gap:6px 22px;align-items:baseline;padding:26px 6px;text-decoration:none;color:var(--text);transition:background-color .2s,padding .2s}
.row-no{font:600 .95rem/1 var(--f-display);color:var(--muted);font-variant-numeric:tabular-nums}
.row-title{font:700 clamp(1.35rem,2.4vw,1.9rem)/1.1 var(--f-display);letter-spacing:-.022em;color:var(--ink)}
.row-text{grid-column:2;color:var(--muted);max-width:52ch}
.row-price{grid-column:3;grid-row:1;font:600 1.05rem/1 var(--f-display);color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.row-arrow{grid-column:4;grid-row:1;color:var(--muted);transition:transform .2s,color .2s}
a.row:hover{background:var(--surface);padding-inline:16px;color:var(--text)}
a.row:hover .row-no,a.row:hover .row-arrow{color:var(--accent-text)}
a.row:hover .row-arrow{transform:translateX(4px)}
@media (max-width:640px){.row{grid-template-columns:40px minmax(0,1fr) 20px}.row-price{grid-column:2;grid-row:auto}.row-arrow{grid-column:3}}

/* ---------- Projekte ---------- */
.grid{display:grid;gap:22px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:980px){.grid-3{grid-template-columns:minmax(0,1fr)}}
@media (max-width:700px){.grid-2{grid-template-columns:minmax(0,1fr)}}
.project{display:grid;gap:16px;align-content:start}
.project-meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.88rem;color:var(--muted)}
.project-meta span + span::before{content:"·";margin-right:14px;color:var(--line-strong)}
.project h3{font-size:1.55rem}
.project p{color:var(--muted)}
.project .actions{gap:10px 20px}
@supports (grid-template-rows:subgrid){.grid-3 > .project{grid-row:span 5;grid-template-rows:subgrid;row-gap:16px}}
.project .actions{align-self:end}
.tag{display:inline-flex;align-items:center;gap:8px;justify-self:start;font-size:.85rem;font-weight:600;color:var(--accent-text);background:var(--accent-soft);padding:5px 11px;border-radius:999px}

/* ---------- Ablauf: große Sätze mit farbigem Anfang (am Computer als stehendes Kapitel, siehe Bewegung) ---------- */
.timeline{list-style:none;padding:0;margin:0 auto;max-width:900px;display:grid;gap:clamp(40px,5vw,64px);counter-reset:step}
.timeline li{display:block;font:600 clamp(1.5rem,3vw,2.4rem)/1.2 var(--f-display);letter-spacing:-.022em;color:var(--ink)}
.timeline li:nth-child(1){--step:#4A35D8}
.timeline li:nth-child(2){--step:#B03FD9}
.timeline li:nth-child(3){--step:#E0457B}
.timeline li:nth-child(4){--step:#1F6FE0}
.timeline .when{display:block;margin-bottom:12px;font:600 clamp(.95rem,1.2vw,1.1rem)/1.2 var(--f-body);letter-spacing:0;color:var(--muted)}
.timeline h3{display:inline;font:inherit;letter-spacing:inherit;color:color-mix(in srgb,var(--step) 80%,var(--ink))}
.timeline h3::after{content:". "}
.timeline p{display:inline;color:var(--ink)}
.tl-more{margin-top:clamp(36px,5vw,56px);text-align:center}

.steps-list{list-style:none;padding:0;margin:0;display:grid;counter-reset:step}
.steps-list li{display:grid;grid-template-columns:64px minmax(0,1fr);gap:4px 18px;padding:26px 0;border-top:1px solid var(--line-strong);counter-increment:step}
.steps-list li:last-child{border-bottom:1px solid var(--line-strong)}
.steps-list li::before{content:counter(step,decimal-leading-zero);grid-row:span 3;font:700 1.9rem/1 var(--f-display);color:var(--accent);letter-spacing:-.03em}
.steps-list .when{font:600 .9rem/1.2 var(--f-display);color:var(--muted)}
.steps-list p{color:var(--muted)}

/* ---------- Preise ---------- */
.price-wrap{position:relative}
.price-board{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:10px 28px}
.price-board > div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 20px;align-items:baseline;padding:20px 0;border-bottom:1px dashed var(--line-strong)}
.price-board > div:last-of-type{border-bottom:0}
.price-board dt{font:600 1.15rem/1.2 var(--f-display);color:var(--ink)}
.price-board dt small{display:block;font:400 .9rem/1.4 var(--f-body);color:var(--muted);margin-top:3px}
.price-board dd{font:700 1.3rem/1 var(--f-display);color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.stamp{justify-self:start;width:112px;height:112px;margin:14px 0 0 6px;border-radius:50%;display:grid;place-items:center;text-align:center;background:var(--accent);color:var(--on-accent);font:700 .8rem/1.15 var(--f-display);transform:rotate(-9deg);box-shadow:0 14px 30px -12px var(--accent-shadow);padding:14px}
.stamp,.cols-head p.stamp{color:var(--on-accent)}
.stamp b{display:block;font-size:1.75rem;line-height:1;letter-spacing:-.03em;color:var(--on-accent)}
@media (max-width:920px){.stamp{position:absolute;right:4px;top:-10px;margin:0;width:96px;height:96px;font-size:.72rem}.stamp b{font-size:1.45rem}.cols-head{position:relative;top:0}}

.offer{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:24px 48px;align-items:center;background:var(--surface);border:2px solid var(--ink);border-radius:18px;padding:clamp(24px,3.6vw,44px);margin-bottom:22px}
.offer-text{display:grid;gap:12px}
.offer-text > p{color:var(--muted)}
.offer-text h3{font-size:clamp(1.5rem,2.6vw,2rem)}
.offer .checklist{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 20px;margin-top:6px}
.offer-side{display:grid;gap:14px;justify-items:start}
@media (max-width:860px){.offer{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.offer .checklist{grid-template-columns:minmax(0,1fr)}}
.price{font:700 2.7rem/1 var(--f-display);color:var(--ink);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.price small{font:500 .95rem/1.2 var(--f-body);color:var(--muted);letter-spacing:0;margin-left:6px}
.price .from{font:500 1rem/1 var(--f-body);color:var(--muted);margin-right:6px;letter-spacing:0}
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.plans-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.plan{position:relative;isolation:isolate;display:flex;flex-direction:column;gap:16px;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:30px}
.plan.featured{border:2px solid var(--accent);box-shadow:0 30px 70px -40px var(--accent-shadow)}
.plan .badge{position:absolute;top:-14px;left:26px;background:var(--accent);color:var(--on-accent);font-size:.8rem;font-weight:700;padding:5px 11px;border-radius:999px}
.plan h3{font-size:1.5rem}
.plan-desc{color:var(--muted)}
.plan .checklist{padding-top:18px;border-top:1px solid var(--line)}
.plan .btn{margin-top:auto}
.plan .alt-price{font-size:.92rem;color:var(--muted);margin-top:-6px}
@media (max-width:980px){.plans{grid-template-columns:minmax(0,1fr)}.plans-2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.plans-2{grid-template-columns:minmax(0,1fr)}}
.note-box{margin-top:22px;padding:18px 22px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line);color:var(--text)}
.good-to-know{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;margin-top:22px}
.good-to-know .note-box{margin-top:0}
.good-to-know h3{font-size:1.1rem;margin-bottom:10px}
@media (max-width:760px){.good-to-know{grid-template-columns:minmax(0,1fr)}}
.info-list{list-style:none;padding:0;display:grid;gap:8px;color:var(--muted)}
.info-list li{padding-left:18px;position:relative}
.info-list li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:2px;background:var(--accent)}
.sub-head{margin:56px 0 18px;font-size:1.5rem}

.checklist{list-style:none;padding:0;display:grid;gap:10px}
.checklist li{display:flex;gap:11px;align-items:flex-start}
.checklist li::before{content:"";flex:none;width:16px;height:16px;margin-top:.3em;background:var(--accent);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.6l3.4 3.2L13.5 4' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.6l3.4 3.2L13.5 4' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}

/* Tabellen */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
table{width:100%;border-collapse:collapse;min-width:560px;font-size:.98rem}
th,td{padding:15px 18px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}
thead th{font:600 1rem/1.2 var(--f-display);color:var(--ink);background:var(--bg-alt)}
tbody th{font-weight:600;color:var(--ink)}
td{color:var(--muted)}
td.us,th.us{background:var(--accent-soft)}
td.us{color:var(--ink);font-weight:500}
.yes{color:var(--ok);font-weight:700}

/* FAQ */
.faq{max-width:820px}
.faq details{border-bottom:1px solid var(--line-strong)}
.faq details:first-child{border-top:1px solid var(--line-strong)}
.faq summary{list-style:none;cursor:pointer;position:relative;padding:22px 44px 22px 0;font:600 1.18rem/1.3 var(--f-display);color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:14px;height:14px;margin-top:-7px;background:linear-gradient(var(--accent),var(--accent)) center/14px 2px no-repeat,linear-gradient(var(--accent),var(--accent)) center/2px 14px no-repeat;transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 44px 24px 0;color:var(--muted);max-width:68ch}

/* ---------- Statement / Über uns ---------- */
.statement{font:600 clamp(1.8rem,4vw,3.4rem)/1.12 var(--f-display);letter-spacing:-.03em;color:var(--ink);max-width:22ch;text-wrap:balance}
.statement em{font-style:normal;color:var(--accent-text)}
.facts-box{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:8px 24px}
.facts-box div{display:grid;grid-template-columns:140px minmax(0,1fr);gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.facts-box div:last-child{border-bottom:0}
.facts-box dt{color:var(--muted);font-size:.95rem}
.facts-box dd{color:var(--ink);font-weight:500;overflow-wrap:anywhere}
@media (max-width:480px){.facts-box div{grid-template-columns:minmax(0,1fr);gap:2px}}
.numbered{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px;counter-reset:n}
.numbered li{display:grid;gap:8px;padding:26px 0;border-top:1px solid var(--line-strong);counter-increment:n}
.numbered li h3::before{content:counter(n,decimal-leading-zero) " ";color:var(--accent-text);font-weight:600}
.numbered li p{color:var(--muted)}
@media (max-width:760px){.numbered{grid-template-columns:minmax(0,1fr)}}
.promises{list-style:none;padding:0;margin:0;display:grid;gap:0}
.promises li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:10px 40px;padding:26px 0;border-top:1px solid var(--line-strong)}
.promises li:last-child{border-bottom:1px solid var(--line-strong)}
.promises s{font:600 clamp(1.25rem,2.2vw,1.6rem)/1.2 var(--f-display);color:var(--muted);text-decoration-color:var(--accent);text-decoration-thickness:3px}
.promises p{color:var(--text)}
@media (max-width:760px){.promises li{grid-template-columns:minmax(0,1fr)}}

/* ---------- Unterseiten-Kopf (zentriert) ---------- */
.page-head{padding-block:clamp(56px,8vw,124px) clamp(48px,6vw,92px);text-align:center}
.page-head .wrap{display:grid;justify-items:center;opacity:calc(1 - var(--out,0) * .85);translate:0 calc(var(--out,0) * -40px)}
.breadcrumb{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;list-style:none;padding:0;margin:0 0 22px;font-size:.88rem;color:var(--muted)}
.breadcrumb li+li::before{content:"›";margin-right:6px;color:var(--muted)}
.breadcrumb a{color:var(--muted);text-decoration:none}
.breadcrumb a:hover{color:var(--ink)}
.page-head h1{max-width:16ch;font-size:clamp(2.6rem,6.6vw,5.4rem)}
.page-head .lead{margin:24px auto 0}
.jump{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;list-style:none;padding:0;margin-top:32px}
.jump .jump-label{font-size:.9rem;color:var(--muted);margin-right:4px}
.jump a{display:inline-block;padding:9px 16px;border-radius:999px;background:var(--surface);color:var(--ink);text-decoration:none;font-size:.92rem;transition:background-color .2s,color .2s}
.jump a:hover{background:var(--accent);color:var(--on-accent)}
.notice{display:flex;gap:12px;align-items:flex-start;padding:16px 20px;border-radius:var(--radius);background:var(--surface);color:var(--text);max-width:820px;margin-top:26px}
.notice strong{white-space:nowrap}
/* Hinweis „in Gründung“ als schmales Band unter der Kopfzeile */
.founding-note{background:var(--bg-alt);color:var(--ink);font-size:.86rem;line-height:1.5;text-align:center}
.founding-note p{margin:0;padding-block:12px;max-width:none}
.founding-note strong{color:var(--ink);font-weight:600}

/* ---------- Leistungen (Unterseite) ---------- */
.service{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:18px clamp(28px,5vw,72px);padding-block:clamp(36px,4.5vw,56px);border-top:1px solid var(--line-strong)}
.service:last-child{border-bottom:1px solid var(--line-strong)}
.service-head{display:grid;gap:12px;align-content:start}
.service-head .no{font:600 .95rem/1 var(--f-display);color:var(--accent-text)}
.service-head h2{font-size:clamp(1.7rem,3vw,2.4rem)}
.service-head .price-tag{font:600 1.1rem/1.2 var(--f-display);color:var(--ink)}
.service-body{display:grid;gap:16px;align-content:start}
.service-body > p{color:var(--muted);font-size:1.08rem}
.service-body .checklist{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 24px}
@media (max-width:860px){.service{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.service-body .checklist{grid-template-columns:minmax(0,1fr)}}

/* ---------- Referenzen (Unterseite) ---------- */
.case{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(28px,5vw,64px);align-items:start;padding-block:clamp(48px,6vw,88px);border-top:1px solid var(--line-strong)}
.case:first-child{border-top:0;padding-top:0}
.case-visual{position:relative;padding:0 13% 34px 0}
.case-visual .phone{position:absolute;z-index:3;right:0;bottom:0;width:25%}
.case-text{display:grid;gap:14px;align-content:start}
.case-text h2{font-size:clamp(2rem,3.4vw,2.8rem)}
.case-text h3{font-size:1.02rem;margin-top:6px}
.case-text p{color:var(--muted)}
@media (max-width:900px){.case{grid-template-columns:minmax(0,1fr)}}

/* ---------- Eigene Projekte: Bildschirmfotos statt Live-Fenster ---------- */
.edu-case{border-top:0;padding-top:0}
.preview-frame.shot{display:block;overflow:hidden;color:inherit;text-decoration:none;cursor:pointer}
/* Vorschau-Bilder gleiten beim Scrollen im Rahmen mit; das steuert der Browser selbst (ruckelfrei).
   Ältere Browser zeigen einfach den Anfang der Seite. Im Laptop oben steuert main.js (--scrub), erst wenn er ganz offen ist. */
.preview-frame.shot{container-type:size;view-timeline-name:--pv}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .preview-frame.shot img{animation:nd-scrub linear both;animation-timeline:--pv;animation-range:entry 40% exit 60%}
    .hero .preview-frame.shot img{animation:none}
  }
}
.hero .preview-frame.shot img{translate:0 calc(var(--scrub,0) * max(-100% + 100cqh, -150cqh))}
@keyframes nd-scrub{to{translate:0 max(-100% + 100cqh, -150cqh)}}
.preview-frame.shot img{display:block;width:100%;height:auto;max-width:none}
.preview-frame.shot::before{content:none}
.preview-frame.shot:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.shot-dunkel{display:none!important}
:root[data-theme="dark"] .shot-hell{display:none!important}
:root[data-theme="dark"] .shot-dunkel{display:block!important}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .shot-hell{display:none!important}
  :root:not([data-theme="light"]) .shot-dunkel{display:block!important}
}
.edu-tags{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.edu-tags .live{display:inline-flex;align-items:center;gap:8px;font-size:.85rem;font-weight:600;color:var(--ok)}
.edu-tags .live i{position:relative;width:8px;height:8px;border-radius:50%;background:currentColor}
@media (prefers-reduced-motion:no-preference){
  .edu-tags .live i::after{content:"";position:absolute;inset:0;border-radius:50%;background:currentColor;animation:live-ping 2.4s cubic-bezier(0,0,.2,1) infinite}
}
@keyframes live-ping{0%{transform:scale(1);opacity:.55}80%,100%{transform:scale(2.6);opacity:0}}

/* ---------- Kontakt ---------- */
.contact-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(28px,5vw,64px);align-items:start}
@media (max-width:900px){.contact-grid{grid-template-columns:minmax(0,1fr)}}
.form-card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:clamp(22px,3.4vw,40px)}
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.field{display:grid;gap:8px;align-content:start;min-width:0}
.field.full{grid-column:1/-1}
.field label{font-weight:600;font-size:.95rem;color:var(--ink)}
.field input,.field select,.field textarea{width:100%;font:400 1rem/1.4 var(--f-body);color:var(--ink);background:var(--bg);border:1px solid var(--line-strong);border-radius:10px;padding:13px 14px;transition:border-color .15s,box-shadow .15s}
.field textarea{min-height:160px;resize:vertical}
.field select{-webkit-appearance:none;appearance:none;padding-right:42px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%238B88A0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:16px 16px}
.field input,.field textarea{-webkit-appearance:none;appearance:none}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.field [aria-invalid="true"]{border-color:var(--err)}
.err{color:var(--err);font-size:.88rem}
.form-error{padding:12px 14px;border:1px solid var(--err);border-radius:10px}
.form-foot{display:grid;gap:12px}
.form-foot .btn{justify-self:start}
.consent{font-size:.88rem;color:var(--muted)}
.hp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;opacity:0;pointer-events:none}
@media (max-width:600px){.form{grid-template-columns:minmax(0,1fr)}}
.done{display:grid;gap:14px}
.done:focus{outline:none}
.done h2{font-size:clamp(1.7rem,3vw,2.2rem)}
.done-badge{font-weight:600;color:var(--ok)}
.done > p:not(.done-badge){color:var(--muted)}
.done-msg{margin:0;padding:14px;max-height:220px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;font:400 .88rem/1.6 var(--f-body);color:var(--text);background:var(--bg-alt);border:1px solid var(--line);border-radius:10px}
.linkish{justify-self:start;background:none;border:0;padding:0;color:var(--ink);font:600 .95rem/1 var(--f-body);cursor:pointer;text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:4px}
.contact-side{display:grid;gap:30px;align-content:start}
.contact-side h3{font-size:1.15rem;margin-bottom:8px}
.contact-side p{color:var(--muted)}
.mail-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.mail-row a{font:600 1.2rem/1.2 var(--f-display);overflow-wrap:anywhere;text-decoration:none;border-bottom:1.5px solid var(--accent)}
.copy-btn{font:600 .82rem/1 var(--f-body);color:var(--ink);background:var(--surface);border:1px solid var(--line-strong);border-radius:8px;padding:8px 10px;cursor:pointer}
.copy-btn:hover{border-color:var(--ink)}
.next-steps{padding-left:20px;display:grid;gap:8px;color:var(--muted)}
.next-steps li::marker{color:var(--accent-text);font-weight:600}

/* ---------- Highlights-Galerie (Leistungen auf der Startseite) ---------- */
.highlights{overflow:hidden;overflow:clip}
.highlights .head{margin-bottom:clamp(28px,4vw,44px)}
.hl{--edge:max(var(--gutter),calc((100vw - var(--wrap)) / 2));--card-w:min(780px,calc(100vw - 2 * var(--gutter) - 40px))}
.hl-track{list-style:none;margin:0;display:flex;gap:20px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--edge);padding:0 var(--edge) 4px;scrollbar-width:none}
.hl-track::-webkit-scrollbar{display:none}
.hl-card{position:relative;isolation:isolate;flex:none;display:flex;flex-direction:column;width:var(--card-w);height:clamp(360px,min(42vw,100vh - 330px),500px);border-radius:var(--tile);background:var(--surface);overflow:hidden;scroll-snap-align:start}
.hl-copy{position:relative;z-index:3;max-width:38ch;margin:clamp(24px,3.2vw,40px) auto 0;padding-inline:24px;text-align:center;font:600 clamp(1rem,1.35vw,1.25rem)/1.3 var(--f-display);letter-spacing:-.016em;color:var(--ink)}
.hl-copy b{font-weight:600;color:color-mix(in srgb,var(--c-text) 78%,var(--ink))}
.hl-price{display:block;margin-top:8px;color:var(--muted);font-size:.85em}
.hl-c1{--c1:#6A5BFF;--c2:#B48CFF;--c3:#FFB3DA;--c-text:#5B3FE0}
.hl-c2{--c1:#2F7BFF;--c2:#6BD3FF;--c3:#B8F3E2;--c-text:#1F6FE0}
.hl-c3{--c1:#FF6A3D;--c2:#FFB25B;--c3:#FFE6A0;--c-text:#D9531C}
.hl-c4{--c1:#18B37A;--c2:#6EE0A8;--c3:#D6F59A;--c-text:#11905E}
/* Die Grafik hat ihren eigenen Bereich unter dem Text und richtet sich nach dessen Höhe (cqh), nicht nur nach
   der Breite. Sonst wächst sie bei breiten, niedrigen Karten nach oben über den Text (behoben am 15.10.2026).
   Vor jeder Breite mit cqh steht die alte Breite: Safari bis 15 (macOS 10.15, iOS 15) kennt cqh nicht und
   verwirft die ganze Angabe, ohne Rückfall wäre das Fenster dort nur ein kleiner Fleck. */
.hl-art{position:relative;flex:1;min-height:0;container-type:size;margin-top:clamp(10px,1.6vw,20px)}
/* Kapseln im Hintergrund (eigene Grafik, angelehnt an weiche Verlaufs-Hintergrundbilder) */
.pills{position:absolute;inset:auto 0 -6% 0;height:84%;display:flex;justify-content:center;align-items:flex-end;gap:clamp(8px,1.4vw,18px);padding-inline:5%}
.pill{flex:0 1 92px;height:var(--h,80%);border-radius:999px;background:linear-gradient(to top,var(--c1),var(--c2) 55%,var(--c3));opacity:.92;box-shadow:inset 0 2px 0 rgba(255,255,255,.35)}
.pill:nth-child(1){--h:46%}.pill:nth-child(2){--h:70%}.pill:nth-child(3){--h:92%}.pill:nth-child(4){--h:80%}
.pill:nth-child(5){--h:100%}.pill:nth-child(6){--h:66%}.pill:nth-child(7){--h:50%}
.hl-c2 .pill:nth-child(odd){background:linear-gradient(to top,var(--c2),var(--c1) 60%,var(--c3))}
.hl-c3 .pill:nth-child(3n){background:linear-gradient(to top,var(--c3),var(--c1))}
.hl-c4 .pill:nth-child(even){background:linear-gradient(to top,var(--c1),var(--c3))}
/* gemeinsame Glas-Fläche für die Motive */
.win,.file,.cal,.ring{background:color-mix(in srgb,var(--pill) 94%,transparent);box-shadow:0 30px 60px -28px rgba(0,0,0,.45),inset 0 0 0 1px color-mix(in srgb,var(--ink) 9%,transparent)}
/* 1 Browserfenster. Innenmaße in --u (1px); erst wenn das Fenster schmaler als 254px wird, schrumpfen sie mit,
   sonst schneidet es die Kacheln unten ab. Der Ausdruck in --u wiederholt die Breite (in cqw statt %). */
.win{--u:1px;position:absolute;left:50%;bottom:12%;width:min(64%,580px);width:min(64%,580px,128cqh);aspect-ratio:16/10;translate:-50% 0;border-radius:calc(16 * var(--u));display:grid;grid-template-rows:auto 1fr auto;overflow:hidden}
.win-bar{display:flex;gap:calc(6 * var(--u));padding:calc(11 * var(--u)) calc(13 * var(--u))}
.win-bar b{width:calc(9 * var(--u));height:calc(9 * var(--u));border-radius:50%;background:color-mix(in srgb,var(--ink) 22%,transparent)}
.win-hero{display:grid;align-content:center;gap:calc(9 * var(--u));padding:0 9%}
.win-hero i{display:block;height:calc(13 * var(--u));width:72%;border-radius:calc(7 * var(--u));background:var(--ink);opacity:.86}
.win-hero i:nth-child(2){width:46%;height:calc(9 * var(--u));opacity:.4}
.win-hero i:nth-child(3){width:24%;height:calc(24 * var(--u));margin-top:calc(8 * var(--u));border-radius:999px;background:var(--c1);opacity:1}
.win-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(10 * var(--u));padding:0 9% 8%}
.win-row i{display:block;aspect-ratio:16/9;border-radius:calc(12 * var(--u));background:linear-gradient(135deg,var(--c2),var(--c3))}
.win-row i:nth-child(2){--n:1}.win-row i:nth-child(3){--n:2}
/* 2 Dateien, aufgefächert */
.files{position:absolute;left:50%;bottom:10%;width:min(72%,560px);height:66%;translate:-50% 0}
.file{position:absolute;left:50%;bottom:0;width:clamp(120px,22%,170px);width:clamp(min(120px,60cqh),22%,min(170px,60cqh));aspect-ratio:3/4;border-radius:16px;display:grid;align-content:space-between;padding:16px;font:600 clamp(.72rem,1.05vw,.92rem)/1.2 var(--f-body);color:var(--ink);transform-origin:50% 120%;transform:translateX(calc(-50% + var(--dx))) rotate(var(--r))}
.file b{font:700 clamp(1.4rem,2.6vw,2.1rem)/1 var(--f-display);color:var(--c1)}
.file:nth-child(1){--dx:-150%;--r:-14deg;--n:0}.file:nth-child(2){--dx:-50%;--r:-5deg;--n:1}
.file:nth-child(3){--dx:50%;--r:5deg;--n:2}.file:nth-child(4){--dx:150%;--r:14deg;--n:3}
/* 3 Kalender mit gebuchtem Tag. Innenmaße in --u (1px). Höhe samt Haken = 57,6 u + 0,571 × Breite. Reicht der
   Platz über dem unteren Rand (--a) nicht, werden erst die Ränder kleiner, dann der ganze Kalender im
   Verhältnis (Breite 430 u), statt dass die Ziffern ineinanderlaufen und der Haken in den Text ragt. */
.cal{--u:1px;position:absolute;left:50%;bottom:12%;width:min(52%,430px);translate:-50% 0;border-radius:calc(20 * var(--u));padding:calc(20 * var(--u));display:grid;gap:calc(14 * var(--u))}
@supports (width:1cqh){
  .cal{--a:82cqh;--w0:min(52cqw,430px);--u:min(1px,max(var(--a) / 303.2,(var(--a) - .571 * var(--w0)) / 57.6));width:min(var(--w0),(var(--a) - 57.6 * var(--u)) / .571)}
  .win{--u:min(1px,min(64cqw,580px,128cqh) / 254)}
}
.cal-head{display:flex;justify-content:space-between;align-items:center}
.cal-head i{display:block;height:calc(11 * var(--u));width:40%;border-radius:calc(6 * var(--u));background:var(--ink);opacity:.82}
.cal-head i+i{width:16%;opacity:.3}
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:calc(6 * var(--u))}
.cal-grid i{display:grid;place-items:center;aspect-ratio:1;border-radius:50%;font:600 min(clamp(.6rem,1vw,.86rem),calc(26 * var(--u)))/1 var(--f-body);font-style:normal;color:var(--ink);opacity:.72}
.cal-grid i.sel{background:var(--c1);color:#fff;opacity:1}
.cal-chip{position:absolute;inset-inline-end:calc(-18 * var(--u));top:calc(-18 * var(--u));display:grid;place-items:center;width:calc(56 * var(--u));height:calc(56 * var(--u));border-radius:50%;background:var(--c1);box-shadow:0 14px 30px -10px var(--c1)}
.cal-chip svg{width:calc(26 * var(--u));height:calc(26 * var(--u));fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
/* 4 Ring, der sich schließt */
.ring{position:absolute;left:50%;bottom:12%;width:min(40%,300px);width:min(40%,300px,80cqh);aspect-ratio:1;translate:-50% 0;border-radius:50%;display:grid;place-items:center}
.ring svg{width:76%;height:76%}
.ring-bg{fill:none;stroke:color-mix(in srgb,var(--ink) 10%,transparent);stroke-width:9}
.ring-fg{fill:none;stroke:var(--c1);stroke-width:9;stroke-linecap:round;stroke-dasharray:314.16;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:60px 60px}
.ring-tick{fill:none;stroke:var(--c1);stroke-width:9;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:80;stroke-dashoffset:0}
/* Steuerung: Punkte mit Fortschritt und Pause-Knopf */
.hl-controls{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:28px}
.hl-dots{display:flex;align-items:center;gap:12px;height:56px;padding:0 24px;border-radius:999px;background:var(--surface)}
.hl-dots button{position:relative;width:8px;height:8px;padding:0;border:0;border-radius:999px;background:color-mix(in srgb,var(--ink) 34%,transparent);overflow:hidden;cursor:pointer;transition:width .45s cubic-bezier(.2,.7,.2,1),background-color .3s}
.hl-dots button.is-on{width:48px;background:color-mix(in srgb,var(--ink) 18%,transparent)}
.hl-dots button span{position:absolute;inset:0;background:var(--ink);transform:scaleX(0);transform-origin:0 50%}
.hl-dots button.is-on span{animation:hl-fill var(--hl-time,6s) linear forwards}
:is(.hl.paused,.hl.away) .hl-dots button.is-on span{animation-play-state:paused}
.hl.paused .hl-dots button.is-on span{animation:none;transform:none}
.hl-play{display:grid;place-items:center;width:56px;height:56px;padding:0;border:0;border-radius:50%;background:var(--surface);color:var(--ink);cursor:pointer;transition:scale .2s}
.hl-play:hover{scale:1.06}
.hl-play svg{width:22px;height:22px;fill:currentColor}
.hl-play .i-play,.hl.paused .hl-play .i-pause{display:none}
.hl.paused .hl-play .i-play{display:block}
.hl-more{margin-top:26px;text-align:center}
/* Mitscrollen (main.js): Galerie bleibt stehen, Scrollen nach unten schiebt die Karten zur Seite */
.highlights.linked{padding-block:0}
.highlights.linked .hl-stick{position:sticky;top:var(--hdr);min-height:calc(100vh - var(--hdr));display:flex;flex-direction:column;justify-content:center;padding-block:24px}
.highlights.linked .hl-track{scroll-snap-type:none}
.highlights.fit .hl-card{height:var(--hl-h)}
.highlights.linked .hl-play{display:none}
.highlights.linked .hl-dots button.is-on span{animation:none;transform:scaleX(var(--f,0))}
[dir="rtl"] .hl-dots button span{transform-origin:100% 50%}
@keyframes hl-fill{to{transform:scaleX(1)}}
@media (max-width:700px){
  .hl-card{height:clamp(380px,112vw,460px)}
  .win{width:80%;width:min(80%,128cqh)}.cal{width:min(76%,430px)}.ring{width:58%;width:min(58%,80cqh)}
  .files{width:86%}.file{width:30%;width:min(30%,60cqh)}
  @supports (width:1cqh){.win{--u:min(1px,min(80cqw,128cqh) / 254)}.cal{--w0:min(76cqw,430px);width:min(var(--w0),(var(--a) - 57.6 * var(--u)) / .571)}}
}

/* ---------- „Genauer ansehen“: Referenzen auf der Startseite ---------- */
.viewer{display:grid;grid-template-columns:minmax(240px,330px) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center;padding:clamp(22px,4vw,60px);border-radius:var(--tile);background:var(--surface)}
.vw-nav{list-style:none;margin:0;padding:0;display:grid;gap:12px;align-content:center}
.vw-item{border-radius:26px;background:var(--pill);box-shadow:0 1px 2px rgba(0,0,0,.04)}
.vw-btn{display:flex;align-items:center;gap:12px;width:100%;padding:12px 20px 12px 12px;border:0;border-radius:26px;background:none;color:var(--ink);font:600 1.0625rem/1.2 var(--f-body);letter-spacing:-.01em;text-align:start;cursor:pointer}
.vw-plus{position:relative;flex:none;width:30px;height:30px;border-radius:50%;border:1.5px solid currentColor;transition:rotate .45s cubic-bezier(.3,1.3,.5,1),background-color .3s,color .3s}
.vw-plus::before,.vw-plus::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.6px;margin:-.8px 0 0 -6px;border-radius:1px;background:currentColor}
.vw-plus::after{rotate:90deg}
.vw-item.is-on .vw-plus{rotate:45deg;background:var(--ink);border-color:var(--ink);color:var(--pill)}
.vw-info{display:grid;grid-template-rows:1fr}
.vw-info>div{overflow:hidden;display:grid;gap:10px;padding:0 20px 20px 54px}
.vw-info .project-meta{font-size:.85rem}
.vw-info p:not(.project-meta){color:var(--muted)}
.viewer.ready .vw-info{grid-template-rows:0fr;transition:grid-template-rows .5s cubic-bezier(.2,.7,.2,1)}
.viewer.ready .vw-info>div{padding-bottom:0;transition:padding .5s cubic-bezier(.2,.7,.2,1)}
.viewer.ready .vw-item.is-on .vw-info{grid-template-rows:1fr}
.viewer.ready .vw-item.is-on .vw-info>div{padding-bottom:20px}
.vw-stage{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
.vw-panel{min-width:0}
.viewer.ready .vw-panel{grid-area:1/1;opacity:0;scale:.95;visibility:hidden;transition:opacity .5s ease,scale .8s cubic-bezier(.2,.7,.2,1),visibility 0s linear .5s}
.viewer.ready .vw-panel.is-on{opacity:1;scale:1;visibility:visible;transition:opacity .6s ease .1s,scale .9s cubic-bezier(.2,.7,.2,1),visibility 0s}
[dir="rtl"] .vw-info>div{padding:0 54px 20px 20px}
@media (max-width:900px){
  .viewer{grid-template-columns:minmax(0,1fr)}
  .vw-stage{order:-1}
}

/* ---------- Kacheln: runde Flächen ohne Rahmen ---------- */
.plan,.form-card,.offer,.price-board{border:0;border-radius:var(--tile)}
.plan.featured{border:2px solid var(--accent)}
.facts-box,.note-box,.table-wrap,.done-msg{border:0;border-radius:var(--radius)}
/* Projekt-Kachel: rundum Abstand (auch als erstes Projekt auf „Eigene Projekte“), Fenster mittig neben dem Text */
.case.edu-case{padding:clamp(22px,4vw,56px);border-radius:var(--tile);background:var(--surface);align-items:center}
.case.edu-case + .case.edu-case{margin-top:clamp(32px,5vw,64px)}
.preview{border-radius:16px}
.copy-btn{border:0;background:var(--surface);border-radius:999px;padding:8px 14px}
.field input,.field select,.field textarea{border-radius:12px}
.service,.service:last-child,.rows,.rows > li,.numbered li,.promises li,.promises li:last-child,.faq details,.faq details:first-child,.steps-list li,.steps-list li:last-child,.case{border-color:var(--line)}

/* ---------- Abschluss-Kachel (zentriert) ---------- */
.cta{display:grid;justify-items:center;gap:30px;text-align:center;background:var(--surface);border-radius:var(--tile);padding:clamp(52px,8vw,112px) clamp(24px,5vw,72px);color:var(--text)}
.cta h2{font-size:clamp(2.4rem,5.4vw,4.4rem);max-width:14ch;margin-inline:auto;color:var(--ink)}
.cta p{margin:18px auto 0;max-width:46ch;color:var(--muted);font-size:clamp(1.05rem,1.4vw,1.2rem)}
.cta-actions{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px 26px}
.cta-actions a:not(.btn){color:var(--accent-text);text-decoration:none}
.cta-actions a:not(.btn):hover{text-decoration:underline}

/* ---------- Rechtstexte ---------- */
.prose{max-width:820px}
.prose h2{font-size:clamp(1.4rem,2.4vw,1.8rem);margin:48px 0 14px;padding-top:26px;border-top:1px solid var(--line);scroll-margin-top:calc(var(--hdr) + 16px)}
.prose h2:first-child{margin-top:0;padding-top:0;border-top:0}
.prose h3{font-size:1.12rem;margin:26px 0 10px}
.prose p,.prose li{color:var(--text);line-height:1.7;overflow-wrap:anywhere}
.prose p{margin:0 0 14px}
.prose ul{padding-left:20px;margin:0 0 18px;display:grid;gap:8px}
.prose ul.index{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.prose ul.index a{display:inline-block;padding:6px 12px;border:1px solid var(--line-strong);border-radius:999px;text-decoration:none;color:var(--text);font-size:.9rem;line-height:1.3}
.prose ul.m-elements{list-style:none;padding:16px 18px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.prose ul.glossary{list-style:none;padding:0;gap:14px}
.prose .seal{margin-top:40px;font-size:.88rem}
.address{font-style:normal;line-height:1.7}

/* ---------- Footer (hell, klein, wie bei Apple) ---------- */
.site-footer{background:var(--bg-alt);color:var(--muted);padding-block:56px 26px;font-size:.84rem;line-height:1.5}
.footer-top{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:36px}
.site-footer .logo{color:var(--ink)}
.site-footer .logo-mark .star{fill:var(--accent)}
.footer-brand{display:grid;gap:14px;align-content:start}
.footer-brand p{max-width:32ch}
.site-footer h4{font:600 .86rem/1.2 var(--f-body);color:var(--ink);margin-bottom:12px}
.site-footer ul{list-style:none;padding:0;display:grid;gap:8px}
.site-footer a{color:var(--muted);text-decoration:none}
.site-footer a:hover{color:var(--ink);text-decoration:underline}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px 24px;margin-top:44px;padding-top:18px;border-top:1px solid var(--line);font-size:.8rem}
@media (max-width:860px){.footer-top{grid-template-columns:repeat(2,minmax(0,1fr))}.footer-brand{grid-column:1/-1}}
@media (max-width:460px){.footer-top{grid-template-columns:minmax(0,1fr)}}
.theme-switch{display:inline-flex;align-items:center;gap:2px;padding:3px;border:1px solid var(--line);border-radius:999px}
.theme-switch-label{padding:0 8px 0 10px;font-size:.82rem}
.theme-switch button{font:500 .82rem/1 var(--f-body);color:var(--muted);background:transparent;border:0;border-radius:999px;padding:7px 12px;cursor:pointer}
.theme-switch button:hover{color:var(--ink)}
.theme-switch button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}
@media (max-width:380px){.theme-switch-label{display:none}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.001ms!important;animation:none!important}
}

/* ---------- Chinesisch und Arabisch ---------- */
html[lang^="zh"]{--f-display:Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;--f-body:Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif}
html[lang="ar"]{--f-display:Helvetica,"SF Arabic","Geeza Pro","Segoe UI","Noto Sans Arabic",Tahoma,sans-serif;--f-body:Helvetica,"SF Arabic","Geeza Pro","Segoe UI","Noto Sans Arabic",Tahoma,sans-serif}
html[lang^="zh"] *,html[lang="ar"] *{letter-spacing:normal!important}
html[lang^="zh"] h1{line-height:1.18}
html[lang^="zh"] h2,html[lang^="zh"] .statement{line-height:1.3}
html[lang="ar"] h1{line-height:1.3}
html[lang="ar"] h2,html[lang="ar"] h3,html[lang="ar"] .statement{line-height:1.4}
html[lang="ar"] body{line-height:1.75}

/* Arabisch: Leserichtung rechts nach links */
[dir="rtl"] .main-nav{margin-left:0;margin-right:auto}
@media (max-width:1100px){[dir="rtl"] .header-actions{margin-left:0;margin-right:auto}}
[dir="rtl"] .arr,[dir="rtl"] .row-arrow{display:inline-block;transform:scaleX(-1)}
[dir="rtl"] .btn:hover .arr{transform:scaleX(-1) translateX(3px)}
[dir="rtl"] a.row:hover .row-arrow{transform:scaleX(-1) translateX(4px)}
[dir="rtl"] .link-arrow::after{content:"‹";margin-left:0;margin-right:.3em}
[dir="rtl"] .link-arrow:hover::after{transform:translateX(-3px)}
[dir="rtl"] .link-arrow.ext::after{content:"↖"}
[dir="rtl"] .link-arrow.ext:hover::after{transform:translate(-2px,-2px)}
[dir="rtl"] .stage .phone{right:auto;left:0}
[dir="rtl"] .preview,[dir="rtl"] .phone{direction:ltr}
[dir="rtl"] .project-meta span + span::before{margin-right:0;margin-left:14px}
[dir="rtl"] .field select{padding-right:14px;padding-left:42px;background-position:left 14px center}
[dir="rtl"] th,[dir="rtl"] td{text-align:right}
[dir="rtl"] .lm-panel{right:auto;left:0;transform-origin:top left}
[dir="rtl"] .theme-toggle{direction:ltr}


/* =========================================================
   NEUES DESIGN (Oktober 2026): Laptop, Leuchten, Kacheln,
   schwarze Bühne, gestapelte Karten. Nur eigene Grafiken.
   ========================================================= */
:root{
  --alu-a:#E3E4E8;--alu-b:#C4C6CD;--alu-c:#A9ACB4;--bezel:#0B0B0D;
  --glow-o:.5;
  --cine:#000000;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--alu-a:#4A4B50;--alu-b:#35363A;--alu-c:#2A2B2E;--glow-o:.75;--cine:#161617}}
:root[data-theme="dark"]{--alu-a:#4A4B50;--alu-b:#35363A;--alu-c:#2A2B2E;--glow-o:.75;--cine:#161617}

/* ---------- Leuchten hinter den großen Überschriften (weiche Farbflächen, langsam bewegt) ---------- */
.glow{position:relative;isolation:isolate}
.page-head.glow{overflow:hidden;overflow:clip}
.glow::before{content:"";position:absolute;z-index:-1;left:50%;top:-140px;width:min(1180px,150%);height:720px;translate:-50% 0;pointer-events:none;opacity:var(--glow-o);
  background:radial-gradient(38% 46% at 32% 46%,color-mix(in srgb,var(--sweep-a) 34%,transparent),transparent 72%),
             radial-gradient(34% 42% at 66% 38%,color-mix(in srgb,var(--sweep-b) 28%,transparent),transparent 72%),
             radial-gradient(30% 36% at 52% 70%,color-mix(in srgb,var(--sweep-c) 24%,transparent),transparent 72%);}
.page-head.glow::before{top:-260px;height:640px}
@media (prefers-reduced-motion:no-preference) and (hover:hover){.glow::before{animation:nd-aurora 16s ease-in-out infinite alternate}}
@keyframes nd-aurora{from{transform:rotate(-4deg) scale(1)}to{transform:rotate(6deg) scale(1.12)}}

/* ---------- Laptop in der Startseite (selbst gezeichnet, kein bestimmtes Gerät) ----------
   --o = wie weit der Deckel offen ist (0 zu, 1 offen), setzt main.js beim Scrollen. */
.laptop{--o:1;position:relative;width:100%;perspective:560cqw;perspective-origin:50% 99%}
/* Blick auf Höhe des Scharniers: zugeklappt ist der Deckel nur eine Kante, aufgeklappt steht er gerade */
.lid{position:relative;z-index:2;transform-origin:50% 100%;transform:rotateX(calc((1 - var(--o)) * -90deg))}
.lid-face{position:relative;padding:1.3% 1.3% 1.7%;border-radius:2.1cqw 2.1cqw .45cqw .45cqw;background:#0A0A0B;
  box-shadow:0 0 0 .22cqw var(--alu-b),0 0 0 .3cqw color-mix(in srgb,var(--alu-c) 80%,#000 20%),inset 0 0 0 .12cqw #26262A;
  opacity:clamp(0,(var(--o) - .03) * 30,1)}   /* zugeklappt nur die Kante zeigen, kein Bildschirm-Streifen */
/* Kamera-Aussparung oben in der Mitte */
.notch{position:absolute;z-index:3;top:0;left:50%;width:9%;height:2.3cqw;translate:-50% 0;border-radius:0 0 .9cqw .9cqw;background:#0A0A0B;display:grid;place-items:center}
.notch i{width:.55cqw;height:.55cqw;border-radius:50%;background:#1C1C22;box-shadow:inset 0 0 0 .12cqw #2C2C33}
.screen{position:relative;border-radius:.35cqw;overflow:hidden;background:#000}
.screen .preview{border:0;border-radius:0;box-shadow:none}
/* Zugeklappt: schmale Deckelkante über dem Unterteil */
.lid-edge{position:absolute;z-index:3;left:-1.6%;right:-1.6%;bottom:-.3cqw;height:1.05cqw;border-radius:1.5cqw 1.5cqw 0 0 / .9cqw .9cqw 0 0;pointer-events:none;
  background:linear-gradient(180deg,color-mix(in srgb,var(--alu-a) 70%,#fff 30%),var(--alu-a) 30%,var(--alu-b));box-shadow:0 .1cqw 0 rgba(0,0,0,.35);opacity:clamp(0,1 - (var(--o) - .03) * 12,1)}
/* Unterteil: gerade, flach, etwas breiter als der Deckel, vorne mit Griffmulde. Beginnt erst unter dem Rahmen des
   Deckels (.3cqw = äußerster Ring der lid-face), damit sich die Linien von Deckel und Unterteil nicht überlappen. */
.base{position:absolute;z-index:1;top:calc(100% + .3cqw);left:-1.6%;right:-1.6%;height:1.85cqw;border-radius:0 0 1.5cqw 1.5cqw / 0 0 1.3cqw 1.3cqw;
  background:linear-gradient(180deg,color-mix(in srgb,var(--alu-a) 70%,#fff 30%) 0 10%,var(--alu-a) 14%,var(--alu-b) 60%,var(--alu-c))}
.base::before{content:"";position:absolute;left:1.6%;right:1.6%;top:0;height:22%;background:linear-gradient(180deg,rgba(0,0,0,.28),transparent);pointer-events:none}
.base i{position:absolute;left:50%;top:0;width:12%;height:38%;translate:-50% 0;border-radius:0 0 1.2cqw 1.2cqw;background:linear-gradient(180deg,var(--alu-c),var(--alu-b))}
.laptop::after{content:"";position:absolute;z-index:0;left:0;right:0;top:calc(100% + 1.2cqw);height:3.4cqw;background:radial-gradient(closest-side,rgba(0,0,0,.32),transparent);filter:blur(4px);pointer-events:none}
.stage{container-type:inline-size;padding-bottom:5.5%}

/* ---------- Großer Satz (leuchtet beim Scrollen Wort für Wort auf) ---------- */
.manifest{padding-block:clamp(110px,15vw,230px)}
.manifest .statement{max-width:23ch;margin-inline:auto;text-align:center;font-size:clamp(2rem,4.8vw,4.4rem);line-height:1.08;letter-spacing:-.035em}
.manifest .statement em{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ---------- Schwarze Bühne (eigene Projekte) und dunkle Abschluss-Kachel ---------- */
.section-dark,.cta{
  --bg:#000000;--bg-alt:#000000;--surface:#161617;--surface-alt:#161617;--pill:#2C2C2E;--ink:#F5F5F7;--ink-soft:#D2D2D7;--text:#F5F5F7;--muted:#A1A1A6;
  --line:#2C2C2E;--line-strong:#424245;--accent:#8C7BFF;--accent-text:#A99CFF;--accent-soft:rgba(140,123,255,.18);--on-accent:#0B0B0F;--ok:#4CC98A;
  --chrome:#2C2C2E;--chrome-dot:#48484A;--device:#3A3A3C;--sweep-a:#8C7BFF;--sweep-b:#D17BFF;--sweep-c:#FF8A9A;--ring:#000000;
  --shadow:0 2px 6px rgba(0,0,0,.5),0 40px 80px -30px rgba(0,0,0,.95);--accent-shadow:rgba(120,100,255,.5);
  color:var(--text);color-scheme:dark}
.section-dark{position:relative;isolation:isolate;background:var(--cine);overflow:hidden;overflow:clip}
.section-dark::before{content:"";position:absolute;z-index:-1;left:50%;top:0;width:min(1400px,160%);height:900px;translate:-50% -30%;pointer-events:none;
  background:radial-gradient(40% 40% at 50% 50%,rgba(140,123,255,.22),transparent 70%);}
.section-dark .case.edu-case{background:#161617}
.nt-tile{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,4vw,64px);align-items:center;margin-top:clamp(20px,2.6vw,32px);padding:clamp(22px,4vw,56px);border-radius:var(--tile);background:var(--surface)}
.nt-text{display:grid;gap:14px;align-content:start}
.nt-text h3{font-size:clamp(2rem,3.4vw,2.8rem);letter-spacing:-.03em}
.nt-text p{color:var(--muted)}
@media (max-width:900px){.nt-tile{grid-template-columns:minmax(0,1fr)}.nt-visual{order:-1}}
/* NovaCheck: wie die Nova-Tools-Kachel, aber Bild links, damit sich die Projekte abwechseln */
@media (min-width:901px){.ll-tile{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}.ll-tile .nt-visual{order:-1}}
/* Abschluss-Kachel: dunkel mit Leuchten, ein Lichtstreifen läuft am Rand entlang (nur Drehung, läuft auf der Grafikkarte) */
.cta{position:relative;isolation:isolate;overflow:hidden;background:var(--cine)}
.cta::before{content:"";position:absolute;z-index:-1;inset:1.5px;border-radius:calc(var(--tile) - 1.5px);pointer-events:none;
  background:radial-gradient(36% 46% at 36% 40%,rgba(140,123,255,.4),transparent 70%),radial-gradient(32% 42% at 64% 58%,rgba(209,123,255,.28),transparent 70%),radial-gradient(28% 36% at 50% 85%,rgba(255,138,154,.16),transparent 70%),var(--cine)}
.cta::after{content:"";position:absolute;z-index:-2;left:50%;top:50%;width:150%;aspect-ratio:1;translate:-50% -50%;pointer-events:none;
  background:conic-gradient(from 0deg,transparent 0 60%,var(--sweep-a) 74%,var(--sweep-b) 84%,var(--sweep-c) 92%,transparent 100%)}
@media (prefers-reduced-motion:no-preference){.cta::after{animation:nd-spin 7s linear infinite}}
@keyframes nd-spin{to{rotate:360deg}}
.cta h2{background:linear-gradient(180deg,#FFFFFF 30%,#C9C2FF);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ---------- Kacheln „Was jede Website kann“ ---------- */
.bento{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.bt{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;min-height:clamp(320px,30vw,420px);padding:clamp(24px,2.6vw,38px);border-radius:var(--tile);background:var(--surface)}
.bt-1{grid-column:span 2;grid-row:span 2}
.bt-copy{position:relative;z-index:2;display:grid;gap:10px}
.bt-copy h3{font-size:clamp(1.45rem,2.1vw,1.9rem);letter-spacing:-.028em;line-height:1.08}
.bt-1 .bt-copy h3{font-size:clamp(2rem,3.8vw,3.4rem);letter-spacing:-.04em}
.bt-copy p{color:var(--muted);max-width:36ch}
.bt-art{position:relative;flex:1;min-height:170px;margin-top:22px;container-type:inline-size;display:flex;flex-direction:column;justify-content:flex-end}
/* Lichtkegel unter dem Mauszeiger (main.js setzt --mx/--my) */
.bt::after,.case.edu-case::after,.nt-tile::after,.hl-card::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .45s ease;
  background:radial-gradient(520px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--accent) 12%,transparent),transparent 46%)}
.case.edu-case,.nt-tile{position:relative;isolation:isolate}
@media (hover:hover){.bt:hover::after,.case.edu-case:hover::after,.nt-tile:hover::after,.hl-card:hover::after{opacity:1}}
@media (max-width:980px){.bento{grid-template-columns:repeat(2,minmax(0,1fr))}.bt-1{grid-column:1/-1;grid-row:auto;min-height:clamp(420px,80vw,560px)}}
@media (max-width:620px){.bento{grid-template-columns:minmax(0,1fr)}.bt{min-height:340px}}

/* 1 Geräte mit derselben kleinen Seite */
.devs{position:relative;width:100%;aspect-ratio:100/60}
.dev{position:absolute;bottom:0;min-height:0;overflow:hidden;background:#FFFFFF;border:max(4px,1.1cqw) solid #1D1D1F;box-shadow:0 30px 60px -30px rgba(0,0,0,.45)}
.dev-desk{left:0;bottom:4cqw;width:76cqw;aspect-ratio:16/10.4;border-radius:2cqw 2cqw 0 0;border-bottom-width:max(10px,3cqw)}
.dev-tab{right:9cqw;width:27cqw;aspect-ratio:3/4.1;border-radius:2.4cqw;border-width:max(4px,1cqw)}
.dev-ph{right:0;width:13cqw;aspect-ratio:9/19;border-radius:2.6cqw;border-width:max(3px,.8cqw)}
.mini{--u:1cqw;display:grid;gap:calc(var(--u) * 1.2);padding:calc(var(--u) * 1.4)}
.mini{--u:1.3cqw}.dev-tab .mini{--u:.75cqw}.dev-ph .mini{--u:.5cqw}
.mini span{display:flex;gap:calc(var(--u) * 1)}
.m-nav{align-items:center;justify-content:space-between}
.m-nav b{width:22%;height:calc(var(--u) * 1.4);border-radius:99px;background:#1D1D1F}
.m-nav i{width:10%;height:calc(var(--u) * .9);border-radius:99px;background:#C7C7CC}
.dev-ph .m-nav i:not(:last-child){display:none}
.m-hero{flex-direction:column;align-items:flex-start;padding:calc(var(--u) * 2.4) calc(var(--u) * 2);border-radius:calc(var(--u) * 1.4);background:linear-gradient(120deg,#6A5BFF,#B48CFF 55%,#FFB3DA)}
.m-hero i{width:70%;height:calc(var(--u) * 1.8);border-radius:99px;background:rgba(255,255,255,.95)}
.m-hero i+i{width:46%;height:calc(var(--u) * 1);opacity:.75}
.m-hero u{width:24%;height:calc(var(--u) * 2.2);margin-top:calc(var(--u) * .8);border-radius:99px;background:#1D1D1F}
.m-cards i{flex:1;aspect-ratio:4/3;border-radius:calc(var(--u) * 1.2);background:#F2F1F8}
.m-cards i:nth-child(2){background:#FFF0E2}.m-cards i:nth-child(3){background:#E5F7EE}
.dev-ph .m-cards{flex-direction:column}
.dev-ph .m-cards i{aspect-ratio:16/8}
.dev-tab .m-cards i:nth-child(3){display:none}
.m-band{height:calc(var(--u) * 7);border-radius:calc(var(--u) * 1.2);background:#F5F5F7}
@media (prefers-reduced-motion:no-preference){.mini{animation:nd-mini 10s cubic-bezier(.45,0,.25,1) infinite}}
@keyframes nd-mini{0%,12%{translate:0 0}45%,62%{translate:0 -38%}95%,100%{translate:0 0}}

/* 2 Hell und dunkel: die dunkle Fassung wischt hin und her */
.dw{position:relative;width:min(100%,320px);margin-inline:auto;aspect-ratio:4/3.2;border-radius:16px 16px 0 0;overflow:hidden;box-shadow:0 30px 60px -28px rgba(0,0,0,.45),0 0 0 1px color-mix(in srgb,var(--ink) 10%,transparent)}
.dw-pane{position:absolute;inset:0;--u:2.6cqw;padding:7%;display:grid;align-content:start;gap:10px}
.dw-pane span{display:flex;gap:8px}
.dw-l{background:#FFFFFF}
/* Die dunkle Fläche gleitet per transform statt clip-path (das zeichnet der Prozessor bei jedem Bild neu);
   ihr Inhalt läuft gegenläufig mit und steht dadurch still. Inhalt = 86 % der Breite (7 % Rand je Seite),
   daher Rückversatz = Prozent / 0,86: 50 % -> 58.1395 %, 78 % -> 90.6977 %, 22 % -> 25.5814 %. */
.dw-d{background:#1D1D1F;overflow:hidden;transform:translateX(50%)}
.dw-d>*{transform:translateX(-58.1395%)}
.dw .m-nav b{width:28%;height:9px}.dw .m-nav i{width:14%;height:6px}
.dw-d .m-nav b{background:#F5F5F7}.dw-d .m-nav i{background:#48484A}
.dw .m-hero{padding:14% 9%;border-radius:12px}
.dw .m-hero i{height:10px}.dw .m-hero i+i{height:6px}.dw .m-hero u{height:14px}
.dw-d .m-hero{background:linear-gradient(120deg,#3B2FB0,#7A4FD6 55%,#B4507E)}
.dw-d .m-hero u{background:#F5F5F7}
.dw .m-cards i{aspect-ratio:5/3;border-radius:10px}
.dw-d .m-cards i{background:#2C2C2E}
/* Der Regler ist so breit wie die Fläche, Linie und Griff sitzen an seiner linken Kante: So bewegt ihn
   transform (Grafikkarte) statt left (neues Layout bei jedem Bild); translateX(78%) = 78 % der Fläche. */
.dw-knob{position:absolute;inset:0;pointer-events:none;transform:translateX(50%)}
.dw-knob::before{content:"";position:absolute;top:0;bottom:0;left:-1px;width:2px;background:#FFFFFF;box-shadow:0 0 0 1px rgba(0,0,0,.18)}
.dw-knob::after{content:"";position:absolute;top:50%;left:0;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:#FFFFFF;box-shadow:0 4px 14px rgba(0,0,0,.3);
  -webkit-mask:none;background-image:linear-gradient(90deg,#FFFFFF 50%,#1D1D1F 50%);border:3px solid #FFFFFF}
@media (prefers-reduced-motion:no-preference){
  .dw-d{animation:nd-cut 7s cubic-bezier(.65,0,.35,1) infinite}
  .dw-d>*{animation:nd-cut-in 7s cubic-bezier(.65,0,.35,1) infinite}
  .dw-knob{animation:nd-knob 7s cubic-bezier(.65,0,.35,1) infinite}
}
@keyframes nd-cut{0%,8%{transform:translateX(78%)}42%,58%{transform:translateX(22%)}92%,100%{transform:translateX(78%)}}
@keyframes nd-cut-in{0%,8%{transform:translateX(-90.6977%)}42%,58%{transform:translateX(-25.5814%)}92%,100%{transform:translateX(-90.6977%)}}
@keyframes nd-knob{0%,8%{transform:translateX(78%)}42%,58%{transform:translateX(22%)}92%,100%{transform:translateX(78%)}}

/* 3 Grüße in sieben Sprachen */
.greet{position:relative;flex:1;min-height:150px;display:grid;place-items:center}
.greet span{grid-area:1/1;font:700 clamp(2.4rem,15cqw,4.6rem)/1.15 var(--f-display);letter-spacing:-.035em;white-space:nowrap;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;padding:0 .05em .08em}
.greet span:not(:first-child){opacity:0}
@media (prefers-reduced-motion:no-preference){
  .greet span{opacity:0;animation:nd-greet 14s cubic-bezier(.2,.7,.2,1) infinite;animation-delay:calc(var(--i) * 2s)}
}
@keyframes nd-greet{0%{opacity:0;translate:0 .35em}3%,12%{opacity:1;translate:0 0}15%,100%{opacity:0;translate:0 -.35em}}

/* 4 Suchergebnisse: das eigene rutscht nach oben */
.serp{position:relative;display:grid;gap:14px}
.serp-bar{display:flex;align-items:center;gap:10px;height:42px;padding:0 16px;border-radius:999px;background:var(--bg-alt);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 8%,transparent)}
.serp-bar svg{flex:none;width:18px;height:18px;fill:none;stroke:var(--muted);stroke-width:2.2;stroke-linecap:round}
.serp-bar i{height:8px;width:48%;border-radius:4px;background:color-mix(in srgb,var(--ink) 22%,transparent)}
.serp-list{list-style:none;margin:0;padding:0;position:relative;height:166px}
.serp-list li{position:absolute;left:0;right:0;top:0;translate:0 calc(var(--p) * 56px);height:48px;padding:9px 14px;display:grid;align-content:center;gap:5px;border-radius:14px;background:var(--bg-alt);transition:translate 1s cubic-bezier(.3,1.25,.5,1) .35s,background-color .6s ease .35s,box-shadow .6s ease .35s}
.serp-list li i{display:block;height:5px;width:26%;border-radius:3px;background:color-mix(in srgb,var(--ink) 20%,transparent)}
.serp-list li i:nth-child(2){height:8px;width:62%;background:color-mix(in srgb,var(--accent) 55%,var(--ink) 10%)}
.serp-list li i:nth-child(3){width:80%;opacity:.7}
.s-you{--p:0;background:var(--accent-soft)!important;box-shadow:0 12px 30px -16px var(--accent-shadow)}
.s-a{--p:1}.s-b{--p:2}
.bento.armed .bt-4:not(.on) .s-a{--p:0}
.bento.armed .bt-4:not(.on) .s-b{--p:1}
.bento.armed .bt-4:not(.on) .s-you{--p:2;background:var(--bg-alt)!important;box-shadow:none}

/* 5 Tacho */
.gauge{position:relative;display:grid;place-items:end center}
.gauge svg{width:min(86%,260px);overflow:visible}
.g-bg,.g-fg{fill:none;stroke-width:14;stroke-linecap:round}
.g-bg{stroke:color-mix(in srgb,var(--ink) 9%,transparent)}
.g-fg{stroke:#2FBF71;stroke-dasharray:100;stroke-dashoffset:12;transition:stroke-dashoffset 1.6s cubic-bezier(.3,1,.4,1) .3s}
.g-needle{transform-box:view-box;transform-origin:100px 104px;rotate:64deg;transition:rotate 1.8s cubic-bezier(.3,1.35,.45,1) .3s}
.g-needle path{stroke:var(--ink);stroke-width:5;stroke-linecap:round}
.g-needle circle{fill:var(--ink)}
.bento.armed .bt-5:not(.on) .g-fg{stroke-dashoffset:100}
.bento.armed .bt-5:not(.on) .g-needle{rotate:-90deg}

/* 6 Schild mit Haken */
.shield{position:relative;display:grid;place-items:end center}
.shield svg{width:min(52%,150px);overflow:visible}
.sh-fill{fill:color-mix(in srgb,var(--accent) 12%,transparent)}
.sh-line{fill:none;stroke:var(--accent);stroke-width:5;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:0;transition:stroke-dashoffset 1.5s cubic-bezier(.45,0,.2,1) .2s}
.sh-tick{fill:none;stroke:var(--accent);stroke-width:9;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:0;transition:stroke-dashoffset .7s cubic-bezier(.3,1,.4,1) 1.4s}
.bento.armed .bt-6:not(.on) .sh-line,.bento.armed .bt-6:not(.on) .sh-tick{stroke-dashoffset:100}

/* ---------- Leistungen: Karten, die sich beim Scrollen stapeln ---------- */
.service{position:relative;border:0;border-radius:var(--tile);background:var(--surface);padding:clamp(26px,4vw,56px);margin-bottom:clamp(14px,1.6vw,22px);transform-origin:50% 0}
.service:last-child{border:0;margin-bottom:0}
.service-head .no{display:block;font:700 clamp(2.4rem,4vw,3.4rem)/1 var(--f-display);letter-spacing:-.04em;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;padding-bottom:.06em}
@media (min-width:901px) and (min-height:700px){
  .stack>.service{position:sticky;top:calc(var(--hdr) + 22px + var(--n,0) * 16px);box-shadow:0 -18px 40px -30px rgba(0,0,0,.35)}
  /* Abdunkeln über eine schwarze Ebene mit Deckkraft statt filter:brightness (gleiches Ergebnis bei deckender
     Karte): Die Deckkraft ändert die Grafikkarte, der Filter ließ alle Karten bei jedem Scroll-Bild neu zeichnen */
  .stack>.service{scale:calc(1 - var(--cv,0) * .04)}
  .stack>.service::after{content:"";position:absolute;inset:0;border-radius:inherit;background:#000;opacity:calc(var(--cv,0) * .06);pointer-events:none;will-change:opacity}
}

/* ---------- Über uns: Arbeitsweise als Kacheln mit großer Nummer ---------- */
.numbered{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.numbered li{border:0;border-radius:var(--tile);background:var(--surface);padding:clamp(24px,2.8vw,38px);gap:12px;align-content:start}
.numbered li::before{content:counter(n,decimal-leading-zero);font:700 clamp(2.4rem,3.6vw,3.2rem)/1 var(--f-display);letter-spacing:-.04em;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;padding-bottom:.06em}
.numbered li h3::before{content:none}
@media (max-width:900px){.numbered{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.numbered{grid-template-columns:minmax(0,1fr)}}

/* Knöpfe: leichtes Leuchten */
.btn:not(.btn-outline):hover{box-shadow:0 10px 28px -10px var(--accent-shadow)}

[dir="rtl"] .stage{padding-left:7%;padding-right:7%}
[dir="rtl"] .stage .phone{translate:calc((1 - var(--ph,1)) * -40%) 0}

/* ---------- Fortschrittslinie unter der Kopfleiste (vom Browser gesteuert) ---------- */
.site-header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--grad);transform:scaleX(0);transform-origin:0 50%;pointer-events:none}
@supports (animation-timeline:scroll()){@media (prefers-reduced-motion:no-preference){.site-header::after{animation:nd-progress linear both;animation-timeline:scroll(root)}}}
@supports not (animation-timeline:scroll()){.site-header::after{display:none}}
@media (prefers-reduced-motion:reduce){.site-header::after{display:none}}
@keyframes nd-progress{to{transform:scaleX(1)}}
[dir="rtl"] .site-header::after{transform-origin:100% 50%}
@media (max-width:700px){.site-header{-webkit-backdrop-filter:saturate(180%) blur(12px);backdrop-filter:saturate(180%) blur(12px)}}

/* ---------- Fließende Übergänge: farbige Abschnitte laufen oben und unten weich in den
   Seitenhintergrund aus (Kurve mit fünf Stufen statt Kante; nur Hintergrund, kostet beim Scrollen nichts) ---------- */
:root{--page:var(--bg)}
.section-alt,.site-footer,.section-dark::after{--fade:clamp(64px,9vw,140px);--fa:var(--page);--fb:var(--bg-alt);
  background:linear-gradient(var(--fa),color-mix(in srgb,var(--fb) 16%,var(--fa)) calc(var(--fade) * .25),color-mix(in srgb,var(--fb) 50%,var(--fa)) calc(var(--fade) * .5),color-mix(in srgb,var(--fb) 84%,var(--fa)) calc(var(--fade) * .75),var(--fb) var(--fade),
    var(--fb) calc(100% - var(--fade)),color-mix(in srgb,var(--fb) 84%,var(--fa)) calc(100% - var(--fade) * .75),color-mix(in srgb,var(--fb) 50%,var(--fa)) calc(100% - var(--fade) * .5),color-mix(in srgb,var(--fb) 16%,var(--fa)) calc(100% - var(--fade) * .25),var(--fa))}
.site-footer{background-size:100% calc(100% + var(--fade))}   /* nur oben auslaufen */
/* Schwarze Bühne: immer schwarz, im hellen Modus blendet sie über den Innenabstand weich aus Weiß ein */
.section-dark{background:transparent}
.section-dark::after{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;--fb:#000;--fade:clamp(84px,11vw,160px)}
.section-dark::before{top:0;height:min(900px,100%);translate:-50% 0;background:radial-gradient(42% 38% at 50% 45%,rgba(140,123,255,.2),transparent 100%)}
.section-dark .case.edu-case,.section-dark .nt-tile{background:#161617}
.case.edu-case::after,.nt-tile::after,.hl-card::after,.bt::after{border-radius:inherit}

/* ---------- Laufband mit Branchen (nur Verschieben, läuft auf der Grafikkarte) ---------- */
.marquee{padding-block:clamp(28px,5vw,72px);overflow:hidden;overflow:clip;direction:ltr}
.mq-row{display:flex;width:max-content;animation:nd-marquee 42s linear infinite}
.mq-row+.mq-row{margin-top:clamp(4px,1vw,12px);animation-direction:reverse;animation-duration:52s}
.mq-row span{flex:none;display:inline-flex;align-items:center;gap:clamp(18px,2.6vw,40px);padding-right:clamp(18px,2.6vw,40px);font:700 clamp(2.4rem,6.6vw,5.8rem)/1.08 var(--f-display);letter-spacing:-.045em;white-space:nowrap;color:var(--ink)}
.mq-row span::after{content:"";width:.2em;height:.2em;border-radius:50%;background:var(--grad)}
.mq-row span:nth-child(3n+2){background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.mq-row.out span{-webkit-text-fill-color:transparent;-webkit-text-stroke:1.4px color-mix(in srgb,var(--ink) 34%,transparent);background:none}
html[lang^="zh"] .mq-row span,html[lang="ar"] .mq-row span{letter-spacing:normal}
@keyframes nd-marquee{to{transform:translateX(-50%)}}

/* ---------- Kacheln kippen leicht unter der Maus (main.js setzt --rx/--ry) ---------- */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .bt{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .7s cubic-bezier(.2,.7,.2,1)}
  .bt:hover{transition-duration:.2s}
}

/* ---------- Am Computer kann man in den Vorschauen wieder selbst scrollen ----------
   (Mausrad und Trackpad, wie früher; am Ende scrollt die Seite weiter). Am Handy gleiten sie
   beim Seitenscrollen mit. Im Laptop oben erst, wenn er ganz offen ist, und nur ein Stück. */
.scroll-hint{position:absolute;left:10px;bottom:10px;z-index:4;display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:rgba(17,17,16,.82);color:#fff;font:600 .74rem/1 var(--f-body);pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity .2s,transform .2s}
.phone .scroll-hint{left:50%;transform:translate(-50%,4px);bottom:12px;white-space:nowrap}
@media (hover:hover) and (pointer:fine){
  .preview-frame.shot{overflow-y:auto;scrollbar-width:none}
  .preview-frame.shot::-webkit-scrollbar{display:none}
  .preview-frame.shot img{animation:none!important;translate:none!important}
  .hero.lap-anim:not(.lap-open) .preview-frame.shot{overflow:hidden}
  .hero .preview-frame.shot img{height:250cqh;object-fit:cover;object-position:top}
  .preview:hover .scroll-hint{opacity:1;transform:none}
  .phone:hover .scroll-hint{opacity:1;transform:translate(-50%,0)}
  .hero.lap-anim:not(.lap-open) .scroll-hint{opacity:0!important}
}

/* ---------- Galerie „Was wir für Sie bauen“: erste und letzte Karte mittig, die Karte in der Mitte
   ist groß und hell, die daneben treten zurück und ihr Motiv verschiebt sich leicht (Tiefe); dahinter
   leuchtet die Farbe der mittleren Karte. Beim Hereinscrollen gleiten die Karten von rechts ein (main.js). ---------- */
.hl{position:relative;isolation:isolate;--card-w:min(820px,calc(100vw - 2 * var(--gutter) - 56px))}
.hl-track{position:relative;padding-inline:max(var(--gutter),calc((100% - var(--card-w)) / 2));scroll-padding-inline:0;
  translate:calc((var(--in,0) - var(--out,0)) * 60vw) 0}
.hl-card{scroll-snap-align:center}
.hl.ready .hl-card{scale:calc(1 - var(--a,0) * .08);opacity:calc(1 - var(--a,0) * .55)}
.hl.ready .hl-art{translate:calc(var(--d,0) * -10%) 0}
.hl-glow{position:absolute;z-index:-1;inset:-14% 0;pointer-events:none}
.hl-glow i{position:absolute;left:50%;top:50%;width:min(1240px,130vw);height:100%;translate:-50% -50%;opacity:0;will-change:opacity;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--c1) 30%,transparent),color-mix(in srgb,var(--c2) 12%,transparent) 62%,transparent)}
.hl-glow i:first-child{opacity:1}
@media (prefers-reduced-motion:reduce){.hl-track{translate:none}}
/* Kopfleiste über der schwarzen Bühne: dunkel wie bei Apple (main.js setzt .dim-dark) */
.site-header.dim-dark{--bg:#000000;--bg-alt:#161617;--surface:#1D1D1F;--pill:#2C2C2E;--ink:#F5F5F7;--text:#F5F5F7;--muted:#A1A1A6;--line:#2C2C2E;--line-strong:#424245;
  --accent:#8C7BFF;--accent-text:#A99CFF;--accent-soft:rgba(140,123,255,.18);--on-accent:#0B0B0F;--header-bg:rgba(22,22,23,.8);color-scheme:dark}
:root[data-theme="light"] .site-header.dim-dark{--tt-sun:#F5F5F7;--tt-moon:#86868B}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .site-header.dim-dark{--tt-sun:#F5F5F7;--tt-moon:#86868B}}
.site-header .logo,.main-nav a,.lang-menu summary,.theme-toggle,.menu-toggle span{transition-property:color,opacity,background-color,border-color,transform;transition-duration:.3s}
/* Heller Modus: dunkle Ebene über der ganzen Seite, solange die schwarze Bühne kommt (main.js setzt die Deckkraft) */
.stage-dim{display:none;position:fixed;inset:0;z-index:-3;background:#000;opacity:0;pointer-events:none;will-change:opacity}
:root[data-theme="light"] .stage-dim{display:block}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .stage-dim{display:block}}
.section-dark.dimmed::after{display:none}