/* ============================================================
   TOKENS
   Kaltes Blau (H220) gegen warme Neutrale (H~40).
   Diese Spannung ist die Palette — nicht das Blau allein.
   ============================================================ */
:root{
  /* warme Papiertoene */
  --paper:      #F6F4EF;
  --paper-soft: #FBFAF7;
  --paper-deep: #EEEBE3;
  --hairline:   #E3DFD6;
  --hairline-2: #CFCAC0;
  --ink:        #1A1917;
  --body:       #4A4740;
  /* Mute erreicht auf Paper nur 4,05 : 1 und ist deshalb ausschliesslich
     fuer versale Mono-Labels zulaessig. Jeder lesbare Nebentext nimmt
     Mute-AA: 4,95 : 1 auf Paper, bei praktisch gleichem Erscheinungsbild.
     Handbuch C.09, Seite 27. */
  --mute:       #7C776E;
  --mute-aa:    #6E6961;

  /* Logo-Blau, Leiter in gleichbleibendem Farbton */
  --blue-50:  #F4F6FB;
  --blue-300: #A5B7DD;
  --blue-400: #6A8ACB;
  --blue:     #2A52A0;
  --blue-600: #224387;

  /* eine dunkle Bande, blau-schwarz statt neutral-schwarz */
  --navy:     #111A2C;
  --navy-up:  #142343;

  --sans: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --gutter: clamp(20px, 4.5vw, 60px);
  --gap:    clamp(16px, 2vw, 28px);

  /* drei getrennte vertikale Rhythmen, nicht einer */
  --r-hero:  clamp(96px, 13vw, 176px);
  --r-sect:  clamp(72px, 8.5vw, 124px);
  --r-tight: clamp(28px, 3vw, 44px);

  --nav-h: 60px;

  --out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --out-expo:  cubic-bezier(0.19, 1, 0.22, 1);
}

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

/* clip statt hidden — sonst stirbt position:sticky lautlos */
html{
  overflow-x:clip;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 24px);
  -webkit-text-size-adjust:100%;
}

body{
  background:var(--paper);
  color:var(--body);
  font-family:var(--sans);
  font-size:17px;
  font-weight:400;
  line-height:1.6;
  hyphens:auto;
  -webkit-hyphens:auto;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }

::selection{ background:var(--blue); color:var(--paper); }

:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; }

/* ============================================================
   LAYOUT — 8 Spalten. Weniger Spalten erzwingen klarere
   Entscheidungen als 12 und verhindern das 4-4-4-Default.
   ============================================================ */
.shell{
  width:100%; max-width:1240px;
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.g8{ display:grid; grid-template-columns:repeat(8,1fr); gap:var(--gap); }

/* Spaltenzuweisungen: die leeren Spalten sind die Gestaltung */
.c-1-5{ grid-column:1 / span 5; }
.c-1-6{ grid-column:1 / span 6; }
.c-1-4{ grid-column:1 / span 4; }
.c-1-2{ grid-column:1 / span 2; }
.c-3-6{ grid-column:3 / span 6; }
.c-4-5{ grid-column:4 / span 5; }
.c-5-4{ grid-column:5 / span 4; }

/* ============================================================
   TYPOGRAFIE
   Display laeuft auf Gewicht 400. Gross und leicht ist das
   Premium-Register; gross und fett ist das SaaS-Register.
   Tracking variiert pro Stufe: -0.035em oben, +0.08em unten.
   ============================================================ */
.d-xl{
  font-size:clamp(38px, 5.4vw, 70px);
  font-weight:400; line-height:1.04; letter-spacing:-0.035em;
  color:var(--ink); hyphens:none;
}
.d-l{
  font-size:clamp(29px, 3.4vw, 46px);
  font-weight:400; line-height:1.1; letter-spacing:-0.028em;
  color:var(--ink); hyphens:none;
}
.d-m{
  font-size:clamp(22px, 2.1vw, 29px);
  font-weight:500; line-height:1.2; letter-spacing:-0.018em;
  color:var(--ink); hyphens:none;
}
.h-s{
  font-size:20px; font-weight:500; line-height:1.3;
  letter-spacing:-0.012em; color:var(--ink);
}
.lede{
  font-size:clamp(18px, 1.45vw, 20px);
  line-height:1.52; letter-spacing:-0.005em;
  max-width:46ch; color:var(--body);
  text-wrap:pretty;
}
.prose{ font-size:17px; line-height:1.62; max-width:62ch; text-wrap:pretty; }
.meta{ font-size:14px; line-height:1.5; color:var(--mute-aa); }

/* Mono bleibt unter 5 % der Woerter: Nummern, Metadaten, Werte. */
.m{
  font-family:var(--mono);
  font-size:11px; font-weight:500;
  letter-spacing:0.08em; text-transform:uppercase;
  color:var(--mute);
}
.m-blue{ color:var(--blue); }

/* ============================================================
   DAS ZEICHEN
   logo3.png wurde vektorisiert: 81 Ellipsen, aus dem PNG
   gemessen (Schwerpunkt + Traegheitsmoment je Punkt).
   Dadurch scharf in jeder Groesse, faerbbar ueber currentColor,
   7 KB statt 1,1 MB — und lauffaehig auch ueber file://,
   wo mask-image an der CORS-Regel scheitert.
   Der Warp ist das Asset: ein flaches Punktraster waere
   austauschbar, die Verzerrung nicht.
   ============================================================ */
.mk{ display:block; fill:currentColor; }

/* Die Wortmarke ist gezeichnete Kontur, kein Satz in Instrument Sans:
   offene Punzen, unterbrochene Balken bei E, S und R. Deshalb kommt
   sie aus Textlogo.svg und wird nie in einer Schrift nachgebaut.
   Verhaeltnis 2000 : 346,55 = 5,771 : 1. */
.wm{ display:block; fill:currentColor; }

/* ============================================================
   LOCKUP — Hauptfassung horizontal: Bildmarke, Trennstrich,
   Wortmarke. Die Hoehe der Bildmarke ist die Versalhoehe der
   Wortmarke plus 30 %; die beiden Abstaende zum Strich sind
   gleich. Verhaeltnisse fix, das Lockup skaliert als Ganzes.
   ============================================================ */
.lockup{
  --wm-h: 20px;                     /* Versalhoehe der Wortmarke */
  display:inline-flex; align-items:center;
  gap:calc(var(--wm-h) * 0.55);     /* beidseitig gleich */
  color:var(--blue);
}
.lk-mk{
  height:calc(var(--wm-h) * 1.3);
  width:auto; aspect-ratio:1000 / 925;
  flex:none;
}
.lk-bar{
  flex:none;
  width:1px; height:calc(var(--wm-h) * 1.25);
  background:var(--hairline-2);
}
.lk-wm{
  height:var(--wm-h);
  width:auto; aspect-ratio:2000 / 346.55;
  flex:none;
  color:var(--ink);
}

/* Skala 1 — Glyph. Vier Punkte aus der Mitte: dort sind sie
   fast rund, das liest sich bei 12px noch als Form. */
.mk-tick{ width:12px; height:12px; flex:none; color:var(--blue); }

/* Skala 2 — Navigationszeichen */
.mk-nav{ width:34px; height:31px; color:var(--blue); }

/* Skala 3 — als echtes Element in einer Rasterspalte, ueber den
   Viewportrand hinaus. Nie klein, nie gekachelt, nie zentriert. */
.bleed{ position:relative; }
/* aspect-ratio explizit: height:auto loest bei inline-SVG sonst
   auf die 150px-Standardhoehe auf, und das Zeichen wird gestaucht. */
.bleed .mk{ position:absolute; height:auto; aspect-ratio:1000 / 925; }

/* Der eine Bewegungsmoment der ganzen Seite: das Zeichen dreht
   sich ueber den Scroll. rotate/scale statt transform, damit die
   Positionierung per transform nicht ueberschrieben wird. */
@supports (animation-timeline: scroll()){
  .bleed .mk{
    animation:drift linear both;
    animation-timeline:scroll(root block);
  }
}
@keyframes drift{ to{ rotate:16deg; scale:1.06; } }

/* ============================================================
   LINKS & BUTTONS
   Tinte fuer die Aktion, Blau fuer Links. Kein Verlauf,
   kein Schein, kein transform. Radius 4.
   ============================================================ */
.lk{
  color:var(--blue);
  border-bottom:1px solid var(--hairline-2);
  padding-bottom:1px;
  transition:color .12s var(--out-quart), border-color .12s var(--out-quart);
}
.lk:hover{ color:var(--blue-600); border-color:var(--blue); }

.act{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 22px; border-radius:4px;
  background:var(--ink); color:var(--paper);
  font-size:15px; font-weight:500; letter-spacing:-0.005em;
  transition:background .12s var(--out-quart);
}
.act:hover{ background:#332F2A; }
.act svg{ width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:1.75; flex:none; }

/* ============================================================
   NAV — 60px, kein Hintergrund bis zu einer Schwelle,
   dann nur Hairline. Kein Schatten, kein CTA-Pill.
   ============================================================ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:60;
  height:var(--nav-h);
  display:flex; align-items:center;
  border-bottom:1px solid transparent;
  transition:background .18s var(--out-quart), border-color .18s var(--out-quart);
}
.nav.on{
  background:rgba(246,244,239,0.92);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-bottom-color:var(--hairline);
}

/* Ueber der dunklen Bande dreht die Leiste mit, statt als heller
   Balken hineinzuschneiden. */
.nav.dark .nav-links a,
.nav.dark .nav-toggle{ color:rgba(242,240,235,0.72); }
.nav.dark .nav-links a:hover{ color:#F2F0EB; }
/* Auf Navy gilt die Papier-Fassung — Blau auf Navy waere 2,3 : 1. */
.nav.dark .lockup{ color:var(--blue-400); }
.nav.dark .lk-wm{ color:#F2F0EB; }
.nav.dark .lk-bar{ background:rgba(255,255,255,0.22); }
.nav.on.dark{
  background:rgba(17,26,44,0.86);
  border-bottom-color:rgba(255,255,255,0.10);
}
.nav-in{
  width:100%; max-width:1240px; margin-inline:auto;
  padding-inline:var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.nav-links{ display:flex; align-items:center; gap:30px; list-style:none; }
.nav-links a{
  font-size:14px; font-weight:400; color:var(--body);
  transition:color .12s var(--out-quart);
}
.nav-links a:hover{ color:var(--ink); }

.nav-toggle{ display:none; font-size:14px; color:var(--body); }

.drawer{
  position:fixed; inset:var(--nav-h) 0 auto 0; z-index:55;
  background:var(--paper);
  border-bottom:1px solid var(--hairline);
  padding:8px var(--gutter) 30px;
  display:none; flex-direction:column;
}
.drawer.open{ display:flex; }
.drawer a{
  padding:15px 0; font-size:19px; letter-spacing:-0.015em; color:var(--ink);
  border-bottom:1px solid var(--hairline);
  opacity:0; transform:translateY(8px);
  animation:drawIn .22s var(--out-quart) forwards;
}
.drawer a:nth-child(1){ animation-delay:.02s; }
.drawer a:nth-child(2){ animation-delay:.07s; }
.drawer a:nth-child(3){ animation-delay:.12s; }
.drawer a:nth-child(4){ animation-delay:.17s; }
.drawer a:nth-child(5){ animation-delay:.22s; }
@keyframes drawIn{ to{ opacity:1; transform:none; } }

/* Die aktive Seite wird markiert, nicht unterstrichen: eine
   Unterstreichung in der Leiste liest sich als Hover. */
.nav-links a[aria-current="page"]{ color:var(--ink); }
.nav-links a[aria-current="page"]::before{
  content:""; display:inline-block;
  width:5px; height:5px; border-radius:50%;
  background:var(--blue);
  margin-right:7px; vertical-align:0.14em;
}
.nav.dark .nav-links a[aria-current="page"]{ color:#F2F0EB; }
.nav.dark .nav-links a[aria-current="page"]::before{ background:var(--blue-400); }
.drawer a[aria-current="page"]{ color:var(--blue); }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  padding-top:calc(var(--nav-h) + clamp(64px, 8vw, 108px));
  padding-bottom:var(--r-tight);
}
.hero-copy{ grid-column:1 / span 5; }

/* Das Zeichen belegt die rechten Spalten wirklich, statt sie
   leerzulassen — angeschnitten vom Viewport, nicht vom Seitenrand. */
.hero-mk{ grid-column:6 / span 3; align-self:center; }
.hero-mk .mk{
  top:50%; left:4%;
  width:min(190%, 66vw);
  translate:0 -50%;
  color:var(--blue);
  opacity:.14;
}

.hero-tag{ display:flex; align-items:center; gap:9px; margin-bottom:26px; }

.hero h1{ margin-bottom:30px; }
.hero h1 .q{ color:var(--blue); }

.hero-do{ margin-top:34px; display:flex; flex-wrap:wrap; align-items:center; gap:14px 26px; }

/* Metadaten-Streifen: volle Breite, an den Rhythmuswechsel gesetzt */
.strip{
  margin-top:clamp(64px, 9vw, 132px);
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
}
.strip ul{
  list-style:none;
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:var(--gap);
}
.strip li{
  padding:16px 0;
  display:flex; align-items:center; gap:10px;
  font-size:14px; color:var(--body);
}
.strip li + li{ border-left:1px solid var(--hairline); padding-left:var(--gap); }

/* ============================================================
   02 — ZEITFRESSER
   Redaktionelle Zeilen statt drei gleicher Karten.
   Drei gleiche Karten nebeneinander sind der strukturelle Tell.
   ============================================================ */
.sect{ padding-block:var(--r-sect) calc(var(--r-sect) * 0.78); overflow:clip; }

.sect-head{ margin-bottom:clamp(52px, 6vw, 88px); }
.sect-head .m{ margin-bottom:18px; display:block; }

/* .c-1-5 belegt die Spalten 1–5, .c-5-4 begann ebenfalls bei 5.
   Zwei explizit gesetzte, ueberlappende Bereiche — die automatische
   Platzierung schiebt den Absatz deshalb in eine zweite Zeile, und
   links darunter bleibt ein leeres L stehen. Der Absatz beginnt
   jetzt bei 6 und steht neben der Ueberschrift, nicht unter ihr. */
.sect-head .c-5-4{ grid-column:6 / span 3; }

.rows{ border-top:1px solid var(--hairline); }
.row{
  border-bottom:1px solid var(--hairline);
  padding-block:clamp(28px,3.4vw,44px);
  display:grid; grid-template-columns:repeat(8,1fr); gap:var(--gap);
  align-items:start;
}
.row-n{ grid-column:1 / span 1; }
.row-t{ grid-column:2 / span 3; }
.row-p{ grid-column:5 / span 4; }
.row-t h3{ font-size:21px; font-weight:500; line-height:1.28; letter-spacing:-0.014em; color:var(--ink); }
.row-p p{ font-size:16.5px; line-height:1.62; }

/* ============================================================
   03 — ABLAUF · die eine dunkle Bande, randlos, ohne Radius
   ============================================================ */
.band{
  background:var(--navy);
  color:rgba(242,240,235,0.78);
  padding-block:var(--r-sect) calc(var(--r-sect) * 0.8);
  /* clip, nicht hidden: hidden wuerde die stehende Spalte toeten */
  overflow:clip;
}
.band .d-l,.band .d-m,.band .h-s{ color:#F2F0EB; }
.band .m{ color:rgba(242,240,235,0.55); }

/* linke Spalte bleibt stehen, rechte laeuft durch */
.band-l{ grid-column:1 / span 3; }
.band-r{ grid-column:5 / span 4; }
@media (min-width:861px){
  .band-l{ position:sticky; top:calc(var(--nav-h) + 52px); align-self:start; }
}
.band-l .d-l{ margin-top:18px; }
.band-l .note{ margin-top:24px; font-size:16px; line-height:1.6; color:rgba(242,240,235,0.62); max-width:34ch; }

/* Fuellt den Rest der stehenden Spalte, statt sie leer mitlaufen
   zu lassen. Nach links aus dem Raster heraus. */
.band-mk{ margin-top:clamp(40px,6vw,80px); height:clamp(150px,15vw,230px); }
.band-mk .mk{
  top:0; left:-24%;
  width:min(150%, 34vw);
  color:var(--blue-400);
  opacity:.16;
}

.step{ padding-block:clamp(30px,3.6vw,46px); border-top:1px solid rgba(255,255,255,0.09); }
.step:first-child{ border-top:none; padding-top:0; }
.step-when{
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:0.08em; text-transform:uppercase;
  color:var(--blue-300);
}
.step h3{ margin:12px 0 12px; font-size:clamp(21px,2vw,25px); font-weight:500; letter-spacing:-0.016em; }
.step p{ font-size:16.5px; line-height:1.62; max-width:44ch; }
.step ul{ margin-top:20px; list-style:none; display:grid; gap:7px; }
.step li{ display:flex; align-items:baseline; gap:10px; font-size:14.5px; color:rgba(242,240,235,0.6); }
.step li .mk-tick{ color:var(--blue-400); position:relative; top:1px; }

/* Auf Navy traegt das Blau der Textlinks nicht — heller Ton, gleiche Form */
.band .lk{ color:var(--blue-300); border-bottom-color:rgba(255,255,255,0.22); }
.band .lk:hover{ color:#F2F0EB; border-bottom-color:var(--blue-300); }
.band .act{ background:#F2F0EB; color:var(--navy); }
.band .act:hover{ background:#fff; }

/* ============================================================
   04 — REFERENZ
   ============================================================ */
.well{
  position:relative;
  background:var(--paper-deep);
  border:1px solid var(--hairline);
  border-radius:4px;
  padding:clamp(26px,4vw,52px);
  overflow:hidden;
}

/* Papierstapel -> erzeugte Datei */
.tf{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:clamp(10px,1.6vw,22px); }

.papers{ position:relative; height:clamp(190px,22vw,280px); }
.sheet{
  position:absolute; top:50%; left:50%;
  width:clamp(106px,13.5vw,180px); aspect-ratio:1/1.38;
  background:var(--paper-soft);
  border:1px solid var(--hairline-2);
  border-radius:1px;
}
.sheet:nth-child(1){ transform:translate(-50%,-50%) rotate(-8deg) translate(-13px,6px); }
.sheet:nth-child(2){ transform:translate(-50%,-50%) rotate(4.5deg) translate(10px,-4px); }
.sheet:nth-child(3){ transform:translate(-50%,-50%) rotate(-1.5deg); }
.sheet svg{ width:100%; height:100%; }
.sheet svg path,.sheet svg line{ stroke:#9A948A; fill:none; stroke-width:1.6; stroke-linecap:round; }

.tf-mid{ display:flex; flex-direction:column; align-items:center; gap:11px; }
.rail{ position:relative; width:clamp(30px,4.5vw,64px); height:1px; background:var(--hairline-2); }
.rail::after{
  content:''; position:absolute; right:-1px; top:-3.5px;
  width:8px; height:8px;
  border-top:1.5px solid var(--hairline-2); border-right:1.5px solid var(--hairline-2);
  transform:rotate(45deg); transition:border-color .4s var(--out-quart);
}
.rail i{ position:absolute; inset:0 auto 0 0; width:0; height:1px; background:var(--blue); display:block; }
.tf-mid .m{ font-size:10px; text-align:center; }

.doc{
  width:clamp(122px,15.5vw,212px); aspect-ratio:1/1.38;
  margin-inline:auto;
  background:#fff; border:1px solid var(--hairline-2); border-radius:1px;
  padding:clamp(10px,1.5vw,16px);
  display:flex; flex-direction:column; gap:8px;
}
.doc-top{ display:flex; align-items:center; gap:6px; padding-bottom:8px; border-bottom:1.5px solid var(--hairline); }
.doc-mk{ width:12px; height:11px; color:var(--blue); flex:none; }
.doc-ti{ height:5px; width:60%; border-radius:1px; background:#2E2B26; }
.dr{ height:4px; border-radius:1px; background:#C9C3B8; transform-origin:left; transform:scaleX(0); }
.dr.s{ width:52%; } .dr.m{ width:76%; }
.dr.hit{ background:var(--blue); opacity:.6; }

.scan{ position:absolute; top:0; bottom:0; left:0; width:1.5px; background:var(--blue); opacity:0; pointer-events:none; }

.tf-cap{ margin-top:16px; display:flex; flex-direction:column; gap:6px; }

/* Bild links, Datenblatt rechts daneben — nicht darunter. */
.ref-vis{ grid-column:1 / span 4; }
.ref-spec{ grid-column:5 / span 4; }

/* Datenblatt */
.spec{ border-top:1px solid var(--hairline); }
.spec > div{
  display:grid; grid-template-columns:96px 1fr; gap:18px;
  padding-block:13px; border-bottom:1px solid var(--hairline);
}
.spec dt{
  font-family:var(--mono); font-size:11px; font-weight:400;
  letter-spacing:0.06em; text-transform:uppercase; color:var(--mute);
  padding-top:3px;
}
.spec dd{ font-size:16px; line-height:1.5; color:var(--ink); }
.spec dd.up{ color:var(--blue); }

/* Zitat: bricht das Raster nach rechts hinaus */
.pull{ margin-top:var(--r-sect); }
.pull blockquote{
  font-size:clamp(24px,3vw,40px);
  font-weight:400; line-height:1.16; letter-spacing:-0.028em;
  color:var(--ink); hyphens:none; text-wrap:balance;
}
.pull figcaption{ margin-top:26px; display:flex; align-items:center; gap:10px; }

/* ============================================================
   05 — UEBER
   ============================================================ */
.about-l{ grid-column:1 / span 2; }
.about-mk{ margin-top:clamp(30px,4vw,52px); height:clamp(150px,15vw,220px); }
.about-mk .mk{
  top:0; right:14%;
  width:min(180%, 33vw);
  color:var(--blue);
  opacity:.10;
}

.about p{ font-size:clamp(19px,1.8vw,23px); font-weight:400; line-height:1.46; letter-spacing:-0.014em; color:var(--ink); text-wrap:pretty; }
.about p + p{ margin-top:22px; font-size:clamp(16.5px,1.35vw,18px); line-height:1.62; color:var(--body); letter-spacing:0; }
.about .sig{
  margin-top:32px; padding-top:20px; border-top:1px solid var(--hairline);
  display:flex; flex-wrap:wrap; gap:6px 28px;
}

/* ============================================================
   06 — KONTAKT
   ============================================================ */
.contact{ padding-block:var(--r-sect) calc(var(--r-sect) * 0.7); }
.contact h2{ margin:18px 0 26px; }
.contact-do{ margin-top:36px; display:flex; flex-wrap:wrap; align-items:center; gap:16px 28px; }

/* Kontaktdaten stehen neben dem Aufruf, nicht als Streifen darunter. */
.contact-l{ grid-column:1 / span 5; }
.reach{ grid-column:7 / span 2; align-self:end; }
.reach > div{ padding-block:16px; border-top:1px solid var(--hairline); }
.reach > div:last-child{ border-bottom:1px solid var(--hairline); }
.reach .m{ display:block; margin-bottom:5px; }
.reach a,.reach span.v{ font-size:16.5px; color:var(--ink); }
.reach a{ transition:color .12s var(--out-quart); }
.reach a:hover{ color:var(--blue); }

/* ============================================================
   FOOTER — Wortmarke ueberformatig, vom Viewport angeschnitten
   ============================================================ */
footer{ border-top:1px solid var(--hairline); padding-top:30px; overflow:hidden; }
.foot-bar{
  display:flex; flex-wrap:wrap; align-items:baseline;
  justify-content:space-between; gap:14px 30px;
  padding-bottom:26px;
}
.foot-links{ display:flex; flex-wrap:wrap; gap:22px; list-style:none; }
.foot-links a{ font-size:14px; color:var(--mute-aa); transition:color .12s var(--out-quart); }
.foot-links a:hover{ color:var(--ink); }
.foot-legal{ font-size:13px; color:var(--mute-aa); line-height:1.65; padding-bottom:22px; }
/* Fuellt die Zeile randlos aus und sitzt exakt auf der Grundlinie. */
.word{
  font-size:22vw;
  font-weight:500; line-height:1; letter-spacing:-0.055em;
  color:var(--hairline);
  /* aus den Fontmetriken gerechnet: Grundlinie liegt bei 0.86em,
     also schneidet -0.14em die Zeile exakt auf der Grundlinie ab */
  margin-bottom:-0.14em;
  user-select:none;
  hyphens:none; white-space:nowrap;
}

/* ============================================================
   REVEAL — 12px, 500ms, einmal, nur auf Blockebene.
   Nicht auf Fliesstext: was gelesen wird, muss da sein.
   ============================================================ */
.rv{ opacity:0; transform:translateY(12px); transition:opacity .5s var(--out-expo), transform .5s var(--out-expo); }
.rv.in{ opacity:1; transform:none; }
.rv-1{ transition-delay:.07s; }
.rv-2{ transition-delay:.14s; }

/* Signatur-Sequenz im Referenzblock */
.tf.go .scan{ animation:scan 2.1s var(--out-quart) .15s forwards; }
@keyframes scan{ 0%{ left:0; opacity:0; } 9%{ opacity:.85; } 90%{ opacity:.85; } 100%{ left:100%; opacity:0; } }
.tf.go .rail i{ animation:rail 1.3s var(--out-quart) .4s forwards; }
@keyframes rail{ to{ width:100%; } }
.tf.go .rail::after{ border-color:var(--blue); transition-delay:1.4s; }
.tf.go .dr{ animation:dr .4s var(--out-quart) forwards; }
.tf.go .dr:nth-of-type(1){ animation-delay:.80s; }
.tf.go .dr:nth-of-type(2){ animation-delay:.93s; }
.tf.go .dr:nth-of-type(3){ animation-delay:1.06s; }
.tf.go .dr:nth-of-type(4){ animation-delay:1.19s; }
.tf.go .dr:nth-of-type(5){ animation-delay:1.32s; }
.tf.go .dr:nth-of-type(6){ animation-delay:1.45s; }
@keyframes dr{ to{ transform:scaleX(1); } }

/* ============================================================
   SEITENKOPF — der Auftakt jeder Unterseite.
   Bewusst kleiner als der Hero der Startseite: die Startseite
   behaelt ihre Stimme, die Unterseiten arbeiten.
   ============================================================ */
.phead{
  padding-top:calc(var(--nav-h) + clamp(52px, 6vw, 84px));
  padding-bottom:clamp(40px, 5vw, 68px);
  border-bottom:1px solid var(--hairline);
  overflow:clip;
}
.phead-copy{ grid-column:1 / span 5; }
.phead .m{ display:block; margin-bottom:16px; }
.phead h1{ margin-bottom:24px; }
.phead-mk{ grid-column:6 / span 3; align-self:center; }
.phead-mk .mk{
  top:50%; left:16%;
  width:min(150%, 44vw);
  translate:0 -50%;
  color:var(--blue);
  opacity:.10;
}

/* Brotkrume — eine Zeile, damit klar ist wo man steht */
.crumb{ display:flex; align-items:center; gap:9px; margin-bottom:20px; }
.crumb a{ color:var(--mute-aa); transition:color .12s var(--out-quart); }
.crumb a:hover{ color:var(--blue); }
.crumb span{ color:var(--mute); }

/* ============================================================
   TEASER — die Startseite verweist, statt alles zu zeigen.
   Ganze Flaeche klickbar, Pfeil als Richtungssignal.
   ============================================================ */
.teases{ border-top:1px solid var(--hairline); }
.tease{
  display:grid; grid-template-columns:repeat(8,1fr); gap:var(--gap);
  align-items:start;
  padding-block:clamp(26px,3.2vw,40px);
  border-bottom:1px solid var(--hairline);
  transition:background .14s var(--out-quart);
}
.tease:hover{ background:var(--paper-soft); }
.tease-n{ grid-column:1 / span 1; }
.tease-t{ grid-column:2 / span 3; }
.tease-p{ grid-column:5 / span 3; }
.tease-go{ grid-column:8 / span 1; justify-self:end; align-self:center; }
.tease-t h3{
  font-size:21px; font-weight:500; line-height:1.28;
  letter-spacing:-0.014em; color:var(--ink);
}
.tease-p p{ font-size:16.5px; line-height:1.62; }
.tease-go svg{
  width:20px; height:20px; stroke:var(--blue); fill:none; stroke-width:1.6;
  transition:transform .16s var(--out-quart);
}
.tease:hover .tease-go svg{ transform:translateX(4px); }

/* ============================================================
   INHALTSBLOECKE der Unterseiten
   ============================================================ */
/* Zwei Spalten Fliesstext mit Zwischentiteln */
.body-cols{ row-gap:clamp(38px,4.4vw,60px); }
.body-cols h2{ margin-bottom:14px; }
.body-cols .prose + h2{ margin-top:clamp(30px,3.4vw,46px); }
.body-cols .prose + .prose{ margin-top:14px; }

/* Positiv- und Negativliste nebeneinander */
.yn{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); }
.yn > div{ padding-top:18px; border-top:1px solid var(--ink); }
.yn > div.no{ border-top-color:var(--hairline-2); }
.yn ul{ list-style:none; margin-top:14px; }
.yn li{
  display:flex; gap:10px; align-items:flex-start;
  padding-block:9px; font-size:16px; line-height:1.55;
  border-bottom:1px solid var(--hairline);
}
.yn li svg{ margin-top:4px; }
.yn .no li{ color:var(--mute-aa); }
.yn .no li::before{
  content:""; flex:none; width:12px; height:1.5px;
  background:var(--hairline-2); margin-top:11px;
}

/* Frage und Antwort */
.qa{ border-top:1px solid var(--hairline); }
.qa > div{
  display:grid; grid-template-columns:repeat(8,1fr); gap:var(--gap);
  padding-block:clamp(22px,2.6vw,32px);
  border-bottom:1px solid var(--hairline);
}
.qa dt{ grid-column:1 / span 3; font-size:18px; font-weight:500; color:var(--ink); letter-spacing:-0.012em; }
.qa dd{ grid-column:4 / span 5; font-size:16.5px; line-height:1.62; }

/* ============================================================
   FORMULAR — Linien statt Kaesten. Ein Rahmen um jedes Feld
   waere vier Rahmen zu viel fuer diese Seite.
   ============================================================ */
.form{ margin-top:8px; }
.f-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); }
.fg{ display:flex; flex-direction:column; padding-top:18px; }
.fg label{
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--mute);
  margin-bottom:7px;
}
.fg input,.fg textarea{
  font:inherit; font-size:16.5px; color:var(--ink);
  background:none; border:none;
  border-bottom:1px solid var(--hairline-2);
  padding:7px 0 9px;
  transition:border-color .14s var(--out-quart);
}
.fg textarea{ resize:vertical; min-height:104px; line-height:1.58; }
.fg input::placeholder,.fg textarea::placeholder{ color:var(--mute); }
.fg input:focus,.fg textarea:focus{
  outline:none; border-bottom-color:var(--blue);
}
.fg input:user-invalid,.fg textarea:user-invalid{ border-bottom-color:#9A3B3B; }

.f-do{ margin-top:32px; display:flex; flex-wrap:wrap; align-items:center; gap:16px 24px; }
.f-note{ font-size:13.5px; line-height:1.6; color:var(--mute-aa); max-width:52ch; margin-top:20px; }
.f-note a{ color:var(--blue); border-bottom:1px solid var(--hairline-2); }

.f-status{ font-size:15px; line-height:1.5; }
.f-status.ok{ color:var(--blue); }
.f-status.bad{ color:#9A3B3B; }

/* ============================================================
   BREAKPOINTS
   ============================================================ */
@media (max-width:1024px){
  .c-1-5,.c-1-6,.c-1-4,.c-1-2,
  .c-3-6,.c-4-5,.c-5-4,
  .band-l,.band-r,
  .ref-vis,.ref-spec,
  .hero-copy,.contact-l,.reach,.about-l{ grid-column:1 / span 8; }

  /* muss die Spezifitaet von `.sect-head .c-5-4` erreichen, sonst
     bleibt der Absatz auch schmal, wenn nur noch eine Spalte da ist */
  .sect-head .c-5-4{ grid-column:1 / span 8; }

  .hero-mk,.band-mk,.about-mk{ display:none; }
  .band-r{ margin-top:44px; }
  .ref-spec{ margin-top:40px; }
  .reach{ margin-top:52px; }
  .sect-head .c-5-4{ margin-top:20px; }

  .row-n{ grid-column:1 / span 8; }
  .row-t{ grid-column:1 / span 8; margin-top:6px; }
  .row-p{ grid-column:1 / span 8; margin-top:12px; }

  .phead-copy{ grid-column:1 / span 8; }
  .phead-mk{ display:none; }

  /* Teaser: Nummer bleibt links stehen, der Rest rueckt darunter */
  .tease-n{ grid-column:1 / span 8; }
  .tease-t{ grid-column:1 / span 7; margin-top:6px; }
  .tease-p{ grid-column:1 / span 7; margin-top:10px; }
  .tease-go{ grid-column:8 / span 1; grid-row:2; align-self:start; }

  .qa dt{ grid-column:1 / span 8; }
  .qa dd{ grid-column:1 / span 8; margin-top:10px; }
}

@media (max-width:860px){
  .nav-links{ display:none; }
  .nav-toggle{ display:block; }
  .tf{ grid-template-columns:1fr; gap:22px; }
  .tf-mid{ flex-direction:row; gap:14px; justify-content:center; }
  .rail{ width:80px; }
  .papers{ height:220px; }
}

@media (max-width:600px){
  body{ font-size:16px; }
  .strip ul{ grid-template-columns:1fr; }
  .strip li + li{ border-left:none; padding-left:0; border-top:1px solid var(--hairline); }
  .strip li{ padding:12px 0; }
  .spec > div{ grid-template-columns:1fr; gap:5px; }
  .act{ width:100%; justify-content:center; }
  .hero-do,.contact-do{ flex-direction:column; align-items:stretch; }
  /* align-self, sonst zieht sich die Unterlinie ueber die volle
     Breite und liest sich als Trennlinie */
  .hero-do .lk,.contact-do .lk{ align-self:center; }

  .yn{ grid-template-columns:1fr; }
  .yn > div.no{ margin-top:34px; }
  .f-row{ grid-template-columns:1fr; }
  .f-do{ flex-direction:column; align-items:stretch; }
  .f-do .act{ order:-1; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .rv{ opacity:1; transform:none; }
  .drawer a{ opacity:1; transform:none; }
  .scan{ display:none; }
  .rail i{ width:100% !important; }
  .rail::after{ border-color:var(--blue); }
  .dr{ transform:scaleX(1) !important; }
  .bleed .mk{ animation:none; }
}