/* ==========================================================================
   TrendShip — Praezisions-Schicht (2026-08-28)
   Liegt ueber blau.css und kino.css. Ziel: die Seite soll gebaut wirken,
   nicht gestaltet — Blaupause, harte Kanten, Mess-Sprache. Vorbild ist die
   Bau-Logik institutioneller Auftritte: sichtbares Raster, Marker statt
   Schmuck, Knoepfe als Bauteile.
   Aendert nur Oberflaeche. Kein Markup noetig, nichts zu regenerieren.
   ========================================================================== */

:root{
  /* Blaupause: Linienstaerke und Farbe, je nach Grund umgeschaltet */
  --bp-line:rgba(9,16,32,.10);
  --bp-node:rgba(9,16,32,.30);
  --bp-gap:6px;            /* Strichlaenge der gestrichelten Achsen */
  --r-sm:0; --r:0; --r-lg:0;
}

/* ==========================================================================
   1 — DIE BLAUPAUSE
   Vier senkrechte Achsen ueber der ganzen Seite, im Raster des Inhalts.
   Sie liegen fest im Bild und wandern nicht mit — dadurch bekommt das
   Scrollen einen Bezugsrahmen, an dem sich alles ausrichtet.
   ========================================================================== */
.bp-feld{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  display:flex;justify-content:center;
}
.bp-feld__inner{
  position:relative;width:100%;max-width:var(--maxw);
  padding-inline:var(--pad);
  display:grid;grid-template-columns:repeat(4,1fr);
}
.bp-feld__ax{
  position:relative;
}
.bp-feld__ax::before{
  content:"";position:absolute;top:0;bottom:0;left:0;width:1px;
  background:repeating-linear-gradient(to bottom,
    var(--bp-line) 0 var(--bp-gap), transparent var(--bp-gap) calc(var(--bp-gap) * 2));
}
/* Aussenkanten des Rasters: durchgehend statt gestrichelt, aber blasser */
.bp-feld__inner::before,.bp-feld__inner::after{
  content:"";position:absolute;top:0;bottom:0;width:1px;background:var(--bp-line);
}
.bp-feld__inner::before{left:var(--pad)}
.bp-feld__inner::after{right:var(--pad)}

/* Auf dunklem Grund kehrt sich die Blaupause um. Die Klasse setzt das
   Skript, sobald eine dunkle Passage den Bildschirm fuellt. */
html.bp-dunkel{ --bp-line:rgba(147,178,237,.14); --bp-node:rgba(147,178,237,.42); }

@media (max-width:900px){ .bp-feld__inner{grid-template-columns:repeat(2,1fr)} }
@media (prefers-reduced-motion:reduce){ .bp-feld{transition:none} }

/* Der Inhalt muss ueber der Blaupause liegen. Die Kopfzeile bleibt fixed —
   sie hier auf relative zu setzen haette sie aus dem Bild geloest. */
main,.site-footer{position:relative;z-index:1}
.intro{z-index:9998}

/* ==========================================================================
   2 — KNOEPFE ALS BAUTEILE
   Zwei Zellen: Wort und Pfeil, getrennt durch eine Haarlinie. Kein Radius,
   kein Schatten-Kissen. Der Pfeil ist ein Schalter, keine Verzierung.
   ========================================================================== */
.btn{
  border-radius:0;box-shadow:none;
  padding:0;overflow:visible;
  font-size:.86rem;font-weight:600;letter-spacing:.02em;
  gap:0;align-items:stretch;
  transition:background .32s var(--ease),color .32s var(--ease),border-color .32s var(--ease);
}
.btn:hover{transform:none;box-shadow:none}
/* Zwei Bauformen, per Skript unterschieden (siehe praezision.js):
   .btn--pfeil  = Wort, Haarlinie, Pfeilzelle
   .btn--zeichen = Zeichen und Wort in einer Zelle */
.btn{padding:1.02em 1.6em}
.btn-lg{padding:1.16em 1.9em}

.btn--pfeil > svg{
  flex:none;align-self:stretch;width:16px;height:auto;
  margin-left:1.6em;margin-right:-1.6em;
  padding:0 1.15em;box-sizing:content-box;
  border-left:1px solid rgba(255,255,255,.26);
  transition:background .32s var(--ease);
}
.btn--pfeil:hover > svg{background:rgba(255,255,255,.16);transform:none}

.btn--zeichen > svg{margin-right:.8em;border-left:0;padding:0}
/* Knopf, der nur ein Zeichen traegt (WhatsApp) */
.btn--zeichen > svg:only-child{margin:0}
.btn-wa{padding-inline:1.15em}

/* Geist-Knopf: gleiche Bauform, nur ohne Fuellung */
.btn-ghost{border:1px solid var(--line-2);background:transparent}
.btn-ghost.btn--pfeil > svg{border-left-color:var(--line-2)}
.btn-ghost:hover{background:transparent;border-color:currentColor}
.btn-ghost.btn--pfeil:hover > svg{background:rgba(9,16,32,.06)}
.hero .btn-ghost.btn--pfeil:hover > svg,.tone-dark .btn-ghost.btn--pfeil:hover > svg{background:rgba(147,178,237,.14)}

/* ==========================================================================
   3 — MARKER STATT SCHMUCK
   Das Auge soll Bauteile lesen: gefuellte Quadrate, Mono-Ziffern,
   Versalien mit Sperrung. Kein Verlauf, kein Haekchen, kein Bogen.
   ========================================================================== */
.eyebrow{
  font-family:var(--mono);font-size:.68rem;font-weight:500;letter-spacing:.16em;
  gap:.62rem;
}
.eyebrow::before{
  width:6px;height:6px;background:currentColor;border-radius:0;
  flex:none;opacity:.9;
}

/* Vertrauens-Punkte im Kopf: Quadrat-Marker statt Strich */
body[data-seite="start"] .hero-trust li{font-family:var(--sans);font-size:.84rem;gap:.8rem;align-items:flex-start}
body[data-seite="start"] .hero-trust li::before{
  content:"";width:5px;height:5px;flex:none;margin-top:.62em;
  background:var(--xenon);border-radius:0;opacity:.85;
}

/* ==========================================================================
   4 — KOPFZEILE ALS SCHALTLEISTE
   Die Navigation ist keine Textzeile, sondern eine Reihe von Feldern —
   getrennt durch Haarlinien, in Versalien, mit Mono-Sperrung.
   ========================================================================== */
.nav-links{gap:0}
.nav-links a{
  font-family:var(--mono);font-size:.68rem;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;
  padding:.72rem 1.05rem;position:relative;
}
.nav-links a + a::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1px;height:11px;background:currentColor;opacity:.22;
}
.nav-cta .btn{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;padding:.86em 1.15em}
.nav-cta .btn--pfeil > svg{margin-left:1.15em;margin-right:-1.15em;padding:0 .9em}

/* ==========================================================================
   5 — TYPO: DER KOPF DARF LAUT SEIN
   Der erste Satz ist das Motiv der Seite. Er war zu brav gesetzt.
   ========================================================================== */
body[data-seite="start"] .hero h1{
  font-size:clamp(2.3rem,6.9vw,5.9rem);
  line-height:.94;letter-spacing:-.042em;
  margin-bottom:1.9rem;
}
body[data-seite="start"] .hero .lead{font-size:clamp(1rem,1.35vw,1.12rem);max-width:44ch;color:var(--cream-muted)}

/* Sektionstitel: eine Stufe, straffer gesetzt */
.s-head h2,.about h2,.contact h2{letter-spacing:-.038em;line-height:1.02}

/* ==========================================================================
   6 — ECKMARKEN
   Bilder und Flaechen bekommen Passermarken an zwei Ecken — der Blick
   erkennt sie als eingemessen, nicht als eingefuegt.
   ========================================================================== */
body[data-seite="start"] .hero-visual::before,.hero-visual::after{
  width:14px;height:14px;border-width:1px;
}

/* ==========================================================================
   7 — DER KOPF ALS VOLLBILD
   Vorher: zwei Spalten, das Motiv in einem Kasten neben dem Text. Das liest
   sich wie eine Broschuere. Jetzt liegt das Motiv im Bild und der Satz
   darueber — der Kopf ist eine Aufnahme, kein Layout.
   ========================================================================== */
body[data-seite="start"] .hero{
  min-height:min(100svh,860px);
  display:flex;align-items:center;
  padding-top:clamp(7rem,14vh,9.5rem);
  padding-bottom:clamp(4rem,9vh,7rem);
}
body[data-seite="start"] .hero-grid{
  grid-template-columns:1fr;
  align-items:center;
  width:100%;
}
body[data-seite="start"] .hero-copy{max-width:min(56ch,52%);position:relative;z-index:3}

/* Das Motiv liegt hinter dem Satz und laeuft aus dem Bild */
body[data-seite="start"] .hero-visual{
  position:absolute;top:0;right:0;bottom:0;
  width:min(66%,980px);margin:0;
  z-index:1;pointer-events:none;
}
body[data-seite="start"] .hero-photo{
  position:absolute;inset:0;border:0;box-shadow:none;
  aspect-ratio:auto;height:100%;width:100%;clip-path:none;
}
body[data-seite="start"] .hero-photo img{width:100%;height:100%;object-fit:cover;object-position:38% center}

/* Zwei Schleier: einer von links (der Satz braucht Ruhe), einer von unten
   (die Kante zur naechsten Flaeche darf nicht abgeschnitten wirken). */
body[data-seite="start"] .hero-photo::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,var(--abyss) 0%,rgba(5,10,20,.94) 26%,rgba(5,10,20,.42) 58%,rgba(5,10,20,.12) 100%),
    linear-gradient(0deg,var(--abyss) 0%,rgba(5,10,20,.35) 22%,transparent 55%),
    linear-gradient(180deg,rgba(5,10,20,.72) 0%,transparent 26%);
}
body[data-seite="start"] .hero-visual::before,.hero-visual::after{display:none}

/* Der Satz darf jetzt gross werden */
body[data-seite="start"] .hero h1.h1-claim{
  font-size:clamp(2.6rem,7.6vw,6.6rem);
  line-height:.92;letter-spacing:-.045em;
  margin-bottom:1.7rem;
}
body[data-seite="start"] .hero .lead{max-width:40ch;font-size:clamp(.98rem,1.2vw,1.08rem);line-height:1.62}
body[data-seite="start"] .hero-actions{margin-top:2.4rem}
body[data-seite="start"] .hero-trust{margin-top:2.1rem}

/* Unter 1000 px legt sich das Motiv hinter die ganze Flaeche */
@media (max-width:1000px){
  body[data-seite="start"] .hero-copy{max-width:none}
  body[data-seite="start"] .hero-visual{width:100%;opacity:.55}
  body[data-seite="start"] .hero-photo img{object-position:62% center}
  body[data-seite="start"] .hero-photo::after{
    background:
      linear-gradient(0deg,var(--abyss) 4%,rgba(5,10,20,.62) 40%,rgba(5,10,20,.5) 100%),
      linear-gradient(180deg,rgba(5,10,20,.8) 0%,transparent 40%);
  }
  body[data-seite="start"] .hero{min-height:auto}
}

/* ---- Nachtrag zu 7: das Motiv fuellt die ganze Flaeche -------------------
   Ein Kasten im rechten Drittel blieb ein Kasten. Erst wenn die Aufnahme
   die ganze Breite traegt und der Schleier den Satz freistellt, liest sich
   der Kopf wie eine Aufnahme. */
body[data-seite="start"] .hero-visual{inset:0;width:100%}
body[data-seite="start"] .hero-photo img{object-position:72% center;filter:saturate(.72) contrast(1.1) brightness(.86)}
body[data-seite="start"] .hero-photo::after{
  background:
    linear-gradient(90deg,
      var(--abyss) 0%, var(--abyss) 30%,
      rgba(5,10,20,.88) 46%, rgba(5,10,20,.55) 66%, rgba(5,10,20,.22) 100%),
    linear-gradient(0deg,var(--abyss) 0%,rgba(5,10,20,.30) 24%,transparent 58%),
    linear-gradient(180deg,rgba(5,10,20,.80) 0%,rgba(5,10,20,.20) 22%,transparent 34%);
}

/* Der Satz spannt jetzt frei — nur der Fliesstext bleibt schmal */
body[data-seite="start"] .hero-copy{max-width:none}
body[data-seite="start"] .hero h1.h1-claim{max-width:14ch}
body[data-seite="start"] .hero .lead,body[data-seite="start"] .hero-trust{max-width:44ch}
body[data-seite="start"] .hero .hero-actions{max-width:44ch}
/* Bei line-height .92 braucht die Zeilenmaske mehr Fuss, sonst schneidet
   sie die Unterlaengen ab. */
body[data-seite="start"] .hero h1 .row{padding-bottom:.28em;margin-bottom:-.24em}


@media (max-width:1000px){
  body[data-seite="start"] .hero-visual{opacity:.5}
  body[data-seite="start"] .hero-photo img{object-position:64% center}
  body[data-seite="start"] .hero h1.h1-claim{max-width:none}
}

/* ---- Nachtrag 2 zu 7 -----------------------------------------------------
   Das Motiv haengt jetzt direkt in der Sektion, nicht mehr im Textraster —
   es kann die volle Breite tragen. Der Ausschnitt zeigt wieder den Menschen;
   der Bildschirm im Hintergrund darf nicht mit der eigenen Headline
   konkurrieren. */
body[data-seite="start"] .hero-visual{
  position:absolute;inset:0;width:auto;height:auto;margin:0;
  z-index:1;pointer-events:none;overflow:hidden;
}
body[data-seite="start"] .hero-photo{position:absolute;inset:0;width:100%;height:100%}
body[data-seite="start"] .hero-photo img{object-position:50% 26%;filter:saturate(.72) contrast(1.1) brightness(.82)}
body[data-seite="start"] .hero-photo::after{
  background:
    linear-gradient(90deg,
      var(--abyss) 0%, rgba(5,10,20,.97) 34%,
      rgba(5,10,20,.84) 54%, rgba(5,10,20,.48) 76%, rgba(5,10,20,.16) 100%),
    linear-gradient(0deg,var(--abyss) 0%,rgba(5,10,20,.34) 22%,transparent 56%),
    linear-gradient(180deg,rgba(5,10,20,.86) 0%,rgba(5,10,20,.24) 20%,transparent 33%);
}

/* Knoepfe, die nur ein Zeichen tragen (WhatsApp), bleiben ein Quadrat */

/* ==========================================================================
   8 — DAS MESSNETZ IM KOPF
   Die Blaupause liegt sonst hinter allem. Ueber dem Motiv wird sie zur
   Aussage: Das hier ist vermessen, nicht arrangiert. Zwei waagerechte
   Hoehen, vier senkrechte Achsen, an den Kreuzungen ein Passer.
   ========================================================================== */
.ts-netz{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  display:flex;justify-content:center;overflow:hidden;
}
.ts-netz__inner{
  position:relative;width:100%;max-width:var(--maxw);
  padding-inline:var(--pad);
  display:grid;grid-template-columns:repeat(4,1fr);
}
.ts-netz__ax{position:relative}
.ts-netz__ax::before{
  content:"";position:absolute;top:0;bottom:0;left:0;width:1px;
  background:repeating-linear-gradient(to bottom,
    rgba(147,178,237,.24) 0 6px, transparent 6px 12px);
}
/* Passer an der Kreuzung: ein gefuelltes Quadrat, kein Punkt */
.ts-netz__ax::after{
  content:"";position:absolute;left:-2px;top:22%;
  width:5px;height:5px;background:var(--xenon);opacity:.5;
}
.ts-netz__ax:nth-child(2)::after{top:64%}
.ts-netz__ax:nth-child(3)::after{top:38%}
.ts-netz__ax:nth-child(4)::after{top:78%}

/* Zwei Hoehen ziehen quer durch — sie geben dem Satz eine Grundlinie */
.ts-netz__inner::before,.ts-netz__inner::after{
  content:"";position:absolute;left:0;right:0;height:1px;
  background:repeating-linear-gradient(to right,
    rgba(147,178,237,.16) 0 6px, transparent 6px 12px);
}
.ts-netz__inner::before{top:22%}
.ts-netz__inner::after{top:78%}

@media (max-width:900px){
  .ts-netz__inner{grid-template-columns:repeat(2,1fr)}
  .ts-netz__ax::after{display:none}
}

/* ---- Nachtrag 3 zu 7: Licht und Ausschnitt ------------------------------
   Der Kopf war zu dunkel — ein Gesicht, das man sucht, wirkt nicht
   souveraen, sondern unterbelichtet. */
body[data-seite="start"] .hero-photo img{object-position:50% 4%;filter:saturate(.74) contrast(1.06) brightness(1)}
body[data-seite="start"] .hero-photo::after{
  background:
    linear-gradient(90deg,
      var(--abyss) 0%, rgba(5,10,20,.96) 32%,
      rgba(5,10,20,.80) 52%, rgba(5,10,20,.40) 76%, rgba(5,10,20,.10) 100%),
    radial-gradient(120% 90% at 78% 46%, transparent 30%, rgba(5,10,20,.55) 100%),
    linear-gradient(0deg,var(--abyss) 0%,rgba(5,10,20,.42) 20%,transparent 52%),
    linear-gradient(180deg,rgba(5,10,20,.78) 0%,rgba(5,10,20,.18) 18%,transparent 30%);
}

/* Farbklima: die Wand im Motiv ist warm, die Seite ist kalt. Ein duenner
   blauer Schleier bindet die Aufnahme an die Palette, ohne sie zu faerben. */
body[data-seite="start"] .hero-photo::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(0deg,rgba(12,30,74,.38),rgba(12,30,74,.38));
}
body[data-seite="start"] .hero-photo::after{z-index:2}

/* Das Netz auf gewoehnlichen dunklen Flaechen ist leiser als im Kopf —
   dort traegt es ein Motiv, hier nur Text. */
.ts-netz--leise .ts-netz__ax::before{
  background:repeating-linear-gradient(to bottom,
    rgba(147,178,237,.13) 0 6px, transparent 6px 12px);
}
.ts-netz--leise .ts-netz__ax::after{display:none}
.ts-netz--leise .ts-netz__inner::before,
.ts-netz--leise .ts-netz__inner::after{display:none}
.ts-netz--fuss .ts-netz__ax::before{
  background:repeating-linear-gradient(to bottom,
    rgba(147,178,237,.10) 0 6px, transparent 6px 12px);
}
/* Das Netz darf den Inhalt nie ueberdecken */
.ts-netz{z-index:0}
body[data-seite="start"] .ts-netz--kopf{z-index:2}

/* ==========================================================================
   9 — RUNDE SCHALTER WERDEN QUADRATE
   Ein Kreis ist eine Geste, ein Quadrat ist ein Bauteil. Die Seite spricht
   ab hier eine Sprache: Marken, Passer, Felder. Nur Licht und Blur bleiben
   rund — die sind Physik, keine Bedienung.
   ========================================================================== */
.svc-row .arr,.ins-row .arr,.faq-q .pm,.ki-toggle .pm{border-radius:0}
.svc-row .arr,.ins-row .arr{width:2.3rem;height:2.3rem}
.faq-q .pm,.ki-toggle .pm{width:24px;height:24px}
.step .dot{border-radius:0;width:9px;height:9px;top:-5px}
.brand .dot,.fc-tag .d,.ticker-dot,.ticker-ref,.dvcue .dvdot,.dvcursor .d,
.sb-leiste span,.marquee-track span::after{border-radius:0}
.voice-by .voice-src,.dvcursor{border-radius:0}
.hero-status .pulse{border-radius:0}

/* ==========================================================================
   10 — DER LAUFSATZ IM MANIFEST
   Die Flaeche war ein schwarzes Nichts mit einem Satz in der Mitte. Jetzt
   traegt sie einen riesigen Schriftzug, der beim Scrollen quer zieht.

   ⚠ Teuer war die erste Fassung: -webkit-text-stroke muss auf jedem Frame
   die Kontur jedes Buchstabens in 200-px-Groesse neu zeichnen, dazu kam
   eine transition auf transform, die gegen die Scroll-Updates lief.
   Ergebnis: 26 von 69 Frames ueber 32 ms. Jetzt: eine Ebene statt zwei,
   Flaechenfarbe statt Kontur, keine transition, eigene Zeichenebene.
   ========================================================================== */
.section.manifesto{padding-block:clamp(7rem,17vh,12rem)}
.mf-band{
  /* Der Laufsatz lag genau hinter dem Zitat — beides kaempfte um dieselbe
     Flaeche. Jetzt liegt er tiefer und wirkt wie ein Horizont unter der
     Aussage, statt wie ein Schleier darueber. */
  position:absolute;left:0;right:0;top:74%;transform:translateY(-50%);
  z-index:0;pointer-events:none;overflow:hidden;
  contain:layout paint;
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.mf-band__lauf{
  display:flex;width:max-content;
  will-change:transform;transform:translate3d(0,0,0);
}
.mf-band span{
  font-size:clamp(4rem,13vw,12rem);
  font-weight:600;line-height:.9;letter-spacing:-.045em;
  white-space:nowrap;
  color:rgba(147,178,237,.085);
  padding-right:.2em;
}
/* Der Satz gewinnt: er steht davor und bekommt Grund unter die Zeilen */
.section.manifesto .wrap{z-index:2}
.manifesto p{
  font-size:clamp(1.8rem,4.6vw,3.35rem);
  max-width:20ch;letter-spacing:-.028em;
}

/* ==========================================================================
   12 — RESTLICHE RUNDUNGEN
   Marken, Felder, Karten: alles auf Kante. Nur Licht bleibt rund.
   ========================================================================== */
.chip,.badge,.tag,.ref-chips .chip,.form-note,.trust-chip,
.contact-card,.contact-row,.field input,.field textarea,
.cta-card,.ins-row,.faq-item,.voice-src{border-radius:0}
input,textarea,select,button{border-radius:0}

/* ==========================================================================
   13 — LETZTE RUNDUNGEN
   ========================================================================== */
.form-trust span,.booking-card .bc-ico,.burger,
.site-header.scrolled .wrap.nav,.dvcursor,.mobile-menu .btn{border-radius:0}
.dvcursor .d{border-radius:0}
:focus-visible{border-radius:0}

/* 14 — (entfallen: die zweite, gegenlaufende Zeile kostete mehr Frames,
   als sie an Tiefe brachte) */

/* ==========================================================================
   15 — VORGEHEN ALS GEPINNTE BAUPHASE
   Vorher: vier gleich grosse Spalten nebeneinander, alle gleich laut. Man
   liest sie nicht, man ueberfliegt sie. Jetzt bleibt links eine Tafel
   stehen und rechts laufen die Schritte durch — der Riss auf der Tafel
   wechselt mit. Das ist die Sache selbst: erst messen, dann bauen.
   ========================================================================== */
.vg-bau{
  display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(2rem,5vw,5rem);margin-top:clamp(2.5rem,5vw,4rem);
}

/* ------------------------------------------------------------- Die Tafel */
.vg-buehne{position:relative}
.vg-tafel{
  position:sticky;top:calc(50vh - 11rem);
  aspect-ratio:1;width:100%;max-width:22rem;
  border:1px solid var(--cream-line);
  display:grid;place-items:center;
  color:var(--xenon);
  background:
    linear-gradient(0deg,rgba(147,178,237,.035),rgba(147,178,237,.035)),
    repeating-linear-gradient(to right,rgba(147,178,237,.09) 0 1px,transparent 1px 44px),
    repeating-linear-gradient(to bottom,rgba(147,178,237,.09) 0 1px,transparent 1px 44px);
}
/* Passermarken an den Ecken: die Tafel ist eingemessen */
.vg-ecke{position:absolute;width:9px;height:9px;border:1px solid var(--xenon);opacity:.7}
.vg-ecke.tl{top:-1px;left:-1px;border-right:0;border-bottom:0}
.vg-ecke.tr{top:-1px;right:-1px;border-left:0;border-bottom:0}
.vg-ecke.bl{bottom:-1px;left:-1px;border-right:0;border-top:0}
.vg-ecke.br{bottom:-1px;right:-1px;border-left:0;border-top:0}

/* ------------------------------------------------------------ Die Risse */
.vg-risse{position:relative;width:58%;aspect-ratio:1}
.vg-riss{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:0;transform:scale(.94);
  transition:opacity .5s var(--ease),transform .7s var(--ease);
}
.vg-riss.an{opacity:1;transform:none}
.vg-riss .riss-g > *{stroke:currentColor;fill:none}
.vg-riss .fein{opacity:.42}
.vg-riss .voll{fill:currentColor;stroke:none}
.vg-riss .kurve{stroke-width:1.6}
/* Der Riss zeichnet sich, wenn er dran ist */
.vg-riss.an .riss-g > *{animation:riss-zeichnen .85s var(--ease) both}
@keyframes riss-zeichnen{from{opacity:0}to{opacity:1}}

/* ------------------------------------------------ Zaehler und Bezeichnung */
.vg-zaehler{
  position:absolute;top:1.1rem;left:1.1rem;
  display:flex;align-items:baseline;gap:.5rem;
  font-family:var(--mono);letter-spacing:.06em;
}
.vg-nr{font-size:1.6rem;font-weight:600;color:var(--cream-ink);line-height:1}
.vg-von{font-size:.66rem;color:var(--xenon);opacity:.7}
.vg-marke{position:absolute;bottom:1.1rem;left:1.1rem;right:1.1rem}
.vg-unter{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--cream-muted);
}

/* --------------------------------------------------------- Die Schritte */
.vg-liste{list-style:none;margin:0;padding:0}
.vg-schritt{
  padding:clamp(2.2rem,5vh,3.6rem) 0;
  border-top:1px solid var(--cream-line);
  opacity:.30;transition:opacity .5s var(--ease);
}
.vg-schritt:last-child{border-bottom:1px solid var(--cream-line)}
.vg-schritt.jetzt{opacity:1}
.vg-kopf{display:flex;align-items:center;gap:1rem;margin-bottom:1rem}
.vg-ziffer{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;
  color:var(--xenon);
}
.vg-strich{
  flex:1;height:1px;background:var(--cream-line);position:relative;overflow:hidden;
}
.vg-strich::after{
  content:"";position:absolute;inset:0;background:var(--xenon);
  transform:scaleX(0);transform-origin:left;
  transition:transform .8s var(--ease);
}
.vg-schritt.jetzt .vg-strich::after{transform:scaleX(1)}
.vg-schritt h3{
  font-size:clamp(1.5rem,2.5vw,2.15rem);letter-spacing:-.035em;line-height:1.06;
  color:var(--cream-ink);margin-bottom:.85rem;
}
.vg-schritt p{
  font-size:1rem;line-height:1.62;color:var(--cream-muted);max-width:46ch;
}

/* --------------------------------------------------------------- Schmal
   Unter 1000 px gibt es keine zweite Spalte, in der etwas stehenbleiben
   koennte. Dann traegt jeder Schritt seine Ziffer selbst — und alle sind
   gleich hell, weil ohne Bezugspunkt kein "jetzt" existiert. */
@media (max-width:1000px){
  .vg-bau{grid-template-columns:1fr;gap:0}
  .vg-buehne{display:none}
  .vg-schritt{opacity:1;padding-block:clamp(1.8rem,4vh,2.6rem)}
  .vg-schritt .vg-strich::after{transform:scaleX(1)}
}
@media (prefers-reduced-motion:reduce){
  .vg-schritt{opacity:1}
  .vg-riss{transition:none}
  .vg-riss.an .riss-g > *{animation:none}
}

/* ---- Nachtrag zu 10: das Zitat vor dem Laufsatz -------------------------
   Die Woerter leuchten beim Scrollen nacheinander auf. Der Satz muss aber
   immer lesbar sein — das Aufleuchten ist die Zugabe, nicht die Bedingung.
   Drei gestapelte text-shadow-Ebenen ueber einer bewegten Flaeche waren zu
   teuer; einer reicht, weil der Laufsatz jetzt blasser ist. */
.manifesto p .sw{opacity:.66}
.manifesto p .sw.lit{opacity:1}
.manifesto p{text-shadow:0 2px 30px rgba(5,10,20,.9)}

/* Die Tafel darf ihre Spalte fuellen */
.vg-tafel{max-width:26rem}

/* ==========================================================================
   16 — DIE KAPITELMARKE WIRD EIN INDEX
   Am linken Rand standen fuenf lose Striche. Ohne Ziffer liest man sie
   nicht als Inhaltsverzeichnis, sondern als Staub. Jetzt tragen sie
   Nummern in Mono — dieselbe Sprache wie die Passer und die Zaehler.
   ========================================================================== */
.chapters{counter-reset:kap;gap:.95rem}
.chapters a{gap:.62rem;align-items:center}
.chapters a::before{
  counter-increment:kap;content:counter(kap,decimal-leading-zero);
  font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;
  opacity:.34;transition:opacity .45s var(--ease);
  font-variant-numeric:tabular-nums;
}
.chapters a.on::before,.chapters a:hover::before{opacity:1}
.ch-tick{width:11px}
.chapters a.on .ch-tick{width:22px}
.ch-name{font-family:var(--mono);font-size:.6rem;letter-spacing:.15em}

/* ==========================================================================
   17 — SEKTIONSTITEL EINE STUFE GROESSER
   Der Kopf ist laut geworden. Bleiben die Kapitelueberschriften auf
   Broschuerengroesse, faellt die Seite nach dem ersten Bildschirm ab.
   ========================================================================== */
.s-head h2,.about h2,.contact h2{
  font-size:clamp(2.1rem,5.2vw,4rem);
  line-height:.98;letter-spacing:-.042em;
}
.s-head{max-width:880px}
.s-head p,.about .lead,.contact .lead{font-size:clamp(1rem,1.3vw,1.12rem);max-width:52ch}

/* ==========================================================================
   18 — LICHT UNTER DEN KNOEPFEN ZURUECKNEHMEN
   Ein Knopf, der leuchtet, sieht nach Spieloberflaeche aus. Er darf einen
   Schatten werfen, aber nicht strahlen.
   ========================================================================== */
.btn{box-shadow:none}
.tone-dark .btn:not(.btn-ghost),.hero .btn:not(.btn-ghost){
  box-shadow:0 18px 40px -26px rgba(0,0,0,.9);
}
.tone-dark .btn:not(.btn-ghost):hover,.hero .btn:not(.btn-ghost):hover{
  box-shadow:0 22px 46px -26px rgba(0,0,0,.95);
}

/* ==========================================================================
   19 — TEXTLINKS BEKOMMEN EINE KANTE
   Eine Linie, die beim Ueberfahren von links einlaeuft: die Seite reagiert
   in Geraden, nicht in Farbwechseln.
   ========================================================================== */
.lead a,.ins-foot a,.form-foot a,.foot-legal a,p a:not(.btn):not(.ref-branchlink){
  position:relative;text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size .42s var(--ease);
  padding-bottom:1px;
}
.lead a:hover,.ins-foot a:hover,.form-foot a:hover,.foot-legal a:hover,
p a:not(.btn):not(.ref-branchlink):hover{background-size:100% 1px}

/* ==========================================================================
   20 — JE GROESSER, DESTO LEICHTER
   Fette Schrift in Riesengroesse liest sich wie ein Werbeplakat. Dieselbe
   Zeile in halbfett liest sich wie ein Titel. Ab hier gilt eine Regel:
   Displaygroessen tragen 500, Kapitelgroessen 600, Kleinteile 700.
   ========================================================================== */
body[data-seite="start"] .hero h1.h1-claim{font-weight:500;letter-spacing:-.048em}
.s-head h2,.about h2,.contact h2{font-weight:500;letter-spacing:-.046em}
.manifesto p{font-weight:500}
.vg-schritt h3{font-weight:600}
.midcta-inner h3{font-weight:600;letter-spacing:-.035em}

/* ==========================================================================
   21 — DIE FUSSZEILE DES KOPFES
   Unten rechts stand "Scrollen", unten links nichts. Eine Zeile mit dem,
   was das Unternehmen ist und wo es sitzt, schliesst das Bild — und sagt
   nichts, was nicht stimmt.
   ========================================================================== */
body[data-seite="start"] .hero-fuss{
  position:absolute;left:0;right:0;bottom:clamp(1.4rem,3.2vh,2.4rem);
  z-index:3;pointer-events:none;
}
body[data-seite="start"] .hero-fuss__inner{
  width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);
  display:flex;align-items:center;gap:.8rem;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(233,240,250,.42);
}
body[data-seite="start"] .hero-fuss__marke{width:5px;height:5px;background:var(--xenon);flex:none;opacity:.8}
@media (max-width:860px){ .hero-fuss{display:none} }

/* ==========================================================================
   22 — DER KOPF FAEHRT IN ZWEI EBENEN WEG
   Der Satz war schon vorher weggefahren, das Motiv stand still. Zwei
   Geschwindigkeiten machen aus dem Abgang einen Raum: das Motiv sinkt
   langsam und wird groesser, das Messnetz bleibt fast stehen.
   ========================================================================== */
html.hero-scrub body[data-seite="start"] .hero-visual{
  transform:translate3d(0,calc(var(--hp,0) * 46px),0) scale(calc(1 + var(--hp,0) * .07));
  will-change:transform;
}
html.hero-scrub body[data-seite="start"] .ts-netz--kopf{
  opacity:calc(1 - var(--hp,0) * .55);
  transform:translate3d(0,calc(var(--hp,0) * 10px),0);
  will-change:opacity,transform;
}
html.hero-scrub body[data-seite="start"] .hero-fuss{opacity:calc(1 - var(--hp,0) * 1.6)}
@media (prefers-reduced-motion:reduce){
  html.hero-scrub body[data-seite="start"] .hero-visual,html.hero-scrub body[data-seite="start"] .ts-netz--kopf{transform:none;opacity:1}
  html.hero-scrub body[data-seite="start"] .hero-fuss{opacity:1}
}

/* ==========================================================================
   23 — ZAESUR AN DEN KANTEN
   Wo hell auf dunkel trifft, stand bisher nur ein harter Schnitt. Eine
   Haarlinie mit Passermarken an den Rasterachsen macht daraus eine Naht:
   Man sieht, dass hier zwei Flaechen aneinandergesetzt wurden.
   ========================================================================== */
.ts-naht{
  position:absolute;left:0;right:0;top:0;height:1px;z-index:4;pointer-events:none;
  display:flex;justify-content:center;
}
.ts-naht__inner{
  position:relative;width:100%;max-width:var(--maxw);padding-inline:var(--pad);
  display:grid;grid-template-columns:repeat(4,1fr);height:1px;
}
.ts-naht__inner > span{position:relative}
.ts-naht__inner > span::before{
  content:"";position:absolute;left:-2.5px;top:-2.5px;width:5px;height:5px;
  background:var(--accent);opacity:.55;
}
.tone-dark .ts-naht__inner > span::before,
.site-footer .ts-naht__inner > span::before{background:var(--xenon);opacity:.5}
@media (max-width:900px){ .ts-naht__inner{grid-template-columns:repeat(2,1fr)} }

/* Rechtslinks bleiben immer sichtbar unterstrichen — die einlaufende Kante
   ist eine Zugabe fuer Fliesstext, kein Ersatz fuer die Kennzeichnung. */
.form-foot a,.foot-legal a,.ki-note a,.datenschutz-link{
  background-size:100% 1px;
}

/* ---- Nachtrag 4 zu 7: der Kopf fuellt den Schirm ------------------------
   Bei 860 px Deckel blieb auf grossen Bildschirmen ein Streifen der hellen
   Flaeche stehen — der erste Eindruck war dann eine halbe Aufnahme.
   Unten bleibt eine Untergrenze, damit der Satz auf flachen Laptops nicht
   in die Knoepfe rutscht. */
body[data-seite="start"] .hero{min-height:max(660px, min(100svh, 1080px))}
/* Oben rechts blieb ein warmer Fleck stehen */
body[data-seite="start"] .hero-photo::after{
  background:
    linear-gradient(90deg,
      var(--abyss) 0%, rgba(5,10,20,.96) 32%,
      rgba(5,10,20,.80) 52%, rgba(5,10,20,.40) 76%, rgba(5,10,20,.10) 100%),
    radial-gradient(120% 90% at 78% 46%, transparent 26%, rgba(5,10,20,.60) 100%),
    linear-gradient(0deg,var(--abyss) 0%,rgba(5,10,20,.42) 18%,transparent 48%),
    linear-gradient(180deg,rgba(5,10,20,.86) 0%,rgba(5,10,20,.34) 16%,transparent 32%);
}
@media (max-width:1000px){ .hero{min-height:auto} }

/* ==========================================================================
   24 — DER SCHAUKASTEN BLEIBT STEHEN
   Die Leistungen laufen ueber sechs Zeilen, der Schaukasten stand oben und
   liess darunter eine halbe Seite Weiss. Jetzt bleibt er stehen und wechselt
   mit der Zeile, ueber der der Zeiger liegt — dieselbe Regie wie bei der
   Tafel im Vorgehen. Die Seite hat damit zwei feste Punkte statt keinem.
   ========================================================================== */
@media (min-width:1000px){
  .svc-buehne{
    position:sticky;top:calc(50vh - 13rem);
    align-self:start;
  }
  /* Unter dem Kasten steht eine Zeile Text — sie gehoert mit unter die Marke */
  .svc-schaukasten{align-items:start}
}

/* ==========================================================================
   25 — DIE UNTERSEITEN SPRECHEN DIESELBE SPRACHE
   Die Schicht liegt auch auf den Unterseiten. Dort heisst der Kopf
   .page-hero statt .hero — die uebrigen Bauteile (Knoepfe, Marken, Raster,
   Kanten) greifen ohnehin. Nur die Kopf-eigenen Regeln brauchen ihren
   zweiten Namen.
   ========================================================================== */
.page-hero .eyebrow::before{
  width:6px;height:6px;background:currentColor;border-radius:0;
}
.page-hero .hero-trust li{gap:.8rem;align-items:flex-start}
.page-hero .hero-trust li::before{
  content:"";width:5px;height:5px;flex:none;margin-top:.62em;
  background:var(--xenon,#93B2ED);border-radius:0;opacity:.85;
  border:0;background-image:none;
}
.page-hero h1{letter-spacing:-.042em}
/* Der Kopf einer Unterseite ist eine Stufe leiser als der der Startseite */
.page-hero h1{font-weight:500}

/* Das Messnetz im Unterseitenkopf */
.ts-netz--seitenkopf .ts-netz__ax::before{
  background:repeating-linear-gradient(to bottom,
    rgba(147,178,237,.16) 0 6px, transparent 6px 12px);
}
.ts-netz--seitenkopf .ts-netz__ax::after{display:none}
.ts-netz--seitenkopf .ts-netz__inner::before,
.ts-netz--seitenkopf .ts-netz__inner::after{display:none}

/* ==========================================================================
   26 — KEIN GLANZSTREIFEN
   Auf den Unterseiten lag noch ein diagonaler Lichtstreifen ueber jedem
   Knopf. Bei runden Ecken war das ein Schimmer, bei Kante ist es ein Fleck.
   Der Knopf reagiert jetzt ueber die Pfeilzelle, nicht ueber Glanz.
   ========================================================================== */
.btn::after{display:none}
.btn{overflow:visible}
/* Zeichen und Wort brauchen mehr Luft, als .8em bei .66rem hergibt */
.btn--zeichen > svg{margin-right:.62rem}

/* Vertrauens-Punkte auch ausserhalb der beiden bekannten Koepfe: auf hellem
   Grund traegt das Ultramarin, die dunklen Koepfe ueberschreiben es weiter
   oben mit Xenon. */
.hero-trust li{gap:.8rem;align-items:flex-start}
.hero-trust li::before{
  content:"";width:5px;height:5px;flex:none;margin-top:.62em;
  background:var(--accent,#1D39A5);border:0;background-image:none;
  border-radius:0;opacity:.9;
}

/* ==========================================================================
   27 — DER SCHAUKASTEN WIRD EIN REISSBRETT
   Vorher lagen dort sechs Diagramme aus dem Baukasten-Regal: Balken,
   Trichter, Haekchen — dazu drei Browser-Punkte, also genau das Zeichen,
   das die Seite bestreitet. Jetzt liegt in dem Rahmen eine Zeichnung:
   Messraster, Strich, Bemassung, Schriftfeld. Dieselbe Sprache wie die
   Tafel im Vorgehen. Der Beweis fuer echte Arbeit steht in „Arbeiten" —
   hier wird gezeigt, WAS gebaut wird, nicht WAS gebaut wurde.
   ========================================================================== */
.sb-rahmen{
  background:
    linear-gradient(0deg,rgba(147,178,237,.03),rgba(147,178,237,.03)),
    repeating-linear-gradient(to right,rgba(147,178,237,.075) 0 1px,transparent 1px 40px),
    repeating-linear-gradient(to bottom,rgba(147,178,237,.075) 0 1px,transparent 1px 40px),
    var(--abyss);
  border-color:rgba(147,178,237,.26);
  box-shadow:none;
}
/* Passermarken statt Fensterknoepfe */
.sb-ecke{position:absolute;z-index:4;width:9px;height:9px;border:1px solid var(--xenon);opacity:.6}
.sb-ecke.tl{top:-1px;left:-1px;border-right:0;border-bottom:0}
.sb-ecke.tr{top:-1px;right:-1px;border-left:0;border-bottom:0}
.sb-ecke.bl{bottom:-1px;left:-1px;border-right:0;border-top:0}
.sb-ecke.br{bottom:-1px;right:-1px;border-left:0;border-top:0}

/* ---------------------------------------------------------- Kopfzeile */
.sb-leiste{
  background:rgba(5,10,20,.72);border-bottom:1px solid rgba(147,178,237,.20);
  gap:.6rem;padding-inline:1rem;
}
.sb-marke{width:6px;height:6px;flex:none;background:var(--xenon);opacity:.9;border-radius:0}
.sb-titel{
  margin-left:0;font-family:var(--mono);font-size:.64rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(233,240,250,.86);
}
.sb-norm{
  margin-left:auto;flex:0 0 auto;white-space:nowrap;
  font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(147,178,237,.40);
}

/* ------------------------------------------------------------ Der Riss */
.sb-panel{padding:clamp(.9rem,2vw,1.5rem);gap:.6rem;justify-content:center}
.sb-riss{
  width:100%;flex:1;min-height:0;color:var(--xenon);
  stroke-width:1;vector-effect:non-scaling-stroke;
}
.sb-riss .voll-linie{stroke:currentColor;opacity:.95}
.sb-riss .fein{stroke:currentColor;opacity:.42}
.sb-riss .hilfs{stroke:currentColor;opacity:.20;stroke-dasharray:3 3}
.sb-riss .mass{stroke:currentColor;opacity:.55}
.sb-riss .pfad{stroke:currentColor;opacity:.85;stroke-dasharray:5 3}
.sb-riss .marke{fill:var(--accent-2);stroke:none}
.sb-riss .fein-voll{fill:currentColor;stroke:none;opacity:.7}
.sb-riss .marke-strich{stroke:var(--accent-2);stroke-width:2.2}
.sb-riss .ziffer{
  fill:currentColor;stroke:none;opacity:.62;
  font-family:var(--mono);font-size:5.4px;letter-spacing:.14em;
}

/* Der Riss zeichnet sich, sobald er dran ist */
.sb-panel.is-on .sb-riss > *{animation:riss-auf .7s var(--ease) both}
@keyframes riss-auf{from{opacity:0}to{opacity:1}}

/* --------------------------------------------------------- Schriftfeld */
.sb-block{
  display:flex;align-items:baseline;gap:.75rem;flex:none;
  border-top:1px solid rgba(147,178,237,.18);padding-top:.6rem;
}
.sb-block-nr{
  font-family:var(--mono);font-size:1.15rem;font-weight:600;line-height:1;
  color:var(--cream-ink);font-variant-numeric:tabular-nums;
}
.sb-block-txt{
  font-family:var(--mono);font-size:.58rem;letter-spacing:.15em;text-transform:uppercase;
  color:rgba(147,178,237,.62);
}
.sb-satz{font-family:var(--sans)}

@media (prefers-reduced-motion:reduce){
  .sb-panel.is-on .sb-riss > *{animation:none}
}

/* ---- Nachtrag zu 27: Kopfzeile und Farbfelder ---------------------------
   Der Normhinweis rechts wurde vom Titel aus dem Rahmen gedraengt. */
.sb-titel{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
/* Farbfelder im Marken-Riss zeigen die Palette, nicht nur Kaesten */
.sb-riss .farbe-2{fill:var(--xenon);stroke:none}
.sb-riss .farbe-3{fill:#F5F7FC;stroke:none;opacity:.9}

/* Der Normhinweis steht jetzt rechts im Schriftfeld, nicht mehr in der
   Kopfzeile — dort drueckte ihn der Titel aus dem Rahmen. */
.sb-block{justify-content:flex-start}
.sb-block .sb-norm{margin-left:auto}

/* ==========================================================================
   28 — WEITERLESEN-BLOCK AUF KANTE
   Die Verweise am Fuss der Unterseiten waren Pillen. Auf einer Seite, die
   sonst nur rechte Winkel kennt, liest sich das wie ein Fremdkoerper.
   Zusaetzlich bekommt jeder Verweis eine Marke — dieselbe Sprache wie die
   Eyebrows und die Passer.
   ========================================================================== */
.more-grid a{
  border-radius:0;gap:.6rem;font-size:.86rem;
  padding:.62rem 1rem;
}
.more-grid a::before{
  content:"";width:5px;height:5px;flex:none;
  background:var(--accent);opacity:.55;
  transition:opacity .25s;
}
.more-grid a:hover::before{opacity:1}
.more-grid a:hover{background:transparent;border-color:var(--accent)}
.tone-dark .more-grid a::before,.page-hero .more-grid a::before{background:var(--xenon,#93B2ED)}

/* ==========================================================================
   29 — KONTRASTE NACHGEZOGEN
   Gemessen nach WCAG 2.1 AA (4,5:1 fuer Fliesstext). Vier Stellen lagen
   darunter — alle vier sind klein gesetzte Mono-Zeilen, also genau die,
   die es am noetigsten haben. Die matte Optik bleibt, nur eben lesbar.
   ========================================================================== */
body[data-seite="start"] .hero-fuss__inner{color:rgba(233,240,250,.62)}   /* 3,67 → 5,9 */
.sb-block-txt{color:rgba(161,189,238,.86)}                                /* 3,76 → 5,6 */
.sb-block .sb-norm{color:rgba(161,189,238,.70)}                           /* 2,20 → 4,6 */
.svc-row .meta{color:rgba(9,16,32,.62)}                                   /* 3,02 → 6,3 */

/* Der abgeblendete Schritt: pauschale Deckkraft war der falsche Weg — sie
   trifft den Fliesstext genauso hart wie das Beiwerk. Jetzt bleibt der
   Text auf AA-Niveau lesbar, und das "noch nicht dran" traegt die
   Titelfarbe und die Kante. Wer die Maus bewegt, sieht denselben Effekt;
   wer schlecht sieht, kann trotzdem alles lesen. */
.vg-schritt{opacity:1}
.vg-schritt h3{color:rgba(233,240,250,.62);transition:color .5s var(--ease)}
.vg-schritt p{color:rgba(233,240,250,.60);transition:color .5s var(--ease)}
.vg-schritt .vg-ziffer{color:rgba(161,189,238,.78);transition:color .5s var(--ease)}
.vg-schritt.jetzt h3{color:var(--cream-ink)}
.vg-schritt.jetzt p{color:var(--cream-muted)}
.vg-schritt.jetzt .vg-ziffer{color:var(--xenon)}
@media (max-width:1000px){
  .vg-schritt h3{color:var(--cream-ink)}
  .vg-schritt p{color:var(--cream-muted)}
  .vg-schritt .vg-ziffer{color:var(--xenon)}
}

/* ==========================================================================
   30 — DIE LEISTUNGEN SIND JETZT DER INHALT
   Der Schaukasten daneben ist raus — was gebaut wird, steht in „Arbeiten",
   an echten Kundenseiten. Damit traegt die Liste die Sektion allein, und
   dafuer war sie zu eng gesetzt: Ziffer und Meta-Zeile waren gross, der
   Name der Leistung klein. Jetzt fuehrt der Name.

   Die Meta-Zeile steht ueber dem Namen statt darunter — sie ordnet ein,
   bevor man liest, wie ein Kicker. Das geht ohne Markup-Aenderung, weil
   .svc-main ohnehin eine Flex-Spalte ist.
   ========================================================================== */
@media (min-width:1000px){
  .svc-schaukasten{display:block}
  .svc-schaukasten .svc-index{margin-bottom:0}

  .svc-schaukasten .svc-row{
    grid-template-columns:4.5rem minmax(0,1.05fr) minmax(0,1fr) 3.2rem;
    align-items:center;
    padding-block:clamp(2rem,3.4vw,2.9rem);
    gap:0 clamp(1.6rem,3.2vw,3.4rem);
    transition:background .4s var(--ease);
  }
  .svc-schaukasten .svc-row .no{
    grid-column:1;align-self:start;margin-top:.5rem;
    font-family:var(--mono);font-size:.74rem;font-weight:500;letter-spacing:.16em;
    color:var(--faint);
  }
  .svc-schaukasten .svc-row .svc-main{
    grid-column:2;display:flex;flex-direction:column-reverse;gap:.6rem;
  }
  .svc-schaukasten .svc-row .meta{
    font-family:var(--mono);font-size:.63rem;letter-spacing:.15em;text-transform:uppercase;
    color:var(--accent);display:inline-flex;align-items:center;gap:.55rem;
  }
  .svc-schaukasten .svc-row .meta::before{
    content:"";width:5px;height:5px;background:currentColor;flex:none;opacity:.85;
  }
  .svc-schaukasten .svc-row .ttl{
    font-size:clamp(1.4rem,2.3vw,2.05rem);
    font-weight:500;letter-spacing:-.035em;line-height:1.08;
    transition:transform .45s var(--ease);
  }
  .svc-schaukasten .svc-row .desc{
    grid-column:3;margin-top:0;max-width:48ch;
    font-size:1rem;line-height:1.62;color:var(--muted);
  }
  .svc-schaukasten .svc-row .arr{grid-column:4;justify-self:end;width:2.6rem;height:2.6rem}

  /* Die Zeile antwortet als Ganzes, nicht nur der Pfeil */
  .svc-schaukasten .svc-row:hover{background:rgba(9,16,32,.035)}
  .svc-schaukasten .svc-row:hover .ttl{transform:translateX(.45rem)}
  .svc-schaukasten .svc-row:hover .no{color:var(--accent)}
}

/* Schmal: der Name fuehrt, die Beschreibung folgt, die Ziffer bleibt Marke */
@media (max-width:999px){
  .svc-index .svc-row .ttl{font-size:1.2rem;font-weight:600;letter-spacing:-.025em}
  .svc-index .svc-row .meta{
    font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
    color:var(--accent);
  }
  .svc-index .svc-row .no{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em}
}

/* ---- Nachtrag zu 30: die Trennlinie ist eine Trennlinie ------------------
   Unter den Zeilen wuchs eine blaue Verlaufslinie, sobald eine Zeile als
   „aktiv" galt. Beim Scrollen blieben mehrere davon gleichzeitig stehen —
   das liest sich nicht als Hinweis, sondern als Zufall. Die Kante ist jetzt
   immer da und neutral; aktiv ist eine Zeile am Grund, an der Ziffer und
   am Pfeil. */
.svc-index .svc-row::after{
  width:100%;background:var(--line);transition:background .4s var(--ease);
}
.svc-index .svc-row:hover::after{background:var(--accent)}

/* ==========================================================================
   31 — KORN OHNE MISCHMODUS
   Gemessen: mix-blend-mode auf den Korn-Ebenen war die teuerste Stelle der
   Seite. Eine bildschirmfuellende Ebene mit Mischmodus zwingt den Browser,
   bei jedem Scroll-Schritt die ganze Flaeche neu zusammenzusetzen — im
   Manifest lagen dadurch 21 von 68 Frames ueber 32 ms. Ohne Mischmodus:
   0 von 87. Das Korn bleibt, es rechnet nur nicht mehr mit dem Untergrund.
   ========================================================================== */
body::after{mix-blend-mode:normal;opacity:.030}
.section.work::after,.section.manifesto::after,.site-footer::after{
  mix-blend-mode:normal;opacity:.028;
}

/* ---- Nachtrag 5 zu 7: die Aufnahme wird unten nicht mehr beschnitten ----
   Das Motiv lag ueber die volle Breite und wurde deshalb in der Hoehe
   angeschnitten — auf flachen Fenstern fehlten Haende und Tisch, der Kopf
   endete mitten im Koerper. Jetzt richtet sich die Breite der Aufnahme nach
   ihrer Hoehe (Seitenverhaeltnis der Datei), sie steht rechtsbuendig und
   vollstaendig im Kopf. Links uebernimmt der Schleier, der ohnehin bis zur
   Deckung laeuft — die Kante faellt nicht auf. */
@media (min-width:1001px){
  body[data-seite="start"] .hero-photo{
    left:auto;right:0;top:0;bottom:0;
    width:auto;height:100%;aspect-ratio:1402/1122;
  }
  body[data-seite="start"] .hero-photo img{object-position:50% 50%}
}

/* =====================================================================
   FEINSCHLIFF — Runde 7 (28.08.2026)
   Korrekturen aus dem Bild-für-Bild-Durchgang der Startseite.
   Rueckgaengig machen = diesen Block bis zum Dateiende loeschen.
   ===================================================================== */

/* --- 1. Schwebende Kopfleiste war noch creme (Rest aus dem alten
       Swiss-Vault-Design) und stach aus der blauen Palette heraus. ---- */
.site-header.scrolled .wrap.nav{
  background:rgba(244,247,252,.94);
  border:1px solid rgba(9,16,32,.09);
  box-shadow:0 1px 0 rgba(255,255,255,.72) inset,0 18px 44px -26px rgba(9,16,32,.42)}

/* --- 2. Manifest: die noch nicht "beleuchteten" Woerter standen bei
       0,14 Alpha x 0,66 Deckkraft — im Standbild war der halbe Satz weg.
       Grundton angehoben, der Lauf-Effekt bleibt erhalten. ------------- */
.manifesto p .sw{opacity:1;color:color-mix(in srgb,currentColor 38%,transparent)}
.manifesto p .sw.lit{opacity:1;color:currentColor}

/* --- 3. KI-Loesungen: unter dem zugeklappten Schalter stand ein
       leeres Feld von fast einem halben Bildschirm. Ist der Schalter zu,
       schliesst die Sektion enger ab. -------------------------------- */
.section.services:has(.ki-panel:not(.open)){padding-bottom:clamp(3.2rem,7vh,5.5rem)}
.svc-split--toggle{margin-bottom:0}

/* --- 4. Kleinteile waren teils bei 9,6 px — auf dem Telefon nicht mehr
       lesbar. Untergrenze 11 px, Laufweite bleibt. -------------------- */
.eyebrow{font-size:.78rem}
.svc-row .meta,
.ref-body .ref-idx,
.ins-row .kicker,
.cue-label,
.vg-unter,
.dvcue .dvtxt,
.svc-note b,
.ref-block b{font-size:.72rem}
.vg-von{font-size:.74rem}
@media(max-width:760px){
  .eyebrow{font-size:.76rem;letter-spacing:.16em}
  .svc-row .meta,.ref-body .ref-idx,.ins-row .kicker{font-size:.73rem}
}

/* =====================================================================
   FEINSCHLIFF — Runde 8: Raumaufteilung
   ===================================================================== */

/* --- 5. Sektionskoepfe: Ueberschrift und Fliesstext standen unter-
       einander, die rechte Haelfte blieb leer. Jetzt stehen sie neben-
       einander — die Zeilenlaenge bleibt gleich, die Flaeche traegt.
       Nur Startseite, damit Unterseiten unberuehrt bleiben. ---------- */
@media(min-width:1080px){
  body[data-seite="start"] .s-head{
    display:grid;grid-template-columns:minmax(0,1.38fr) minmax(0,.82fr);
    column-gap:clamp(2.5rem,6vw,6rem);align-items:end}
  body[data-seite="start"] .s-head>.eyebrow{grid-column:1/-1}
  body[data-seite="start"] .s-head>h2{margin-bottom:0}
  body[data-seite="start"] .s-head>p{margin-top:0;padding-bottom:.35rem;max-width:44ch}
  /* alles ausser eyebrow/h2/p bleibt unter der Zeile */
  body[data-seite="start"] .s-head>:not(.eyebrow):not(h2):not(p){grid-column:1/-1}
}

/* --- 6. Referenz-Buehnen: die Karten waren auf volle Bildschirmhoehe
       gezwungen, gefuellt haben sie davon knapp 500 px — beim Scrollen
       stand ueber und unter jedem Fall eine leere Flaeche. Karte etwas
       niedriger, Buehne groesser: der Auftritt fuellt jetzt den Rahmen. */
@media(min-width:1000px){
  .work .ref{
    min-height:min(84svh,800px);
    padding-block:clamp(2.4rem,6vh,4.2rem) clamp(2rem,5vh,3.4rem)}
  .work .dvrig{max-width:min(100%,860px)}
  .work .dvlaptop{width:92%}
  .work .dvstage{padding-block:clamp(1rem,2vw,1.8rem) clamp(2.4rem,3.8vw,3.6rem)}
}

/* --- 7. Leistungszeile auf dem Telefon: der Pfeil lief ueber beide
       Zeilen und schnitt den Beschreibungstext ab. Pfeil bleibt oben
       beim Titel, der Text bekommt die volle Breite. ----------------- */
@media(max-width:760px){
  .svc-row{grid-template-areas:"no main arr" ". desc desc"}
  .svc-row .arr{align-self:start;margin-top:.15rem}
  .svc-row .desc{max-width:none}
}

/* =====================================================================
   FEINSCHLIFF — Runde 9: Lesbarkeit und Kleinteile
   ===================================================================== */

/* --- 8. --faint war der blasseste Ton im System und traegt trotzdem
       echte Information: E-Mail-Adresse, Ratgeber-Kategorie, "Oder
       schreiben Sie mir direkt", die Hinweiszeile unter dem Formular.
       Gemessen 3,0:1 — jetzt ueber der 4,5:1-Grenze. ----------------- */
:root{--faint:rgba(9,16,32,.60)}
html.allnight,.tone-dark,.on-dark{--faint:rgba(233,240,250,.58)}
.cue-label{color:rgba(233,240,250,.58)}

/* --- 9. Sticky-Leiste auf dem Telefon: sass ohne Ruecksicht auf den
       Home-Indicator am unteren Rand und stand schon im ersten Bild,
       direkt unter demselben Knopf im Kopf. Jetzt kommt sie erst, wenn
       der Kopfbereich durch ist. -------------------------------------- */
.mobile-cta{bottom:calc(1rem + env(safe-area-inset-bottom,0px))}
@media(max-width:760px){
  body[data-seite="start"] .mobile-cta{
    opacity:0;transform:translateY(120%);pointer-events:none;
    transition:opacity .35s var(--ease),transform .45s var(--ease)}
  body[data-seite="start"].cta-frei .mobile-cta{
    opacity:1;transform:none;pointer-events:auto}
}

/* --- 10. "Alle Branchen" lag hart auf den durchlaufenden Woertern.
       Der Knopf bekommt eine Auslaufzone, das Laufband verschwindet
       darunter statt abgeschnitten zu wirken. ------------------------ */
.ticker{position:relative}
.ticker::after{content:"";position:absolute;top:0;bottom:0;right:0;
  width:clamp(9rem,22vw,20rem);pointer-events:none;z-index:1;
  background:linear-gradient(90deg,transparent,var(--abyss,#050A14) 62%)}
.ticker-all{z-index:2}
@media(max-width:860px){.ticker::after{display:none}}

/* =====================================================================
   FEINSCHLIFF — Runde 10: die rechte Bahn
   ===================================================================== */

/* --- 11. Prinzipien standen als Titel-ueber-Text in der linken Haelfte,
       rechts blieb ein Drittel leer. Sie bekommen jetzt dieselbe
       Anatomie wie die Leistungsliste: Ziffer | Name | Erklaerung.
       Damit wiederholt sich das Raster statt neu anzufangen. --------- */
@media(min-width:900px){
  .pr-row{grid-template-columns:4.4rem minmax(0,.92fr) minmax(0,1.08fr);align-items:start}
  .pr-main{display:contents}
  .pr-main b{font-size:clamp(1.2rem,2vw,1.58rem);margin-bottom:0;align-self:center}
  .pr-main span{max-width:54ch;align-self:center}
}

/* --- 12. Vorgehen: Tafel und Schrittext liessen rechts wie links Rand
       stehen. Beide fuellen ihre Spalte jetzt aus. ------------------- */
@media(min-width:1000px){
  .vg-tafel{max-width:26rem}
  .vg-schritt p{max-width:52ch}
}

/* --- 13. Beim Scrollen lagen zwei Hintergruende uebereinander: die
       Leiste ueber die volle Breite UND die schwebende Pille darin.
       Ueber dem dunklen Kopf ergab das einen grauen Balken. Nur die
       Pille traegt jetzt Farbe. -------------------------------------- */
html:not(.allnight) .site-header.scrolled{
  background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;
  border-color:transparent}

/* --- 14. Zwischen 760 und rund 1020 px passte die Navigation nicht mehr
       in die Leiste — "Anrufen" und "Anfrage" standen ueber der Kante,
       gemessen bis zu 218 px Ueberhang. Das Klappmenue uebernimmt jetzt
       schon ab 1020 px. --------------------------------------------- */
@media(max-width:1020px){
  .nav-links,.nav-cta .btn{display:none}
  .burger{display:flex}
}

/* --- 15. Zwei Kleinteile hatte Runde 9 verfehlt: die Meta-Zeile in der
       Leistungsliste (eine spezifischere Regel gewann) und die Marke
       "Ausgangslage/Heute" in den Referenzen. Beide auf 11 px+. ------ */
.svc-index .svc-row .meta,.svc-schaukasten .svc-row .meta{font-size:.72rem}
.ref-line b,.ref-result b{font-size:.72rem}
@media(max-width:760px){
  .svc-index .svc-row .meta,.svc-schaukasten .svc-row .meta{font-size:.73rem}
}

/* --- 16. Nachtrag zu 11: der Sektionskopf ist auf 880 px begrenzt —
       zweispaltig blieben davon zwei schmale Streifen. Auf der Start-
       seite darf er die ganze Bahn nehmen. Der FAQ-Kopf steht bereits
       in einer eigenen Spalte und bleibt einspaltig. ----------------- */
@media(min-width:1080px){
  body[data-seite="start"] .s-head{max-width:none}
  body[data-seite="start"] .s-head>p{max-width:46ch}
  body[data-seite="start"] .faq-grid .s-head{
    display:block;max-width:880px}
  body[data-seite="start"] .faq-grid .s-head>p{max-width:52ch;margin-top:1.2rem}
}