/* ==========================================================================
   DROST Consulting  ·  Helle Fassung
   Eigenstaendige Vorschau. Die dunkle Fassung unter drost-consulting.pages.dev
   bleibt davon unberuehrt.

   Grundsatz zur Farbe: Bordeaux #921221 unveraendert aus dem Logo. Auf dem
   hellen Grund traegt es endlich auch als Schrift, dort erreicht es 8,2:1.
   Bewusst kein warmes Creme mit Messing, das ist die Palette, die jedes
   KI-Werkzeug fuer "hochwertig und traditionsreich" ausgibt.
   ========================================================================== */

@font-face {
  font-family: "Newsreader";
  font-style: normal; font-weight: 300 600; font-display: swap;
  src: url("../fonts/newsreader-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Newsreader";
  font-style: normal; font-weight: 300 600; font-display: swap;
  src: url("../fonts/newsreader-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../fonts/schibsted-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../fonts/schibsted-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Dunkel, aber nicht flach. Fassung 1 scheiterte nicht an der Dunkelheit,
     sondern am fehlenden Licht: eine tote Flaeche ohne Tiefe. Hier tragen
     radiale Lichtquellen, glimmende Kanten und additive Effekte die Raeume. */
  --ground:     #141014;
  --ground-2:   #1B161C;
  --panel:      #241E26;
  --panel-2:    #2C2530;
  --panel-hi:   #352C39;

  --ink:        #F5F0F1;
  --ink-soft:   #ADA1A6;
  --ink-faint:  #7C7076;

  --rule:       #322B34;
  --rule-strong: #4A404C;

  /* Bordeaux als Flaeche unveraendert aus dem Logo. Fuer Schrift auf
     dunklem Grund die aufgehellte Fassung, die 7,4:1 erreicht. */
  --brand:      #921221;
  --brand-lift: #A91526;
  --brand-glow: #C8324A;
  --brand-text: #E8879A;
  --brand-soft: rgba(146, 18, 33, 0.16);
  --brand-line: rgba(146, 18, 33, 0.5);
  --on-brand:   #FFFFFF;

  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-body: "Schibsted Grotesk", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, system-ui, sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-md: clamp(1.0625rem, 0.99rem + 0.31vw, 1.1875rem);
  --text-lg: clamp(1.1875rem, 1.06rem + 0.55vw, 1.4375rem);
  --text-xl: clamp(1.4375rem, 1.22rem + 0.94vw, 1.9375rem);
  --text-2xl: clamp(1.75rem, 1.36rem + 1.65vw, 2.625rem);
  --text-3xl: clamp(2.125rem, 1.5rem + 2.66vw, 3.5rem);
  --text-4xl: clamp(2.75rem, 1.6rem + 4.9vw, 5.5rem);

  --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 2.5rem;
  --sp-8: 3rem;    --sp-9: 4rem;

  --section-y: clamp(4.5rem, 9vw, 8.5rem);
  --radius: 2px;
  --measure: 66ch;
  --container: 1240px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 620ms;

  --header-h: 76px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video, canvas { display: block; max-width: 100%; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, figure { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration-color: var(--brand-line); text-underline-offset: 0.22em; }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: var(--radius); }
::selection { background: var(--brand); color: #fff; }

.skip-link {
  position: absolute; left: var(--sp-4); top: var(--sp-4); z-index: 200;
  padding: var(--sp-3) var(--sp-5); background: var(--brand); color: #fff;
  font-weight: 500; border-radius: var(--radius); text-decoration: none;
  transform: translateY(-160%); transition: transform var(--dur-base) var(--ease-out);
}
.skip-link:focus { transform: none; }

/* --- Typografie --- */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 300;
  font-optical-sizing: auto;
  letter-spacing: -0.014em;
  line-height: 1.1;
  text-wrap: balance;
}
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); line-height: 1.2; }
p { max-width: var(--measure); }

.lead { font-size: var(--text-lg); line-height: 1.55; color: var(--ink-soft); max-width: 54ch; }
.body-soft { color: var(--ink-soft); }
.eyebrow {
  display: inline-block; font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--brand);
}

/* --- Layout --- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: 820px; }
.section { padding-block: var(--section-y); }
.section--raised { background: var(--ground-2); border-block: 1px solid var(--rule); }
.stack { display: flex; flex-direction: column; }
.stack-5 { gap: var(--sp-5); } .stack-6 { gap: var(--sp-6); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; }
.section-head { display: flex; flex-direction: column; gap: var(--sp-4); max-width: 62ch; }
.section-head + * { margin-top: var(--sp-8); }
.page { display: flex; flex-direction: column; min-height: 100dvh; }
.page > main { flex: 1; }

/* --- Kopfbereich --- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--ground) 86%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}
.site-header[data-scrolled="true"] { border-bottom-color: var(--rule); background: color-mix(in srgb, var(--ground) 96%, transparent); }
@supports not (backdrop-filter: blur(1px)) { .site-header { background: var(--ground); } }

.header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); height: var(--header-h); }
.brand__logo { height: 26px; width: auto; }
.nav { display: flex; align-items: center; gap: var(--sp-2); }
.nav__link {
  position: relative; display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3); font-size: var(--text-sm); font-weight: 500;
  color: var(--ink-soft); text-decoration: none; white-space: nowrap;
  border-radius: var(--radius); transition: color var(--dur-fast) var(--ease-out);
}
.nav__link:hover { color: var(--ink); }
.nav__divider { width: 1px; height: 22px; background: var(--rule-strong); margin-inline: var(--sp-2); flex-shrink: 0; }
.nav__group-link { color: var(--ink-faint); }
.nav__group-link:hover { color: var(--ink-soft); }
.nav .nav__mobile-cta { display: none; }

.nav-toggle {
  display: none; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3); background: transparent;
  border: 1px solid var(--rule-strong); border-radius: var(--radius);
  color: var(--ink); font-size: var(--text-sm); font-weight: 500; cursor: pointer;
}
.nav-toggle__bars { display: flex; flex-direction: column; gap: 4px; width: 16px; }
.nav-toggle__bars i { display: block; height: 1.5px; background: currentColor; transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:first-child { transform: translateY(5.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:last-child { transform: translateY(-5.5px) rotate(-45deg); }

@media (max-width: 1000px) {
  .nav-toggle { display: inline-flex; }
  .header-cta { display: none; }
  .nav {
    position: fixed; inset: var(--header-h) 0 0; flex-direction: column;
    align-items: stretch; justify-content: flex-start; gap: 0;
    padding: var(--sp-5) var(--gutter) var(--sp-9);
    background: var(--ground); border-top: 1px solid var(--rule);
    overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
  }
  .nav[data-open="true"] { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .nav__link { padding: var(--sp-4) 0; font-size: var(--text-md); border-bottom: 1px solid var(--rule); }
  .nav__divider { display: none; }
  .nav .nav__mobile-cta { display: inline-flex; margin-top: var(--sp-6); align-self: flex-start; }
}

/* --- Schaltflaechen --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-3);
  padding: 0.8125rem 1.5rem; font-size: var(--text-sm); font-weight: 600; line-height: 1.2;
  white-space: nowrap; text-decoration: none; border: 1px solid transparent;
  border-radius: var(--radius); cursor: pointer; background: transparent;
  -webkit-appearance: none; appearance: none;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--brand); color: var(--on-brand); }
.btn--primary:hover { background: var(--brand-lift); }
.btn--outline { border-color: var(--rule-strong); color: var(--ink); }
.btn--outline:hover { border-color: var(--brand); }
.btn--ghost { color: var(--ink-soft); padding-inline: 0; }
.btn--sm { padding: 0.5rem 1rem; font-size: var(--text-xs); }

.arrow-link {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  font-size: var(--text-sm); font-weight: 600; color: var(--ink); text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.arrow-link svg { width: 15px; height: 15px; flex-shrink: 0; transition: transform var(--dur-base) var(--ease-out); }
.arrow-link:hover { color: var(--brand); }
.arrow-link:hover svg { transform: translateX(4px); }

/* ==========================================================================
   Hero mit der Struktur, die sich beim Scrollen zusammensetzt
   ========================================================================== */

.hero { position: relative; height: 300vh; }
.hero__sticky {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: grid; grid-template-rows: 1fr auto;
  background: radial-gradient(120% 78% at 50% 8%, #FFFFFF 0%, rgba(36,30,38,0) 62%), var(--ground);
}
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__sticky::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg,
    var(--ground) 4%, rgba(20,16,20,0.92) 26%,
    rgba(20,16,20,0.6) 44%, rgba(20,16,20,0) 66%);
}
.hero__inner {
  position: relative; z-index: 2; align-self: end; width: 100%;
  max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter);
  padding-bottom: clamp(1.5rem, 4vh, 3rem);
  display: flex; flex-direction: column; gap: var(--sp-5);
  pointer-events: none;
}
.hero__inner > * { pointer-events: auto; }
.hero h1 { font-size: var(--text-4xl); line-height: 1.02; max-width: 14ch; }
.hero__lead { max-width: 46ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-5); align-items: center; }

/* Die drei Phasen laufen oben mit. */
.hero__phase {
  position: absolute; z-index: 3; top: calc(var(--header-h) + 18px); left: 0; right: 0;
  max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter);
  display: flex; gap: 22px; font-size: 0.7rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-faint); pointer-events: none;
}
.hero__phase span { transition: color 380ms var(--ease-out); }
.hero__phase span.on { color: var(--brand); font-weight: 700; }

.hero__figures {
  position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--rule);
  background: color-mix(in srgb, var(--ground) 70%, transparent);
  backdrop-filter: blur(6px);
}
.figure { display: flex; flex-direction: column; gap: 2px; padding: clamp(1rem, 2.4vw, 1.6rem) clamp(0.9rem, 2vw, 1.6rem); border-right: 1px solid var(--rule); }
.figure:last-child { border-right: 0; }
.figure b {
  font-family: var(--font-display); font-weight: 400; font-size: var(--text-2xl);
  line-height: 1; font-variant-numeric: tabular-nums; color: var(--brand);
}
.figure span { font-size: var(--text-xs); color: var(--ink-faint); }

@media (max-width: 760px) {
  .hero__figures { grid-template-columns: 1fr 1fr; }
  .figure:nth-child(2) { border-right: 0; }
  .figure:nth-child(3), .figure:nth-child(4) { border-top: 1px solid var(--rule); }
  .hero__phase { display: none; }
}

/* ==========================================================================
   Formatsprengender Schriftzug
   ========================================================================== */

.oversize { overflow: hidden; padding: clamp(36px, 6vw, 72px) 0; background: var(--ground-2); border-block: 1px solid var(--rule); }
.oversize__row { display: flex; align-items: baseline; gap: 0.22em; white-space: nowrap; will-change: transform; }
.oversize__word {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(4rem, 15vw, 13rem); line-height: 0.86; letter-spacing: -0.045em;
}
.oversize__word.hollow { color: transparent; -webkit-text-stroke: 1px var(--ink-faint); }
.oversize__word.brand { color: var(--brand); }

/* ==========================================================================
   Zwei Geschaeftsfelder
   ========================================================================== */

.axes { display: grid; grid-template-columns: 1fr 1fr; border-block: 1px solid var(--rule); }
.axis {
  position: relative; display: flex; flex-direction: column; gap: var(--sp-5);
  padding: clamp(2rem, 4.5vw, 3.5rem) clamp(1.5rem, 3.5vw, 3rem);
  background: var(--panel); transition: background-color var(--dur-base) var(--ease-out);
}
.axis:nth-child(2) { background: var(--ground-2); }
.axis + .axis { border-left: 1px solid var(--rule); }
.axis:hover { background: var(--panel-hi); }
.axis::before {
  content: ""; position: absolute; top: 0; left: 0; height: 2px; width: 0;
  background: var(--brand); transition: width var(--dur-slow) var(--ease-out);
}
.axis:hover::before { width: 100%; }
.axis__index { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--brand); }
.axis h3 { font-size: var(--text-xl); }
.axis p { color: var(--ink-soft); font-size: var(--text-sm); }
.axis ul { display: flex; flex-direction: column; gap: var(--sp-2); }
.axis ul li { font-size: var(--text-sm); color: var(--ink-soft); padding-left: var(--sp-4); position: relative; }
.axis ul li::before { content: ""; position: absolute; left: 0; top: 0.68em; width: 6px; height: 1px; background: var(--brand); }
.axis .arrow-link { margin-top: auto; padding-top: var(--sp-3); }
@media (max-width: 800px) {
  .axes { grid-template-columns: 1fr; }
  .axis + .axis { border-left: 0; border-top: 1px solid var(--rule); }
}

/* ==========================================================================
   Seitliches Element neben Text
   ========================================================================== */

.split { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.split--rev .split__copy { order: 2; }
.split__view { position: relative; width: 100%; height: min(52vh, 420px); }
.split__view canvas { width: 100%; height: 100%; }
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; gap: var(--sp-7); }
  .split--rev .split__copy { order: 0; }
  .split__view { height: 40vh; }
}

/* --- Statement, wortweise --- */
.statement p {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(1.5rem, 3.6vw, 2.7rem); line-height: 1.24;
  letter-spacing: -0.012em; max-width: 22ch;
}
.statement .w { display: inline-block; opacity: 0.16; transition: opacity 420ms var(--ease-out); }
.statement .w.lit { opacity: 1; }
.statement .w.accent.lit { color: var(--brand); }

/* --- Wortwechsel --- */
.swapword {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(1.6rem, 4vw, 3rem); line-height: 1.2;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25em; max-width: none;
}
.swapword .slot { position: relative; display: inline-block; height: 1.2em; overflow: hidden; vertical-align: bottom; }
.swapword .slot u { display: block; text-decoration: none; color: var(--brand); will-change: transform; }
.swapword .slot u b { display: block; height: 1.2em; line-height: 1.2; font-weight: 300; white-space: nowrap; }

/* ==========================================================================
   Bild
   ========================================================================== */

.shot { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--ground-2); }
.shot canvas { width: 100%; height: 100%; }
.band { position: relative; height: clamp(240px, 36vw, 440px); overflow: hidden; border-block: 1px solid var(--rule); }
.band canvas { width: 100%; height: 100%; }
.band__quote { position: absolute; inset: 0; display: flex; align-items: center; pointer-events: none; }
.band__quote p {
  font-family: var(--font-display); font-weight: 300; font-size: var(--text-xl);
  line-height: 1.25; max-width: 20ch; color: #fff;
  text-shadow: 0 2px 24px rgba(0,0,0,0.5);
}

/* ==========================================================================
   Untermarken
   ========================================================================== */

.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(clamp(260px, 30vw, 340px), 1fr)); gap: var(--sp-5); }
.brand-card {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.25rem); min-height: 340px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: var(--sp-3);
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.brand-card canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.brand-card::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to top,
    rgba(36,30,38,0.94) 0%, rgba(36,30,38,0.86) 26%,
    rgba(36,30,38,0.58) 48%, rgba(36,30,38,0.2) 70%, rgba(36,30,38,0) 88%);
}
.brand-card h3, .brand-card p, .brand-card .tag {
  position: relative;
  text-shadow: 0 0 10px var(--panel), 0 0 20px var(--panel), 0 0 30px var(--panel);
}
.brand-card h3 { font-size: var(--text-lg); }
.brand-card p { font-size: var(--text-sm); color: var(--ink-soft); max-width: 34ch; }
.brand-card .tag {
  align-self: flex-start; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em;
  padding: 2px 8px; border-radius: var(--radius); background: var(--brand-soft); color: var(--brand);
}
.brand-card__parent { font-size: var(--text-xs); color: var(--ink-faint); }
@media (hover: hover) and (pointer: fine) {
  .brand-card:hover { border-color: var(--rule-strong); transform: translateY(-2px); }
}

/* ==========================================================================
   Prozess
   ========================================================================== */

.steps { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.step { display: grid; grid-template-columns: 64px 1fr; gap: var(--sp-5); padding: clamp(1.5rem, 3vw, 2rem); background: var(--panel); }
.step__num { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 400; color: var(--brand); font-variant-numeric: tabular-nums; line-height: 1; }
.step h3 { font-size: var(--text-lg); margin-bottom: var(--sp-2); }
.step p { font-size: var(--text-sm); color: var(--ink-soft); }
@media (max-width: 600px) { .step { grid-template-columns: 1fr; gap: var(--sp-3); } }

/* ==========================================================================
   Fussbereich, Hinweise, Bedienelemente
   ========================================================================== */

.site-footer { background: var(--ground-2); border-top: 1px solid var(--rule); padding-block: var(--sp-9) var(--sp-6); margin-top: auto; }
.footer-grid { display: grid; grid-template-columns: minmax(240px, 1.4fr) repeat(2, minmax(150px, 1fr)); gap: var(--sp-8) var(--sp-6); }
.footer-brand { display: flex; flex-direction: column; gap: var(--sp-4); }
.footer-brand img { height: 30px; width: auto; }
.footer-brand p { font-size: var(--text-sm); color: var(--ink-faint); max-width: 34ch; }
.footer-brand address { font-style: normal; font-size: var(--text-sm); color: var(--ink-soft); }
.footer-brand address a { color: var(--ink-soft); text-decoration: underline; }
.footer-brand address a:hover { color: var(--ink); }
.footer-col h4 { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: var(--sp-4); }
.footer-col ul { display: flex; flex-direction: column; gap: var(--sp-3); }
.footer-col a { font-size: var(--text-sm); color: var(--ink-soft); text-decoration: none; }
.footer-col a:hover { color: var(--ink); }
.footer-bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-4); margin-top: var(--sp-9); padding-top: var(--sp-5);
  border-top: 1px solid var(--rule); font-size: var(--text-xs); color: var(--ink-faint);
}
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: var(--sp-5); }
.footer-bottom a { color: var(--ink-faint); text-decoration: none; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

.notice { padding: var(--sp-3) 0; background: var(--brand-soft); border-bottom: 1px solid var(--brand-line); font-size: var(--text-xs); color: var(--ink-soft); text-align: center; }

.scrolltop {
  position: fixed; right: clamp(1rem, 2.5vw, 2rem); bottom: clamp(1rem, 2.5vw, 2rem);
  z-index: 90; display: grid; place-items: center; width: 46px; height: 46px; padding: 0;
  color: var(--ink); background: color-mix(in srgb, var(--panel) 88%, transparent);
  backdrop-filter: blur(10px); border: 1px solid var(--rule-strong); border-radius: var(--radius);
  cursor: pointer; opacity: 0; transform: translateY(10px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out),
              background-color var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.scrolltop.is-visible { opacity: 1; transform: none; }
.scrolltop svg { width: 17px; height: 17px; }
@media (hover: hover) and (pointer: fine) {
  .scrolltop:hover { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
}

.consent {
  position: fixed; left: clamp(1rem, 2.5vw, 2rem); right: clamp(1rem, 2.5vw, 2rem);
  bottom: clamp(1rem, 2.5vw, 2rem); z-index: 120; max-width: 430px;
  background: color-mix(in srgb, var(--panel) 97%, transparent); backdrop-filter: blur(16px);
  border: 1px solid var(--rule-strong); border-top: 2px solid var(--brand); border-radius: var(--radius);
  box-shadow: 0 22px 48px -20px rgba(23,20,26,0.28);
  opacity: 0; transform: translateY(14px);
  transition: opacity 320ms var(--ease-out), transform 320ms var(--ease-out);
}
.consent.is-visible { opacity: 1; transform: none; }
.consent__inner { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-5); }
.consent__title { font-family: var(--font-body); font-size: var(--text-md); font-weight: 700; letter-spacing: 0; }
.consent__text { font-size: var(--text-xs); line-height: 1.55; color: var(--ink-soft); max-width: none; }
.consent__options { display: flex; flex-direction: column; gap: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--rule); }
.consent__option { display: flex; gap: var(--sp-3); align-items: flex-start; cursor: pointer; }
.consent__option input { margin-top: 0.28rem; width: 16px; height: 16px; accent-color: var(--brand); flex-shrink: 0; }
.consent__option span { display: flex; flex-direction: column; gap: 2px; font-size: var(--text-xs); color: var(--ink-faint); line-height: 1.5; }
.consent__option b { font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
.consent__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.consent__actions .btn { flex: 1 1 auto; min-width: 128px; }
.consent__actions .btn--ghost { flex: 0 0 auto; min-width: 0; padding-inline: var(--sp-3); }
@media (max-width: 520px) { .consent__actions .btn { flex: 1 1 100%; } }

/* --- Materialitaet --- */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: 0.026;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- Bewegung --- */
.js [data-reveal] { opacity: 0; transform: translateY(18px); }
[data-reveal].is-visible { opacity: 1; transform: none; transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
  .statement .w { opacity: 1; }
}


/* ==========================================================================
   Dunkle Fassung: Licht und Tiefe
   Ohne diese Ebenen bleibt eine dunkle Seite eine tote Flaeche. Das war der
   eigentliche Fehler der ersten Fassung.
   ========================================================================== */

/* Der Grund bekommt zwei sehr weiche Lichtquellen, die mitscrollen. */
body {
  background:
    radial-gradient(90% 55% at 78% 4%, rgba(146, 18, 33, 0.16) 0%, rgba(146, 18, 33, 0) 60%),
    radial-gradient(70% 45% at 8% 42%, rgba(200, 50, 74, 0.08) 0%, rgba(200, 50, 74, 0) 60%),
    var(--ground);
  background-attachment: fixed;
}

/* Abschnitte heben sich durch Lichtabfall voneinander ab, nicht durch Kanten. */
.section--raised {
  position: relative;
  background:
    radial-gradient(120% 80% at 14% 0%, rgba(146, 18, 33, 0.1) 0%, rgba(146, 18, 33, 0) 62%),
    var(--ground-2);
}

/* ==========================================================================
   Grosse Szenen
   ========================================================================== */

.scene { position: relative; height: 300vh; }
.scene--short { height: 220vh; }
.scene__sticky {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: grid; place-items: center;
}
.scene__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Vignette haelt den Blick in der Mitte und traegt die Textlesbarkeit. */
.scene__sticky::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(72% 62% at 50% 46%, rgba(20,16,20,0) 0%, rgba(20,16,20,0.72) 100%);
}

.scene__copy {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--container);
  margin-inline: auto; padding-inline: var(--gutter);
  text-align: center; pointer-events: none;
}
.scene__copy > * { pointer-events: auto; }
.scene__copy .eyebrow { margin-bottom: var(--sp-4); }
.scene__copy h2 {
  font-size: clamp(2rem, 5.4vw, 4rem); line-height: 1.02;
  max-width: 18ch; margin-inline: auto;
  text-shadow: 0 4px 40px rgba(20,16,20,0.85);
}
.scene__copy p {
  margin: var(--sp-5) auto 0; max-width: 44ch; color: var(--ink-soft);
  text-shadow: 0 2px 24px rgba(20,16,20,0.9);
}

/* Phasenanzeige */
.scene__phase {
  position: absolute; z-index: 3; top: calc(var(--header-h) + 20px);
  left: 0; right: 0; max-width: var(--container);
  margin-inline: auto; padding-inline: var(--gutter);
  display: flex; gap: 22px; justify-content: center;
  font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-faint); pointer-events: none;
}
.scene__phase span { transition: color 380ms var(--ease-out); }
.scene__phase span.on { color: var(--brand-text); font-weight: 700; }

/* ==========================================================================
   Leistungsliste
   Die Zeile ruecht beim Zeigen ein, der Balken darunter laeuft mit.
   ========================================================================== */

.services { border-top: 1px solid var(--rule); }
.service {
  position: relative;
  display: grid; grid-template-columns: 3.5rem 1fr auto; gap: var(--sp-5);
  align-items: baseline;
  padding: clamp(1.4rem, 2.6vw, 2.1rem) 0;
  border-bottom: 1px solid var(--rule);
  transition: padding-left var(--dur-base) var(--ease-out);
}
.service__num {
  font-family: var(--font-display); font-size: var(--text-md);
  color: var(--brand-text); font-variant-numeric: tabular-nums;
}
.service__body h3 { font-size: clamp(1.3rem, 2.6vw, 2rem); }
.service__body p { font-size: var(--text-sm); color: var(--ink-soft); margin-top: var(--sp-2); max-width: 52ch; }
.service__tag {
  align-self: center; flex-shrink: 0;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em;
  padding: 4px 10px; border-radius: var(--radius);
  color: var(--brand-text); border: 1px solid var(--brand-line);
  white-space: nowrap;
}
/* Die Lichtspur folgt dem Zeiger ueber die Zeile. */
.service__glow {
  position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: radial-gradient(30% 140% at var(--mx, 50%) 50%, rgba(146,18,33,0.28) 0%, rgba(146,18,33,0) 70%);
  transition: opacity var(--dur-base) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .service:hover { padding-left: var(--sp-5); }
  .service:hover .service__glow { opacity: 1; }
}
@media (max-width: 700px) {
  .service { grid-template-columns: 2.4rem 1fr; }
  .service__tag { grid-column: 2; justify-self: start; margin-top: var(--sp-3); }
}

/* ==========================================================================
   Feinschliff der dunklen Fassung
   ========================================================================== */

.axis { background: var(--panel); }
.axis:nth-child(2) { background: var(--panel-2); }
.axis:hover { background: var(--panel-hi); }

.brand-card { background: var(--panel); border-color: var(--rule); }
.brand-card::after {
  background: linear-gradient(to top,
    rgba(36,30,38,0.94) 0%, rgba(36,30,38,0.86) 26%,
    rgba(36,30,38,0.58) 48%, rgba(36,30,38,0.2) 70%, rgba(36,30,38,0) 88%);
}
.brand-card h3, .brand-card p, .brand-card .tag {
  text-shadow: 0 0 10px var(--panel), 0 0 20px var(--panel), 0 0 30px var(--panel);
}
.brand-card .tag { background: var(--brand-soft); color: var(--brand-text); }

.step { background: var(--panel); }
.step__num { color: var(--brand-text); }
.eyebrow { color: var(--brand-text); }
.axis__index { color: var(--brand-text); }
.figure b { color: var(--ink); }
.arrow-link:hover { color: var(--brand-text); }
.oversize { background: var(--ground-2); }
.oversize__word.brand { color: var(--brand-text); }
.oversize__word.hollow { -webkit-text-stroke: 1px var(--rule-strong); }
.statement .w.accent.lit { color: var(--brand-text); }
.swapword .slot u { color: var(--brand-text); }
.notice { background: var(--brand-soft); color: var(--ink-soft); }
.site-footer { background: var(--ground-2); }
.consent { background: color-mix(in srgb, var(--panel) 97%, transparent); }
.scrolltop { background: color-mix(in srgb, var(--panel) 90%, transparent); }

/* Materialitaet: auf dunklem Grund darf die Koernung etwas kraeftiger sein. */
body::after { opacity: 0.038; }


/* ==========================================================================
   VIERTE FASSUNG - zusaetzliche Ebenen
   ========================================================================== */

/* --- Ladevorhang mit Signet ---------------------------------------------
   Das Zeichen wird als Kontur gezeichnet, fuellt sich, dann faehrt der
   Vorhang auf. Laeuft nur beim ersten Aufruf, danach liegt ein Merker im
   Sitzungsspeicher. */
.curtain {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center;
  background: var(--ground);
  transition: opacity 560ms var(--ease-out), visibility 0s linear 560ms;
}
.curtain.is-done { opacity: 0; visibility: hidden; }
.curtain.is-instant { transition: none; }

.curtain__type {
  display: flex; align-items: baseline;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 5vw, 3.2rem);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--ink);
  white-space: nowrap;
}
.curtain__type .ch {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.42em);
  transition:
    opacity 380ms var(--ease-out) calc(var(--i) * 30ms),
    transform 460ms var(--ease-out) calc(var(--i) * 30ms);
}
.curtain.is-typing .ch { opacity: 1; transform: none; }

html:not(.js) .curtain { display: none; }

/* --- Lichtschein am Zeiger ----------------------------------------------
   Der groesste Zugewinn gegenueber der dritten Fassung. Ein weicher
   Bordeaux-Schein folgt dem Zeiger und laesst die dunklen Flaechen atmen. */
.pointer-light {
  position: fixed; top: 0; left: 0;
  width: 680px; height: 680px; margin: -340px 0 0 -340px;
  z-index: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(circle,
    rgba(200, 50, 74, 0.17) 0%,
    rgba(160, 30, 52, 0.075) 34%,
    rgba(146, 18, 33, 0) 68%);
  transition: opacity 700ms var(--ease-out);
  will-change: transform;
}
.pointer-light.is-on { opacity: 1; }

/* Der Lichtschein liegt auf z-index 0, alles Sichtbare darueber. Wichtig:
   hier NUR den z-index setzen. Ein position: relative auf dem Kopfbereich
   ueberschreibt sticky, und auf der Schaltflaeche fixed. Genau das war der
   Grund, warum der Kopf mitgescrollt ist und die Schaltflaeche verschwand. */
main, .site-footer, .notice { position: relative; z-index: 1; }
.site-header { z-index: 100; }
.scrolltop { z-index: 90; }
.consent { z-index: 120; }

/* --- Lesefortschritt ----------------------------------------------------- */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 200; pointer-events: none; }
.progress i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--brand), var(--brand-glow));
  box-shadow: 0 0 12px rgba(200, 50, 74, 0.6);
}

/* --- Seitenwechsel -------------------------------------------------------
   Wo der Browser View Transitions kann, blenden die Seiten ineinander.
   Wo nicht, passiert schlicht nichts. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: vtOut 200ms var(--ease-out) both; }
  ::view-transition-new(root) { animation: vtIn 320ms var(--ease-out) both; }
}
@keyframes vtOut { to { opacity: 0; transform: translateY(-10px); } }
@keyframes vtIn { from { opacity: 0; transform: translateY(12px); } }
.site-header { view-transition-name: kopf; }

/* --- Seitenkopf der Unterseiten ------------------------------------------ */
.pagehead {
  position: relative; overflow: hidden;
  padding-block: clamp(5rem, 12vw, 9rem) clamp(3rem, 6vw, 5rem);
  border-bottom: 1px solid var(--rule);
}
.pagehead__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.pagehead::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, var(--ground) 4%, rgba(20,16,20,0.62) 48%, rgba(20,16,20,0.08) 100%);
}
.pagehead .container { position: relative; z-index: 2; }
.pagehead h1 { font-size: var(--text-4xl); line-height: 1.02; max-width: 16ch; }
.pagehead p { margin-top: var(--sp-5); max-width: 52ch; color: var(--ink-soft); font-size: var(--text-lg); }

.crumb { display: flex; gap: var(--sp-3); align-items: center; font-size: var(--text-xs); color: var(--ink-faint); margin-bottom: var(--sp-5); }
.crumb a { text-decoration: none; color: var(--ink-faint); }
.crumb a:hover { color: var(--brand-text); }

/* --- Zwei Felder: Lichtvorhang statt stumpfer Kacheln -------------------- */
.axes { position: relative; isolation: isolate; }
.axis { position: relative; overflow: hidden; }
.axis__light {
  position: absolute; inset: 0; z-index: -1; opacity: 0.32;
  background: radial-gradient(76% 92% at var(--lx, 50%) var(--ly, 112%),
    rgba(200, 50, 74, 0.36) 0%, rgba(146, 18, 33, 0.08) 42%, rgba(146, 18, 33, 0) 72%);
  transition: opacity var(--dur-slow) var(--ease-out);
}
.axis:hover .axis__light { opacity: 1; }
.axis__grid {
  position: absolute; inset: 0; z-index: -1; opacity: 0.55;
  background-image:
    linear-gradient(rgba(245, 240, 241, 0.036) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245, 240, 241, 0.036) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(70% 82% at 50% 100%, #000 0%, transparent 74%);
  -webkit-mask-image: radial-gradient(70% 82% at 50% 100%, #000 0%, transparent 74%);
}

/* --- Karten mit Neigung --------------------------------------------------- */
.tilt { transform-style: preserve-3d; will-change: transform; transition: transform 380ms var(--ease-out), box-shadow 380ms var(--ease-out); }
.tilt-wrap { perspective: 900px; }

/* --- Kennzahlen kraeftiger ------------------------------------------------ */
.figure b { color: var(--ink); text-shadow: 0 0 26px rgba(200, 50, 74, 0.38); }

/* --- Herausgehobene Aussage ----------------------------------------------- */
.pull { position: relative; padding-block: clamp(2.5rem, 6vw, 4.5rem); border-block: 1px solid var(--rule); }
.pull p { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.5rem, 3.4vw, 2.6rem); line-height: 1.24; max-width: 24ch; }
.pull cite { display: block; margin-top: var(--sp-5); font-style: normal; font-size: var(--text-sm); color: var(--ink-faint); }

/* --- Zweispalter ---------------------------------------------------------- */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.duo--rev .duo__copy { order: 2; }
.duo__view { position: relative; width: 100%; height: min(52vh, 440px); }
.duo__view canvas { width: 100%; height: 100%; }
@media (max-width: 860px) {
  .duo { grid-template-columns: 1fr; gap: var(--sp-7); }
  .duo--rev .duo__copy { order: 0; }
  .duo__view { height: 40vh; }
}

/* --- Faktenraster --------------------------------------------------------- */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.fact { background: var(--panel); padding: clamp(1.4rem, 3vw, 2rem); display: flex; flex-direction: column; gap: var(--sp-3); }
.fact b { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 400; color: var(--brand-text); }
.fact p { font-size: var(--text-sm); color: var(--ink-soft); }

@media (prefers-reduced-motion: reduce) {
  .pointer-light { display: none; }
  .curtain__type .ch { transition: none; }
}


/* ==========================================================================
   Aufklappmenue der Unternehmensgruppe
   Fehlte, weil die dritte Fassung nur einfache Links hatte. Ohne diese
   Regeln steht das Menue dauerhaft offen und ueberlagert den Seitenkopf.
   ========================================================================== */

.nav__item { position: relative; }

.nav__chevron {
  width: 9px; height: 9px; flex-shrink: 0; opacity: 0.55;
  transition: transform var(--dur-base) var(--ease-out);
}
.nav__item:hover .nav__chevron,
.nav__item--open .nav__chevron { transform: rotate(180deg); opacity: 1; }

.nav__item::after {
  content: ""; position: absolute; top: 100%; right: 0;
  width: 340px; height: 14px;
}
.nav__menu {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  min-width: 340px;
  padding: var(--sp-3);
  background: var(--panel);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  box-shadow: 0 26px 54px -20px rgba(0, 0, 0, 0.8);
  display: flex; flex-direction: column; gap: 2px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              visibility 0s linear var(--dur-base);
}
.nav__item:hover .nav__menu,
.nav__item:focus-within .nav__menu,
.nav__item--open .nav__menu {
  opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
}

.nav__menu-note {
  padding: var(--sp-2) var(--sp-4) var(--sp-3);
  margin-bottom: var(--sp-2);
  border-bottom: 1px solid var(--rule);
  font-size: var(--text-xs); line-height: 1.45; color: var(--ink-faint);
  max-width: none;
}

.nav__menu-link {
  display: flex; flex-direction: column; gap: 3px;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius);
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.nav__menu-link:hover { background: var(--panel-2); }
.nav__menu-link b { font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
.nav__menu-link span { font-size: var(--text-xs); line-height: 1.45; color: var(--ink-faint); }

.nav__status {
  align-self: flex-start; margin-top: 2px;
  padding: 1px 7px;
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.05em;
  color: var(--brand-text);
  background: var(--brand-soft);
  border: 1px solid var(--brand-line);
  border-radius: var(--radius);
}

/* Aktiver Zweig bekommt eine Marke unter dem Wort. */
.nav__link[data-branch="true"] { color: var(--ink); }
.nav__link[data-branch="true"]::after {
  content: ""; position: absolute;
  left: var(--sp-3); right: var(--sp-3); bottom: 2px;
  height: 1px; background: var(--brand-glow);
}

@media (max-width: 1000px) {
  .nav__menu {
    position: static; min-width: 0; padding: 0 0 var(--sp-4);
    background: none; border: 0; box-shadow: none;
    opacity: 1; visibility: visible; transform: none; display: none;
  }
  .nav__item--open .nav__menu { display: flex; }
  .nav__menu-link { padding: var(--sp-3) 0 var(--sp-3) var(--sp-4); border-left: 1px solid var(--rule); border-radius: 0; }
  .nav__menu-note { padding-inline: 0; }
  .nav__item { border-bottom: 1px solid var(--rule); }
  .nav__link[data-branch="true"]::after { left: 0; right: auto; width: 22px; bottom: 10px; }
}


/* ==========================================================================
   Formulare
   Die erste Fassung war eine nackte Feldliste. Jetzt liegen sie auf einer
   eigenen Flaeche, sind nummeriert und die Felder reagieren sichtbar.
   ========================================================================== */

.formcard {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 4vw, 3rem);
  overflow: hidden;
}
.formcard::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(80% 60% at 8% 0%, rgba(200,50,74,0.12) 0%, rgba(146,18,33,0) 60%);
}
.formcard > * { position: relative; z-index: 1; }

.formstep {
  display: flex; align-items: baseline; gap: var(--sp-4);
  padding-bottom: var(--sp-4); margin-bottom: var(--sp-5);
  border-bottom: 1px solid var(--rule);
}
.formstep b {
  font-family: var(--font-display); font-size: var(--text-lg);
  font-weight: 400; color: var(--brand-text); font-variant-numeric: tabular-nums;
}
.formstep h3 { font-size: var(--text-md); font-family: var(--font-body); font-weight: 700; letter-spacing: 0; }
.formstep p { font-size: var(--text-sm); color: var(--ink-faint); margin-top: 2px; }

.field { display: flex; flex-direction: column; gap: var(--sp-2); }
.field > label { font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
.field__hint { font-size: var(--text-xs); color: var(--ink-faint); }
.field input[type="text"], .field input[type="email"], .field input[type="tel"],
.field select, .field textarea {
  width: 100%; padding: 0.8rem 0.9rem;
  background: var(--ground-2);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  color: var(--ink); font-size: var(--text-base);
  transition: border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-faint); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #5E5260; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--brand-glow);
  background: var(--panel-2);
  box-shadow: 0 0 0 3px rgba(200, 50, 74, 0.14);
}
.field textarea { min-height: 8rem; resize: vertical; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
.form-grid > .field--full { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

.field--checkbox { flex-direction: row; align-items: flex-start; gap: var(--sp-3); }
.field--checkbox input { margin-top: 0.3rem; width: 17px; height: 17px; accent-color: var(--brand); flex-shrink: 0; }
.field--checkbox label { font-weight: 400; font-size: var(--text-sm); color: var(--ink-soft); }
.field--checkbox a { color: var(--ink); }

/* --- Dateiablage ---------------------------------------------------------
   Eigene Flaeche statt des Systemknopfs, der auf einer dunklen Seite immer
   fremd aussieht. Das echte Feld liegt unsichtbar darueber. */
.drop {
  position: relative;
  display: grid; place-items: center; gap: var(--sp-3);
  padding: clamp(1.8rem, 5vw, 3rem);
  border: 1px dashed var(--rule-strong);
  border-radius: var(--radius);
  background: var(--ground-2);
  text-align: center;
  transition: border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}
.drop:hover, .drop.is-over { border-color: var(--brand-glow); background: var(--panel-2); }
.drop input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop__icon { width: 34px; height: 34px; color: var(--brand-text); }
.drop b { font-size: var(--text-md); }
.drop span { font-size: var(--text-sm); color: var(--ink-faint); }
.drop__list { display: flex; flex-direction: column; gap: var(--sp-2); width: 100%; margin-top: var(--sp-4); }
.drop__file {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: var(--panel); border: 1px solid var(--rule);
  border-radius: var(--radius); font-size: var(--text-sm); text-align: left;
}
.drop__file span:last-child { color: var(--ink-faint); font-variant-numeric: tabular-nums; }

/* --- Gruenderbereich ------------------------------------------------------ */
.founder { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.founder__portrait {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: var(--radius); border: 1px solid var(--rule-strong);
  background:
    radial-gradient(70% 50% at 50% 20%, rgba(200,50,74,0.16) 0%, rgba(146,18,33,0) 60%),
    var(--panel);
  display: grid; place-items: center;
}
.founder__portrait p { font-size: var(--text-xs); color: var(--ink-faint); text-align: center; padding: var(--sp-5); max-width: 24ch; }
.founder__quote {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(1.4rem, 3vw, 2.2rem); line-height: 1.26; max-width: 24ch;
}
.founder__name { margin-top: var(--sp-5); font-size: var(--text-sm); color: var(--ink-faint); }
@media (max-width: 800px) { .founder { grid-template-columns: 1fr; } }

/* Das Portraet fuellt die Flaeche, sobald die Datei vorhanden ist. Fehlt
   sie, entfernt das onerror-Attribut das Bild und der Hinweis bleibt
   stehen. Deshalb liegt der Hinweis darunter, nicht darueber. */
.founder__portrait picture, .founder__portrait img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.72) contrast(1.04) brightness(0.94);
  z-index: 2;
}
.founder__portrait::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    linear-gradient(to top, rgba(20,16,20,0.6) 0%, rgba(20,16,20,0) 46%),
    radial-gradient(80% 60% at 50% 10%, rgba(200,50,74,0.16) 0%, rgba(146,18,33,0) 62%);
}


/* ==========================================================================
   Leistungsraster
   Loest die nummerierte Liste ab. Nebeneinander statt untereinander, ohne
   01 02 03, und jede Kachel laesst sich aufklappen.
   ========================================================================== */

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(260px, 30vw, 340px), 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-top: var(--sp-8);
}

.tile {
  position: relative;
  background: var(--panel);
  overflow: hidden;
  isolation: isolate;
  transition: background-color var(--dur-base) var(--ease-out);
}
.tile.is-open { background: var(--panel-2); }

/* Lichtquelle folgt dem Zeiger innerhalb der Kachel. */
.tile__light {
  position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: radial-gradient(60% 80% at var(--tx, 50%) var(--ty, 50%),
    rgba(200, 50, 74, 0.3) 0%, rgba(146, 18, 33, 0.06) 44%, rgba(146, 18, 33, 0) 72%);
  transition: opacity var(--dur-base) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .tile:hover .tile__light { opacity: 1; }
}
.tile.is-open .tile__light { opacity: 0.75; }

.tile__head {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3);
  width: 100%; padding: clamp(1.5rem, 3vw, 2.2rem);
  background: transparent; border: 0; cursor: pointer; text-align: left;
  -webkit-appearance: none; appearance: none;
  color: inherit; font: inherit;
}
.tile__marks { display: flex; flex-wrap: wrap; gap: var(--sp-2); min-height: 1.4em; }
.tile__mark {
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em;
  padding: 3px 9px; border-radius: var(--radius);
  color: var(--brand-text); border: 1px solid var(--brand-line);
}
.tile__mark--demo { color: var(--ink-soft); border-color: var(--rule-strong); }

.tile__head h3 { font-size: clamp(1.15rem, 2.2vw, 1.5rem); line-height: 1.15; }
.tile__head p { font-size: var(--text-sm); color: var(--ink-soft); }

.tile__more {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  margin-top: auto; padding-top: var(--sp-3);
  font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--brand-text);
}
.tile__more svg { width: 14px; height: 14px; transition: transform var(--dur-base) var(--ease-out); }
.tile.is-open .tile__more svg { transform: rotate(135deg); }



.tile__source { display: none; }
.tile__more svg { width: 13px; height: 13px; transition: transform var(--dur-base) var(--ease-out); }
.tile:hover .tile__more svg { transform: translate(2px, -2px); }

/* ==========================================================================
   Grossansicht einer Leistung
   Waechst aus der angeklickten Kachel auf und laesst sich durchblaettern.
   ========================================================================== */

.sheet {
  width: min(1100px, 92vw);
  max-height: min(86vh, 800px);
  padding: 0;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-lg);
  background: var(--panel);
  color: var(--ink);
  overflow: visible;
  /* Ursprung ist die Mitte der angeklickten Kachel. Das Skript setzt die
     beiden Werte, der Rueckfall ist die Bildmitte. */
  transform-origin: var(--ox, 50vw) var(--oy, 50vh);
  transform: scale(0.9) translateY(14px);
  opacity: 0;
  transition: transform 300ms var(--ease-out), opacity 240ms var(--ease-out);
}
.sheet.is-open { transform: none; opacity: 1; }
.sheet::backdrop {
  background: rgba(10, 8, 11, 0.82);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 260ms var(--ease-out);
}
.sheet.is-open::backdrop { opacity: 1; }

.sheet__inner {
  position: relative;
  max-height: min(86vh, 800px);
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: var(--radius-lg);
  isolation: isolate;
}
.sheet__canvas {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%;
  opacity: 1; pointer-events: none;
}

.sheet__close {
  position: absolute; top: var(--sp-5); right: var(--sp-5); z-index: 3;
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border: 1px solid var(--rule-strong); border-radius: 50%;
  background: var(--ground-2); color: var(--ink-soft);
  cursor: pointer; -webkit-appearance: none; appearance: none;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.sheet__close svg { width: 18px; height: 18px; }
.sheet__close:hover { color: var(--ink); border-color: var(--brand-line); transform: rotate(90deg); }

.sheet__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  padding: clamp(2.4rem, 5vw, 3.6rem);
}
@media (max-width: 800px) {
  .sheet__grid { grid-template-columns: 1fr; gap: var(--sp-7); }
}

/* Beim Blaettern wandert der Inhalt in die Richtung, in die geblaettert
   wurde. Ohne das wirkt der Wechsel wie ein Sprung. */
@keyframes sheet-in-l { from { opacity: 0; transform: translateX(26px); } }
@keyframes sheet-in-r { from { opacity: 0; transform: translateX(-26px); } }
.sheet__grid.slide-l { animation: sheet-in-l 340ms var(--ease-out); }
.sheet__grid.slide-r { animation: sheet-in-r 340ms var(--ease-out); }

.sheet__side { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
.sheet__count {
  font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.14em;
  color: var(--ink-faint); font-variant-numeric: tabular-nums;
}
.sheet__marks { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.sheet__side h2 {
  font-size: clamp(1.7rem, 4vw, 2.7rem); line-height: 1.06;
  text-wrap: balance;
}
.sheet__teaser { color: var(--ink-soft); font-size: var(--text-md); }
.sheet__cta {
  margin-top: var(--sp-3);
  padding: 0.8rem 1.5rem;
  border: 1px solid var(--brand-line);
  border-radius: var(--radius);
  color: var(--ink);
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.sheet__cta:hover { background: var(--brand); border-color: var(--brand); color: #fff; }

.sheet__body { display: flex; flex-direction: column; gap: var(--sp-4); }
.sheet__list { display: flex; flex-direction: column; gap: var(--sp-4); margin-top: var(--sp-2); }
.sheet__list li {
  position: relative; padding-left: var(--sp-6);
  color: var(--ink-soft); line-height: 1.6;
  opacity: 0;
  animation: sheet-item 480ms var(--ease-out) forwards;
  animation-delay: var(--d, 0ms);
}
@keyframes sheet-item { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.sheet__list li::before {
  content: ""; position: absolute; left: 0; top: 0.72em;
  width: 14px; height: 1px; background: var(--brand-glow);
}

.sheet__demo {
  margin-top: var(--sp-3); padding: var(--sp-5);
  border: 1px dashed var(--rule-strong); border-radius: var(--radius);
  background: var(--ground-2);
}
.sheet__demo b {
  display: block; font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--brand-text); margin-bottom: var(--sp-2);
}
.sheet__demo p { font-size: var(--text-sm); color: var(--ink-faint); }

.sheet__nav {
  display: flex; justify-content: space-between; gap: var(--sp-4);
  border-top: 1px solid var(--rule);
  background: var(--ground-2);
}
.sheet__nav button {
  display: flex; align-items: center; gap: var(--sp-3);
  flex: 1; min-width: 0;
  padding: var(--sp-5) clamp(1.4rem, 3vw, 2.4rem);
  background: transparent; border: 0; cursor: pointer;
  color: var(--ink-faint); font: inherit; font-size: var(--text-sm);
  text-align: left;
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.sheet__nav button:last-child { justify-content: flex-end; text-align: right; }
.sheet__nav button:hover { color: var(--ink); background: var(--panel-2); }
.sheet__nav button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheet__nav svg { width: 18px; height: 18px; flex-shrink: 0; }

@media (prefers-reduced-motion: reduce) {
  .sheet, .sheet::backdrop { transition: none; }
  .sheet__grid.slide-l, .sheet__grid.slide-r { animation: none; }
  .sheet__list li { opacity: 1; animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Fassung 5
   Drei Kritikpunkte an Fassung 4, hier abgearbeitet:
   1. Zu viele gefüllte Kästen. Panels, Karten und Hover-Flächen erzeugen den
      Baukasten-Eindruck, den man von KI-generierten Seiten kennt.
      Antwort: Flächen raus, Struktur über Linien, Weißraum und Typografie.
   2. Zu lange Scrollstrecken. Hero und Szenen belegten je 300vh.
   3. Keine Fotografie. Jetzt fünf architektonische Motive, entsättigt und in
      Bordeaux getaucht, mit Bildnachweis.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --radius: 0px;                    /* Kanten statt Rundungen */
  --sp-section: clamp(5rem, 11vh, 9rem);
}

/* ── 1. Scrollstrecken. Gleiche Choreografie, kürzerer Weg ───────────────── */
.hero { height: 180vh; }
.scene { height: 170vh; }
.scene--short { height: 130vh; }

/* ── 2. Die zwei Felder: keine Kästen mehr ───────────────────────────────── */
.axes {
  border-block: 0;
  border-top: 1px solid var(--rule);
  gap: 0;
}
.axis,
.axis:nth-child(2),
.axis:hover {
  background: transparent;
}
.axis {
  padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 3vw, 3rem)
           clamp(2.5rem, 5vw, 4rem) 0;
  overflow: visible;
}
.axis + .axis {
  border-left: 1px solid var(--rule);
  padding-left: clamp(1.5rem, 3vw, 3rem);
}
/* Das Lichtfeld und das Raster waren Dekoration auf einer Fläche, die es
   nicht mehr gibt. */
.axis__light, .axis__grid { display: none; }
.axis::before { display: none; }

/* Die Feldnummer trägt jetzt die Gliederung, nicht mehr der Rahmen. */
.axis__index {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4vw, 3.25rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  text-transform: none;
  color: var(--rule-strong);
  line-height: 1;
  margin-bottom: var(--sp-2);
  transition: color 420ms var(--ease-out);
}
.axis:hover .axis__index { color: var(--brand-text); }
.axis h3 {
  font-size: clamp(1.375rem, 2vw, 1.75rem);
  letter-spacing: -0.015em;
  max-width: 18ch;
}
.axis p { max-width: 42ch; }
.axis ul { gap: var(--sp-3); }
.axis ul li { padding-left: var(--sp-5); }
.axis ul li::before { width: 14px; top: 0.72em; background: var(--brand-line); }

/* ── 3. Untermarken: Linienzeilen statt Kacheln ──────────────────────────── */
.card-grid { gap: 0; border-top: 1px solid var(--rule); }
.brand-card {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  min-height: 0;
  padding: clamp(2rem, 4vw, 3.25rem) 0;
  transition: padding-left 420ms var(--ease-out);
}
.brand-card::after { display: none; }
.brand-card:hover { padding-left: var(--sp-4); }
.brand-card__parent { color: var(--ink-faint); }

/* ── 4. Fotografie ───────────────────────────────────────────────────────── */
.figur {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--ground-2);
}
.figur img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(1) contrast(1.08) brightness(0.82);
}
/* Bordeaux liegt als Licht über dem Bild, nicht als Farbfilter darunter.
   soft-light hält die Zeichnung und färbt nur die Mitteltöne. */
.figur::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(147deg, var(--brand) 0%, transparent 62%);
  mix-blend-mode: soft-light;
  opacity: 0.9;
  pointer-events: none;
}
.figur--breit { height: clamp(280px, 42vw, 560px); }
.figur--hoch { aspect-ratio: 4 / 5; }

/* Bildnachweis. Pflicht bei Pexels, deshalb sichtbar und nicht nur im Alt-Text. */
.figur__nachweis {
  position: absolute; right: 0; bottom: 0;
  z-index: 2;
  padding: 6px 12px;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: rgba(245, 240, 241, 0.5);
  background: rgba(20, 16, 20, 0.55);
  backdrop-filter: blur(6px);
}
.figur__nachweis a { color: inherit; text-decoration: none; }
.figur__nachweis a:hover { color: var(--ink); text-decoration: underline; }

/* Volle Breite, bewusst ohne Container: das Bild ist die Zäsur. */
.bleed { width: 100%; margin-block: var(--sp-section); }

/* ── 5. Ruhigere Kanten an den übrigen Stellen ───────────────────────────── */
.shot { border-radius: 0; }
.section--raised { background: transparent; border-block: 1px solid var(--rule); }
.statement p { max-width: 24ch; }

/* ── 6. Mobil: nebeneinander wird untereinander ──────────────────────────── */
@media (max-width: 860px) {
  .axes { grid-template-columns: 1fr; }
  .axis + .axis {
    border-left: 0;
    border-top: 1px solid var(--rule);
    padding-left: 0;
  }
  .axis { padding-right: 0; }
  .hero { height: 150vh; }
  .scene { height: 140vh; }
  .scene--short { height: 115vh; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Fassung 5, zweiter Durchgang
   Kritik am ersten: die Elemente blieben leer. Grosse Ziffern ohne Aussage
   ("Feld 01"), Kennzahlen als duenne Zeilen, Fotos als Zaesur im Nichts.
   Vorbild ist jetzt die Trusters-Seite: kleine Kapitelnummer im Vorspann,
   die Ueberschrift ist ein ganzer Satz, darunter echter Inhalt.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Kapitelvorspann: Nummer klein, Aussage gross ────────────────────────── */
.kapitel {
  display: flex; align-items: baseline; gap: 0.7em;
  font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: var(--sp-4);
}
.kapitel__nr {
  font-family: var(--font-display);
  font-size: 1.05rem; font-weight: 400; letter-spacing: 0;
  color: var(--brand-text);
}
.kapitel::after {
  content: ""; flex: 1; height: 1px;
  background: var(--rule); margin-left: 0.4em;
}
.satz {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.2vw, 3rem);
  line-height: 1.12; letter-spacing: -0.02em;
  max-width: 20ch; margin-bottom: var(--sp-4);
}
.satz--breit { max-width: 26ch; }
.vorspann { max-width: 54ch; color: var(--ink-soft); font-size: var(--text-md); }

/* ── Kennzahlen: gross statt beilaeufig ──────────────────────────────────── */
.zahlen {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-block: 1px solid var(--rule);
}
.zahlen__feld { padding: clamp(2rem, 4vw, 3.25rem) 0; }
.zahlen__feld + .zahlen__feld {
  border-left: 1px solid var(--rule);
  padding-left: clamp(1.25rem, 2.5vw, 2.5rem);
}
.zahlen__wert {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 6vw, 5rem);
  font-weight: 400; line-height: 0.92; letter-spacing: -0.035em;
  color: var(--ink);
}
.zahlen__wert sup {
  font-size: 0.36em; vertical-align: super;
  color: var(--brand-text); letter-spacing: 0;
}
.zahlen__label {
  display: block; margin-top: var(--sp-3);
  font-size: var(--text-sm); color: var(--ink-faint);
  letter-spacing: 0.02em;
}
@media (max-width: 780px) {
  .zahlen { grid-template-columns: 1fr 1fr; }
  .zahlen__feld:nth-child(3) { border-left: 0; padding-left: 0; }
  .zahlen__feld:nth-child(n+3) { border-top: 1px solid var(--rule); }
}

/* ── Leistungsliste: neun Zeilen, keine Kacheln ──────────────────────────── */
.leistungen { border-top: 1px solid var(--rule); }
.leistung {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 20rem) 1fr;
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: baseline;
  padding: clamp(1.1rem, 2vw, 1.6rem) 0;
  border-bottom: 1px solid var(--rule);
  transition: padding-left 380ms var(--ease-out), background-color 380ms var(--ease-out);
}
.leistung:hover { padding-left: var(--sp-4); background: rgba(146, 18, 33, 0.05); }
.leistung__nr {
  font-family: var(--font-display); font-size: var(--text-sm);
  color: var(--ink-faint); font-variant-numeric: tabular-nums;
}
.leistung__titel {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  letter-spacing: -0.012em;
}
.leistung__text { color: var(--ink-soft); font-size: var(--text-sm); }
.leistung__marke {
  display: inline-block; margin-left: 0.6em;
  padding: 2px 8px; font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--brand-text); border: 1px solid var(--brand-line);
  vertical-align: middle;
}
@media (max-width: 820px) {
  .leistung { grid-template-columns: 2.5rem 1fr; }
  .leistung__text { grid-column: 2; }
}

/* ── Schritte im Vorgehen ────────────────────────────────────────────────── */
.schritte { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.schritt {
  display: grid; grid-template-columns: 5rem 1fr;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: clamp(1.5rem, 3vw, 2.25rem) 0;
  border-bottom: 1px solid var(--rule);
}
.schritt__nr {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1; color: var(--rule-strong);
}
.schritt h3 { font-size: var(--text-lg); margin-bottom: var(--sp-2); }
.schritt p { color: var(--ink-soft); font-size: var(--text-sm); max-width: 58ch; }
@media (max-width: 620px) { .schritt { grid-template-columns: 1fr; gap: var(--sp-2); } }

/* ── Sektion mit Bild und Text nebeneinander ─────────────────────────────── */
.mitbild {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.mitbild--gedreht > .figur { order: -1; }
.mitbild .figur { aspect-ratio: 4 / 3; height: auto; }
@media (max-width: 900px) {
  .mitbild { grid-template-columns: 1fr; }
  .mitbild--gedreht > .figur { order: 0; }
}

/* ── Fassungsumschalter ──────────────────────────────────────────────────── */
.fassung {
  /* Links unten, weil rechts unten der Sprung nach oben sitzt. */
  position: fixed; left: 16px; bottom: 16px; z-index: 60;
  display: flex; align-items: center; gap: 2px;
  padding: 4px; border: 1px solid var(--rule-strong);
  background: rgba(20, 16, 20, 0.86);
  backdrop-filter: blur(10px);
  font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase;
}
.fassung__titel { padding: 0 8px 0 6px; color: var(--ink-faint); }
.fassung a {
  padding: 7px 11px; color: var(--ink-soft); text-decoration: none;
  transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out);
}
.fassung a:hover { background: var(--panel); color: var(--ink); }
.fassung a[aria-current="true"] { background: var(--brand); color: #fff; }
@media (max-width: 620px) { .fassung { left: 10px; bottom: 10px; font-size: 0.625rem; } }