/* ============================================================================
   PZ CONSULTING — Digital Brand System
   „Konstruktion" — abgeleitet aus der Logo-DNA:
   Kreis · Haarlinie · Diagonale 55° · Rahmenbruch · Outline vs. Solid
   ----------------------------------------------------------------------------
   1  Tokens
   2  Reset & Basis
   3  Typografie
   4  Raster & Layout
   5  Grafiksystem (Linien, Kreise, Diagonalen)
   6  Navigation
   7  Preloader & Cursor
   8  Komponenten
   9  Sektionen
   10 Formular
   11 Footer
   12 Motion & Reduced Motion
   13 Responsive
   ========================================================================== */

/* ------------------------------------------------------------ 0 SCHRIFTEN
   Selbst gehostet (kein Google-Fonts-CDN) — DSGVO-konform, keine IP-Übertragung
   an Dritte und schneller im Erstaufbau. Quelle: Fontsource (SIL OFL 1.1).      */
@font-face{
  font-family:"Jost";font-style:normal;font-display:swap;font-weight:300 500;
  src:url("../fonts/jost-var.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,
    U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Jost";font-style:normal;font-display:swap;font-weight:300 500;
  src:url("../fonts/jost-var-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,
    U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Inter";font-style:normal;font-display:swap;font-weight:300 600;
  src:url("../fonts/inter-var.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,
    U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Inter";font-style:normal;font-display:swap;font-weight:300 600;
  src:url("../fonts/inter-var-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,
    U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Instrument Serif";font-style:italic;font-display:swap;font-weight:400;
  src:url("../fonts/instrument-serif-italic.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,
    U+2215,U+FEFF,U+FFFD;
}

/* ---------------------------------------------------------------- 1 TOKENS */
:root{
  /* Farbwelt — reduziert, warm-achromatisch */
  --obsidian:#101112;
  --ink:#08090A;
  --carbon:#17181A;
  --graphite:#232427;
  --slate:#3A3C40;
  --bone:#F2EFE9;
  --paper:#FAF8F4;
  --limestone:#DED7C9;
  --sand:#C9C0AE;
  --signal:#C2542F;

  /* ------------------------------------------------------------------------
     Zwei vollständige Rollensätze. Die Website kennt keine „dunklen
     Sektionen", sondern nur INVERTIERTE: `.inv` dreht immer gegen den
     aktuellen Grund. Im Hellmodus werden diese Bänder obsidian, im
     Dunkelmodus bone. Der Rhythmus der Seite bleibt dadurch in beiden
     Darstellungen identisch — genau wie das Logo, das auf der Visitenkarte
     als weiße Scheibe mit schwarzem Monogramm ebenso funktioniert.
     ---------------------------------------------------------------------- */
  --l-bg:#F2EFE9;  --l-fg:#101112;
  --l-mute:rgba(16,17,18,.58);   --l-faint:rgba(16,17,18,.36);
  --l-line:rgba(16,17,18,.13);   --l-lines:rgba(16,17,18,.26);
  --l-surf:rgba(16,17,18,.035);  --l-geo:rgba(16,17,18,.065);

  --d-bg:#101112;  --d-fg:#F2EFE9;
  --d-mute:rgba(242,239,233,.6); --d-faint:rgba(242,239,233,.34);
  --d-line:rgba(242,239,233,.14);--d-lines:rgba(242,239,233,.3);
  --d-surf:rgba(242,239,233,.04);--d-geo:rgba(242,239,233,.09);

  /* Rollen — Hellmodus (Vorgabe) */
  --bg:var(--l-bg);
  --fg:var(--l-fg);
  --fg-mute:var(--l-mute);
  --fg-faint:var(--l-faint);
  --line:var(--l-line);
  --line-strong:var(--l-lines);
  --surface:var(--l-surf);
  --geo:var(--l-geo);
  color-scheme:light;

  /* Geometrie */
  --angle:55deg;
  --angle-co:35deg;
  --hair:1px;

  /* Raster */
  --pad:clamp(20px,5vw,88px);
  --maxw:1680px;
  --gut:clamp(14px,1.6vw,28px);
  --col:calc((100% - 11 * var(--gut)) / 12);

  /* Rhythmus */
  --s-1:clamp(6px,.6vw,10px);
  --s-2:clamp(12px,1.2vw,20px);
  --s-3:clamp(20px,2vw,34px);
  --s-4:clamp(32px,3.4vw,56px);
  --s-5:clamp(52px,6vw,96px);
  --s-6:clamp(80px,10vw,168px);
  --s-7:clamp(110px,15vw,248px);

  /* Typo */
  --f-display:"Jost","Futura","Century Gothic",system-ui,sans-serif;
  --f-text:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --f-edit:"Instrument Serif",Georgia,"Times New Roman",serif;

  /* Motion */
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-io:cubic-bezier(.65,.05,.15,1);
  --t-fast:.28s;
  --t-mid:.6s;
  --t-slow:1.1s;
}

/* Utilities */
.inv{background:var(--bg)}
.bleed{width:100vw;margin-left:calc(50% - 50vw)}
.fig-wrap{margin:0}
.stack{display:grid;gap:var(--s-3)}
.stack-2{display:grid;gap:var(--s-2)}
.row{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center}
.mt-3{margin-top:var(--s-3)}.mt-4{margin-top:var(--s-4)}.mt-5{margin-top:var(--s-5)}
.mb-3{margin-bottom:var(--s-3)}.mb-4{margin-bottom:var(--s-4)}.mb-5{margin-bottom:var(--s-5)}

/* --------------------------------------------------- Invertierte Bereiche
   `color` muss jeweils mitgesetzt werden: eine reine Token-Umbelegung würde
   die bereits am <body> berechnete Textfarbe nicht überschreiben.           */
.inv,
.menu,
.theme-dark{
  color:var(--fg);
  --bg:var(--d-bg);
  --fg:var(--d-fg);
  --fg-mute:var(--d-mute);
  --fg-faint:var(--d-faint);
  --line:var(--d-line);
  --line-strong:var(--d-lines);
  --surface:var(--d-surf);
  --geo:var(--d-geo);
  color-scheme:dark;
}

/* ------------------------------------------------------------ DUNKELMODUS */
:root[data-theme="dark"]{
  --bg:var(--d-bg);
  --fg:var(--d-fg);
  --fg-mute:var(--d-mute);
  --fg-faint:var(--d-faint);
  --line:var(--d-line);
  --line-strong:var(--d-lines);
  --surface:var(--d-surf);
  --geo:var(--d-geo);
  color-scheme:dark;
}
:root[data-theme="dark"] .inv,
:root[data-theme="dark"] .menu,
:root[data-theme="dark"] .theme-dark{
  color:var(--fg);
  --bg:var(--l-bg);
  --fg:var(--l-fg);
  --fg-mute:var(--l-mute);
  --fg-faint:var(--l-faint);
  --line:var(--l-line);
  --line-strong:var(--l-lines);
  --surface:var(--l-surf);
  --geo:var(--l-geo);
  color-scheme:light;
}

/* ------------------------------------------------------- 2 RESET & BASIS */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--f-text);
  font-size:clamp(15.5px,.52vw + 14px,17.5px);
  line-height:1.62;
  font-weight:350;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-synthesis-weight:none;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}

img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{margin:0;padding:0;list-style:none}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
hr{border:0;height:var(--hair);background:var(--line);margin:0}

::selection{background:var(--fg);color:var(--bg)}

:focus-visible{
  outline:2px solid var(--fg);
  outline-offset:4px;
  border-radius:1px;
}

.skip{
  position:fixed;top:0;left:0;z-index:200;
  transform:translateY(-120%);
  background:var(--obsidian);color:var(--bone);
  padding:14px 22px;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;
  transition:transform .2s var(--e-out);
}
.skip:focus{transform:translateY(0)}

.sr{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* ------------------------------------------------------------ 3 TYPOGRAFIE */
.display,
h1,h2,h3,h4{
  font-family:var(--f-display);
  font-weight:400;
  line-height:.94;
  letter-spacing:-.035em;
  margin:0;
  text-wrap:balance;
}

.d-xl{font-size:clamp(2.75rem,7.6vw,8.2rem);line-height:.95;letter-spacing:-.042em}
.d-lg{font-size:clamp(2.4rem,5.7vw,5.4rem);line-height:.96;letter-spacing:-.038em}
.d-md{font-size:clamp(2rem,3.9vw,3.5rem);line-height:.98;letter-spacing:-.032em}
.d-sm{font-size:clamp(1.35rem,2.1vw,2rem);line-height:1.08;letter-spacing:-.022em}

/* ---------------------------------------------------------- Akzentschnitt
   Je Headline steht genau ein Wort in der Editorial-Kursiven. Das ist der
   zweite und einzige typografische Register der Seite: die geometrische
   Grotesk trägt die Aussage, die Kursive setzt die Betonung.

   Ein früherer Versuch setzte dieses Wort im Konturschnitt
   (-webkit-text-stroke). Das erzeugt bei Displaygrößen mit enger Laufweite
   sichtbare Innennähte und überlappende Konturen — verworfen.              */
.acc,
.edit{
  font-family:var(--f-edit);
  font-style:italic;
  font-weight:400;
  /* Instrument Serif läuft optisch kleiner als Jost und braucht weniger
     negative Laufweite */
  font-size:1.06em;
  letter-spacing:-.012em;
  padding-right:.03em;
}
/* Auf Obsidian wirken die feinen Haarstriche der Kursiven dünner als auf
   hellem Grund — eine minimale optische Korrektur gleicht das aus. */
.inv .acc,.theme-dark .acc,
.inv .edit,.theme-dark .edit{-webkit-text-stroke:.3px currentColor}

/* Label / Eyebrow — geometrische Grotesk, weit gesperrt (Wortmarken-DNA) */
.lbl{
  font-family:var(--f-display);
  font-weight:500;
  font-size:clamp(.63rem,.66vw,.735rem);
  letter-spacing:.245em;
  text-transform:uppercase;
  line-height:1.5;
  color:var(--fg-mute);
  font-feature-settings:"tnum" 1;
}
.lbl--fg{color:var(--fg)}

.idx{
  font-family:var(--f-display);
  font-weight:400;
  font-size:clamp(.63rem,.66vw,.735rem);
  letter-spacing:.2em;
  color:var(--fg-faint);
  font-variant-numeric:tabular-nums;
}

.lead{
  font-size:clamp(1.06rem,.55vw + .95rem,1.32rem);
  line-height:1.5;
  letter-spacing:-.014em;
  color:var(--fg);
  font-weight:350;
}
.body-mute{color:var(--fg-mute)}
.measure{max-width:60ch}
.measure-s{max-width:44ch}
.measure-xs{max-width:34ch}

/* --------------------------------------------------------- 4 RASTER/LAYOUT */
.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--pad);
}
.grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--gut);
}
.sec{position:relative;padding-block:var(--s-6)}
.sec--tight{padding-block:var(--s-5)}
.sec--tall{padding-block:var(--s-7)}

/* Konstruktionsraster — sichtbare Haarlinien im Hintergrund */
.raster{
  position:fixed;inset:0;
  z-index:0;pointer-events:none;
  display:flex;justify-content:center;
  opacity:0;
  transition:opacity 1.2s var(--e-out) .4s;
}
.raster.on{opacity:1}
.raster__in{
  width:100%;max-width:var(--maxw);
  padding-inline:var(--pad);
  display:grid;grid-template-columns:repeat(12,1fr);
  column-gap:var(--gut);
  height:100%;
}
.raster__in span{border-left:var(--hair) solid var(--line);opacity:.55}
.raster__in span:first-child{border-left-color:transparent}
@media (max-width:900px){
  .raster__in{grid-template-columns:repeat(4,1fr)}
  .raster__in span:nth-child(n+5){display:none}
}

/* ------------------------------------------------- Markengeometrie (Grund)
   Überlebensgroße Kreise und 55°-Diagonalen aus der Logo-DNA. Sie liegen
   hinter allem, sind bewusst an der Wahrnehmungsschwelle gehalten und
   verschieben sich beim Scrollen unterschiedlich schnell — dadurch setzt
   sich die Komposition über die Seitenlänge immer wieder neu zusammen.     */
.geo{
  position:fixed;inset:0;z-index:0;
  pointer-events:none;overflow:hidden;
  opacity:0;transition:opacity 1.8s var(--e-out) .3s;
  contain:strict;
}
.geo.on{opacity:1}
/* Eine einzige Kompositionsebene für die gesamte Bodengeometrie. Sechs
   einzeln promotete Ebenen dieser Größe kosten beim Scrollen deutlich mehr
   als eine gemeinsame — nachgemessen in der Softwarerasterung. */
.geo{transform:translateZ(0)}
.geo > *{position:absolute;display:block}

.geo__ring{
  border-radius:50%;
  border:var(--hair) solid var(--geo);
}
/* Die große Scheibe — rechts oben, bricht über zwei Ränder hinaus */
.geo__ring--a{
  width:min(96vmin,1180px);aspect-ratio:1;
  right:-16vmin;top:-22vmin;
}
/* Zweiter Kreis unten links, überlagert den ersten */
.geo__ring--b{
  width:min(58vmin,690px);aspect-ratio:1;
  left:-14vmin;bottom:-18vmin;
}
/* Kleiner konzentrischer Ring — der „Innenraum" des Monogramms */
.geo__ring--c{
  width:min(26vmin,320px);aspect-ratio:1;
  right:26vmin;bottom:14vmin;
}
.geo__ring--c::after{
  content:"";position:absolute;inset:16%;border-radius:50%;
  border:var(--hair) solid var(--geo);
}

/* Die 55°-Diagonale — vertikale Linie um 35° gekippt ergibt exakt den
   Winkel der Z-Achse im Logo (Messung: 54,65°). */
.geo__dia{
  width:var(--hair);height:220vmax;
  background:var(--geo);
  top:calc(50% - 110vmax);
  transform-origin:center;
  transform:rotate(35deg);
}
.geo__dia--a{left:62%}
.geo__dia--b{left:22%;opacity:.6}

/* Der Ausbruch — eine Horizontale, die über beide Ränder hinausläuft */
.geo__bar{
  left:-10vw;right:-10vw;height:var(--hair);
  background:var(--geo);
  top:38%;
}

/* Ambienter Ring mit 55°-Segment — die einzige Eigenbewegung im Hintergrund */
.geo__spin{
  width:min(70vmin,860px);aspect-ratio:1;
  left:-22vmin;top:8vmin;border-radius:50%;
  border:var(--hair) solid transparent;
  border-top-color:var(--geo);
  border-right-color:var(--geo);
}

@media (max-width:900px){
  /* Auf kleinen Flächen wird die Komposition sonst unruhig — und die
     Parallaxe kostet dort am meisten. Die Geometrie steht still. */
  .geo__ring--c,.geo__dia--b,.geo__spin{display:none}
  .geo__ring--a{width:120vmin;right:-34vmin;top:-30vmin}
  .geo__ring--b{width:80vmin}
}

/* --------------------------------------------- Geometrie in Bändern
   Invertierte Sektionen haben einen eigenen Grund und verdecken die
   Bodenebene. Sie bekommen deshalb ihre eigene, im Band beschnittene
   Komposition — Kreis und Diagonale, gleiche Sprache, eigener Rhythmus.   */
.sec.inv{overflow:hidden;overflow:clip}
.sec.inv::before,
.sec.inv::after{
  content:"";position:absolute;pointer-events:none;z-index:0;
}
.sec.inv::before{
  width:min(78vw,880px);aspect-ratio:1;border-radius:50%;
  border:var(--hair) solid var(--geo);
  left:-16vw;top:-26%;
  transform:translate3d(0,var(--py,0px),0);
}
.sec.inv::after{
  width:var(--hair);height:420%;
  background:var(--geo);
  right:22%;top:-160%;
  transform-origin:center;
  transform:translate3d(0,var(--py2,0px),0) rotate(35deg);
}
/* Nur der Inhaltscontainer wird angehoben — ein pauschales `> *` würde die
   absolute Positionierung dekorativer Kinder wie .cta__ring überschreiben. */
.sec.inv > .wrap{position:relative;z-index:1}
/* Sektionen mit eigener Grafik bekommen keine zweite Hintergrundgeometrie.
   Die Klassen müssen mitgeführt werden, sonst gewinnt `.sec.inv::before`
   per Spezifität. */
.sec.inv.cta::before,.sec.inv.cta::after,
.sec.inv.sec--plain::before,.sec.inv.sec--plain::after{content:none}

main{position:relative;z-index:1}

/* --------------------------------------------------- 5 GRAFIKSYSTEM */

/* Haarlinie, die sich beim Scrollen zeichnet */
.rule{
  height:var(--hair);
  background:var(--line-strong);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform 1.4s var(--e-out);
  width:100%;
}
.rule.in{transform:scaleX(1)}
.rule--r{transform-origin:right center}
.vrule{
  width:var(--hair);
  background:var(--line);
  transform:scaleY(0);transform-origin:top center;
  transition:transform 1.2s var(--e-out);
}
.vrule.in{transform:scaleY(1)}

/* Der Ausbruch — Linie bricht bewusst aus dem Container aus */
.rule--break{width:calc(100% + var(--pad));margin-right:calc(var(--pad) * -1)}

/* 55°-Schnitt als Ornament */
.cut{
  --cut-w:clamp(56px,7vw,120px);
  width:var(--cut-w);height:calc(var(--cut-w) * 1.428);
  position:relative;flex:none;
}
.cut::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom right,transparent calc(50% - .5px),var(--line-strong) calc(50% - .5px),var(--line-strong) calc(50% + .5px),transparent calc(50% + .5px));
}

/* Kreis — Markenzeichen-Primitiv */
.dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--fg);flex:none;
}
.dot--o{background:none;border:var(--hair) solid var(--fg)}
.dot--live{
  background:var(--signal);
  box-shadow:0 0 0 0 rgba(194,84,47,.55);
  animation:pulse 2.6s var(--e-out) infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(194,84,47,.45)}
  70%{box-shadow:0 0 0 9px rgba(194,84,47,0)}
  100%{box-shadow:0 0 0 0 rgba(194,84,47,0)}
}

/* Marke — Seitenverhältnis fest, damit height:1em eine Breite ergibt */
.mark{height:1em;width:1.038em;aspect-ratio:297.848/286.992;display:block;flex:none}
.mark path{fill:currentColor}

/* Bildrahmen mit 55°-Wipe-Reveal */
.fig{
  position:relative;overflow:hidden;
  background:var(--surface);
  isolation:isolate;
}
.fig img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.075);
  transition:transform 1.6s var(--e-out),filter .8s var(--e-out);
  will-change:transform;
}
.fig.in img{transform:scale(1)}
.fig::after{
  content:"";position:absolute;inset:-2px;z-index:2;
  background:var(--bg);
  transform-origin:right center;
  transform:skewX(-35deg) scaleX(1.35);
  transition:transform 1.15s var(--e-io);
}
.fig.in::after{transform:skewX(-35deg) scaleX(0)}
.fig--r::after{transform-origin:left center}

.fig figcaption{
  margin-top:var(--s-2);
  display:flex;gap:var(--s-2);align-items:baseline;
}

/* Ratio-Helfer */
.r-32{aspect-ratio:3/2}
.r-43{aspect-ratio:4/3}
.r-11{aspect-ratio:1/1}
.r-45{aspect-ratio:4/5}
.r-23{aspect-ratio:2/3}
.r-169{aspect-ratio:16/9}
.r-219{aspect-ratio:21/9}

/* --------------------------------------------------------- 6 NAVIGATION */
.head{
  position:fixed;top:0;left:0;right:0;z-index:90;
  transition:transform .55s var(--e-out),background .5s var(--e-out),color .5s var(--e-out);
  mix-blend-mode:normal;
}
.head--hidden{transform:translateY(-101%)}
.head--solid{
  background:color-mix(in srgb,var(--bg) 86%,transparent);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);
  backdrop-filter:blur(16px) saturate(1.3);
}
.head__in{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s-3);
  padding-block:clamp(16px,1.7vw,26px);
  position:relative;
}
.head__in::after{
  content:"";position:absolute;left:var(--pad);right:var(--pad);bottom:0;
  height:var(--hair);background:var(--line);
  transform:scaleX(0);transform-origin:left;
  transition:transform .9s var(--e-out);
}
.head--solid .head__in::after{transform:scaleX(1)}

.brand{display:flex;align-items:center;gap:.72em;font-size:clamp(1.5rem,2.2vw,1.9rem)}
.brand .mark{height:1.32em;transition:transform .7s var(--e-out)}
.brand:hover .mark{transform:rotate(-55deg)}
.brand__name{
  font-family:var(--f-display);font-weight:400;
  font-size:.5em;letter-spacing:.24em;text-transform:uppercase;
  line-height:1;padding-top:.14em;
}

.nav{display:flex;align-items:center;gap:clamp(18px,2.4vw,42px)}
.nav a{
  font-family:var(--f-display);
  font-size:clamp(.7rem,.72vw,.8rem);
  letter-spacing:.19em;text-transform:uppercase;font-weight:400;
  position:relative;padding-block:6px;
  color:var(--fg-mute);
  transition:color .35s var(--e-out);
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:var(--hair);
  background:currentColor;
  transform:scaleX(0);transform-origin:right;
  transition:transform .5s var(--e-out);
}
.nav a:hover,.nav a[aria-current="page"]{color:var(--fg)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}

/* Darstellungs-Umschalter — die Scheibe der Marke, vom 55°-Schnitt geteilt */
.tgl{
  width:36px;height:36px;flex:none;
  display:grid;place-items:center;
  border-radius:50%;position:relative;
  transition:background .4s var(--e-out);
}
.tgl:hover{background:var(--surface)}
.tgl__disc{
  width:16px;height:16px;border-radius:50%;
  border:var(--hair) solid var(--fg);
  background:linear-gradient(55deg,var(--fg) 0 50%,transparent 50% 100%);
  transition:transform .7s var(--e-io);
}
.tgl:hover .tgl__disc{transform:rotate(180deg)}
:root[data-theme="dark"] .tgl__disc{transform:rotate(180deg)}
:root[data-theme="dark"] .tgl:hover .tgl__disc{transform:rotate(360deg)}
.menu .tgl{width:auto;height:auto;border-radius:0;
  display:inline-flex;align-items:center;gap:.9em;padding:.4em 0}
.menu .tgl:hover{background:none}
.menu .tgl__label{
  font-family:var(--f-display);font-size:.78rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--fg-mute);
}

.burger{
  display:none;width:40px;height:40px;
  position:relative;margin-right:-8px;
}
.burger span{
  position:absolute;left:9px;right:9px;height:1px;background:var(--fg);
  transition:transform .45s var(--e-out),opacity .3s;
}
.burger span:nth-child(1){top:16px}
.burger span:nth-child(2){top:23px}
.is-open .burger span:nth-child(1){transform:translateY(3.5px) rotate(35deg)}
.is-open .burger span:nth-child(2){transform:translateY(-3.5px) rotate(-35deg)}
/* Bei offenem Overlay liegt der Kopf auf Obsidian — Marke und Icon invertieren */
.is-open .head{background:none!important;-webkit-backdrop-filter:none;backdrop-filter:none}
.is-open .head__in::after{transform:scaleX(0)}
.is-open .head{--fg:var(--d-fg);--surface:var(--d-surf);color:var(--fg)}
:root[data-theme="dark"].is-open .head{--fg:var(--l-fg);--surface:var(--l-surf)}
.is-open .brand{color:var(--fg)}
.is-open .burger span{background:var(--fg)}

/* Mobile Overlay */
.menu{
  position:fixed;inset:0;z-index:80;
  background:var(--bg);
  display:flex;flex-direction:column;justify-content:center;
  padding:var(--pad);
  clip-path:inset(0 0 100% 0);
  transition:clip-path .8s var(--e-io);
  visibility:hidden;
}
.is-open .menu{clip-path:inset(0 0 0 0);visibility:visible}
.menu ol{display:flex;flex-direction:column;gap:clamp(4px,1vw,10px)}
.menu li{display:flex;align-items:baseline;gap:clamp(12px,3vw,22px)}
.menu li .idx{flex:none;opacity:.55}
.menu a{
  font-family:var(--f-display);
  font-size:clamp(2.1rem,9vw,3.4rem);
  letter-spacing:-.035em;line-height:1.06;
  display:flex;align-items:baseline;gap:.5em;
  opacity:0;transform:translateY(24px);
  transition:opacity .6s var(--e-out),transform .6s var(--e-out);
}
.is-open .menu a{opacity:1;transform:none}
.menu li:nth-child(1) a{transition-delay:.16s}
.menu li:nth-child(2) a{transition-delay:.22s}
.menu li:nth-child(3) a{transition-delay:.28s}
.menu li:nth-child(4) a{transition-delay:.34s}
.menu li:nth-child(5) a{transition-delay:.4s}
.menu__foot{margin-top:var(--s-5);display:grid;gap:var(--s-2)}
.menu__foot .lbl{color:var(--fg-mute)}

/* ------------------------------------------------- 7 PRELOADER & CURSOR */
/* Der Ladevorgang zeigt immer die INVERSE des Seitengrunds — im Hellmodus
   die schwarze Scheibe mit hellem Monogramm, im Dunkelmodus die weiße
   Scheibe mit dunklem Monogramm, exakt wie auf der Visitenkarte. */
.pre{
  position:fixed;inset:0;z-index:120;
  --pre-bg:var(--d-bg);--pre-fg:var(--d-fg);
  background:var(--pre-bg);
  display:grid;place-items:center;
  transition:clip-path 1s var(--e-io),opacity .5s;
}
:root[data-theme="dark"] .pre{--pre-bg:var(--l-bg);--pre-fg:var(--l-fg)}
.pre--done{clip-path:inset(0 0 100% 0);pointer-events:none}
.pre svg{width:clamp(96px,13vw,168px);height:auto;overflow:visible}
.pre .p-disc{
  fill:var(--pre-fg);
  transform-origin:center;
  animation:discIn 1.05s var(--e-out) forwards;
}
.pre__bar{
  position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(28px,5vh,58px);
  height:var(--hair);background:color-mix(in srgb,var(--pre-fg) 16%,transparent);
  overflow:hidden;
}
.pre__bar i{
  display:block;height:100%;background:var(--pre-fg);
  transform:scaleX(0);transform-origin:left;
  animation:barIn 1.5s var(--e-io) forwards;
}
.pre__meta{
  position:absolute;left:var(--pad);bottom:clamp(44px,7vh,80px);
  color:color-mix(in srgb,var(--pre-fg) 45%,transparent);
}
@keyframes discIn{
  0%{transform:scale(.2) rotate(-55deg);opacity:0}
  60%{opacity:1}
  100%{transform:scale(1) rotate(0);opacity:1}
}
@keyframes monoIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes barIn{0%{transform:scaleX(0)}100%{transform:scaleX(1)}}

.cursor{
  position:fixed;top:0;left:0;z-index:150;
  width:9px;height:9px;border-radius:50%;
  background:var(--bone);mix-blend-mode:difference;
  pointer-events:none;opacity:0;
  transition:width .4s var(--e-out),height .4s var(--e-out),opacity .3s;
  will-change:transform;
}
.cursor.on{opacity:1}
.cursor.big{width:74px;height:74px}
@media (hover:none),(pointer:coarse){.cursor{display:none}}

/* -------------------------------------------------------- 8 KOMPONENTEN */

/* Button */
.btn{
  --bh:clamp(50px,4.2vw,62px);
  display:inline-flex;align-items:center;gap:1.1em;
  height:var(--bh);padding-inline:clamp(22px,2.2vw,32px);
  border:var(--hair) solid var(--fg);
  border-radius:999px;
  font-family:var(--f-display);
  font-size:clamp(.72rem,.74vw,.815rem);
  letter-spacing:.19em;text-transform:uppercase;font-weight:400;
  position:relative;overflow:hidden;isolation:isolate;
  transition:color .45s var(--e-out),border-color .45s var(--e-out);
  white-space:nowrap;
}
.btn::before{
  content:"";position:absolute;inset:-1px;z-index:-1;background:var(--fg);
  border-radius:inherit;
  transform:translateY(102%);
  transition:transform .55s var(--e-io);
}
.btn:hover{color:var(--bg)}
.btn:hover::before{transform:translateY(0)}
.btn__ar{
  width:1.05em;height:1.05em;flex:none;
  transition:transform .5s var(--e-out);
}
.btn:hover .btn__ar{transform:translateX(.32em)}
.btn--solid{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.btn--solid::before{background:var(--bg);}
.btn--solid:hover{color:var(--fg)}

/* Textlink mit 55°-Sweep */
.lnk{
  display:inline-flex;align-items:baseline;gap:.55em;
  position:relative;
  font-family:var(--f-display);
  font-size:clamp(.72rem,.74vw,.815rem);
  letter-spacing:.19em;text-transform:uppercase;
  padding-bottom:.55em;
}
.lnk::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:var(--hair);
  background:var(--fg);transform-origin:right;transform:scaleX(1);
  transition:transform .45s var(--e-io);
}
.lnk:hover::after{transform:scaleX(0)}
.lnk .btn__ar{width:.9em;height:.9em;transition:transform .5s var(--e-out)}
.lnk:hover .btn__ar{transform:translate(.3em,-.3em)}

/* Reveal-Basis */
.rv{opacity:0;transform:translateY(28px);transition:opacity 1s var(--e-out),transform 1s var(--e-out)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}
.rv-d3{transition-delay:.24s}.rv-d4{transition-delay:.32s}
.rv-d5{transition-delay:.4s}.rv-d6{transition-delay:.48s}

/* Zeilenweiser Headline-Reveal — Unterlängen dürfen nicht abgeschnitten werden */
.ln{display:block;overflow:hidden;padding-bottom:.19em;margin-bottom:-.19em}
.ln > span{
  display:block;
  transform:translateY(105%) rotate(2.5deg);
  transform-origin:left bottom;
  transition:transform 1.15s var(--e-out);
}
.in .ln > span,.ln.in > span{transform:none}
.ln:nth-child(2) > span{transition-delay:.09s}
.ln:nth-child(3) > span{transition-delay:.18s}
.ln:nth-child(4) > span{transition-delay:.27s}

/* Marquee */
.mq{
  display:flex;overflow:hidden;
  border-block:var(--hair) solid var(--line);
  padding-block:clamp(16px,1.6vw,26px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.mq__t{
  display:flex;flex:none;gap:clamp(28px,3.6vw,60px);align-items:center;
  padding-right:clamp(28px,3.6vw,60px);
  animation:mq 42s linear infinite;
}
.mq:hover .mq__t{animation-play-state:paused}
.mq__t span{
  font-family:var(--f-display);
  font-size:clamp(.72rem,.78vw,.86rem);
  letter-spacing:.22em;text-transform:uppercase;white-space:nowrap;
  color:var(--fg-mute);
}
@keyframes mq{to{transform:translateX(-100%)}}

/* --------------------------------------------------------- 9 SEKTIONEN */

/* HERO */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding-top:clamp(120px,16vh,190px);
  padding-bottom:clamp(24px,4vh,50px);
  overflow:hidden;
}
.hero__grid{align-items:end;row-gap:var(--s-4)}
.hero__type{grid-column:1/span 10;position:relative;z-index:2}
.hero .d-xl{
  /* Rahmenbruch: Headline darf über das Raster hinauslaufen */
  margin-left:-.055em;
}
.hero__eyebrow{
  display:flex;align-items:center;gap:var(--s-2);
  margin-bottom:clamp(22px,3vw,44px);
}
.hero__eyebrow .rule{width:clamp(30px,5vw,84px);flex:none}
.hero__sub{
  grid-column:1/span 5;
  align-self:end;
}
.hero__media{
  position:absolute;
  right:calc(var(--pad) * -.15);
  top:0;bottom:0;
  width:min(40vw,560px);
  z-index:1;
}
.hero__media .fig{height:100%}
.hero__media::after{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(to right,var(--bg) 0%,rgba(0,0,0,0) 42%),
             linear-gradient(to top,var(--bg) 0%,rgba(0,0,0,0) 26%),
             /* hält die Navigation über dem Bild lesbar */
             linear-gradient(to bottom,var(--bg) 0%,color-mix(in srgb,var(--bg) 55%,transparent) 7%,rgba(0,0,0,0) 15%);
}
.hero__foot{
  margin-top:var(--s-5);
  display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-4);
  align-items:center;justify-content:space-between;
  padding-top:var(--s-2);
  position:relative;z-index:2;
}
.hero__scroll{display:flex;align-items:center;gap:.8em}
.hero__scroll i{
  display:block;width:1px;height:26px;background:var(--fg-faint);
  position:relative;overflow:hidden;
}
.hero__scroll i::after{
  content:"";position:absolute;inset:0;background:var(--fg);
  animation:scrollTick 2.2s var(--e-io) infinite;
}
@keyframes scrollTick{
  0%{transform:translateY(-100%)}
  55%{transform:translateY(0)}
  100%{transform:translateY(100%)}
}

/* Statement / Manifest */
.stmt__grid{row-gap:var(--s-4)}
.stmt__lbl{grid-column:1/span 3}
.stmt__body{grid-column:4/span 9}
.stmt__body .d-md{margin-bottom:var(--s-4)}

/* Pillars — Strategy / Transformation / Growth */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.pil{
  position:relative;
  padding:var(--s-4) 0 var(--s-5);
  padding-right:var(--gut);
}
.pil + .pil{padding-left:clamp(20px,2.6vw,44px)}
.pil + .pil::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:var(--hair);
  background:var(--line);
  transform:scaleY(0);transform-origin:top;
  transition:transform 1.1s var(--e-out);
}
.pil.in + .pil::before,.pil + .pil.in::before{transform:scaleY(1)}
.pil__n{display:flex;align-items:center;gap:.7em;margin-bottom:var(--s-3)}
.pil h3{margin-bottom:var(--s-2)}
.pil__de{color:var(--fg-faint);font-family:var(--f-display);letter-spacing:.02em;
  font-size:clamp(.86rem,.95vw,1rem);margin-bottom:var(--s-3);display:block}

/* Leistungs-Index — gepinnte Liste mit Bildwechsel */
.svc{position:relative}
.svc__grid{align-items:start}
.svc__list{grid-column:1/span 7}
.svc__sticky{
  grid-column:9/span 4;
  position:sticky;top:clamp(96px,13vh,150px);
}
.svc__stage{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--surface)}
.svc__stage img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.06);
  transition:opacity .8s var(--e-out),transform 1.4s var(--e-out);
}
.svc__stage img.on{opacity:1;transform:scale(1)}

.item{
  position:relative;display:block;
  padding-block:clamp(24px,2.7vw,40px);
  border-top:var(--hair) solid var(--line);
}
.item:last-child{border-bottom:var(--hair) solid var(--line)}
.item__hd{
  display:flex;align-items:baseline;gap:clamp(14px,1.6vw,26px);
  cursor:pointer;
}
.item__hd h3{
  flex:1;
  transition:transform .55s var(--e-out),opacity .45s;
}
.item:hover .item__hd h3,.item.act .item__hd h3{transform:translateX(clamp(6px,.8vw,14px))}
.item__pl{
  width:1.1em;height:1.1em;flex:none;position:relative;align-self:center;
  transition:transform .55s var(--e-out);
}
.item__pl::before,.item__pl::after{
  content:"";position:absolute;background:var(--fg);
  transition:transform .5s var(--e-out),opacity .4s;
}
.item__pl::before{left:0;right:0;top:50%;height:1px;transform:translateY(-.5px)}
.item__pl::after{top:0;bottom:0;left:50%;width:1px;transform:translateX(-.5px)}
.item.act .item__pl{transform:rotate(-55deg)}
.item.act .item__pl::after{opacity:0}
.item__body{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .7s var(--e-io);
}
.item.act .item__body{grid-template-rows:1fr}
.item__body > div{overflow:hidden}
.item__body p{padding-top:var(--s-3);max-width:52ch;color:var(--fg-mute)}
.item__tags{
  display:flex;flex-wrap:wrap;
  gap:.55em .5em;
  padding-top:var(--s-3);padding-bottom:var(--s-1);
}
.item__tags li{
  --tag-pad:1.24em;
  --tag-track:.14em;
  font-family:var(--f-display);
  font-size:.7rem;
  font-weight:400;
  letter-spacing:var(--tag-track);
  text-transform:uppercase;
  line-height:1;
  color:var(--fg-mute);
  border:var(--hair) solid var(--line-strong);
  border-radius:999px;
  /* Optische Zentrierung: die Sperrung hängt hinter dem letzten Zeichen einen
     Leerraum an. Ohne Ausgleich säße die Wortgruppe sichtbar links. Links wird
     deshalb um genau diesen Betrag mehr gepolstert als rechts. Vertikal
     brauchen Versalien mehr Raum oben, weil die Unterlängenzone leer bleibt. */
  padding:.72em calc(var(--tag-pad) - var(--tag-track)) .6em var(--tag-pad);
  flex:0 0 auto;white-space:nowrap;
  transition:border-color .4s var(--e-out),color .4s var(--e-out),
             background-color .4s var(--e-out);
}
.item.act .item__tags li:hover{
  color:var(--fg);
  border-color:var(--fg);
}

/* Prozess-Schritte */
.steps{display:grid;gap:0}
.step{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);
  gap:var(--s-4);
  padding-block:clamp(30px,3.6vw,58px);
  border-top:var(--hair) solid var(--line);
  position:relative;
}
.step:last-child{border-bottom:var(--hair) solid var(--line)}
.step::after{
  content:"";position:absolute;left:0;top:-1px;height:var(--hair);width:100%;
  background:var(--fg);transform:scaleX(0);transform-origin:left;
  transition:transform 1s var(--e-out);
}
.step.in::after{transform:scaleX(1)}
.step__hd{display:flex;gap:var(--s-3);align-items:baseline}
.step__body p{color:var(--fg-mute);max-width:54ch}

/* Prinzipien-Grid */
.princ{display:grid;grid-template-columns:repeat(2,1fr);gap:0}
.prin{
  padding:clamp(26px,3vw,44px) clamp(24px,3vw,48px) clamp(30px,3.4vw,52px) 0;
  border-top:var(--hair) solid var(--line);
  position:relative;
}
.prin:nth-child(2n){padding-left:clamp(24px,3vw,48px);padding-right:0}
.prin:nth-child(2n)::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:var(--hair);background:var(--line);
}
.prin h4{margin-bottom:var(--s-2)}
.prin p{color:var(--fg-mute);max-width:40ch}

/* Fakten-Reihe */
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border-top:var(--hair) solid var(--line);border-bottom:var(--hair) solid var(--line)}
.fact{padding:clamp(28px,3.2vw,48px) var(--gut) clamp(30px,3.4vw,50px) 0;position:relative}
.fact + .fact{padding-left:clamp(22px,2.8vw,46px)}
.fact + .fact::before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--hair);background:var(--line)}
.fact strong{
  display:block;font-family:var(--f-display);font-weight:400;
  font-size:clamp(1.5rem,2.4vw,2.2rem);letter-spacing:-.03em;line-height:1.05;
  margin-bottom:var(--s-2);
}
.fact p{color:var(--fg-mute);font-size:.94em;max-width:32ch}

/* Editorial Split */
.split{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);row-gap:var(--s-4);align-items:center}
.split__media{grid-column:1/span 5}
.split__body{grid-column:7/span 6}
.split--r .split__media{grid-column:8/span 5;order:2}
.split--r .split__body{grid-column:1/span 6;order:1}

/* CTA */
.cta{position:relative;overflow:hidden}
.cta__grid{row-gap:var(--s-4);align-items:end}
.cta__type{grid-column:1/span 7}
.cta__side{grid-column:9/span 4;display:grid;gap:var(--s-3)}
.cta__ring{
  position:absolute;
  right:-14vw;top:50%;transform:translateY(-50%);
  width:min(52vw,700px);aspect-ratio:1;border-radius:50%;
  border:var(--hair) solid var(--geo);
  pointer-events:none;
}
.cta__ring::before{
  content:"";position:absolute;inset:14%;border-radius:50%;
  border:var(--hair) solid var(--geo);
}
.cta__ring::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:linear-gradient(var(--angle),transparent 49.6%,var(--geo) 49.6%,var(--geo) 50.4%,transparent 50.4%);
}

/* Kontaktkarten */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border-top:var(--hair) solid var(--line)}
.card{
  padding:clamp(28px,3vw,44px) var(--gut) clamp(32px,3.4vw,52px) 0;
  position:relative;display:flex;flex-direction:column;gap:var(--s-2);
}
.card + .card{padding-left:clamp(22px,2.6vw,44px)}
.card + .card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--hair);background:var(--line)}
.card a{
  font-family:var(--f-display);font-size:clamp(1rem,1.35vw,1.28rem);
  letter-spacing:-.018em;line-height:1.3;
  position:relative;display:inline-block;width:fit-content;
}
.card a::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:var(--hair);
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--e-out);
}
.card a:hover::after{transform:scaleX(1)}
.card address{font-style:normal;font-family:var(--f-display);
  font-size:clamp(1rem,1.35vw,1.28rem);letter-spacing:-.018em;line-height:1.35}

/* Legal / Prosa */
.prose{max-width:74ch}
.prose h2{font-size:clamp(1.35rem,2vw,1.9rem);margin:var(--s-5) 0 var(--s-2)}
.prose h3{font-size:clamp(1.05rem,1.4vw,1.28rem);margin:var(--s-4) 0 var(--s-2);letter-spacing:-.02em}
.prose p,.prose li{color:var(--fg-mute)}
.prose ul{list-style:none;margin:0 0 1em;padding:0}
.prose ul li{position:relative;padding-left:1.35em;margin-bottom:.4em}
.prose ul li::before{
  content:"";position:absolute;left:0;top:.72em;width:6px;height:6px;border-radius:50%;
  border:var(--hair) solid var(--fg-faint);
}
.prose a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose .note{
  border-left:2px solid var(--signal);
  padding:var(--s-2) 0 var(--s-2) var(--s-3);
  margin:var(--s-3) 0;
  color:var(--fg);font-size:.95em;
}

/* ------------------------------------------------- Konstruktionszeichnung
   Die Marke offengelegt: Kreis, 55°-Achse, ausbrechende Horizontalen.
   Jede Linie zeichnet sich beim Eintreten ins Sichtfeld selbst.            */
.cons{margin:0;width:100%}
.cons__svg{width:100%;height:auto;overflow:visible;display:block}
/* Kein vector-effect:non-scaling-stroke — die Strichmusterberechnung für die
   Selbstzeichnung läuft im skalierten Koordinatensystem, der Strich selbst
   aber nicht. Das Ergebnis wären Bruchstücke statt vollständiger Linien. */
.cons__svg *{fill:none;stroke-linecap:square}
.cons__ring{stroke:var(--fg);stroke-width:1}
.cons__bar{stroke:var(--fg);stroke-width:1.2}
.cons__axis{stroke:var(--fg);stroke-width:1.35}
.cons__aux,.cons__reg path{stroke:var(--fg-faint);stroke-width:.85}
.cons__dot{fill:var(--fg);stroke:none}
.cons__lbl{
  fill:var(--fg-faint);stroke:none;
  font-family:var(--f-display);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;
}

/* Selbstzeichnung — pathLength="1" macht die Animation unabhängig von der
   tatsächlichen Pfadlänge. Angesprochen wird über eine Klasse, nicht über
   [pathLength]: Chrome kleinschreibt Attributnamen in Selektoren, wodurch
   die Regel auf SVG-Elementen (dort case-sensitiv) nie greifen würde. */
.cons__svg .draw,
.cons__svg .draw path{
  stroke-dasharray:1;
  stroke-dashoffset:1;
  transition:stroke-dashoffset 1.5s var(--e-io);
}
.cons.in .cons__svg .draw,
.cons.in .cons__svg .draw path{stroke-dashoffset:0}
.cons__dot,.cons__lbl{opacity:0;transition:opacity .8s var(--e-out) 1.1s}
.cons.in .cons__dot,.cons.in .cons__lbl{opacity:1}
.cons__svg .d1{transition-delay:.05s}
.cons__svg .d2{transition-delay:.25s}
.cons__svg .d3{transition-delay:.45s}
.cons__svg .d4{transition-delay:.65s}
.cons__svg .d5{transition-delay:.85s}
.cons__svg .d6{transition-delay:1.05s}

.cons__cap{
  display:flex;justify-content:space-between;gap:var(--s-3);
  margin-top:var(--s-2);padding-top:var(--s-2);
  border-top:var(--hair) solid var(--line);
}

@media (prefers-reduced-motion:reduce){
  .cons__svg .draw,.cons__svg .draw path{stroke-dashoffset:0}
  .cons__dot,.cons__lbl{opacity:1}
}

/* Inhaltsverzeichnis (Leistungen) */
.toc{display:grid;gap:.1em;border-top:var(--hair) solid var(--line)}
.toc a{
  display:flex;align-items:baseline;gap:1em;
  padding:.72em 0;border-bottom:var(--hair) solid var(--line);
  font-family:var(--f-display);font-size:clamp(.92rem,1.05vw,1.05rem);
  letter-spacing:-.012em;color:var(--fg-mute);
  transition:color .35s var(--e-out),padding-left .4s var(--e-out);
}
.toc a:hover{color:var(--fg);padding-left:.5em}
.toc .idx{flex:none}

/* Redaktionshinweise — im Livebetrieb zu entfernen */
.todo{
  border-left:2px solid var(--signal);
  background:linear-gradient(90deg,rgba(194,84,47,.07),transparent 62%);
  padding:var(--s-2) var(--s-3);
  font-size:.88rem;line-height:1.55;color:var(--fg);
  max-width:60ch;
}
.todo code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;
  background:var(--surface);padding:.1em .4em;border-radius:2px;
}

/* Listen in Inhaltsspalten */
.stack-2 > li{
  position:relative;padding-left:1.4em;line-height:1.5;
  color:var(--fg-mute);font-size:.96em;
}
.stack-2 > li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:7px;height:7px;border-radius:50%;
  border:var(--hair) solid var(--fg-faint);
}
.item__tags > li::before,.toc li::before{display:none}
.item__tags > li{padding-left:0}

/* Seitenkopf für Unterseiten */
.phd{padding-top:clamp(140px,19vh,240px);padding-bottom:var(--s-5)}
.phd__grid{row-gap:var(--s-4);align-items:end}
.phd__t{grid-column:1/span 8}
.phd__s{grid-column:9/span 4;align-self:end}
.phd__eyebrow{display:flex;align-items:center;gap:var(--s-2);margin-bottom:clamp(20px,2.6vw,38px)}
.phd__eyebrow .rule{width:clamp(28px,4.4vw,70px);flex:none}

/* ---------------------------------------------------------- 10 FORMULAR */
.form{display:grid;gap:0}
.fld{position:relative;border-bottom:var(--hair) solid var(--line-strong);padding-top:var(--s-4)}
.fld label{
  position:absolute;left:0;top:calc(var(--s-4) + 14px);
  font-family:var(--f-display);font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg-faint);pointer-events:none;
  transition:transform .45s var(--e-out),font-size .45s var(--e-out),color .45s;
  transform-origin:left top;
}
.fld input,.fld textarea,.fld select{
  width:100%;background:none;border:0;color:var(--fg);
  font-family:var(--f-text);font-size:clamp(1rem,1.15vw,1.12rem);
  padding:14px 0;line-height:1.5;
  border-radius:0;
}
.fld textarea{resize:vertical;min-height:110px}
.fld input:focus,.fld textarea:focus,.fld select:focus{outline:none}
.fld.filled label,.fld:focus-within label{
  transform:translateY(-24px) scale(.82);
  color:var(--fg-mute);
}
.fld::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:var(--hair);
  background:var(--fg);transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--e-out);
}
.fld:focus-within::after{transform:scaleX(1)}
.fld--half{grid-column:span 1}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4)}
.check{
  display:flex;gap:.9em;align-items:flex-start;
  margin-top:var(--s-4);cursor:pointer;
  font-size:.88rem;color:var(--fg-mute);line-height:1.5;
}
.check input{
  appearance:none;width:17px;height:17px;flex:none;margin-top:2px;
  border:var(--hair) solid var(--line-strong);border-radius:50%;
  position:relative;transition:border-color .3s,background .3s;
}
.check input:checked{background:var(--fg);border-color:var(--fg)}
.check input:checked::after{
  content:"";position:absolute;inset:4px;border-radius:50%;background:var(--bg);
}
.form__submit{margin-top:var(--s-4);display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center}
.form__note{font-size:.82rem;color:var(--fg-faint);max-width:36ch}

/* Honigtopf — für Menschen und Screenreader unsichtbar, für Bots sichtbar */
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

.form__status{
  margin-top:var(--s-3);
  padding:var(--s-2) var(--s-3);
  border-left:2px solid var(--fg-faint);
  font-size:.92rem;line-height:1.5;max-width:52ch;
}
.form__status--ok{border-left-color:var(--fg);color:var(--fg)}
.form__status--err{border-left-color:var(--signal);color:var(--fg)}
.btn[disabled]{opacity:.55;pointer-events:none}

/* ------------------------------------------------------------ 11 FOOTER */
.foot{padding-top:var(--s-6);padding-bottom:clamp(28px,3vw,44px)}
.foot__claim{margin-bottom:var(--s-5)}
.foot__claim .d-lg{max-width:22ch}
.foot__grid{row-gap:var(--s-4)}
.foot__brand{grid-column:1/span 4}
.foot__nav{grid-column:6/span 3}
.foot__contact{grid-column:9/span 4}
.foot__mark{font-size:clamp(2rem,3.4vw,3rem);display:flex;align-items:center;gap:.6em;margin-bottom:var(--s-3)}
.foot__nav ul{display:grid;gap:.55em}
.foot__nav a,.foot__contact a{
  font-family:var(--f-display);font-size:clamp(.86rem,1vw,1rem);letter-spacing:.01em;
  color:var(--fg-mute);position:relative;transition:color .35s;
}
.foot__nav a:hover,.foot__contact a:hover{color:var(--fg)}
.foot__bottom{
  margin-top:var(--s-5);padding-top:var(--s-3);
  border-top:var(--hair) solid var(--line);
  display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);
  align-items:center;justify-content:space-between;
}
.foot__legal{display:flex;flex-wrap:wrap;gap:var(--s-3)}
.foot__legal a{position:relative}
.foot__legal a::after{
  content:"";position:absolute;left:0;right:0;bottom:-3px;height:var(--hair);
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .45s var(--e-out);
}
.foot__legal a:hover::after{transform:scaleX(1);transform-origin:left}

.up{display:flex;align-items:center;gap:.7em}
.up svg{width:.95em;height:.95em;transition:transform .5s var(--e-out)}
.up:hover svg{transform:translateY(-.28em)}

/* -------------------------------------------- 12 MOTION / REDUCED MOTION */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .rv,.ln > span,.fig img{opacity:1!important;transform:none!important}
  .fig::after{transform:scaleX(0)!important}
  .rule{transform:scaleX(1)!important}
  .vrule,.pil + .pil::before{transform:scaleY(1)!important}
  .step::after{transform:scaleX(1)!important}
  .cursor{display:none}
  .pre{display:none}
  .mq__t{animation:none}
  .geo{opacity:1}
  .sec.inv::before,.sec.inv::after{--py:0px;--py2:0px}
}

/* ------------------------------------------------------- 13 RESPONSIVE */
@media (max-width:1180px){
  .grid{row-gap:var(--s-4)}
  .hero__type{grid-column:1/span 9}
  .hero__sub{grid-column:1/span 7}
  .hero__media{width:min(38vw,440px)}
  .stmt__lbl{grid-column:1/span 12}
  .stmt__body{grid-column:1/span 12}
  .svc__list{grid-column:1/span 7}
  .svc__sticky{grid-column:8/span 5}
  .split__media{grid-column:1/span 6}
  .split__body{grid-column:7/span 6}
  .split--r .split__media{grid-column:7/span 6}
  .split--r .split__body{grid-column:1/span 6}
  .cta__type{grid-column:1/span 8}
  .cta__side{grid-column:9/span 4}
  .phd__t{grid-column:1/span 9}
  .phd__s{grid-column:1/span 7}
  .foot__brand{grid-column:1/span 5}
  .foot__nav{grid-column:6/span 3}
  .foot__contact{grid-column:9/span 4}
}

@media (max-width:900px){
  :root{--gut:14px}
  /* Unter 900px kollabiert jedes 12-Spalten-Raster auf eine Spalte.
     !important, weil einzelne Sektionen ihre Spaltenlage inline setzen. */
  .grid{grid-template-columns:1fr;row-gap:var(--s-4)}
  .grid > *{grid-column:1/-1!important}
  .split{grid-template-columns:1fr}
  .nav{display:none}
  .burger{display:block}
  .hero{min-height:auto;padding-top:clamp(96px,14vh,132px);padding-bottom:var(--s-4)}
  .hero__type,.hero__sub{grid-column:1/span 12}
  .hero__sub{margin-top:var(--s-3)}
  .hero__media{
    position:relative;right:auto;top:auto;bottom:auto;
    width:100%;height:clamp(280px,44vh,400px);
    order:-1;margin-bottom:var(--s-4);
  }
  .hero__media::after{background:linear-gradient(to top,var(--bg) 0%,rgba(0,0,0,0) 40%)}
  .pillars{grid-template-columns:1fr}
  .pil{padding-right:0;border-top:var(--hair) solid var(--line)}
  .pil:first-child{border-top:0}
  .pil + .pil{padding-left:0}
  .pil + .pil::before{display:none}
  .svc__list{grid-column:1/span 12}
  .svc__sticky{display:none}
  .step{grid-template-columns:1fr;gap:var(--s-2)}
  .princ{grid-template-columns:1fr}
  .prin,.prin:nth-child(2n){padding-left:0;padding-right:0}
  .prin:nth-child(2n)::before{display:none}
  .facts{grid-template-columns:1fr}
  .fact{padding-right:0}
  .fact + .fact{padding-left:0;border-top:var(--hair) solid var(--line)}
  .fact + .fact::before{display:none}
  .split__media,.split__body,
  .split--r .split__media,.split--r .split__body{grid-column:1/span 12}
  .split--r .split__media{order:0}
  .split--r .split__body{order:1}
  .cta__type,.cta__side{grid-column:1/span 12}
  .cta__ring{right:-38vw;width:min(90vw,520px);opacity:.7}
  .cards{grid-template-columns:1fr}
  .card{padding-right:0}
  .card + .card{padding-left:0;border-top:var(--hair) solid var(--line)}
  .card + .card::before{display:none}
  .phd{padding-top:clamp(120px,17vh,170px)}
  .phd__t,.phd__s{grid-column:1/span 12}
  .foot__brand,.foot__nav,.foot__contact{grid-column:1/span 12}
  .form__row{grid-template-columns:1fr;gap:0}
}

@media (max-width:900px){
  /* Bei kleinen Graden brauchen mehrzeilige Headlines etwas mehr Durchschuss —
     sonst berühren sich Ober- und Unterlängen, besonders im Outline-Schnitt. */
  .d-xl{line-height:1.02}
  .d-lg{line-height:1.03}
  .d-md{line-height:1.06}
}

@media (max-width:560px){
  .d-xl{font-size:clamp(2.6rem,13vw,4rem)}
  .hero__foot{flex-direction:column;align-items:flex-start;gap:var(--s-3)}
  .btn{width:100%;justify-content:space-between}
  .form__submit .btn{width:auto}
}

/* Print */
@media print{
  .head,.raster,.cursor,.pre,.mq,.hero__scroll,.menu{display:none!important}
  body{background:#fff;color:#000}
  .rv,.ln>span,.fig img{opacity:1!important;transform:none!important}
  .fig::after{display:none}
}