/* ══════════════════════════════════════════════════════════════
   WAMB'S Consulting — Gestaltungssystem „KONTOR"
   Gemeinsame Grundlage für Startseite und alle Unterseiten.
   Liegt in assets/ — Pfade daher relativ zu diesem Ordner.
   Einzige Quelle für Farbe, Schrift, Raster, Navigation, Fußzeile.
   ══════════════════════════════════════════════════════════════ */
@font-face{font-family:'Fraunces';src:url('fonts/fraunces-var.woff2') format('woff2');font-weight:300 600;font-display:swap}
@font-face{font-family:'Archivo';src:url('fonts/archivo-var.woff2') format('woff2');font-weight:400 700;font-display:swap}

/* ══ TOKEN ═══════════════════════════════════════════════════════
   Eine einzige Quelle für Farbe, Schrift, Maß, Bewegung.
   Bausteine greifen ausschließlich auf Token zu, nie auf rohe Werte.
   ═══════════════════════════════════════════════════════════════ */
:root{

  /* ── Farbe ─────────────────────────────────────────────────────
     Zwei Gründe, zwei Akzente. Der Akzent richtet sich nach dem
     Grund, auf dem er steht — gemessen, nicht geschätzt:
       Cyan auf Papier  1,97:1  → unbrauchbar
       Cyan auf Tinte   7,88:1  → sehr gut
       Gold auf Papier  3,06:1  → nur grafisch (Linien, Marken)
       Gold auf Tinte   5,08:1  → auch für Text
     Daraus die Regel: auf hellem Grund führt Gold, auf dunklem Cyan.
     Cyan auf Papier ist untersagt — es ist die Ursache des
     „SaaS-Startup"-Eindrucks.                                      */

  --ink:#111A24;              /* Grundton der Marke, tiefes Navy   */
  --ink-80:#2A3441;
  --ink-70:#4A5563;           /* Fließtext auf Papier              */
  --ink-50:#6B7583;

  --paper:#F4F1EA;            /* Elfenbein, Hauptgrund             */
  --paper-hi:#FBFAF7;         /* leicht erhöhte Fläche             */
  --paper-lo:#EBE6DA;         /* zurückgesetzte Fläche             */

  --gold:#A8853B;             /* nur Linien, Ziffern, Marken       */
  --gold-ink:#7A5F26;         /* dieselbe Farbe für Text: 5,33:1   */
  --cyan:#0DBDE6;             /* ausschließlich auf dunklem Grund  */
  --tone:#C9BCA8;             /* stille Auszeichnung, nie Text     */

  --line:#D9D3C7;             /* Haarlinie auf Papier              */
  --line-strong:#C6BEB0;
  --line-dark:rgba(244,241,234,.18);
  --paper-70:rgba(244,241,234,.76);   /* Fließtext auf Tinte       */
  --paper-50:rgba(244,241,234,.55);

  --ok:#2F6B4F;  --warn:#8A5A1B;  --err:#9B2C2C;   /* alle ≥5,2:1 */

  /* ── Schrift ───────────────────────────────────────────────────
     Fraunces trägt eine optische Größenachse (opsz). Große Grade
     werden damit feiner und enger, kleine kräftiger — echte
     Hierarchie statt bloß anderer Zahlenwerte.                    */
  --display:'Fraunces',Georgia,serif;
  --body:'Archivo',-apple-system,BlinkMacSystemFont,sans-serif;
  --opsz-xl:144; --opsz-l:72; --opsz-m:24; --opsz-s:14;

  --fs-display:clamp(38px,5.6vw,88px);
  --fs-h1:clamp(31px,4.4vw,68px);
  --fs-h2:clamp(25px,3.2vw,46px);
  --fs-h3:clamp(20px,2.1vw,28px);
  --fs-h4:clamp(17px,1.5vw,20px);
  --fs-quote:clamp(23px,3vw,42px);
  --fs-num:clamp(40px,6vw,88px);
  --fs-lead:clamp(17px,1.35vw,21px);
  --fs-body:clamp(16px,1.05vw,17.5px);
  --fs-small:clamp(14.5px,.95vw,15.5px);
  --fs-nav:15px;
  --fs-btn:15.5px;
  --fs-util:13px;

  --lh-display:.98; --lh-head:1.12; --lh-snug:1.32;
  --lh-body:1.62;   --lh-loose:1.7;

  --tr-display:-.022em; --tr-head:-.015em; --tr-body:0; --tr-util:.06em;

  --measure:68ch;        /* Fließtext          */
  --measure-lead:52ch;   /* Vorspann           */
  --measure-tight:24ch;  /* Schlagzeile        */

  /* ── Maß und Raster ─────────────────────────────────────────── */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;
  --pad:clamp(20px,4.5vw,80px);
  --gutter:clamp(20px,3vw,48px);
  --w-max:1240px; --w-wide:1480px; --w-narrow:820px;
  --navH:64px;
  --sec-y:clamp(64px,10vh,120px);   /* senkrechter Abschnittsrand */
  --sec-y-sm:clamp(48px,7vh,88px);

  /* ── Kante, Radius, Schatten ───────────────────────────────────
     Die Gestaltung ist flach. Schatten nur dort, wo etwas wirklich
     über der Seite schwebt — sonst nie.                           */
  --bw:1px; --bw-2:2px;
  --r-0:0; --r-1:2px; --r-2:4px; --r-pill:999px;
  --sh-none:none;
  --sh-lift:0 1px 2px rgba(17,26,36,.06);
  --sh-menu:0 24px 60px rgba(17,26,36,.28);

  /* ── Bewegung ──────────────────────────────────────────────────
     Fünf Dauern, drei Beschleunigungen, drei Wege. Mehr braucht
     es nicht; mehr wirkt zufällig.                                */
  --dur-micro:120ms;   /* Knopf, Symbol            */
  --dur-state:240ms;   /* Farbe, Rahmen, Zustand   */
  --dur-elem:420ms;    /* Element bewegt sich      */
  --dur-enter:720ms;   /* Auftritt beim Scrollen   */
  --dur-hero:1100ms;   /* der eine große Auftritt  */
  --ease-out:cubic-bezier(.22,1,.36,1);      /* Auftritt, ausrollend */
  --ease-inout:cubic-bezier(.65,0,.35,1);    /* Ortswechsel          */
  --ease-micro:cubic-bezier(.3,.7,.4,1);     /* Rückmeldung          */
  --move-1:6px; --move-2:14px; --move-3:28px;

  /* ── Ebenen ────────────────────────────────────────────────── */
  --z-base:0; --z-raise:1; --z-sticky:10; --z-overlay:20; --z-menu:30;

  /* ── Zustände ──────────────────────────────────────────────── */
  --focus:var(--cyan);
  --focus-w:2px;
  --focus-off:3px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden}
body{font-family:var(--body);background:var(--paper);color:var(--ink);
  line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased;font-synthesis:none}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--tone);color:var(--ink)}
:focus-visible{outline:var(--focus-w) solid var(--focus);outline-offset:var(--focus-off);border-radius:var(--r-1)}
.skip{position:absolute;left:-999px;top:0;z-index:99;background:var(--paper);color:var(--ink);padding:14px 22px}
.skip:focus{left:0}

/* ══ SCHRIFT ═════════════════════════════════════════════════════
   Dreizehn Rollen, jede mit festem Grad, Durchschuss und Laufweite.
   Der Unterschied zwischen zwei Rollen muss auf einen Blick sichtbar
   sein — sonst ist es keine Hierarchie, sondern nur eine andere Zahl.

   Fraunces wird über die optische Achse gesteuert: große Grade laufen
   feiner und enger, kleine kräftiger und offener. Das ist der Grund,
   warum eine 88px-Zeile und eine 20px-Zeile derselben Schrift wie
   zwei verschiedene Stimmen wirken.                                */

.t-display,.t-h1,.t-h2,.t-h3,.t-quote{
  font-family:var(--display);
  text-wrap:balance;
  overflow-wrap:break-word;
}
.t-display{
  font-size:var(--fs-display); font-weight:300;
  line-height:var(--lh-display); letter-spacing:var(--tr-display);
  font-variation-settings:"opsz" var(--opsz-xl);
}
.t-h1{
  font-size:var(--fs-h1); font-weight:300;
  line-height:1.04; letter-spacing:var(--tr-display);
  font-variation-settings:"opsz" var(--opsz-xl);
}
.t-h2{
  font-size:var(--fs-h2); font-weight:350;
  line-height:var(--lh-head); letter-spacing:var(--tr-head);
  font-variation-settings:"opsz" var(--opsz-l);
}
.t-h3{
  font-size:var(--fs-h3); font-weight:400;
  line-height:var(--lh-snug); letter-spacing:-.008em;
  font-variation-settings:"opsz" var(--opsz-m);
}
.t-h4{
  font-family:var(--body); font-size:var(--fs-h4); font-weight:600;
  line-height:var(--lh-snug); letter-spacing:var(--tr-body);
}
.t-quote{
  font-size:var(--fs-quote); font-weight:300;
  line-height:1.24; letter-spacing:-.012em;
  font-variation-settings:"opsz" var(--opsz-l);
}
.t-lead{
  font-size:var(--fs-lead); line-height:1.55;
  color:var(--ink-70); max-width:var(--measure-lead);
}
.t-body{ font-size:var(--fs-body); line-height:var(--lh-body); max-width:var(--measure) }
.t-small{ font-size:var(--fs-small); line-height:var(--lh-body) }
.t-util{
  font-family:var(--body); font-weight:500; font-size:var(--fs-util);
  letter-spacing:var(--tr-util); text-transform:uppercase;
}
/* Ziffern tragen Ordnung, sie sind kein Schmuck: nie unter 13px und
   nie unter 4,5:1. Dieser Fehler ist mir dreimal unterlaufen —
   Verzeichnis, Leistungsschiene, Arbeitsweise.
   Ziffern stehen ausserdem immer untereinander — Beträge, Jahre, Nummern */
.t-num,.tool__num,.svc__no,.nf__code{
  font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:"tnum","lnum";
}
.t-num-lg{
  font-family:var(--display); font-size:var(--fs-num); font-weight:300;
  line-height:.9; letter-spacing:-.03em;
  font-variation-settings:"opsz" var(--opsz-xl);
  font-variant-numeric:tabular-nums lining-nums;
}

/* ── Navigation ──────────────────────────────────────────────── */
/* Beim Verlassen des Bildes bekommt die Kopfzeile einen ruhigen Grund.
   Sie verschwindet nicht — verschwindende Navigation kostet Zeit. */
.nav[data-scrolled="true"]{ background:rgba(17,26,36,.86);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px) }
.nav{ transition:background var(--dur-state) var(--ease-micro) }
.nav::before{
  content:""; position:absolute; inset:0 0 auto 0; height:calc(var(--navH) + 44px);
  background:linear-gradient(180deg,rgba(17,26,36,.72) 0%,rgba(17,26,36,.34) 52%,rgba(17,26,36,0) 100%);
  pointer-events:none; z-index:-1;
}
.nav{position:absolute;top:0;left:0;right:0;z-index:var(--z-overlay);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s6);
  min-height:var(--navH);padding:var(--s4) var(--pad);color:var(--paper)}
.brand{display:flex;align-items:center;gap:11px;flex:none}
.brand img{height:34px;width:auto;filter:drop-shadow(0 2px 10px rgba(0,0,0,.45))}
.brand span{font-family:var(--display);font-weight:400;font-size:19px;
  line-height:1;white-space:nowrap;letter-spacing:.005em}
.brand b{font-weight:600}
.nav__mid{display:flex;gap:var(--s6)}
.nav__mid a{font-size:var(--fs-nav);position:relative;padding:6px 0}
.nav__mid a::after{content:"";position:absolute;left:0;right:100%;bottom:2px;height:1px;
  background:currentColor;transition:right var(--dur-state) var(--ease-inout)}
.nav__mid a:hover::after,.nav__mid a:focus-visible::after{right:0}
.nav__end{display:flex;align-items:center;gap:var(--s4)}
.btn-nav{border:var(--bw) solid var(--paper);background:transparent;color:var(--paper);
  padding:11px 20px;border-radius:var(--r-1);
  font-size:var(--fs-nav);transition:background var(--dur-state),color var(--dur-state),border-color var(--dur-state)}
.btn-nav:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;
  background:none;border:0;color:inherit;cursor:pointer;margin-right:-8px}
.burger i{display:block;width:22px;height:1.5px;background:currentColor;position:relative}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;width:22px;height:1.5px;background:currentColor}
.burger i::before{top:-7px}.burger i::after{top:7px}

/* ── Hero ────────────────────────────────────────────────────── */
/* ══ HERO ════════════════════════════════════════════════════════
   Zwei Felder, die sich überlagern statt nebeneinander zu stehen.
   Links die Tinte mit dem Satz, rechts das Bild — aber der Satz
   läuft über die Kante ins Bild hinein. Das nimmt der Anordnung
   das Schablonenhafte von „Text links, Bild rechts", ohne dass
   irgendetwas unruhig wird.

   Das Bild bekommt eine eigene, hohe Spalte. Genau deshalb bleibt
   der Kopf vollständig im Bild — vorher wurde ein Hochformat in
   einen Querrahmen gezwungen und der Scheitel abgeschnitten.       */

.hero{
  /* Eine Groesse steuert beide Felder: die Trennkante. Das Textfeld
     ist immer genau --hero-lap breiter als diese Kante — dadurch
     ueberlappt der Satz das Bild bei JEDER Breite gleich weit,
     statt dass feste Pixelwerte irgendwann auseinanderlaufen. */
  --hero-split:min(44%,860px);
  --hero-lap:160px;
  position:relative; min-height:100svh; overflow:hidden;
  background:var(--ink); color:var(--paper);
  display:flex; flex-direction:column; justify-content:center;
  padding:calc(var(--navH) + var(--s7)) var(--pad) clamp(32px,6vh,72px);
}

/* ── Bildfeld: nur die rechte Hälfte ─────────────────────────── */
.hero__media{ position:absolute; inset:0 0 0 var(--hero-split); z-index:var(--z-base) }
.hero__media picture{ display:block; width:100%; height:100% }
.hero__media img{ width:100%; height:100%; object-fit:cover; object-position:50% 20% }

/* Weiche Kante nach links, damit der Satz über das Bild laufen kann.
   Zusätzlich unten ein Verlauf, der die Sprachwahl trägt.          */
.hero__media::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg, var(--ink) 0%, rgba(17,26,36,.92) 14%,
                    rgba(17,26,36,.55) 34%, rgba(17,26,36,.12) 58%, rgba(17,26,36,0) 78%),
    linear-gradient(0deg, rgba(17,26,36,.72) 0%, rgba(17,26,36,0) 34%);
}

/* ── Typografiefeld ─────────────────────────────────────────── */
.hero__inner{ position:relative; z-index:2;
  max-width:calc(var(--hero-split) + var(--hero-lap)) }

.kicker{ display:flex; align-items:center; gap:var(--s4); margin-bottom:var(--s6); color:var(--paper-70) }
.kicker hr{ width:56px; height:1px; background:var(--gold); border:0; flex:none }

.claim{ margin-bottom:var(--s5) }
.claim i{ font-style:normal; display:block }
.claim b{ font-weight:300; font-style:italic; color:var(--cyan) }

/* Haarlinie, die vom Satz aus ins Bild weiterläuft — das eine
   Element, das beide Felder ausdrücklich verbindet.               */
.hero__rule{
  position:relative; z-index:2; height:1px; border:0; margin:0 0 var(--s6);
  width:calc(var(--hero-split) + var(--hero-lap) + 120px);
  background:linear-gradient(90deg, var(--gold) 0%, var(--gold) 42%, rgba(168,133,59,.28) 72%, transparent 100%);
}

.sub{ color:var(--paper-70); margin-bottom:var(--s7); max-width:40ch }

.cta{display:flex;gap:var(--s3);flex-wrap:wrap}
/* ══ KNOEPFE ═════════════════════════════════════════════════════
   Zwei Ranghoehen, zwei Gruende. Die Variante --solid ist der eine
   Hauptweg je Ansicht; --line steht daneben, nie gleichrangig.
   Der Pfeil bewegt sich beim Zeigen: die Rueckmeldung sitzt im
   Element selbst, nicht in einem Schatten.                        */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:var(--s3);
  font-family:var(--body); font-weight:500; font-size:var(--fs-btn);
  letter-spacing:.004em;
  padding:16px 26px; min-height:52px;
  border:var(--bw) solid transparent; border-radius:var(--r-1);
  cursor:pointer; text-align:center;
  transition:background var(--dur-state) var(--ease-micro),
             color var(--dur-state) var(--ease-micro),
             border-color var(--dur-state) var(--ease-micro);
}
.btn svg{ flex:none; transition:transform var(--dur-state) var(--ease-inout) }
.btn:hover svg,.btn:focus-visible svg{ transform:translateX(var(--move-1)) }
.btn:active{ transform:translateY(1px) }

/* Auf dunklem Grund: Papier fuehrt, Cyan ist die Reaktion */
.btn--solid{ background:var(--paper); color:var(--ink) }
.btn--solid:hover,.btn--solid:focus-visible{ background:var(--cyan); color:var(--ink) }
.btn--line{ border-color:var(--paper-50); color:var(--paper) }
.btn--line:hover,.btn--line:focus-visible{ border-color:var(--paper); background:rgba(244,241,234,.08) }

/* Auf Papier: Tinte fuehrt, Gold ist die Reaktion */
.btn--ink{ background:var(--ink); color:var(--paper) }
.btn--ink:hover,.btn--ink:focus-visible{ background:var(--gold); color:var(--ink) }
.btn--quiet{ border-color:var(--line-strong); color:var(--ink) }
.btn--quiet:hover,.btn--quiet:focus-visible{ border-color:var(--gold); color:var(--gold-ink) }

/* Ein Hauptweg je Ansicht. Der zweite ist ein Verweis, kein Knopf —
   zwei gleich starke Kaesten lassen den Nutzer raten. */
.btn--lg{ padding:19px 34px; min-height:60px; font-size:16.5px }
.link-quiet{
  display:inline-flex; align-items:center; gap:10px; min-height:60px;
  font-size:var(--fs-btn); font-weight:500; color:var(--paper);
  padding:0 2px; position:relative;
}
.link-quiet::after{
  content:""; position:absolute; left:2px; right:100%; bottom:18px; height:1px;
  background:currentColor; transition:right var(--dur-state) var(--ease-inout);
}
.link-quiet:hover::after,.link-quiet:focus-visible::after{ right:26px }
.link-quiet svg{ transition:transform var(--dur-state) var(--ease-inout) }
.link-quiet:hover svg{ transform:translateX(var(--move-1)) }

.btn[disabled],.btn[aria-disabled="true"]{
  opacity:.45; cursor:not-allowed; pointer-events:none;
}

/* Sprachwahl als Bühnenelement */
.tribar{position:relative;z-index:2;margin-top:var(--s7);padding-top:var(--s4);
  border-top:1px solid rgba(244,241,234,.22);max-width:min(640px,52vw)}
.tribar>span{opacity:.5;display:block;margin-bottom:var(--s3)}
.tribar ol{list-style:none;display:flex;gap:var(--s7)}
.tribar li{display:flex;flex-direction:column;gap:1px}
.tribar button{background:none;border:0;color:inherit;cursor:pointer;padding:6px 0;
  font-family:var(--display);font-weight:300;font-size:23px;line-height:1;
  text-align:left;opacity:.4;transition:opacity var(--dur-state)}
.tribar button[aria-pressed="true"]{opacity:1}
.tribar em{font-style:normal;font-size:var(--fs-util);letter-spacing:var(--tr-util);
  text-transform:uppercase;opacity:0;transition:opacity var(--dur-state)}
.tribar li:has(button[aria-pressed="true"]) em{opacity:.55}

/* ── Bewegung ────────────────────────────────────────────────── */
@keyframes rise{from{clip-path:inset(0 0 108% 0);opacity:0}to{clip-path:inset(0 0 -8% 0);opacity:1}}
.rev{animation:rise var(--dur-enter) var(--ease-out) both}
.d1{animation-delay:.06s}.d2{animation-delay:.18s}.d3{animation-delay:.3s}.d4{animation-delay:.42s}
@media (prefers-reduced-motion:reduce){.rev{animation:none}*{transition-duration:.01ms!important}}


/* ══ SIGNATUR — die Atempause ════════════════════════════════════
   Der einzige Abschnitt, der nichts verlangt und nichts aufzaehlt.
   Zentriert, sehr geringe Dichte, viel Luft. Er steht bewusst
   zwischen dem bildgefuehrten Hero und dem dichten Verzeichnis.   */
.sig{ background:var(--paper); color:var(--ink); padding:clamp(88px,15vh,180px) var(--pad) }
.sig__in{ max-width:var(--w-narrow); margin:0 auto; text-align:center }
.sig__logo{ width:clamp(150px,17vw,224px); height:auto; margin:0 auto clamp(32px,5vh,56px) }
.sig__line{
  font-family:var(--display); font-weight:300; font-size:var(--fs-h2);
  line-height:1.22; letter-spacing:var(--tr-head);
  font-variation-settings:"opsz" var(--opsz-l);
  text-wrap:balance; margin-bottom:clamp(28px,4vh,44px);
}
.sig__line em{ font-style:italic; color:var(--ink-70); display:block }
.sig__meta{
  display:inline-flex; align-items:center; gap:var(--s4); flex-wrap:wrap;
  justify-content:center; color:var(--ink-70); font-size:var(--fs-small);
}
.sig__meta i{ width:34px; height:var(--bw); background:var(--gold); flex:none }

/* ══ LEISTUNGEN — ein Kernfeld, vier Spezialisierungen ═══════════
   Der Rangunterschied ist inhaltlich: Buchhaltung und Lohn erbringt
   die Kanzlei eigenstaendig, die vier anderen sind Spezialisierungen
   mit Grenze zum Steuerberater. Deshalb ein dunkles Feld ueber die
   volle Breite und darunter vier versetzte Zeilen auf Papier —
   statt fuenf gleicher Kaesten.                                    */

.svcs{ background:var(--paper); color:var(--ink) }

/* ── Kernfeld, vollflaechig in Tinte ─────────────────────────── */
.svcs__main{
  display:block; background:var(--ink); color:var(--paper);
  padding:var(--sec-y) var(--pad);
  transition:background var(--dur-state) var(--ease-micro);
}
.svcs__main-in{
  max-width:var(--w-max); margin:0 auto;
  display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr);
  gap:clamp(28px,5vw,88px); align-items:start;
}
.svcs__main-head{ position:sticky; top:calc(var(--navH) + var(--s5)) }
.svcs__main-head .t-util{ display:block; color:var(--paper-50); margin-bottom:var(--s4) }
.svcs__main-head h2{
  font-family:var(--display); font-weight:350; font-size:var(--fs-h2);
  line-height:var(--lh-head); letter-spacing:var(--tr-head);
  font-variation-settings:"opsz" var(--opsz-l); text-wrap:balance;
}

.svcs__no{
  display:block; font-family:var(--display); font-weight:300;
  letter-spacing:-.02em; color:var(--ink-70);   /* traegt Information, kein Schmuck */
}
.svcs__no--lg{ font-size:clamp(34px,4vw,58px); line-height:.9; margin-bottom:var(--s4); color:var(--gold) }

.svcs__main-body h3{
  font-family:var(--display); font-weight:300; font-size:var(--fs-h1);
  line-height:1.04; letter-spacing:var(--tr-display);
  font-variation-settings:"opsz" var(--opsz-xl);
  text-wrap:balance; margin-bottom:var(--s5);
  transition:transform var(--dur-elem) var(--ease-inout);
}
.svcs__main-body p{
  color:var(--paper-70); font-size:var(--fs-lead); line-height:1.55;
  max-width:46ch; margin-bottom:var(--s6);
}
.svcs__tools{
  display:block; color:var(--paper-50);
  padding-top:var(--s4); border-top:var(--bw) solid var(--line-dark);
  margin-bottom:var(--s6);
}
.svcs__cta{ display:inline-flex; align-items:center; gap:var(--s3); font-weight:500; font-size:var(--fs-btn) }
.svcs__arrow{ flex:none; transition:transform var(--dur-state) var(--ease-inout) }
.svcs__main:hover .svcs__arrow,.svcs__main:focus-visible .svcs__arrow{ transform:translateX(var(--move-2)) }
.svcs__main:hover .svcs__main-body h3{ transform:translateX(var(--move-1)) }

/* ── Die vier Spezialisierungen: versetzt, nicht im Raster ───── */
.svcs__rest{
  max-width:var(--w-max); margin:0 auto;
  padding:var(--sec-y-sm) var(--pad) 0;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(32px,6vw,96px);
}
.svcs__row{
  /* Nicht auf die Rasterzeile dehnen — sonst verteilt sich die
     Ueberhoehe der versetzten Nachbarzeile nach innen und reisst
     Ueberschrift und Text auseinander. */
  align-self:start;
  display:grid; grid-template-columns:auto minmax(0,1fr) 30px;
  column-gap:var(--s5); row-gap:6px; align-items:start;
  padding:var(--s6) 0; border-top:var(--bw) solid var(--line);
  transition:border-color var(--dur-state) var(--ease-micro);
}
/* Versatz: die rechte Spalte startet tiefer, das bricht die Rasterwirkung.
   Bei fuenf Zeilen steht die letzte allein in der linken Spalte — das ist
   gewollt, es beendet die Reihe asymmetrisch. */
.svcs__rest > :nth-child(2),
.svcs__rest > :nth-child(4){ margin-top:clamp(32px,5vw,72px) }

.svcs__row .svcs__no{ font-size:var(--fs-h4); line-height:1.42; grid-row:1 }
.svcs__row h3{
  grid-column:2; font-family:var(--display); font-weight:400;
  font-size:var(--fs-h3); line-height:var(--lh-snug); letter-spacing:-.008em;
  font-variation-settings:"opsz" var(--opsz-m);
  overflow-wrap:break-word; hyphens:auto;
  transition:transform var(--dur-elem) var(--ease-inout);
}
.svcs__row p{ grid-column:2; color:var(--ink-70); font-size:var(--fs-small); line-height:1.55 }
.svcs__row .svcs__arrow{ grid-column:3; grid-row:1; align-self:start; margin-top:8px;
  justify-self:end; color:var(--line-strong) }
.svcs__row:hover,.svcs__row:focus-visible{ border-color:var(--gold) }
.svcs__row:hover h3{ transform:translateX(var(--move-1)) }
.svcs__row:hover .svcs__arrow{ transform:translateX(var(--move-1)); color:var(--gold) }

/* Pflichthinweis — bleibt auffindbar, deshalb die goldene Marke */
.svcs__note{
  max-width:var(--w-max); margin:clamp(32px,5vh,56px) auto 0;
  padding:0 var(--pad) var(--sec-y-sm);
  color:var(--ink-70); font-size:var(--fs-small); line-height:var(--lh-body);
}
.svcs__note::before{
  content:""; display:block; width:44px; height:var(--bw-2);
  background:var(--gold); margin-bottom:var(--s4);
}

@media(max-width:1000px){
  .svcs__main-in{ grid-template-columns:1fr; gap:var(--s6) }
  .svcs__main-head{ position:static }
  .svcs__rest{ grid-template-columns:1fr; column-gap:0 }
  .svcs__rest > :nth-child(n){ margin-top:0 }
  .svcs__row{ padding:var(--s5) 0 }
  .svcs__row p{ font-size:16px }
}

/* ══ MOMENT 4 — Der Gründer ═══════════════════════════════════ */
.founder{background:var(--ink);color:var(--paper);display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:stretch;min-height:78svh}
.founder__img{position:relative;overflow:hidden;min-height:52svh}
/* Ohne diese Zeile ist <picture> inline und das Bild nimmt seine
   Eigenbreite — es lief 23px ueber den Rahmen hinaus. */
.founder__img picture{display:block;width:100%;height:100%}
.founder__img img{width:100%;height:100%;object-fit:cover;object-position:48% 24%}
.founder__txt{padding:clamp(48px,8vh,104px) var(--pad);display:flex;flex-direction:column;justify-content:center}
.founder blockquote{font-family:var(--display);font-weight:300;font-size:var(--fs-quote);
  line-height:1.24;letter-spacing:-.012em;font-variation-settings:"opsz" var(--opsz-l);
  max-width:var(--measure-tight);margin-bottom:var(--s6);text-indent:-.42em}
.founder cite{font-style:normal;display:flex;align-items:center;gap:var(--s4);font-size:14px;color:rgba(244,241,234,.7)}
.founder cite hr{width:40px;height:1px;background:rgba(244,241,234,.35);border:0;flex:none}
.founder__p{margin-top:var(--s6);color:rgba(244,241,234,.74);max-width:42ch;font-size:16px;line-height:1.6}

/* ══ MOMENT 5 — Vereine, versetzte Felder ═════════════════════ */
.assoc{background:var(--paper);color:var(--ink);padding:clamp(64px,10vh,120px) var(--pad)}
.assoc__in{max-width:var(--w-max);margin:0 auto;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,72px);align-items:start}
.assoc__a{padding-top:clamp(24px,5vh,64px)}
.assoc__a h2{font-family:var(--display);font-weight:350;font-size:var(--fs-h2);line-height:var(--lh-head);letter-spacing:var(--tr-head);font-variation-settings:"opsz" var(--opsz-l);text-wrap:balance;margin-bottom:var(--s5)}
.assoc__a p{color:var(--ink-70);font-size:16.5px;line-height:1.62;max-width:40ch}
.assoc__b{background:var(--paper-hi);border-top:var(--bw-2) solid var(--gold);padding:clamp(28px,4vw,44px)}
.assoc__b h3{font-family:var(--body);font-weight:600;font-size:var(--fs-h4);
  line-height:var(--lh-snug);margin-bottom:var(--s4)}
.assoc__b ul{list-style:none;display:grid;gap:var(--s3)}
.assoc__b li{display:flex;gap:12px;font-size:15.5px;color:var(--ink-70);line-height:1.5}
.assoc__b li b{color:var(--ink);font-weight:500;flex:none;width:2.4ch;font-variant-numeric:tabular-nums}
.assoc__tag{margin-top:var(--s5);padding-top:var(--s4);border-top:var(--bw) solid var(--line);
  font-size:var(--fs-util);letter-spacing:var(--tr-util);text-transform:uppercase;color:var(--ink-70)}

/* ══ SIMULATOR — zifferngefuehrtes Band ══════════════════════════
   Bewusst hohe Dichte direkt nach der schmalen, ruhigen Spalte.
   Die Ziffer traegt die Komposition, nicht ein Kasten rechts —
   sonst waere es die dritte „links Text, rechts Ding"-Anordnung
   der Seite. Das frühere Balkendiagramm ist entfallen: es stellte
   keine echten Daten dar.                                         */
.tool{ background:var(--ink); color:var(--paper); padding:var(--sec-y) var(--pad);
  position:relative; overflow:hidden }
.tool::before{ content:""; position:absolute; inset:auto -12% -60% 46%; height:86%;
  background:radial-gradient(58% 58% at 50% 50%,rgba(13,189,230,.13),transparent 70%);
  pointer-events:none }
.tool__in{
  position:relative; max-width:var(--w-max); margin:0 auto;
  display:grid; grid-template-columns:auto minmax(0,1fr);
  column-gap:clamp(32px,6vw,96px); align-items:center;
}
.tool__figure{ display:flex; align-items:baseline; gap:var(--s3); flex:none }
.tool__num{
  font-family:var(--display); font-weight:300; font-size:clamp(88px,13vw,208px);
  line-height:.78; letter-spacing:-.05em; color:var(--cyan);
  font-variation-settings:"opsz" var(--opsz-xl);
}
.tool__unit{ color:var(--paper-50) }
.tool__txt h2{
  font-family:var(--display); font-weight:350; font-size:var(--fs-h2);
  line-height:var(--lh-head); letter-spacing:var(--tr-head);
  font-variation-settings:"opsz" var(--opsz-l); text-wrap:balance;
  margin-bottom:var(--s5);
}
.tool__txt p{ color:var(--paper-70); font-size:var(--fs-lead); line-height:1.55;
  max-width:42ch; margin-bottom:var(--s6) }
.tool__note{
  grid-column:1/-1; margin-top:clamp(32px,5vh,56px); padding-top:var(--s4);
  border-top:var(--bw) solid var(--line-dark);
  color:var(--paper-50); font-size:var(--fs-small); line-height:var(--lh-body);
  max-width:78ch;
}

/* ══ VEREINE — schmale, versetzte Spalte ═════════════════════════
   Andere Geometrie als jeder Abschnitt davor: eine einzige schmale
   Spalte, nach rechts versetzt, links bleibt Papier leer.         */
/* Kante nach oben: der Abschnitt davor steht ebenfalls auf hellem
   Grund — ohne sie liefen beide ineinander. */
.assoc-lead{
  background:var(--paper-lo); color:var(--ink);
  padding:var(--sec-y) var(--pad);
  border-top:var(--bw) solid var(--line);
}
.assoc-lead__in{
  max-width:var(--w-max); margin:0 auto;
  padding-left:clamp(0px,34vw,520px);
}
.assoc-lead .t-util{ display:block; color:var(--ink-70); margin-bottom:var(--s4) }
.assoc-lead h2{
  font-family:var(--display); font-weight:350; font-size:var(--fs-h2);
  line-height:var(--lh-head); letter-spacing:var(--tr-head);
  font-variation-settings:"opsz" var(--opsz-l); text-wrap:balance;
  margin-bottom:var(--s5);
}
.assoc-lead p{ color:var(--ink-70); font-size:var(--fs-lead); line-height:1.6;
  max-width:44ch; margin-bottom:var(--s6) }
.assoc-lead__tag{
  margin-top:var(--s6); padding-top:var(--s4);
  border-top:var(--bw) solid var(--line); color:var(--ink-70);
}
.link-ink{
  display:inline-flex; align-items:center; gap:var(--s3);
  min-height:44px; font-weight:500; font-size:var(--fs-btn);
  color:var(--ink); position:relative;
}
.link-ink::after{
  content:""; position:absolute; left:0; right:34px; bottom:10px; height:var(--bw);
  background:var(--gold); transform-origin:left;
  transition:transform var(--dur-state) var(--ease-inout);
}
.link-ink:hover::after,.link-ink:focus-visible::after{ transform:scaleX(1.12) }
.link-ink svg{ transition:transform var(--dur-state) var(--ease-inout) }
.link-ink:hover svg{ transform:translateX(var(--move-1)) }

@media(max-width:900px){
  .tool__in{ grid-template-columns:1fr; row-gap:var(--s5) }
  .tool__figure{ align-items:baseline }
  .tool__num{ font-size:clamp(72px,22vw,120px) }
  .tool__txt p{ max-width:none }
  .assoc-lead__in{ padding-left:0 }
  .assoc-lead p{ max-width:none; font-size:16.5px }
  .sig{ padding:var(--s8) var(--pad) }
  /* Gestapelt statt umgebrochen: sonst haengt der Goldstrich allein
     am Ende der ersten Zeile. */
  .sig__meta{ flex-direction:column; gap:var(--s3) }
  .sig__meta i{ width:44px }
}

/* ══ ABSCHLUSS — die persoenliche Einladung ══════════════════════
   Asymmetrisch, nicht zentriert: die Signatur weiter oben ist bereits
   der zentrierte Moment: zwei davon wirken unentschieden. Rechts das
   echte, unbearbeitete Portrait — wer zum Gespraech einlaedt, soll
   auch der sein, der am Tisch sitzt.                               */
.close{ background:var(--paper); color:var(--ink); padding:var(--sec-y) var(--pad) }
.close__in{
  max-width:var(--w-max); margin:0 auto;
  display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(32px,6vw,96px); align-items:center;
}
.close:not(.close--portrait) .close__in{ grid-template-columns:minmax(0,8fr); max-width:74ch; margin:0 auto 0 0 }

.close__txt .t-util{ display:block; color:var(--ink-70); margin-bottom:var(--s4) }
.close h2{
  font-family:var(--display); font-weight:300; font-size:var(--fs-h1);
  line-height:1.04; letter-spacing:var(--tr-display);
  font-variation-settings:"opsz" var(--opsz-xl);
  text-wrap:balance; margin-bottom:var(--s5);
}
.close p{ color:var(--ink-70); font-size:var(--fs-lead); line-height:1.6;
  max-width:44ch; margin-bottom:clamp(28px,4vh,44px) }

/* Zweitwege: Text, keine zweite Flaeche — sonst raet man */
.close__alt{
  display:flex; align-items:center; gap:var(--s4); flex-wrap:wrap;
  margin:var(--s6) 0 0; padding-top:var(--s5);
  border-top:var(--bw) solid var(--line);
  font-size:var(--fs-small); color:var(--ink-70); max-width:none;
}
.close__alt i{ width:26px; height:var(--bw); background:var(--line-strong); flex:none }
.close__alt a{
  display:inline-flex; align-items:center; min-height:44px;
  color:var(--ink); border-bottom:var(--bw) solid var(--line-strong);
  transition:border-color var(--dur-state),color var(--dur-state);
}
.close__alt a:hover{ border-color:var(--gold); color:var(--gold-ink) }

/* Portrait: klar begrenzt, leicht abgesenkt, mit goldener Kante —
   dasselbe Verbindungselement wie im Hero. */
.close__fig{ position:relative; margin:0 }
.close__fig img{
  width:100%; height:auto; aspect-ratio:4/5; object-fit:cover;
  object-position:50% 22%; border-radius:var(--r-1);
}
.close__fig::before{
  content:""; position:absolute; left:calc(var(--s6) * -1); right:38%;
  top:-1px; height:var(--bw-2); background:var(--gold);
}
.close__fig figcaption{
  margin-top:var(--s4); color:var(--ink-70);
  padding-top:var(--s3); border-top:var(--bw) solid var(--line);
}

@media(max-width:900px){
  .close__in{ grid-template-columns:1fr; gap:var(--s7) }
  .close p{ max-width:none; font-size:16.5px }
  .close__txt .btn{ width:100% }
  /* Auf dem Telefon zuerst das Gesicht, dann die Einladung */
  .close__fig{ order:-1 }
  .close__fig::before{ left:0; right:52% }
  /* Quadrat statt Querformat: 3:2 schnitt den Kopf an und zeigte
     vor allem leeren Studiohintergrund. */
  .close__fig img{ aspect-ratio:1/1; object-position:46% 14% }
}

/* ══ FUSSZEILE — Abschluss, nicht Abstellkammer ══════════════════
   Die Wortmarke gross als Gestaltungselement, darunter vier
   ungleiche Gruppen: Kontakt fuehrt, der Rest ordnet sich unter.
   Drei gleich breite Spalten waren beliebig — das hier hat eine
   Rangfolge.                                                       */
.foot{ background:var(--ink); color:var(--paper-70);
  padding:clamp(56px,8vh,96px) var(--pad) var(--s7) }
.foot__in{ max-width:var(--w-max); margin:0 auto }

.foot__mark{
  display:block; font-family:var(--display); font-weight:300;
  font-size:clamp(36px,7vw,104px); line-height:.94; letter-spacing:-.03em;
  color:var(--paper); font-variation-settings:"opsz" var(--opsz-xl);
  padding-bottom:clamp(32px,5vh,56px); margin-bottom:clamp(32px,5vh,56px);
  border-bottom:var(--bw) solid var(--line-dark);
}
.foot__mark b{ display:block; font-weight:300; font-style:italic; color:var(--paper-50) }

.foot__grid{
  display:grid; grid-template-columns:minmax(0,5fr) repeat(3,minmax(0,3fr));
  gap:clamp(28px,4vw,64px);
}
.foot .foot__h{
  font-family:var(--body); font-weight:500; font-size:var(--fs-util);
  letter-spacing:var(--tr-util); text-transform:uppercase;
  color:var(--paper-50); margin-bottom:var(--s5);
}
.foot ul{ list-style:none; display:grid; gap:2px; font-size:var(--fs-small) }
.foot ul a{ display:inline-flex; align-items:center; min-height:40px; padding:2px 0;
  transition:color var(--dur-state) }
.foot a:hover{ color:var(--cyan) }

/* Kontakt fuehrt: groesserer Grad, eigene Zeilen */
.foot__mail{
  /* Flaeche statt Zeile: als Zeile war sie nur 24px hoch */
  display:flex; align-items:center; min-height:44px;
  font-family:var(--display); font-weight:300;
  font-size:clamp(19px,1.9vw,26px); line-height:1.25; color:var(--paper);
  font-variation-settings:"opsz" var(--opsz-m);
  overflow-wrap:anywhere; margin-bottom:var(--s3);
  transition:color var(--dur-state);
}
.foot__tel{ display:block; font-size:var(--fs-body); color:var(--paper);
  min-height:44px; display:flex; align-items:center }
.foot__ort{ margin-top:var(--s4); padding-top:var(--s4);
  border-top:var(--bw) solid var(--line-dark); font-size:var(--fs-small); line-height:1.7 }
.foot__ort span{ display:block }

.foot__legal{
  margin-top:clamp(40px,6vh,72px); padding-top:var(--s5);
  border-top:var(--bw) solid var(--line-dark);
  font-size:var(--fs-small); line-height:var(--lh-body);
  color:var(--paper-50); max-width:92ch;
}
.foot__bar{
  display:flex; justify-content:space-between; gap:var(--s5); flex-wrap:wrap;
  margin-top:var(--s5); padding-top:var(--s4);
  border-top:var(--bw) solid rgba(244,241,234,.12);
  font-size:var(--fs-small);
}
.foot__bar nav{ display:flex; gap:var(--s6); flex-wrap:wrap }
.foot__bar a{ display:inline-flex; align-items:center; min-height:44px }

@media(max-width:900px){
  .foot__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s6) }
  .foot__contact{ grid-column:1/-1 }
  .foot__mark{ font-size:clamp(34px,11vw,56px) }
}
@media(max-width:400px){
  .foot__grid{ grid-template-columns:1fr }
}

@media(max-width:900px){
  /* Jede Zelle ausdrücklich setzen. Sonst beansprucht der Pfeil mit
     grid-row:1 die erste Zelle und drängt die Überschrift in die
     28px-Spalte — sie bricht dann auf ein Zeichen pro Zeile um. */
  .idx__row>div{grid-template-columns:minmax(0,1fr) 28px;gap:var(--s3);padding:var(--s5) var(--pad)}
  .idx__row h3{grid-column:1;grid-row:1}
  .idx__row svg{grid-column:2;grid-row:1;align-self:center}
  .idx__row p{grid-column:1/-1;grid-row:2}
  .idx__row:hover h3{transform:none}

  .founder{grid-template-columns:1fr;min-height:0}
  .founder__img{min-height:62svh}
  .founder blockquote{max-width:none}
  .assoc__in{grid-template-columns:1fr;gap:var(--s7)}
  .assoc__a{padding-top:0}
  .tool__in{grid-template-columns:1fr;gap:var(--s7)}
  .tool p{max-width:none}
  .foot__top{grid-template-columns:1fr;gap:var(--s6)}
  .close__in .btn{width:100%}
}


/* ══ Mobilmenü — Vollfläche, daumenfreundlich ═════════════════ */
.menu{position:fixed;inset:0;z-index:var(--z-menu);background:var(--ink);color:var(--paper);
  display:flex;flex-direction:column;padding:var(--s4) var(--pad) calc(var(--s7) + env(safe-area-inset-bottom));
  visibility:hidden;opacity:0;transition:opacity var(--dur-elem) var(--ease-inout),visibility 0s var(--dur-elem)}
.menu[data-open="true"]{visibility:visible;opacity:1;transition:opacity var(--dur-elem) var(--ease-inout)}
.menu__top{display:flex;align-items:center;justify-content:space-between;min-height:56px;margin-bottom:auto}
.menu__close{width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  background:none;border:0;color:inherit;cursor:pointer;margin-right:-8px}
.menu__close svg{transition:transform var(--dur-state)}
.menu__close:hover svg{transform:rotate(90deg)}
.menu nav{display:flex;flex-direction:column;gap:2px;margin:var(--s7) 0}
.menu nav a{font-family:var(--display);font-weight:300;font-size:clamp(30px,9vw,44px);
  line-height:1.18;letter-spacing:-.015em;padding:10px 0;display:flex;align-items:baseline;gap:14px;
  opacity:0;transform:translateY(var(--move-2));transition:opacity var(--dur-elem),transform var(--dur-elem),color var(--dur-micro)}
.menu[data-open="true"] nav a{opacity:1;transform:none}
.menu[data-open="true"] nav a:nth-child(1){transition-delay:.06s}
.menu[data-open="true"] nav a:nth-child(2){transition-delay:.12s}
.menu[data-open="true"] nav a:nth-child(3){transition-delay:.18s}
.menu[data-open="true"] nav a:nth-child(4){transition-delay:.24s}
.menu nav a:active{color:var(--cyan)}
.menu__foot{border-top:1px solid rgba(244,241,234,.18);padding-top:var(--s5);
  display:flex;flex-direction:column;gap:var(--s5)}
.menu__lang{display:flex;align-items:center;gap:var(--s6)}
.menu__lang span{font-size:13px;letter-spacing:.05em;text-transform:uppercase;opacity:.5}
.menu__lang button{background:none;border:0;color:inherit;cursor:pointer;
  font-family:var(--display);font-weight:300;font-size:22px;line-height:1;padding:10px 2px;
  min-height:44px;opacity:.4;transition:opacity var(--dur-micro)}
.menu__lang button[aria-pressed="true"]{opacity:1}
.menu .btn{width:100%}
body[data-menu="open"]{overflow:hidden}
@media(min-width:901px){.menu{display:none}}
@media (prefers-reduced-motion:reduce){
  .menu,.menu nav a{transition-duration:.01ms!important}
}


/* ══ Phase 4 — Mobilfeinschliff ═══════════════════════════════ */
@media(max-width:900px){
  /* Mindestgrößen: nichts unter 13.5px, Fließtext nie unter 16px */
  .t-util,.assoc__tag,.foot .foot__h{font-size:13px;letter-spacing:.045em}
  .idx__note,.tool__note,.foot__legal,.foot__bar{font-size:14px;line-height:1.6}
  .idx__row p,.assoc__b li,.foot p,.foot ul{font-size:16px}
  .close__alt{font-size:16px}
  .founder cite{font-size:15px}

  /* Tippziele mindestens 44px */
  .brand{padding:8px 0}
  .foot ul a,.foot__bar a{display:inline-flex;align-items:center;min-height:44px;padding:2px 0}
  .foot ul{gap:0}
  .foot__bar nav{gap:var(--s5);row-gap:0}
  .tribar button{min-height:44px;padding:10px 0;font-size:21px}
  .idx__row>div{padding-top:var(--s5);padding-bottom:var(--s5)}
  .close__alt a{display:inline-flex;align-items:center;min-height:44px;padding:0 2px}

  /* Rhythmus verdichten, damit die Seite nicht endlos wird */
  .idx{padding:var(--s8) 0 var(--s7)}
  .assoc,.tool{padding:var(--s8) var(--pad)}
  .close{padding:calc(var(--s8) + 16px) var(--pad)}
}
@media(max-width:400px){
  /* Sehr schmale Geräte: Displaygrößen zurücknehmen */
  /* Kicker gestapelt — zweizeilig neben einem Strich sieht schief aus */
  .kicker{ flex-direction:column; align-items:flex-start; gap:var(--s2) }
  .t-display{font-size:clamp(30px,8.4vw,38px)}
  .idx__head h2,.assoc__a h2,.tool h2{font-size:clamp(24px,7vw,30px)}
  .close h2{font-size:clamp(27px,8vw,34px)}
  .founder blockquote{font-size:clamp(21px,6.4vw,26px)}
  .menu nav a{font-size:clamp(27px,8.4vw,34px)}
}

/* ── Flache Fenster: Rhythmus verdichten ─────────────────────── */
@media(min-width:901px) and (max-height:940px){
  .hero{padding-top:calc(var(--navH) + var(--s5))}
  .t-display{font-size:clamp(34px,4.4vw,64px)}
  .kicker{margin-bottom:var(--s5)}
  .claim{margin-bottom:var(--s4)}
  .sub{margin-bottom:var(--s5)}
  .tribar{margin-top:var(--s5);padding-top:var(--s3)}
  .tribar button{font-size:19px}
  .btn{padding:14px 22px;min-height:48px}
}
@media(min-width:901px) and (max-height:780px){
  .t-display{font-size:clamp(30px,3.6vw,50px)}
  .sub{display:none}
}

/* ── Zwischenbreiten: Querformat, Textfeld breiter ───────────── */
@media(min-width:901px) and (max-width:1180px){
  .hero{--hero-split:34%;--hero-lap:120px}
  .hero__media{inset:0 0 0 var(--hero-split)}
  .hero__media img{object-position:64% 26%}
  .hero__media::after{background:
    linear-gradient(90deg,var(--ink) 0%,rgba(17,26,36,.94) 18%,rgba(17,26,36,.62) 40%,rgba(17,26,36,.16) 66%,rgba(17,26,36,0) 84%),
    linear-gradient(0deg,rgba(17,26,36,.72) 0%,rgba(17,26,36,0) 34%)}

}

/* ── Mobil: eigene Komposition ───────────────────────────────── */
@media(max-width:900px){
  :root{--navH:56px}
  .nav{padding:var(--s3) var(--pad)}
  .brand img{height:28px}
  .brand span{font-size:16px}
  .nav__mid,.nav__end .btn-nav{display:none}
  .burger{display:flex}
  /* Das Telefon bekommt eine eigene Komposition, keine gestauchte
     Desktop-Fassung: das Portrait steht oben in einem eigenen Feld,
     der Satz darunter auf ruhiger Tinte. Schrift auf Gesicht ist
     weder lesbar noch dem Portrait angemessen. */
  .hero{
    display:grid; grid-template-rows:auto 1fr;
    min-height:100svh; padding:0 0 var(--s7);
  }
  .hero__media{
    position:relative; inset:auto; grid-row:1;
    height:clamp(300px,44svh,420px); margin-bottom:0;
  }
  .hero__media img{object-position:50% 12%}
  .hero__media::after{background:linear-gradient(180deg,
    rgba(17,26,36,.42) 0%, rgba(17,26,36,0) 26%,
    rgba(17,26,36,.10) 62%, rgba(17,26,36,.86) 88%, var(--ink) 100%)}
  .hero__inner{grid-row:2;max-width:none;padding:0 var(--pad);margin-top:calc(var(--s6) * -1);
    align-self:center}
  .tribar{max-width:none;padding-left:var(--pad);padding-right:var(--pad)}
  .hero__rule{width:100%}
  .claim{font-size:clamp(33px,8.8vw,46px)}
  .sub{margin-bottom:var(--s6)}
  .cta{flex-direction:column}
  .cta .btn{width:100%}
  .tribar{margin-top:var(--s6)}
  .tribar ol{gap:var(--s6)}
  .tribar button{font-size:19px}
  .tribar em{display:none}
}
@media(max-width:360px){ .brand b{display:none} }


/* ══════════════════════════════════════════════════════════════
   UNTERSEITEN — Kopf, Ankerleiste, Leistungsabschnitte
   ══════════════════════════════════════════════════════════════ */

/* ── Seitenkopf: kompakt, kein zweiter Hero ──────────────────── */
.phead{position:relative;background:var(--ink);color:var(--paper);overflow:hidden;
  padding:calc(var(--navH) + clamp(48px,9vh,104px)) var(--pad) clamp(36px,6vh,72px)}
.phead::after{content:"";position:absolute;inset:auto -20% -60% 46%;height:90%;
  background:radial-gradient(58% 58% at 50% 50%,rgba(13,189,230,.13),transparent 70%);pointer-events:none}
.phead__in{position:relative;z-index:2;max-width:var(--w-max);margin:0 auto}
.phead h1{font-family:var(--display);font-weight:300;font-size:var(--fs-h1);
  line-height:1.04;letter-spacing:var(--tr-display);
  font-variation-settings:"opsz" var(--opsz-xl);text-wrap:balance;
  max-width:18ch;margin-bottom:var(--s5)}
.phead h1 em{font-style:italic;color:var(--cyan)}
.phead__lead{color:rgba(244,241,234,.78);font-size:clamp(16.5px,1.3vw,20px);
  line-height:1.55;max-width:52ch}
.phead .kicker{margin-bottom:var(--s6)}

/* Brotkrume — Orientierung ohne Zierrat */
.crumb{display:flex;align-items:center;gap:10px;font-size:13px;
  color:rgba(244,241,234,.6);margin-bottom:var(--s5)}
/* Der Link ist Navigation, kein Fliesstext — er faellt damit unter die
   44px-Regel. Die Trefferflaeche waechst nach oben und unten ueber die
   Zeile hinaus, die Unterstreichung bleibt aber an der Schrift kleben:
   deshalb inline-flex mit fester Hoehe statt Innenabstand.          */
.crumb a{display:inline-flex;align-items:center;min-height:44px;
  border-bottom:1px solid transparent;padding-bottom:1px}
.crumb a:hover{border-color:currentColor}
.crumb span{opacity:.5}

/* ── Ankerleiste ─────────────────────────────────────────────────
   Bleibt fuer die Kanzlei-Seite: dort stehen genau zwei Abschnitte
   auf einer kurzen Seite, da ist ein Sprungverweis richtig. Die
   Leistungsseite nutzt stattdessen die Schiene weiter unten, weil
   dort fuenf lange Felder standen — das war das Scroll-Problem.  */
.subnav{
  position:sticky; top:0; z-index:var(--z-sticky);
  background:rgba(244,241,234,.94);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:var(--bw) solid var(--line);
}
.subnav ol{
  max-width:var(--w-max); margin:0 auto; padding:0 var(--pad);
  list-style:none; display:flex; gap:clamp(18px,2.6vw,40px);
  overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.subnav ol::-webkit-scrollbar{ display:none }
.subnav a{
  display:inline-flex; align-items:center; min-height:54px; white-space:nowrap;
  font-size:var(--fs-nav); color:var(--ink-70);
  border-bottom:var(--bw-2) solid transparent;
  transition:color var(--dur-state),border-color var(--dur-state);
}
.subnav a:hover,.subnav a:focus-visible{ color:var(--ink); border-bottom-color:var(--gold) }
.subnav a[aria-current="true"]{ color:var(--ink); border-bottom-color:var(--ink) }
@media(max-width:900px){ .subnav a{ font-size:15px; min-height:52px } }

/* ══ LEISTUNGSFELDER — Schiene mit Einrastpunkten ════════════════
   Das Wischen macht der Browser (scroll-snap), nicht JavaScript.
   Damit fuehlt es sich auf dem Telefon nativ an, funktioniert ohne
   Skript und laesst sich nicht "verschlucken". Die Schaltflaechen
   oben sind reine Steuerung; alle fuenf Felder bleiben im Dokument,
   damit Screenreader nichts verlieren.                             */

.svcx{ background:var(--paper); color:var(--ink) }

/* ── Steuerleiste ────────────────────────────────────────────── */
.svcx__bar{
  position:sticky; top:0; z-index:var(--z-sticky);
  background:rgba(244,241,234,.94);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:var(--bw) solid var(--line);
  display:flex; align-items:stretch; gap:var(--s5);
  padding:0 var(--pad);
}
.svcx__tabs{
  flex:1; min-width:0; display:flex; gap:clamp(14px,2.2vw,34px);
  overflow-x:auto; scrollbar-width:none;
}
.svcx__tabs::-webkit-scrollbar{ display:none }
.svcx__tab{
  flex:none; display:inline-flex; align-items:center; gap:10px;
  min-height:60px; padding:0; background:none; border:0; cursor:pointer;
  font-family:var(--body); font-size:var(--fs-nav); color:var(--ink-70);
  white-space:nowrap; border-bottom:var(--bw-2) solid transparent;
  transition:color var(--dur-state) var(--ease-micro),
             border-color var(--dur-state) var(--ease-micro);
}
.svcx__tab-no{ font-family:var(--display); font-weight:300; font-size:15px; color:var(--ink-70) }
.svcx__tab:hover{ color:var(--ink) }
.svcx__tab[aria-current="true"]{ color:var(--ink); border-bottom-color:var(--gold) }
.svcx__tab[aria-current="true"] .svcx__tab-no{ color:var(--gold-ink) }

.svcx__nav{ display:flex; align-items:center; gap:var(--s3); flex:none }
.svcx__step{
  width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center;
  background:none; border:var(--bw) solid var(--line-strong); border-radius:var(--r-1);
  color:var(--ink); cursor:pointer;
  transition:border-color var(--dur-state),color var(--dur-state),background var(--dur-state);
}
.svcx__step:hover:not([disabled]){ border-color:var(--gold); color:var(--gold-ink) }
.svcx__step[disabled]{ opacity:.32; cursor:not-allowed }
.svcx__count{ font-size:var(--fs-small); color:var(--ink-70); min-width:5ch; text-align:center }
.svcx__count b{ color:var(--ink); font-weight:600 }

/* ── Die Schiene ─────────────────────────────────────────────── */
.svcx__track{
  display:flex; overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; scroll-behavior:smooth;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.svcx__track::-webkit-scrollbar{ display:none }
.svcx__track:focus-visible{ outline:var(--focus-w) solid var(--focus); outline-offset:-4px }

.svcx__panel{
  flex:0 0 100%; scroll-snap-align:start; scroll-snap-stop:always;
  padding:var(--sec-y) var(--pad);
}
.svcx__panel-in{ max-width:var(--w-max); margin:0 auto }

.svcx__no{
  font-family:var(--display); font-weight:300; font-size:clamp(40px,5vw,76px);
  line-height:.9; letter-spacing:-.03em; color:var(--gold);
  font-variation-settings:"opsz" var(--opsz-xl); margin-bottom:var(--s4);
}
.svcx__panel h2{
  font-family:var(--display); font-weight:300; font-size:var(--fs-h1);
  line-height:1.04; letter-spacing:var(--tr-display);
  font-variation-settings:"opsz" var(--opsz-xl);
  text-wrap:balance; overflow-wrap:break-word; hyphens:auto;
  margin-bottom:var(--s5);
}
.svcx__lead{
  color:var(--ink-70); font-size:var(--fs-lead); line-height:1.6;
  max-width:58ch; margin-bottom:clamp(28px,4vh,48px);
}

.svcx__body{
  display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(24px,4vw,72px); align-items:start;
}
/* Beide Spalten beginnen mit derselben Kante — sonst sitzt die
   aufklappbare Spalte tiefer und das wirkt wie ein Versehen. */
.svcx__col,.svcx__more{ border-top:var(--bw) solid var(--line); padding-top:var(--s4) }
/* Nur die Beschriftungen sind Versalien — nicht die Spalte selbst,
   sonst erben alle Listenpunkte Versalsatz und Fettschnitt. */
.svcx__col h3,.svcx__more summary span{
  font-family:var(--body); font-weight:600; font-size:var(--fs-util);
  letter-spacing:var(--tr-util); text-transform:uppercase; color:var(--ink);
}
.svcx__col h3{ display:flex; align-items:center; min-height:44px; margin-bottom:var(--s2) }
.svcx ul{ list-style:none; display:grid; gap:11px }
.svcx li{ display:flex; gap:11px; font-size:var(--fs-small); line-height:1.55; color:var(--ink-70) }
.svcx li::before{ content:"—"; color:var(--tone); flex:none }

/* Aufklappbar: „Wie wir arbeiten" ist Zusatz. Die Grenze der Leistung
   bleibt dagegen immer sichtbar — sie darf man nicht wegklicken. */
.svcx__more summary{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
  min-height:44px; cursor:pointer; list-style:none; color:var(--ink);
}
.svcx__more summary::-webkit-details-marker{ display:none }
.svcx__more summary svg{ flex:none; color:var(--ink-70); transition:transform var(--dur-state) var(--ease-inout) }
.svcx__more[open] summary svg{ transform:rotate(45deg) }
.svcx__more[open] ul{ margin-top:var(--s4) }

.svcx__limit{
  margin-top:clamp(26px,4vh,40px); border-left:var(--bw-2) solid var(--gold);
  padding-left:var(--s4); max-width:74ch;
}
.svcx__limit b{
  display:block; font-family:var(--body); font-weight:600; font-size:var(--fs-util);
  letter-spacing:var(--tr-util); text-transform:uppercase; margin-bottom:8px;
}
.svcx__limit p{ color:var(--ink-70); font-size:var(--fs-small); line-height:1.6 }
.svcx__tags{
  margin-top:var(--s5); padding-top:var(--s4);
  border-top:var(--bw) solid var(--line); color:var(--ink-70);
}

/* Wischhinweis nur auf dem Telefon */
.svcx__hint{ display:none }

@media(max-width:900px){
  .svcx__bar{ padding:0 var(--pad); gap:var(--s4) }
  .svcx__nav{ display:none }          /* auf dem Telefon wird gewischt */
  .svcx__tab{ min-height:56px; font-size:15px }
  .svcx__body{ grid-template-columns:1fr; gap:var(--s5) }
  .svcx li{ font-size:16px }
  .svcx__limit p{ font-size:16px }
  .svcx__panel{ padding:var(--s7) var(--pad) var(--s8) }
  .svcx__hint{
    display:flex; align-items:center; gap:10px; justify-content:center;
    padding:0 var(--pad) var(--s6); color:var(--ink-70); font-size:var(--fs-small);
  }
}

@media (prefers-reduced-motion:reduce){
  .svcx__track{ scroll-behavior:auto }
}

/* ══════════════════════════════════════════════════════════════
   RECHTSSEITEN und FEHLERSEITE
   ══════════════════════════════════════════════════════════════ */

/* Schlanker Kopf für Seiten ohne Bild */
.lhead{position:relative;background:var(--ink);color:var(--paper);
  padding:calc(var(--navH) + clamp(40px,7vh,80px)) var(--pad) clamp(30px,5vh,56px)}
/* Gleiches Satzmaß wie der Fließtext darunter — sonst fluchten die
   linken Kanten von Überschrift und Text nicht. */
.lhead__in{max-width:74ch;margin:0 auto}
.lhead h1{font-family:var(--display);font-weight:300;font-size:var(--fs-h1);
  line-height:1.04;letter-spacing:var(--tr-display);
  font-variation-settings:"opsz" var(--opsz-xl);text-wrap:balance}
.lhead .crumb{margin-bottom:var(--s5)}

/* Fließtext-Spalte: eine Spalte, ruhiger Rhythmus, gut lesbare Breite */
.legal{background:var(--paper);color:var(--ink);padding:clamp(48px,8vh,96px) var(--pad)}
.legal__in{max-width:74ch;margin:0 auto}
.legal h2{font-family:var(--display);font-weight:400;font-size:var(--fs-h3);
  font-variation-settings:"opsz" var(--opsz-m);
  line-height:1.2;letter-spacing:-.01em;margin:clamp(34px,5vh,54px) 0 var(--s4);
  padding-top:var(--s4);border-top:1px solid var(--line)}
.legal h2:first-of-type{margin-top:0;padding-top:0;border-top:0}
.legal p,.legal li{color:var(--ink-70);font-size:16.5px;line-height:1.68;margin-bottom:var(--s4)}
.legal strong{color:var(--ink);font-weight:600}
/* Fließtext-Links: Trefferfläche vertikal vergrößern. Innenabstand an
   Inline-Elementen erweitert die Klickbox, ohne die Zeilenhöhe zu ändern. */
.legal a{border-bottom:1px solid var(--line);padding:7px 0 1px;transition:border-color var(--dur-micro),color var(--dur-micro)}
.legal a:hover{border-color:var(--gold);color:var(--gold-ink)}
.legal ul{list-style:none;display:grid;gap:var(--s3);margin-bottom:var(--s4)}
.legal li{display:flex;gap:12px;margin-bottom:0}
.legal li::before{content:"—";color:var(--tone);flex:none}
.legal__date{margin-top:clamp(34px,5vh,54px);padding-top:var(--s4);
  border-top:1px solid var(--line);font-size:13.5px;color:var(--ink-70)}

/* Fehlerseite: dreisprachig, weil die Seite jede Sprache empfängt */
.nf{min-height:100svh;background:var(--ink);color:var(--paper);position:relative;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;padding:calc(var(--navH) + var(--s7)) var(--pad) var(--s8)}
.nf::after{content:"";position:absolute;inset:auto -20% -50% 30%;height:80%;
  background:radial-gradient(56% 56% at 50% 50%,rgba(13,189,230,.14),transparent 70%);pointer-events:none}
.nf__in{position:relative;z-index:2;max-width:640px}
.nf__code{font-family:var(--display);font-weight:300;font-size:clamp(72px,16vw,180px);
  line-height:.86;letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:var(--cyan);
  margin-bottom:var(--s5)}
.nf h1{font-family:var(--display);font-weight:350;font-size:var(--fs-h2);line-height:var(--lh-head);letter-spacing:var(--tr-head);font-variation-settings:"opsz" var(--opsz-l);text-wrap:balance;margin-bottom:var(--s4)}
.nf__alt{color:rgba(244,241,234,.6);font-size:15px;line-height:1.7;margin-bottom:var(--s7)}
.nf__alt em{font-style:normal;display:block}
.nf__links{display:flex;align-items:center;justify-content:center;gap:var(--s4);
  flex-wrap:wrap;margin-top:var(--s6);font-size:15px;color:rgba(244,241,234,.6)}
.nf__links a{display:inline-flex;align-items:center;min-height:44px;
  color:var(--paper);border-bottom:1px solid rgba(244,241,234,.35);transition:border-color var(--dur-micro)}
.nf__links a:hover{border-color:var(--cyan)}
.nf__links span{opacity:.4}

@media(max-width:900px){
  .legal p,.legal li{font-size:16.5px}
  .legal__date{font-size:14px}
  .legal a{display:inline}
  .nf__alt{font-size:16px}
}


/* ══ ARBEITSWEISE — vier Schritte als durchlaufende Linie ════════
   Nummeriert, weil hier wirklich eine Reihenfolge vorliegt: wer
   vorbereitet, wer prueft, wer freigibt, wer einreicht. Eine
   durchgehende Haarlinie verbindet die Schritte — die Grenze nach
   StBerG wird dadurch nachvollziehbar statt nur behauptet.
   Wieder eine andere Geometrie als jeder Abschnitt davor.        */
.flow{ background:var(--ink); color:var(--paper); padding:var(--sec-y) var(--pad) }
.flow__in{ max-width:var(--w-max); margin:0 auto }
.flow__head{ max-width:62ch; margin-bottom:clamp(40px,6vh,72px) }
.flow__head .t-util{ display:block; color:var(--paper-50); margin-bottom:var(--s4) }
.flow__head h2{
  font-family:var(--display); font-weight:350; font-size:var(--fs-h2);
  line-height:var(--lh-head); letter-spacing:var(--tr-head);
  font-variation-settings:"opsz" var(--opsz-l); text-wrap:balance;
  margin-bottom:var(--s5);
}
.flow__head p{ color:var(--paper-70); font-size:var(--fs-lead); line-height:1.6 }

.flow__list{
  list-style:none; display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(24px,3vw,48px); position:relative;
}
/* Die Linie, die alle vier Schritte verbindet */
.flow__list::before{
  content:""; position:absolute; left:0; right:0; top:12px; height:var(--bw);
  background:linear-gradient(90deg,var(--cyan) 0%,rgba(13,189,230,.35) 62%,var(--line-dark) 100%);
}
.flow__step{ position:relative; padding-top:var(--s7) }
.flow__no{
  position:absolute; top:0; left:0;
  width:24px; height:24px; border-radius:var(--r-pill);
  display:flex; align-items:center; justify-content:center;
  background:var(--ink); border:var(--bw) solid var(--cyan);
  color:var(--cyan); font-size:13px; font-weight:600;
}
.flow__step h3{
  font-family:var(--body); font-weight:600; font-size:var(--fs-h4);
  line-height:var(--lh-snug); margin-bottom:var(--s3);
}
.flow__step p{ color:var(--paper-70); font-size:var(--fs-small); line-height:1.6 }
.flow__note{
  margin-top:clamp(36px,5vh,64px); padding-top:var(--s4);
  border-top:var(--bw) solid var(--line-dark);
  color:var(--paper-50); font-size:var(--fs-small); line-height:var(--lh-body);
  max-width:78ch;
}

@media(max-width:900px){
  /* Senkrecht: die Linie laeuft links mit, die Ziffern sitzen darauf */
  .flow__list{ grid-template-columns:1fr; gap:0 }
  .flow__list::before{ left:12px; right:auto; top:0; bottom:0; width:var(--bw); height:auto;
    background:linear-gradient(180deg,var(--cyan) 0%,rgba(13,189,230,.35) 62%,var(--line-dark) 100%) }
  .flow__step{ padding:0 0 var(--s7) 48px }
  .flow__step:last-child{ padding-bottom:0 }
  .flow__no{ top:2px }
  .flow__step p{ font-size:16px }
  .flow__head p{ font-size:16.5px }
}


/* ══ TIPPZIELE BIS TABLET QUER ═══════════════════════════════════
   Bis 1024px kann jedes Geraet ein Tablet im Querformat sein — dort
   wird getippt, nicht geklickt. Diese Regel aendert nur die
   Trefferflaeche, nicht das Aussehen: Innenabstand statt Groesse. */
@media(max-width:1024px){
  .brand{ min-height:44px; display:inline-flex; align-items:center }
  .foot ul a,.foot__bar a,.foot__tel{ min-height:44px }
  .nav__mid a{ min-height:44px; display:inline-flex; align-items:center }
  .subnav a,.svcx__tab{ min-height:52px }
  .nf__links a,.close__alt a,.link-ink,.link-quiet{ min-height:44px }
  .tribar button{ min-height:44px; padding:11px 0 }
}


/* ══ BEWEGUNG ════════════════════════════════════════════════════
   Vier Bewegungen, jede mit einer Bedeutung — kein Effekt fuer alles.

     reveal   Eine Maske gibt frei. Fuer Anzeigenschriften und Bilder:
              der Inhalt wird aufgedeckt, nicht eingeblendet.
     rise     Kleiner Weg nach oben. Fuer Fliesstext und Listen.
              Bewusst zurueckhaltend, damit reveal die Hauptstimme bleibt.
     draw     Eine Linie wird gezogen. Fuer die goldenen Haarlinien.
     count    Eine Ziffer zaehlt hoch. Nur fuer echte Zahlen.

   Grundsatz: die Seite ist ohne Skript und ohne Bewegung vollstaendig.
   Verborgen wird nur, wenn html.anim gesetzt ist — das setzt das
   Skript erst, wenn Bewegung ueberhaupt erwuenscht ist.            */

.anim [data-anim]{ will-change:transform,opacity,clip-path }

.anim [data-anim="reveal"]{
  clip-path:inset(0 0 102% 0); opacity:0;
  transition:clip-path var(--dur-enter) var(--ease-out) var(--d,0ms),
             opacity   var(--dur-elem)  var(--ease-out) var(--d,0ms);
}
.anim [data-anim="rise"]{
  opacity:0; transform:translateY(var(--move-2));
  transition:opacity var(--dur-elem) var(--ease-out) var(--d,0ms),
             transform var(--dur-enter) var(--ease-out) var(--d,0ms);
}
.anim [data-anim="draw"]{
  transform:scaleX(0); transform-origin:left center;
  transition:transform var(--dur-enter) var(--ease-out) var(--d,0ms);
}
.anim [data-anim="zoom"]{
  clip-path:inset(0 0 100% 0);
  transition:clip-path var(--dur-hero) var(--ease-out) var(--d,0ms);
}
.anim [data-anim="zoom"] img{
  transform:scale(1.06);
  transition:transform 1600ms var(--ease-out) var(--d,0ms);
}

.anim [data-in]{ opacity:1; clip-path:inset(0 0 -6% 0); transform:none }
.anim [data-anim="zoom"][data-in] img{ transform:none }

/* Der Fuss der Seite bewegt sich nicht: dort wird gesucht, nicht gestaunt */
.anim .foot [data-anim]{ transition-duration:var(--dur-elem) }

@media (prefers-reduced-motion:reduce){
  .anim [data-anim]{ opacity:1 !important; transform:none !important;
    clip-path:none !important; transition:none !important }
  .anim [data-anim] img{ transform:none !important; transition:none !important }
}


/* ══ ORTSBAND — die einzige Fotografie in der Seitenmitte ════════
   Schmal und ruhig. Es loest zugleich ein Rhythmusproblem: davor und
   danach standen zwei helle Abschnitte unmittelbar aufeinander.
   Das Bild zeigt eine Fassade, nicht die Geschaeftsraeume — deshalb
   behauptet der Text auch nichts anderes.                          */
.band{ position:relative; overflow:hidden; background:var(--ink);
  height:clamp(220px,34svh,380px) }
.band picture{ display:block; width:100%; height:100% }
.band img{ width:100%; height:100%; object-fit:cover; object-position:50% 46% }
.anim .band img{ transform:scale(1.05); transition:transform 1800ms var(--ease-out) }
.anim .band[data-in] img{ transform:none }
.band::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg,rgba(17,26,36,.86) 0%,rgba(17,26,36,.52) 34%,rgba(17,26,36,.06) 68%,rgba(17,26,36,0) 100%) }
.band__txt{ position:absolute; left:var(--pad); bottom:clamp(24px,4vh,44px); z-index:2;
  color:var(--paper); max-width:min(46ch,60%) }
.band__txt .t-util{ display:block; color:var(--paper-50); margin-bottom:var(--s3) }
.band__line{
  display:block; font-family:var(--display); font-weight:300;
  font-size:clamp(19px,2.2vw,32px); line-height:1.22; letter-spacing:var(--tr-head);
  font-variation-settings:"opsz" var(--opsz-l); text-wrap:balance;
}
@media(max-width:700px){
  .band{ height:clamp(260px,42svh,340px) }
  .band::after{ background:linear-gradient(0deg,rgba(17,26,36,.9) 0%,rgba(17,26,36,.35) 46%,rgba(17,26,36,.05) 100%) }
  .band__txt{ max-width:none; right:var(--pad) }
}


/* ══ SO ARBEITEN WIR — der Weg des Mandanten ═════════════════════
   Bewusst anders gebaut als die Arbeitsweise auf der Kanzlei-Seite.
   Dort: Aufgabenteilung nach StBerG, waagerecht, kleine Marken auf
   dunkler Linie. Hier: zeitlicher Ablauf, senkrecht, grosse Ziffern
   auf heller Flaeche. Zwei gleich aussehende Vierer-Listen waeren
   genau die Wiederholung, die vermieden werden soll.              */
.weg{ background:var(--paper-hi); color:var(--ink);
  border-top:var(--bw) solid var(--line); padding:var(--sec-y) var(--pad) }
.weg__in{ max-width:var(--w-max); margin:0 auto;
  display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr);
  gap:clamp(28px,5vw,88px); align-items:start }
.weg__head{ position:sticky; top:calc(var(--navH) + var(--s5)) }
.weg__head .t-util{ display:block; color:var(--ink-70); margin-bottom:var(--s4) }
.weg__head h2{
  font-family:var(--display); font-weight:350; font-size:var(--fs-h2);
  line-height:var(--lh-head); letter-spacing:var(--tr-head);
  font-variation-settings:"opsz" var(--opsz-l); text-wrap:balance;
  margin-bottom:var(--s4);
}
.weg__head p{ color:var(--ink-70); font-size:var(--fs-body); line-height:var(--lh-body); max-width:38ch }

.weg__liste{ list-style:none; display:grid; gap:0 }
.weg__schritt{
  display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:clamp(20px,3vw,44px); align-items:start;
  padding:clamp(22px,3.4vh,34px) 0;
  border-top:var(--bw) solid var(--line);
}
.weg__schritt:first-child{ border-top:0; padding-top:0 }
.weg__no{
  font-family:var(--display); font-weight:300;
  font-size:clamp(34px,4.4vw,64px); line-height:.86; letter-spacing:-.03em;
  color:var(--gold); font-variation-settings:"opsz" var(--opsz-xl);
  min-width:1.6ch;
}
.weg__schritt h3{
  font-family:var(--display); font-weight:400; font-size:var(--fs-h3);
  line-height:var(--lh-snug); letter-spacing:-.008em;
  font-variation-settings:"opsz" var(--opsz-m); margin-bottom:var(--s3);
}
.weg__schritt p{ color:var(--ink-70); font-size:var(--fs-small); line-height:1.6; max-width:52ch }

/* ══ ÜBER UNS — das Team ═════════════════════════════════════════ */
.team{ background:var(--paper); color:var(--ink); padding:var(--sec-y) var(--pad) }
.team__in{ max-width:var(--w-max); margin:0 auto }
.team__head{ max-width:56ch; margin-bottom:clamp(36px,5vh,64px) }
.team__head .t-util{ display:block; color:var(--ink-70); margin-bottom:var(--s4) }
.team__head h2{
  font-family:var(--display); font-weight:350; font-size:var(--fs-h2);
  line-height:var(--lh-head); letter-spacing:var(--tr-head);
  font-variation-settings:"opsz" var(--opsz-l); text-wrap:balance;
  margin-bottom:var(--s4);
}
.team__head p{ color:var(--ink-70); font-size:var(--fs-lead); line-height:1.6 }
.team__liste{
  list-style:none; display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(32px,6vw,96px);
}
.team__liste li{
  display:grid; gap:2px; padding:var(--s5) 0;
  border-top:var(--bw) solid var(--line);
}
.team__liste strong{ font-family:var(--body); font-weight:600; font-size:var(--fs-h4) }
.team__liste span{ color:var(--ink-70); font-size:var(--fs-small); line-height:1.5 }
.team__coop{
  margin-top:clamp(32px,5vh,56px); padding-top:var(--s4);
  border-top:var(--bw-2) solid var(--gold);
  color:var(--ink-70); font-size:var(--fs-small); line-height:var(--lh-body);
  max-width:74ch;
}

@media(max-width:900px){
  .weg__in{ grid-template-columns:1fr; gap:var(--s6) }
  .weg__head{ position:static }
  .weg__schritt p{ font-size:16px; max-width:none }
  .weg__no{ font-size:clamp(30px,9vw,42px) }
  .team__liste{ grid-template-columns:1fr; column-gap:0 }
  .team__liste span{ font-size:16px }
  .team__head p{ font-size:16.5px }
}