@import url('fonts.css');

/* ==========================================================================
   PHILIPP DREIER — Design System
   --------------------------------------------------------------------------
   Farbwelt   streng monochrom, warmes Papierweiss, keine Akzentfarbe.
              Hierarchie entsteht durch Kontrast, Groesse und Weissraum.
   Typografie Instrument Sans (Display/UI) + IBM Plex Mono (Zahlen/Labels).
              Gesperrte Versalien als Marken-Prinzip -> anschlussfaehig an
              eine spaetere Dachmarke.
   Motion     ein Easing, zwei Dauern, eine Geste (Reveal von unten).
   ========================================================================== */

:root{
  /* --- Farbe ---------------------------------------------------------- */
  --paper:#faf9f7;
  --paper-warm:#f1efea;
  --ink:#0b0b0a;
  --ink-70:#3f3e3a;
  --ink-45:#75746d;
  --ink-25:#a9a8a1;
  --line:rgba(11,11,10,.13);
  --line-soft:rgba(11,11,10,.07);

  --bg:var(--paper);
  --fg:var(--ink);

  /* --- Typografie ----------------------------------------------------- */
  --sans:'Instrument Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --t-display:clamp(2.1rem,8.4vw,6.75rem);
  --t-h2:clamp(2rem,4.4vw,4rem);
  --t-h3:clamp(1.45rem,2.5vw,2.35rem);
  --t-h4:clamp(1.1rem,1.5vw,1.35rem);
  --t-lead:clamp(1.0625rem,1.28vw,1.3125rem);
  --t-body:clamp(.9688rem,1.02vw,1.0625rem);
  --t-meta:.6875rem;

  /* --- Raum ------------------------------------------------------------ */
  --gutter:clamp(1.25rem,4.6vw,4.5rem);
  --maxw:1440px;
  --section-y:clamp(4.5rem,10vw,9.5rem);
  --rule:1px;

  /* --- Motion ---------------------------------------------------------- */
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.62,.02,.24,1);
  --d-slow:900ms;
  --d-mid:520ms;
  --d-fast:240ms;
}

/* --- Reset ------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;scroll-behavior:smooth;
  overflow-x:hidden;overscroll-behavior-x:none;
}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:var(--sans);font-size:var(--t-body);line-height:1.62;
  font-weight:400;letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;overscroll-behavior-x:none;max-width:100%;
}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit}
::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:2px}

/* --- Layout ------------------------------------------------------------ */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section-y);position:relative}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1rem,2.2vw,2rem)}
.rule{height:var(--rule);background:var(--line);border:0;width:100%}

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--ink);color:var(--paper);padding:.75rem 1rem;
}
.skip:focus{left:0}

/* --- Typografie-Klassen ------------------------------------------------- */
.display{
  font-size:var(--t-display);line-height:.94;letter-spacing:-.038em;
  font-weight:500;text-wrap:balance;
}
.h2{font-size:var(--t-h2);line-height:1.02;letter-spacing:-.033em;font-weight:500;text-wrap:balance}
.h3{font-size:var(--t-h3);line-height:1.1;letter-spacing:-.027em;font-weight:500}
.h4{font-size:var(--t-h4);line-height:1.28;letter-spacing:-.018em;font-weight:500}
.lead{font-size:var(--t-lead);line-height:1.55;letter-spacing:-.012em;color:var(--ink-70);text-wrap:pretty}
.muted{color:var(--ink-45)}
.meta{
  font-family:var(--mono);font-size:var(--t-meta);font-weight:400;
  text-transform:uppercase;letter-spacing:.19em;color:var(--ink-45);
  line-height:1.4;
}

/* Wortmarke — das einzige Markenzeichen der Seite. */
.wordmark{
  display:inline-flex;align-items:baseline;gap:.62em;
  font-weight:500;font-size:.8125rem;text-transform:uppercase;
  letter-spacing:.28em;color:var(--ink);white-space:nowrap;
}
.wordmark span{display:inline-block}
.wordmark--lg{font-size:clamp(.875rem,1.15vw,1rem);letter-spacing:.34em;gap:.7em}

/* --- Link-Signale (ohne Akzentfarbe) ------------------------------------ */
.link{
  display:inline-flex;align-items:center;gap:.55em;
  position:relative;padding-block:.35em;font-weight:500;letter-spacing:-.01em;
}
.link::after{
  content:"";position:absolute;left:0;right:0;bottom:.1em;height:1px;
  background:currentColor;transform:scaleX(1);transform-origin:right;
  transition:transform var(--d-mid) var(--ease);
}
.link:hover::after{transform:scaleX(0)}
.link .arw{transition:transform var(--d-mid) var(--ease)}
.link:hover .arw{transform:translateX(.32em)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.65em;
  height:3.25rem;padding-inline:1.6rem;border:1px solid var(--ink);border-radius:0;
  background:var(--ink);color:var(--paper);cursor:pointer;
  font-size:.9375rem;font-weight:500;letter-spacing:-.01em;
  position:relative;overflow:hidden;transition:color var(--d-mid) var(--ease);
}
.btn > *{position:relative;z-index:1}
.btn::before{
  content:"";position:absolute;inset:0;background:var(--paper);
  transform:translateY(101%);transition:transform var(--d-mid) var(--ease);
}
.btn:hover{color:var(--ink)}
.btn:hover::before{transform:translateY(0)}
.btn .arw{transition:transform var(--d-mid) var(--ease)}
.btn:hover .arw{transform:translateX(.3em)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn--ghost::before{background:var(--ink)}
.btn--ghost:hover{color:var(--paper);border-color:var(--ink)}
.btn[disabled]{opacity:.45;pointer-events:none}

/* --- Navigation --------------------------------------------------------- */
.nav{
  position:fixed;inset:0 0 auto;z-index:80;
  background:color-mix(in srgb,var(--paper) 82%,transparent);
  backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid transparent;
  transition:border-color var(--d-mid) var(--ease),background var(--d-mid) var(--ease);
}
.nav.is-stuck{border-bottom-color:var(--line-soft)}
.nav.is-dark{background:color-mix(in srgb,#0b0b0a 80%,transparent);color:#faf9f7}
.nav.is-dark .wordmark,.nav.is-dark .nav__cta{color:#faf9f7}
.nav.is-dark .nav__link{color:rgba(250,249,247,.68)}
.nav.is-dark .nav__link:hover,.nav.is-dark .nav__link[aria-current="true"]{color:#faf9f7}
.nav.is-dark .nav__toggle span{background:#faf9f7}
.nav.is-dark.is-stuck{border-bottom-color:rgba(250,249,247,.14)}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:2rem;height:4.75rem}
.nav__links{display:flex;align-items:center;gap:clamp(1.25rem,2.4vw,2.5rem)}
.nav__link{
  position:relative;font-size:.9063rem;letter-spacing:-.008em;color:var(--ink-70);
  padding-block:.4rem;transition:color var(--d-fast) var(--ease);
}
.nav__link::after{
  content:"";position:absolute;left:0;bottom:.15rem;width:100%;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform var(--d-mid) var(--ease);
}
.nav__link:hover{color:var(--ink)}
.nav__link:hover::after,.nav__link[aria-current="true"]::after{transform:scaleX(1)}
.nav__link[aria-current="true"]{color:var(--ink)}
.nav__cta{display:inline-flex;align-items:center;gap:.5em;font-size:.9063rem;font-weight:500}
.nav__cta .arw{transition:transform var(--d-mid) var(--ease)}
.nav__cta:hover .arw{transform:translateX(.3em)}
.nav__toggle{display:none;background:none;border:0;padding:.5rem;margin-right:-.5rem;cursor:pointer}
.nav__toggle span{display:block;width:22px;height:1px;background:var(--ink);transition:transform var(--d-mid) var(--ease),opacity var(--d-fast)}
.nav__toggle span+span{margin-top:6px}
body.menu-open .nav__toggle span:first-child{transform:translateY(3.5px) rotate(45deg)}
body.menu-open .nav__toggle span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

.menu{
  position:fixed;inset:0;z-index:70;background:var(--paper);
  display:flex;flex-direction:column;justify-content:center;
  padding:5rem var(--gutter) 3rem;
  opacity:0;visibility:hidden;transition:opacity var(--d-mid) var(--ease),visibility var(--d-mid);
}
body.menu-open .menu{opacity:1;visibility:visible}
body.menu-open{overflow:hidden}
.menu__list li{border-top:1px solid var(--line-soft)}
.menu__list li:last-child{border-bottom:1px solid var(--line-soft)}
.menu__list a{
  display:flex;align-items:baseline;gap:1rem;padding:1.15rem 0;
  font-size:clamp(1.75rem,8vw,2.5rem);letter-spacing:-.03em;font-weight:500;line-height:1.1;
  opacity:0;transform:translateY(14px);transition:opacity var(--d-mid) var(--ease),transform var(--d-mid) var(--ease);
}
body.menu-open .menu__list a{opacity:1;transform:none}
body.menu-open .menu__list li:nth-child(1) a{transition-delay:80ms}
body.menu-open .menu__list li:nth-child(2) a{transition-delay:130ms}
body.menu-open .menu__list li:nth-child(3) a{transition-delay:180ms}
body.menu-open .menu__list li:nth-child(4) a{transition-delay:230ms}
.menu__list .idx{font-family:var(--mono);font-size:.6875rem;color:var(--ink-25);letter-spacing:.16em}
.menu__foot{margin-top:auto;padding-top:2.5rem;display:flex;flex-direction:column;gap:2rem}
.menu__foot .btn{width:100%;opacity:0;transform:translateY(14px);transition:opacity var(--d-mid) var(--ease) 280ms,transform var(--d-mid) var(--ease) 280ms}
body.menu-open .menu__foot .btn{opacity:1;transform:none}
.menu__sig{display:flex;flex-direction:column;gap:.35rem}

/* --- Hero --------------------------------------------------------------- */
.hero{
  min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding-top:8rem;padding-bottom:clamp(7rem,12vh,9rem);position:relative;
}
.hero__eyebrow{margin-bottom:clamp(1.75rem,3.4vw,3rem)}
.hero__title{margin-bottom:clamp(1.75rem,3vw,2.75rem)}
.hero__title .ln{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.hero__title .ln>span{display:block}
.hero__title em{font-style:normal;color:var(--ink-45)}
.hero__body{
  display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1rem,2.2vw,2rem);
  align-items:end;margin-bottom:clamp(2.5rem,5vw,4.5rem);
}
.hero__lead{grid-column:1/span 6;max-width:44ch}
.hero__actions{display:flex;flex-wrap:wrap;gap:.75rem;grid-column:8/span 5;justify-content:flex-end}
.hero__foot{
  position:absolute;left:var(--gutter);right:var(--gutter);
  bottom:clamp(1.5rem,3.2vw,2.75rem);
  display:flex;align-items:baseline;justify-content:space-between;gap:2rem;
  padding-top:1.25rem;border-top:1px solid var(--line-soft);
}
.hero__scroll{display:inline-flex;align-items:center;gap:.6em}
.hero__scroll .dot{
  width:5px;height:5px;border-radius:50%;background:var(--ink-25);
  animation:pulse 2.6s var(--ease-io) infinite;
}
@keyframes pulse{0%,100%{opacity:.25;transform:scale(1)}50%{opacity:1;transform:scale(1.5)}}

/* --- Statement (Erzaehlmoment) -------------------------------------------
   Bewusst ohne bildschirmhohe Buehne: Ein festgehaltener Block wuerde drei
   kurze Zeilen in viel Leere stellen. Der Abschnitt ist deshalb nur so hoch
   wie sein Inhalt — die Zeilen bauen sich beim Hereinscrollen nacheinander
   auf. */
.statement{padding-block:clamp(4.5rem,10vw,8.5rem)}
.statement__inner{display:block}
.statement__list{display:flex;flex-direction:column;gap:clamp(.4rem,1.1vw,1rem)}
.statement__list li{
  font-size:clamp(1.85rem,5.6vw,4.75rem);line-height:1.06;letter-spacing:-.036em;font-weight:500;
  overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em;
}
/* Jede Zeile schiebt sich hinter ihrer eigenen Kante hervor */
.statement__list li > span{
  display:block;transform:translateY(108%);
  transition:transform 1000ms var(--ease);
}
.statement__list li.is-lit > span{transform:none}
.statement__list li.is-lit{color:var(--ink)}
.statement__list li:last-child{padding-left:clamp(0rem,8vw,10rem)}

/* --- Unternehmen --------------------------------------------------------- */
.company__head{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1rem,2.2vw,2rem);align-items:start}
.company__label{grid-column:1/span 3}
.company__intro{grid-column:4/span 8}
.company__name{
  font-size:clamp(2.25rem,6.4vw,5.5rem);line-height:.98;letter-spacing:-.042em;font-weight:500;
  margin-bottom:clamp(1.25rem,2.4vw,2rem);
}
.company__desc{max-width:56ch}
.company__facts{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:clamp(1.5rem,3vw,3rem);margin-top:clamp(2.5rem,5vw,4rem);
  padding-top:clamp(1.5rem,2.5vw,2rem);border-top:1px solid var(--line-soft);
}
.company__fact dt{margin-bottom:.6rem}
.company__fact dd{margin:0;color:var(--ink-70);max-width:34ch}

/* --- Kalkulation (Signature Interaction) --------------------------------- */
.calc{background:var(--ink);color:var(--paper);--line:rgba(250,249,247,.16);--line-soft:rgba(250,249,247,.09);--ink-45:rgba(250,249,247,.55);--ink-25:rgba(250,249,247,.32);--ink-70:rgba(250,249,247,.72)}
.calc .meta{color:var(--ink-45)}
.calc__head h2{max-width:20ch}
.calc__top{
  display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1.5rem,3vw,3.5rem);
  align-items:start;margin-bottom:clamp(3.5rem,7vw,6.5rem);
}
.calc__head{grid-column:1/span 6}
.calc__bottom{
  display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1.5rem,3vw,3.5rem);
  align-items:start;margin-top:clamp(3rem,5.5vw,4.5rem);
}

.ledger{grid-column:9/span 4;position:relative}
/* Fester Rahmen: die Liste faellt in sich zusammen, ohne das Layout zu verschieben.
   An ihrer Stelle bleibt die eine Zahl stehen, um die es geht. */
.ledger__box{
  position:relative;height:clamp(11rem,20vw,15rem);
  -webkit-mask-image:linear-gradient(to bottom,#000 76%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 76%,transparent 100%);
}
.ledger__list{
  display:flex;flex-direction:column;gap:.15rem;
  font-family:var(--mono);font-size:.75rem;letter-spacing:.01em;
}
.ledger__list li{
  display:flex;justify-content:space-between;gap:1rem;padding:.28rem 0;
  border-bottom:1px solid var(--line-soft);color:var(--ink-45);
  transition:opacity 600ms var(--ease),filter 600ms var(--ease),transform 600ms var(--ease);
}
.ledger.is-collapsed .ledger__list li{opacity:0;filter:blur(6px);transform:translateY(-10px) scale(.97)}
.ledger__sum{
  position:absolute;left:0;right:0;top:0;margin:0;
  display:flex;flex-direction:column;gap:.75rem;
  opacity:0;transform:translateY(12px);
  transition:opacity 800ms var(--ease) 420ms,transform 800ms var(--ease) 420ms;
}
.ledger__val{
  font-family:var(--mono);font-weight:500;letter-spacing:-.035em;
  font-size:clamp(1.5rem,2.6vw,2.25rem);line-height:1;color:var(--paper);
  padding-top:.75rem;border-top:1px solid var(--line);
}
.ledger.is-collapsed .ledger__sum{opacity:1;transform:none}

.formula__row{
  display:flex;align-items:flex-end;flex-wrap:wrap;
  gap:clamp(1rem,2.4vw,3rem);
  padding-block:clamp(1.5rem,3vw,2.5rem);
  border-block:1px solid var(--line-soft);
}
.formula__cell{min-width:0}
.formula__k{margin-bottom:.75rem}
.formula__v{
  font-family:var(--mono);font-weight:500;font-size:clamp(1.75rem,4vw,3.25rem);
  line-height:1;letter-spacing:-.045em;font-variant-numeric:tabular-nums;white-space:nowrap;
}
.formula__v .u{font-size:.42em;letter-spacing:.02em;margin-left:.35em;color:var(--ink-45)}
.formula__op{
  font-family:var(--mono);font-size:clamp(1.25rem,2.4vw,2rem);line-height:1;
  color:var(--ink-25);padding-bottom:.28em;
}
.formula__cell--out .formula__v{font-size:clamp(2.5rem,7.4vw,5.75rem);letter-spacing:-.05em}
.formula__op--eq{margin-left:auto}
.formula__cell--out{
  position:relative;padding-left:clamp(1.25rem,3vw,3rem);
  border-left:1px solid var(--line);
}
.formula__note{grid-column:8/span 5;font-size:.875rem}

.controls{grid-column:1/span 6;display:grid;gap:1.25rem;max-width:34rem}
.control__top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:0}
.control__val{font-family:var(--mono);font-size:.875rem;font-variant-numeric:tabular-nums}
/* Der Regler ist optisch eine 1px-Linie, als Bedienflaeche aber 44px hoch —
   sonst ist er mit dem Finger nicht zu treffen. Die sichtbare Linie zeichnet
   der Track, nicht das Element selbst.
   touch-action:pan-y laesst vertikales Wischen die Seite scrollen und gibt
   waagerechte Gesten an den Regler. */
/* Eigener Schieberegler.
   Der native input[type=range] ist auf iOS Safari nicht zuverlaessig per Finger
   zu bedienen — Safari verarbeitet die Beruehrung intern, bevor eigene Listener
   sie sehen. Dieses Element ist ein schlichtes div: Beruehrungen kommen
   garantiert an, das Aussehen bleibt identisch. */
.range{
  position:relative;height:44px;width:100%;
  cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent;
  display:block;
}
.range::before{               /* die Linie */
  content:"";position:absolute;left:0;right:0;top:50%;
  height:1px;background:var(--line);transform:translateY(-50%);
}
.range__thumb{
  position:absolute;top:50%;left:0;
  width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;
  background:var(--paper);pointer-events:none;
  transition:transform var(--d-fast) var(--ease),box-shadow var(--d-fast) var(--ease);
  box-shadow:0 0 0 0 rgba(250,249,247,.18);
}
.range:hover .range__thumb{transform:scale(1.2)}
.range.is-active .range__thumb{transform:scale(1.3);box-shadow:0 0 0 8px rgba(250,249,247,.12)}
.range:focus{outline:none}
.range:focus-visible .range__thumb{box-shadow:0 0 0 8px rgba(250,249,247,.28)}
@media (hover:none){
  .range:hover .range__thumb{transform:none}
}

.calc__out{
  margin-top:clamp(3rem,6vw,5rem);padding-top:clamp(1.5rem,3vw,2.25rem);
  border-top:1px solid var(--line-soft);
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:1.5rem;
}

/* --- Arbeitsfelder (Liste statt Cards) ----------------------------------- */
.fields{border-top:1px solid var(--line)}
.field{border-bottom:1px solid var(--line);position:relative}
.field__in{
  display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1rem,2.2vw,2rem);
  padding-block:clamp(1.75rem,3.4vw,2.75rem);align-items:baseline;
  transition:transform var(--d-mid) var(--ease);
}
.field:hover .field__in{transform:translateX(clamp(4px,.8vw,14px))}
.field__idx{grid-column:1/span 1}
.field__name{grid-column:2/span 4}
.field__desc{grid-column:6/span 6;color:var(--ink-70);max-width:48ch}
.field__tag{
  display:block;width:-moz-fit-content;width:fit-content;
  margin-top:.95rem;font-family:var(--mono);font-size:.625rem;
  text-transform:uppercase;letter-spacing:.17em;color:var(--ink-45);
  border:1px solid var(--line);padding:.28em .6em;
}

/* --- Stimmen aus der Praxis ------------------------------------------------
   Keine Bewertungskarten, keine Sterne: die Zitate stehen fuer sich, gross
   gesetzt, mit der Quelle als ruhige Fussnote. */
.voices__head{
  display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1.5rem,3vw,3rem);
  align-items:center;margin-bottom:clamp(3rem,6vw,5rem);
}
.voices__intro{grid-column:1/span 5}

/* Karte: erst zeichnet sich der Umriss, dann setzt sich jeder Standort mit
   einem auslaufenden Ring — einige pulsieren danach ruhig weiter. */
.voices__map{grid-column:7/span 6;margin:0;justify-self:center;max-width:27rem;width:100%}
.map{width:100%;height:auto;display:block;overflow:visible}

.map__fill{fill:var(--ink);opacity:0;transition:opacity 1200ms var(--ease) 400ms}
.is-in .map__fill{opacity:.05}

.map__outline{
  fill:none;stroke:var(--line);stroke-width:1;stroke-linejoin:round;
  stroke-dasharray:var(--len,1400);stroke-dashoffset:var(--len,1400);
}
.is-in .map__outline{transition:stroke-dashoffset 1800ms var(--ease-io);stroke-dashoffset:0}

.mapdot{
  fill:var(--ink);opacity:0;transform:scale(.2);
  transform-origin:center;transform-box:fill-box;
  transition:opacity 480ms var(--ease),transform 620ms cubic-bezier(.34,1.56,.64,1);
}
.is-in .mapdot{opacity:1;transform:scale(1)}

.mapping{
  fill:none;stroke:var(--ink);stroke-width:1;opacity:0;
  transform-origin:center;transform-box:fill-box;
}
.is-in .mapping{animation:mapPing 1900ms var(--ease) forwards}
@keyframes mapPing{
  0%{opacity:.45;transform:scale(.4)}
  65%{opacity:0;transform:scale(3.6)}
  100%{opacity:0;transform:scale(3.6)}
}

/* Ruhiges Weiterleben einzelner Standorte */
.is-in .mapdot--live{animation:mapBreathe 4.2s var(--ease-io) infinite}
@keyframes mapBreathe{0%,100%{opacity:1}50%{opacity:.42}}



.voices__list{border-top:1px solid var(--line)}
.voice{
  border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1rem,2.2vw,2rem);
  padding-block:clamp(2.25rem,4.4vw,3.5rem);align-items:start;
}
.voice__q{
  grid-column:1/span 8;margin:0;
  font-size:clamp(1.25rem,2.5vw,2rem);line-height:1.28;letter-spacing:-.024em;
  font-weight:500;text-wrap:pretty;
}
.voice__by{grid-column:10/span 3;display:flex;flex-direction:column;gap:.35rem;padding-top:.5rem}
.voice__name{font-size:.9375rem;letter-spacing:-.008em}

/* --- Zitat in "Ueber mich" -------------------------------------------------- */
.about__quote{
  margin:clamp(2rem,3.6vw,2.75rem) 0 0;padding-top:clamp(1.5rem,2.4vw,2rem);
  border-top:1px solid var(--line);max-width:34ch;
}
.about__quote blockquote{
  margin:0;font-size:clamp(1.125rem,1.7vw,1.375rem);line-height:1.4;
  letter-spacing:-.018em;font-weight:500;text-wrap:pretty;
}

/* --- Rahmenbedingungen des Gespraechs ---------------------------------------- */
.terms{
  margin-top:clamp(2rem,3.4vw,2.75rem);
  border-top:1px solid var(--line-soft);
}
.terms li{
  display:flex;align-items:baseline;gap:1rem;
  padding-block:.85rem;border-bottom:1px solid var(--line-soft);
}
.terms__k{
  font-family:var(--mono);font-size:.75rem;text-transform:uppercase;
  letter-spacing:.14em;min-width:9rem;
}
.terms__v{font-size:.9375rem;color:var(--ink-45)}

/* Trennlinien zeichnen sich von links auf, wenn die Zeile erscheint */
.field,.path,.voice{position:relative}
.field::after,.path::after,.voice::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--ink);transform:scaleX(0);transform-origin:left;
  transition:transform 1100ms var(--ease);
}
.field.is-in::after,.path.is-in::after,.voice.is-in::after{transform:scaleX(1)}

/* --- Prinzipien ----------------------------------------------------------- */
.principle{
  display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1rem,2.2vw,2rem);
  padding-block:clamp(2.25rem,4.6vw,4rem);border-top:1px solid var(--line-soft);
}
.principle:first-of-type{border-top:0}
.principle__n{
  grid-column:1/span 2;font-family:var(--mono);font-size:clamp(1.5rem,3.4vw,2.75rem);
  line-height:1;letter-spacing:-.04em;color:var(--ink-25);
}
.principle__t{grid-column:3/span 4}
.principle__d{grid-column:8/span 5;color:var(--ink-70);max-width:42ch}

/* --- Ueber Philipp --------------------------------------------------------- */
.about{background:var(--paper-warm)}
.about__in{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1.75rem,3.4vw,4rem);align-items:start}
.about__fig{grid-column:1/span 4;margin:0}
.about__fig picture{display:block;overflow:hidden;max-width:360px}
.about__img{
  width:100%;max-width:360px;aspect-ratio:4/5;object-fit:cover;object-position:50% 22%;
  will-change:transform;
  filter:grayscale(1) contrast(1.04) brightness(1.02);
  mix-blend-mode:multiply;
}
.about__cap{margin-top:1rem;max-width:360px}
.about__txt{grid-column:6/span 6}
.about__txt .h2{margin-bottom:.85rem}
.about__sub{margin-bottom:clamp(1.75rem,3vw,2.5rem)}
.about__p{max-width:52ch;color:var(--ink-70)}
.about__p+.about__p{margin-top:1.25rem}

/* --- Vision (dunkel) -------------------------------------------------------- */
.vision{background:var(--ink);color:var(--paper);--line:rgba(250,249,247,.16);--line-soft:rgba(250,249,247,.09);--ink-45:rgba(250,249,247,.55);--ink-25:rgba(250,249,247,.3);--ink-70:rgba(250,249,247,.72)}
.vision .meta{color:var(--ink-45)}
.vision__head{margin-bottom:clamp(3.5rem,7vw,6rem)}
.vision__head h2{max-width:16ch}
.vision__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(2rem,4vw,4rem)}
.vision__col{display:flex;flex-direction:column}
.vision__col--now{grid-column:1/span 4}
.vision__col--next{grid-column:6/span 7}
.vision__colhead{padding-bottom:1rem;border-bottom:1px solid var(--line);margin-bottom:clamp(1.75rem,3vw,2.5rem)}
.diagram{width:100%;height:auto;overflow:visible}
.diagram--tall{display:none}
.diagram .ln{stroke:rgba(250,249,247,.34);stroke-width:1;fill:none;stroke-dasharray:var(--len,200);stroke-dashoffset:var(--len,200)}
.is-drawn .diagram .ln{transition:stroke-dashoffset 1100ms var(--ease-io);stroke-dashoffset:0}
.diagram .nd{fill:var(--paper);opacity:0;transition:opacity 500ms var(--ease)}
.is-drawn .diagram .nd{opacity:1}
.diagram .nd--open{fill:none;stroke:rgba(250,249,247,.42);stroke-width:1}
.diagram text{fill:var(--paper);font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;opacity:0;transition:opacity 600ms var(--ease)}
.is-drawn .diagram text{opacity:1}
.diagram text.dim{fill:rgba(250,249,247,.5)}
.vision__note{margin-top:clamp(3rem,5vw,4.5rem);padding-top:clamp(1.5rem,2.5vw,2rem);border-top:1px solid var(--line-soft);max-width:58ch}

/* --- Wege ------------------------------------------------------------------- */
.paths{border-top:1px solid var(--line)}
.path{border-bottom:1px solid var(--line)}
.path__in{
  display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1rem,2.2vw,2rem);
  padding-block:clamp(1.75rem,3.2vw,2.5rem);align-items:center;
  transition:transform var(--d-mid) var(--ease);
}
.path:hover .path__in{transform:translateX(clamp(4px,.8vw,14px))}
.path__t{grid-column:1/span 4}
.path__d{grid-column:5/span 4;color:var(--ink-70)}
.path__a{grid-column:10/span 3;justify-self:end;text-align:right}

/* --- Kontakt ------------------------------------------------------------------ */
.contact__in{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(2rem,4vw,4rem);align-items:start}
.contact__l{grid-column:1/span 5}
.contact__l .h2{margin-bottom:1.25rem}
.contact__direct{margin-top:clamp(2rem,3.4vw,2.75rem);padding-top:1.5rem;border-top:1px solid var(--line-soft)}
.contact__f{grid-column:7/span 6}

/* Terminbuchung — Zustand vor dem Laden ist Teil der Gestaltung, nicht ein Hinweiskasten */
.booking{position:relative}
.booking__gate{border:1px solid var(--line);padding:clamp(1.5rem,3vw,2.25rem)}
.booking__t{margin-bottom:.85rem}
.booking__d{font-size:.875rem;line-height:1.6;color:var(--ink-70);max-width:48ch}
.booking__d a{border-bottom:1px solid var(--ink-25);transition:border-color var(--d-fast) var(--ease)}
.booking__d a:hover{border-bottom-color:var(--ink)}
.booking__actions{display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem;margin-top:clamp(1.5rem,2.6vw,2rem)}
.booking__err{margin-top:1rem;font-size:.8125rem;color:var(--ink)}
.booking__frame{min-height:680px}
.booking__frame .calendly-inline-widget{width:100%;height:680px}
@media (max-width:640px){.booking__frame,.booking__frame .calendly-inline-widget{min-height:640px;height:640px}}
@media (max-width:400px){.booking__frame,.booking__frame .calendly-inline-widget{min-height:600px;height:600px}}

/* --- Footer -------------------------------------------------------------------- */
.footer{border-top:1px solid var(--line);padding-block:clamp(3rem,6vw,5rem) 2rem}
.footer__in{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1.75rem,3vw,2.5rem)}
.footer__brand{grid-column:1/span 4}
.footer__brand .meta{margin-top:.9rem}
.footer__col{grid-column:span 2}
.footer__col:nth-of-type(1){grid-column:5/span 2}
.footer__col:nth-of-type(2){grid-column:7/span 3}
.footer__col:nth-of-type(3){grid-column:10/span 3}
.footer__col a{white-space:nowrap}
.footer__col h3{margin-bottom:1.1rem}
.footer__col li+li{margin-top:.55rem}
.footer__col a{font-size:.9063rem;color:var(--ink-70);transition:color var(--d-fast) var(--ease)}
.footer__col a:hover{color:var(--ink)}
.footer__bot{
  margin-top:clamp(3rem,6vw,5rem);padding-top:1.5rem;border-top:1px solid var(--line-soft);
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
}

/* --- Rechtsseiten ---------------------------------------------------------------- */
.legal{padding-top:9rem}
.legal__in{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1.75rem,3vw,3rem)}
.legal__nav{grid-column:1/span 3}
.legal__body{grid-column:5/span 7;max-width:68ch}
.legal__body h2{font-size:var(--t-h4);font-weight:500;letter-spacing:-.018em;margin-top:2.75rem;margin-bottom:.85rem}
.legal__body h2:first-child{margin-top:0}
.legal__body p{color:var(--ink-70);margin-bottom:1rem}
.legal__body ul{margin-bottom:1rem}
.legal__body li{color:var(--ink-70);padding-left:1.1rem;position:relative;margin-bottom:.35rem}
.legal__body li::before{content:"";position:absolute;left:0;top:.72em;width:4px;height:1px;background:var(--ink-25)}
.legal__body a{border-bottom:1px solid var(--line);transition:border-color var(--d-fast)}
.legal__body a:hover{border-bottom-color:var(--ink)}
.todo{
  border:1px solid var(--line);padding:1.1rem 1.25rem;margin-bottom:1.25rem;
  font-family:var(--mono);font-size:.75rem;line-height:1.65;color:var(--ink-70);
}
.todo b{font-weight:500;color:var(--ink);display:block;margin-bottom:.4rem;text-transform:uppercase;letter-spacing:.15em;font-size:.625rem}

/* --- Wortweises Aufdecken grosser Ueberschriften --------------------------- */
.h2.is-words .wd{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.h2.is-words .wd > span{display:inline-block;transform:translateY(112%);transition:transform 900ms var(--ease)}
.h2.is-words.is-in .wd > span{transform:none}

/* --- Reveal-Motion ---------------------------------------------------------------- */
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity var(--d-slow) var(--ease),transform var(--d-slow) var(--ease)}
[data-reveal].is-in{opacity:1;transform:none}
[data-reveal-lines] .ln>span{transform:translateY(135%);transition:transform var(--d-slow) var(--ease)}
[data-reveal-lines].is-in .ln>span{transform:none}
[data-reveal-lines].is-in .ln:nth-child(2)>span{transition-delay:110ms}
[data-reveal-lines].is-in .ln:nth-child(3)>span{transition-delay:200ms}

/* --- Responsive ------------------------------------------------------------------- */
@media (max-width:1080px){
  .hero__lead{grid-column:1/span 7}
  .hero__actions{grid-column:1/span 12;justify-content:flex-start;margin-top:2rem}
  .calc__head{grid-column:1/span 7}
  .ledger{grid-column:9/span 4}
  .controls{grid-column:1/span 7}
  .formula__note{grid-column:9/span 4}
  .company__label{grid-column:1/span 12;margin-bottom:1rem}
  .company__intro{grid-column:1/span 12}
  .field__name{grid-column:2/span 5}
  .field__desc{grid-column:7/span 6}
  .about__fig{grid-column:1/span 5}
  .about__txt{grid-column:7/span 6}
  .principle__t{grid-column:3/span 5}
  .principle__d{grid-column:8/span 5}
  .voices__intro{grid-column:1/span 6}
  .voices__map{grid-column:7/span 6;max-width:22rem}
  .voice__q{grid-column:1/span 12}
  .voice__by{grid-column:1/span 12;flex-direction:row;gap:.75rem;align-items:baseline;padding-top:1rem}
  .vision__col--now{grid-column:1/span 12}
  .vision__col--next{grid-column:1/span 12;margin-top:3rem}
  .contact__l{grid-column:1/span 12}
  .contact__f{grid-column:1/span 12;margin-top:1rem}
  .path__t{grid-column:1/span 5}
  .path__d{grid-column:6/span 4}
  .path__a{grid-column:11/span 2}
  .footer__brand{grid-column:1/span 12}
  .footer__col{grid-column:span 4}
  .footer__col:nth-of-type(2){grid-column:1/span 4}
  .legal__nav{grid-column:1/span 12;margin-bottom:2rem}
  .legal__body{grid-column:1/span 12}
}

@media (max-width:768px){
  :root{--section-y:clamp(4.5rem,11vw,7rem)}
  .nav__links,.nav__cta{display:none}
  .nav__toggle{display:block}
  .nav__in{height:4.25rem}
  .hero{padding-top:7rem;min-height:100svh}
  .hero__body{display:block}
  .hero__lead{max-width:none}
  .hero__actions{margin-top:2rem}
  .hero__foot{flex-direction:column;gap:.5rem;align-items:flex-start}
  .statement__list li:last-child{padding-left:0}
  .calc__top,.calc__bottom{display:block}
  .calc__head{margin-bottom:3rem}
  .ledger{margin-bottom:0}
  .controls{max-width:none;margin-bottom:2.5rem}
  .formula__row{gap:1.25rem}
  .formula__op--eq{margin-left:0}
  .formula__cell--out{padding-left:0;border-left:0;border-top:1px solid var(--line);padding-top:1.5rem;margin-top:.5rem;width:100%}
  .diagram--wide{display:none}
  .diagram--tall{display:block}
  .controls{max-width:none}
  .field__in,.path__in{display:block}
  .field__idx{margin-bottom:.6rem}
  .field__name{margin-bottom:.5rem}
  .field__desc,.path__d{max-width:none;margin-top:.5rem}
  .path__a{margin-top:1rem;text-align:left}
  .voices__head{display:block}
  .voices__map{max-width:19rem;margin:2.5rem auto 0}
  .voice{display:block}
  .voice__by{flex-direction:column;gap:.3rem;padding-top:1rem}
  .terms__k{min-width:7.5rem}
  .principle{display:block}
  .principle__n{margin-bottom:.75rem}
  .principle__t{margin-bottom:.6rem}
  .principle__d{max-width:none}
  .about__in{display:block}
  .about__fig{margin-bottom:2.5rem}
  .about__img,.about__cap{max-width:280px}
  .footer__in{display:block}
  .footer__col{margin-top:2.5rem}
  .footer__bot{flex-direction:column;gap:.6rem}
}

@media (max-width:560px){
  .hero__actions{flex-direction:column;align-items:stretch}
  .btn{width:100%}
}

@media (max-width:430px){
  :root{--gutter:1.125rem}
  .statement__list li{font-size:1.65rem}
  .formula__v{font-size:1.6rem}
  .formula__cell--out .formula__v{font-size:2.6rem}
  .ledger__box{height:9rem}
}

@media (hover:none){
  .field:hover .field__in,.path:hover .path__in{transform:none}
  .link::after{transform:scaleX(1)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .map__outline{stroke-dashoffset:0}
  .map__fill{opacity:.05}
  .mapdot{opacity:1;transform:none}
  .mapping{display:none}
  .is-in .mapdot--live{animation:none}
  .statement__list li > span{transform:none}
  .field::after,.path::after,.voice::after{transform:scaleX(1)}
  .h2.is-words .wd > span{transform:none}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  [data-reveal]{opacity:1;transform:none}
  [data-reveal-lines] .ln>span{transform:none}
  .ledger.is-collapsed .ledger__list li{opacity:0;filter:none;transform:none}
  .diagram .ln{stroke-dashoffset:0}
  .diagram .nd,.diagram text{opacity:1}
  .statement__list li{color:var(--ink)}
}

@media print{
  .nav,.menu,.hero__scroll,.controls{display:none}
  body{background:#fff;color:#000}
  .calc,.vision{background:#fff;color:#000}
}