/* ============================================================
   D.Sign — dsign-dunkel
   Ein Konzept, eine Fläche, zwei Akzente: Flamme (warm) und Gas (kalt).
   Der Akzent gehört Aktionen und Messwerten. Nie Dekoration.
   ============================================================ */

/* ---------- Schriften, selbst gehostet (OFL, siehe LIZENZEN.md) ---------- */
@font-face {
  font-family: 'Bricolage';
  src: url('../fonts/bricolage-latin.woff2') format('woff2');
  font-weight: 300 800; font-stretch: 75% 100%; font-display: swap;
  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: 'Bricolage';
  src: url('../fonts/bricolage-latin-ext.woff2') format('woff2');
  font-weight: 300 800; font-stretch: 75% 100%; font-display: swap;
  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: 'Newsreader';
  src: url('../fonts/newsreader-latin.woff2') format('woff2');
  font-weight: 300 600; font-display: swap;
  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';
  src: url('../fonts/newsreader-latin-ext.woff2') format('woff2');
  font-weight: 300 600; font-display: swap;
  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;
}

/* Registriert, damit der Gewerk-Wechsel den Akzent weich überblendet.
   Ohne @property-Unterstützung springt die Farbe — das ist der Fallback. */
@property --akzent { syntax: '<color>'; inherits: true; initial-value: oklch(0.74 0.18 48); }

:root {
  /* Fläche: tiefes Petrol. Kein Schwarz — Werkstattnacht hat einen Ton. */
  --grund:      oklch(0.205 0.031 205);
  --grund-tief: oklch(0.158 0.028 205);
  --grund-hi:   oklch(0.253 0.033 205);
  --linie:      oklch(0.345 0.030 205);
  --linie-fein: oklch(0.285 0.026 205);

  /* Schrift: warmes Papier auf kaltem Grund. */
  --papier:      oklch(0.955 0.014 85);   /* 15,8:1 auf --grund */
  --papier-soft: oklch(0.845 0.016 90);   /*  11,0:1 */
  --papier-mute: oklch(0.700 0.018 200);  /*   6,6:1 — nie unter 16 px */

  /* Akzente. --akzent wechselt mit dem Gewerk, --gas bleibt. */
  --akzent: oklch(0.74 0.18 48);
  --gas:    oklch(0.84 0.13 178);

  /* Vom Neon-Skript geschrieben: eine Zahl, keine Farbe. */
  --leucht: 0.55;

  --breite: 74rem;
  --rand: clamp(1.25rem, 5vw, 3rem);
  --lage-y: clamp(4.5rem, 11vw, 9.5rem);

  --s1: .5rem; --s2: .75rem; --s3: 1rem; --s4: 1.5rem;
  --s5: 2rem; --s6: 3rem; --s7: 4.5rem;

  --t-titel: clamp(2.15rem, 5.6vw, 4.6rem);
  --t-h2:    clamp(1.9rem, 4.6vw, 3.4rem);
  --t-h3:    clamp(1.15rem, 1.7vw, 1.4rem);
  --t-lead:  clamp(1.1rem, 1.55vw, 1.35rem);
  --t-body:  1.0625rem;
  --t-label: .76rem;

  --ecke: 4px;
  --schnell: 160ms;
  --ruhig: 420ms;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: var(--grund-tief);
  color: var(--papier);
  font-family: 'Newsreader', Georgia, 'Times New Roman', serif;
  font-size: var(--t-body);
  font-variation-settings: 'opsz' 22;
  line-height: 1.62;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, canvas, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- Korn: eine Fläche, damit das Petrol nicht digital wirkt ---------- */
.korn {
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  opacity: .32; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

.sprung {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--akzent); color: var(--grund-tief);
  padding: var(--s2) var(--s4); font-weight: 600;
}
.sprung:focus { left: var(--s3); top: var(--s3); }

/* Hellmodus-Hinweis — Gegenstück zu dsign-hell/.dunkel-hinweis
   (Danja, 17.09.2026): dsign-hell verweist bei OS-Dunkelmodus hierher,
   dsign-dunkel verweist umgekehrt bei OS-Hellmodus zurück zu dsign-hell.
   Reines CSS, kein echter Redirect (siehe dsign-hell/style.css), kein
   JavaScript/LocalStorage nötig. */
.hell-hinweis {
  display: none;
  background: var(--grund-hi); color: var(--papier);
  text-align: center; font-size: .82rem;
  padding: var(--s2) var(--rand);
}
.hell-hinweis a { color: var(--akzent); text-underline-offset: .2em; }
@media (prefers-color-scheme: light) {
  .hell-hinweis { display: block; }
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- Typo-Bausteine ---------- */
.augenbraue {
  font-family: 'Bricolage', system-ui, sans-serif;
  font-variation-settings: 'wdth' 79, 'wght' 620, 'opsz' 14;
  font-size: var(--t-label);
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--akzent);
  margin-bottom: var(--s4);
}
.h2 {
  font-family: 'Bricolage', system-ui, sans-serif;
  font-variation-settings: 'wdth' 96, 'wght' 640, 'opsz' 72;
  font-size: var(--t-h2);
  line-height: 1.03;
  letter-spacing: -.028em;
  text-wrap: balance;
}
.h2--weit { max-width: 22ch; }
.fliess {
  color: var(--papier-soft);
  max-width: 60ch;
  font-size: var(--t-lead);
  font-variation-settings: 'opsz' 30;
  line-height: 1.66;
}
.fliess + .fliess { margin-top: var(--s4); }
.h2 + .fliess { margin-top: var(--s4); }
.fliess--weit { margin-top: var(--s5); max-width: 54ch; }
.fliess strong { color: var(--papier); font-weight: 600; }
.fliess em { font-style: italic; color: var(--papier); }
.platz {
  font-family: 'Bricolage', system-ui, sans-serif;
  font-variation-settings: 'wdth' 78, 'wght' 600;
  font-size: .62rem; letter-spacing: .14em; text-transform: uppercase;
  color: oklch(0.72 0.17 30);
  border: 1px solid currentColor; border-radius: 2px;
  padding: .1em .4em; margin-left: .5em; vertical-align: 2px;
  white-space: nowrap;
}

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 var(--s5);
  font-family: 'Bricolage', system-ui, sans-serif;
  font-variation-settings: 'wdth' 88, 'wght' 600, 'opsz' 16;
  font-size: .95rem; letter-spacing: .005em;
  text-decoration: none; cursor: pointer;
  border: 1px solid var(--linie); border-radius: var(--ecke);
  background: transparent; color: var(--papier);
  transition: border-color var(--schnell), background-color var(--schnell), color var(--schnell);
}
.knopf:hover { border-color: var(--akzent); color: var(--akzent); }
.knopf--voll {
  background: var(--akzent); border-color: var(--akzent);
  color: oklch(0.16 0.03 205);
}
.knopf--voll:hover { background: color-mix(in oklab, var(--akzent), white 16%); border-color: transparent; color: oklch(0.16 0.03 205); }
.knopf--klein { min-height: 44px; padding: 0 var(--s4); font-size: .85rem; }

/* ---------- Branchen-Marquee, dauerhaft über dem Kopf ---------- */
.kopf-fest { position: sticky; top: 0; z-index: 51; }
.branchen {
  overflow: hidden;
  background: var(--grund-tief);
  border-bottom: 1px solid var(--linie-fein);
  padding-block: var(--s1);
}
.branchen__spur {
  display: flex; width: max-content;
  animation: branchen-lauf 34s linear infinite;
}
.branchen:hover .branchen__spur,
.branchen:focus-within .branchen__spur { animation-play-state: paused; }
@keyframes branchen-lauf {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.branchen__wort {
  white-space: nowrap; font-size: .82rem; color: var(--papier-mute);
}
/* ::after auf jedem Wort, nicht nur :not(:last-child) — sonst hat die
   Spur nur an der EINEN echten letzten Position keinen Trenner, aber an
   der Naht zwischen den beiden Wiederholungen (nach dem letzten Wort der
   ersten Hälfte) schon. Die beiden Hälften wären dann unterschiedlich
   breit (eine mit, eine ohne Trenner-Marge), der -50%-Loop hätte an der
   Naht einen sichtbaren Sprung statt eines glatten Übergangs — gemessen
   per getBoundingClientRect, nicht vermutet (Danja gemeldet, 17.09.2026). */
.branchen__wort::after {
  content: '·'; display: inline-block;
  margin-inline: var(--s3); color: var(--akzent);
}
.branchen__wort:nth-child(odd) {
  font-family: 'Bricolage', system-ui, sans-serif;
  font-variation-settings: 'wdth' 88, 'wght' 640, 'opsz' 16;
}
.branchen__wort:nth-child(even) {
  font-family: 'Newsreader', Georgia, serif; font-style: italic;
}
@media (prefers-reduced-motion: reduce) {
  .branchen__spur { animation: none; }
}

/* ---------- Kopf ---------- */
.kopf {
  position: static;
  background: color-mix(in oklab, var(--grund-tief) 82%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--ruhig), background-color var(--ruhig);
}
.kopf.ist-gescrollt { border-bottom-color: var(--linie-fein); background: color-mix(in oklab, var(--grund-tief) 94%, transparent); }
.kopf__innen {
  max-width: var(--breite); margin-inline: auto;
  padding: var(--s3) var(--rand);
  display: flex; align-items: center; gap: var(--s5);
}
.marke {
  display: inline-flex; align-items: center; gap: .55rem;
  min-height: 44px;
  text-decoration: none;
  font-family: 'Bricolage', system-ui, sans-serif;
  font-variation-settings: 'wdth' 84, 'wght' 700, 'opsz' 16;
  letter-spacing: .1em; font-size: .95rem;
}
.marke__punkt {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--akzent);
  box-shadow: 0 0 0 0 color-mix(in oklab, var(--akzent), transparent 40%);
  animation: puls 3.4s ease-out infinite;
}
.marke__logo {
  height: 22px; width: auto; mix-blend-mode: screen; /* Logo-Datei hat schwarzen statt transparenten Grund */
}
@keyframes puls {
  0%   { box-shadow: 0 0 0 0 color-mix(in oklab, var(--akzent), transparent 30%); }
  60%  { box-shadow: 0 0 0 9px color-mix(in oklab, var(--akzent), transparent 100%); }
  100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--akzent), transparent 100%); }
}
.kopf__nav { margin-left: auto; display: none; gap: var(--s5); }
.kopf__nav a {
  text-decoration: none; color: var(--papier-soft);
  font-family: 'Bricolage', system-ui, sans-serif;
  font-variation-settings: 'wdth' 90, 'wght' 500, 'opsz' 14;
  font-size: .92rem;
  padding: var(--s2) 0;
  border-bottom: 1px solid transparent;
  transition: color var(--schnell), border-color var(--schnell);
}
.kopf__nav a:hover { color: var(--papier); border-bottom-color: var(--akzent); }
.kopf .knopf--klein { margin-left: auto; }
.kopf__nav ~ .knopf--klein { margin-left: 0; }

/* ---------- Bühne ---------- */
.buehne {
  position: relative;
  background: var(--grund-tief);
  padding: clamp(2rem, 6vw, 4rem) var(--rand) clamp(5rem, 12vw, 8rem);
  overflow: hidden;
  isolation: isolate;
}
/* Das Licht des Schildes fällt in den Raum. JS schreibt nur --leucht. */
.buehne__licht {
  position: absolute; inset: -20% -10% auto; height: 120%; z-index: -1;
  background:
    radial-gradient(58% 46% at 50% 22%,
      color-mix(in oklab, var(--akzent), transparent calc(78% - var(--leucht) * 22%)) 0%,
      transparent 68%),
    radial-gradient(90% 60% at 50% 0%,
      color-mix(in oklab, var(--gas), transparent 93%) 0%, transparent 60%);
  transition: background var(--ruhig) linear;
}
.buehne__innen {
  max-width: var(--breite); margin-inline: auto;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.schild { margin: 0 0 var(--s6); width: min(100%, 34rem); }
.schild__glas { width: 100%; height: auto; aspect-ratio: 600 / 320; }
.schild__fuss {
  margin-top: var(--s2);
  color: var(--papier-mute); font-size: 1rem; font-style: italic;
}
.titel {
  font-family: 'Bricolage', system-ui, sans-serif;
  font-variation-settings: 'wdth' 94, 'wght' 700, 'opsz' 96;
  font-size: var(--t-titel);
  line-height: 1.0; letter-spacing: -.035em;
  text-wrap: balance; max-width: min(100%, 32ch);
}
/* Der Strich liegt als Hintergrund unter der Zeile, nicht als Pseudo-Element.
   Grund: bei Umbruch bekommt jede Zeile ihren eigenen Strich (box-decoration-break),
   statt dass ein absolut gesetzter Balken auf der falschen Zeile landet
   oder die Zeile mit white-space:nowrap unter 400 px aus dem Bild schiebt. */
.titel__kw {
  background-image: linear-gradient(var(--akzent), var(--akzent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 3px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding-bottom: .1em;
}
.lead {
  margin-top: var(--s5); max-width: 52ch;
  color: var(--papier-soft); font-size: var(--t-lead);
  font-variation-settings: 'opsz' 30; line-height: 1.62;
}
.lead strong { color: var(--papier); font-weight: 600; }
.buehne__aktionen { margin-top: var(--s6); display: flex; flex-wrap: wrap; gap: var(--s3); justify-content: center; }
.buehne__fussnote { margin-top: var(--s5); max-width: 44ch; color: var(--papier-mute); font-size: .96rem; }
.buehne__hinweis {
  position: absolute; left: 50%; bottom: var(--s4); translate: -50% 0;
  font-family: 'Bricolage', system-ui, sans-serif;
  font-variation-settings: 'wdth' 78, 'wght' 600;
  font-size: .66rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--papier-mute);
}
.buehne__hinweis span { display: block; animation: sinken 2.6s ease-in-out infinite; }
@keyframes sinken { 0%,100% { transform: translateY(0); opacity: .5 } 50% { transform: translateY(5px); opacity: 1 } }

/* ============================================================
   SCRUB — Beweis, dass Video-Scroll-Scrub kein Fremdwort ist.
   Volle Breite mit Absicht: die einzige Stelle auf der Seite, die aus
   dem Textraster ausbricht — der Bruch selbst ist Teil der Aussage.
   Ein Videobild, dessen currentTime der Scrollstrecke folgt, kein
   Autoplay. Ohne JavaScript oder unter reduzierter Bewegung zeigt
   das <video poster> von allein ein einzelnes Standbild.
   ============================================================ */
.scrub {
  position: relative;
  height: calc(100vh + 65vh);
  margin-top: var(--s7);
}
@media (min-width: 56rem) { .scrub { height: calc(100vh + 130vh); } }
.scrub__buehne {
  position: sticky; top: 0; height: 100vh;
  overflow: hidden; background: #050505;
}
.scrub__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.scrub__blende {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, oklch(0 0 0 / .55) 0%, transparent 26%, transparent 72%, oklch(0 0 0 / .6) 100%);
}
.scrub__marke {
  position: absolute; left: var(--rand); bottom: var(--s4); z-index: 2;
  color: oklch(0.92 0.01 90 / .82);
  font-family: 'Bricolage', system-ui, sans-serif;
  font-variation-settings: 'wdth' 82, 'wght' 560;
  font-size: .74rem; letter-spacing: .1em;
}

/* Kein JS heißt: kein Scrollbezug, aber immer noch ein Bild, nie eine Lücke. */
html:not(.fx-ready) .scrub { height: min(70vh, 34rem); }
html:not(.fx-ready) .scrub__buehne { position: static; height: 100%; }

/* ---------- Fehlerseite (404) ---------- */
.fehler {
  min-height: 70vh; display: grid; place-content: center; text-align: center;
  gap: var(--s4); padding-inline: var(--rand);
}

/* ---------- Lagen und Raster ---------- */
.lage { padding: var(--lage-y) var(--rand); background: var(--grund); }
.lage--tief { background: var(--grund-tief); }
.mitte { max-width: var(--breite); margin-inline: auto; }
.raster {
  max-width: var(--breite); margin-inline: auto;
  display: grid; gap: var(--s6);
}
@media (min-width: 62rem) {
  /* fr, nicht Prozent — sonst addiert der Gap die Sektion über den Rand. */
  .raster { grid-template-columns: 0.382fr 0.618fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; }
  .raster__links { position: sticky; top: 6rem; }
}

/* ---------- Gewerke-Liste ---------- */
.gewerke { list-style: none; padding: 0; margin: var(--s6) 0 0; border-top: 1px solid var(--linie-fein); }
.gewerk {
  display: grid; gap: .15rem var(--s4); padding: var(--s4) 0;
  border-bottom: 1px solid var(--linie-fein);
}
@media (min-width: 40rem) { .gewerk { grid-template-columns: 0.3fr 0.7fr; align-items: baseline; } }
.gewerk__nr {
  font-family: 'Bricolage', system-ui, sans-serif;
  font-variation-settings: 'wdth' 80, 'wght' 620, 'opsz' 14;
  font-size: var(--t-label); letter-spacing: .17em; text-transform: uppercase;
  color: var(--papier-mute);
}
.gewerk__txt { color: var(--papier-soft); }
.gewerk--offen .gewerk__nr { color: var(--gas); }
.gewerk--offen .gewerk__txt { color: var(--papier); }

/* ============================================================
   WERKBANK — der Gewerk-Umschalter mit der Vorschau
   ============================================================ */
.werkbank { max-width: var(--breite); margin: var(--s7) auto 0; }
.werkbank__steuer {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s4);
  justify-content: space-between; margin-bottom: var(--s4);
}
.wahl { display: flex; flex-wrap: wrap; gap: var(--s1); }
.wahl__knopf {
  position: relative; min-height: 46px; padding: 0 var(--s4);
  background: transparent; border: 1px solid var(--linie-fein); border-radius: var(--ecke);
  color: var(--papier-mute); cursor: pointer;
  font-family: 'Bricolage', system-ui, sans-serif;
  font-variation-settings: 'wdth' 88, 'wght' 560, 'opsz' 16;
  font-size: .92rem;
  transition: color var(--schnell), border-color var(--schnell), background-color var(--schnell);
}
.wahl__knopf:hover { color: var(--papier); border-color: var(--linie); }
.wahl__knopf[aria-selected="true"] {
  color: oklch(0.16 0.03 205);
  background: var(--akzent);
  border-color: var(--akzent);
}
.wahl__strich { display: none; }
.zeit { display: inline-flex; border: 1px solid var(--linie-fein); border-radius: var(--ecke); overflow: hidden; }
.zeit__knopf {
  min-height: 46px; padding: 0 var(--s4); background: transparent; border: 0; cursor: pointer;
  color: var(--papier-mute);
  font-family: 'Bricolage', system-ui, sans-serif;
  font-variation-settings: 'wdth' 82, 'wght' 600, 'opsz' 14;
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  transition: color var(--schnell), background-color var(--schnell);
}
.zeit__knopf + .zeit__knopf { border-left: 1px solid var(--linie-fein); }
.zeit__knopf[aria-pressed="true"] { background: var(--grund-hi); color: var(--papier); }

.rahmen {
  border: 1px solid var(--linie); border-radius: 10px; overflow: hidden;
  background: var(--grund-hi);
  box-shadow: 0 40px 90px -50px oklch(0 0 0 / .9),
              0 0 90px -40px color-mix(in oklab, var(--akzent), transparent 70%);
  transition: box-shadow var(--ruhig);
}
.rahmen__leiste {
  display: flex; align-items: center; gap: .4rem;
  padding: .7rem var(--s3); background: var(--grund-hi);
  border-bottom: 1px solid var(--linie-fein);
}
.rahmen__punkt { width: 9px; height: 9px; border-radius: 50%; background: var(--linie); }
.rahmen__url {
  margin-left: var(--s3); padding: .2rem .7rem; border-radius: 99px;
  background: var(--grund-tief); color: var(--papier-mute);
  font-family: 'Bricolage', system-ui, sans-serif;
  font-variation-settings: 'wdth' 86, 'wght' 500;
  font-size: .74rem; letter-spacing: .02em;
}
.rahmen__glas {
  height: clamp(26rem, 66vh, 42rem);
  overflow-y: auto; overscroll-behavior: contain;
  /* Die Vorschau ist eine eigene Seite: sie skaliert an IHRER Breite,
     nicht an der des Fensters. Sonst bekommt eine 700-px-Vorschau die
     Polsterabstände einer 1440-px-Seite. */
  container-type: inline-size;
  background: #fff;
  scrollbar-width: thin;
}
.noscript { padding: var(--s5); color: #333; font-family: system-ui, sans-serif; }
.werkbank__fuss { margin-top: var(--s3); color: var(--papier-mute); font-size: .92rem; }

/* ---------- Die Musterseite in der Vorschau ---------- */
.ms {
  --ms-rand: clamp(1.05rem, 4cqw, 2.6rem);
  min-height: 100%;
  background: var(--ms-grund); color: var(--ms-text);
  font-family: var(--ms-fliess);
  font-size: 15px; line-height: 1.6;
}
.ms__kopf {
  display: flex; align-items: center; gap: var(--s3);
  padding: 1rem var(--ms-rand);
  border-bottom: 1px solid var(--ms-linie);
  position: sticky; top: 0; z-index: 3;
  background: color-mix(in oklab, var(--ms-grund) 88%, transparent);
  backdrop-filter: blur(10px);
}
.ms__marke {
  font-family: var(--ms-titelschrift);
  font-weight: 700; font-size: 1.02rem; letter-spacing: var(--ms-marke-sperr, .02em);
  text-transform: var(--ms-marke-fall, none);
}
.ms__nav { display: none; gap: 1.2rem; margin-left: auto; font-size: .82rem; }
.ms__nav span { color: var(--ms-mute); }
.ms__kopf .ms__btn { margin-left: auto; padding: .5rem 1rem; font-size: .78rem; }
.ms__nav ~ .ms__btn { margin-left: 0; }
@container (min-width: 44rem) { .ms__nav { display: flex; } }

.ms__held { padding: clamp(1.8rem, 6cqw, 3.6rem) var(--ms-rand) clamp(1.4rem, 4cqw, 2.4rem); }
.ms__eyebrow {
  font-family: var(--ms-titelschrift);
  font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ms-akzent); margin-bottom: .9rem;
}
.ms__titel {
  font-family: var(--ms-titelschrift);
  font-size: clamp(1.65rem, 5cqw, 2.9rem); line-height: 1.05;
  letter-spacing: var(--ms-titel-sperr, -.025em);
  font-weight: var(--ms-titel-fett, 700);
  max-width: 18ch; text-wrap: balance;
}
.ms__lead { margin-top: 1rem; max-width: 46ch; color: var(--ms-mute); font-size: 1rem; }
.ms__aktionen { margin-top: 1.6rem; display: flex; flex-wrap: wrap; gap: .6rem; }
.ms__btn {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 1.1rem;
  background: var(--ms-akzent); color: var(--ms-auf-akzent);
  border: 1px solid var(--ms-akzent); border-radius: var(--ms-ecke);
  font-family: var(--ms-titelschrift); font-weight: 600; font-size: .86rem;
  text-decoration: none;
}
.ms__btn2 {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 1.1rem;
  border: 1px solid var(--ms-linie); border-radius: var(--ms-ecke);
  color: var(--ms-text); font-family: var(--ms-titelschrift); font-weight: 600; font-size: .86rem;
  text-decoration: none;
}
.ms__fakten {
  margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--ms-linie);
  display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}
.ms__fakten dt { font-family: var(--ms-titelschrift); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ms-mute); }
.ms__fakten dd { margin: .25rem 0 0; font-size: .95rem; }

.ms__block { padding: clamp(1.4rem, 4cqw, 2.6rem) var(--ms-rand); border-top: 1px solid var(--ms-linie); }
.ms__label { font-family: var(--ms-titelschrift); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ms-akzent); margin-bottom: 1.2rem; }
.ms__zeilen { list-style: none; padding: 0; margin: 0; }
.ms__zeile { display: grid; grid-template-columns: 1fr auto; gap: .2rem 1rem; padding: .9rem 0; border-bottom: 1px solid var(--ms-linie); }
.ms__z-t { font-family: var(--ms-titelschrift); font-weight: 600; font-size: 1rem; }
.ms__z-p { font-family: var(--ms-titelschrift); font-weight: 600; color: var(--ms-akzent); white-space: nowrap; }
.ms__z-s { grid-column: 1 / 2; color: var(--ms-mute); font-size: .88rem; }
.ms__fuss {
  padding: clamp(1.2rem, 3.4cqw, 2.2rem) var(--ms-rand);
  border-top: 1px solid var(--ms-linie); background: var(--ms-fuss-grund);
  display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  font-size: .88rem; color: var(--ms-mute);
}
.ms__fuss strong { display: block; color: var(--ms-text); font-family: var(--ms-titelschrift); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; margin-bottom: .3rem; }
.ms__leer { padding: clamp(2.2rem, 7cqw, 4.2rem) var(--ms-rand); text-align: center; }
.ms__leer p { max-width: 40ch; margin-inline: auto; color: var(--ms-mute); }

/* Gewerk-Themen: jede Musterseite hat ihren eigenen Ton. Das ist der Punkt. */
.ms--restaurant {
  --ms-grund: #14100c; --ms-text: #f4ece0; --ms-mute: #a99a86;
  --ms-linie: #2e2720; --ms-akzent: #e4913c; --ms-auf-akzent: #1b1409;
  --ms-fuss-grund: #0e0b08; --ms-ecke: 2px;
  --ms-titelschrift: 'Bricolage', system-ui, sans-serif;
  --ms-fliess: 'Newsreader', Georgia, serif;
  --ms-titel-sperr: -.03em;
}
.ms--friseur {
  --ms-grund: #fbf6f4; --ms-text: #2a1f24; --ms-mute: #7c6a71;
  --ms-linie: #ece0dd; --ms-akzent: #c04f7c; --ms-auf-akzent: #fff;
  --ms-fuss-grund: #f5ebe8; --ms-ecke: 99px;
  --ms-titelschrift: 'Newsreader', Georgia, serif;
  --ms-fliess: 'Newsreader', Georgia, serif;
  --ms-titel-sperr: -.015em; --ms-titel-fett: 400;
  --ms-marke-sperr: .22em; --ms-marke-fall: uppercase;
}
.ms--kfz {
  --ms-grund: #f2f4f5; --ms-text: #16202a; --ms-mute: #5d6b76;
  --ms-linie: #d9dfe3; --ms-akzent: #0f6ea8; --ms-auf-akzent: #fff;
  --ms-fuss-grund: #16202a; --ms-ecke: 3px;
  --ms-titelschrift: 'Bricolage', system-ui, sans-serif;
  --ms-fliess: system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ms-titel-sperr: -.02em;
  --ms-marke-sperr: .12em; --ms-marke-fall: uppercase;
}
.ms--kfz .ms__fuss { color: #9fb0bd; }
.ms--kfz .ms__fuss strong { color: #f2f4f5; }
.ms--offen {
  --ms-grund: #0b1f24; --ms-text: #eef3f2; --ms-mute: #93a8a9;
  --ms-linie: #1e3b41; --ms-akzent: #57e0c4; --ms-auf-akzent: #06181c;
  --ms-fuss-grund: #071a1e; --ms-ecke: 4px;
  --ms-titelschrift: 'Bricolage', system-ui, sans-serif;
  --ms-fliess: 'Newsreader', Georgia, serif;
}

/* ---------- Die Seite von vorher ---------- */
.alt {
  background: #fff; color: #000;
  font-family: 'Times New Roman', Times, serif; font-size: 15px; line-height: 1.35;
  padding: 14px; min-height: 100%;
}
.alt__band { background: #003399; color: #fff; padding: 6px 10px; font-size: 13px; text-align: center; }
.alt__marke { font-size: 26px; font-weight: 700; text-align: center; margin: 14px 0 2px; color: #003399; }
.alt__unter { text-align: center; font-size: 13px; color: #444; font-style: italic; }
.alt__nav { text-align: center; margin: 12px 0; font-size: 13px; }
.alt__nav a { color: #0000ee; }
.alt__blink { color: #cc0000; font-weight: 700; animation: blinken 1.1s steps(1) infinite; }
@keyframes blinken { 50% { opacity: 0 } }
.alt__tabelle { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 13px; }
.alt__tabelle td, .alt__tabelle th { border: 1px solid #999; padding: 5px 7px; text-align: left; vertical-align: top; }
.alt__tabelle th { background: #dcdcdc; }
.alt__text { font-size: 13.5px; margin: 10px 0; }
.alt__kasten { border: 1px dashed #999; padding: 8px; margin: 12px 0; font-size: 12.5px; color: #333; }
.alt__fuss { margin-top: 16px; border-top: 1px solid #999; padding-top: 8px; font-size: 11px; color: #555; text-align: center; }
.alt__zaehler { font-family: 'Courier New', monospace; background: #000; color: #0f0; padding: 2px 6px; letter-spacing: 2px; }

/* ============================================================
   Karten, Schritte, Tarife, Fragen
   ============================================================ */
.karten {
  list-style: none; padding: 0; margin: var(--s7) auto 0; max-width: var(--breite);
  display: grid; gap: 1px; background: var(--linie-fein);
  border: 1px solid var(--linie-fein);
}
@media (min-width: 44rem) { .karten { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .karten { grid-template-columns: repeat(3, 1fr); } }
.karte {
  background: var(--grund); padding: var(--s5);
  display: flex; flex-direction: column;
  transition: background-color var(--ruhig);
}
.karte:hover { background: var(--grund-hi); }
.karte__h {
  font-family: 'Bricolage', system-ui, sans-serif;
  font-variation-settings: 'wdth' 92, 'wght' 620, 'opsz' 20;
  font-size: var(--t-h3); letter-spacing: -.015em; line-height: 1.2;
}
.karte__t { margin-top: var(--s2); color: var(--papier-soft); }
.karte__p {
  margin-top: var(--s4); padding-top: var(--s3);
  border-top: 1px solid var(--linie-fein);
  color: var(--papier-mute); font-size: .96rem;
}
.karte__p span {
  display: block; margin-bottom: .2rem;
  font-family: 'Bricolage', system-ui, sans-serif;
  font-variation-settings: 'wdth' 80, 'wght' 620;
  font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gas);
}

.schritte { list-style: none; padding: 0; margin: var(--s7) auto 0; max-width: var(--breite); display: grid; gap: 1px; background: var(--linie-fein); border-block: 1px solid var(--linie-fein); }
@media (min-width: 52rem) { .schritte { grid-template-columns: repeat(4, 1fr); } }
.schritt { background: var(--grund-tief); padding: var(--s5) var(--s4); }
.schritt__nr {
  font-family: 'Bricolage', system-ui, sans-serif;
  font-variation-settings: 'wdth' 100, 'wght' 300, 'opsz' 72;
  font-size: 2.6rem; line-height: 1; color: var(--akzent);
  margin-bottom: var(--s3);
}
.schritt__h {
  font-family: 'Bricolage', system-ui, sans-serif;
  font-variation-settings: 'wdth' 92, 'wght' 620, 'opsz' 20;
  font-size: var(--t-h3); letter-spacing: -.015em;
}
.schritt__t { margin-top: var(--s2); color: var(--papier-soft); font-size: 1rem; }
.schritt__d {
  margin-top: var(--s4);
  font-family: 'Bricolage', system-ui, sans-serif;
  font-variation-settings: 'wdth' 80, 'wght' 560;
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--papier-mute);
}

.frage { border-bottom: 1px solid var(--linie-fein); }
.frage:first-of-type { border-top: 1px solid var(--linie-fein); }
.frage__k {
  list-style: none; cursor: pointer;
  padding: var(--s4) 2.5rem var(--s4) 0; position: relative;
  font-family: 'Bricolage', system-ui, sans-serif;
  font-variation-settings: 'wdth' 92, 'wght' 580, 'opsz' 20;
  font-size: clamp(1.02rem, 1.6vw, 1.2rem); letter-spacing: -.01em;
  transition: color var(--schnell);
}
.frage__k::-webkit-details-marker { display: none; }
.frage__k:hover { color: var(--akzent); }
.frage__k::after {
  content: ''; position: absolute; right: .4rem; top: 50%; width: 13px; height: 13px;
  translate: 0 -50%;
  background:
    linear-gradient(currentColor 0 0) center/13px 1px no-repeat,
    linear-gradient(currentColor 0 0) center/1px 13px no-repeat;
  color: var(--akzent);
  transition: rotate var(--ruhig), opacity var(--schnell);
}
.frage[open] .frage__k::after { rotate: 45deg; }
.frage__a { padding-bottom: var(--s4); color: var(--papier-soft); max-width: 62ch; }

/* ---------- Anfrage ---------- */
.lage--anfrage { background: var(--grund); }
.anfrage { max-width: var(--breite); margin-inline: auto; display: grid; gap: var(--s6); }
@media (min-width: 62rem) { .anfrage { grid-template-columns: 0.44fr 0.56fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; } }
.formular { display: grid; gap: var(--s4); }
@media (min-width: 40rem) { .formular { grid-template-columns: 1fr 1fr; } }
.feld { display: grid; gap: .4rem; }
.feld[hidden] { display: none; } /* [hidden] allein verliert gegen .feld{display:grid} — Autor-Regeln schlagen die UA-Vorgabe unabhaengig von Spezifitaet */
.feld--breit { grid-column: 1 / -1; }
.feld label {
  font-family: 'Bricolage', system-ui, sans-serif;
  font-variation-settings: 'wdth' 82, 'wght' 600;
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--papier-mute);
}
.feld input, .feld select, .feld textarea {
  min-height: 48px; padding: .7rem var(--s3);
  background: var(--grund-tief); color: var(--papier);
  border: 1px solid var(--linie-fein); border-radius: var(--ecke);
  font-family: 'Newsreader', Georgia, serif; font-size: 1rem;
  transition: border-color var(--schnell);
}
.feld textarea { resize: vertical; line-height: 1.55; }
.feld input:hover, .feld select:hover, .feld textarea:hover { border-color: var(--linie); }
.feld input:focus, .feld select:focus, .feld textarea:focus { border-color: var(--akzent); outline-offset: 1px; }
.hp { position: absolute; left: -9999px; }
.formular__hinweis { grid-column: 1 / -1; color: var(--papier-mute); font-size: .92rem; max-width: 52ch; }
.formular button { grid-column: 1 / -1; justify-self: start; }
.formular__status { grid-column: 1 / -1; font-size: .96rem; min-height: 1.4em; }
.formular__status[data-state="ok"] { color: var(--gas); }
.formular__status[data-state="error"] { color: oklch(0.76 0.16 30); }

/* ---------- Kontaktweg-Umschalter (E-Mail/Telefon) ---------- */
.weg-wahl legend {
  font-family: 'Bricolage', system-ui, sans-serif;
  font-variation-settings: 'wdth' 82, 'wght' 600;
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--papier-mute);
  padding: 0; margin-bottom: .4rem;
}
.weg-wahl__optionen { display: flex; gap: var(--s2); }
.weg {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s4);
  border: 1px solid var(--linie-fein); border-radius: var(--ecke);
  color: var(--papier-mute); cursor: pointer;
  transition: color var(--schnell), border-color var(--schnell), background-color var(--schnell);
}
.weg:has(input:checked) { background: var(--akzent); border-color: var(--akzent); color: oklch(0.16 0.03 205); }
.weg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.weg:has(input:focus-visible) { outline: 2px solid var(--akzent); outline-offset: 3px; }

/* ---------- Fuß ---------- */
.fuss { background: var(--grund-tief); border-top: 1px solid var(--linie-fein); padding: var(--s7) var(--rand) var(--s6); }
.fuss__innen { max-width: var(--breite); margin-inline: auto; }
/* ---------- Marken-Karte (Fuß) ---------- */
.dsign-karte {
  /* Höhe 150px statt vorher 110px: der Rahmen ist 12px vom Kartenrand
     eingerückt, das Motto wächst beim Hover per grid-template-rows dazu.
     Bei 110px war die aufgeklappte Kartenmitte (Logo + Motto + Polster)
     125px hoch — höher als die Karte selbst, .dsign-karte__inhalt hat
     dadurch oben aus dem eingerückten Rahmen herausgeragt (gemessen per
     getBoundingClientRect, 17.09.2026). 150px lässt dem eingerückten
     Rahmen (150 − 2×12 = 126px) genug Platz für die 125px hohe
     aufgeklappte Mitte. */
  position: relative; display: inline-grid; place-content: center;
  width: min(240px, 100%); height: 150px;
  background: var(--grund-hi); border-radius: var(--ecke); overflow: hidden;
  transition: border-radius .5s ease-in-out;
}
.dsign-karte:hover, .dsign-karte:focus-visible { border-radius: 4px; }
.dsign-karte:focus-visible { outline: 2px solid var(--akzent); outline-offset: 6px; }
.dsign-karte__rahmen {
  position: absolute; inset: 0; border: 2px solid var(--akzent); opacity: 0;
  transform: rotate(8deg); transition: all .5s ease-in-out; pointer-events: none;
}
.dsign-karte:hover .dsign-karte__rahmen,
.dsign-karte:focus-visible .dsign-karte__rahmen { inset: 12px; opacity: 1; transform: rotate(0); }
.dsign-karte__inhalt { display: grid; justify-items: center; gap: 0; padding: var(--s3) var(--s4); }
.dsign-karte__logo {
  width: 148px; height: auto; mix-blend-mode: screen; /* Logo-Datei hat schwarzen statt transparenten Grund */
  transition: transform .5s ease-in-out;
}
.dsign-karte:hover .dsign-karte__logo,
.dsign-karte:focus-visible .dsign-karte__logo { transform: translateY(-4px); }
.dsign-karte__motto-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s ease; }
.dsign-karte:hover .dsign-karte__motto-wrap,
.dsign-karte:focus-visible .dsign-karte__motto-wrap { grid-template-rows: 1fr; }
.dsign-karte__motto {
  overflow: hidden; opacity: 0; padding-top: .35em;
  font-family: 'Newsreader', Georgia, 'Times New Roman', serif; font-style: italic;
  font-size: .85rem; color: var(--papier-soft);
  transition: opacity .35s ease .1s;
}
.dsign-karte:hover .dsign-karte__motto,
.dsign-karte:focus-visible .dsign-karte__motto { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .dsign-karte, .dsign-karte__rahmen, .dsign-karte__logo, .dsign-karte__motto, .dsign-karte__motto-wrap { transition: none; }
}
.fuss__satz { margin-top: var(--s5); color: var(--papier-soft); max-width: 44ch; }
.fuss__zeile {
  margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--linie-fein);
  display: flex; flex-wrap: wrap; gap: var(--s4);
  color: var(--papier-mute); font-size: .9rem;
}
.fuss__zeile a { color: var(--papier-mute); text-underline-offset: 3px; }
.fuss__zeile a:hover { color: var(--akzent); }

/* ---------- Impressum/Datenschutz ---------- */
.rechtstext { max-width: 68ch; margin: 0 auto; padding: var(--s7) var(--rand) var(--s6); }
.rechtstext h1 {
  font-family: 'Bricolage', system-ui, sans-serif;
  font-variation-settings: 'wdth' 92, 'wght' 640, 'opsz' 40;
  font-size: var(--t-h3); margin-bottom: var(--s5);
}
.rechtstext h2 {
  font-family: 'Bricolage', system-ui, sans-serif;
  font-variation-settings: 'wdth' 88, 'wght' 600, 'opsz' 24;
  font-size: 1.05rem; margin: var(--s6) 0 var(--s2);
}
.rechtstext p, .rechtstext li { color: var(--papier-soft); margin-bottom: var(--s3); }
.rechtstext a { color: var(--gas); text-underline-offset: 2px; }
.rechtstext ul { padding-left: var(--s4); }
.rechtstext__hinweis { margin-top: var(--s6); color: var(--papier-mute); font-size: .86rem; }

/* ---------- Reveal: erst verstecken, wenn JS wirklich läuft ---------- */
html.fx-ready .reveal { opacity: 0; transform: translateY(16px); }
html.fx-ready .reveal.ist-da {
  opacity: 1; transform: none;
  transition: opacity .62s ease, transform .62s cubic-bezier(.2,.7,.2,1);
}

@media (min-width: 56rem) { .kopf__nav { display: flex; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  html.fx-ready .reveal { opacity: 1; transform: none; }
  .buehne__hinweis span { animation: none; }
  .alt__blink { animation: none; }
  /* scrub.js läuft gar nicht erst; die Sektion bekommt hier zusätzlich
     dieselbe Kurzform wie der Kein-JS-Fall, ohne auf .fx-ready zu warten. */
  .scrub { height: min(70vh, 34rem); }
  .scrub__buehne { position: static; height: 100%; }
}

/* Der Strich unter der zweiten Titelzeile zieht sich einmal aus. */
html.fx-ready .titel__kw { animation: kw-zieh .85s .45s cubic-bezier(.2,.75,.2,1) both; }
@keyframes kw-zieh { from { background-size: 0 3px } to { background-size: 100% 3px } }
@media (prefers-reduced-motion: reduce) {
  html.fx-ready .titel__kw { animation: none; background-size: 100% 3px; }
}

/* Schrift-Gewicht schwingt beim Laden/Einblenden mit — "mehr Motion
   Graphics" (Danja, 17.09.2026), Variable-Font-Interpolation statt neuer
   Effekt-Bibliothek, dieselbe Achse wie beim Gewerk-Wechsel (--akzent),
   nur eben 'wght' statt Farbe. Jede Keyframe hält 'wdth'/'opsz' fest und
   animiert nur 'wght' — font-variation-settings ist kein additives
   Kurzformat, eine Keyframe ohne alle drei Achsen würde die beiden
   anderen für die Animationsdauer zurücksetzen. Die globale
   reduced-motion-Regel oben (*{animation-duration:.001ms!important})
   fängt das automatisch ab, keine eigene Ausnahme nötig. */
@keyframes titel-gewicht {
  from { font-variation-settings: 'wdth' 94, 'wght' 300, 'opsz' 96; }
  to   { font-variation-settings: 'wdth' 94, 'wght' 700, 'opsz' 96; }
}
html.fx-ready .titel { animation: titel-gewicht .85s .1s cubic-bezier(.2,.75,.2,1) both; }

@keyframes nav-gewicht {
  from { font-variation-settings: 'wdth' 90, 'wght' 300, 'opsz' 14; }
  to   { font-variation-settings: 'wdth' 90, 'wght' 500, 'opsz' 14; }
}
html.fx-ready .kopf__nav a { animation: nav-gewicht .6s .3s cubic-bezier(.2,.75,.2,1) both; }

html.fx-ready .h2.reveal { font-variation-settings: 'wdth' 96, 'wght' 300, 'opsz' 72; }
html.fx-ready .h2.reveal.ist-da {
  font-variation-settings: 'wdth' 96, 'wght' 640, 'opsz' 72;
  transition: opacity .62s ease, transform .62s cubic-bezier(.2,.7,.2,1), font-variation-settings .62s ease;
}