/* ==========================================================================
   DROST Consulting  ·  Designsystem
   Richtung "Bestand": dunkler Graphit, Werksatz-Serif fuer Ueberschriften,
   Bordeaux als einzige Akzentfarbe.

   Gliederung
     01  Schriften
     02  Tokens
     03  Reset und Grundlagen
     04  Typografie
     05  Layout-Primitive
     06  Kopfbereich und Navigation
     07  Fussbereich
     08  Schaltflaechen und Links
     09  Sektionen und Komponenten
     10  Formulare
     11  Bewegung
   ========================================================================== */


/* ==========================================================================
   01  SCHRIFTEN
   Selbst gehostet. Keine Anfrage an Google im Betrieb, deshalb ist fuer die
   Schriften kein Einwilligungsbanner erforderlich.
   ========================================================================== */

@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;
}


/* ==========================================================================
   02  TOKENS
   Die Seite hat genau eine Farbwelt. Es gibt keinen Hell-Modus, weil die
   Wirkung der Richtung "Bestand" auf dem dunklen Grund beruht.
   ========================================================================== */

:root {
  /* --- Flaechen. Neutraltoene mit leichtem Rot-Bias, damit sie zum
         Bordeaux gehoeren statt danebenzustehen. --- */
  --ground:        #141011;
  --ground-raised: #1A1516;
  --panel:         #1D1819;
  --panel-alt:     #241E1F;
  --panel-high:    #2B2426;

  /* --- Schrift --- */
  --ink:        #F0EAE9;
  --ink-soft:   #A79A9D;
  --ink-faint:  #7B6E71;

  /* --- Linien --- */
  --rule:        #2E2728;
  --rule-strong: #43393B;

  /* --- Akzent. Exakt das Bordeaux aus dem Logo.
         Es traegt als FLAECHE, nicht als Schriftfarbe: Weiss auf #921221
         erreicht 9:1, waehrend #921221 als Text auf dem dunklen Grund nur
         2,1:1 schafft. Deshalb Flaechen in Markenrot, Text in Ink. --- */
  --brand:       #921221;
  --brand-lift:  #A91526;
  --brand-wash:  rgba(146, 18, 33, 0.14);
  --brand-line:  rgba(146, 18, 33, 0.5);
  --brand-edge:  rgba(146, 18, 33, 0.85);

  /* Nur dort, wo tatsaechlich farbige Schrift auf dunklem Grund noetig ist.
     Erreicht 6,6:1 gegen den Grund. Sparsam einsetzen. */
  --brand-text:  #E07A86;

  --on-brand:    #FFFFFF;

  /* Rueckwaertskompatible Aliasse, damit bestehende Regeln weiter greifen. */
  --accent:       var(--brand);
  --accent-hover: var(--brand-lift);
  --accent-wash:  var(--brand-wash);
  --accent-line:  var(--brand-line);

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

  /* --- Typografische Skala. Fluid zwischen 380px und 1400px. --- */
  --text-xs:  0.75rem;
  --text-sm:  0.8125rem;
  --text-base: 1rem;
  --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.5rem, 1.53rem + 4.1vw, 4.625rem);

  /* --- Abstaende. Vierer-Basis. --- */
  --sp-1:  0.25rem;
  --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;
  --sp-10: 5.5rem;
  --sp-11: 7rem;

  /* Vertikaler Sektionsrhythmus */
  --section-y: clamp(4rem, 8vw, 7.5rem);

  /* --- Form. Durchgehend nahezu scharfe Kanten, passend zur
         architektonischen Anmutung. Genau ein Radius im ganzen Projekt. --- */
  --radius: 2px;

  /* --- Raster --- */
  --measure: 66ch;
  --container: 1240px;
  --container-narrow: 820px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);

  /* --- Bewegung. Enter langsamer als Exit, nie linear. --- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 620ms;

  --header-h: 76px;
}


/* ==========================================================================
   03  RESET UND GRUNDLAGEN
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* Lenis uebernimmt das Scrollen, sobald es aktiv ist. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

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

img, svg, video { display: block; max-width: 100%; height: auto; }

/* Ein eigenes display in einer Klasse schlaegt sonst das hidden-Attribut,
   weil Autorenregeln vor dem Browserstandard greifen. Betrifft alles, was
   per hidden gesteuert wird: Einwilligungsdialog, dessen Optionen und die
   Schaltflaeche zurueck nach oben. */
[hidden] { display: none !important; }

ul, ol { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }

button, input, select, textarea { font: inherit; color: inherit; }

/* Ohne diese Grundregel bekommt jeder Link ohne eigene Klasse das blaue
   Browserstandard-Blau, was auf dem dunklen Grund sofort auffaellt. */
a { color: inherit; text-decoration-color: var(--brand-line); text-underline-offset: 0.22em; }
a:hover { text-decoration-color: var(--brand-text); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius);
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--accent); 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(--accent);
  color: #fff;
  font-weight: 500;
  border-radius: var(--radius);
  transform: translateY(-160%);
  transition: transform var(--dur-base) var(--ease-out);
}
.skip-link:focus { transform: none; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}


/* ==========================================================================
   04  TYPOGRAFIE
   Ueberschriften in der Serif, Fliesstext in der Grotesk. Die optische
   Groessenachse von Newsreader wird ueber font-optical-sizing genutzt.
   ========================================================================== */

.display,
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;
  color: var(--ink);
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); line-height: 1.2; }

h4 {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.004em;
}

/* Hervorhebung innerhalb einer Ueberschrift: Kursiv derselben Familie,
   niemals ein Wechsel auf eine andere Schrift. */
.display em, h1 em, h2 em, h3 em {
  font-style: italic;
  color: var(--brand-text);
  /* Kursive Unterlaengen brauchen Luft, sonst schneidet die Zeile sie ab. */
  line-height: 1.15;
  padding-bottom: 0.04em;
}

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); }
.body-sm { font-size: var(--text-sm); }

/* Kleines Auszeichnungslabel. Bewusst sparsam eingesetzt:
   hoechstens eines pro drei Sektionen. */
.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--brand-text);
}

.prose > * + * { margin-top: var(--sp-5); }
.prose h2 { margin-top: var(--sp-8); }
.prose h3 { margin-top: var(--sp-7); }
.prose h2 + *, .prose h3 + * { margin-top: var(--sp-4); }
.prose a { color: var(--ink); text-decoration: underline; text-underline-offset: 0.22em; text-decoration-color: var(--accent-line); }
.prose a:hover { text-decoration-color: var(--accent); }
.prose ul { display: flex; flex-direction: column; gap: var(--sp-3); max-width: var(--measure); }
.prose ul li { position: relative; padding-left: var(--sp-5); }
.prose ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 8px; height: 1px;
  background: var(--accent);
}
.prose strong { font-weight: 700; color: var(--ink); }


/* ==========================================================================
   05  LAYOUT-PRIMITIVE
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section--raised { background: var(--ground-raised); }
.section + .section--raised,
.section--raised + .section { border-top: 1px solid var(--rule); }

.stack { display: flex; flex-direction: column; }
.stack-3 { gap: var(--sp-3); }
.stack-4 { gap: var(--sp-4); }
.stack-5 { gap: var(--sp-5); }
.stack-6 { gap: var(--sp-6); }
.stack-8 { gap: var(--sp-8); }

.cluster { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; }

/* Sektionskopf. Ueberschrift und Begleittext stehen untereinander,
   nicht als geteilter Kopf mit freischwebendem Absatz rechts. */
.section-head { display: flex; flex-direction: column; gap: var(--sp-4); max-width: 62ch; }
.section-head + * { margin-top: var(--sp-8); }


/* ==========================================================================
   06  KOPFBEREICH UND NAVIGATION
   Die Untermarken stehen rechts hinter einem Trenner. Sie sind damit
   sichtbar kein regulaerer Leistungspunkt.
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--ground) 88%, 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 { display: flex; align-items: center; gap: var(--sp-3); flex-shrink: 0; }
.brand__logo { height: 26px; width: auto; }
.brand:focus-visible { outline-offset: 6px; }

.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__link[aria-current="true"],
.nav__link[data-branch="true"] { color: var(--ink); }

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

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

/* --- Aufklappmenue --- */
.nav__item { position: relative; }

.nav__menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 330px;
  padding: var(--sp-3);
  background: var(--panel);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  box-shadow: 0 24px 48px -18px rgba(0, 0, 0, 0.72);
  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--has-menu:hover .nav__menu,
.nav__item--has-menu:focus-within .nav__menu,
.nav__item--open .nav__menu {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.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-alt); }
.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);
}

/* --- Abgesetzte Ebene der Untermarken --- */
.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__menu--group { min-width: 340px; }
.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);
}
.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(--accent-wash);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius);
}

.header-cta { flex-shrink: 0; }

/* Dieselbe Schaltflaeche mit demselben Text, nur an der Stelle, die zur
   jeweiligen Breite passt. Nie beide gleichzeitig sichtbar.
   Die Verschachtelung ist noetig, weil .btn weiter unten in dieser Datei
   dieselbe Spezifitaet haette und dann gewinnen wuerde. */
.nav .nav__mobile-cta { display: none; }

/* --- Mobiles Menue --- */
.nav-toggle {
  display: none;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: none;
  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) var(--ease-out);
}
.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: 1080px) {
  .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__item { border-bottom: 1px solid var(--rule); }
  .nav__link {
    justify-content: space-between;
    padding: var(--sp-4) 0;
    font-size: var(--text-md);
  }
  .nav__link[data-branch="true"]::after { left: 0; right: auto; width: 22px; bottom: 10px; }

  .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-link:hover { background: none; }

  .nav__divider { display: none; }
  .nav__menu-note { padding-inline: 0; }
  .nav__group-link { color: var(--ink-soft); }

  .nav .nav__mobile-cta { display: inline-flex; margin-top: var(--sp-6); align-self: flex-start; }
}


/* ==========================================================================
   07  FUSSBEREICH
   ========================================================================== */

.site-footer {
  background: var(--ground-raised);
  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(3, 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 { color: var(--ink-soft); }
.footer-brand address a {
  color: var(--ink-soft);
  text-decoration: underline;
  text-decoration-color: var(--brand-line);
  transition: color var(--dur-fast) var(--ease-out);
}
.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;
  transition: color var(--dur-fast) var(--ease-out);
}
.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; }
.footer-bottom a:hover { color: var(--ink-soft); }

@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; }
}


/* ==========================================================================
   08  SCHALTFLAECHEN UND LINKS
   ========================================================================== */

.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;
  /* Ohne diese Zeile erbt ein <button> den hellen Systemhintergrund und
     die weisse Beschriftung verschwindet darauf. */
  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(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-hover); }

.btn--outline { border-color: var(--rule-strong); color: var(--ink); }
.btn--outline:hover { border-color: var(--brand-edge); color: var(--ink); }

.btn--ghost { color: var(--ink-soft); padding-inline: 0; }
.btn--ghost:hover { color: var(--ink); }

.btn--sm { padding: 0.5rem 1rem; font-size: var(--text-xs); }

/* Textlink mit Pfeil. Der Pfeil bewegt sich beim Hover, weil die
   Bewegung die Richtung des Links anzeigt. */
.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-text); }
.arrow-link:hover svg { transform: translateX(4px); }


/* ==========================================================================
   09  SEKTIONEN UND KOMPONENTEN
   ========================================================================== */

/* --- Hero ---------------------------------------------------------------
   Vollflaechig. Der Rauch traegt die Flaeche, der Satz steht darauf.
   Die Kennzahlen sitzen als Sockel im selben Bild, damit die Historie
   sofort neben der Aussage steht und nicht erst nach einem Scroll.
   ------------------------------------------------------------------------ */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: min(92vh, 880px);
  margin-top: calc(var(--header-h) * -1);
  padding-top: var(--header-h);
  overflow: clip;
  isolation: isolate;
}

/* Der Shader. Bis WebGL antwortet, traegt ein Verlauf dieselbe Komposition,
   damit beim Laden nichts aufblitzt. */
.hero__canvas {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  display: block;
  background:
    radial-gradient(96% 70% at 84% 96%, rgba(146, 18, 33, 0.5) 0%, rgba(146, 18, 33, 0) 62%),
    radial-gradient(80% 60% at 22% 12%, rgba(146, 18, 33, 0.22) 0%, rgba(146, 18, 33, 0) 58%),
    linear-gradient(178deg, #1E1719 0%, var(--ground) 68%);
  opacity: 0;
  transition: opacity 1200ms var(--ease-out);
}
.hero__canvas[data-ready="true"],
.no-js .hero__canvas { opacity: 1; }

/* Lesbarkeitsschleier. Ohne ihn kaempft der Satz gegen die hellen Grate. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to top,
    var(--ground) 0%,
    rgba(20, 16, 17, 0.86) 24%,
    rgba(20, 16, 17, 0.42) 58%,
    rgba(20, 16, 17, 0.16) 100%
  );
}

.hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  padding-block: clamp(4rem, 12vw, 8rem) clamp(2.5rem, 5vw, 4rem);
  max-width: var(--container);
  margin-inline: auto;
  width: 100%;
  padding-inline: var(--gutter);
}

.hero h1 {
  font-size: var(--text-4xl);
  line-height: 1.02;
  max-width: 15ch;
  letter-spacing: -0.02em;
}

/* Die Hervorhebung traegt keine Farbe, weil das Logo-Rot als Schrift auf
   diesem Grund zu wenig Kontrast haette. Sie wird kursiv gesetzt und
   bekommt eine Kante in Markenrot. */
.hero h1 em {
  color: var(--ink);
  font-style: italic;
  position: relative;
  padding-bottom: 0.06em;
  background-image: linear-gradient(var(--brand), var(--brand));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 3px;
}
.hero h1 em.is-drawn { background-size: 100% 3px; }

.hero__lead { max-width: 48ch; color: var(--ink-soft); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-5); align-items: center; }

/* Kennzahlensockel im Hero */
.hero__figures {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--rule);
  backdrop-filter: blur(6px);
  background: rgba(20, 16, 17, 0.42);
}
.hero__figures .figure { border-right: 1px solid var(--rule); }
.hero__figures .figure:last-child { border-right: 0; }

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

/* --- Materialitaet ------------------------------------------------------
   Eine sehr feine Koernung ueber der gesamten Seite. Sie kostet nichts,
   nimmt den Flaechen aber das Digitale und verhindert Streifenbildung in
   den dunklen Verlaeufen.
   ------------------------------------------------------------------------ */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.032;
  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");
}

/* Sektionen bekommen einen sehr schwachen Lichtabfall, damit die Seite
   beim Scrollen nicht als eine einzige flache Flaeche liest. */
.section--raised {
  position: relative;
  background:
    radial-gradient(120% 78% at 12% 0%, rgba(146, 18, 33, 0.07) 0%, rgba(146, 18, 33, 0) 60%),
    var(--ground-raised);
}

/* Abschlussbereich mit zweiter, sehr ruhiger Rauchflaeche. */
.section--atmos {
  position: relative;
  overflow: clip;
  isolation: isolate;
}
.section--atmos .section__canvas {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1400ms var(--ease-out);
}
.section--atmos .section__canvas[data-ready="true"] { opacity: 0.62; }
.section--atmos::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to right,
    var(--ground) 0%,
    rgba(20, 16, 17, 0.8) 46%,
    rgba(20, 16, 17, 0.3) 100%
  );
}

/* --- Zwei-Felder-Raster. Uebernimmt das Achsen-Prinzip: die beiden
       Kerngeschaeftsfelder teilen die Flaeche sichtbar in zwei Haelften.
       Beide Haelften bleiben dunkel, unterschieden nur durch Tonwert,
       damit die Seite eine einzige Farbwelt behaelt. --- */
.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(--panel-alt); }
.axis + .axis { border-left: 1px solid var(--rule); }
.axis:hover { background: var(--panel-high); }

/* Bordeaux-Kante oben, die beim Hover aufwaechst. */
.axis::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  height: 2px;
  width: 0;
  background: var(--accent);
  transition: width var(--dur-slow) var(--ease-out);
}
.axis:hover::before { width: 100%; }

.axis__index {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--brand-text);
}
.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(--accent-line);
}
.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); }
}

/* --- Kennzahlenband --- */
.figures {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-block: 1px solid var(--rule);
}
.figure {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: clamp(1.25rem, 2.6vw, 2rem) clamp(1rem, 2.4vw, 1.75rem);
  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;
  letter-spacing: -0.01em;
}
.figure span { font-size: var(--text-xs); color: var(--ink-faint); }

@media (max-width: 720px) {
  .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); }
}

/* --- Karte --- */
.card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  transition: border-color var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out);
}
.card:hover { border-color: var(--rule-strong); background: var(--panel-alt); }
.card h3 { font-size: var(--text-lg); }
.card p { font-size: var(--text-sm); color: var(--ink-soft); }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(240px, 30vw, 320px), 1fr));
  gap: var(--sp-5);
}

/* --- Prozessschritte. Nummerierung ist hier zulaessig, weil die
       Reihenfolge tatsaechlich Information traegt. --- */
.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(--ground);
}
.step__num {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 400;
  color: var(--brand-text);
  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); }
}

/* --- Anonymisierte Fallbeispiele --- */
.case {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--panel);
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.case__meta {
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.case p { font-size: var(--text-sm); color: var(--ink-soft); }
.case__result {
  padding-top: var(--sp-4);
  border-top: 1px solid var(--rule);
  font-size: var(--text-sm);
  color: var(--ink);
}

/* --- Hinweisbanner fuer die Vorschauphase --- */
.notice {
  padding: var(--sp-3) 0;
  background: var(--accent-wash);
  border-bottom: 1px solid var(--accent-line);
  font-size: var(--text-xs);
  color: var(--ink-soft);
  text-align: center;
}

/* --- Untermarken-Platzhalterseite --- */
.brandmark {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--rule);
}
.brandmark__name {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 400;
  line-height: 1.1;
}
.brandmark__parent { font-size: var(--text-xs); color: var(--ink-faint); letter-spacing: 0.04em; }


/* ==========================================================================
   10  FORMULARE
   Label immer ueber dem Feld, Fehlertext darunter. Kein Platzhalter
   als Ersatz fuer ein Label.
   ========================================================================== */

.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 input[type="url"],
.field select,
.field textarea {
  width: 100%;
  padding: 0.75rem 0.875rem;
  background: var(--panel);
  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);
}
.field input::placeholder,
.field textarea::placeholder { color: var(--ink-faint); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #55494B; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--panel-alt);
}
.field textarea { min-height: 8rem; resize: vertical; }

.field[data-invalid="true"] input,
.field[data-invalid="true"] textarea,
.field[data-invalid="true"] select { border-color: var(--accent); }

.field__error { font-size: var(--text-sm); color: var(--brand-text); }

.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(--accent); flex-shrink: 0; }
.field--checkbox label { font-weight: 400; font-size: var(--text-sm); color: var(--ink-soft); }
.field--checkbox a { color: var(--ink); text-decoration: underline; text-underline-offset: 0.2em; }

.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; } }

.form-status {
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--rule-strong);
  border-left-width: 2px;
  border-left-color: var(--accent);
  border-radius: var(--radius);
  background: var(--panel);
  font-size: var(--text-sm);
}


/* ==========================================================================
   11  BEWEGUNG
   Jede Bewegung hat einen Grund: Hierarchie, Reihenfolge oder Rueckmeldung.
   Wer weniger Bewegung eingestellt hat, bekommt keine.
   ========================================================================== */

/* Nur verstecken, wenn JavaScript laeuft. Ohne JS steht der Inhalt sofort
   vollstaendig da, statt unsichtbar zu bleiben. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
}
.js [data-hero-item] { opacity: 0; }
.js [data-hero-heading] { visibility: hidden; }
[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], .js [data-hero-item] { opacity: 1; transform: none; }
  .js [data-hero-heading] { visibility: visible; }
}


/* --- Grundgeruest der Seite: Fussbereich bleibt unten --- */
.page {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}
.page > main { flex: 1; }


/* ==========================================================================
   12  ZURUECK NACH OBEN
   ========================================================================== */

.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),
              border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}
.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); }
}
.scrolltop:active { transform: translateY(1px); }


/* ==========================================================================
   13  EINWILLIGUNG
   Zustimmen und Ablehnen sind bewusst gleich gross und gleich sichtbar.
   ========================================================================== */

.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) 96%, transparent);
  backdrop-filter: blur(16px);
  border: 1px solid var(--rule-strong);
  border-top: 2px solid var(--brand);
  border-radius: var(--radius);
  box-shadow: 0 28px 60px -22px rgba(0, 0, 0, 0.8);
  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__head { display: flex; flex-direction: column; gap: var(--sp-2); }
.consent__title { font-size: var(--text-md); font-family: var(--font-body); 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__text a { color: var(--ink); text-decoration: underline; text-underline-offset: 0.2em; }

.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 input:disabled { cursor: not-allowed; }
.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%; }
}


/* ==========================================================================
   14  MASKIERTE ZEILEN
   SplitText legt pro Zeile einen Rahmen an. Der Rahmen schneidet ab,
   die Zeile faehrt darin hoch.
   ========================================================================== */

.hero-line { will-change: transform; }
.hero h1 .hero-line { padding-bottom: 0.06em; }


/* ==========================================================================
   15  BILDER
   Die Aufnahmen liegen bereits entsaettigt vor. Die Einfaerbung passiert
   hier, damit die Bildwelt mit einer einzigen Zeile zur Marke gehoert und
   nicht mit einem eigenen Blaustich dagegen arbeitet.
   ========================================================================== */

.shot {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  isolation: isolate;
  background: var(--panel);
}
.shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.74) contrast(1.06);
}

/* Bordeaux in die Mitteltoene. soft-light laesst Lichter und Tiefen stehen,
   dadurch bleibt die Zeichnung der Fassade erhalten. */
.shot::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--brand);
  mix-blend-mode: soft-light;
  opacity: 0.85;
  pointer-events: none;
}

/* Abdunkeln zur Kante, damit das Bild in die Flaeche laeuft statt
   als Rechteck aufzuliegen. */
.shot::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    to top,
    rgba(20, 16, 17, 0.72) 0%,
    rgba(20, 16, 17, 0.12) 46%,
    rgba(20, 16, 17, 0.34) 100%
  );
  pointer-events: none;
}

.shot--wide { aspect-ratio: 2 / 1; }
.shot--tall { aspect-ratio: 3 / 4; }
.shot--square { aspect-ratio: 4 / 3; }

/* Bildunterschrift, wenn sie tatsaechlich etwas erklaert. */
.shot__note {
  position: absolute;
  z-index: 3;
  left: clamp(1rem, 2vw, 1.5rem);
  bottom: clamp(0.875rem, 2vw, 1.25rem);
  margin: 0;
  max-width: 30ch;
  font-size: var(--text-xs);
  color: rgba(240, 234, 233, 0.72);
}

/* Zweispaltige Sektion mit Bild. Bricht bei schmaler Breite in die
   natuerliche Lesereihenfolge um. */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.split__media { position: relative; }

@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; gap: var(--sp-7); }
}

/* Vollbreites Band zwischen zwei Sektionen. Traegt die Parallaxe. */
.band {
  position: relative;
  overflow: hidden;
  height: clamp(220px, 34vw, 420px);
  border-block: 1px solid var(--rule);
  isolation: isolate;
}
.band img {
  position: absolute;
  inset: -12% 0;
  width: 100%;
  height: 124%;
  object-fit: cover;
  filter: brightness(0.66) contrast(1.08);
}
.band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--brand);
  mix-blend-mode: soft-light;
  opacity: 0.9;
}
.band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    100deg,
    var(--ground) 4%,
    rgba(20, 16, 17, 0.55) 42%,
    rgba(20, 16, 17, 0.2) 100%
  );
}
.band__quote {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: flex;
  align-items: center;
}
.band__quote p {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--text-xl);
  line-height: 1.25;
  max-width: 22ch;
  color: var(--ink);
}

/* Fassungsumschalter, nur in der Vorschau. Links unten. */
.fassung { position: fixed; left: 16px; bottom: 16px; z-index: 60; display: flex; align-items: center; gap: 2px; padding: 4px; border: 1px solid var(--rule-strong, rgba(255,255,255,0.2)); 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, #9a9296); }
.fassung a { padding: 7px 11px; color: var(--ink-soft, #d8d2d4); text-decoration: none; }
.fassung a:hover { background: var(--panel, #2a2226); color: var(--ink, #fff); }
.fassung a[aria-current="true"] { background: var(--brand, #921221); color: #fff; }
@media (max-width: 620px) { .fassung { left: 10px; bottom: 10px; font-size: 0.625rem; } }