/* ---------- Tokens ---------- */
:root{
  --bg: #050506;
  --bg-soft: #0b0b0d;
  --fg: #f4f4f1;
  --fg-dim: rgba(244,244,241,0.62);
  --fg-faint: rgba(244,244,241,0.34);
  --accent-1: #7b61ff;
  --accent-2: #35e1ff;
  --line: rgba(244,244,241,0.12);
  --ease: cubic-bezier(.16,.84,.44,1);
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ background: var(--bg); }

body{
  background: var(--bg);
  color: var(--fg);
  font-family: 'Inter', system-ui, sans-serif;
  overflow-x: hidden;
  cursor: none;
}

a{ color: inherit; text-decoration: none; }
ul{ list-style: none; }
img{ max-width: 100%; display:block; }

::selection{ background: var(--accent-1); color: #fff; }

.line{ display:block; overflow:hidden; }
.word{ display:inline-block; will-change: transform; }

/* ---------- Preloader ---------- */
.preloader{
  position: fixed; inset:0; z-index: 999;
  background: var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: 24px;
}
.preloader__bar{
  width: 220px; height: 1px; background: var(--line); position: relative; overflow:hidden;
}
.preloader__bar span{
  position:absolute; left:0; top:0; bottom:0; width:0%;
  background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
}

/* ---------- Custom cursor ---------- */
.cursor, .cursor-dot{
  position: fixed; top:0; left:0; pointer-events:none; z-index: 998;
  border-radius: 50%;
  transform: translate(-50%,-50%);
  mix-blend-mode: difference;
}
.cursor{
  width: 34px; height: 34px; border: 1px solid var(--fg);
  transition: width .25s var(--ease), height .25s var(--ease), opacity .25s var(--ease), border-color .25s;
  opacity: 0.9;
}
.cursor-dot{
  width: 5px; height: 5px; background: var(--fg);
}
.cursor.hover{ width: 64px; height: 64px; background: var(--fg); opacity: 1; }
@media (hover:none), (pointer:coarse){
  .cursor, .cursor-dot{ display:none; }
  body{ cursor:auto; }
}

/* ---------- Noise ---------- */
.noise{
  position: fixed; inset:0; z-index: 2; pointer-events:none;
  opacity: 0.035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
}

/* ---------- Nav ---------- */
.nav{
  position: fixed; top:0; left:0; right:0; z-index: 100;
  display:flex; align-items:center; justify-content:space-between;
  padding: 28px 5vw;
  mix-blend-mode: difference;
  transform: translateY(0);
  transition: transform .5s var(--ease);
}
.nav.nav--hidden{ transform: translateY(-120%); }
.nav__logo{ font-weight: 800; letter-spacing: 0.05em; font-size: 15px; }
.nav__links{ display:flex; gap: 40px; }
.nav__links a{ font-size: 14px; color: var(--fg-dim); }
.nav__right{ display:flex; align-items:center; gap: 22px; }
.nav__cta{
  font-size: 13px; padding: 10px 20px; border: 1px solid var(--line); border-radius: 100px;
}

/* Sprachumschalter */
.lang{ display:flex; align-items:center; gap: 6px; }
.lang__btn{
  background:none; border:none; padding:0; cursor:none;
  font-family: inherit; font-size: 13px; letter-spacing: 0.08em;
  color: var(--fg-faint); transition: color .3s;
}
.lang__btn:hover{ color: var(--fg-dim); }
.lang__btn.active{ color: var(--fg); }
.lang__sep{ color: var(--fg-faint); font-size: 12px; }

@media (max-width: 760px){
  .nav__links{ display:none; }
  .nav__right{ gap: 14px; }
  .nav__cta{ font-size: 12px; padding: 9px 16px; }
}
@media (hover:none), (pointer:coarse){
  .lang__btn{ cursor: pointer; }
}

/* ---------- Sections base ---------- */
section{ position: relative; z-index: 3; }

/* ---------- Hero ---------- */
.hero{
  height: 100svh;
  display:flex; align-items:center; justify-content:center;
  position: relative; overflow:hidden;
  background: radial-gradient(ellipse at 50% 30%, #0d0d10 0%, var(--bg) 65%);
}
.hero__canvas{
  position:absolute; inset:0; width:100%; height:100%; z-index:0;
  opacity: 0.8;
}
.hero__inner{
  position: relative; z-index: 1; text-align:center; padding: 0 5vw;
}
.hero__title{
  font-weight: 800;
  font-size: clamp(2.6rem, 9vw, 8.2rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}
.hero__sub{
  margin-top: 28px;
  font-size: clamp(0.85rem, 1.3vw, 1.05rem);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.hero__sub .dot{ color: var(--accent-2); margin: 0 4px; }

/* ---------- Statement ---------- */
.statement{
  min-height: 90vh;
  display:flex; align-items:center; justify-content:center;
  padding: 20vh 5vw;
  background: var(--bg);
}
.statement__inner{ max-width: 980px; text-align:center; }
.statement__lead{
  font-weight: 700; letter-spacing: -0.02em;
  font-size: clamp(1.8rem, 4.4vw, 3.6rem);
  line-height: 1.15;
  margin-bottom: 40px;
}
.statement__reveal{
  font-weight: 600;
  font-size: clamp(1.1rem, 2.2vw, 1.7rem);
  line-height: 1.5;
  letter-spacing: -0.01em;
}
.statement__reveal .w{ color: var(--fg-faint); transition: color .2s; }
.statement__reveal .w.active{ color: var(--fg); }

/* ---------- AI section ---------- */
.ai{
  min-height: 100vh; padding: 14vh 5vw;
  background: linear-gradient(180deg, var(--bg) 0%, #0a0a13 100%);
  display:flex; align-items:center;
}
.ai__inner{
  width:100%; max-width: 1280px; margin: 0 auto;
  display:grid; grid-template-columns: 1fr 1fr; gap: 6vw; align-items:center;
}
.ai__eyebrow{
  font-size: 12px; letter-spacing: 0.3em; text-transform:uppercase; color: var(--accent-2); margin-bottom: 20px;
}
.ai__title{
  font-size: clamp(2.2rem, 5vw, 4rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; margin-bottom: 26px;
}
.ai__desc{ color: var(--fg-dim); font-size: 1.05rem; line-height: 1.6; max-width: 460px; margin-bottom: 28px; }
.ai__badge{
  display:inline-block; font-size: 13px; letter-spacing:0.15em; text-transform:uppercase;
  border: 1px solid var(--line); padding: 10px 18px; border-radius: 100px; color: var(--fg-dim);
}
.chat{
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line);
  border-radius: 20px;
  backdrop-filter: blur(20px);
  overflow:hidden;
  box-shadow: 0 40px 100px -30px rgba(0,0,0,0.7);
}
.chat__header{
  padding: 18px 22px; border-bottom: 1px solid var(--line);
  font-size: 13px; color: var(--fg-dim); display:flex; align-items:center; gap: 10px;
}
/* Der Punkt zeigt drei Zustaende: grau waehrend der Pruefung, gruen bei
   erreichbarer Wissensbasis, rot wenn nicht. Der Nutzer soll nicht raten
   muessen, ob er gerade mit dem echten Assistenten spricht. */
.chat__status{
  width:8px; height:8px; border-radius:50%; flex-shrink:0;
  background:#3ddc84; box-shadow: 0 0 10px #3ddc84;
  transition: background .3s ease, box-shadow .3s ease;
}
.chat--checking .chat__status,
.dock--checking .chat__status{
  background: var(--fg-faint); box-shadow:none;
  animation: statusPulse 1.4s infinite ease-in-out;
}
.chat--offline .chat__status,
.dock--offline .chat__status{
  background:#ff5f56; box-shadow: 0 0 10px #ff5f56;
}
@keyframes statusPulse{ 0%,100%{ opacity:.35; } 50%{ opacity:1; } }
.chat__inputbar input:disabled,
.chat__inputbar button:disabled{
  opacity:.45; cursor:not-allowed;
}
.chat__body{
  height: 360px; padding: 22px; display:flex; flex-direction:column; gap: 14px; overflow-y:auto;
  scrollbar-width: thin; scrollbar-color: rgba(244,244,241,0.25) transparent;
}
.chat__body::-webkit-scrollbar{ width: 5px; }
.chat__body::-webkit-scrollbar-track{ background: transparent; }
.chat__body::-webkit-scrollbar-thumb{ background: rgba(244,244,241,0.2); border-radius: 10px; }
.msg{
  max-width: 80%; padding: 12px 16px; border-radius: 14px; font-size: 14px; line-height: 1.45;
  opacity:0; transform: translateY(10px);
}
.msg--visitor{ align-self:flex-end; background: var(--fg); color: #0a0a0a; border-bottom-right-radius: 4px; }
.msg--ai{
  align-self:flex-start; background: rgba(255,255,255,0.06); border: 1px solid var(--line);
  border-bottom-left-radius: 4px;
}

/* Ein Mensch sieht anders aus als der Assistent.

   Das ist keine Verzierung: Wer glaubt, mit einer Maschine zu schreiben,
   formuliert anders als jemand, der weiss, dass ein Kollege mitliest. Die
   Blase traegt deshalb eine eigene Farbe und sagt darueber, wer schreibt -
   und zwar im Dokument, nicht nur als Hintergrundbild, damit auch ein
   Screenreader es vorliest. */
.msg--human{
  align-self:flex-start;
  background: rgba(61,220,132,0.10);
  border: 1px solid rgba(61,220,132,0.34);
  border-bottom-left-radius: 4px;
}
/* Der Name kommt aus dem Dokument, nicht aus dem Stylesheet: Bei jedem
   Kunden steht hier ein anderer. Ohne Namen faellt die Zeile weg - eine
   leere Ueberschrift waere schlechter als keine. */
.msg--human[data-author]::before{
  content: attr(data-author);
  display:block; margin-bottom: 5px;
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: #8ef0b8;
}

/* Die Leiste ueber dem Verlauf: wer gerade antwortet. */
.chat__live{
  padding: 9px 14px; margin: 0 0 2px;
  background: rgba(61,220,132,0.08);
  border-bottom: 1px solid rgba(61,220,132,0.22);
  color: #8ef0b8; font-size: 12px; letter-spacing: .01em;
}

.msg.show{ opacity:1; transform:none; transition: opacity .4s var(--ease), transform .4s var(--ease); }
.typing{
  align-self:flex-start; display:flex; gap:4px; padding: 14px 16px; background: rgba(255,255,255,0.06);
  border: 1px solid var(--line); border-radius: 14px; border-bottom-left-radius:4px;
  opacity:0; transition: opacity .3s;
}
.typing.show{ opacity:1; }
.typing span{
  width:6px; height:6px; border-radius:50%; background: var(--fg-faint);
  animation: bounce 1.2s infinite ease-in-out;
}
.typing span:nth-child(2){ animation-delay: .15s; }
.typing span:nth-child(3){ animation-delay: .3s; }
@keyframes bounce{ 0%,60%,100%{ transform: translateY(0); opacity:.4; } 30%{ transform: translateY(-4px); opacity:1; } }
.chat__inputbar{
  display:flex; gap: 10px; padding: 16px; border-top: 1px solid var(--line);
}
.chat__inputbar input{
  flex:1; background: rgba(255,255,255,0.04); border: 1px solid var(--line); border-radius: 100px;
  padding: 12px 18px; color: var(--fg); font-family: inherit; font-size: 14px; outline: none;
}
.chat__inputbar input::placeholder{ color: var(--fg-faint); }
.chat__inputbar button{
  width: 42px; height: 42px; border-radius: 50%; border: none; cursor: pointer;
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2)); color:#fff; font-size: 16px;
  flex-shrink:0;
}
@media (max-width: 900px){
  .ai__inner{ grid-template-columns: 1fr; }
}
/* Rasterkinder schrumpfen von sich aus nicht unter die Breite ihres Inhalts.
   Die Chat-Attrappe enthaelt Vorschlaege, die nicht umbrechen - dadurch wurde
   die Spalte breiter als der Bildschirm und die ganze Seite liess sich
   seitlich schieben. `min-width:0` hebt diese Sperre auf; die Vorschlagszeile
   scrollt ohnehin fuer sich. */
.ai__inner > *{ min-width: 0; }

/* =========================================================
   Chat-Dock (unten rechts)

   Standardmaessig nicht vorhanden: kein Platzverbrauch, keine
   Klickflaeche. Erst `.dock--ready` holt es herein - gesetzt wird das
   beim Erreichen der KI-Sektion. Ueber der Nav (100), unter dem
   Custom-Cursor (998).
========================================================= */
.dock{
  position: fixed; right: 28px; bottom: 28px; z-index: 120;
  display:flex; flex-direction:column; align-items:flex-end; gap: 12px;
  pointer-events: none;
}
.dock > *{
  opacity: 0; transform: translateY(16px) scale(.9);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.dock--ready > *{ opacity: 1; transform:none; pointer-events:auto; }

/* --- Runder Knopf --- */
.dock__fab{
  position: relative; /* Bezug fuer die beiden Icons und den Puls-Ring */
  width: 60px; height: 60px; border-radius: 50%; border:none; cursor:pointer;
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  display:grid; place-items:center; flex-shrink:0;
  box-shadow: 0 14px 40px -8px rgba(123,97,255,0.55);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease),
              opacity .45s var(--ease);
}
.dock__fab:hover{ transform: scale(1.06); box-shadow: 0 18px 50px -8px rgba(123,97,255,0.75); }
.dock__fab:focus-visible{ outline: 2px solid var(--fg); outline-offset: 4px; }
.dock__icon{
  position:absolute; width: 26px; height: 26px; fill:none; stroke:#fff;
  stroke-width: 1.8; stroke-linecap:round; stroke-linejoin:round;
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.dock__icon--close{ opacity:0; transform: rotate(-45deg); }
.dock--open .dock__icon--chat{ opacity:0; transform: rotate(45deg); }
.dock--open .dock__icon--close{ opacity:1; transform:none; }

/* Dezenter Puls, solange der Assistent noch nie geoeffnet wurde. */
.dock--ready:not(.dock--used) .dock__fab::after{
  content:''; position:absolute; inset:-6px; border-radius:50%;
  border: 1px solid var(--accent-2); opacity:0;
  animation: dockPulse 2.8s infinite var(--ease);
}
@keyframes dockPulse{
  0%{ opacity:.55; transform: scale(.92); }
  70%{ opacity:0; transform: scale(1.25); }
  100%{ opacity:0; transform: scale(1.25); }
}

/* --- Sprechblase --- */
.dock__hint{
  background: var(--fg); color:#0a0a0a; font-size: 13px; font-weight: 500;
  padding: 10px 16px; border-radius: 100px; white-space: nowrap;
  box-shadow: 0 14px 40px -12px rgba(0,0,0,0.8); position: relative;
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
/* Nach dem ersten Oeffnen hat die Blase ihren Zweck erfuellt. */
.dock--used .dock__hint,
.dock--hint-done .dock__hint{
  opacity:0 !important; transform: translateY(6px) scale(.95) !important;
  pointer-events:none;
}

/* --- Panel --- */
.dock__panel{
  width: min(380px, calc(100vw - 40px));
  background: rgba(11,11,13,0.92);
  border: 1px solid var(--line); border-radius: 20px;
  backdrop-filter: blur(20px); overflow:hidden;
  box-shadow: 0 40px 100px -20px rgba(0,0,0,0.85);
  transform-origin: bottom right;
}
.dock__panel[hidden]{ display:none; }
/* Von display:none kommend laesst sich nichts ueberblenden - deshalb eine
   Keyframe-Animation, die beim Einblenden einmal durchlaeuft. */
.dock--open .dock__panel{ animation: dockPanelIn .32s var(--ease); }
@keyframes dockPanelIn{
  from{ opacity:0; transform: translateY(14px) scale(.96); }
  to{ opacity:1; transform:none; }
}
.dock__header{
  padding: 16px 18px; border-bottom: 1px solid var(--line);
  font-size: 13px; color: var(--fg-dim);
  display:flex; align-items:center; gap: 10px;
}
.dock__close{
  margin-left:auto; background:none; border:none; color: var(--fg-dim);
  font-size: 22px; line-height:1; cursor:pointer; padding: 0 4px;
  transition: color .2s;
}
.dock__close:hover{ color: var(--fg); }
.dock__panel .chat__body{ height: 320px; padding: 18px; }

/* --- Vorgeschlagene Fragen --- */
.chat__chips{
  display:flex; gap: 8px; padding: 0 16px 4px; flex-wrap: nowrap;
  overflow-x: auto; scrollbar-width: none;
}
.chat__chips::-webkit-scrollbar{ display:none; }
.chat__chips:empty{ display:none; }
.chat__chip{
  flex-shrink:0; cursor:pointer; white-space:nowrap;
  background: rgba(255,255,255,0.04); border: 1px solid var(--line);
  border-radius: 100px; padding: 8px 14px;
  color: var(--fg-dim); font-family: inherit; font-size: 12.5px;
  transition: background .2s, color .2s, border-color .2s, transform .2s var(--ease);
}
.chat__chip:hover{
  background: rgba(255,255,255,0.09); color: var(--fg);
  border-color: rgba(244,244,241,0.28); transform: translateY(-1px);
}
.chat__chip:disabled{ opacity:.4; cursor:not-allowed; transform:none; }

/* Der Weg zum Menschen ist kein Themenvorschlag - er sieht deshalb anders
   aus als die Fragen daneben. Der gruene Punkt sagt dasselbe wie im
   Dashboard: Da sitzt gerade wirklich jemand. Er erscheint ueberhaupt nur
   dann; ein ausgegrauter Knopf "gerade niemand da" waere die schlechtere
   Loesung - er wirbt fuer etwas, das nicht geht. */
.chat__chip--human{
  background: rgba(61,220,132,0.10);
  border-color: rgba(61,220,132,0.38);
  color: #8ef0b8;
  display:inline-flex; align-items:center; gap:7px;
}
.chat__chip--human::before{
  content:''; width:6px; height:6px; border-radius:50%;
  background:#3ddc84; flex-shrink:0;
  box-shadow: 0 0 0 3px rgba(61,220,132,0.16);
}
.chat__chip--human:hover{
  background: rgba(61,220,132,0.18);
  border-color: rgba(61,220,132,0.6);
  color: #b6f7d3;
}
.chat__chip:focus-visible{ outline: 2px solid var(--accent-2); outline-offset: 2px; }

@media (max-width: 600px){
  .dock{ right: 16px; bottom: 16px; }
  .dock__fab{ width: 54px; height: 54px; }
  .dock__panel .chat__body{ height: 46vh; }

  /* Uebereinander gestapelt sind Blase, Pfeil und Knopf rund 165px hoch.
     Auf dem Telefon reicht dieser Turm bis in die Meta-Zeile der
     Videostrecke hinein - die weisse Blase lag dort mitten im Bild.
     Neben dem Knopf braucht der Hinweis nur noch dessen eigene Hoehe.
     Der Pfeil entfaellt dabei: ueber 60px Abstand erklaert er nichts
     mehr, was die danebenstehende Blase nicht schon zeigt. */
  .dock__arrow{ display: none; }
  .dock__hint{
    position: absolute; right: 66px; bottom: 12px;
    max-width: calc(100vw - 110px);
    font-size: 12.5px; padding: 9px 14px;
  }
}

/* Wer Bewegung reduziert haben will, bekommt das Dock ohne Animation. */
@media (prefers-reduced-motion: reduce){
  .dock > *, .dock__fab, .dock__icon, .dock__hint{ transition: none; }
  .dock--ready:not(.dock--used) .dock__fab::after{ animation: none; }
}

/* ---------- Experience (scroll-scrubbed video story) ----------
   Die Hoehe bestimmt das Tempo: mehr Hoehe = mehr Scrollweg pro Frame =
   langsamerer, ruhigerer Ablauf. Bei 300vh sprang ein Mausrad-Klick (~100px)
   ueber gut 20 Frames; bei 600vh sind es rund 9. */
/* 760vh = ~500vh Videostrecke (Tempo wie zuvor) + Platz dafuer, dass das
   Preis-Panel danach ins stehende Bild hochfaehrt. */
.experience{ height: 760vh; position: relative; background: #000; }
.experience__label{
  position:absolute; top: 48px; left: 5vw; z-index: 2;
  font-size: 12px; letter-spacing: 0.3em; text-transform:uppercase; color: var(--fg-faint);
}
.experience__pin{
  position: sticky; top: 0; height: 100svh; overflow: hidden;
}
.experience__stage{ position:absolute; inset:0; }

.exp-scene{ position:absolute; inset:0; opacity:0; }
/* Die erste Szene ist schon sichtbar, bevor das Skript laeuft.
   Ohne das steht dort eine schwarze Flaeche, bis der Scroll den
   ScrollTrigger ausloest - und der loest erst aus, wenn man schon
   mitten im Abschnitt ist.

   Ueber :first-child statt ueber den Namen der Szene: Vorher stand hier
   [data-scene="cleaning"]. Als die Szene entfernt wurde, war keine mehr
   sichtbar, und niemand hat es der Regel angesehen. */
.exp-scene:first-child{ opacity:1; }

.exp-canvas, .exp-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#050506;
  display:block;
}
/* Bewusst zurückhaltend: die Bildmitte bleibt komplett unangetastet, damit
   das Material seine Farben und seinen Kontrast behält. Lesbarkeit des Texts
   kommt über den text-shadow unten, nicht über Abdunkeln des ganzen Frames. */
.exp-scrim{
  position:absolute; inset:0;
  background: linear-gradient(180deg,
    rgba(0,0,0,.25) 0%,
    rgba(0,0,0,0) 32%,
    rgba(0,0,0,0) 55%,
    rgba(0,0,0,.62) 100%);
}
.exp-text{
  position:absolute; left:0; right:0; bottom: 12%; text-align:center; padding: 0 6vw; opacity:0;
}
.exp-headline{
  font-size: clamp(2rem, 6vw, 5rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05;
  text-transform: uppercase; color: #fff;
  text-shadow: 0 2px 30px rgba(0,0,0,0.45), 0 1px 8px rgba(0,0,0,0.35);
}

.experience__progress{
  position:absolute; left:0; right:0; bottom:0; height: 2px; background: var(--line); z-index: 3;
}
.experience__progress span{
  display:block; height:100%; width:0%;
  background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
}
.experience__dots{
  position:absolute; right: 5vw; top:50%; transform:translateY(-50%); z-index: 3;
  display:flex; flex-direction:column; gap: 14px;
}
.experience__dots span{
  width:6px; height:6px; border-radius:50%; background: var(--line); transition: background .3s, transform .3s;
}
.experience__dots span.active{ background: #fff; transform: scale(1.4); }

/* ---------- Preis-Panel: faehrt ins letzte Videobild ---------- */
.experience__dim{
  position:absolute; inset:0; z-index: 2; background:#000; opacity: 0; pointer-events:none;
}

/* Das Panel selbst ist durchsichtig - die Lesbarkeit kommt daher, dass
   das Bild dahinter gedimmt wird (.experience__dim), nicht von einer
   grauen Scheibe. So bleibt das letzte Bild scharf und erkennbar. */
.pricing-panel{
  position:absolute; inset:0; z-index: 4;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding: 8vh 5vw;
  transform: translateY(100%); /* JS schiebt es hoch */
  background: transparent;
}
.pricing-panel .pricing__heading{
  text-shadow: 0 2px 30px rgba(0,0,0,0.5), 0 1px 8px rgba(0,0,0,0.4);
}
.pricing-panel .pricing__note{
  color: rgba(244,244,241,0.85);
  text-shadow: 0 1px 12px rgba(0,0,0,0.55);
}

/* Auf dem Telefon lief die Strecke frueher ungepinnt: drei volle
   Bildschirmhoehen untereinander. Dadurch waren staendig zwei Szenen
   gleichzeitig im Bild, mit einer sichtbaren Naht dazwischen, und die
   Ueberschrift klebte am unteren Rand hinter dem Chat-Knopf.

   Jetzt gilt derselbe Aufbau wie auf dem Rechner - eine Szene fuellt den
   Bildschirm, der Scroll blendet um. Nur die Bildquelle unterscheidet sich:
   Video statt Einzelbildern. */
@media (max-width: 760px){
  /* Kuerzer als die 760vh am Rechner: Auf dem Telefon wird mit Wischern
     gescrollt, da wirkt derselbe Weg zaeh. 400svh lassen jeder Szene gut
     eine Bildschirmhoehe. */
  .experience{ height: 400svh; }
  .experience__label{ top: 20px; left: 5vw; }
  /* Hoeher als die 12% am Rechner: Unten rechts sitzt der Chat-Knopf, und
     Telefone blenden dort ihre eigene Leiste ein. */
  .exp-text{ bottom: 17%; }
  .exp-headline{ font-size: clamp(2rem, 11vw, 3.4rem); }
  .exp-meta{ gap: 16px; margin-top: 18px; }
  .exp-meta b{ font-size: 13px; }
  .experience__dots{ right: 14px; }
  /* Das Preis-Panel wird weiter unten enger gestellt - erst hinter seinen
     eigenen Grundregeln, sonst gewinnen die. */
}

/* ---------- Pricing ---------- */
.pricing__heading{
  font-size: clamp(1.9rem, 4.4vw, 3.4rem); font-weight: 800; letter-spacing:-0.03em; line-height:1.1;
  margin-bottom: 5vh;
}
.pricing__grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1100px; margin: 0 auto;
}
.price{
  border: 1px solid rgba(244,244,241,0.16); border-radius: 20px; padding: 36px 28px; text-align:left;
  /* Milchglas: hebt die Karte vom Foto ab, ohne es zuzudecken */
  background: rgba(10,10,12,0.55);
  backdrop-filter: blur(20px);
  transition: transform .4s var(--ease), border-color .4s, background .4s;
}
.price:hover{ transform: translateY(-8px); border-color: rgba(244,244,241,0.3); }
.price h3{ font-size: 13px; letter-spacing: 0.25em; color: var(--fg-dim); margin-bottom: 20px; }
.price__value{ font-size: 2.2rem; font-weight: 800; letter-spacing:-0.02em; margin-bottom: 14px; }
.price__desc{ color: var(--fg-dim); font-size: 0.95rem; line-height: 1.5; }
.price--featured{
  background: linear-gradient(160deg, rgba(123,97,255,0.14), rgba(53,225,255,0.06));
  border-color: rgba(123,97,255,0.4);
}
.pricing__note{ margin-top: 5vh; color: var(--fg-dim); font-size: 1.05rem; }
@media (max-width: 860px){
  .pricing__grid{ grid-template-columns: 1fr; }
}

/* Das Panel faehrt von unten in das stehende letzte Videobild - es ist also
   genau eine Bildschirmhoehe hoch und um dieselbe Hoehe nach unten geschoben.
   Ist sein Inhalt hoeher als das, schiebt `justify-content:center` die Haelfte
   des Ueberhangs oben ueber die Panelkante hinaus, und die Kante steht am
   unteren Bildrand: so lugte "Klare Preise." schon mitten in der Videostrecke
   ins Bild. Untereinander gestapelt brauchten die drei Karten 782px, das
   Telefon bot 709px.

   Diese Regeln muessen hinter den Grundregeln stehen: `.price` gegen `.price`
   entscheidet nicht die Spezifitaet, sondern die Reihenfolge. Im
   Mediablock weiter oben blieben sie wirkungslos. */
@media (max-width: 760px){
  /* `overflow:hidden` ist die letzte Sicherung fuer kurze Telefone:
     lieber beschnitten als vorzeitig ins Bild geragt. */
  .pricing-panel{ padding: 6vh 5vw; overflow: hidden; }
  .pricing-panel .pricing__heading{
    font-size: clamp(1.6rem, 7.5vw, 2.3rem); margin-bottom: 3vh;
  }
  .pricing__grid{ gap: 10px; }
  .price{ padding: 20px 18px; border-radius: 16px; }
  .price h3{ margin-bottom: 8px; }
  .price__value{ font-size: 1.7rem; margin-bottom: 6px; }
  .price__desc{ font-size: 0.88rem; line-height: 1.45; }
  .pricing-panel .pricing__note{ margin-top: 3vh; font-size: 0.92rem; }
}

/* ---------- CTA ---------- */
.cta{
  min-height: 100vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; background: #000; padding: 10vh 5vw;
}
/* Der Satz traegt die Aussage, der Button traegt die Handlung —
   deshalb ist der Button hier bewusst gross. */
.cta__title{
  font-size: clamp(1.9rem, 4.6vw, 3.8rem); font-weight: 800; letter-spacing:-0.03em; line-height: 1.1;
  margin-bottom: 7vh; max-width: 20ch;
}
.cta__link{
  font-size: clamp(1.5rem, 3.4vw, 2.6rem); font-weight: 700; letter-spacing: -0.02em;
  border: 1px solid var(--line); padding: 26px 60px; border-radius: 100px;
  margin-bottom: 8vh; transition: background .3s, color .3s, transform .3s var(--ease);
}
.cta__link:hover{ background: var(--fg); color: #000; transform: translateY(-3px); }
/* Die Linkzeile ist der Nebenweg - wer das Formular nicht mag, schreibt
   direkt. Sie sass ohne Abstand auf der Unterkante des Danke-Kastens und sah
   aus, als gehoerte sie hinein. `.cta` ist ein Flex-Container ohne gap, hier
   traegt der Aussenabstand also die ganze Trennung. */
.cta__contact{
  margin-top: clamp(52px, 9vh, 110px);
  display:flex; gap: 14px; color: var(--fg-dim); font-size: 0.95rem;
  flex-wrap:wrap; justify-content:center;
}

/* ---------- Footer ---------- */
/* Drei Spalten statt `space-between`.

   Mit space-between haengt die Mitte nur dann mittig, wenn links und rechts
   zufaellig gleich breit sind - sie sind es nie. Gleich breite Spalten
   setzen die Mitte auf die Seitenmitte, egal wie lang die Texte daneben
   sind; links bleibt linksbuendig, rechts rechtsbuendig. */
.footer{
  display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; gap: 20px;
  padding: 40px 5vw; color: var(--fg-faint); font-size: 12px;
  background:#000; letter-spacing: 0.05em;
}
.footer > :last-child{ text-align: right; }
.footer__links{ text-align: center; }
.footer__links a{ color: var(--fg-dim); }
.footer__links a:hover{ color: var(--fg); }

/* Auf dem Telefon untereinander und mittig - nebeneinander wuerden die drei
   Zeilen sonst zu schmalen Saeulen zerquetscht. */
@media (max-width: 640px){
  .footer{
    grid-template-columns: 1fr; justify-items: center; gap: 12px;
    text-align: center;
  }
  .footer > :last-child{ text-align: center; }
}

/* ---------- Reveal utility ---------- */
[data-reveal]{ opacity:0; transform: translateY(40px); }
[data-reveal].revealed{ opacity:1; transform:none; transition: opacity .9s var(--ease), transform .9s var(--ease); }

/* =========================================================
   Terminbuchung

   Erscheint, wenn der Assistent einen Terminwunsch erkennt. Zwei Schritte:
   erst Tag und Uhrzeit, dann die Kontaktdaten. Belegte Tage sind sichtbar
   gesperrt statt einfach zu fehlen - so sieht man, dass ueberhaupt etwas
   geprueft wurde.
========================================================= */
.booking{
  position:fixed; inset:0; z-index:130; display:grid; place-items:center;
  background:rgba(0,0,0,.74); backdrop-filter:blur(6px); padding:20px;
  animation:bookingFade .25s var(--ease);
}
.booking[hidden]{ display:none; }
@keyframes bookingFade{ from{opacity:0} to{opacity:1} }

.booking__sheet{
  width:min(560px,100%); max-height:88vh; display:flex; flex-direction:column;
  background:var(--bg-soft); border:1px solid var(--line); border-radius:20px;
  box-shadow:0 40px 100px -20px rgba(0,0,0,.85); overflow:hidden;
  animation:bookingRise .32s var(--ease);
}
@keyframes bookingRise{
  from{ opacity:0; transform:translateY(18px) scale(.97) } to{ opacity:1; transform:none }
}
.booking__head{
  display:flex; align-items:center; gap:12px; padding:18px 22px;
  border-bottom:1px solid var(--line);
}
.booking__head h3{ margin:0; font-size:16px; font-weight:600; letter-spacing:-.01em }
.booking__close{
  margin-left:auto; background:none; border:none; color:var(--fg-dim);
  font-size:26px; line-height:1; cursor:pointer; padding:0 4px; transition:color .2s;
}
.booking__close:hover{ color:var(--fg) }
.booking__body{ padding:22px; overflow-y:auto }
.booking__hint{ color:var(--fg-dim); font-size:13.5px; margin:0 0 14px }
.booking__label{
  font-size:12px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--fg-faint); margin:0 0 10px;
}

/* --- Tage --- */
.booking__days{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr));
  gap:8px; margin-bottom:22px;
}
.day{
  background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:12px;
  padding:10px 6px; text-align:center; cursor:pointer; color:var(--fg);
  font-family:inherit; transition:all .2s var(--ease);
}
.day:hover:not(:disabled){ background:rgba(255,255,255,.1); transform:translateY(-2px) }
.day--active{
  background:linear-gradient(135deg,var(--accent-1),var(--accent-2));
  border-color:transparent; color:#fff;
}
.day:disabled{ opacity:.28; cursor:not-allowed; text-decoration:line-through }
.day__weekday{ display:block; font-size:11px; color:var(--fg-faint); letter-spacing:.06em }
.day--active .day__weekday{ color:rgba(255,255,255,.75) }
.day__number{ display:block; font-size:19px; font-weight:600; margin-top:2px }
.day__month{ display:block; font-size:11px; color:var(--fg-faint) }
.day--active .day__month{ color:rgba(255,255,255,.75) }

/* --- Uhrzeiten --- */
.booking__times{ display:flex; flex-wrap:wrap; gap:8px }
.time{
  background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:100px;
  padding:9px 18px; cursor:pointer; color:var(--fg); font-family:inherit; font-size:14px;
  transition:all .2s var(--ease);
}
.time:hover{ background:rgba(255,255,255,.1) }
.time--active{
  background:linear-gradient(135deg,var(--accent-1),var(--accent-2));
  border-color:transparent; color:#fff;
}

/* --- Formular --- */
.booking__form .field{ margin-bottom:14px }
.booking__form label{
  display:block; font-size:13px; color:var(--fg-dim); margin:0 0 6px;
}
.booking__form input,
.booking__form textarea{
  width:100%; background:rgba(255,255,255,.04); border:1px solid var(--line);
  border-radius:10px; padding:11px 14px; color:var(--fg); font-family:inherit;
  font-size:14px; outline:none; transition:border-color .2s;
}
.booking__form input:focus,
.booking__form textarea:focus{ border-color:var(--accent-2) }
.booking__row{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
.booking__chosen{
  background:rgba(123,97,255,.12); border:1px solid rgba(123,97,255,.32);
  border-radius:12px; padding:12px 16px; margin-bottom:18px; font-size:14px;
}
.booking__actions{ display:flex; gap:10px; margin-top:20px; flex-wrap:wrap }
.booking__btn{
  border:1px solid var(--line); background:rgba(255,255,255,.05); color:var(--fg);
  border-radius:100px; padding:11px 22px; cursor:pointer; font-family:inherit;
  font-size:14px; transition:all .2s var(--ease);
}
.booking__btn:hover:not(:disabled){ background:rgba(255,255,255,.11) }
.booking__btn:disabled{ opacity:.45; cursor:not-allowed }
.booking__btn--primary{
  background:linear-gradient(135deg,var(--accent-1),var(--accent-2));
  border-color:transparent; color:#fff; flex:1;
}
.booking__privacy{ font-size:12px; color:var(--fg-faint); margin:14px 0 0; line-height:1.5 }
.booking__error{
  background:rgba(255,95,86,.12); border:1px solid rgba(255,95,86,.35);
  color:#ffa8a2; border-radius:10px; padding:11px 15px; margin:0 0 16px; font-size:13.5px;
}
.booking__done{ text-align:center; padding:14px 0 4px }
.booking__done-icon{
  width:56px; height:56px; margin:0 auto 18px; border-radius:50%;
  background:rgba(61,220,132,.14); border:1px solid rgba(61,220,132,.4);
  display:grid; place-items:center; font-size:26px; color:#3ddc84;
}
.booking__done h4{ margin:0 0 8px; font-size:17px; font-weight:600 }
.booking__done p{ margin:0; color:var(--fg-dim); font-size:14px }

@media (max-width:520px){
  .booking{ padding:0 }
  .booking__sheet{ max-height:100vh; height:100%; border-radius:0; width:100% }
  .booking__row{ grid-template-columns:1fr }
  .booking__days{ grid-template-columns:repeat(auto-fill,minmax(74px,1fr)) }
}
@media (prefers-reduced-motion:reduce){
  .booking,.booking__sheet{ animation:none }
  .day:hover:not(:disabled){ transform:none }
}

/* Telefon: Vorwahl und Nummer nebeneinander. */
.booking__phone{ display:flex; gap:8px }
.booking__dial{
  flex:0 0 auto; width:96px;
  background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:10px;
  padding:11px 8px; color:var(--fg); font-family:inherit; font-size:14px;
  outline:none; cursor:pointer; transition:border-color .2s;
}
.booking__dial:focus{ border-color:var(--accent-2) }
.booking__dial option{ background:var(--bg-soft); color:var(--fg) }
.booking__phone input{ flex:1; min-width:0 }

/* Hinweis zwischen zwei Feldern braucht unten Luft, sonst klebt er am
   naechsten Label. */
.booking__privacy--inline{ margin:-6px 0 16px }

/* --- Pfeil von der Sprechblase zum Knopf --------------------------------
   Die Blase allein sagt nicht, wohin man klicken soll. Der gezeichnete
   Pfeil fuehrt den Blick von der Beschriftung auf den runden Knopf und
   ersetzt damit den frueheren Zipfel an der Blase.

   Ein- und Ausblenden macht `.dock > *` fuer alle Kinder gleich; deshalb
   bleibt `transform` hier unangetastet und das Wippen sitzt auf einer
   inneren Gruppe. Sonst wuerde die Animation die Einblendung ueberfahren. */
.dock__arrow{
  width: 54px; height: 38px; margin: -2px 12px -6px 0;
  align-self: flex-end; overflow: visible;
  fill: none; stroke: var(--fg); stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
}
.dock--ready .dock__arrow{ opacity: .8; }
.dock__arrow-line{ stroke-dasharray: 4 5.5; }
.dock__arrow g{ animation: dockArrow 2.6s ease-in-out infinite; }
@keyframes dockArrow{
  0%, 100%{ transform: translate(0, 0); }
  50%     { transform: translate(2px, 5px); }
}
/* Sobald der Assistent einmal offen war, hat der Hinweis seinen Zweck
   erfuellt - Pfeil und Blase ziehen sich gemeinsam zurueck. */
.dock--used .dock__arrow,
.dock--hint-done .dock__arrow{
  opacity: 0 !important; transform: translateY(6px) scale(.9) !important;
  pointer-events: none;
}
.dock--used .dock__arrow g,
.dock--hint-done .dock__arrow g{ animation: none; }
@media (prefers-reduced-motion: reduce){
  .dock__arrow g{ animation: none; }
}
@media (max-width: 600px){
  .dock__arrow{ width: 46px; height: 32px; margin-right: 9px; }
}

/* =========================================================
   WHAT WE DO — drei Karten
   Die Zeichnungen werden gestrichelt gezeichnet: Jedes Element bekommt eine
   Strichliste, die so lang ist wie es selbst, und wird von voll versetzt auf
   null gefahren. Der Versatz je Kind macht daraus eine Reihenfolge statt
   eines gleichzeitigen Aufblitzens.
========================================================= */
.do{ padding: clamp(90px, 14vh, 180px) 6vw; }
/* Ueberschrift und Raster teilen sich dieselbe Breite und stehen beide
   mittig. Nur das Raster zu zentrieren, waere schlimmer als gar nicht:
   Die Ueberschrift klebte dann links daneben statt ueber der ersten
   Karte. Gemessen bei 1920px: vorher 114px links und 590px rechts. */
.do__heading{
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--fg-faint); margin-bottom: clamp(36px, 6vh, 64px);
  max-width: 1200px; margin-inline: auto;
}
.do__grid{
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  max-width: 1200px; margin-inline: auto;
}
.do__card{
  position: relative; padding: 32px 28px 36px;
  border: 1px solid var(--line); border-radius: 18px;
  background: linear-gradient(180deg, rgba(244,244,241,0.035), transparent 60%);
  overflow: hidden;
  transition: border-color .45s var(--ease), transform .45s var(--ease);
}
/* Der Schimmer liegt hinter dem Inhalt und wird nur eingeblendet - so
   flackert beim Hover kein Umbruch. */
.do__card::before{
  content:''; position:absolute; inset:-1px; border-radius: 18px; opacity:0;
  background: radial-gradient(120% 80% at 50% 0%,
              rgba(123,97,255,0.20), transparent 60%);
  transition: opacity .45s var(--ease); pointer-events:none;
}
.do__card:hover{ border-color: rgba(244,244,241,0.28); transform: translateY(-4px); }
.do__card:hover::before{ opacity:1; }
.do__index{
  font-size: 11px; letter-spacing: .18em; color: var(--fg-faint);
  position: relative; z-index:1;
}
.do__art{
  display:block; width: 100%; max-width: 180px; height: auto; margin: 24px 0 28px;
  fill:none; stroke: var(--fg-dim); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  position: relative; z-index:1;
  transition: stroke .45s var(--ease);
}
.do__card:hover .do__art{ stroke: var(--accent-2); }
.do__art > *{
  stroke-dasharray: 300; stroke-dashoffset: 300;
  transition: stroke-dashoffset 1s var(--ease);
}
.do__card.is-live .do__art > *{ stroke-dashoffset: 0; }
.do__card.is-live .do__art > *:nth-child(2){ transition-delay: .07s }
.do__card.is-live .do__art > *:nth-child(3){ transition-delay: .14s }
.do__card.is-live .do__art > *:nth-child(4){ transition-delay: .21s }
.do__card.is-live .do__art > *:nth-child(5){ transition-delay: .28s }
.do__card.is-live .do__art > *:nth-child(6){ transition-delay: .35s }
.do__card.is-live .do__art > *:nth-child(7){ transition-delay: .42s }
.do__card.is-live .do__art > *:nth-child(8){ transition-delay: .49s }
.do__card.is-live .do__art > *:nth-child(9){ transition-delay: .56s }
.do__title{
  font-size: clamp(28px, 3.4vw, 40px); font-weight: 700; letter-spacing: -.02em;
  position: relative; z-index:1;
}
.do__desc{
  margin-top: 10px; color: var(--fg-dim); font-size: 15px; line-height: 1.6;
  max-width: 30ch; position: relative; z-index:1;
}

/* --- Kennzahlen unter den Fallstudien --- */
.exp-meta{
  display:flex; flex-wrap:wrap; gap: 28px; margin-top: 26px;
  justify-content: center;
}
.exp-meta li{ display:flex; flex-direction:column; gap: 4px; }
.exp-meta span{
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.exp-meta b{ font-size: 14px; font-weight: 500; color: #fff; }

/* --- Sonderwunsch unter den Preisen --- */
.pricing__custom{
  display:inline-flex; flex-direction:column; gap: 4px; margin-top: 22px;
  padding: 14px 24px; border: 1px solid var(--line); border-radius: 100px;
  transition: border-color .35s var(--ease), background .35s var(--ease);
}
.pricing__custom:hover{ border-color: rgba(244,244,241,0.4); background: rgba(244,244,241,0.05); }
.pricing__custom span{ font-size: 12px; color: var(--fg-faint); }
.pricing__custom b{ font-size: 15px; font-weight: 500; }

/* =========================================================
   WHY ARTAN LABS
========================================================= */
.why{ padding: clamp(100px, 16vh, 200px) 6vw; }
/* Linksbuendig, nicht zentriert - und das ist Absicht.

   Der Block steht auf einer Linie mit "Gebaut fuer das Web von morgen" im
   Tech-Abschnitt darunter: beide beginnen am Seitenrand von 6vw. Ich hatte
   ihn einmal zentriert, weil er wie das Karten-Raster aussah, dem die
   automatischen Raender fehlten. Beim Karten-Raster war es ein Versehen,
   hier nicht. */
.why__inner{ max-width: 1100px; }
.why__lead{
  font-size: clamp(34px, 6.5vw, 84px); font-weight: 700; line-height: 1.02;
  letter-spacing: -.035em; color: var(--fg-faint);
}
.why__lead span:last-child{ color: var(--fg); }
.why__list{ margin-top: clamp(48px, 8vh, 90px); display:grid; gap: 4px; }
.why__list li{
  display:flex; align-items: baseline; gap: clamp(16px, 3vw, 40px);
  padding: clamp(20px, 3vh, 32px) 0; border-top: 1px solid var(--line);
  font-size: clamp(22px, 3.6vw, 44px); font-weight: 600; letter-spacing: -.025em;
}
.why__list li:last-child{ border-bottom: 1px solid var(--line); }
.why__num{
  font-size: 12px; font-weight: 500; letter-spacing: .16em;
  color: var(--accent-2); flex-shrink: 0;
}

/* =========================================================
   HOW IT WORKS
========================================================= */
.process{ padding: clamp(90px, 14vh, 180px) 6vw; }
.process__heading{
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--fg-faint); margin-bottom: 28px;
}
.process__rail{
  height:1px; background: var(--line); max-width: 1200px;
  margin-bottom: clamp(36px, 6vh, 60px);
}
.process__rail span{
  display:block; height:100%; width:0;
  background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
}
.process__list{
  list-style: none;   /* die eigenen 01-04 genuegen, die des <ol> waeren doppelt */
  display:grid; gap: clamp(28px, 4vw, 44px);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  max-width: 1200px;
}
.step__num{
  font-size: 11px; letter-spacing: .18em; color: var(--accent-2);
}
.step__title{
  margin-top: 14px; font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 600; letter-spacing: -.02em;
}
.step__desc{ margin-top: 10px; color: var(--fg-dim); font-size: 15px; line-height: 1.65; }

/* =========================================================
   TECH
========================================================= */
.tech{ padding: clamp(90px, 14vh, 180px) 6vw; border-top: 1px solid var(--line); }
.tech__title{
  font-size: clamp(30px, 5.2vw, 68px); font-weight: 700;
  letter-spacing: -.035em; line-height: 1.05; max-width: 16ch;
}
.tech__grid{
  margin-top: clamp(44px, 7vh, 80px); display:grid; gap: clamp(28px, 4vw, 48px);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); max-width: 1200px;
}
.tech__item h3{ font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.tech__item p{ margin-top: 10px; color: var(--fg-dim); font-size: 15px; line-height: 1.65; }
.tech__stack{
  max-width: 1200px;
  margin-top: clamp(44px, 7vh, 80px); padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 12px; letter-spacing: .16em; color: var(--fg-faint);
}

@media (max-width: 600px){
  .do{ padding-left: 20px; padding-right: 20px; }
  .why, .process, .tech{ padding-left: 20px; padding-right: 20px; }
  .exp-meta{ gap: 18px; }
}
@media (prefers-reduced-motion: reduce){
  .do__art > *{ transition: none; stroke-dashoffset: 0; }
  .do__card{ transition: none; }
}

/* =========================================================
   Projektanfrage — qualifizierendes Kontaktformular

   Die Auswahl laeuft ueber echte Checkboxen und Radios, nur optisch ersetzt.
   Das kostet nichts und behaelt alles, was der Browser mitbringt:
   Tastaturbedienung, Vorlesen durch Hilfsmittel, Gruppierung im Formular.
========================================================= */
.inq{
  width: 100%; max-width: 760px; margin: clamp(40px, 7vh, 72px) auto 0;
  text-align: left; display: grid; gap: clamp(26px, 4vh, 38px);
}
.inq__block{ border: 0; padding: 0; }
.inq__block legend{
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--fg-faint); margin-bottom: 14px; padding: 0;
}
.inq__opts{ display:flex; flex-wrap: wrap; gap: 10px; }
.opt{
  position: relative; display:inline-flex; align-items:center;
  padding: 11px 20px; border: 1px solid var(--line); border-radius: 100px;
  font-size: 14px; color: var(--fg-dim); cursor: pointer;
  transition: border-color .3s var(--ease), color .3s var(--ease),
              background .3s var(--ease);
}
/* Das Kaestchen selbst wird nicht versteckt, sondern durchsichtig ueber das
   Feld gelegt - `display:none` nimmt es aus der Tastaturreihenfolge. */
.opt input{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; margin:0; cursor:pointer;
}
.opt:hover{ border-color: rgba(244,244,241,0.34); color: var(--fg); }
.opt:has(input:checked){
  border-color: var(--accent-2); color: var(--fg);
  background: rgba(53,225,255,0.10);
}
.opt:has(input:focus-visible){ outline: 2px solid var(--accent-2); outline-offset: 3px; }

.inq__fields{
  display:grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.fld{ display:grid; gap: 8px; }
.fld--wide{ grid-column: 1 / -1; }
.fld > span{
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--fg-faint);
}
.fld input, .fld textarea{
  width:100%; padding: 13px 16px; border-radius: 12px;
  border: 1px solid var(--line); background: rgba(244,244,241,0.04);
  color: var(--fg); font: inherit; font-size: 15px;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.fld textarea{ resize: vertical; min-height: 110px; line-height: 1.6; }
.fld input:focus, .fld textarea:focus{
  outline: none; border-color: var(--accent-2); background: rgba(244,244,241,0.07);
}
.inq__hint, .inq__privacy{ font-size: 13px; color: var(--fg-faint); line-height:1.6; }
.inq__hint{ margin-top: -10px; }

.inq__send{
  justify-self: start; padding: 15px 30px; border-radius: 100px; border:none;
  background: var(--fg); color: #0a0a0a; font: inherit; font-size: 15px;
  font-weight: 500; cursor: pointer;
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.inq__send:hover{ transform: translateY(-2px); }
.inq__send:disabled{ opacity:.45; cursor: not-allowed; transform:none; }
.inq__send:focus-visible{ outline: 2px solid var(--accent-2); outline-offset: 3px; }

.inq__status{ font-size: 14px; min-height: 1.2em; color: var(--fg-dim); }
.inq__status--bad{ color: #ff8f8f; }

.inq__done{
  max-width: 760px; margin: clamp(40px, 7vh, 72px) auto 0; text-align: left;
  display:grid; gap: 14px; justify-items: start;
  padding: 32px; border: 1px solid var(--line); border-radius: 18px;
  background: linear-gradient(180deg, rgba(53,225,255,0.07), transparent 70%);
}
.inq__doneTitle{ font-size: clamp(20px, 2.6vw, 26px); font-weight: 600; letter-spacing:-.02em; }
.inq__doneText{ color: var(--fg-dim); font-size: 15px; line-height: 1.65; }

@media (max-width: 600px){
  .inq__opts{ gap: 8px; }
  .opt{ padding: 10px 16px; font-size: 13px; }
  .inq__done{ padding: 24px 20px; }
}

/* =========================================================
   Rechtliche Seiten (Impressum)

   Eine eigene Seite statt eines Abschnitts auf der Startseite: Das
   Impressum muss "leicht erkennbar, unmittelbar erreichbar und staendig
   verfuegbar" sein. Am Ende einer Scrollstrecke mit gepinnten Videos ist
   es das nicht - ein Link in der Fusszeile schon.

   Die Seite laedt bewusst kein GSAP, kein Lenis, keinen Cursor: Wer hier
   landet, sucht eine Anschrift und will sie sofort sehen.
========================================================= */
/* Der eigene Mauszeiger wird von main.js bewegt - und das laedt hier
   nicht. `cursor:none` aus dem Grundstil liess deshalb gar keinen Zeiger
   uebrig: Man sah nichts und wusste nicht, worauf man klickt. Auf den
   rechtlichen Seiten gilt darum der gewoehnliche Zeiger. */
.legal-page, .legal-page *{ cursor: auto; }
.legal-page a,
.legal-page button,
.legal-page summary{ cursor: pointer; }
.legal-page{ background: var(--bg); }
.nav--solid{
  /* Ohne Bildhintergrund braucht die Leiste keine Differenzmischung -
     die wuerde die Schrift auf dunklem Grund unlesbar machen. */
  mix-blend-mode: normal;
  background: rgba(10,10,12,.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  padding: 18px 5vw;
}
.legal{ padding: 150px 5vw 100px; }
.legal__inner{ max-width: 1100px; margin-inline: auto; }
.legal__eyebrow{
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--fg-faint); margin-bottom: 14px;
}
.legal__title{
  font-size: clamp(2.6rem, 7vw, 5rem); font-weight: 800;
  letter-spacing: -.03em; line-height: 1; margin-bottom: clamp(40px, 7vh, 76px);
}
.legal__grid{
  display: grid; gap: clamp(32px, 5vw, 64px);
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  align-items: start;
}
.legal__h2{
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--fg-faint); margin: 34px 0 12px;
}
.legal__block > .legal__h2:first-child{ margin-top: 0; }
.legal__address{
  display: flex; flex-direction: column; gap: 3px;
  font-style: normal; font-size: 1.05rem; line-height: 1.6; color: var(--fg-dim);
}
.legal__name{ color: var(--fg); font-weight: 600; font-size: 1.25rem; margin-bottom: 4px; }
.legal__list{
  display: grid; grid-template-columns: auto 1fr; gap: 6px 22px;
  font-size: 1.02rem; line-height: 1.6;
}
.legal__list dt{ color: var(--fg-faint); }
.legal__list dd{ margin: 0; color: var(--fg-dim); }
.legal__text{ color: var(--fg-dim); font-size: 1rem; line-height: 1.65; max-width: 56ch; }
.legal__text--klein{ font-size: .92rem; margin-top: 14px; }
.legal a{ color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.legal a:hover{ color: var(--accent-2); }
/* Markiert, was noch eingetragen werden muss - faellt beim Durchlesen auf,
   statt als falsche Angabe stehen zu bleiben. */
.legal__todo{
  background: rgba(240,205,138,.14); border: 1px dashed rgba(240,205,138,.5);
  border-radius: 6px; padding: 1px 7px; color: #f0cd8a;
}
.legal__zurueck{ margin-top: clamp(50px, 8vh, 90px); font-size: .95rem; }

/* ---------- Karte ----------
   Google Maps bringt seinen eigenen hellen Stil mit. Der Farbfilter von
   vorher ist raus: Auf eine fremde Karte einen Filter zu legen, der ihre
   Beschriftungen mitdreht, macht sie schwerer lesbar - und der helle
   Ausschnitt setzt hier bewusst einen Akzent im dunklen Layout. */

@media (max-width: 600px){
  .legal{ padding: 120px 5vw 70px; }
  }

/* ---------- Fliesstext auf den rechtlichen Seiten ----------
   Schmaler als das zweispaltige Impressum: Eine Datenschutzerklaerung
   wird gelesen, nicht ueberflogen, und ueber 75 Zeichen pro Zeile
   verliert das Auge beim Ruecksprung die naechste. */
.legal__inner--text{ max-width: 760px; }
.legal__lead{
  font-size: 1.12rem; line-height: 1.65; color: var(--fg-dim);
  margin-bottom: 10px; max-width: 62ch;
}
.legal__inner--text .legal__h2{
  font-size: 13px; margin-top: 52px; color: var(--fg);
  letter-spacing: .16em;
}
.legal__ul{
  color: var(--fg-dim); font-size: 1rem; line-height: 1.7;
  margin: 4px 0 0; padding-left: 20px; max-width: 62ch;
}
.legal__ul li{ margin-bottom: 6px; }
.legal__ul strong{ color: var(--fg); font-weight: 600; }
.legal code{
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: .9em; background: rgba(244,244,241,.07);
  border-radius: 5px; padding: 1px 6px;
}
/* Hervorhebung fuer den einen Satz, der wirklich gelesen werden soll. */
.legal__box{
  border: 1px solid rgba(53,225,255,.3); border-left-width: 3px;
  background: rgba(53,225,255,.06); border-radius: 12px;
  padding: 16px 20px; margin: 18px 0 4px;
  color: var(--fg-dim); font-size: .98rem; line-height: 1.6; max-width: 62ch;
}
.legal__box strong{ color: var(--fg); display:block; margin-bottom: 4px; }

/* Die Tabelle darf auf dem Telefon scrollen - umbrechen wuerde die
   Zuordnung von Frist und Datenart zerreissen. */
.legal__tabelle-wrap{ overflow-x: auto; margin-top: 8px; }
.legal__tabelle{
  border-collapse: collapse; width: 100%; min-width: 460px;
  font-size: .96rem;
}
.legal__tabelle th, .legal__tabelle td{
  text-align: left; padding: 11px 16px 11px 0;
  border-bottom: 1px solid var(--line);
}
.legal__tabelle th{
  color: var(--fg-faint); font-weight: 500; font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase;
}
.legal__tabelle td{ color: var(--fg-dim); }
.legal__tabelle td:first-child{ color: var(--fg); }


/* Die Fehlerseite. Eigene Klasse statt style="..." im Markup: Die
   Inhaltsrichtlinie laesst kein 'unsafe-inline' zu, und ein
   style-Attribut waere genau das. Siehe deploy/LIVEGANG.md. */
.vier__wege{ margin-top: 40px; color: var(--fg-dim); }