/* =================================================================
   PORTVIERVIERDREI — DESIGN FOUNDATION
   Leitidee: Port 443 ist der Eingang ins Web. Die Website ist das
   Portal. Dunkle Architektur schafft Spannung, cremefarbenes
   Editorial bringt Menschlichkeit, Signalrot signalisiert
   Verbindung. Dark-first; helle Sektionen sind bewusste Kontraste.
   Wird NACH style.css geladen und definiert die Marke neu.
   ================================================================= */
:root {
  /* =================================================================
     EINE TONWERTSKALA, ZWEI LICHTZUSTÄNDE
     Dasselbe Gebäude — einmal nachts, einmal bei warmem Tageslicht.
     0 Nacht · 1 Mitternacht · 2 Graphit · 3 tiefer Stein ·
     4 Stein (Hauptfläche hell) · 5 belichteter Stein.
     Der helle Grundton ist aus den Wandfarben der Hero-Bilder
     gemessen (#d7caba–#ded0c3) — deshalb geht der Übergang vom
     Bild in die Fläche ohne Bruch. Vorher stand dort fast Weiß.
     ================================================================= */
  --pv-black:    #0B0908;   /* 0 */
  --pv-midnight: #190B0B;   /* 1 */
  --pv-navy:     #240B0B;   /* 1 — der rote Nachtton; Name bleibt aus Bestandsgründen */
  --pv-graphite: #191716;   /* 2 */
  --pv-stone-deep: #CFC9BC; /* 3 */
  --pv-stone:      #EADED3; /* 4 */
  --pv-stone-lit:  #E8E3D8; /* 5 */
  /* Bestandsnamen bleiben gültig — sie zeigen nur woanders hin */
  --pv-cream:    var(--pv-stone);
  --pv-ivory:    var(--pv-stone-lit);
  --pv-warm:     var(--pv-stone-deep);

  /* --- Schrift: kein reines Weiß, kein reines Schwarz ------------- */
  --pv-on-dark:        #EFEDE8;
  --pv-on-dark-muted:  #ABA09A;
  --pv-on-light:       #1A1B18;
  --pv-on-light-muted: #5A564B;
  --pv-on-stone-muted: #4A463C;   /* Nebentext auf hellem Hero */

  /* --- Signal: ein Rot, sonst keins ------------------------------
     Die Namen --pv-blue / --pv-blue-hi bleiben aus Bestandsgründen —
     sie hängen über sieben HTML-Dateien und beide CSS-Dateien
     verteilt. Drin steht das Markenrot #CC0000. ------------------- */
  --pv-blue:      #CC0000;
  --pv-blue-hi:   #CC0000;
  --pv-blue-soft: rgba(204, 0, 0, 0.14);

  /* --- Licht: warmweiß für menschliche, rot für technische Räume —
     der Name --pv-light-cool bleibt aus Bestandsgründen ------------ */
  --pv-light-warm: rgba(255, 248, 232, 0.55);
  --pv-light-cool: rgba(255, 96, 82, 0.55);

  /* --- Linien ----------------------------------------------------- */
  --pv-line-dark:   rgba(239, 237, 232, 0.11);
  --pv-line-darkx:  rgba(239, 237, 232, 0.22);
  --pv-line-light:  rgba(26, 27, 24, 0.14);
  --pv-line-lightx: rgba(26, 27, 24, 0.28);

  /* --- Schriften: zwei Familien, eine technische Mono -------------
     Instrument Sans traegt die Stimme (Display UND Arbeitsschrift) —
     praezise, gebaut, digital. Instrument Serif bleibt, aber NUR als
     seltener Akzent und in der Wortmarke: dieselbe Superfamilie,
     also gleiche Metrik und gleiche Ziffern. IBM Plex Mono ist die
     Systemschrift fuer Messwerte und Fensterinhalte.
     Vorher trug Instrument Serif jede Headline — das war die
     Magazin-Anmutung. */
  --pv-display: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  --pv-sans:    'Instrument Sans', system-ui, -apple-system, sans-serif;
  --pv-accent:  'Instrument Serif', Georgia, serif;
  --pv-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;

  /* --- Typografische Skala ---------------------------------------- */
  --text-hero:    clamp(2.35rem, 1.45rem + 2.6vw, 3.95rem);
  --text-hero-lg: clamp(2.65rem, 1.55rem + 3.4vw, 4.9rem);
  --text-h2:      clamp(2rem, 1.45rem + 2.1vw, 3.4rem);
  --text-h3:      clamp(1.45rem, 1.2rem + 1vw, 2.1rem);
  --text-body-lg: clamp(1.0625rem, 1.02rem + 0.32vw, 1.1875rem);
  --text-body:    1.0625rem;
  --text-small:   0.9375rem;
  --text-label:   0.71875rem;

  --leading-display: 1.02;
  --leading-body:    1.6;
  --tracking-display: -0.028em;
  --tracking-label:    0.14em;

  /* --- Raster / Maß ----------------------------------------------- */
  --pv-max: 1360px;
  --pv-gut: clamp(20px, 4.6vw, 72px);
  --pv-r:    6px;
  --pv-r-lg: 12px;

  /* --- Motion ------------------------------------------------------ */
  --pv-fast:   160ms;
  --pv-ui:     240ms;
  --pv-reveal: 600ms;
  --pv-portal: 1200ms;
  --pv-ease:    cubic-bezier(0.22, 0.61, 0.24, 1);
  --pv-ease-io: cubic-bezier(0.65, 0.02, 0.18, 1);

  /* Alt-Tokens auf die neue Welt umbiegen — Bestandskomponenten erben */
  --fp-bg: var(--pv-black);
  --fp-fg: var(--pv-on-dark);
  --fp-muted: var(--pv-on-dark-muted);
  --fp-line: var(--pv-line-dark);
  --fp-line-strong: var(--pv-line-darkx);
  --fp-accent: var(--pv-blue);
  --fp-accent-2: var(--pv-blue-hi);
  --fp-accent-text: var(--pv-blue-hi);
  --fp-ink: var(--pv-navy);
  --fp-font: var(--pv-sans);
  /* Bestand verlangte 'Fragment Mono', geladen wurde sie nie —
     52 Elemente liefen still auf Courier New. */
  --fp-mono: var(--pv-mono);
  --fp-bg-soft: #190B0B;
  --fp-nav-h: 76px;
  --fp-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  --fp-ok: #4ADE9B;
  color-scheme: dark;
}

html { scroll-padding-top: calc(var(--fp-nav-h) + 24px); overflow-x: clip; }
body {
  background: var(--pv-black);
  color: var(--pv-on-dark);
  font-family: var(--pv-sans);
  font-weight: 400;
  font-stretch: normal;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0;
  padding-bottom: 0;
}
/* Korn-/Glow-Ebenen der Vorära abschalten */
body::before, body::after { content: none !important; }
::selection { background: var(--pv-blue); color: #fff; }

/* ---------- Flächen-Utilities: der Hell/Dunkel-Rhythmus ----------- */
.pv-dark  { background: var(--pv-black);    color: var(--pv-on-dark); }
.pv-mid   { background: var(--pv-midnight); color: var(--pv-on-dark); }
.pv-navy  { background: var(--pv-navy);     color: var(--pv-on-dark); }
.pv-cream { background: var(--pv-cream);    color: var(--pv-on-light); }
.pv-ivory { background: var(--pv-ivory);    color: var(--pv-on-light); }

.pv-cream, .pv-ivory {
  --fp-fg: var(--pv-on-light);
  --fp-muted: var(--pv-on-light-muted);
  --fp-line: var(--pv-line-light);
  --fp-line-strong: var(--pv-line-lightx);
  --fp-accent-text: var(--pv-blue);
  --pv-line: var(--pv-line-light);
  --pv-line-x: var(--pv-line-lightx);
  --pv-muted: var(--pv-on-light-muted);
  --pv-fg: var(--pv-on-light);
  --pv-signal: var(--pv-blue);
  --pv-surface: #FFFFFF;
}
.pv-dark, .pv-mid, .pv-navy {
  --pv-line: var(--pv-line-dark);
  --pv-line-x: var(--pv-line-darkx);
  --pv-muted: var(--pv-on-dark-muted);
  --pv-fg: var(--pv-on-dark);
  --pv-signal: var(--pv-blue-hi);
  --pv-surface: #190B0B;
}

/* ---------- Layout ------------------------------------------------ */
.pv-wrap { width: 100%; max-width: var(--pv-max); margin-inline: auto; padding-inline: var(--pv-gut); }
.pv-sec  { padding-block: clamp(72px, 11vw, 150px); }
.pv-sec--tight { padding-block: clamp(56px, 7vw, 96px); }
.pv-head-row {
  display: grid;
  gap: clamp(20px, 3vw, 56px);
  align-items: end;
}
@media (min-width: 900px) { .pv-head-row { grid-template-columns: 1.3fr 1fr; } }

/* ---------- Typografie: gebaut, nicht gesetzt ---------------------
   Regel dieses Systems: pro Headline HOECHSTENS EIN starker Akzent.
   Entweder ein Wort in der Serif-Kursiven — oder der rote Punkt.
   Nie beides, und nie zusaetzlich noch rot eingefaerbt.             */
.pv-display {
  font-family: var(--pv-display);
  font-weight: 600;
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  font-size: var(--text-hero);
}
.pv-display--lg { font-size: var(--text-hero-lg); }
.pv-display--sm { font-size: var(--text-h3); }
h2.pv-display { font-size: var(--text-h2); }
/* Der Akzent im Begriffswort kommt aus dem Gewicht der eigenen
   Familie — nicht aus einer zweiten Schrift. Im direkten Vergleich
   sass die Serif-Kursive optisch zu gross daneben. */
.pv-soft { font-weight: 400; }
.pv-display em {
  font-family: inherit;
  font-style: normal;
  font-weight: 400;
  letter-spacing: inherit;
  color: inherit;
}
/* Das andere Signal: der Punkt der Marke, statt eines roten Wortes */
.pv-dot {
  display: inline-block;
  width: 0.135em; height: 0.135em;
  border-radius: 50%;
  background: var(--pv-blue);
  margin-left: 0.1em;
  vertical-align: 0.055em;
}
.pv-hero--light .pv-dot, .pv-cream .pv-dot, .pv-ivory .pv-dot { background: var(--pv-blue); }

.pv-lead {
  max-width: 64ch;
  font-size: var(--text-body-lg);
  line-height: var(--leading-body);
  color: var(--pv-muted);
}
.pv-body { font-size: var(--text-body); line-height: var(--leading-body); color: var(--pv-muted); max-width: 68ch; }

/* Kicker mit rotem Signalpunkt — das wiederkehrende Marken-Detail */
.pv-kick {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--pv-muted);
}
.pv-kick::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--pv-signal);
  flex: none;
}

/* ---------- Buttons ----------------------------------------------- */
.pv-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 50px;
  padding: 0 26px;
  border-radius: var(--pv-r);
  background: var(--pv-cream);
  color: var(--pv-on-light);
  font-family: var(--pv-sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color var(--pv-ui) var(--pv-ease),
              color var(--pv-ui) var(--pv-ease),
              transform var(--pv-ui) var(--pv-ease);
}
.pv-btn::after {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--pv-blue);
  transition: transform var(--pv-ui) var(--pv-ease);
}
.pv-btn:hover { background: var(--pv-stone-lit); transform: translateY(-1px); }
.pv-btn:hover::after { transform: scale(1.45); }
.pv-cream .pv-btn, .pv-ivory .pv-btn { background: var(--pv-navy); color: var(--pv-on-dark); }
.pv-cream .pv-btn::after, .pv-ivory .pv-btn::after { background: var(--pv-blue-hi); }
.pv-cream .pv-btn:hover, .pv-ivory .pv-btn:hover { background: var(--pv-black); }
.pv-btn--ghost {
  background: transparent;
  color: var(--pv-fg);
  border-color: var(--pv-line-x);
}
.pv-btn--ghost::after { background: var(--pv-signal); }
.pv-btn--ghost:hover { background: transparent; border-color: var(--pv-fg); }

/* Pfeil-Link: Linie wächst, Pfeil rückt */
.pv-alink {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pv-signal);
  padding-bottom: 3px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--pv-ui) var(--pv-ease);
}
.pv-alink i { font-style: normal; transition: transform var(--pv-ui) var(--pv-ease); }
.pv-alink:hover { background-size: 100% 1px; }
.pv-alink:hover i { transform: translateX(4px); }

/* ---------- Kopfzeile --------------------------------------------- */
.pv-head {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  min-height: var(--fp-nav-h);
  display: flex;
  align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color var(--pv-ui) var(--pv-ease), border-color var(--pv-ui) var(--pv-ease);
}
.pv-head.is-stuck {
  background: rgba(11, 9, 8, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom-color: var(--pv-line-dark);
}
.pv-head__in {
  width: 100%;
  max-width: var(--pv-max);
  margin-inline: auto;
  padding-inline: var(--pv-gut);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.pv-brand { display: inline-flex; align-items: center; gap: 12px; color: var(--pv-on-dark); }
/* Das Logo laeuft als EIN Bild — Zeichen + Schriftzug exakt wie
   geliefert (freigestellt aus der Original-Grafik). */
.pv-brand svg, .pv-brand img { width: 44px; height: 44px; flex: none; display: block; }
.pv-brand img.pv-brand__logo { width: auto; height: 60px; }
.pv-nav { display: flex; align-items: center; gap: clamp(18px, 2.6vw, 40px); }
.pv-nav a {
  position: relative;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--pv-on-dark-muted);
  padding-block: 9px;
  transition: color var(--pv-ui) var(--pv-ease);
}
/* Die Nummer gehoert zur Route — sie macht die aktive Seite auch
   dann erkennbar, wenn man nur kurz hinschaut. */
.pv-nav a::before {
  content: attr(data-nr);
  margin-right: .62em;
  font-variant-numeric: tabular-nums;
  color: rgba(171, 160, 154, .55);
  transition: color var(--pv-ui) var(--pv-ease);
}
/* Beim Zeigen wird die Schrift rot — und das Rot zieht sich wie beim
   „Arbeiten ansehen"-Link von links nach rechts durch die Schrift,
   waehrend ein Strich darunter mitfaehrt. Technik: zwei Farbschichten
   als background, auf die Glyphen geclippt (background-clip: text);
   die rote Deckschicht waechst im Hover von 0 auf volle Breite. Die
   Nummer (::before) traegt ihre eigene Farbe und bleibt aussen vor. */
.pv-nav a:hover { color: var(--pv-blue-hi); }   /* Fallback ohne background-clip: text */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .pv-nav a {
    --pv-nav-fg: var(--pv-on-dark-muted);
    color: transparent;
    background-image: linear-gradient(var(--pv-blue-hi), var(--pv-blue-hi)),
                      linear-gradient(var(--pv-nav-fg), var(--pv-nav-fg));
    -webkit-background-clip: text;
    background-clip: text;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 0% 100%, 100% 100%;
    transition: background-size var(--pv-ui) var(--pv-ease);
  }
  .pv-nav a:hover { color: transparent; background-size: 100% 100%, 100% 100%; }
}
/* Der Strich unter der Schrift: faehrt im Hover von links herein,
   auf der aktiven Route steht er dauerhaft (mit Glow). */
.pv-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 1px;
  height: 2px;
  background: var(--pv-blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--pv-ui) var(--pv-ease);
}
.pv-nav a:hover::after { transform: scaleX(1); }
.pv-nav a[aria-current="page"] { color: var(--pv-on-dark); }
.pv-nav a[aria-current="page"]::before { color: var(--pv-blue-hi); }
.pv-nav a[aria-current="page"]::after {
  transform: scaleX(1);
  box-shadow: 0 0 12px rgba(204, 0, 0, .6);
}
.pv-head .pv-btn { min-height: 44px; padding: 0 20px; font-size: 12px; }
/* Auf Seiten mit hellem Hero steht die Leiste solange dunkel auf hell,
   bis sie sich beim Scrollen selbst einen schwarzen Grund gibt. */
.pv-head--onlight:not(.is-stuck) .pv-brand { color: var(--pv-on-light); }
.pv-head--onlight:not(.is-stuck) .pv-nav a { color: var(--pv-on-stone-muted); }
.pv-head--onlight:not(.is-stuck) .pv-nav a::before { color: rgba(26, 20, 18, .42); }
.pv-head--onlight:not(.is-stuck) .pv-nav a:hover { color: var(--pv-blue); }   /* Fallback */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .pv-head--onlight:not(.is-stuck) .pv-nav a {
    --pv-nav-fg: var(--pv-on-stone-muted);
    color: transparent;
  }
  .pv-head--onlight:not(.is-stuck) .pv-nav a:hover { color: transparent; }
}
.pv-head--onlight:not(.is-stuck) .pv-nav a[aria-current="page"] { color: var(--pv-on-light); }
.pv-head--onlight:not(.is-stuck) .pv-nav a[aria-current="page"]::before { color: var(--pv-blue); }
.pv-head--onlight:not(.is-stuck) .pv-btn { background: var(--pv-navy); color: var(--pv-on-dark); }
.pv-head--onlight:not(.is-stuck) .pv-btn::after { background: var(--pv-blue-hi); }
.pv-head--onlight:not(.is-stuck) .pv-btn:hover { background: var(--pv-black); }
@media (max-width: 980px) {
  .pv-nav { gap: 16px; }
  .pv-nav a { font-size: 10.5px; letter-spacing: 0.12em; }
  .pv-brand__word { font-size: 12px; }
  .pv-brand img.pv-brand__logo { height: 48px; }
  .pv-head .pv-btn { display: none; }
}
@media (max-width: 620px) {
  :root { --fp-nav-h: 112px; }
  .pv-head { padding-block: 12px; }
  .pv-head__in { flex-direction: column; align-items: flex-start; gap: 10px; }
  .pv-nav { width: 100%; justify-content: space-between; gap: 6px; }
  .pv-nav a { font-size: 10px; letter-spacing: 0.09em; padding-block: 6px; }
  .pv-brand svg { width: 26px; height: 26px; }
  .pv-brand__word { font-size: 11px; }
  .pv-brand img.pv-brand__logo { height: 42px; }
  /* Das Logo steht mobil mittig ueber der Navigationszeile */
  .pv-brand { align-self: center; }
}

/* ---------- Das Portal: zwei Flügel, ein Lichtspalt --------------- */
.pv-portal {
  position: relative;
  overflow: hidden;
  background: radial-gradient(120% 90% at 50% 100%, #190B0B 0%, var(--pv-black) 62%);
  isolation: isolate;
}
.pv-portal__light {
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: clamp(70px, 12%, 170px);
  transform: translateX(-50%) scaleX(var(--pv-open, 1));
  background: linear-gradient(to right,
    transparent,
    rgba(204, 0, 0, 0.22) 18%,
    rgba(255, 96, 82, 0.94) 50%,
    rgba(204, 0, 0, 0.22) 82%,
    transparent);
  filter: blur(16px);
  opacity: var(--pv-lum, 1);
}
.pv-portal__wing {
  position: absolute;
  top: -3%;
  bottom: -3%;
  width: 44%;
  background: linear-gradient(105deg, #190B0B 0%, #240B0B 55%, #190B0B 100%);
  box-shadow: 0 0 90px rgba(0, 0, 0, 0.85);
}
.pv-portal__wing--l {
  left: 0;
  clip-path: polygon(0 0, 100% 8%, 100% 92%, 0 100%);
  transform: translateX(calc(-1 * var(--pv-wing, 0px)));
}
.pv-portal__wing--r {
  right: 0;
  clip-path: polygon(0 8%, 100% 0, 100% 100%, 0 92%);
  transform: translateX(var(--pv-wing, 0px));
}
.pv-portal__floor {
  position: absolute;
  left: 50%; bottom: 0;
  width: min(72%, 640px);
  height: 32%;
  transform: translateX(-50%);
  background: radial-gradient(58% 100% at 50% 0%, rgba(255, 96, 82, 0.32), transparent 74%);
  filter: blur(20px);
  opacity: var(--pv-lum, 1);
}
.pv-portal__dot {
  position: absolute;
  left: 50%; top: 50%;
  width: 9px; height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: var(--pv-blue-hi);
  box-shadow: 0 0 24px rgba(204, 0, 0, 0.95);
  opacity: var(--pv-lum, 1);
}
.pv-portal__vig {
  position: absolute;
  inset: 0;
  background: radial-gradient(125% 85% at 50% 50%, transparent 28%, rgba(9, 6, 5, 0.78) 100%);
}
@media (prefers-reduced-motion: reduce) {
  .pv-portal__wing { transform: none !important; }
  .pv-portal__light { transform: translateX(-50%) !important; }
}

/* ---------- Karten: Zugänge, keine SaaS-Kacheln -------------------- */
.pv-cards {
  display: grid;
  gap: 1px;
  margin-top: clamp(36px, 5vw, 60px);
  background: var(--pv-line);
  border: 1px solid var(--pv-line);
  border-radius: var(--pv-r);
  overflow: hidden;
}
@media (min-width: 700px)  { .pv-cards--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .pv-cards--4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 820px)  { .pv-cards--3 { grid-template-columns: repeat(3, 1fr); } }
.pv-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 240px;
  padding: clamp(24px, 2.4vw, 34px);
  background: var(--pv-cream);
  transition: background-color var(--pv-ui) var(--pv-ease);
}
.pv-dark .pv-card, .pv-mid .pv-card, .pv-navy .pv-card { background: var(--pv-black); }
.pv-card__nr {
  position: absolute;
  top: clamp(20px, 2.2vw, 28px);
  right: clamp(22px, 2.2vw, 30px);
  font-family: var(--pv-display);
  font-size: 19px;
  color: var(--pv-muted);
}
.pv-card__mark { width: 22px; height: 22px; color: var(--pv-fg); }
.pv-card h3 {
  font-family: var(--pv-display);
  font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.6rem);
  font-weight: 400;
  line-height: 1.15;
  margin-top: 4px;
}
.pv-card p { font-size: 14.5px; line-height: 1.65; color: var(--pv-muted); }
.pv-card__go {
  margin-top: auto;
  align-self: flex-end;
  width: 34px; height: 34px;
  border: 1px solid var(--pv-line-x);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 13px;
  color: var(--pv-signal);
  transition: border-color var(--pv-ui) var(--pv-ease), transform var(--pv-ui) var(--pv-ease);
}
.pv-card:hover { background: var(--pv-ivory); }
.pv-dark .pv-card:hover, .pv-mid .pv-card:hover, .pv-navy .pv-card:hover { background: #190B0B; }
.pv-card:hover .pv-card__go { border-color: var(--pv-signal); transform: translateX(3px); }

/* ---------- Fußzeile ---------------------------------------------- */
.pv-foot { background: var(--pv-black); color: var(--pv-on-dark); border-top: 1px solid var(--pv-line-dark); }
.pv-foot__grid {
  display: grid;
  gap: clamp(30px, 4vw, 56px);
  padding-block: clamp(52px, 6vw, 76px);
}
@media (min-width: 880px) { .pv-foot__grid { grid-template-columns: 1.5fr 1fr 1fr 1.3fr; } }
.pv-foot h4 {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pv-on-dark-muted);
  margin-bottom: 16px;
}
.pv-foot__col { display: flex; flex-direction: column; gap: 9px; align-items: flex-start; }
.pv-foot__col a {
  font-size: 14px;
  color: var(--pv-on-dark);
  opacity: 0.82;
  transition: opacity var(--pv-ui) var(--pv-ease), color var(--pv-ui) var(--pv-ease);
}
.pv-foot__col a:hover { opacity: 1; color: var(--pv-blue-hi); }
.pv-foot__direct {
  border: 1px solid var(--pv-line-dark);
  border-radius: var(--pv-r);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.pv-foot__direct a { font-size: 14px; color: var(--pv-on-dark); }
.pv-foot__direct a:hover { color: var(--pv-blue-hi); }
.pv-foot__base {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-block: 22px;
  border-top: 1px solid var(--pv-line-dark);
  font-size: 12.5px;
  color: var(--pv-on-dark-muted);
}
.pv-foot__base button { font: inherit; color: inherit; }
.pv-foot__base button:hover { color: var(--pv-on-dark); }

/* ---------- Fokus, überall sichtbar ------------------------------- */
:focus-visible { outline: 2px solid var(--pv-blue-hi); outline-offset: 3px; border-radius: 2px; }
.pv-cream :focus-visible, .pv-ivory :focus-visible { outline-color: var(--pv-blue); }
.u-skip-link { background: var(--pv-blue); color: #fff; border-radius: var(--pv-r); }

/* ---------- Reveal-Primitive (JS setzt .is-in) -------------------- */
.pv-rev { opacity: 0; transform: translateY(18px); }
.pv-rev.is-in {
  opacity: 1;
  transform: none;
  transition: opacity var(--pv-reveal) var(--pv-ease), transform var(--pv-reveal) var(--pv-ease);
}
@media (prefers-reduced-motion: reduce) {
  .pv-rev { opacity: 1; transform: none; }
}

/* =================================================================
   HERO-SYSTEM — das Bild ist Inhalt, nicht Dekoration.
   Aufbau je Seite: Architekturbild (WebP) + DOM-Türflügel darüber,
   die beim Laden aufgehen. Preset steuert Timing/Kamera/Kanten.
   ================================================================= */
.pv-hero {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--pv-black);
  padding-top: var(--fp-nav-h);
  min-height: var(--pv-hero-h, 92svh);
}
.pv-hero--tall  { --pv-hero-h: 100svh; }
.pv-hero--mid   { --pv-hero-h: 86svh; }
.pv-hero--short { --pv-hero-h: 54svh; }

/* --- Bildebene --------------------------------------------------- */
.pv-hero__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.pv-hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--pv-focal, 60% 50%);
  transform: scale(var(--pv-cam, 1));
  will-change: transform;
}
/* Scrim: gerichtet, damit Text trägt — die Bildtiefe bleibt erhalten */
.pv-hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(10,7,6,.94) 0%, rgba(10,7,6,.82) 26%, rgba(10,7,6,.34) 52%, rgba(10,7,6,0) 74%),
    linear-gradient(to top, rgba(10,7,6,.72), transparent 42%);
}
.pv-hero--light .pv-hero__scrim {
  background:
    linear-gradient(100deg, rgba(241,238,231,.95) 0%, rgba(241,238,231,.84) 28%, rgba(241,238,231,.3) 55%, rgba(241,238,231,0) 76%),
    linear-gradient(to top, rgba(241,238,231,.6), transparent 40%);
}

/* --- Türflügel: die Motion-Illusion über dem Bild ----------------
   --pv-door ist der ÖFFNUNGSGRAD: 100% = ganz offen (Bild frei),
   0% = geschlossen. Default offen — ohne JS sieht man das Bild. */
.pv-hero__doors { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.pv-hero__doors i {
  position: absolute;
  top: -2%; bottom: -2%;
  width: 51%;
  background: var(--pv-black);
  display: block;
  will-change: transform;
}
.pv-hero--light .pv-hero__doors i { background: var(--pv-cream); }
.pv-hero__doors i:first-child { left: 0;  transform: translateX(calc(-1 * var(--pv-door, 100%))); }
.pv-hero__doors i:last-child  { right: 0; transform: translateX(var(--pv-door, 100%)); }

/* --- Lichtkanten: tragen die Zahl der Seite (4 Wege, 3 Menschen) -- */
.pv-hero__edges { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.pv-hero__edges span {
  position: absolute;
  top: 26%; bottom: 26%;
  width: 2px;
  background: linear-gradient(to bottom, transparent, var(--pv-blue-hi), transparent);
  opacity: 0;
  filter: blur(.4px);
}

/* --- Textebene ---------------------------------------------------- */
.pv-hero__in { position: relative; z-index: 3; width: 100%; }
.pv-hero__text { max-width: 46ch; }
.pv-hero__sub {
  margin-top: 22px;
  max-width: 44ch;
  font-size: var(--text-body-lg);
  line-height: var(--leading-body);
  color: var(--pv-on-dark-muted);
}
.pv-hero--light .pv-hero__sub { color: var(--pv-on-light-muted); }
.pv-hero--light .pv-kick, .pv-hero--light .pv-display { color: var(--pv-on-light); }
/* Der helle Hero liegt auf der gemessenen Wandfarbe des Bildes —
   dort braucht der Nebentext einen tieferen Ton als auf Stein. */
.pv-hero--light { --pv-signal: var(--pv-blue); --pv-on-light-muted: var(--pv-on-stone-muted); }
.pv-hero h1 { margin-top: 20px; }

/* Zeilen-Reveal: Masken statt Fade (Headline zeilenweise) */
.pv-line { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.pv-line > span { display: block; transform: translateY(105%); }
.pv-line.is-in > span { transform: none; transition: transform 760ms var(--pv-ease); }
@media (prefers-reduced-motion: reduce) {
  .pv-line > span { transform: none; }
}

/* --- Scroll-Hinweis ---------------------------------------------- */
.pv-scrollcue {
  position: absolute;
  left: var(--pv-gut); bottom: 34px;
  z-index: 3;
  display: flex; align-items: center; gap: 12px;
  font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--pv-on-dark-muted);
}
.pv-scrollcue::before {
  content: ""; width: 34px; height: 1px; background: currentColor; opacity: .5;
}
@media (max-width: 700px) { .pv-scrollcue { display: none; } }

/* --- Mobile: das Bild traegt den Hero — HINTER der Schrift -------
   Wie am Desktop liegt das Motiv als Grund unter dem Text. Der
   Schleier ist mobil kraeftiger und vertikal gerichtet: oben und
   ueber der Textflaeche dicht genug fuer volle Lesbarkeit, unten
   bleibt das Licht des Portals sichtbar. */
@media (max-width: 860px) {
  .pv-hero { padding-block: calc(var(--fp-nav-h) + 40px) 64px; }
  .pv-hero__scrim {
    background: linear-gradient(to bottom,
      rgba(10, 7, 6, .92) 0%, rgba(10, 7, 6, .76) 46%,
      rgba(10, 7, 6, .32) 78%, rgba(10, 7, 6, .44) 100%);
  }
  .pv-hero--light .pv-hero__scrim {
    background: linear-gradient(to bottom,
      rgba(241, 238, 231, .95) 0%, rgba(241, 238, 231, .82) 48%,
      rgba(241, 238, 231, .38) 80%, rgba(241, 238, 231, .5) 100%);
  }
  .pv-hero__text { max-width: none; }
}

/* Mobile: Lichtkanten gehoeren zum Bild, nicht ueber den Text */
@media (max-width: 860px) {
  .pv-hero__edges { display: none; }
  .pv-hero__doors i { width: 51%; }
}

/* =================================================================
   PHASE 3 — SEITENIDENTITAET IM HERO
   Das Portal bleibt die gemeinsame Sprache; was DAHINTER liegt,
   macht die Seite erkennbar. Dafuer liegt das Motiv nicht mehr als
   Vollbild unter dem Text, sondern als eigene Bahn rechts: die
   Geometrie des Raumes bleibt unverzerrt, echte HTML-Marken koennen
   auf den Oeffnungen sitzen (Rule: kein Text ins Bild rendern).
   ================================================================= */
.pv-hero--band {
  background: var(--pv-hero-bg, var(--pv-black));
  --pv-bw: 66;                     /* Breite der Bildbahn in Prozent  */
  --pv-band: calc(var(--pv-bw) * 1%);
}
.pv-hero--band .pv-hero__media { inset: 0 0 0 auto; width: var(--pv-band); }
/* Die Maske sitzt auf dem BILD, nicht auf der Bahn — sonst wuerden
   die Marken mit ausgeblendet. Links laeuft das Bild in die
   Hintergrundfarbe aus, die aus derselben Wand gemessen ist. */
.pv-hero--band .pv-hero__media img {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #0B0908 7%);
  mask-image: linear-gradient(90deg, transparent 0, #0B0908 7%);
}
.pv-hero--band .pv-hero__scrim { display: none; }
.pv-hero--band .pv-hero__doors { inset: 0 0 0 auto; width: var(--pv-band); }
/* Die Textspalte darf exakt bis an die Bildbahn reichen — nicht weiter
   (sonst laeuft die Headline ins Bild) und nicht enger (sonst schneidet
   die Zeilenmaske lange Woerter wie "Vorzimmer." ab). */
.pv-hero--band .pv-hero__text {
  max-width: min(
    var(--pv-textw, 420px),
    calc((100 - var(--pv-bw)) * 1vw - (100vw - min(100vw, var(--pv-max))) / 2 - var(--pv-gut) - 24px)
  );
}
.pv-hero--band.pv-hero--light .pv-hero__doors i { background: var(--pv-hero-bg, var(--pv-cream)); }

/* --- Route-Label: jede Seite sagt, wo man ist -------------------- */
.pv-route {
  display: inline-flex; align-items: center; gap: 11px;
  font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--pv-on-dark-muted);
}
.pv-hero--light .pv-route { color: var(--pv-on-light-muted); }
.pv-route b { color: var(--pv-signal); font-weight: 500; font-family: var(--pv-mono); font-size: .95em; letter-spacing: .04em; }
.pv-route i {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--pv-signal); flex: none;
}
.pv-route s { width: 22px; height: 1px; background: currentColor; opacity: .45; }
/* Zusatzangabe hinter dem Route-Label, z. B. „04 Projekte" */
.pv-route--meta { color: var(--pv-on-dark-muted); letter-spacing: .14em; }

/* --- Markenebene auf dem Bild ------------------------------------
   Die Marken liegen IM Bild, damit die Tuerfluegel sie beim Oeffnen
   noch verdecken. Die Textebene darueber spannt die volle Breite und
   wuerde sonst jeden Klick auf eine Marke abfangen — sie laesst
   Zeiger deshalb durch, ausser dort, wo wirklich Text steht. */
.pv-hero--band .pv-hero__in { pointer-events: none; }
.pv-hero--band .pv-hero__text { pointer-events: auto; }
.pv-marks { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.pv-marks > * { pointer-events: auto; }
.pv-mark-lab {
  display: block; white-space: nowrap;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
}
.pv-mark-nr {
  display: block; margin-bottom: 5px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .12em;
  color: var(--pv-signal); font-variant-numeric: tabular-nums;
}
/* Wird die Bildbahn schmal, rutschen sonst die letzten zwei
   Beschriftungen ineinander. */
@media (max-width: 1060px) {
  .pv-mark-lab { font-size: 9.5px; letter-spacing: .1em; }
  .pv-mark-nr  { font-size: 9.5px; margin-bottom: 4px; }
}

/* LEISTUNGEN — vier Zugaenge, jeder mit eigener Handschrift ------- */
.pv-port {
  position: absolute;
  left: var(--x); top: var(--y); width: var(--w); height: var(--h);
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--pv-on-light);
}
.pv-port::before {                        /* Licht in der Oeffnung */
  content: ""; position: absolute; inset: -3% -180%;
  background: radial-gradient(closest-side, rgba(255,252,244,.85), rgba(255,252,244,0) 72%);
  opacity: 0; transition: opacity 420ms var(--pv-ease);
  pointer-events: none;
}
.pv-port.is-on::before { opacity: .5; }
.pv-port:hover::before, .pv-port:focus-visible::before { opacity: .9; }
.pv-port.is-dim::before { opacity: .16; }
.pv-port.is-dim .pv-port__lab { opacity: .42; }
.pv-port__lab {
  position: absolute; bottom: calc(100% + 16px); left: var(--lx, -8%);
  text-align: left; opacity: 0; transform: translateY(8px);
  transition: opacity 500ms var(--pv-ease), transform 500ms var(--pv-ease);
}
.pv-port.is-on .pv-port__lab { opacity: 1; transform: none; }
.pv-port__lab .pv-mark-lab { color: var(--pv-on-light); }
.pv-port__lab::after {                    /* die Linie unter dem Wort */
  content: ""; display: block; height: 1px; margin-top: 7px;
  background: var(--pv-on-light); opacity: .3;
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 560ms var(--pv-ease) 120ms, opacity var(--pv-ui) var(--pv-ease);
}
.pv-port.is-on .pv-port__lab::after { transform: none; }
.pv-port:hover .pv-port__lab::after { opacity: .75; background: var(--pv-blue); }
/* Der letzte Zugang steht am rechten Bildrand: seine Beschriftung
   waechst nach innen, sonst schneidet der Hero sie ab. */
.pv-port--end .pv-port__lab { left: auto; right: 0; text-align: right; }
.pv-port--end .pv-port__lab::after { transform-origin: 100% 50%; }
/* Die vier Zugaenge sind nicht gleich: ein sehr leiser Charakterhinweis */
.pv-port__hint {
  position: absolute; inset: 14% 22% 16%;
  opacity: 0; transition: opacity 420ms var(--pv-ease);
}
.pv-port:hover .pv-port__hint, .pv-port:focus .pv-port__hint, .pv-port:focus-visible .pv-port__hint { opacity: .34; }
/* Webdesign: eine Fläche, die geteilt ist — Layout */
.pv-port--grid .pv-port__hint {
  background:
    linear-gradient(0deg, transparent 35.6%, var(--pv-blue) 35.6% 36.4%, transparent 36.4%),
    linear-gradient(0deg, transparent 71.6%, var(--pv-blue) 71.6% 72.4%, transparent 72.4%);
}
/* Entwicklung: gestapelte Zeilen — Code */
.pv-port--code .pv-port__hint {
  background: repeating-linear-gradient(0deg, var(--pv-blue) 0 2px, transparent 2px 26px);
}
/* IT-Service: eine Verbindung quer durch den Raum */
.pv-port--net .pv-port__hint {
  background: linear-gradient(158deg, transparent 49%, var(--pv-blue) 49% 50.6%, transparent 50.6%);
}
/* Wartung: ein ruhiger Dauerpegel von unten */
.pv-port--pulse .pv-port__hint {
  background: linear-gradient(0deg, var(--pv-blue), rgba(204, 0, 0, 0) 58%);
}

/* ARBEITEN — die Projekte KOMMEN AUS den Portalen -------------------
   Jedes Projekt sitzt in seiner Tueroeffnung. Zuerst ist nur der
   Ausschnitt sichtbar, den die Oeffnung freigibt (clip-path); dann
   tritt die Seite aus dem Portal in den Raum. Deshalb ein Wrapper
   je Projekt: Rahmen (Oeffnung) → Maske → Tafel.                    */
.pv-marks--gallery { perspective: 1400px; transform-style: preserve-3d; }
.pv-proj {
  position: absolute;
  left: var(--x); top: var(--y); width: var(--w); height: var(--h);
  display: block; z-index: var(--zi, 1);
  transform-style: preserve-3d;
}
/* Das Licht in der Oeffnung — Phase B der Ankunft */
.pv-proj__light {
  position: absolute; inset: -14% -60%;
  background: radial-gradient(closest-side, rgba(255, 96, 82, .55), rgba(255, 96, 82, 0) 74%);
  opacity: 0; pointer-events: none;
  transition: opacity 620ms var(--pv-ease);
}
.pv-proj.is-lit .pv-proj__light { opacity: .7; }
.pv-proj.is-out .pv-proj__light { opacity: .34; }
.pv-proj:hover .pv-proj__light, .pv-proj:focus .pv-proj__light, .pv-proj:focus-visible .pv-proj__light { opacity: .62; }

/* Die Maske IST die Tueroeffnung. Sie gibt die Tafel erst frei,
   wenn das Projekt den Raum betritt. */
.pv-proj__mask {
  position: absolute; inset: 0;
  clip-path: inset(0 0 0 0);
  transition: clip-path 820ms var(--pv-ease-io) 260ms;
}
.pv-proj.is-out .pv-proj__mask { clip-path: inset(-160% -260% -160% -260%); }

.pv-proj__shot {
  position: absolute; left: 50%; top: 50%;
  width: var(--pw, 260px); aspect-ratio: 16 / 10;
  background: #0B0908;
  box-shadow: 0 0 0 1px rgba(239, 237, 232, .14), 0 26px 60px rgba(0, 0, 0, .66);
  overflow: hidden;
  opacity: 0;
  transform: translate(-50%, -50%) translateZ(-260px) scale(.62) rotateY(var(--rot, 0deg));
  transition: transform 640ms var(--pv-ease-io), opacity 420ms var(--pv-ease),
              box-shadow 300ms var(--pv-ease);
}
.pv-proj.is-lit .pv-proj__shot { opacity: 1; }
.pv-proj.is-out .pv-proj__shot {
  transform: translate(calc(-50% + var(--px, 0px)), calc(-50% + var(--py, 0px)))
             translateZ(0) scale(1) rotateY(var(--rot, 0deg));
}
.pv-proj__shot img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 0;
  filter: brightness(.44) saturate(.72) contrast(1.05);
  transition: filter 520ms var(--pv-ease);
}
.pv-proj.is-out .pv-proj__shot img { filter: brightness(.72) saturate(.85); }
/* Hover: das Projekt tritt einen Schritt auf die Kamera zu */
.pv-proj:hover .pv-proj__shot, .pv-proj:focus .pv-proj__shot, .pv-proj:focus-visible .pv-proj__shot {
  transform: translate(calc(-50% + var(--px, 0px)), calc(-50% + var(--py, 0px)))
             translateZ(22px) scale(1.03) rotateY(calc(var(--rot, 0deg) * .4));
  box-shadow: 0 0 0 1px rgba(204, 0, 0, .6), 0 34px 76px rgba(0, 0, 0, .72);
}
.pv-proj:hover .pv-proj__shot img, .pv-proj:focus .pv-proj__shot img, .pv-proj:focus-visible .pv-proj__shot img { filter: none; }
/* Die anderen werden ruhiger, damit eins vorne steht */
.pv-marks--gallery:has(.pv-proj:hover) .pv-proj:not(:hover) .pv-proj__shot img { filter: brightness(.5) saturate(.6); }
.pv-marks--gallery:has(.pv-proj:hover) .pv-proj:not(:hover) .pv-proj__light { opacity: .18; }

.pv-proj__cap {
  position: absolute; left: 50%; top: 50%;
  width: var(--pw, 260px);
  margin-top: calc(var(--pw, 260px) * .3125 + 14px);
  transform: translate(calc(-50% + var(--px, 0px)), calc(-50% + var(--py, 0px)));
  text-align: left; white-space: nowrap;
  opacity: 0;
  transition: opacity 300ms var(--pv-ease);
}
.pv-proj:hover .pv-proj__cap, .pv-proj:focus .pv-proj__cap, .pv-proj:focus-visible .pv-proj__cap { opacity: 1; }
.pv-proj__cap b {
  display: block; font-size: 13px; font-weight: 600; color: var(--pv-on-dark);
  text-shadow: 0 1px 12px rgba(8, 5, 4, .95);
}
.pv-proj__cap span {
  display: block; margin-top: 3px;
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--pv-on-dark-muted);
  text-shadow: 0 1px 12px rgba(8, 5, 4, .95);
}

/* STUDIO — drei Menschen stehen in den drei Oeffnungen ------------- */
.pv-name {
  position: absolute; left: var(--x); top: var(--y); width: var(--w);
  opacity: 0; transform: translateY(12px);
  transition: opacity 620ms var(--pv-ease), transform 620ms var(--pv-ease);
}
.pv-name.is-on { opacity: 1; transform: none; }
.pv-name::before {
  content: ""; position: absolute; left: 0; bottom: calc(100% + 9px);
  width: 1px; height: 34px; background: var(--pv-on-light); opacity: .28;
}
.pv-name b {
  display: block; font-family: var(--pv-display); font-weight: 600;
  font-size: clamp(1.3rem, .9rem + 1vw, 1.85rem); line-height: 1;
  letter-spacing: -0.02em;
  color: var(--pv-on-light);
  text-shadow: 0 1px 16px rgba(247, 244, 238, .9);
}
.pv-name span {
  display: block; margin-top: 6px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--pv-on-light);
  text-shadow: 0 1px 12px rgba(247, 244, 238, .95), 0 0 4px rgba(247, 244, 238, .9);
}
.pv-name i {
  display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: var(--pv-blue); margin-left: 8px; vertical-align: .12em;
  opacity: 0; transition: opacity var(--pv-ui) var(--pv-ease);
}
.pv-name.is-on i { opacity: 1; }

/* KONTAKT — der Weg ist beschriftet -------------------------------- */
.pv-step {
  position: absolute; left: var(--x); top: var(--y);
  display: flex; align-items: center; gap: 9px;
  white-space: nowrap;
  font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--pv-on-dark);
  text-shadow: 0 1px 14px rgba(8, 5, 4, .95), 0 0 5px rgba(8, 5, 4, .9);
  opacity: 0; transform: translateY(6px);
  transition: opacity 520ms var(--pv-ease), transform 520ms var(--pv-ease);
}
.pv-step.is-on { opacity: 1; transform: none; }
.pv-step::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--pv-blue-hi); flex: none;
  box-shadow: 0 0 14px rgba(204, 0, 0,.9);
}
.pv-step b { color: var(--pv-on-dark); font-variant-numeric: tabular-nums; }

/* --- Legende: auf kleinen Schirmen traegt HTML die Identitaet ----- */
.pv-legend { display: none; }
@media (max-width: 860px) {
  /* Der Band-Hero legt sein Bild mobil ebenfalls VOLLFLAECHIG hinter
     den Text statt als rechtes Band. Er traegt kein Scrim-Element,
     deshalb liegt der Schleier als ::after direkt auf der Bildebene. */
  .pv-hero--band .pv-hero__media { position: absolute; inset: 0; width: auto; }
  .pv-hero--band .pv-hero__media img { -webkit-mask-image: none; mask-image: none; }
  .pv-hero--band .pv-hero__media::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(to bottom,
      rgba(10, 7, 6, .92) 0%, rgba(10, 7, 6, .76) 46%,
      rgba(10, 7, 6, .32) 78%, rgba(10, 7, 6, .44) 100%);
  }
  .pv-hero--band .pv-hero__doors { inset: 0; width: 100%; }
  .pv-hero--band .pv-hero__text { max-width: none; }
  .pv-marks { display: none; }
  .pv-legend {
    display: grid; gap: 1px; margin-top: 1px;
    margin-inline: calc(-1 * var(--pv-gut));
    background: var(--pv-line-dark);
    grid-template-columns: repeat(var(--cols, 2), 1fr);
  }
  .pv-hero--light .pv-legend { background: var(--pv-line-light); }
  .pv-legend > * {
    display: block; padding: 13px var(--pv-gut) 15px;
    background: var(--pv-hero-bg, var(--pv-black));
    text-align: left;
  }
  .pv-legend b {
    display: block; font-size: 11px; font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase; color: var(--pv-on-dark);
  }
  .pv-hero--light .pv-legend b { color: var(--pv-on-light); }
  .pv-legend em {
    display: block; margin-bottom: 4px; font-style: normal;
    font-family: var(--pv-mono);
    font-size: 10px; font-weight: 500; letter-spacing: .06em; color: var(--pv-signal);
  }
  .pv-legend img {
    width: 100%; aspect-ratio: 16/10; object-fit: cover; object-position: 50% 0;
    margin-bottom: 9px; filter: brightness(.72) saturate(.85);
  }
  .pv-legend > *:nth-child(n+3) { padding-inline: var(--pv-gut); }
  /* Arbeiten: keine vier Bilder gleichzeitig, sondern ein Stapel,
     der weitergeschoben wird (Regel: 2–3 sichtbar, Rest beim Wischen) */
  .pv-legend--rail {
    display: flex; grid-template-columns: none;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-inline: 0;
  }
  .pv-legend--rail::-webkit-scrollbar { display: none; }
  .pv-legend--rail > * {
    flex: 0 0 58%; scroll-snap-align: start;
    padding-inline: 0 0;
    padding-left: var(--pv-gut);
  }
  .pv-legend--rail > *:last-child { padding-right: var(--pv-gut); flex-basis: calc(58% + var(--pv-gut)); }
}

/* --- Rechtsseiten: schmale Tafel statt Raum ----------------------- */
.pv-hero--plate { --pv-hero-h: 48svh; min-height: 48svh; }
.pv-hero--plate .pv-hero__media { inset: 0 0 0 auto; width: min(34%, 340px); }
/* Die Tafel loest sich nach links UND nach unten auf — sonst steht ein
   abgeschnittenes Bildstueck im schwarzen Feld. */
.pv-hero--plate .pv-hero__media img {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #0B0908 24%), linear-gradient(0deg, transparent 0, #0B0908 16%);
  mask-image: linear-gradient(90deg, transparent 0, #0B0908 24%), linear-gradient(0deg, transparent 0, #0B0908 16%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.pv-hero--plate .pv-hero__scrim { display: none; }
.pv-hero--plate .pv-hero__doors { inset: 0 0 0 auto; width: min(34%, 340px); }
.pv-hero--slit .pv-hero__media,
.pv-hero--slit .pv-hero__doors { width: min(21%, 230px); }
.pv-hero--plate .pv-hero__sub { display: none; }
.pv-hero--plate h1 { margin-top: 14px; }
@media (max-width: 860px) {
  .pv-hero--plate { --pv-hero-h: auto; min-height: 0; }
  /* Beginnt unter der Leiste: sonst liegt der helle Tuerspalt des
     Bildes hinter „03 Kontakt" und der Link wird unlesbar. */
  .pv-hero--plate .pv-hero__media { position: absolute; inset: var(--fp-nav-h) 0 0 auto; width: 42%; height: auto; margin: 0; }
}

/* =================================================================
   BRUECKE — das Ende einer Seite ist der Anfang der naechsten.
   Vier Systemwege laufen in EINEN Galerieraum zusammen; drei
   Menschen laufen in EINEN gemeinsamen Zugang zusammen. Reines CSS,
   damit es auch ohne GSAP steht.
   ================================================================= */
.px-final--bridge, .px-cta--bridge { position: relative; overflow: hidden; }
/* Der Studio-Abschluss ist flach — die Linien brauchen ein eigenes
   Band unter dem Text, sonst laufen sie durch die Mailadresse. */
.px-cta--bridge { padding-bottom: clamp(96px, 13vh, 170px); }
.px-cta--bridge .pv-bridge { height: clamp(84px, 11vh, 148px); }
.px-final--bridge > *:not(.pv-bridge), .px-cta--bridge > *:not(.pv-bridge) { position: relative; z-index: 1; }
.pv-bridge {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: min(62%, 340px);
  pointer-events: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #0B0908 30%);
  mask-image: linear-gradient(to bottom, transparent, #0B0908 30%);
}
.pv-bridge i {
  position: absolute; top: -10%; bottom: -10%;
  left: var(--l); width: 1px;
  background: linear-gradient(to bottom, transparent, var(--pv-blue-hi) 62%, rgba(204, 0, 0, 0));
  transform: rotate(var(--r)) scaleY(.2);
  transform-origin: 50% 0;
  opacity: 0;
  transition: transform 1100ms var(--pv-ease-io), opacity 700ms var(--pv-ease);
  transition-delay: var(--d, 0ms);
}
.pv-bridge.is-in i { transform: rotate(var(--r)) scaleY(1); opacity: .55; }
/* Wo die Wege sich treffen, entsteht der neue Zugang */
.pv-bridge::after {
  content: ""; position: absolute; left: 50%; bottom: -14%;
  width: 3px; height: 46%; margin-left: -1.5px;
  background: linear-gradient(to top, var(--pv-blue-hi), rgba(204, 0, 0, 0));
  filter: blur(2px);
  opacity: 0; transition: opacity 700ms var(--pv-ease) 620ms;
}
.pv-bridge.is-in::after { opacity: .8; }
@media (prefers-reduced-motion: reduce) {
  .pv-bridge i { transform: rotate(var(--r)); opacity: .5; transition: none; }
  .pv-bridge::after { opacity: .7; transition: none; }
}

/* =================================================================
   PROGRESSIVE DISCLOSURE
   Nicht loeschen, sondern priorisieren: Nachrangiges bleibt im DOM
   (Suchmaschine, Vorlesesoftware, Rechtstexte), tritt aber optisch
   zurueck, bis der Besucher dort ankommt. Sichtbarkeit wird per
   Beobachter gesetzt — faellt er aus, ist alles sofort da.
   ================================================================= */
.pv-later {
  opacity: .34;
  transform: translateY(8px);
  transition: opacity 620ms var(--pv-ease), transform 620ms var(--pv-ease);
  transition-delay: var(--d, 0ms);
}
.pv-later.is-in { opacity: 1; transform: none; }
/* Tertiaer bleibt auch danach leiser — es soll nicht mitschreien */
.pv-quiet { font-size: 12.5px; line-height: 1.6; color: var(--pv-muted); opacity: .78; }
.pv-quiet:hover { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .pv-later { opacity: 1; transform: none; transition: none; }
}

/* --- Fortschritt durch die vier Leistungen ------------------------ */
.pv-prog {
  position: fixed; z-index: 40;
  right: clamp(14px, 1.6vw, 26px); top: 50%;
  transform: translateY(-50%);
  display: none; flex-direction: column; gap: 2px;
  opacity: 0; pointer-events: none;
  transition: opacity 420ms var(--pv-ease);
}
.pv-prog.is-live { opacity: 1; pointer-events: auto; }
.pv-prog a {
  display: flex; align-items: center; justify-content: flex-end; gap: 12px;
  padding: 9px 0;
  font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--pv-on-dark-muted);
  transition: color var(--pv-ui) var(--pv-ease);
}
.pv-prog a span {
  max-width: 0; overflow: hidden; white-space: nowrap;
  opacity: 0; transition: max-width 460ms var(--pv-ease), opacity 300ms var(--pv-ease);
}
.pv-prog a::after {                          /* der Streckenabschnitt */
  content: ""; width: 22px; height: 1px; flex: none;
  background: currentColor; opacity: .35;
  transition: width var(--pv-ui) var(--pv-ease), opacity var(--pv-ui) var(--pv-ease);
}
.pv-prog a:hover span,
.pv-prog a.is-on span { max-width: 160px; opacity: 1; }
.pv-prog a:hover { color: var(--pv-on-dark); }
.pv-prog a.is-on { color: var(--pv-on-dark); }
.pv-prog a.is-on::after { width: 34px; opacity: 1; background: var(--pv-blue); }
/* Schwebt die Leiste ueber einer HELLEN Sektion (Raum 02, System),
   kippt die Schrift auf Dunkel — hell auf hell war unlesbar. Das
   aktive Rot funktioniert auf beiden Grundtoenen und bleibt. JS
   (arbeiten.html) setzt die Klasse beim Scrollen. */
.pv-prog--onlight a { color: var(--pv-on-light-muted); }
.pv-prog--onlight a:hover,
.pv-prog--onlight a.is-on { color: var(--pv-on-light); }
@media (min-width: 1180px) and (hover: hover) { .pv-prog { display: flex; } }
@media (prefers-reduced-motion: reduce) { .pv-prog a span { transition: none; } }

/* --- Rechtstexte: lesbar statt laut ------------------------------ */
.fp-page--legal { padding-top: clamp(40px, 5.5vh, 68px); min-height: 0; }
.fp-page--legal .fp-legal { margin-top: 0; max-width: 68ch; }
.fp-page--legal .fp-legal h2 {
  font-family: var(--pv-display);
  font-size: clamp(1.35rem, 1.05rem + .9vw, 1.75rem);
  font-weight: 500; font-stretch: normal;
  text-transform: none; letter-spacing: -.012em;
  color: var(--pv-on-dark);
  margin-top: clamp(38px, 5vh, 58px);
  padding-top: 20px;
  border-top: 1px solid var(--pv-line-dark);
}
.fp-page--legal .fp-legal h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 8px; }
.fp-page--legal .fp-legal p,
.fp-page--legal .fp-legal li { font-size: var(--text-body); line-height: 1.68; color: var(--pv-on-dark-muted); }
.fp-page--legal .fp-legal__todo {
  display: inline-block; margin-bottom: 30px;
  padding: 9px 15px; border-radius: var(--pv-r);
  border: 1px solid rgba(204, 0, 0, .32); background: var(--pv-blue-soft);
  font-size: 13px; color: var(--pv-blue-hi);
}

/* =================================================================
   SEITENWECHSEL — das Tor schliesst, die naechste Seite oeffnet es.
   Kein Ladebildschirm: keine Logos, keine Prozente, nur Bewegung.
   ================================================================= */
/* --- ABSCHIED: kurzes Tor (default / legal) ---------------------- */
html.pv-gate::before,
html.pv-gate::after {
  content: "";
  position: fixed; top: -1%; bottom: -1%;
  width: 50.6%;
  z-index: 999;
  background: var(--pv-black);
  pointer-events: none;
  will-change: transform;
  transition: transform var(--pv-gate-dur, 0ms) var(--pv-ease-io);
}
html.pv-gate::before { left: 0;  transform: translateX(-100.5%); }
html.pv-gate::after  { right: 0; transform: translateX(100.5%); }
html.pv-gate.pv-gate--closed::before,
html.pv-gate.pv-gate--closed::after { transform: translateX(0); }
html.pv-gate.pv-gate--closed::before { box-shadow: 4px 0 26px rgba(204, 0, 0, .35); }

/* --- ABSCHIED: was IMMER zuruecktritt ---------------------------- */
html.pv-out .pv-prog,
html.pv-out .pv-scrollcue,
html.pv-out .pv-head .pv-btn,
html.pv-out .pv-route--meta,
html.pv-out .px-cta-row,
html.pv-out .pv-hero__sub { opacity: 0; transition: opacity 200ms var(--pv-ease); }
html.pv-out .pv-port__lab,
html.pv-out .pv-name {
  opacity: 0; transform: translateY(-8px);
  transition: opacity 240ms var(--pv-ease) 60ms, transform 240ms var(--pv-ease) 60ms;
}

/* --- ABSCHIED: die beiden grossen Verschmelzungen ----------------- */
/* Der Schleier deckt bewusst SPAET zu: die ersten 300 ms soll man den
   Raum selbst kippen sehen, nicht ein Overlay. Sonst wirkt es wie
   „Seite aus, Seite ein" statt wie ein Raum, der seine Funktion
   wechselt. */
.pv-veil {
  position: fixed; inset: 0; z-index: 997; pointer-events: none;
  opacity: 0; transition: opacity 190ms linear 335ms;
}
.pv-veil.is-on { opacity: 1; }
.pv-veil--sys { background: #190B0B; }        /* Creme kippt nach Midnight */
.pv-veil--ppl { background: var(--pv-black); }

/* Der Raum selbst dunkelt von den Raendern her ein — das Licht in den
   Oeffnungen bleibt bis zuletzt stehen und traegt in die naechste
   Seite hinueber. */
html.pv-out--sys .pv-hero::after,
html.pv-out--ppl .pv-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 4;
  pointer-events: none; opacity: 0;
  /* bewusst ein-schleichend (ease-in): mit dem schnellen Marken-Easing
     waere der Raum schon nach einem Drittel der Zeit schwarz. */
  animation: pv-room-dark 500ms cubic-bezier(.62, 0, .9, .48) forwards;
}
html.pv-out--sys .pv-hero::after {
  background: radial-gradient(125% 110% at 66% 55%, rgba(20, 12, 8, .06), rgba(20, 12, 8, .9) 76%);
}
html.pv-out--ppl .pv-hero::after {
  background: radial-gradient(115% 110% at 58% 55%, rgba(10, 7, 6, .08), rgba(10, 7, 6, .9) 74%);
}
@keyframes pv-room-dark { from { opacity: 0; } to { opacity: 1; } }

.pv-morph { position: fixed; top: 0; bottom: 0; z-index: 998; pointer-events: none; }
.pv-morph i {
  position: absolute; top: 12%; bottom: 12%;
  left: var(--mx, 50%);
  width: 2px; margin-left: -1px;
  background: linear-gradient(to bottom, transparent, var(--pv-blue-hi), transparent);
  opacity: 0; transform: scaleY(.5);
  transition: opacity 280ms var(--pv-ease),
              transform 480ms var(--pv-ease-io),
              left 520ms var(--pv-ease-io),
              width 480ms var(--pv-ease-io),
              filter 480ms var(--pv-ease);
}
.pv-morph.is-on i { opacity: .95; transform: none; }
/* System → Galerie: die vier Zugaenge flammen auf und werden zu Raum */
.pv-morph--sys.is-on i { width: 14px; filter: blur(4px); }
/* Menschen → Kontakt: aus drei Linien wird ein gemeinsamer Zugang */
.pv-morph--ppl.is-on i { left: 50%; width: 8px; filter: blur(3px); }

html.pv-out--sys .pv-port::before { opacity: 1; transition: opacity 320ms var(--pv-ease); }
html.pv-out--sys .pv-hero__media img,
html.pv-out--ppl .pv-hero__media img {
  transform: scale(1.07);
  transition: transform 680ms var(--pv-ease-io);
}

/* --- ANKUNFT ----------------------------------------------------- */
html.pv-in::before, html.pv-in::after {
  content: ""; position: fixed; top: -1%; bottom: -1%;
  z-index: 999; pointer-events: none; will-change: transform, opacity;
}
/* default + legal: zwei Fluegel gehen auf */
html.pv-in--default::before, html.pv-in--legal::before,
html.pv-in--default::after,  html.pv-in--legal::after {
  width: 50.6%; background: var(--pv-black);
  transition: transform 520ms var(--pv-ease-io);
}
html.pv-in--legal::before, html.pv-in--legal::after { transition-duration: 400ms; }
html.pv-in--default::before, html.pv-in--legal::before { left: 0; }
html.pv-in--default::after,  html.pv-in--legal::after  { right: 0; }
html.pv-in--default.is-open::before, html.pv-in--legal.is-open::before { transform: translateX(-100.5%); }
html.pv-in--default.is-open::after,  html.pv-in--legal.is-open::after  { transform: translateX(100.5%); }

/* system-to-gallery: der Schleier loest sich um vier Lichtsaeulen
   herum auf — dieselben vier Wege, jetzt als Galerie. */
html.pv-in--sys::before {
  left: 0; right: 0; background: #190B0B;
  opacity: 1; transition: opacity 640ms var(--pv-ease-io) 70ms;
}
html.pv-in--sys.is-open::before { opacity: 0; }
html.pv-in--sys::after {
  left: 0; right: 0; opacity: 1;
  transform: scaleX(.55); transform-origin: 50% 50%;
  background-repeat: no-repeat;
  background-image:
    radial-gradient(closest-side, rgba(255, 96, 82, .85), rgba(255, 96, 82, 0) 72%),
    radial-gradient(closest-side, rgba(255, 96, 82, .85), rgba(255, 96, 82, 0) 72%),
    radial-gradient(closest-side, rgba(255, 96, 82, .75), rgba(255, 96, 82, 0) 72%),
    radial-gradient(closest-side, rgba(255, 96, 82, .7),  rgba(255, 96, 82, 0) 72%);
  background-size: 5% 62%, 6% 74%, 4% 46%, 5% 58%;
  background-position: 47.6% 56%, 61.2% 52%, 76% 58%, 87.8% 55%;
  transition: opacity 520ms var(--pv-ease) 200ms, transform 720ms var(--pv-ease-io);
}
html.pv-in--sys.is-open::after { opacity: 0; transform: none; }

/* people-to-contact: aus dem gemeinsamen Zugang oeffnet sich der Weg */
html.pv-in--ppl::before {
  left: 0; right: 0; background: var(--pv-black);
  opacity: 1; transition: opacity 640ms var(--pv-ease-io) 70ms;
}
html.pv-in--ppl.is-open::before { opacity: 0; }
html.pv-in--ppl::after {
  left: 0; right: 0; opacity: 1;
  background: radial-gradient(closest-side, rgba(232, 226, 210, .9), rgba(232, 226, 210, 0) 74%) 67% 50% / 3% 70% no-repeat;
  transform: scaleX(.4);
  transition: opacity 520ms var(--pv-ease) 190ms, transform 720ms var(--pv-ease-io);
}
html.pv-in--ppl.is-open::after { opacity: 0; transform: scaleX(2.6); }

@media (prefers-reduced-motion: reduce) {
  html.pv-gate::before, html.pv-gate::after,
  html.pv-in::before, html.pv-in::after { display: none; }
  .pv-morph, .pv-veil { display: none; }
}

/* --- Kursives ohne eigene Regel: das ist der Serif-Akzent ---------
   Instrument Sans wird ohne Kursive geladen; ein blankes <em>
   wuerde der Browser sonst selbst schraegstellen. */
p em:not([class]), li em:not([class]),
figcaption em:not([class]), blockquote em:not([class]) {
  font-family: var(--pv-accent);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.004em;
}
/* Instrument Serif gibt es nur in einem Schnitt */
.pv-display em, .px-serif, .px-act__line, .px-doc__val, .px-p__msg, .px-h1__it, .pv-brand__word { font-weight: 400; }

/* --- Zeilenlaenge: lesbar statt breit ----------------------------
   Auf dunklem Grund ermuedet eine 175 Zeichen lange Zeile
   besonders schnell. */
.fp-page--legal .fp-legal p, .fp-page--legal .fp-legal li { max-width: 66ch; }
.px-win__note { max-width: 74ch; }
.px-tempo { max-width: 72ch; }

/* Die Metazeile hat auf schmalen Schirmen keinen Platz fuer den
   Trennstrich — sie bricht sonst mitten im Wort um. */
@media (max-width: 520px) {
  .pv-route--meta { flex-wrap: wrap; row-gap: 4px; letter-spacing: .1em; }
  .pv-route--meta s { display: none; }
  .pv-route--meta::after { content: ""; flex-basis: 100%; }
}

/* --- Ueberschriften: Akzent = Gewicht, nicht zweite Schrift ------ */
h1 em, h2 em, h3 em,
h1 .px-serif, h2 .px-serif, h3 .px-serif,
h1 .px-h1__it, h2.px-h1 .px-h1__it, h2 .px-h1__it {
  font-family: inherit;
  font-style: normal;
  font-weight: 400;
  letter-spacing: inherit;
}
/* Der Punkt am Satzende bleibt das Markensignal */
h1 .px-h1__dot, h2 .px-h1__dot, h2 .px-final__dot { font-weight: inherit; }

/* =================================================================
   LICHTSCHWELLE — der Wechsel zwischen Nacht und Stein passiert
   nicht als Hintergrundsprung, sondern als Licht, das aus dem hellen
   Raum in den dunklen greift.
   Bewusst als Schatten in Steinfarbe statt als Pseudo-Element: der
   erste Versuch brauchte position:relative auf allen Kindern und hat
   damit den Bezugsrahmen absolut gesetzter Enkel verschoben —
   Ergebnis war ein Querlauf auf dem Handy.
   ================================================================= */
.pv-cream, .pv-ivory {
  box-shadow: 0 -34px 52px -18px rgba(222, 216, 204, .40),
              0  34px 52px -18px rgba(222, 216, 204, .40);
}
.pv-ivory {
  box-shadow: 0 -34px 52px -18px rgba(232, 227, 216, .40),
              0  34px 52px -18px rgba(232, 227, 216, .40);
}
/* Der Hero traegt seine eigene Kante */
.pv-hero.pv-cream, .pv-hero.pv-ivory { box-shadow: none; }

/* =================================================================
   ROT IST ZUSTAND, NICHT DEKORATION
   Auf Leistungen waren neun Signal-Momente gleichzeitig im Bild —
   vier Portalnummern, Routennummer, Routenpunkt, Headlinepunkt,
   Link und Pfeil. Rot markiert ab jetzt: aktiv, verbunden, im
   Fokus. Alles andere traegt die normale Textfarbe.
   ================================================================= */
.pv-port .pv-mark-nr { color: var(--pv-on-light-muted); transition: color var(--pv-ui) var(--pv-ease); }
.pv-port:hover .pv-mark-nr,
.pv-port:focus .pv-mark-nr,
.pv-port.is-dim + .pv-port .pv-mark-nr:hover { color: var(--pv-blue); }
/* Die Routennummer ist Systemangabe — der Punkt daneben traegt das Signal */
.pv-route b { color: inherit; }
/* Die drei Namen zeigen ihren Punkt erst, wenn man sie anspricht */
.pv-name i { opacity: 0; }
.pv-name.is-on:hover i, .pv-name.is-on:focus i { opacity: 1; }
/* Pfeile sind Richtung, nicht Signal */
.pv-alink i, .pv-alink svg { color: currentColor; }


/* =================================================================
   OEFFENTLICHE SEITEN — ruhigere typografische Grammatik
   Nur unter .pv-public: Studio traegt die Klasse nicht und bleibt
   dadurch unveraendert.

   Drei Stufen statt einer: der Seiteneinstieg darf laut sein, das
   Kapitel spricht normal, die Sachueberschrift fluestert. Vorher sahen
   alle drei fast gleich aus — daher der Bauteil-Eindruck.
   ================================================================= */

/* --- B: Kapitel. Eine Stufe unter dem Hero. ---------------------- */
.pv-public .pv-sec .pv-display,
.pv-public .sys__stick .pv-display {
  font-weight: 500;
  font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2.25rem);
  line-height: 1.16;
  letter-spacing: -.01em;
}
/* Zwei Momente bleiben laut: der Abschluss der Startseite und der
   freie Raum auf Arbeiten. */
.pv-public #cta .pv-display,
.pv-public #raum-05 .pv-display {
  font-weight: 600;
  font-size: clamp(1.85rem, 1.3rem + 1.9vw, 3rem);
  line-height: 1.08;
  letter-spacing: var(--tracking-display);
}

/* --- Links: redaktionell statt Micro-Button ---------------------
   Uppercase, Tracking und Dauer-Cobalt liessen jeden Link wie ein
   Steuerelement aussehen. Jetzt ein normaler Link, der beim Zeigen
   Farbe bekommt. */
.pv-public .pv-alink,
.pv-public .px-case__link,
.pv-public .px-room__link {
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--pv-on-dark);
}
.pv-public .pv-alink:hover,
.pv-public .px-case__link:hover,
.pv-public .px-room__link:hover { color: var(--pv-blue-hi); }
.pv-public .px-case__link { border-bottom: 0; padding-bottom: 0; }
.pv-public .pv-cream .pv-alink,
.pv-public .pv-stone .pv-alink { color: var(--pv-on-light); }

/* --- Fusszeile: Spalten bleiben, der Systemlook geht ------------- */
.pv-public .pv-foot h4 {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--pv-on-dark);
  opacity: .72;
}

/* --- Lesbarkeit vor Atmosphaere ---------------------------------
   Die Bodycopy war gedimmt, damit es teuer aussieht. Ein Schritt
   zurueck in Richtung Lesbarkeit — kein Weiss, aber lesbar. */
.pv-public .pv-dark, .pv-public .pv-navy, .pv-public .pv-hero {
  --pv-on-dark-muted: #B8AEA9;
}


/* ---------- Der Knopf verliert seine Kit-Herkunft ------------------
   Vorher: 12.5px, Versalien, 0.08em Sperrung, 6px-Punkt in Blau, der
   beim Hovern auf 145 % wuchs. Das ist die Standardform aus jedem
   Komponenten-Kit, und sie sitzt in der Kopfzeile jeder Seite.

   Jetzt: dieselbe Schrift und dieselbe Groesse wie die Textlinks
   daneben, gemischte Schreibung, rechtwinklig wie alle anderen
   Flaechen der Seite. Der Punkt faellt weg — er war eine Statusanzeige
   ohne Status. Studio traegt .pv-public nicht und behaelt seinen Knopf.
   ------------------------------------------------------------------ */
.pv-public .pv-btn {
  font-family: var(--font-text);
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  border-radius: 0;
  gap: 0;
  padding: 0 22px;
}
.pv-public .pv-btn::after { content: none; }
.pv-public .pv-head .pv-btn { font-size: 14px; padding: 0 18px; }
/* Ohne Punkt braucht der Hover ein eigenes Zeichen: die Flaeche hebt
   sich, mehr nicht. Das Springen um 1px bleibt, es ist das einzige
   Feedback, das der Knopf noch hat. */
.pv-public .pv-btn:hover::after { transform: none; }

/* ==================================================================
   DREI SEITEN, DREI KNÖPFE
   „Projekt anfragen" führt überall zum selben Ort, sieht aber auf
   jeder Route anders aus — eigene Farbe, eigene Form. Der Besucher
   merkt daran auch ohne Blick in die Leiste, wo er gerade steht.

   01 HOME      Signalrot, gefüllt, rechtwinklig.
                Die Eingangsfarbe der Marke, harte Kante wie die
                Türöffnung im Hero. Der lauteste der drei — hier
                fängt alles an.
   02 ARBEITEN  Sandstein, gefüllt, zwei abgeschrägte Ecken.
                Der Ton der Wände in den Räumen. Der Schnitt an
                zwei gegenüberliegenden Ecken lässt den Knopf wie
                ein Bauteil aussehen, nicht wie ein Web-Element.
   03 KONTAKT   Messing, gefüllt, Pille.
                Der einzige warme, gesättigte Ton der Seite — der
                Griff an der Tür. Die runde Form ist die weichste
                der drei, passend zur weichsten Handlung.

   Warum kein drittes Rot: die Palette kennt ein Signalrot und einen
   Steinton. Mit dem Signalrot als drittem Knopf wären zwei von drei
   Seiten rot gewesen — nebeneinander gestellt sah das nach
   Versehen aus, nicht nach Absicht. Messing ist gesetzt, weil es
   den warmen Sandstein der Wände aufnimmt und ihn nur sättigt.
   Kontrast der Schrift auf der Fläche: 6.6:1 (geprüft).

   Die Fläche liegt bei Form 02 im ::before, nicht im Knopf selbst:
   ein clip-path am Element würde den Fokusring mit abschneiden.
   So bleibt der Ring vollständig sichtbar.

   studio.html trägt kein .pv-public und behält seinen Knopf.
   ================================================================== */
.pv-public[data-pv-knopf] .pv-btn {
  position: relative;
  isolation: isolate;
  border-color: transparent;
  /* Die Flaeche liegt AUSSCHLIESSLICH im ::before. Bliebe der eigene
     Grund stehen, wuerde er die abgeschnittenen Ecken von Form 02
     wieder auffuellen — der Schnitt waere unsichtbar. */
  background: transparent;
}
.pv-public[data-pv-knopf] .pv-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--knopf-flaeche);
  transition: background-color var(--pv-ui) var(--pv-ease);
}
.pv-public[data-pv-knopf] .pv-btn { color: var(--knopf-schrift); }
.pv-public[data-pv-knopf] .pv-btn:hover { background: transparent; }
.pv-public[data-pv-knopf] .pv-btn:hover::before { background: var(--knopf-flaeche-hover); }

/* ---- 01 HOME — Signalrot, rechtwinklig -------------------------- */
.pv-public[data-pv-knopf="01"] .pv-btn {
  --knopf-flaeche: var(--pv-blue);
  --knopf-flaeche-hover: var(--pv-blue-hi);
  --knopf-schrift: #FFFFFF;
}

/* ---- 02 ARBEITEN — Sandstein, abgeschrägte Ecken ---------------- */
.pv-public[data-pv-knopf="02"] .pv-btn {
  --knopf-flaeche: var(--pv-stone);
  --knopf-flaeche-hover: var(--pv-stone-lit);
  --knopf-schrift: var(--pv-on-light);
}
.pv-public[data-pv-knopf="02"] .pv-btn::before {
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px),
                     calc(100% - 14px) 100%, 0 100%, 0 14px);
}

/* ---- 03 KONTAKT — Messing, Pille -------------------------------- */
.pv-public[data-pv-knopf="03"] .pv-btn {
  --knopf-flaeche: #BE8B4A;
  --knopf-flaeche-hover: #D2A05C;
  --knopf-schrift: var(--pv-black);
  border-radius: 999px;
}
.pv-public[data-pv-knopf="03"] .pv-btn::before { border-radius: 999px; }

/* =================================================================
   DER ROTE KNOPF
   Eine rot gefüllte Fläche mit angeschrägten Ecken — auf jeder
   Seite dieselbe. Die Fase liegt im ::before, nicht als clip-path
   auf dem Knopf selbst: clip-path am Element würde den außerhalb
   der Rahmenbox gezeichneten Fokusring restlos abschneiden. Das
   :not(.pv-btn--ghost) hebt die Spezifität auf 0-4-0 (schlägt
   .pv-head--onlight:not(.is-stuck) .pv-btn) und schließt die
   Geisterknöpfe aus.
   ================================================================= */
.pv-btn:not(.pv-btn--ghost) {
  position: relative;
  isolation: isolate;
  background: transparent;
  color: var(--pv-on-dark);
  border-radius: 0;
}
.pv-btn:not(.pv-btn--ghost)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--pv-blue);          /* führt #CC0000 */
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px),
                     calc(100% - 14px) 100%, 0 100%, 0 14px);
  transition: background-color var(--pv-ui) var(--pv-ease);
}
.pv-btn:not(.pv-btn--ghost):hover::before { background: #E01414; }
.pv-btn:not(.pv-btn--ghost)::after       { background: var(--pv-on-dark); }

/* Die Umkipp-Regeln für helle Flächen werden hinfällig: Rot trägt
   auf Creme wie auf Schwarz, also überall dieselbe Füllung. */
.pv-cream .pv-btn:not(.pv-btn--ghost),
.pv-ivory .pv-btn:not(.pv-btn--ghost),
.pv-head--onlight:not(.is-stuck) .pv-btn:not(.pv-btn--ghost) {
  background: transparent;
  color: var(--pv-on-dark);
}
.pv-cream .pv-btn:not(.pv-btn--ghost)::before,
.pv-ivory .pv-btn:not(.pv-btn--ghost)::before,
.pv-head--onlight:not(.is-stuck) .pv-btn:not(.pv-btn--ghost)::before {
  background: var(--pv-blue);
}
.pv-cream .pv-btn:not(.pv-btn--ghost):hover::before,
.pv-ivory .pv-btn:not(.pv-btn--ghost):hover::before,
.pv-head--onlight:not(.is-stuck) .pv-btn:not(.pv-btn--ghost):hover::before {
  background: #E01414;
}

/* DREI SEITEN, EIN KNOPF: die Routen-Varianten (data-pv-knopf) laufen
   über die --knopf-*-Properties und eigene Radien. Hier werden sie auf
   das eine Rot zusammengeführt — die Property-Mechanik bleibt stehen,
   führt aber überall dieselben Werte. */
.pv-public[data-pv-knopf] .pv-btn:not(.pv-btn--ghost) {
  --knopf-flaeche: var(--pv-blue);
  --knopf-flaeche-hover: #E01414;
  --knopf-schrift: var(--pv-on-dark);
  border-radius: 0;
}
.pv-public[data-pv-knopf] .pv-btn:not(.pv-btn--ghost)::before {
  border-radius: 0;
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px),
                     calc(100% - 14px) 100%, 0 100%, 0 14px);
}