/* ======================================================================
   software.css — Unterseite "SaaS & individuelle Software"
   DUNKLE WELT. Die Drei-Welten-Strategie trennt nach Zielgruppe:
   /websites hell und redaktionell (lokale Betriebe), /software dunkel und
   technisch (Leute, die Systeme kaufen). Gleiches Chassis — Geist, Cyan,
   Logo, Nav, Footer —, andere Farbtemperatur und Dichte.

   Drei Regeln, die diese Datei durchziehen:
   1. KEINE Mittelachse. Jede Sektion sitzt in einem versetzten Raster mit
      Nummernspalte links; Überschrift links, Subline rechts daneben.
   2. KEINE Kästen. Struktur entsteht durch Haarlinien und Abstand, nicht
      durch gerahmte Karten. Rahmen gibt es nur da, wo etwas wirklich ein
      eigenes Objekt ist (Geräte, Screens).
   3. Das Helle sind die Screenshots. Sie leuchten aus dem dunklen Grund —
      das Produkt ist der Held, nicht der Hintergrund.

   Bewusst eigenständig (kein Import von websites.css): die Websites-Seite
   wird parallel weitergebaut, geteilte Dateien wären eine Kollisionsquelle.
   ====================================================================== */
@font-face{font-family:Geist;src:url(/assets/fonts/geist-sans.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(/assets/fonts/geist-mono.woff2) format("woff2");font-weight:100 900;font-display:swap}

:root{
  /* Palette 1:1 aus der Startseite — damit die Seiten als eine Familie lesen */
  --navy:#020914; --raised:#07111f; --raised2:#0b1728;
  --paper:#f5f8fc; --muted:#aeb9c7; --dim:#7f8fa3;
  --line:rgba(174,185,199,.15); --line-2:rgba(174,185,199,.28);
  --cyan:#19bff4; --cyan-soft:rgba(25,191,244,.13);
  --fox:#f2801f; --fox-soft:rgba(242,128,31,.14);
  --page:clamp(22px,5vw,80px);
  --wrap:1240px;
  /* Der Versatz, der die Mittelachse bricht: Nummernspalte links,
     Inhalt beginnt dahinter. Unter 900px fällt er auf 0. */
  --indent:clamp(0px,7vw,132px);
}
/* Querformat auf dem Handy: die Aussparung (Notch) liegt dann seitlich, nicht
   oben. Ohne diese Reserve laeuft Text unter die Kamera bzw. unter die runde
   Ecke. Beide Seiten bekommen denselben Wert — das haelt die Seite symmetrisch,
   auch wenn nur eine Seite betroffen ist. */
@media(orientation:landscape){
  :root{--page:max(clamp(22px,5vw,80px),env(safe-area-inset-left,0px),env(safe-area-inset-right,0px))}
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--navy)}
body.soft{margin:0;background:var(--navy);color:var(--paper);counter-reset:sec;
  font-family:Geist,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{margin:0}
/* Rueckfall, falls site-nav.js nicht laeuft: die schwebende Pille verdeckt sonst
   jedes Sprungziel. Mit JS gilt der genauere Wert aus site-nav.css. */
[id]{scroll-margin-top:96px}
.skip{position:absolute;left:-999px;top:auto}
.skip:focus{left:16px;top:16px;z-index:99;padding:10px 16px;background:var(--cyan);color:#00202e;border-radius:8px;font-weight:700}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---- Bausteine ---- */
.eyebrow{margin:0 0 16px;font:700 .76rem/1 "Geist Mono",monospace;letter-spacing:.16em;
  text-transform:uppercase;color:var(--cyan)}
.web-btn{display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 26px;border-radius:10px;
  background:var(--cyan);color:#00202e;font-weight:700;font-size:1rem;text-decoration:none;border:0;cursor:pointer;
  transition:transform .15s ease,background-color .15s ease,box-shadow .18s ease}
.web-btn:hover{transform:translateY(-1px);background:#43ccfb;box-shadow:0 14px 34px rgba(25,191,244,.34)}
.web-btn--lg{height:58px;padding:0 34px;font-size:1.06rem}
.web-link{display:inline-flex;align-items:center;gap:8px;color:var(--cyan);font-weight:640;text-decoration:none}
.web-link::after{content:"→";transition:transform .2s ease}
.web-link:hover::after{transform:translateX(4px)}
.web-link--fox{color:var(--fox)}

:where(a,button,summary,[tabindex]):focus-visible{outline:2.5px solid var(--cyan);outline-offset:3px;border-radius:5px}
.web-btn:focus-visible{outline-offset:4px}
.faq__item summary:focus-visible{outline-offset:-2px}

/* Die Kopfnavigation liegt in site-nav.css (.pillnav / .dotrail) — gemeinsam
   fuer alle Seiten. Hier steht nur noch, was diese Seite faerbt. */

/* ======================================================================
   HERO — Konstruktionsraster auf Nachtgrund, Produkt-Deck aus echten Screens
   ====================================================================== */
.lab{position:relative;min-height:100svh;overflow:hidden;
  display:grid;grid-template-columns:.78fr 1.22fr;gap:clamp(24px,3vw,56px);align-items:center;
  /* Die Kopfleiste liegt fest ueber dem Hero — ohne diese Reserve rutscht der
     Eyebrow bei kurzen Fenstern darunter. */
  padding:calc(var(--nav-hoehe,80px) + clamp(16px,2.6vw,44px)) var(--page) clamp(56px,7vw,96px);
  background:
    radial-gradient(1100px 700px at 78% 14%,rgba(25,191,244,.20),transparent 62%),
    radial-gradient(700px 480px at 8% 90%,rgba(25,191,244,.07),transparent 66%),
    linear-gradient(180deg,#020914 0%,#04101f 58%,#020914 100%)}
/* Das Raster ist kein Dekor: es ist die Bildsprache von "gebaut, nicht gekauft".
   Maske laesst es zur Textspalte hin auslaufen, damit es nie gegen Schrift arbeitet. */
.lab__grid{position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(to right,rgba(125,180,220,.13) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(125,180,220,.13) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(118% 96% at 74% 40%,#000 6%,rgba(0,0,0,.5) 44%,transparent 76%);
  mask-image:radial-gradient(118% 96% at 74% 40%,#000 6%,rgba(0,0,0,.5) 44%,transparent 76%)}
.lab__glow{position:absolute;right:-8%;top:-14%;width:62%;height:74%;z-index:0;pointer-events:none;
  background:radial-gradient(closest-side,rgba(25,191,244,.22),transparent 72%);filter:blur(10px)}
/* Das lebende Raster liegt als Canvas ueber dem statischen. software.js legt es
   nur an, wenn es auch animieren darf (Zeigergeraet, keine reduzierte Bewegung);
   erst dann verschwindet die CSS-Fassung. Ohne JS bleibt das statische Raster —
   die Seite sieht dann genauso aus, nur ohne Reaktion. */
/* Weichere, weiter nach links reichende Maske als beim statischen Raster: das
   Verdraengen soll auch in der offenen Flaeche neben der Textspalte sichtbar
   sein, nicht nur unter dem Karten-Stapel. */
.lab__mesh{position:absolute;inset:0;z-index:0;pointer-events:none;
  -webkit-mask-image:radial-gradient(132% 108% at 66% 44%,#000 14%,rgba(0,0,0,.66) 54%,transparent 86%);
  mask-image:radial-gradient(132% 108% at 66% 44%,#000 14%,rgba(0,0,0,.66) 54%,transparent 86%)}
.lab.has-mesh .lab__grid{display:none}
.lab__text,.deck{position:relative;z-index:1}
.lab__text{max-width:540px}
.lab__text h1{margin:0 0 20px;font-size:clamp(2.3rem,4.1vw,3.7rem);line-height:1.02;letter-spacing:-.04em;font-weight:720}
.h1promise{display:block;font-size:.44em;font-weight:600;color:var(--muted);letter-spacing:-.01em;line-height:1.15;margin-top:.5em}
.lead{margin:0 0 28px;max-width:44ch;font-size:clamp(1.04rem,1.3vw,1.18rem);line-height:1.6;color:var(--muted)}
.cta-row{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
/* Zusagen als Mono-Zeilen mit Bindestrich statt Haekchen-Badges: technischer,
   ruhiger, und sie konkurrieren nicht mit dem cyan des Buttons. */
.trustmarks{display:flex;flex-direction:column;gap:8px;margin:28px 0 0;padding:0;list-style:none}
.trustmarks li{display:flex;align-items:baseline;gap:12px;font-size:.88rem;color:var(--muted)}
.trustmarks li::before{content:"—";flex:0 0 auto;color:var(--cyan);font-weight:700}

/* Handgezeichneter Marker — auf Nachtgrund deutlich kraeftiger als im Hellen,
   sonst verschwindet er unter der weissen Schrift. */
.hl,.mark{position:relative;z-index:0;white-space:nowrap}
.hl::after,.mark::after{content:"";position:absolute;left:-.05em;right:-.11em;bottom:.04em;height:.32em;z-index:-1;
  background:var(--cyan);opacity:.52;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 40' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M3 13C6 9.5 12 7.8 20 7.5 33 7 44 5.8 55 5.2 70 4.4 82 3.4 95 3 112 2.5 126 4 140 4.4 156 4.8 170 3 185 2.6 202 2.2 216 3.6 230 4 244 4.4 256 2.9 268 2.6 280 3.4 290 5.4 297.4 8.2C299.4 11.6 298.4 16.4 299.5 20.8C299.9 24.4 298.6 28.6 296.8 31.6C288 34.6 276 36.4 264 37 242 38 218 36.3 194 37.1 170 37.9 148 36.2 124 37 100 37.8 78 36.3 56 35.7 42 35.2 30 33.2 20 32 12 31 6 29.5 3 27Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 40' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M3 13C6 9.5 12 7.8 20 7.5 33 7 44 5.8 55 5.2 70 4.4 82 3.4 95 3 112 2.5 126 4 140 4.4 156 4.8 170 3 185 2.6 202 2.2 216 3.6 230 4 244 4.4 256 2.9 268 2.6 280 3.4 290 5.4 297.4 8.2C299.4 11.6 298.4 16.4 299.5 20.8C299.9 24.4 298.6 28.6 296.8 31.6C288 34.6 276 36.4 264 37 242 38 218 36.3 194 37.1 170 37.9 148 36.2 124 37 100 37.8 78 36.3 56 35.7 42 35.2 30 33.2 20 32 12 31 6 29.5 3 27Z'/%3E%3C/svg%3E");
  -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
/* Der Strich faengt das Licht, wenn das Raster genau ueber ihm auseinandergeht.
   --hlg (0..1) kommt aus software.js. box-shadow geht hier NICHT: die Form
   entsteht ueber eine Maske, also muss es drop-shadow sein. Die Unschaerfe ist
   fest, nur die Deckkraft faehrt hoch — das spart die Neuberechnung der
   Filtergeometrie in jedem Bild. */
/* Drei Schichten statt zwei, und der Radius WAECHST mit der Naehe statt nur die
   Deckkraft hochzufahren — vorher stand der Hof sofort in voller Groesse da und
   wurde blass ein- und ausgeblendet, was wie eine geschaltete Lampe aussah.
   Echtes Licht breitet sich aus: innen ein enger, fast weisser Kern, darum
   Cyan, aussen ein weiter Dunst. Bei --hlg = 0 sind alle Deckkraefte 0, es
   kostet also nichts, solange niemand in der Naehe ist. */
.hl::after{
  /* Kurz halten: die eigentliche Weichheit macht inzwischen die Daempfung im JS.
     Eine lange Transition darueber addierte nur Verzoegerung — genau das, was
     den Strich "verspaetet" wirken liess. */
  transition:opacity .12s linear,filter .12s linear;
  opacity:calc(.5 + var(--hlg,0) * .5);
  filter:
    drop-shadow(0 0 calc(2px  + var(--hlg,0) * 5px)  rgba(150,232,255,calc(var(--hlg,0) * .95)))
    drop-shadow(0 0 calc(6px  + var(--hlg,0) * 17px) rgba(25,191,244,calc(var(--hlg,0) * .8)))
    drop-shadow(0 0 calc(14px + var(--hlg,0) * 42px) rgba(25,191,244,calc(var(--hlg,0) * .48)))}
@media(prefers-reduced-motion:reduce){.hl::after{transition:none}}

/* ---- Produkt-Deck ---- */
.deck{justify-self:end;width:min(100%,55vw,1020px)}
.deck__stack{position:relative;aspect-ratio:16/10.2}
.deck__card{position:absolute;inset:0;margin:0;display:flex;flex-direction:column;overflow:hidden;
  border-radius:13px;background:#0b1422;
  box-shadow:0 48px 90px -34px rgba(0,0,0,.85),0 0 0 1px rgba(174,185,199,.14);
  transition:transform .75s cubic-bezier(.3,.82,.24,1),opacity .55s ease,filter .55s ease;will-change:transform}
.deck__card[data-pos="0"]{transform:none;opacity:1;filter:none;z-index:3}
.deck__card[data-pos="1"]{transform:translate(5.4%,-6.6%) scale(.94);opacity:.9;filter:saturate(.85) brightness(.82);z-index:2}
.deck__card[data-pos="2"]{transform:translate(10.8%,-12.8%) scale(.885);opacity:.66;filter:saturate(.6) brightness(.66);z-index:1}
.deck__bar{display:flex;align-items:center;gap:7px;flex:0 0 auto;height:32px;padding:0 13px;background:#060e1a}
.deck__bar i{width:9px;height:9px;border-radius:50%;background:#233549;flex:0 0 auto}
.deck__bar em{margin-left:10px;font-style:normal;font-size:.74rem;color:#93a8bd;font-family:"Geist Mono",monospace;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.deck__bar b{margin-left:auto;flex:0 0 auto;padding:3px 9px;border-radius:11px;font-size:.65rem;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:#04222f;background:var(--acc,var(--cyan))}
.deck__card img{flex:1 1 auto;width:100%;height:100%;min-height:0;object-fit:cover;object-position:top left}
.deck__phone{position:absolute;left:-4.5%;bottom:clamp(-72px,-15%,-44px);z-index:4;margin:0;
  width:clamp(94px,10.5vw,146px);
  padding:5px;border-radius:22px;background:#0b1422;
  box-shadow:0 34px 60px -24px rgba(0,0,0,.9),0 0 0 1px rgba(174,185,199,.16);
  transition:opacity .45s ease,transform .45s cubic-bezier(.3,.82,.24,1)}
.deck__phone img{border-radius:17px}
/* Das Handy zeigt einen FlowSNX-Screen — vor einer FeeFox-Karte waere es doppelt
   falsch: es verdeckt deren Headline und behauptet die falsche Marke. */
.deck.is-fox .deck__phone{opacity:0;transform:translateY(16px);pointer-events:none}
/* Pfeile: bewusst dieselbe Form, Groesse und Position wie auf /websites.html —
   wer dort einmal geblaettert hat, erkennt sie hier wieder. Sie liegen halb
   ueber der Karte, damit sie auch bei voller Breite im Bild bleiben. */
/* Zwei Schatten statt einem: der enge zieht eine dunkle Kante um die weisse
   Form, der weite hebt sie vom Bild ab. Ohne den engen verschwindet der Pfeil
   ueber hellen Stellen eines Screenshots. */
.deck__arrow{position:absolute;z-index:6;top:50%;transform:translateY(-50%);width:44px;height:44px;
  border:0;background:none;padding:0;cursor:pointer;display:grid;place-items:center;
  filter:drop-shadow(0 0 1.5px rgba(2,9,20,.95)) drop-shadow(0 3px 9px rgba(2,9,20,.7));
  -webkit-tap-highlight-color:transparent;
  transition:transform .16s ease,filter .16s ease,opacity .2s ease}
.deck__arrow svg{width:27px;height:27px}
.deck__arrow svg path{fill:#fff;stroke:#fff;stroke-width:1.4;stroke-linejoin:round}
.deck__arrow--l{left:-14px}
.deck__arrow--r{right:-14px}
.deck__arrow:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:6px}
/* Ab zwei Spalten steht das Handybild links ueber der Karte, und seine
   Oberkante liegt gemessen 8 bis 11px in der Mitte der Karte — genau dort, wo
   der linke Pfeil sitzt. Beide Pfeile ruecken deshalb ein Stueck hoch: das
   raeumt die Ueberschneidung und bleibt symmetrisch. */
@media(min-width:1001px){.deck__arrow{top:calc(50% - 20px)}}
@media(hover:hover){
  /* Auf dem Zeigergeraet zurueckhaltend, bis jemand ins Deck faehrt. */
  .deck__arrow{opacity:.8}
  .deck:hover .deck__arrow,.deck__arrow:focus-visible{opacity:1}
  .deck__arrow:hover{transform:translateY(-50%) scale(1.16);
    filter:drop-shadow(0 0 1.5px rgba(2,9,20,.95)) drop-shadow(0 4px 12px rgba(2,9,20,.8))}
}
@media(prefers-reduced-motion:reduce){.deck__arrow{transition:none}}
.deck__nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:clamp(60px,5.8vw,88px) 0 0;
  padding-left:clamp(0px,4vw,64px)}
.deck__tab{height:34px;padding:0 14px;border-radius:17px;border:1px solid var(--line-2);background:transparent;
  color:var(--muted);font:600 .82rem/1 Geist,sans-serif;cursor:pointer;
  transition:background .16s,color .16s,border-color .16s;-webkit-tap-highlight-color:transparent}
.deck__tab:hover{border-color:var(--cyan);color:var(--paper)}
.deck__tab[aria-selected="true"]{background:var(--cyan);border-color:var(--cyan);color:#00202e}
.deck__live{margin-left:6px;font-size:.84rem}

@media(max-width:1000px){
  /* padding-top MUSS die Kopfleiste weiter freihalten. Ein fester Wert (frueher
     52px) ist kleiner als die Leiste (64px auf dem Handy) — der Eyebrow lief
     damit unter das Logo. */
  .lab{grid-template-columns:1fr;gap:clamp(34px,7vw,46px);align-items:start;min-height:0;
    padding-top:calc(var(--nav-hoehe,80px) + clamp(26px,6vw,48px))}
  .lab__text{max-width:640px}
  .deck{width:100%;justify-self:stretch}
  /* Das Handybild sass hier rechts ueber der Karte — genau dort, wo jetzt der
     Pfeil liegt. Zwei Dinge an derselben Stelle: das bedienbare gewinnt. */
  .deck__phone{display:none}
  /* Einspaltig steht das Deck ueber die volle Breite. Die versetzten Ruecken
     des Stapels ragten dabei rechts aus dem Hero heraus und wurden dort
     abgeschnitten — es sah nach Fehler aus, nicht nach Stapel. Deshalb ab hier
     nur die aktive Karte, dafuer das Bild ganz statt angeschnitten. */
  .deck__stack{aspect-ratio:16/10.4}
  .deck__card[data-pos="1"],.deck__card[data-pos="2"]{transform:none;opacity:0;filter:none;pointer-events:none}
  .deck__card img{object-fit:contain;object-position:center;background:#0b1422}
  .deck__nav{padding-left:0;margin-top:clamp(26px,5vw,44px)}
}
@media(max-width:600px){
  .lab__text h1{line-height:1.06;letter-spacing:-.03em}
  .h1promise{margin-top:.62em}
  .lead{margin-bottom:24px}
  /* Der Hero trug auf dem Handy sieben Ebenen uebereinander: Eyebrow, Zeile,
     Versprechen, Absatz, zwei Knoepfe nebeneinander, drei Zusagen — und erst
     dann das Produkt. Erklaerung, Abschluss und Vertrauen haben sich dabei
     gegenseitig geschwaecht. Hier wird verdichtet, nicht weggelassen:
     Knoepfe untereinander, Zusagen in eine Zeile, die dritte entfaellt. */
  .lab .cta-row{flex-direction:column;align-items:stretch;gap:14px}
  .lab .cta-row .web-btn{width:100%}
  .lab .cta-row .web-link{align-self:flex-start}
  .web-link--runter::after{content:"↓"}          /* der Sprung geht nach unten, nicht zur Seite */
  .lab .trustmarks{flex-direction:row;flex-wrap:wrap;gap:4px 12px;margin-top:22px}
  .lab .trustmarks li{gap:8px;font-size:.82rem}
  /* Trenner ans ENDE der ersten Zusage, nicht an den Anfang der zweiten:
     bricht die Zeile um, haengt der Punkt hinten an — davor stuende er
     alleine am Zeilenanfang und saehe nach Fehler aus. */
  .lab .trustmarks li::before{content:none}
  .lab .trustmarks li:first-child::after{content:"·";margin-left:8px;color:var(--cyan);font-weight:700}
  .lab .trustmarks__weit{display:none}
  /* Die Beschriftungen brachen auf drei Zeilen um und beanspruchten 72px fuer
     eine Navigation, die neben den Pfeilen zweitrangig geworden ist. Auf dem
     Handy bleiben Punkte — welches Produkt vorne liegt, sagt ohnehin die
     Kopfzeile der Karte. Der Text bleibt im Markup und damit im Vorlesenamen. */
  .deck__nav{gap:0;margin-top:clamp(20px,4.5vw,30px)}
  .deck__tab{position:relative;width:28px;height:28px;padding:0;border:0;background:none;
    border-radius:50%;overflow:hidden;white-space:nowrap;text-indent:150%}
  .deck__tab[aria-selected="true"]{background:none;border:0}
  .deck__tab::before{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;
    margin:-4px 0 0 -4px;border-radius:50%;background:var(--line-2);
    transition:background-color .24s ease,box-shadow .24s ease,transform .24s ease}
  .deck__tab[aria-selected="true"]::before{background:var(--cyan);transform:scale(1.2);
    box-shadow:0 0 0 4px var(--cyan-soft)}
  .deck__live{margin-left:14px}
  /* Handy: nur die aktive Karte. Die versetzten Ruecken ragten ueber den
     rechten Rand hinaus, wurden dort abgeschnitten und sahen nach Fehler aus. */
  /* 16/11.6: so hoch, dass auch das hochformatigste Bild (FeeFox, 1.6:1) die
     volle Kartenbreite bekommt statt links und rechts abzusetzen. Auf 350px
     zaehlt jeder Pixel Breite. */
  .deck__stack{aspect-ratio:16/11.6}
}
/* Handy im Querformat: rund 390px Hoehe insgesamt, davon gingen allein 128px
   fuer Kopfleiste plus Reserve drauf — ein Drittel des Bildes, bevor ein Wort
   steht. Auf kurzen Schirmen reicht ein Bruchteil davon. Greift bewusst ueber
   die Hoehe, nicht ueber die Orientierung: ein kurzes Browserfenster auf dem
   Rechner hat dasselbe Problem. */
@media(max-height:560px) and (min-width:601px){
  .lab{padding-top:calc(var(--nav-hoehe,80px) + 18px);padding-bottom:clamp(30px,6vh,56px);
    gap:clamp(22px,4vw,34px)}
  .lead{margin-bottom:20px}
  .trustmarks{margin-top:18px}
}
/* Unter ~430px passen die beiden Zusagen nicht mehr in eine Zeile. Dann ohne
   Trenner: zwei ruhige Zeilen lesen sich besser als eine mit einem Punkt, der
   am Zeilenende haengt und auf nichts mehr zeigt. */
@media(max-width:430px){
  .lab .trustmarks{gap:4px 16px}
  .lab .trustmarks li:first-child::after{content:none}
}
@media(prefers-reduced-motion:reduce){.deck__card,.deck__phone{transition:none}}

/* ======================================================================
   SEKTIONEN — versetztes Raster statt Mittelachse
   Die Nummer kommt aus einem CSS-Counter: kein Markup, keine Handpflege,
   und sie stimmt automatisch, wenn eine Sektion dazukommt oder wegfaellt.
   ====================================================================== */
.band{position:relative;padding:clamp(64px,8vw,124px) var(--page);border-top:1px solid var(--line)}
.band--raised{background:var(--raised)}

.sec-head,.sec-head--left{counter-increment:sec;position:relative;max-width:var(--wrap);
  margin:0 auto clamp(38px,4.6vw,64px);padding-left:var(--indent);text-align:left;
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:8px clamp(20px,4vw,60px);
  align-items:start}
/* Laufende Nummer in der freien Spalte links — der sichtbare Beweis, dass die
   Seite ein System hat und nicht eine Aneinanderreihung von Bloecken ist. */
.sec-head::before{content:counter(sec,decimal-leading-zero);position:absolute;left:0;top:.15em;
  font:700 .82rem/1 "Geist Mono",monospace;letter-spacing:.08em;color:var(--cyan);opacity:.85}
@media(max-width:900px){.sec-head::before{position:static;display:block;margin-bottom:10px}}
.sec-head .eyebrow{grid-column:1/-1;margin-bottom:6px}
.sec-head h2{grid-column:1;margin:0;font-size:clamp(2rem,3.7vw,3.05rem);line-height:1.03;
  letter-spacing:-.035em;font-weight:720;text-wrap:balance}
.sec-sub{grid-column:2;margin:.55em 0 0;font-size:clamp(1rem,1.2vw,1.1rem);color:var(--muted);
  line-height:1.6;text-wrap:pretty}
@media(max-width:900px){
  .sec-head,.sec-head--left{grid-template-columns:1fr;gap:14px}
  .sec-head h2,.sec-sub{grid-column:1}
  .sec-sub{margin-top:0}
}

/* Gemeinsame Inhaltsspur: alles rueckt um --indent ein, nichts sitzt mittig */
.track{max-width:var(--wrap);margin:0 auto;padding-left:var(--indent)}

/* ---- Scroll-Reveal ----
   Armiert per JS (html.rv-on): ohne JS bleibt alles sichtbar. Bewusst knapp
   dosiert — 10px und 0.6s, das liest sich als Ruhe, nicht als Effekt. */
.rv-on .rv{opacity:0;transform:translateY(10px)}
@media(prefers-reduced-motion:no-preference){
  .rv-on .rv{transition:opacity .6s cubic-bezier(.22,.7,.3,1),transform .6s cubic-bezier(.22,.7,.3,1);
    transition-delay:var(--rvd,0ms)}
}
.rv-on .rv.is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv-on .rv{opacity:1;transform:none}}

/* ======================================================================
   EIGENE PRODUKTE
   ====================================================================== */
.prods{background:var(--navy)}
/* align-items:start, nicht center: sonst haengt die Screenspalte mittig und
   reisst ein Loch zwischen Sektionskopf und Bild. So beginnen Bild und Text
   auf derselben Linie — das liest sich als Raster, nicht als Zufall. */
.prod{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(30px,5vw,72px);align-items:start;
  max-width:var(--wrap);margin:0 auto clamp(64px,8vw,110px);padding-left:var(--indent)}
.prod:last-of-type{margin-bottom:0}
.prod--flip .prod__media{order:2}
.prod__media{position:relative;min-width:0}
.shots{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.4vw,16px)}
.shots .mock:first-child{grid-column:1/-1}
/* Screens sind Objekte — sie duerfen einen Rahmen haben. Alles andere nicht. */
.mock{margin:0;border-radius:12px;overflow:hidden;background:#0b1422;
  box-shadow:0 40px 80px -34px rgba(0,0,0,.9),0 0 0 1px rgba(174,185,199,.13)}
.mock__bar{display:flex;align-items:center;gap:7px;height:32px;padding:0 13px;background:#060e1a}
.mock__bar i{width:9px;height:9px;border-radius:50%;background:#233549}
.mock__bar em{margin-left:10px;font-style:normal;font-size:.73rem;color:#93a8bd;font-family:"Geist Mono",monospace;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.mock--crop img{aspect-ratio:16/9;object-fit:cover;object-position:top left}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  .mock{transition:transform .45s cubic-bezier(.22,.7,.3,1),box-shadow .45s cubic-bezier(.22,.7,.3,1)}
  .prod:hover .shots .mock:first-child{transform:translateY(-6px);
    box-shadow:0 54px 96px -34px rgba(0,0,0,.95),0 0 0 1px rgba(25,191,244,.28)}
}
.prod__tag{margin:0 0 12px;font:700 .74rem/1 "Geist Mono",monospace;letter-spacing:.14em;
  text-transform:uppercase;color:var(--acc,var(--cyan));opacity:.9}
.prod__body h3{margin:0 0 10px;font-size:clamp(1.8rem,3vw,2.5rem);letter-spacing:-.03em;font-weight:720}
.prod__body > p{margin:0;color:var(--muted);line-height:1.65;font-size:1.05rem}
/* Statuszeile: ein Produkt in Entwicklung darf so aussehen — solange es dransteht */
/* Selektor MUSS `.prod__body > p` schlagen (dort steht margin:0), sonst klebt die
   Statuszeile am Fliesstext. */
/* line-height 1.35 statt 1: auf schmalen Schirmen bricht die Statuszeile um
   ("In der Beta · direkter deutscher Support"), mit 1 klebten die Zeilen. */
.prod__body > p.prod__status{display:inline-flex;align-items:center;gap:9px;margin:0 0 18px;padding:0;
  color:var(--acc,var(--cyan));font:600 .84rem/1.35 "Geist Mono",monospace;letter-spacing:.04em}
.prod__status::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--acc,var(--cyan));flex:0 0 auto;
  box-shadow:0 0 0 4px var(--acc-soft,var(--cyan-soft))}
.prod__points{margin:24px 0 0;padding:0;list-style:none;display:grid;gap:0}
.prod__points li{position:relative;padding:11px 0 11px 26px;border-top:1px solid var(--line);
  color:var(--paper);font-size:.99rem;line-height:1.5}
.prod__points li:last-child{border-bottom:1px solid var(--line)}
.prod__points li::before{content:"";position:absolute;left:2px;top:1.15em;width:7px;height:7px;
  transform:rotate(45deg);background:var(--acc,var(--cyan))}
/* Kein Kasten: eine Cyan-Kante links, mehr braucht ein Einschub nicht */
.prod__for{margin:24px 0 0;padding:2px 0 2px 18px;border-left:2px solid var(--acc,var(--cyan));
  color:var(--muted);font-size:.96rem;line-height:1.6}
.prod__for b{color:var(--paper);font-weight:680}
.prod__foot{display:flex;align-items:center;gap:10px 22px;flex-wrap:wrap;margin-top:24px}
.prod__note{margin:14px 0 0;color:var(--dim);font-size:.87rem;line-height:1.55;max-width:54ch}
.prod--fox{--acc:var(--fox);--acc-soft:var(--fox-soft)}

/* Schema-Panel (FeeFox: Zustand NACH der Zuordnung) */
.scr{border-radius:12px;padding:16px 17px;background:var(--raised2);
  font-family:"Geist Mono",monospace;font-size:.74rem;line-height:1.5;color:#93a8bd;
  box-shadow:inset 0 0 0 1px rgba(174,185,199,.12)}
.prod__media .scr{margin-top:clamp(10px,1.4vw,16px)}
.scr__head{display:flex;align-items:center;gap:7px;margin:0 0 12px;font-size:.65rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim)}
.scr__head::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cyan);flex:0 0 auto}
.prod--fox .scr__head::before{background:var(--fox)}
.scr__q{color:var(--paper);white-space:normal;overflow-wrap:anywhere}
.scr__a{color:var(--cyan)}
.prod--fox .scr__a{color:var(--fox)}
.scr__row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:6px 0;
  border-bottom:1px dashed rgba(174,185,199,.14)}
.scr__row:last-of-type{border-bottom:0}
.scr__row b{color:var(--paper);font-weight:600;white-space:nowrap}
.scr__row span{color:var(--dim);min-width:0;overflow-wrap:anywhere}
.scr__foot{margin:12px 0 0;font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:#5d6f83}

/* ======================================================================
   INDIVIDUELLE SOFTWARE — Haarlinienraster statt Kartenkasten
   ====================================================================== */
.tools{background:var(--raised)}
.tools__meta{display:flex;align-items:baseline;gap:14px 20px;flex-wrap:wrap;max-width:var(--wrap);
  margin:0 auto clamp(30px,3.4vw,44px);padding-left:var(--indent);
  color:var(--muted);font-size:.95rem;line-height:1.6}
.tools__badge{flex:0 0 auto;display:inline-flex;align-items:center;gap:9px;
  color:var(--cyan);font:700 .86rem/1 "Geist Mono",monospace;letter-spacing:.06em}
.tools__badge::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--cyan);
  box-shadow:0 0 0 4px var(--cyan-soft)}
/* ---- Leitfunktion --------------------------------------------------------
   Vier gleich grosse Kacheln behaupten, dass vier Dinge gleich wichtig sind.
   Sie sind es nicht: der Assistent ist der Grund, warum die App gebaut wurde,
   die Ersatzteilsuche ist Beiwerk. Die Sektion hat deshalb jetzt drei
   Groessenstufen — zwei ganze Bahnen, dann eine knappe Doppelspalte. */
/* Medienspalte etwas breiter als der Text: der Screenshot ist hier das
   Argument, nicht die Illustration. Bei 50/50 kam er auf 430px und war damit
   kleiner als die Kachelbilder weiter oben. */
.leit{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(30px,4.4vw,64px);align-items:center;
  max-width:var(--wrap);margin:0 auto;padding-left:var(--indent)}
/* Haarlinie NUR zwischen den Bahnen, nicht als Kasten drumherum. */
.leit + .leit{margin-top:clamp(54px,7vw,100px);padding-top:clamp(54px,7vw,100px);
  border-top:1px solid var(--line)}
.leit--flip .leit__media{order:-1}
.leit__claim{margin:14px 0 6px;color:var(--cyan);font:620 .95rem/1.4 Geist,sans-serif}
.leit__body h3{margin:0 0 16px;font-size:clamp(1.55rem,2.9vw,2.35rem);letter-spacing:-.032em;
  line-height:1.08;font-weight:700}
.leit__body > p{margin:0;color:var(--muted);line-height:1.68;font-size:1.02rem}
.leit__punkte{margin:26px 0 0;padding:0;list-style:none;display:grid}
.leit__punkte li{position:relative;padding:13px 0 13px 28px;border-top:1px solid var(--line);
  color:var(--muted);line-height:1.55;font-size:.99rem}
.leit__punkte li:last-child{border-bottom:1px solid var(--line)}
.leit__punkte li::before{content:"";position:absolute;left:2px;top:1.35em;width:8px;height:8px;
  transform:rotate(45deg);background:var(--cyan)}
.leit__punkte b{color:var(--paper);font-weight:660}
.leit__vorher{margin:22px 0 0;padding:2px 0 2px 18px;border-left:2px solid var(--cyan);
  color:var(--dim);font-size:.96rem;line-height:1.6}
.leit__media{position:relative;min-width:0}
/* Das Handy liegt ueber der Ecke des Screens statt daneben: zwei Geraete
   nebeneinander lesen sich wie ein Katalogfoto, uebereinander wie eine Szene. */
.leit__phone{position:absolute;right:-2%;bottom:-14%;z-index:2;width:min(33%,164px);margin:0}
.leit--flip .leit__phone{right:auto;left:-2%}
@media(max-width:900px){
  .leit{grid-template-columns:1fr;gap:clamp(28px,5vw,40px);align-items:start}
  .leit--flip .leit__media{order:0}
  /* Einspaltig bleibt unter dem Screen kein Platz fuer ein ueberlappendes
     Handy — es stuende auf dem naechsten Absatz. Also daneben stellen. */
  .leit__media{display:flex;align-items:flex-end;gap:clamp(12px,2.5vw,20px)}
  .leit__media .mock{flex:1 1 auto;min-width:0}
  .leit__phone{position:static;width:min(32%,150px);flex:0 0 auto}
  .leit--flip .leit__phone{left:auto}
}
@media(max-width:520px){
  /* Auf dem Handy trägt der Screen die Aussage, das Geraetebild waere nur noch
     ein Streifen. */
  .leit__phone{display:none}
}

.tools__grid{display:grid;grid-template-columns:1fr 1fr;gap:0;max-width:var(--wrap);margin:0 auto;
  padding-left:var(--indent)}
/* Die knappe Doppelspalte sitzt unter den beiden Bahnen — mit Abstand, sonst
   klebt sie an der letzten Haarlinie. */
.leit + .tools__grid{margin-top:clamp(54px,7vw,100px);padding-top:clamp(54px,7vw,100px);
  border-top:1px solid var(--line)}
.tool{display:flex;flex-direction:column;min-width:0;position:relative;
  padding:clamp(26px,3vw,38px) clamp(22px,2.6vw,34px) clamp(30px,3.4vw,44px) 0;
  border-top:1px solid var(--line);transition:background .25s ease}
.tool:nth-child(even){padding-right:0;padding-left:clamp(22px,2.6vw,34px);border-left:1px solid var(--line)}
@media(hover:hover){.tool:hover{background:rgba(174,185,199,.035)}}
.tool__no{font:700 .8rem/1 "Geist Mono",monospace;letter-spacing:.08em;color:var(--cyan);opacity:.75}
.tool h3{margin:12px 0 4px;font-size:clamp(1.25rem,2vw,1.55rem);letter-spacing:-.02em}
.tool__claim{margin:0 0 16px;color:var(--cyan);font-size:.92rem;font-weight:620}
.tool > p{margin:0 0 22px;color:var(--muted);line-height:1.65;font-size:.99rem}
.tool p em{font-style:normal;color:var(--paper);font-weight:600}
.tool p b{font-weight:680;color:var(--paper)}
/* Echte Screens statt Symbolbilder. Alle vier Quellen haben dasselbe Format
   (840x420) — deshalb reicht natuerliche Hoehe und die Spalten bleiben ruhig. */
.tool__shot{margin:auto 0 0;padding:0}
.tool__shot img{width:100%;border-radius:10px;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.9),0 0 0 1px rgba(174,185,199,.14)}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  .tool__shot img{transition:transform .4s cubic-bezier(.22,.7,.3,1),box-shadow .4s cubic-bezier(.22,.7,.3,1)}
  .tool:hover .tool__shot img{transform:translateY(-4px);
    box-shadow:0 40px 72px -30px rgba(0,0,0,.95),0 0 0 1px rgba(25,191,244,.3)}
}

/* ---- Mobil-Beleg: zwei echte Handy-Screens, kein Panel drumherum ---- */
.phones{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);
  align-items:center;max-width:var(--wrap);margin:clamp(48px,6vw,84px) auto 0;padding-left:var(--indent)}
.phones__stage{display:flex;justify-content:flex-start;align-items:flex-end;gap:clamp(12px,1.8vw,24px)}
.phone{margin:0;flex:0 1 auto;width:min(48%,216px);padding:6px;border-radius:24px;background:#0b1422;
  box-shadow:0 40px 70px -30px rgba(0,0,0,.9),0 0 0 1px rgba(174,185,199,.16)}
.phone img{border-radius:19px}
/* Der zweite Screen sitzt tiefer — zwei gleich hohe Geraete lesen sich wie ein
   Katalogfoto, der Versatz macht daraus eine Szene. */
.phone--b{margin-bottom:clamp(16px,3vw,42px);width:min(44%,194px)}
.phones__body h3{margin:0 0 14px;font-size:clamp(1.4rem,2.3vw,1.85rem);letter-spacing:-.025em}
.phones__body p{margin:0 0 14px;color:var(--muted);line-height:1.65}
.phones__body p:last-child{margin-bottom:0}
.phones__body em{font-style:normal;color:var(--paper);font-weight:560}
/* Zeilenlaenge ueber padding-right begrenzen, NICHT ueber max-width: ein
   kleineres max-width zusammen mit margin:auto zentriert den Block wieder. */
.tools__note{max-width:var(--wrap);margin:clamp(38px,4.4vw,60px) auto 0;
  padding-left:var(--indent);padding-right:clamp(0px,22vw,400px);
  color:var(--dim);font-size:.95rem;line-height:1.6}
.tools__note b{color:var(--muted);font-weight:640}

/* ======================================================================
   AUTOMATISIERUNG — offene Baustelle, ehrlich beschriftet
   ====================================================================== */
.auto{background:var(--navy)}
.pipe{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:0;
  max-width:var(--wrap);margin:0 auto;padding:0 0 0 var(--indent);list-style:none}
/* Flex-Spalte + margin-top:auto am Status: die Stufentexte sind verschieden
   lang, die Statuszeilen sollen trotzdem auf einer Linie sitzen. */
.pipe__step{position:relative;display:flex;flex-direction:column;align-items:flex-start;
  padding:30px clamp(16px,1.8vw,26px) 0 0}
.pipe__step .stat{margin-top:auto}
.pipe__step + .pipe__step{padding-left:clamp(16px,1.8vw,26px);border-left:1px solid var(--line)}
@media(min-width:861px){
  /* Eine durchgehende Spur ueber alle Stufen; der fertige Teil leuchtet. */
  .pipe::after{content:"";position:absolute;top:0;left:var(--indent);right:0;height:1px;background:var(--line-2);z-index:0}
  .pipe::before{content:"";position:absolute;top:0;left:var(--indent);width:var(--fill,50%);height:1px;
    background:var(--cyan);box-shadow:0 0 12px rgba(25,191,244,.7);z-index:1}
}
@media(max-width:860px){
  .pipe{grid-template-columns:1fr 1fr}
  .pipe__step{border-top:1px solid var(--line)}
  .pipe__step + .pipe__step{border-left:0;padding-left:0}
  .pipe__step:nth-child(even){padding-left:clamp(16px,1.8vw,26px);border-left:1px solid var(--line)}
}
@media(max-width:520px){.pipe{grid-template-columns:1fr}.pipe__step:nth-child(even){padding-left:0;border-left:0}}
.pipe__no{position:relative;z-index:2;font:700 .8rem/1 "Geist Mono",monospace;letter-spacing:.08em;color:var(--cyan);opacity:.75}
.pipe__step h3{margin:12px 0 8px;font-size:1.1rem;letter-spacing:-.015em}
.pipe__step p{margin:0 0 14px;color:var(--muted);line-height:1.6;font-size:.94rem}
/* line-height 1.3 statt 1: laengere Beschriftungen (englisch) brechen in einer
   schmalen Stufenspalte um, mit 1 klebten die Zeilen aufeinander. */
.stat{display:inline-flex;align-items:center;gap:8px;font:600 .73rem/1.3 "Geist Mono",monospace;
  letter-spacing:.07em;text-transform:uppercase}
.stat::before{content:"";width:6px;height:6px;border-radius:50%;flex:0 0 auto}
.stat--done{color:var(--cyan)}
.stat--done::before{background:var(--cyan);box-shadow:0 0 0 3px var(--cyan-soft)}
.stat--wip{color:#f0a132}
.stat--wip::before{background:#f0a132;box-shadow:0 0 0 3px rgba(240,161,50,.16)}
.stat--plan{color:var(--dim)}
.stat--plan::before{background:#5d6f83}
/* Aufnahme der laufenden Oberflaeche. Rechts bleibt Luft, damit das Bild nicht
   in die Punkt-Schiene laeuft — dieselbe Reserve wie bei .tools__note. */
.auto__shot{max-width:var(--wrap);margin:clamp(40px,4.6vw,64px) auto 0;
  padding-left:var(--indent);padding-right:clamp(0px,8vw,150px)}
.auto__shot figcaption{margin-top:14px;max-width:74ch;color:var(--dim);font-size:.9rem;line-height:1.6}
/* Unter 861px steht die Punkt-Schiene nicht mehr rechts — die Reserve wuerde
   das ohnehin schmale Bild nur weiter verkleinern. */
@media(max-width:860px){.auto__shot{padding-right:0}}
.auto__note{max-width:var(--wrap);margin:clamp(34px,4vw,52px) auto 0;padding-left:var(--indent);
  color:var(--dim);font-size:.92rem}
.auto__note b{color:var(--muted);font-weight:640}

/* ---- Vorgehen ---- */
.ablauf{background:var(--raised)}
.steps{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  max-width:var(--wrap);margin:0 auto;padding:0 0 0 var(--indent);list-style:none}
.step{position:relative;padding:30px clamp(18px,2.2vw,30px) 0 0}
.step + .step{padding-left:clamp(18px,2.2vw,30px);border-left:1px solid var(--line)}
@media(min-width:901px){
  .steps::after{content:"";position:absolute;top:0;left:var(--indent);right:0;height:1px;background:var(--line-2);z-index:0}
  .steps::before{content:"";position:absolute;top:0;left:var(--indent);right:0;height:1px;background:var(--cyan);z-index:1;
    box-shadow:0 0 12px rgba(25,191,244,.7);
    transform-origin:left center;transform:scaleX(var(--p,0));will-change:transform}
}
@media(min-width:901px) and (prefers-reduced-motion:reduce){.steps::before{transform:scaleX(1)}}
@media(max-width:900px){
  .steps{grid-template-columns:1fr 1fr}
  .step{border-top:1px solid var(--line)}
  .step + .step{border-left:0;padding-left:0}
  .step:nth-child(even){padding-left:clamp(18px,2.2vw,30px);border-left:1px solid var(--line)}
}
@media(max-width:600px){.steps{grid-template-columns:1fr}.step:nth-child(even){padding-left:0;border-left:0}}
.step__no{position:relative;z-index:2;font:700 .8rem/1 "Geist Mono",monospace;letter-spacing:.08em;color:var(--cyan);opacity:.75}
.step h3{margin:14px 0 10px;font-size:1.24rem;letter-spacing:-.02em}
.step p{margin:0;color:var(--muted);line-height:1.6;font-size:.96rem}

/* ---- Gegenueberstellung: eine Haarlinie trennt, kein Kasten ---- */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:0;max-width:var(--wrap);
  margin:0 auto;padding:clamp(56px,7vw,96px) var(--page) clamp(56px,7vw,96px);
  max-width:calc(var(--wrap) + 2 * var(--page));border-top:1px solid var(--line)}
.pair__card{padding:0 clamp(24px,3.4vw,52px) 0 0}
.pair__card + .pair__card{padding:0 0 0 clamp(24px,3.4vw,52px);border-left:1px solid var(--line)}
.pair__card h3{margin:10px 0 14px;font-size:clamp(1.3rem,2.1vw,1.68rem);letter-spacing:-.025em}
.pair__card p{margin:0;color:var(--muted);line-height:1.65}
/* Die "dafuer"-Seite bekommt Licht, die "dagegen"-Seite bleibt sachlich */
.pair__card--accent{position:relative}
.pair__card--accent h3{color:var(--paper)}
.pair__card--accent::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--cyan);
  box-shadow:0 0 14px rgba(25,191,244,.6)}

/* ---- Technik & Betrieb: Haarlinienraster ---- */
.umfang{background:var(--navy)}
.umfang__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;max-width:var(--wrap);margin:0 auto;
  padding-left:var(--indent)}
.feat{position:relative;padding:clamp(26px,3vw,36px) clamp(20px,2.4vw,32px) clamp(28px,3.2vw,40px) 0;
  border-top:1px solid var(--line);transition:background .25s ease}
.feat:not(:nth-child(3n+1)){padding-left:clamp(20px,2.4vw,32px);border-left:1px solid var(--line)}
@media(hover:hover){.feat:hover{background:rgba(174,185,199,.035)}}
.feat__ico{display:block;width:26px;height:26px;margin:0 0 16px;color:var(--dim);transition:color .2s ease}
.feat:hover .feat__ico{color:var(--cyan)}
.feat__ico svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.feat h3{margin:0 0 10px;font-size:1.12rem;letter-spacing:-.015em}
.feat p{margin:0;color:var(--muted);line-height:1.6;font-size:.95rem}

/* ---- FAQ ---- */
.faq{background:var(--raised)}
.faq__list{max-width:var(--wrap);margin:0 auto;padding-left:var(--indent)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__item:first-child{border-top:1px solid var(--line)}
.faq__item summary{display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:22px 4px;cursor:pointer;list-style:none;font-size:clamp(1rem,1.35vw,1.12rem);font-weight:620;
  letter-spacing:-.015em;color:var(--paper);transition:color .15s ease}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary:hover{color:var(--cyan)}
.faq__item summary::after{content:"";flex:0 0 auto;width:11px;height:11px;margin-right:4px;
  border-right:2px solid var(--cyan);border-bottom:2px solid var(--cyan);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .22s ease}
.faq__item[open] summary::after{transform:rotate(225deg) translate(-2px,-2px)}
.faq__item[open] summary{color:var(--cyan)}
.faq__answer{margin:0;padding:0 4px 26px;max-width:74ch;color:var(--muted);line-height:1.7;font-size:.99rem}
.faq__answer a{color:var(--cyan);font-weight:600}
.faq__note{max-width:var(--wrap);margin:clamp(28px,3.2vw,40px) auto 0;padding-left:var(--indent);
  color:var(--dim);font-size:.94rem}

/* ---- CTA: das Finale, gebaut wie auf der Startseite ----
   Bildschirmhoch abzueglich Fussbereich, damit Abschluss und Fusszeile
   zusammen genau eine Bildschirmhoehe ergeben.

   Leuchtrahmen auf DREI Seiten — rechts bleibt offen. Er ist eine echte
   Border des Containers, keine eigene Leiste und nichts, was laeuft: die
   Scroll-Kopplung der Leuchtleisten ist an anderer Stelle schon dreimal
   gekippt, hier steht sie einfach.

   Zwei Aurora-Quellen auf der Diagonale wie im Original — Violett oben rechts
   (dort, wo der Rahmen offen ist, das Licht kommt also von draussen herein),
   Cyan unten links aus der geschlossenen Ecke. Dazu ein flaches Bodenlicht:
   ohne das faellt alles rechts der Quelle auf reines Navy ab und liest sich
   als schwarzes Loch unter dem Finale. */
/* Der Leuchtkasten umfasst CTA UND Fusszeile — deshalb sitzt er auf einer
   eigenen Huelle und nicht auf der Sektion. Die Fusszeile steht damit INNEN,
   die untere Kante liegt unter ihr statt zwischen beiden.
   Hoehe: eine Bildschirmhoehe MINUS Kopfleiste. Vorher war nur die Fusszeile
   abgezogen, dadurch schob der Kasten die Leiste oben aus dem Bild. */
/* Hoehe: eine Bildschirmhoehe MINUS Kopfleiste MINUS Fusszeile. Damit ergeben
   Leiste, Finale und Fusszeile zusammen genau ein Bild — vorher war nur die
   Fusszeile abgezogen, dadurch schob der Kasten die Leiste oben aus dem Bild.

   Der Rahmen laeuft ueber ZWEI Elemente: oben und links traegt ihn die Sektion,
   links und unten die Fusszeile. Die untere Kante liegt so unter der Fusszeile
   statt zwischen beiden — und die Fusszeile bleibt ausserhalb von <main>, wo
   sie hingehoert. Ein umschliessendes <div> haette genau das gekostet. */
.cta{position:relative;overflow:hidden;isolation:isolate;text-align:left;
  display:grid;align-content:center;
  min-height:calc(100svh - var(--nav-hoehe,80px) - var(--foot-h,76px));
  padding:clamp(56px,7vw,96px) var(--page);
  border-top:1px solid var(--cyan);
  border-left:1px solid var(--cyan);
  /* Schein nur nach oben: links laeuft er aus dem Bild, unten geht der Rahmen
     ohne Naht in die Fusszeile ueber. */
  box-shadow:0 -1px 30px -6px rgba(25,191,244,.42);
  background:
    radial-gradient(52% 46% at 94% 2%,rgba(124,92,255,.24),transparent 70%),
    radial-gradient(44% 46% at 106% 40%,rgba(158,74,214,.13),transparent 72%),
    radial-gradient(46% 60% at 0% 118%,rgba(25,191,244,.26),transparent 68%),
    linear-gradient(180deg,#04101f,#020914)}
/* Das Finale folgt NICHT dem Einzug der uebrigen Sektionen: es teilt sich den
   Leuchtkasten mit der Fusszeile, und innerhalb eines Kastens muessen beide auf
   derselben Kante sitzen. Gemessen standen sie vorher bei 201 und 73 px.
   Also linksbuendig am Seitenrand — so macht es auch das Finale der Startseite. */
.cta > *{position:relative;z-index:1;width:100%;max-width:none;margin:0;padding-left:0}
.cta h2{margin:0 0 18px;max-width:22ch;
  font-size:clamp(2.2rem,5vw,3.7rem);letter-spacing:-.04em;font-weight:720;line-height:1.02}
.cta__sub{margin:0 0 34px;max-width:52ch;color:var(--muted);
  font-size:clamp(1.04rem,1.4vw,1.18rem);line-height:1.6}
.cta__row{display:flex;align-items:center;justify-content:flex-start;gap:14px 30px;flex-wrap:wrap}
.eyebrow--light{color:var(--cyan)}

/* Die Fusszeile schliesst den Leuchtkasten ab: sie traegt die linke und die
   untere Kante, und das Bodenlicht laeuft in ihr aus. Keine Trennlinie nach
   oben — CTA und Fusszeile sind ein Block, kein Anhang. */
.web-foot{position:relative;display:flex;flex-wrap:wrap;gap:12px 26px;
  justify-content:space-between;align-items:center;
  padding:28px var(--page);color:var(--dim);font-size:.88rem;
  border-left:1px solid var(--cyan);
  border-bottom:1px solid var(--cyan);
  box-shadow:0 1px 30px -6px rgba(25,191,244,.42);
  background:
    radial-gradient(120% 260% at 0% 100%,rgba(25,191,244,.22),transparent 70%),
    radial-gradient(135% 200% at 50% 190%,rgba(25,191,244,.1),rgba(25,191,244,0) 72%),
    var(--navy)}
.web-foot a{color:var(--muted);text-decoration:none}
.web-foot a:hover{color:var(--cyan)}
.web-foot__worlds a{margin:0 2px}

/* ---- Responsive ---- */
@media(max-width:900px){
  .prod{grid-template-columns:1fr;gap:34px}
  .prod--flip .prod__media{order:0}
  .tools__grid{grid-template-columns:1fr}
  .tool,.tool:nth-child(even){padding-left:0;padding-right:0;border-left:0}
  .phones{grid-template-columns:1fr;gap:30px}
  .phones__stage{order:2}
  .umfang__grid{grid-template-columns:1fr 1fr}
  .feat:not(:nth-child(3n+1)){padding-left:0;border-left:0}
  .feat:nth-child(even){padding-left:clamp(20px,2.4vw,32px);border-left:1px solid var(--line)}
  .pair{grid-template-columns:1fr;gap:34px}
  .pair__card,.pair__card + .pair__card{padding:0;border-left:0}
  .pair__card--accent{padding-left:20px}
}
/* Der Umschaltpunkt 768/769 steckt jetzt in site-nav.css und edge-nav.css —
   beide Dateien nennen denselben Wert, damit es keine Breite ohne Navigation gibt. */
@media(max-width:600px){
  .umfang__grid{grid-template-columns:1fr}
  .feat,.feat:nth-child(even){padding-left:0;border-left:0}
  .shots{grid-template-columns:1fr}
  .shots .mock:first-child{grid-column:auto}
  .scr{font-size:.7rem;padding:14px 14px}
  /* Der Abschluss nimmt den ganzen Schirm ein — dieselbe Wirkung wie der
     Kontaktblock der Startseite: Abschluss plus Fusszeile ergeben zusammen
     genau eine Bildschirmhoehe.
     Bewusst lvh statt svh, aus demselben Grund wie dort: svh ist die Hoehe MIT
     ausgefahrener Browserleiste. Am Seitenende faehrt die Leiste aber ein, der
     sichtbare Bereich wird also groesser als svh — mit svh waere die Sektion zu
     kurz und oben schaute die Sektion darueber ins Bild.
     --foot-h misst software.js: die Fusszeile bricht hier um (gemessen 123px
     bei 390px Breite, 141px bei 320px), raten geht nicht. Die Kopfleiste wird
     nicht abgezogen — sie liegt ueber dem leeren oberen Drittel, nicht ueber
     dem Text. */
  .cta{min-height:calc(100vh - var(--foot-h,124px));
    min-height:calc(100lvh - var(--foot-h,124px));
    padding-top:clamp(52px,13vw,72px);padding-bottom:clamp(52px,13vw,72px)}
  .cta__row{flex-direction:column;align-items:stretch;gap:16px}
  /* Wie im Hero: ein Knopf, volle Breite. Zwei verschiedene Antworten auf
     dieselbe Frage sahen nach Zufall aus. */
  .cta__row .web-btn{width:100%}
  .cta__row .web-link{align-self:flex-start}
  /* Die Sparte brach mit der weiten Laufweite auf zwei Zeilen um und stand
     dann breiter im Raum als die Produktueberschrift darunter. */
  .prod__tag{font-size:.7rem;letter-spacing:.1em}
  .prod__note{margin-top:20px}
  /* Die vier Werkzeug-Bilder sind Ausschnitte in 840x420. Ganz gezeigt sind sie
     bei 320px Breite unlesbar; ein enger gefasster Ausschnitt zeigt weniger,
     aber davon etwas, das man auch entziffern kann. */
  .tool__shot img{aspect-ratio:16/10;object-fit:cover;object-position:top left}
}