/*
   ══════════════════════════════════════════════════════════════════════════
      ██  C O P Y R I G H T  ██
   ──────────────────────────────────────────────────────────────────────────
      COLOREA GbR · Nadine und Florian Munzert
      Im Ziegelfeld 22 · 27432 Bremervörde
      info@colorea.de · www.colorea.de
   ──────────────────────────────────────────────────────────────────────────
      Projekt      COLOREA Digitalagentur
      Entwicklung  Nadine Munzert, Florian Munzert
      Datei        stil.css
   ──────────────────────────────────────────────────────────────────────────
      Gestaltung und Quelltext sind urheberrechtlich geschützt.
      Vervielfältigung oder Weitergabe nur mit schriftlicher Zustimmung.
   ══════════════════════════════════════════════════════════════════════════
*/

@font-face { font-family: 'Archivo';       src: url('schriften/archivo.woff2') format('woff2');       font-weight: 400 900; font-display: swap; font-style: normal; }
@font-face { font-family: 'Inter';         src: url('schriften/inter.woff2') format('woff2');         font-weight: 300 800; font-display: swap; font-style: normal; }
@font-face { font-family: 'JetBrainsMono'; src: url('schriften/jetbrainsmono.woff2') format('woff2'); font-weight: 400 700; font-display: swap; font-style: normal; }

/* ═════════════════════════════════════════════════════════════════════════
   1 · Grundwerte
   Alle Farben, Abstaende, Rundungen und Uebergaenge stehen hier.
   ═════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Grundflaechen ────────────────────────────────────────────────
     Ein tiefes, leicht blaustichiges Anthrazit statt reinem Schwarz.
     Es nimmt das Blau des Markenzeichens auf, ohne selbst Farbe zu sein. */
  --tinte:        #0a0f16;
  --tinte-2:      #0e141d;
  --tinte-3:      #141c27;
  --papier:       #f2f7f9;
  --papier-2:     #e3edf1;

  /* Schrift auf dunklem Grund */
  --hell:         #f2f6f8;
  --hell-2:       #a8b6c2;
  --hell-3:       #6d7d8c;

  /* Schrift auf hellem Grund */
  --dunkel:       #0f1720;
  --dunkel-2:     #445361;
  --dunkel-3:     #6f8090;

  /* ── Markenfarben ────────────────────────────────────────────────
     Direkt aus dem Logo abgenommen: das C verlaeuft von Tuerkis oben
     nach Blau unten, der Schriftzug steht auf dem Blau. */
  --tuerkis:      #00a3a4;
  --tuerkis-hell: #16c4c2;
  --lagune:       #0d8dac;
  --kobalt:       #1870b8;
  --kobalt-tief:  #14588f;

  /* Nebentoene, sparsam eingesetzt */
  --bernstein:    #d99a2b;
  --koralle:      #cf5b4a;
  --salbei:       #5d9b7a;

  --akzent:       var(--kobalt);
  --akzent-2:     var(--tuerkis);

  --band:         linear-gradient(120deg, var(--tuerkis) 0%, var(--lagune) 48%, var(--kobalt) 100%);
  --band-weich:   linear-gradient(120deg, rgba(0,163,164,.14), rgba(24,112,184,.14));

  /* Linien und Flaechen */
  --rand:         rgba(255,255,255,.09);
  --rand-stark:   rgba(255,255,255,.18);
  --glas:         rgba(255,255,255,.03);
  --glas-2:       rgba(255,255,255,.055);
  --rand-hell:    rgba(15,23,32,.11);

  /* Abstaende */
  --luft-1:  .5rem;
  --luft-2:  1rem;
  --luft-3:  1.6rem;
  --luft-4:  2.6rem;
  --luft-5:  4rem;
  --abschnitt-y: clamp(4.5rem, 9vw, 9rem);
  --bahn:    1280px;
  --bahn-eng: 820px;

  /* Rundungen */
  --rund-1:  10px;
  --rund-2:  18px;
  --rund-3:  28px;
  --rund-4:  40px;

  /* Uebergaenge */
  --weich:   .38s cubic-bezier(.22,.9,.28,1);
  --schnell: .18s cubic-bezier(.22,.9,.28,1);
  --schwung: .7s cubic-bezier(.16,1,.3,1);

  /* Schriften */
  --schrift-titel: 'Archivo', 'Segoe UI', system-ui, sans-serif;
  --schrift-text:  'Inter', 'Segoe UI', system-ui, sans-serif;
  --schrift-daten: 'JetBrainsMono', ui-monospace, 'Courier New', monospace;

  --kopfhoehe: 78px;
  --bandhoehe: 38px;
  --schatten:  0 24px 70px -28px rgba(0,0,0,.85);
  --schatten-2: 0 40px 110px -40px rgba(0,0,0,.9);
}

/* ═════════════════════════════════════════════════════════════════════════
   2 · Grundgeruest
   ═════════════════════════════════════════════════════════════════════════ */

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

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

body {
  margin: 0;
  background: var(--tinte);
  color: var(--hell);
  font-family: var(--schrift-text);
  font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height: 1.68;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Deutsche Komposita sprengen sonst schmale Displays. */
p, li, h1, h2, h3, h4, h5, dt, dd, td, th, figcaption, label, summary, blockquote, a {
  overflow-wrap: break-word;
  hyphens: auto;
}

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

/* Grundgroesse aller Strichzeichnungen aus symbole.php. Ohne diese Regel
   wuerde ein Symbol ohne eigene Angabe die volle Breite einnehmen. */
.symbol {
  width: 1em; height: 1em;
  display: inline-block; vertical-align: -.16em;
  flex: none;
}

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--schrift-titel);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.033em;
  margin: 0 0 var(--luft-2);
  hyphens: manual;
}

h1 { font-size: clamp(2.1rem, 1.2rem + 4.4vw, 5rem); }
h2 { font-size: clamp(1.7rem, 1.05rem + 2.7vw, 3.4rem); }
h3 { font-size: clamp(1.22rem, 1rem + 1vw, 1.7rem); letter-spacing: -.02em; }
h4 { font-size: clamp(1.05rem, .95rem + .5vw, 1.25rem); letter-spacing: -.012em; }

p { margin: 0 0 var(--luft-2); }
ul, ol { margin: 0 0 var(--luft-2); padding-left: 1.25em; }
li { margin-bottom: .4em; }
strong, b { font-weight: 700; color: #fff; }
hr { border: 0; height: 1px; background: var(--rand); margin: var(--luft-4) 0; }

::selection { background: var(--kobalt); color: #fff; }

:focus-visible {
  outline: 2px solid var(--tuerkis);
  outline-offset: 3px;
  border-radius: 4px;
}

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

.zum-inhalt {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: #fff; color: #000; padding: .9rem 1.4rem;
  border-radius: 0 0 var(--rund-1) 0; font-weight: 700;
}
.zum-inhalt:focus { left: 0; }

/* ═════════════════════════════════════════════════════════════════════════
   3 · Bahnen und Abschnitte
   ═════════════════════════════════════════════════════════════════════════ */

.bahn {
  width: min(100% - 2.4rem, var(--bahn));
  margin-inline: auto;
}
.bahn--eng { width: min(100% - 2.4rem, var(--bahn-eng)); }
.bahn--breit { width: min(100% - 2rem, 1520px); }

.abschnitt {
  position: relative;
  padding-block: var(--abschnitt-y);
}
.abschnitt--knapp { padding-block: clamp(3rem, 6vw, 5.5rem); }

/* Helle Abschnitte setzen ihre Farben selbst - sonst erben Karten
   darin die helle Schriftfarbe des dunklen Grundes: weiss auf weiss. */
.abschnitt--hell {
  /* Sehr zarter Verlauf aus den Logofarben - im Vergleich zu einer
     einfarbigen Flaeche wirkt der Abschnitt lebendiger, ohne bunt zu sein. */
  background:
    radial-gradient(120% 90% at 12% 0%, rgba(0,163,164,.09), transparent 55%),
    radial-gradient(110% 80% at 92% 100%, rgba(24,112,184,.10), transparent 58%),
    var(--papier);
  color: var(--dunkel);
}
.abschnitt--hell h1, .abschnitt--hell h2, .abschnitt--hell h3, .abschnitt--hell h4 { color: var(--dunkel); }
.abschnitt--hell strong { color: #000; }
.abschnitt--hell .fliess { color: var(--dunkel-2); }
.abschnitt--hell .augenbraue { color: var(--dunkel-3); }

.abschnitt--tief {
  background:
    radial-gradient(90% 140% at 50% 0%, rgba(24,112,184,.20), transparent 62%),
    radial-gradient(70% 120% at 85% 100%, rgba(0,163,164,.16), transparent 60%),
    var(--tinte-2);
}

.abschnitt__kopf:not(:has(h1, h2, h3)) {
  margin-bottom: var(--luft-3);
}
.abschnitt__kopf {
  max-width: 720px;
  margin-bottom: clamp(2.2rem, 4vw, 3.6rem);
}
.abschnitt__kopf--mitte { margin-inline: auto; text-align: center; }
.abschnitt__kopf--breit { max-width: 900px; }

.augenbraue {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--schrift-daten);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--hell-3);
  margin-bottom: var(--luft-2);
}
.augenbraue::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--akzent-2);
  box-shadow: 0 0 0 0 rgba(0,163,164,.55);
  animation: puls 2.6s infinite;
}
@keyframes puls {
  0%   { box-shadow: 0 0 0 0 rgba(0,163,164,.5); }
  70%  { box-shadow: 0 0 0 11px rgba(0,163,164,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,163,164,0); }
}

.fliess {
  color: var(--hell-2);
  font-size: clamp(1.02rem, .98rem + .3vw, 1.18rem);
  max-width: 66ch;
}
.fliess--gross { font-size: clamp(1.1rem, 1rem + .6vw, 1.4rem); line-height: 1.55; }

.farbwort {
  background: var(--band);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-size: 220% 100%;
  animation: bandwandern 9s ease-in-out infinite alternate;
}
@keyframes bandwandern {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}

.strichwort {
  position: relative;
  display: inline-block;
}
.strichwort::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: .07em;
  height: .09em;
  background: var(--band);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  animation: strichauf 1s .5s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes strichauf { to { transform: scaleX(1); } }

/* ═════════════════════════════════════════════════════════════════════════
   4 · Hintergrund: Nordlicht, Raster, Korn
   ═════════════════════════════════════════════════════════════════════════ */

.nordlicht {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
}
.nordlicht__fleck {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: .30;
  will-change: opacity;
}
/* Zwei ruhige Lichtflaechen in den Markenfarben. Sie atmen sehr langsam,
   statt wie frueher ueber den Bildschirm zu wandern - das wirkte unruhig. */
.nordlicht__fleck--1 {
  width: 52vw; height: 42vw; min-width: 380px; min-height: 320px;
  background: radial-gradient(ellipse, rgba(24,112,184,.75), transparent 70%);
  top: -14vw; left: -10vw;
  animation: atmen 22s ease-in-out infinite alternate;
}
.nordlicht__fleck--2 {
  width: 44vw; height: 38vw; min-width: 320px; min-height: 280px;
  background: radial-gradient(ellipse, rgba(0,163,164,.55), transparent 70%);
  top: 6vw; right: -12vw;
  animation: atmen 27s ease-in-out infinite alternate-reverse;
}
.nordlicht__fleck--3 { display: none; }
@keyframes atmen { from { opacity: .22; } to { opacity: .38; } }

.korn {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .14;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23k)' opacity='.42'/%3E%3C/svg%3E");
}

.gitter {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 20%, transparent 78%);
}

/* ═════════════════════════════════════════════════════════════════════════
   5 · Kopfzeile und Navigation
   ═════════════════════════════════════════════════════════════════════════ */

.fortschritt {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: var(--band);
  z-index: 210;
  pointer-events: none;
}

.kopfzeile::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: var(--band);
  opacity: .55;
}
.kopfzeile {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  transition: background var(--weich), backdrop-filter var(--weich), border-color var(--weich), box-shadow var(--weich);
  border-bottom: 1px solid transparent;
}
.kopfzeile.ist-fest {
  background:
    linear-gradient(180deg, rgba(13,21,32,.98), rgba(10,15,22,.98)),
    var(--tinte);
  border-bottom-color: var(--rand-stark);
  box-shadow: 0 14px 40px -26px rgba(0,0,0,.95);
}
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .kopfzeile.ist-fest { background: #0a0f16; }
}
.kopfzeile.ist-versteckt { transform: translateY(-102%); }
.kopfzeile { transition: transform var(--weich), background var(--weich), border-color var(--weich); }

.kopfzeile__innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--luft-2);
  height: var(--kopfhoehe);
  transition: height var(--weich);
}
.kopfzeile.ist-fest .kopfzeile__innen { height: 64px; }

/* ── Kontaktzeile über der Hauptleiste ──────────────────────────────
   Sie steht nur ganz oben. Sobald gescrollt wird, fährt sie ein und die
   Leiste wird schlanker. */
.kopfzeile__band {
  border-bottom: 1px solid var(--rand);
  background: rgba(255,255,255,.025);
  overflow: hidden;
  height: 38px;
  transition: height var(--weich), opacity var(--weich);
}
.kopfzeile.ist-fest .kopfzeile__band { height: 0; opacity: 0; border-bottom-color: transparent; }

.kopfzeile__bandinnen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 38px;
  font-family: var(--schrift-daten);
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--hell-3);
}
.kopfzeile__ort { display: inline-flex; align-items: center; gap: .5rem; }
.kopfzeile__bandrechts { display: inline-flex; align-items: center; gap: 1.6rem; }
.kopfzeile__bandrechts a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--hell-3);
  transition: color var(--schnell);
}
.kopfzeile__bandrechts a:hover { color: var(--tuerkis-hell); }
.kopfzeile__band .symbol { color: var(--tuerkis); font-size: .95rem; }

/* Auf schmalen Geräten nur die Telefonnummer – für alles andere fehlt
   der Platz, und angerufen wird ohnehin am häufigsten. */
@media (max-width: 780px) {
  .kopfzeile__ort { display: none; }
  /* Nur die Telefonnummer zeigen - für beides fehlt der Platz. Gibt es
     keine Nummer, bleibt die E-Mail stehen, damit die Zeile nicht leer ist. */
  .kopfzeile__bandrechts:has(a[href^="tel"]) a[href^="mailto"] { display: none; }
  .kopfzeile__bandinnen { justify-content: center; }
  /* Die Zeile ist schmal, die Nummer muss trotzdem treffbar sein -
     deshalb reicht die Klickfläche über die volle Bandhöhe hinaus. */
  .kopfzeile__bandrechts a {
    position: relative;
    min-height: 38px;
    padding-inline: 1rem;
  }
  .kopfzeile__bandrechts a::after {
    content: '';
    position: absolute;
    inset: -6px -.5rem;
  }
}

.marke {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  flex-shrink: 0;
  min-height: 44px;
}
.marke__bild { height: 34px; width: auto; transition: height var(--weich); }
.kopfzeile.ist-fest .marke__bild { height: 28px; }
.marke__wort {
  font-family: var(--schrift-titel);
  font-weight: 900;
  font-size: 1.32rem;
  letter-spacing: -.02em;
  line-height: 1;
}
.marke__punkt {
  display: inline-block;
  width: .38em; height: .38em;
  border-radius: 50%;
  background: var(--band);
  background-size: 300% 100%;
  animation: bandwandern 6s ease-in-out infinite alternate;
  margin-left: .12em;
}
.marke__zusatz {
  font-family: var(--schrift-daten);
  font-size: .58rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--hell-3);
  display: block;
  margin-top: 2px;
}

/* Hauptnavigation auf grossen Bildschirmen */
.hauptnav { display: none; }

@media (min-width: 1020px) {
  .hauptnav {
    display: flex;
    align-items: center;
    gap: .18rem;
  }
  .hauptnav__punkt { position: relative; }
  .hauptnav__verweis {
    display: inline-flex;
    align-items: center;
    gap: .38rem;
    padding: .62rem .82rem;
    border-radius: var(--rund-1);
    font-size: .93rem;
    font-weight: 500;
    color: var(--hell-2);
    transition: color var(--schnell), background var(--schnell);
    min-height: 44px;
  }
  .hauptnav__verweis:hover,
  .hauptnav__punkt.ist-offen > .hauptnav__verweis { color: #fff; background: var(--glas); }
  .hauptnav__verweis.ist-aktiv { color: #fff; }
  .hauptnav__verweis.ist-aktiv::after {
    content: '';
    position: absolute;
    left: .82rem; right: .82rem; bottom: .3rem;
    height: 2px;
    border-radius: 2px;
    background: var(--band);
  }
  .hauptnav__pfeil {
    width: 10px; height: 10px;
    transition: transform var(--schnell);
    opacity: .65;
  }
  .hauptnav__punkt.ist-offen .hauptnav__pfeil { transform: rotate(180deg); }

  /* ── Aufklappbares Panel ───────────────────────────────────────────
     Breites Panel unter der Leiste, ausgerichtet an der Bahn statt am
     Menuepunkt. Links die Leistungen nach Gruppen, rechts eine
     Vorschaukarte mit Bild. */
  .megapanel {
    position: fixed;
    top: var(--kopfunten, calc(var(--kopfhoehe) + var(--bandhoehe)));
    left: 50%;
    transform: translate(-50%, 10px);
    width: min(calc(100vw - 2.4rem), var(--bahn));
    background: rgba(11,16,23,.96);
    backdrop-filter: blur(28px) saturate(150%);
    -webkit-backdrop-filter: blur(28px) saturate(150%);
    border: 1px solid var(--rand);
    border-radius: var(--rund-3);
    box-shadow: var(--schatten-2);
    padding: 1.4rem 1.5rem 1.2rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--weich), transform var(--weich), visibility var(--weich);
  }
  /* Das Oeffnen steuert haupt.js ueber die Klasse ist-offen. Frueher lief
     das ueber :hover auf dem Menuepunkt - weil das Panel aber ein Kind
     des Punktes ist und fest am Bildschirm klebt, galt der ganze
     Panelbereich als "ueber dem Menuepunkt". Dadurch sprang das Menue
     auf, sobald der Zeiger irgendwo unter der Kopfzeile stand. */
  .hauptnav__punkt.ist-offen > .megapanel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
  }
  /* Ohne JavaScript bleibt das Aufklappen per Zeiger moeglich. */
  .kein-js .hauptnav__punkt:hover > .megapanel,
  .kein-js .hauptnav__punkt:focus-within > .megapanel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
  }
  /* Unsichtbare Bruecke zwischen Menuepunkt und Panel, damit der Zeiger
     den Zwischenraum ueberqueren kann. Nur so breit wie noetig. */
  .megapanel::before {
    content: '';
    position: absolute;
    top: -1rem; height: 1rem;
    left: 0; right: 0;
    pointer-events: none;
  }
  /* Nur das offene Panel nimmt die Brücke an - sonst läge über dem
     Seiteninhalt eine unsichtbare Fläche, die das Menü auslöst. */
  .hauptnav__punkt.ist-offen > .megapanel::before { pointer-events: auto; }

  .megapanel__innen {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 280px);
    gap: 2.4rem;
    align-items: start;
  }
  .megapanel:not(:has(.megapanel__karte)) .megapanel__innen {
    grid-template-columns: minmax(0, 1fr);
  }

  .megapanel__spalten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1.5rem .9rem;
    align-content: start;
  }
  .megapanel__gruppe ul { list-style: none; margin: 0; padding: 0; }
  .megapanel__gruppe li { margin: 0; }
  .megapanel__gruppe--breit ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: .2rem 1rem;
  }
  .megapanel__gruppentitel {
    display: block;
    margin-bottom: .55rem;
    padding-left: .8rem;
    font-family: var(--schrift-daten);
    font-size: .66rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--tuerkis-hell);
  }
  .megapanel__verweis {
    display: block;
    padding: .45rem .75rem;
    border-radius: var(--rund-1);
    font-size: .86rem;
    line-height: 1.35;
    font-weight: 500;
    color: var(--hell-2);
    /* Muss ein langer Titel doch umbrechen, dann gleichmaessig auf zwei
       Zeilen statt mit einem einzelnen Wort in der zweiten. */
    text-wrap: balance;
    /* Bewusst nur Farbe und Verschiebung animieren. Wuerde sich der
       Innenabstand aendern, wuerde der Text schmaler und laengere
       Beschriftungen sprängen beim Zeigen auf zwei Zeilen um. */
    transition: background var(--schnell), color var(--schnell), transform var(--schnell);
  }
  .megapanel__verweis:hover {
    background: var(--glas-2);
    color: #fff;
  }
  .megapanel__zusatz {
    display: block;
    font-size: .78rem;
    color: var(--hell-3);
    margin-top: .1rem;
  }

  /* Vorschaukarten rechts: alle uebereinander, sichtbar ist die zum
     Menuepunkt gehoerende. Das Wechseln uebernimmt haupt.js. */
  .megapanel__karten {
    position: relative;
    display: grid;
  }
  .megapanel__karten > * { grid-area: 1 / 1; }
  .megapanel__karte {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(6px);
    transition: opacity var(--schnell), transform var(--schnell), visibility var(--schnell);
  }
  /* Die aktive Karte wird nur innerhalb eines geoeffneten Panels sichtbar.
     Ohne diese Einschraenkung wuerde sie das "visibility: hidden" des
     geschlossenen Panels ueberschreiben - und dann faengt eine unsichtbare
     Flaeche mitten auf der Seite die Klicks ab. */
  .hauptnav__punkt.ist-offen .megapanel__karte.ist-aktiv,
  .kein-js .hauptnav__punkt:hover .megapanel__karte.ist-aktiv,
  .kein-js .hauptnav__punkt:focus-within .megapanel__karte.ist-aktiv {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }

  /* Sicherheitsnetz: Solange das Panel zu ist, darf kein Kind sichtbar
     oder anklickbar sein - egal welche Regel es sonst mitbringt. */
  .hauptnav__punkt:not(.ist-offen) > .megapanel,
  .hauptnav__punkt:not(.ist-offen) > .megapanel * {
    visibility: hidden;
    pointer-events: none;
  }
  .kein-js .hauptnav__punkt:hover > .megapanel,
  .kein-js .hauptnav__punkt:hover > .megapanel *,
  .kein-js .hauptnav__punkt:focus-within > .megapanel,
  .kein-js .hauptnav__punkt:focus-within > .megapanel * {
    visibility: visible;
    pointer-events: auto;
  }
  .megapanel__karte {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    padding: .85rem;
    border-radius: var(--rund-2);
    border: 1px solid var(--rand);
    background: var(--glas);
    transition: border-color var(--weich), background var(--weich);
  }
  .megapanel__karte:hover { border-color: var(--rand-stark); background: var(--glas-2); }
  .megapanel__bild {
    display: block;
    aspect-ratio: 16 / 8;
    border-radius: var(--rund-1);
    overflow: hidden;
    margin-bottom: .35rem;
    background: var(--tinte-3);
  }
  .megapanel__bild img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform var(--schwung);
  }
  .megapanel__karte:hover .megapanel__bild img { transform: scale(1.05); }
  .megapanel__marke {
    font-family: var(--schrift-daten);
    font-size: .64rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--tuerkis-hell);
  }
  .megapanel__kartentitel {
    font-family: var(--schrift-titel);
    font-weight: 700;
    font-size: 1.02rem;
    color: var(--hell);
    line-height: 1.25;
  }
  .megapanel__kartentext {
    font-size: .82rem;
    color: var(--hell-3);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .megapanel__fuss {
    margin-top: 1.2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--rand);
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
  }
}

.kopfzeile__werkzeuge {
  display: flex;
  align-items: center;
  gap: .55rem;
}
/* Bei offenem Vollbildmenue stoert die Angebotsschaltflaeche neben dem
   Schliesskreuz - sie steht im Menue selbst noch einmal. */
.menue-offen .kopfzeile__werkzeuge .schalter {
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--weich);
}
/* Auf schmalen Geraeten bricht die Beschriftung sonst um und draengt sich
   an den Menueschalter. Im Menue selbst steht die Schaltflaeche gross. */
@media (max-width: 520px) {
  .kopfzeile__werkzeuge .schalter { display: none; }
}

/* Menueschalter: erst ab 1020px unnoetig */
.menuschalter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border: 1px solid var(--rand);
  border-radius: var(--rund-1);
  background: var(--glas);
  color: var(--hell);
  cursor: pointer;
  transition: background var(--schnell), border-color var(--schnell);
}
.menuschalter:hover { background: var(--glas-2); border-color: var(--rand-stark); }
@media (min-width: 1020px) { .menuschalter { display: none; } }

.menuschalter__strich {
  display: block;
  width: 20px; height: 2px;
  background: currentColor;
  border-radius: 2px;
  position: relative;
  transition: background var(--schnell);
}
.menuschalter__strich::before,
.menuschalter__strich::after {
  content: '';
  position: absolute;
  left: 0;
  width: 20px; height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--weich), top var(--weich);
}
.menuschalter__strich::before { top: -6px; }
.menuschalter__strich::after  { top:  6px; }
.menuschalter[aria-expanded="true"] .menuschalter__strich { background: transparent; }
.menuschalter[aria-expanded="true"] .menuschalter__strich::before { top: 0; transform: rotate(45deg); }
.menuschalter[aria-expanded="true"] .menuschalter__strich::after  { top: 0; transform: rotate(-45deg); }

/* ═════════════════════════════════════════════════════════════════════════
   6 · Mobiles Menue (Vollbild)
   ═════════════════════════════════════════════════════════════════════════ */

.mobilmenue {
  position: fixed;
  inset: 0;
  z-index: 190;
  background: rgba(7,7,13,.97);
  backdrop-filter: blur(26px);
  -webkit-backdrop-filter: blur(26px);
  padding: calc(var(--kopfhoehe) + 1.2rem) 0 2.4rem;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-1.4rem);
  transition: opacity var(--weich), transform var(--weich), visibility var(--weich);
  overscroll-behavior: contain;
}
.mobilmenue.ist-offen { opacity: 1; visibility: visible; transform: none; }
@media (min-width: 1020px) { .mobilmenue { display: none; } }

.mobilmenue__liste { list-style: none; margin: 0; padding: 0; }
.mobilmenue__zeile {
  border-bottom: 1px solid var(--rand);
  opacity: 0;
  transform: translateY(14px);
}
.mobilmenue.ist-offen .mobilmenue__zeile {
  animation: einschweben .5s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes einschweben { to { opacity: 1; transform: none; } }

.mobilmenue__kopfzeile {
  display: flex;
  align-items: stretch;
  gap: .5rem;
}
.mobilmenue__verweis {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.05rem .2rem;
  min-height: 60px;
  font-family: var(--schrift-titel);
  font-size: clamp(1.5rem, 1.1rem + 2vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--hell);
  transition: color var(--schnell);
}
.mobilmenue__verweis:hover, .mobilmenue__verweis.ist-aktiv { color: var(--tuerkis); }
.mobilmenue__kurz {
  font-family: var(--schrift-daten);
  font-size: .64rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--hell-3);
  font-weight: 500;
  margin-top: .2rem;
  padding-left: 2.4rem;
}
/* Laufende Nummer vor jedem Hauptpunkt - gibt dem Menue Ordnung
   und macht die Laenge der Liste auf einen Blick lesbar. */
.mobilmenue__nr {
  display: inline-block;
  width: 2.4rem;
  font-family: var(--schrift-daten);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--tuerkis-hell);
  vertical-align: middle;
}
.mobilmenue__verweis.ist-aktiv .mobilmenue__nr { color: var(--tuerkis); }
.mobilmenue__auf {
  flex: 0 0 auto;
  width: 48px;
  min-height: 48px;
  align-self: center;
  border: 1px solid var(--rand);
  border-radius: var(--rund-1);
  background: var(--glas);
  color: var(--hell);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--schnell), transform var(--schnell);
}
.mobilmenue__auf:hover { background: var(--glas-2); }
.mobilmenue__auf svg { width: 16px; height: 16px; transition: transform var(--weich); }
.mobilmenue__auf[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Zum Einklappen max-height statt grid-template-rows: 0fr.
   Letzteres klappt nur die erste Zeile ein. */
.mobilmenue__unter {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--weich);
}
.mobilmenue__unter.ist-offen { max-height: 62rem; }
.mobilmenue__unterverweis {
  display: block;
  padding: .8rem .2rem .8rem 1.1rem;
  min-height: 46px;
  font-size: .98rem;
  color: var(--hell-2);
  border-left: 2px solid var(--rand);
  margin-left: .2rem;
  transition: color var(--schnell), border-color var(--schnell);
}
.mobilmenue__unterverweis:hover { color: #fff; border-left-color: var(--tuerkis); }
.mobilmenue__unterverweis--alle {
  color: var(--tuerkis-hell);
  font-weight: 600;
  border-left-color: var(--tuerkis);
}
.mobilmenue__unter li:last-child .mobilmenue__unterverweis { padding-bottom: 1.1rem; }

.mobilmenue__fuss {
  margin-top: var(--luft-4);
  display: grid;
  gap: var(--luft-2);
}
.mobilmenue__kontakt {
  display: grid;
  gap: .55rem;
  font-family: var(--schrift-daten);
  font-size: .84rem;
  color: var(--hell-3);
}
.mobilmenue__kontakt a,
.mobilmenue__kontakt span {
  display: flex;
  align-items: center;
  gap: .6rem;
  min-height: 40px;
  color: var(--hell-2);
}
.mobilmenue__kontakt .symbol { color: var(--tuerkis-hell); font-size: 1.05rem; }

/* ═════════════════════════════════════════════════════════════════════════
   7 · Schaltflaechen
   ═════════════════════════════════════════════════════════════════════════ */

.schalter {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .95rem 1.6rem;
  min-height: 48px;
  border: 0;
  border-radius: 100px;
  font-family: var(--schrift-text);
  font-size: .94rem;
  font-weight: 600;
  letter-spacing: -.005em;
  cursor: pointer;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
  background: var(--band);
  background-size: 200% 100%;
  color: #fff;
  transition: transform var(--schnell), box-shadow var(--weich), background-position var(--schwung);
  box-shadow: 0 12px 34px -14px rgba(24,112,184,.85);
}
.schalter:hover {
  background-position: 100% 0;
  box-shadow: 0 18px 44px -14px rgba(0,163,164,.7);
}
.schalter:active { transform: translateY(0); }
.schalter svg { width: 17px; height: 17px; flex-shrink: 0; }

.schalter--rand {
  background: transparent;
  color: var(--hell);
  box-shadow: none;
  border: 1px solid var(--rand-stark);
}
.schalter--rand:hover {
  background: var(--glas-2);
  box-shadow: none;
  border-color: rgba(255,255,255,.4);
}
.abschnitt--hell .schalter--rand { color: var(--dunkel); border-color: var(--rand-hell); }
.abschnitt--hell .schalter--rand:hover { background: rgba(10,10,20,.05); border-color: rgba(10,10,20,.28); }

.schalter--still {
  background: var(--glas-2);
  color: var(--hell);
  box-shadow: none;
  border: 1px solid var(--rand);
}
.schalter--still:hover { background: rgba(255,255,255,.11); box-shadow: none; }

.schalter--klein { padding: .68rem 1.15rem; min-height: 44px; font-size: .87rem; }
.schalter--gross { padding: 1.15rem 2.1rem; min-height: 56px; font-size: 1.02rem; }
.schalter--voll { width: 100%; }

.knopfreihe {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  align-items: center;
}

/* Textverweis mit wanderndem Pfeil */
.pfeilverweis {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
  font-size: .95rem;
  color: var(--hell);
  min-height: 44px;
  transition: color var(--schnell);
}
.pfeilverweis svg { width: 16px; height: 16px; transition: transform var(--weich); }
.pfeilverweis:hover { color: var(--tuerkis); }
.pfeilverweis:hover svg { transform: translateX(3px); }
.abschnitt--hell .pfeilverweis { color: var(--dunkel); }
.abschnitt--hell .pfeilverweis:hover { color: var(--kobalt); }

/* ═════════════════════════════════════════════════════════════════════════
   8 · Buehne (Startseite)
   ═════════════════════════════════════════════════════════════════════════ */

.buehne {
  position: relative;
  padding: calc(var(--kopfhoehe) + clamp(3rem, 8vh, 6rem)) 0 clamp(2rem, 4vh, 3.5rem);
  min-height: min(100svh, 940px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(90% 70% at 78% 18%, rgba(24,112,184,.20), transparent 62%),
    radial-gradient(70% 60% at 8% 80%, rgba(0,163,164,.14), transparent 60%);
}

/* Senkrechte Marke am linken Rand. Sie sitzt außerhalb der Bahn und gibt
   der Bühne eine Kante, an der das Auge sich festhält. */
.buehne__kante {
  position: absolute;
  left: clamp(.6rem, 1.6vw, 1.4rem);
  top: 55%;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-family: var(--schrift-daten);
  font-size: .68rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--hell-3);
  opacity: .6;
  pointer-events: none;
}
.buehne__kante::after {
  content: '';
  position: absolute;
  left: 50%; bottom: -4.5rem;
  width: 1px; height: 3.5rem;
  background: linear-gradient(180deg, var(--tuerkis), transparent);
}
@media (max-width: 1100px) { .buehne__kante { display: none; } }

/* Zweispaltig: links der Text, rechts die Bildsäule. */
.buehne__raster {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 1000px) {
  .buehne__raster {
    grid-template-columns: minmax(0, 1fr) minmax(0, 330px);
    gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: center;
  }
}

/* Die Folien liegen in derselben Rasterzelle, damit die Höhe von der
   längsten bestimmt wird und nichts springt. */
.buehne__wort { display: grid; }
.buehne__wort > .folie { grid-area: 1 / 1; }

.folie {
  display: block;
  width: 100%;
}
.buehne--folgen .folie {
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity .8s cubic-bezier(.16,1,.3,1),
              transform .8s cubic-bezier(.16,1,.3,1), visibility .8s;
  pointer-events: none;
}
.buehne--folgen .folie.ist-aktiv {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}

/* ── Bild rechts ─────────────────────────────────────────────────────
   Es läuft bis an den Bildschirmrand und ist links weich ausgeblendet.
   Kein Rahmen, kein Kasten - das wirkt ruhiger als eine abgesetzte
   Bildkachel und lässt der Typografie den Vortritt. */
.buehne__saeule {
  position: absolute;
  inset: 0;
  display: grid;
  z-index: -1;
}
.buehne__saeule > * { grid-area: 1 / 1; }

.buehne__bild {
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.1s cubic-bezier(.4,0,.2,1), visibility 1.1s;
}
.buehne__bild.ist-aktiv { opacity: 1; visibility: visible; }
.buehne__bild img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1);
  filter: blur(2px) saturate(115%);
}
.buehne__bild.ist-aktiv img { animation: buehnezoom 26s linear forwards; }
@keyframes buehnezoom { to { transform: scale(1.08); } }

/* Schleier über dem Bild. Links kräftiger, damit die Schrift steht,
   rechts offener, damit vom Bild etwas übrig bleibt. */
.buehne__kante-links {
  position: relative;
  z-index: 2;
  background:
    linear-gradient(95deg, rgba(10,15,22,.93) 0%, rgba(10,15,22,.78) 38%, rgba(10,15,22,.38) 72%, rgba(10,15,22,.5) 100%),
    linear-gradient(180deg, rgba(10,15,22,.4), rgba(10,15,22,.1) 42%, rgba(10,15,22,.8));
  pointer-events: none;
}




/* Der Schleier haelt den Text lesbar: unten dunkel, oben durchscheinend,
   dazu ein leichter Farbstich in Markenblau. */
.buehne__schleier {
  display: none;
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(10,15,22,.72) 0%, rgba(10,15,22,.30) 30%, rgba(10,15,22,.72) 72%, var(--tinte) 100%),
    linear-gradient(100deg, rgba(10,15,22,.88) 0%, rgba(10,15,22,.22) 62%, rgba(24,112,184,.16) 100%);
}

/* ── Steuerung des Folienwechsels ─────────────────────────────────────── */
.buehne__steuerung {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: clamp(.9rem, 2vh, 1.6rem);
}
.buehne__pfeil {
  flex: none;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid var(--rand);
  border-radius: 50%;
  background: rgba(10,15,22,.55);
  backdrop-filter: blur(10px);
  color: var(--hell-2);
  cursor: pointer;
  transition: border-color var(--schnell), color var(--schnell), background var(--schnell);
}
.buehne__pfeil:hover { border-color: var(--tuerkis); color: #fff; background: rgba(10,15,22,.8); }
.buehne__pfeil svg { width: 18px; height: 18px; }

.buehne__punkte { display: flex; gap: .5rem; flex: 1; }
.buehne__punkt {
  flex: 1;
  max-width: 90px;
  height: 32px;
  display: flex;
  align-items: center;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.buehne__punktbalken {
  display: block;
  width: 100%;
  height: 3px;
  border-radius: 3px;
  background: rgba(255,255,255,.22);
  overflow: hidden;
  position: relative;
}
.buehne__punkt.ist-aktiv .buehne__punktbalken::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 3px;
  background: var(--band);
  transform-origin: left;
  animation: folienlauf var(--folienzeit, 7s) linear forwards;
}
@keyframes folienlauf { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.buehne__punkt:hover .buehne__punktbalken { background: rgba(255,255,255,.4); }

@media (max-width: 700px) {
  .buehne__steuerung { gap: .6rem; }
  .buehne__pfeil { width: 38px; height: 38px; }
  .buehne__punkt { max-width: none; }
}

.buehne__innen { position: relative; z-index: 2; }

.buehne__marke {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: .45rem 1rem .45rem .45rem;
  border: 1px solid var(--rand);
  border-radius: 100px;
  background: rgba(10,15,22,.6);
  backdrop-filter: blur(10px);
  font-family: var(--schrift-daten);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--hell-2);
  margin-bottom: var(--luft-3);
  opacity: 0;
  animation: sanftauf .8s .1s cubic-bezier(.16,1,.3,1) forwards;
}
.buehne__marke b {
  background: var(--band);
  color: #fff;
  padding: .28rem .6rem;
  border-radius: 100px;
  font-weight: 700;
  letter-spacing: .1em;
}

.buehne__titel {
  font-size: clamp(2.3rem, 1rem + 5.8vw, 4.9rem);
  line-height: 1.03;
  letter-spacing: -.035em;
  margin-bottom: var(--luft-2);
  max-width: 17ch;
}
.buehne__titel .zeile { display: block; overflow: hidden; }
.buehne__titel .zeile > span {
  display: block;
  transform: translateY(105%);
  animation: hochschieben .95s cubic-bezier(.16,1,.3,1) forwards;
}
.buehne__titel .zeile:nth-child(2) > span { animation-delay: .09s; }
.buehne__titel .zeile:nth-child(3) > span { animation-delay: .18s; }
@keyframes hochschieben { to { transform: none; } }

.buehne__text {
  font-size: clamp(1.02rem, .96rem + .45vw, 1.25rem);
  color: var(--hell-2);
  max-width: 54ch;
  margin-bottom: var(--luft-3);
  line-height: 1.6;
  opacity: 0;
  animation: sanftauf .9s .42s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes sanftauf { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.buehne__knoepfe { opacity: 0; animation: sanftauf .9s .56s cubic-bezier(.16,1,.3,1) forwards; }

/* Drei Kurzverweise am unteren Rand der Buehne: die Bereiche, in denen
   wir arbeiten. Sie ersetzen die frueheren schwebenden Kacheln. */
.buehne__schnellzugriff {
  margin-top: clamp(2.6rem, 6vh, 4.2rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px;
  border-top: 1px solid var(--rand);
  opacity: 0;
  animation: sanftauf .9s .7s cubic-bezier(.16,1,.3,1) forwards;
}
.buehne__kurz {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  padding: 1.3rem 1.4rem 1.3rem 0;
  border-right: 1px solid var(--rand);
  transition: background var(--weich), transform var(--weich);
}
.buehne__kurz:last-child { border-right: 0; }
.buehne__kurz:hover { background: var(--glas); }
.buehne__kurz .symbol {
  font-size: 1.35rem;
  color: var(--tuerkis-hell);
  flex: none;
  margin-top: .1rem;
}
.buehne__kurztitel {
  display: block;
  font-family: var(--schrift-titel);
  font-weight: 700;
  font-size: 1rem;
  color: var(--hell);
  margin-bottom: .15rem;
}
.buehne__kurztext {
  display: block;
  font-size: .85rem;
  color: var(--hell-3);
  line-height: 1.5;
}

@media (max-width: 700px) {
  .buehne__kurz { border-right: 0; border-bottom: 1px solid var(--rand); padding-right: 0; }
  .buehne__kurz:last-child { border-bottom: 0; }
}

/* ── Fingerfreundliche Ziele auf dem Telefon ──────────────────────────
   Verweise im Fussbereich und im Brotkrumenpfad standen frueher so eng,
   dass man sie kaum treffen konnte. Ab hier hat jedes Ziel mindestens
   44 Pixel Hoehe - das ist das Mass, das Apple und Google empfehlen. */
@media (max-width: 700px) {
  .fusszeile__raster a,
  .fusszeile__unten a,
  .fusszeile__unten .fussknopf,
  .fusszeile__text a,
  .datenzeile a,
  .kontaktkachel a,
  .visitenkarte__daten a,
  .pfad a, .pfad span {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .fusszeile__raster li { margin: 0; }
  .fusszeile__unten {
    gap: .2rem 1.1rem;
    align-items: center;
  }
  .urheber { min-height: 44px; display: inline-flex; align-items: center; }
}

.laufband {
  position: relative;
  overflow: hidden;
  padding-block: 1.1rem;
  border-top: 1px solid var(--rand);
  border-bottom: 1px solid var(--rand);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.laufband__spur {
  display: flex;
  width: max-content;
  gap: 3rem;
  animation: laufen 42s linear infinite;
}
.laufband:hover .laufband__spur { animation-play-state: paused; }
@keyframes laufen { to { transform: translateX(-50%); } }

.laufband__stueck {
  display: flex;
  gap: 3rem;
  align-items: center;
  padding-right: 3rem;
}
.laufband__name {
  font-family: var(--schrift-titel);
  font-weight: 700;
  font-size: clamp(1rem, .9rem + .5vw, 1.3rem);
  letter-spacing: -.02em;
  color: var(--hell-3);
  white-space: nowrap;
  transition: color var(--schnell);
  display: flex;
  align-items: center;
  gap: .7rem;
}
.laufband__name:hover { color: var(--hell); }
.laufband__name img { height: 30px; width: auto; opacity: .55; filter: grayscale(1) brightness(2); }
.laufband__punkt { width: 5px; height: 5px; border-radius: 50%; background: var(--kobalt); flex-shrink: 0; }
.abschnitt--hell .laufband { border-color: var(--rand-hell); }
.abschnitt--hell .laufband__name { color: var(--dunkel-3); }
.abschnitt--hell .laufband__name:hover { color: var(--dunkel); }

/* ═════════════════════════════════════════════════════════════════════════
   10 · Raster und Karten
   ═════════════════════════════════════════════════════════════════════════ */

/* minmax(0, 1fr) statt 1fr: sonst zwingt das laengste Wort
   die Spalte breiter als den Bildschirm. */
.raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--luft-3);
}
@media (min-width: 660px) {
  .raster--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .raster--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .raster--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .raster--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .raster--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.raster--eng { gap: var(--luft-2); }

.karte {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.4rem, 2.4vw, 2rem);
  border: 1px solid var(--rand);
  border-radius: var(--rund-3);
  background: var(--glas);
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--weich), border-color var(--weich), background var(--weich);
  color: var(--hell);
}
.karte::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: var(--band);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--weich);
  pointer-events: none;
  z-index: 1;
}
.karte:hover::before { opacity: .85; }

/* ── Karte mit Bildkopf ───────────────────────────────────────────────
   Fuer Leistungen, Journalbeitraege und alles, wo ein Bild mehr sagt
   als ein Symbol. Das Bild sitzt randlos oben, der Text darunter. */
.karte--bild { padding: 0; }
.karte__bild {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--tinte-3);
}
.karte__bild img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--schwung);
}
.karte--bild:hover .karte__bild img { transform: scale(1.06); }
/* Verlauf am unteren Bildrand, damit der Uebergang zum Text weich wird */
.karte__bild::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 62%;
  background: linear-gradient(180deg, rgba(10,15,22,0), rgba(10,15,22,.55) 55%, rgba(10,15,22,.92));
  pointer-events: none;
}

.karte__koerper {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(1.2rem, 2.2vw, 1.7rem);
}
.karte--bild .karte__fuss { margin-top: auto; }
.karte:hover {
  background: var(--glas-2);
}

/* Lichtschein, der dem Zeiger folgt. Die Position kommt aus einer
   CSS-Variablen, die das Skript setzt - kein Inline-Skript. */
.karte::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(280px circle at var(--maus-x, 50%) var(--maus-y, 0%), rgba(255,255,255,.10), transparent 65%);
  opacity: 0;
  transition: opacity var(--weich);
  pointer-events: none;
  z-index: 0;
}
.karte:hover::after { opacity: 1; }
.karte > * { position: relative; z-index: 2; }

/* Karten in hellen Abschnitten setzen ihre Farben selbst. */
.abschnitt--hell .karte {
  background: #fff;
  border-color: rgba(10,10,20,.09);
  color: var(--dunkel);
  box-shadow: 0 18px 48px -34px rgba(10,10,30,.5);
}
.abschnitt--hell .karte:hover { background: #fff; box-shadow: 0 26px 60px -34px rgba(10,10,30,.55); }
.abschnitt--hell .karte::after { background: radial-gradient(280px circle at var(--maus-x, 50%) var(--maus-y, 0%), rgba(24,112,184,.09), transparent 65%); }
.abschnitt--hell .karte__text { color: var(--dunkel-2); }
.abschnitt--hell .karte__marke { color: var(--dunkel-3); }

.karte__symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px; height: 54px;
  border-radius: 16px;
  margin-bottom: var(--luft-2);
  background: var(--band-weich);
  border: 1px solid var(--rand);
  color: var(--akzent-2);
  flex-shrink: 0;
  transition: transform var(--weich);
}
.karte--bild .karte__symbol {
  position: absolute;
  left: 1rem; bottom: 1rem;
  z-index: 2;
  margin: 0;
  background: rgba(10,15,22,.72);
  backdrop-filter: blur(8px);
}

.karte:hover .karte__symbol { background: var(--ton, var(--tuerkis)); color: #06121a; }
.karte__symbol svg { width: 26px; height: 26px; }
.abschnitt--hell .karte__symbol { border-color: rgba(10,10,20,.08); }

/* Farbtoene je Eintrag */
.ton-violett   { --ton: var(--kobalt);       --ton-weich: rgba(24,112,184,.15); }
.ton-magenta   { --ton: var(--lagune);       --ton-weich: rgba(13,141,172,.15); }
.ton-tuerkis   { --ton: var(--tuerkis);      --ton-weich: rgba(0,163,164,.15); }
.ton-kobalt    { --ton: var(--kobalt);       --ton-weich: rgba(24,112,184,.15); }
.ton-bernstein { --ton: var(--bernstein);    --ton-weich: rgba(217,154,43,.15); }
.ton-koralle   { --ton: var(--koralle);      --ton-weich: rgba(207,91,74,.15); }
.ton-limette   { --ton: var(--salbei);       --ton-weich: rgba(93,155,122,.15); }

.karte__symbol {
  background: var(--ton-weich, var(--band-weich));
  color: var(--ton, var(--akzent-2));
}

.karte__marke {
  font-family: var(--schrift-daten);
  font-size: .64rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--hell-3);
  display: block;
  margin-bottom: .5rem;
}
.karte__titel { font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem); margin-bottom: .55rem; }
.karte__text { color: var(--hell-2); font-size: .96rem; margin-bottom: var(--luft-2); }
.karte__fuss {
  margin-top: auto;
  padding-top: var(--luft-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--luft-2);
  flex-wrap: wrap;
  border-top: 1px solid var(--rand);
}
.abschnitt--hell .karte__fuss { border-top-color: rgba(10,10,20,.08); }
.karte__preis {
  font-family: var(--schrift-daten);
  font-size: .78rem;
  color: var(--ton, var(--tuerkis));
  font-weight: 600;
}

.karte--gross { padding: clamp(1.8rem, 3vw, 2.8rem); }
/* Traegt die Karte ein Bild, sitzt der Innenabstand im Koerper - sonst
   bekaeme das Bild einen Rahmen aus Leerraum. */
.karte--gross.karte--bild { padding: 0; }
.karte--gross.karte--bild .karte__koerper { padding: clamp(1.5rem, 2.6vw, 2.2rem); }
.karte--flach { background: transparent; }

/* Merkmalsliste in Karten */
.merkmale { list-style: none; margin: 0 0 var(--luft-2); padding: 0; }
.merkmale li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: .55rem;
  font-size: .93rem;
  color: var(--hell-2);
}
.merkmale li::before {
  content: '';
  position: absolute;
  left: 0; top: .58em;
  width: 8px; height: 8px;
  border-radius: 3px;
  background: var(--ton, var(--akzent));
  transform: rotate(45deg);
}
.abschnitt--hell .merkmale li { color: var(--dunkel-2); }

/* Etiketten */
.etikett {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .32rem .72rem;
  border-radius: 100px;
  border: 1px solid var(--rand);
  background: var(--glas);
  font-family: var(--schrift-daten);
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--hell-2);
  white-space: nowrap;
}
.etikett--ton { border-color: var(--ton, var(--akzent)); color: var(--ton, var(--akzent)); background: var(--ton-weich, var(--glas)); }
.abschnitt--hell .etikett { border-color: rgba(10,10,20,.14); color: var(--dunkel-2); background: rgba(10,10,20,.03); }
.etikettreihe { display: flex; flex-wrap: wrap; gap: .45rem; }

/* ═════════════════════════════════════════════════════════════════════════
   11 · Zahlen
   ═════════════════════════════════════════════════════════════════════════ */

.zahlenreihe {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--luft-3);
}
@media (min-width: 860px) { .zahlenreihe { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.zahl { text-align: left; }
.zahl__wert {
  display: block;
  font-family: var(--schrift-titel);
  font-weight: 900;
  font-size: clamp(2.2rem, 1.4rem + 3.4vw, 4rem);
  line-height: 1;
  letter-spacing: -.045em;
  background: var(--band);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.zahl__text {
  display: block;
  margin-top: .5rem;
  font-family: var(--schrift-daten);
  font-size: .7rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--hell-3);
}
.abschnitt--hell .zahl__text { color: var(--dunkel-3); }

/* ═════════════════════════════════════════════════════════════════════════
   12 · Ablauf (Zeitstrahl)
   ═════════════════════════════════════════════════════════════════════════ */

.ablaufliste {
  position: relative;
  display: grid;
  gap: 0;
}
.ablaufliste::before {
  content: '';
  position: absolute;
  left: 27px; top: 1rem; bottom: 1rem;
  width: 2px;
  background: linear-gradient(180deg, var(--tuerkis), var(--lagune), var(--kobalt));
  opacity: .35;
  border-radius: 2px;
}
@media (min-width: 800px) { .ablaufliste::before { left: 33px; } }

.schritt {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: var(--luft-2);
  padding-block: clamp(1.1rem, 2vw, 1.6rem);
  align-items: start;
}
@media (min-width: 800px) { .schritt { grid-template-columns: 68px minmax(0, 1fr); gap: var(--luft-3); } }

.schritt__nr {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 1px solid var(--rand);
  background: var(--tinte-3);
  font-family: var(--schrift-daten);
  font-size: .88rem;
  font-weight: 700;
  color: var(--hell-2);
  flex-shrink: 0;
  transition: border-color var(--weich), color var(--weich), background var(--weich), transform var(--weich);
}
@media (min-width: 800px) { .schritt__nr { width: 68px; height: 68px; font-size: 1rem; } }
.schritt:hover .schritt__nr,
.schritt.ist-sichtbar .schritt__nr {
  border-color: var(--tuerkis);
  color: var(--tuerkis);
  transform: scale(1.05);
}
.abschnitt--hell .schritt__nr { background: #fff; border-color: rgba(10,10,20,.12); color: var(--dunkel-2); }

.schritt__inhalt { padding-top: .4rem; }
.schritt__titel { font-size: clamp(1.12rem, 1rem + .6vw, 1.4rem); margin-bottom: .4rem; }
.schritt__text { color: var(--hell-2); font-size: .96rem; margin: 0; }
.abschnitt--hell .schritt__text { color: var(--dunkel-2); }
.schritt__dauer {
  display: inline-block;
  margin-top: .6rem;
  font-family: var(--schrift-daten);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--hell-3);
}

/* ═════════════════════════════════════════════════════════════════════════
   13 · Stimmen
   ═════════════════════════════════════════════════════════════════════════ */

.stimme {
  position: relative;
  padding: clamp(1.5rem, 3vw, 2.3rem);
  border: 1px solid var(--rand);
  border-radius: var(--rund-3);
  background: var(--glas);
  display: flex;
  flex-direction: column;
}
.stimme__zeichen {
  font-family: var(--schrift-titel);
  font-size: 3.4rem;
  line-height: .7;
  color: var(--kobalt);
  opacity: .5;
  margin-bottom: .4rem;
}
.stimme__text {
  font-size: clamp(1rem, .96rem + .35vw, 1.12rem);
  color: var(--hell);
  margin-bottom: var(--luft-3);
  font-style: italic;
}
.stimme__wer { margin-top: auto; }
.stimme__name { font-weight: 700; display: block; }
.stimme__rolle { font-family: var(--schrift-daten); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--hell-3); }
.abschnitt--hell .stimme { background: #fff; border-color: rgba(10,10,20,.09); }
.abschnitt--hell .stimme__text { color: var(--dunkel); }
.abschnitt--hell .stimme__rolle { color: var(--dunkel-3); }

/* ═════════════════════════════════════════════════════════════════════════
   14 · Fragen (Aufklappen)
   ═════════════════════════════════════════════════════════════════════════ */

.fragenliste { display: grid; gap: .7rem; }

.frage {
  border: 1px solid var(--rand);
  border-radius: var(--rund-2);
  background: var(--glas);
  overflow: hidden;
  transition: border-color var(--weich), background var(--weich);
}
.frage.ist-offen { border-color: var(--rand-stark); background: var(--glas-2); }
.abschnitt--hell .frage { background: #fff; border-color: rgba(10,10,20,.09); }

.frage__knopf {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--luft-2);
  padding: 1.15rem 1.3rem;
  min-height: 56px;
  background: none;
  border: 0;
  color: inherit;
  font-family: var(--schrift-text);
  font-size: 1.02rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  line-height: 1.4;
}
.frage__zeichen {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid var(--rand);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--weich), background var(--weich), border-color var(--weich);
}
.frage__zeichen svg { width: 14px; height: 14px; }
.frage.ist-offen .frage__zeichen { transform: rotate(45deg); background: var(--band); border-color: transparent; color: #fff; }
.abschnitt--hell .frage__zeichen { border-color: rgba(10,10,20,.14); }

.frage__antwort {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--weich);
}
.frage__antwort > div { padding: 0 1.3rem 1.3rem; color: var(--hell-2); font-size: .97rem; }
.abschnitt--hell .frage__antwort > div { color: var(--dunkel-2); }

/* ═════════════════════════════════════════════════════════════════════════
   15 · Seitenkopf der Unterseiten
   ═════════════════════════════════════════════════════════════════════════ */

.seitenkopf {
  position: relative;
  padding-top: calc(var(--kopfhoehe) + clamp(3.6rem, 8vw, 6.5rem));
  padding-bottom: clamp(2.4rem, 5vw, 4rem);
  overflow: hidden;
  border-bottom: 1px solid var(--rand);
}
.seitenkopf__bild {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.seitenkopf__bild img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .88;
  /* Leichte Unschärfe: Das Bild trägt die Stimmung, ohne mit der
     Überschrift um Aufmerksamkeit zu ringen. Dasselbe Mittel wie auf den
     übrigen Seiten, damit alle Köpfe gleich wirken. */
  filter: blur(2px) saturate(115%);
  transform: scale(1.04);
}
.seitenkopf__bild::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Links kräftig, damit die Überschrift steht - rechts bleibt das Bild
     weitgehend offen. */
  background:
    linear-gradient(95deg, rgba(10,15,22,.90) 0%, rgba(10,15,22,.70) 40%, rgba(10,15,22,.30) 74%, rgba(10,15,22,.42) 100%),
    linear-gradient(180deg, rgba(10,15,22,.35), rgba(10,15,22,.08) 45%, rgba(10,15,22,.72));
}
.seitenkopf__innen { position: relative; z-index: 2; }
.seitenkopf__titel { max-width: 18ch; margin-bottom: var(--luft-2); }
.seitenkopf__text { color: var(--hell-2); max-width: 60ch; font-size: clamp(1.02rem, .98rem + .35vw, 1.2rem); }

.pfad {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
  font-family: var(--schrift-daten);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--hell-3);
  margin-bottom: var(--luft-3);
  list-style: none;
  padding: 0;
}
.pfad li { margin: 0; display: flex; align-items: center; gap: .45rem; }
.pfad a { color: var(--hell-3); transition: color var(--schnell); }
.pfad a:hover { color: var(--tuerkis); }
.pfad__teiler { opacity: .5; }

/* ═════════════════════════════════════════════════════════════════════════
   16 · Textinhalte (Redaktion)
   ═════════════════════════════════════════════════════════════════════════ */

.inhaltstext { max-width: 72ch; }
.inhaltstext h2 {
  font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.9rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  margin-bottom: var(--luft-2);
}
.inhaltstext h2:first-child { margin-top: 0; }
.inhaltstext h3 { margin-top: var(--luft-3); }
.inhaltstext p, .inhaltstext li { color: var(--hell-2); }
.inhaltstext a {
  color: var(--tuerkis);
  text-decoration: underline;
  text-underline-offset: .2em;
  text-decoration-thickness: 1px;
}
.inhaltstext a:hover { color: #fff; }
.inhaltstext blockquote {
  margin: var(--luft-3) 0;
  padding: var(--luft-2) var(--luft-3);
  border-left: 3px solid var(--kobalt);
  background: var(--glas);
  border-radius: 0 var(--rund-2) var(--rund-2) 0;
  font-style: italic;
}
.inhaltstext table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--luft-3) 0;
  font-size: .93rem;
}
.inhaltstext th, .inhaltstext td {
  padding: .7rem .8rem;
  border-bottom: 1px solid var(--rand);
  text-align: left;
}
.inhaltstext th { font-family: var(--schrift-daten); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--hell-3); }
.tabellenrolle { overflow-x: auto; }

.abschnitt--hell .inhaltstext p, .abschnitt--hell .inhaltstext li { color: var(--dunkel-2); }
.abschnitt--hell .inhaltstext a { color: var(--kobalt); }

/* Hervorgehobener Ergebniskasten */
.ergebnis {
  position: relative;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: clamp(1.4rem, 3vw, 2.2rem);
  border-radius: var(--rund-3);
  border: 1px solid var(--rand);
  background: var(--band-weich);
}
.ergebnis__marke {
  font-family: var(--schrift-daten);
  font-size: .66rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tuerkis);
  display: block;
  margin-bottom: .6rem;
}
.ergebnis p { margin: 0; font-size: clamp(1.05rem, 1rem + .45vw, 1.25rem); color: var(--hell); }

/* ═════════════════════════════════════════════════════════════════════════
   17 · Listen von Beitraegen und Projekten
   ═════════════════════════════════════════════════════════════════════════ */

.eintragsliste { display: grid; gap: var(--luft-2); }

.eintrag {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--luft-2);
  padding: clamp(1.2rem, 2.4vw, 1.8rem);
  border: 1px solid var(--rand);
  border-radius: var(--rund-3);
  background: var(--glas);
  transition: transform var(--weich), background var(--weich), border-color var(--weich);
  align-items: center;
}
@media (min-width: 780px) {
  .eintrag { grid-template-columns: 230px minmax(0, 1fr) auto; gap: var(--luft-3); }
}
.eintrag:hover { background: var(--glas-2); border-color: var(--tuerkis); }
.eintrag__bild {
  border-radius: var(--rund-2);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--tinte-3);
}
.eintrag__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--schwung); }
.eintrag:hover .eintrag__bild img { transform: scale(1.05); }
.eintrag__titel { font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem); margin-bottom: .45rem; }
.eintrag__text { color: var(--hell-2); font-size: .95rem; margin: 0 0 .7rem; }
.eintrag__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .9rem;
  font-family: var(--schrift-daten);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--hell-3);
}
.eintrag__pfeil {
  display: none;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid var(--rand);
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--weich), border-color var(--weich), transform var(--weich);
}
@media (min-width: 780px) { .eintrag__pfeil { display: flex; } }
.eintrag:hover .eintrag__pfeil { background: var(--band); border-color: transparent; transform: rotate(-45deg); }
.eintrag__pfeil svg { width: 18px; height: 18px; }

/* Projektkacheln */
.projektkachel {
  position: relative;
  display: block;
  border-radius: var(--rund-3);
  overflow: hidden;
  border: 1px solid var(--rand);
  background: var(--tinte-3);
  isolation: isolate;
  transition: transform var(--weich), border-color var(--weich);
}
.projektkachel:hover { border-color: var(--tuerkis); }
.projektkachel__bild { aspect-ratio: 4 / 3; overflow: hidden; }
.projektkachel__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--schwung); }
.projektkachel:hover .projektkachel__bild img { transform: scale(1.06); }
.projektkachel__deck {
  position: absolute;
  inset: auto 0 0 0;
  padding: clamp(1.3rem, 2.4vw, 1.8rem) clamp(1.1rem, 2.4vw, 1.7rem) clamp(1.1rem, 2.4vw, 1.7rem);
  /* Kraeftiger Verlauf, weil viele Referenzbilder helle Screenshots sind -
     ein zarter Schleier reicht dort nicht fuer lesbare Schrift. */
  background: linear-gradient(180deg,
    rgba(10,15,22,0) 0%,
    rgba(10,15,22,.55) 24%,
    rgba(10,15,22,.90) 55%,
    rgba(10,15,22,.97) 100%);
}
.projektkachel__marke,
.projektkachel__titel,
.projektkachel__text { text-shadow: 0 1px 12px rgba(10,15,22,.7); }
.projektkachel__marke {
  font-family: var(--schrift-daten);
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tuerkis-hell);
  /* Eigene Flaeche, weil Referenzbilder oft helle Screenshots sind und
     die duenne Versalschrift darauf sonst verschwindet. */
  display: inline-block;
  padding: .28rem .6rem;
  border-radius: 100px;
  background: rgba(10,15,22,.7);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(22,196,194,.28);
  margin-bottom: .6rem;
  text-shadow: none;
}
.projektkachel__titel { font-size: clamp(1.05rem, .95rem + .55vw, 1.32rem); margin: 0 0 .3rem; color: #fff; }
.projektkachel__text { font-size: .88rem; color: var(--hell-2); margin: 0; }

/* ═════════════════════════════════════════════════════════════════════════
   18 · Formulare
   ═════════════════════════════════════════════════════════════════════════ */

.formular { display: grid; gap: var(--luft-3); }

.feldpaar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--luft-2);
}
@media (min-width: 640px) { .feldpaar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.feldgruppe { display: grid; gap: .45rem; }
.feldgruppe > label {
  font-family: var(--schrift-daten);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--hell-3);
  font-weight: 600;
}
.abschnitt--hell .feldgruppe > label { color: var(--dunkel-3); }
.pflichtstern { color: var(--tuerkis); }

.eingabe {
  width: 100%;
  padding: .95rem 1.05rem;
  min-height: 50px;
  border: 1px solid var(--rand);
  border-radius: var(--rund-2);
  background: rgba(255,255,255,.035);
  color: var(--hell);
  font-family: var(--schrift-text);
  font-size: 1rem;
  line-height: 1.5;
  transition: border-color var(--schnell), background var(--schnell), box-shadow var(--schnell);
}
.eingabe::placeholder { color: var(--hell-3); }
.eingabe:focus {
  outline: none;
  border-color: var(--kobalt);
  background: rgba(255,255,255,.06);
  box-shadow: 0 0 0 3px rgba(24,112,184,.22);
}
textarea.eingabe { min-height: 150px; resize: vertical; }
select.eingabe { appearance: none; cursor: pointer; padding-right: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237b7b90' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 15px;
}
select.eingabe option { background: var(--tinte-2); color: var(--hell); }

.abschnitt--hell .eingabe { background: #fff; border-color: rgba(10,10,20,.14); color: var(--dunkel); }
.abschnitt--hell .eingabe:focus { background: #fff; }

.hilfe { font-size: .82rem; color: var(--hell-3); margin: 0; }
.abschnitt--hell .hilfe { color: var(--dunkel-3); }

/* Auswahlkacheln statt schlichter Auswahlliste */
.wahlraster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .6rem;
}
@media (min-width: 560px) { .wahlraster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .wahlraster--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.wahlkachel { position: relative; display: block; }
.wahlkachel input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
}
.wahlkachel__flaeche {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .95rem 1.05rem;
  min-height: 52px;
  border: 1px solid var(--rand);
  border-radius: var(--rund-2);
  background: rgba(255,255,255,.03);
  cursor: pointer;
  font-size: .94rem;
  font-weight: 500;
  transition: border-color var(--schnell), background var(--schnell), transform var(--schnell);
}
.wahlkachel__flaeche::before {
  content: '';
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid var(--rand-stark);
  flex-shrink: 0;
  transition: border-color var(--schnell), box-shadow var(--schnell), background var(--schnell);
}
.wahlkachel:hover .wahlkachel__flaeche { border-color: var(--rand-stark); background: rgba(255,255,255,.055); }
.wahlkachel input:checked + .wahlkachel__flaeche {
  border-color: var(--kobalt);
  background: rgba(24,112,184,.14);
}
.wahlkachel input:checked + .wahlkachel__flaeche::before {
  border-color: var(--kobalt);
  background: var(--kobalt);
  box-shadow: inset 0 0 0 3px var(--tinte);
}
.wahlkachel input:focus-visible + .wahlkachel__flaeche {
  outline: 2px solid var(--tuerkis);
  outline-offset: 2px;
}

/* Honigtopf: unsichtbar, muss leer bleiben */
.honigtopf {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* Rechenaufgabe */
/* Die Sicherheitsfrage liegt als eigenes Fenster über der Seite. Im
   Formular selbst ging sie unter, besonders bei langen Seiten. */
.aufgabe {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 2.5rem);
  background: rgba(6,10,15,.9);
  backdrop-filter: blur(14px);
  animation: fensterauf .3s cubic-bezier(.16,1,.3,1);
}
.aufgabe__kasten {
  width: min(440px, 100%);
  border: 1px solid var(--rand);
  border-radius: var(--rund-3);
  padding: clamp(1.6rem, 4vw, 2.4rem);
  background: var(--tinte-2);
  box-shadow: 0 40px 90px -40px rgba(0,0,0,.95);
  text-align: center;
  animation: fensterrein .4s cubic-bezier(.16,1,.3,1);
}
@keyframes fensterauf  { from { opacity: 0; } to { opacity: 1; } }
@keyframes fensterrein { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.aufgabe__marke {
  font-family: var(--schrift-daten);
  font-size: .66rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tuerkis);
  display: block;
  margin-bottom: .5rem;
}
.aufgabe__frage {
  font-family: var(--schrift-titel);
  font-size: clamp(1.4rem, 1.2rem + .8vw, 1.9rem);
  font-weight: 700;
  margin: 0 0 1.1rem;
  color: var(--hell);
}
.aufgabe__frage b { color: var(--tuerkis); }
.aufgabe__eingabe {
  width: 150px;
  margin-inline: auto;
  text-align: center;
  font-family: var(--schrift-daten);
  font-size: 1.3rem;
  padding: .8rem 1rem;
  min-height: 48px;
  border: 1px solid var(--rand-stark);
  border-radius: var(--rund-1);
  background: rgba(255,255,255,.05);
  color: var(--hell);
  font-family: var(--schrift-daten);
  font-size: 1.1rem;
  text-align: center;
}
.aufgabe__hinweis { font-size: .84rem; color: var(--hell-3); margin: .8rem 0 0; }
.aufgabe__knoepfe {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: var(--luft-2);
}
/* Das Fenster liegt über allem – es bleibt dunkel, auch wenn das Formular
   in einem hellen Abschnitt steht. */
.aufgabe__hinweis { color: var(--hell-3); font-size: .85rem; }

/* Sprungleiste fuer lange Formulare */
.sprungleiste {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  padding: .75rem;
  border: 1px solid var(--rand);
  border-radius: var(--rund-2);
  background: var(--glas);
  margin-bottom: var(--luft-3);
}
.sprungleiste a {
  padding: .5rem .85rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--rund-1);
  font-family: var(--schrift-daten);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--hell-2);
  transition: background var(--schnell), color var(--schnell);
}
.sprungleiste a:hover { background: var(--glas-2); color: #fff; }

/* Meldungen */
.notiz {
  padding: 1rem 1.2rem;
  border-radius: var(--rund-2);
  border: 1px solid var(--rand);
  background: var(--glas);
  margin-bottom: var(--luft-3);
  font-size: .96rem;
  display: flex;
  gap: .75rem;
  align-items: flex-start;
}
.notiz--erfolg { border-color: rgba(0,163,164,.45); background: rgba(0,163,164,.10); }
.notiz--fehler { border-color: rgba(207,91,74,.5);  background: rgba(207,91,74,.11); }
.notiz--info   { border-color: rgba(24,112,184,.45); background: rgba(24,112,184,.10); }
.notiz svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: .15rem; }

/* ═════════════════════════════════════════════════════════════════════════
   19 · Kontaktkacheln
   ═════════════════════════════════════════════════════════════════════════ */

.kontaktkachel {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  padding: clamp(1.2rem, 2.4vw, 1.7rem);
  border: 1px solid var(--rand);
  border-radius: var(--rund-3);
  background: var(--glas);
  transition: border-color var(--weich), background var(--weich), transform var(--weich);
}
a.kontaktkachel:hover { border-color: var(--tuerkis); background: var(--glas-2); }
.kontaktkachel__marke {
  font-family: var(--schrift-daten);
  font-size: .64rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--hell-3);
}
.kontaktkachel__wert { font-size: 1.05rem; font-weight: 600; }
.kontaktkachel__zusatz { font-size: .88rem; color: var(--hell-2); margin: 0; }

/* ═════════════════════════════════════════════════════════════════════════
   20 · Aufruf zum Handeln
   ═════════════════════════════════════════════════════════════════════════ */

.aufruf {
  position: relative;
  border-radius: var(--rund-4);
  padding: clamp(2.2rem, 5vw, 4.5rem);
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--rand);
  background: linear-gradient(135deg, rgba(24,112,184,.28), rgba(0,163,164,.18) 45%, rgba(0,163,164,.20));
  text-align: center;
}
.aufruf::before {
  content: '';
  position: absolute;
  inset: -40%;
  background: conic-gradient(from 0deg, transparent, rgba(255,255,255,.10), transparent 30%);
  animation: drehen 14s linear infinite;
  z-index: -1;
}
.aufruf__titel { max-width: 20ch; margin-inline: auto; }
.aufruf__text { color: var(--hell-2); max-width: 54ch; margin-inline: auto; margin-bottom: var(--luft-3); }
.aufruf .knopfreihe { justify-content: center; }

/* ═════════════════════════════════════════════════════════════════════════
   21 · Fussbereich
   ═════════════════════════════════════════════════════════════════════════ */

.fusszeile {
  position: relative;
  border-top: 1px solid var(--rand);
  background: var(--tinte-2);
  padding-top: clamp(3rem, 6vw, 5rem);
  padding-bottom: var(--luft-3);
  margin-top: 0;
}

.fusszeile__raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--luft-4);
  margin-bottom: var(--luft-4);
}
@media (min-width: 720px) { .fusszeile__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1020px) { .fusszeile__raster { grid-template-columns: 1.7fr repeat(3, minmax(0, 1fr)); } }

.fusszeile__text { color: var(--hell-3); font-size: .94rem; max-width: 40ch; }
.fusszeile h3 {
  font-family: var(--schrift-daten);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--hell-3);
  margin-bottom: var(--luft-2);
}
.fusszeile ul { list-style: none; margin: 0; padding: 0; }
.fusszeile li { margin-bottom: .1rem; }
.fusszeile li a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  color: var(--hell-2);
  font-size: .94rem;
  transition: color var(--schnell), transform var(--schnell);
}
.fusszeile li a:hover { color: var(--tuerkis); }

.fusszeile__unten {
  border-top: 1px solid var(--rand);
  padding-top: var(--luft-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--luft-2);
  align-items: center;
  justify-content: space-between;
  font-size: .87rem;
  color: var(--hell-3);
}
.fusszeile__unten a,
.fusszeile__unten .fussknopf { color: var(--hell-2); }
.fusszeile__unten a:hover,
.fusszeile__unten .fussknopf:hover { color: var(--tuerkis); }
.urheber a { text-decoration: underline; text-underline-offset: .18em; }
.herz { color: var(--tuerkis); display: inline-block; animation: herzschlag 2.6s ease-in-out infinite; }
@keyframes herzschlag {
  0%, 100% { transform: scale(1); }
  14%      { transform: scale(1.22); }
  28%      { transform: scale(1); }
}

.fusszeile__marke {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: var(--luft-2);
}
.fusszeile__marke img { height: 32px; width: auto; }

/* ═════════════════════════════════════════════════════════════════════════
   22 · Einblenden beim Scrollen
   ═════════════════════════════════════════════════════════════════════════ */

[data-auf] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .75s cubic-bezier(.16,1,.3,1), transform .75s cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform;
}
[data-auf].ist-sichtbar { opacity: 1; transform: none; }
[data-auf="links"]  { transform: translateX(-26px); }
[data-auf="rechts"] { transform: translateX(26px); }
[data-auf="klein"]  { transform: scale(.96); }
[data-auf="links"].ist-sichtbar,
[data-auf="rechts"].ist-sichtbar,
[data-auf="klein"].ist-sichtbar { transform: none; }

/* Ohne JavaScript bleibt alles sichtbar. */
.kein-js [data-auf] { opacity: 1; transform: none; }



/* ═════════════════════════════════════════════════════════════════════════
   24 · Wartung, Sperre, Fehlerseite
   ═════════════════════════════════════════════════════════════════════════ */

.mittelseite {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* Oben Platz fuer die feste Kopfzeile lassen, sonst schiebt sich die
     grosse Zahl darunter. */
  padding: calc(var(--kopfhoehe) + 3rem) 1.2rem 4rem;
}
.grossezahl {
  font-family: var(--schrift-titel);
  font-weight: 900;
  font-size: clamp(5rem, 18vw, 12rem);
  line-height: .85;
  letter-spacing: -.06em;
  background: var(--band);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: var(--luft-3);
  animation: bandwandern 7s ease-in-out infinite alternate;
}

.hinweisleiste {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 180;
  background: var(--band);
  color: #fff;
  padding: .8rem 1.2rem;
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  font-weight: 600;
  text-align: center;
}
.hinweisleiste a {
  text-decoration: underline;
  text-underline-offset: .2em;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* ═════════════════════════════════════════════════════════════════════════
   25 · Kleinteile
   ═════════════════════════════════════════════════════════════════════════ */

.trennlinie { height: 1px; background: var(--rand); border: 0; }

.zweispalt {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.6rem);
  align-items: start;
}
@media (min-width: 940px) {
  .zweispalt { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .zweispalt--schmal-rechts { grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); }
  .zweispalt--schmal-links  { grid-template-columns: minmax(0, .65fr) minmax(0, 1.35fr); }
}

.klebrig { position: sticky; top: calc(var(--kopfunten, var(--kopfhoehe)) + 1.4rem); }

.bildrahmen {
  border-radius: var(--rund-3);
  overflow: hidden;
  border: 1px solid var(--rand);
  background: var(--tinte-3);
}
.bildrahmen img { width: 100%; height: auto; display: block; }
.bildrahmen--quer { aspect-ratio: 16 / 9; }
.bildrahmen--quer img { height: 100%; object-fit: cover; }

.personenkarte { text-align: left; }
.personenkarte__bild {
  aspect-ratio: 1;
  border-radius: var(--rund-3);
  overflow: hidden;
  background: var(--band-weich);
  margin-bottom: var(--luft-2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.personenkarte__bild img { width: 100%; height: 100%; object-fit: cover; }
/* Ohne Foto braucht die Flaeche kein Quadrat - sonst klafft eine Luecke. */
.personenkarte__bild:not(:has(img)) { aspect-ratio: 3 / 1; }
.personenkarte__buchstaben {
  font-family: var(--schrift-titel);
  font-weight: 900;
  font-size: clamp(3rem, 8vw, 5rem);
  letter-spacing: -.05em;
  background: var(--band);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.personenkarte__rolle {
  font-family: var(--schrift-daten);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tuerkis);
  display: block;
  margin-bottom: .5rem;
}

/* ═════════════════════════════════════════════════════════════════════════
   26 · Bewegung reduzieren
   ═════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  [data-auf] { opacity: 1 !important; transform: none !important; }
  .buehne__titel .zeile > span { transform: none !important; }
  .buehne__text, .buehne__knoepfe, .buehne__marken { opacity: 1 !important; }
  .nordlicht__fleck { animation: none !important; }
  .laufband__spur { animation: none !important; }
}

/* ═════════════════════════════════════════════════════════════════════════
   27 · Ausdruck
   ═════════════════════════════════════════════════════════════════════════ */

@media print {
  :root { --kopfhoehe: 0px; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .kopfzeile, .mobilmenue, .fusszeile__raster, .nordlicht, .korn,
  .fortschritt, .laufband, .aufruf, .hinweisleiste { display: none !important; }
  .abschnitt { padding-block: 1rem; }
  a { color: #000; text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
  .karte, .eintrag, .stimme, .frage { border: 1px solid #ccc; background: none; break-inside: avoid; }
  h1, h2, h3 { color: #000; break-after: avoid; }
  .frage__antwort { max-height: none !important; }
  .fliess, .karte__text, .inhaltstext p { color: #222; }
}

/* ═════════════════════════════════════════════════════════════════════════
   28 · Agenturblock im Impressum
   ═════════════════════════════════════════════════════════════════════════ */

.urheberblock__kopf { margin-bottom: var(--luft-3); }
.urheberblock__logo { height: 46px; width: auto; }

.datenzeilen {
  margin: 0 0 var(--luft-3);
  padding: 0;
  border-top: 1px solid var(--rand);
}
.datenzeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .1rem;
  padding: .75rem 0;
  border-bottom: 1px solid var(--rand);
}
@media (min-width: 560px) {
  .datenzeile { grid-template-columns: 8.5rem minmax(0, 1fr); gap: var(--luft-2); align-items: baseline; }
}
.datenzeile dt {
  font-family: var(--schrift-daten);
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--hell-3);
}
.datenzeile dd { margin: 0; font-size: .96rem; color: var(--hell-2); }
.datenzeile dd a { color: var(--tuerkis); }
.abschnitt--hell .datenzeilen, .abschnitt--hell .datenzeile { border-color: rgba(10,10,20,.1); }
.abschnitt--hell .datenzeile dt { color: var(--dunkel-3); }
.abschnitt--hell .datenzeile dd { color: var(--dunkel-2); }


/* ═════════════════════════════════════════════════════════════════════════
   Bildstreifen, Bildband und Loesungsmoeglichkeiten
   ═════════════════════════════════════════════════════════════════════════ */

/* Drei Bilder nebeneinander, randlos ueber die volle Breite. Trennt zwei
   Abschnitte und gibt der Seite Luft. */
.bildstreifen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--rand);
}
.bildstreifen__feld {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--tinte-3);
}
.bildstreifen__feld img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(.16,1,.3,1);
}
.bildstreifen__feld:hover img { transform: scale(1.05); }
.bildstreifen__feld::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,15,22,.35), rgba(10,15,22,.12));
  pointer-events: none;
}
@media (max-width: 700px) {
  .bildstreifen { grid-template-columns: 1fr 1fr; }
  .bildstreifen__feld:last-child { display: none; }
  .bildstreifen__feld { aspect-ratio: 1; }
}

/* Ein einzelnes Bild ueber die volle Breite. */
.bildband {
  position: relative;
  height: clamp(240px, 34vw, 460px);
  overflow: hidden;
  background: var(--tinte-3);
}
.bildband img { width: 100%; height: 100%; object-fit: cover; }
.bildband::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,15,22,.55), rgba(10,15,22,.2) 40%, rgba(10,15,22,.55));
}

/* Loesungsmoeglichkeit: eine Zeile mit Haken. */
.moeglichkeit {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .95rem 1.1rem;
  border: 1px solid var(--rand);
  border-radius: var(--rund-2);
  background: var(--glas);
  font-size: .95rem;
  line-height: 1.5;
  transition: border-color var(--weich), background var(--weich), transform var(--weich);
}
.moeglichkeit:hover { border-color: var(--tuerkis); }
.moeglichkeit__zeichen {
  flex: none;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--band-weich);
  color: var(--tuerkis);
  margin-top: .05rem;
}
.moeglichkeit__zeichen .symbol { width: 13px; height: 13px; }
.abschnitt--hell .moeglichkeit {
  border-color: var(--rand-hell);
  background: #fff;
  color: var(--dunkel);
}
.abschnitt--hell .moeglichkeit:hover { border-color: var(--kobalt); }
.abschnitt--hell .moeglichkeit__zeichen { color: var(--kobalt); }

/* Wolke aus anklickbaren Moeglichkeiten auf der Startseite. */
.wolke {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  justify-content: center;
}
.wolke__punkt {
  display: inline-flex;
  flex-direction: column;
  gap: .1rem;
  padding: .7rem 1.1rem;
  border: 1px solid var(--rand);
  border-radius: 100px;
  background: var(--glas);
  color: var(--hell);
  font-size: .92rem;
  font-weight: 500;
  line-height: 1.35;
  transition: border-color var(--weich), transform var(--weich), box-shadow var(--weich);
}
.wolke__punkt:hover {
  border-color: var(--tuerkis);
  background: var(--glas-2);
}
.wolke__herkunft {
  font-family: var(--schrift-daten);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--hell-3);
}
/* Auf hellem Grund dreht sich das um. */
.abschnitt--hell .wolke__punkt {
  border-color: var(--rand-hell);
  background: #fff;
  color: var(--dunkel);
}
.abschnitt--hell .wolke__punkt:hover {
  border-color: var(--kobalt);
  box-shadow: 0 8px 20px -10px rgba(24,112,184,.5);
}
.abschnitt--hell .wolke__herkunft { color: var(--dunkel-3); }
@media (max-width: 700px) {
  .wolke { justify-content: flex-start; }
  .wolke__punkt { font-size: .88rem; padding: .6rem .95rem; }
}


/* ═════════════════════════════════════════════════════════════════════════
   Feinschliff fuer schmale Geraete
   ═════════════════════════════════════════════════════════════════════════ */

@media (max-width: 560px) {
  /* Die Marke oben soll in einer Zeile bleiben statt umzubrechen. */
  .buehne__marke {
    font-size: .6rem;
    letter-spacing: .12em;
    padding: .35rem .8rem .35rem .35rem;
    gap: .5rem;
    max-width: 100%;
  }
  .buehne__marke b { padding: .24rem .5rem; white-space: nowrap; }

  /* Schaltflaechen nebeneinander wirken gequetscht - untereinander ueber
     die volle Breite ist auf dem Telefon besser zu treffen. */
  .buehne__knoepfe { display: grid; gap: .6rem; }
  .buehne__knoepfe .schalter { width: 100%; justify-content: center; }

  .buehne { min-height: auto; padding-bottom: 2rem; }
  .buehne__titel { font-size: clamp(2.1rem, 9vw, 3rem); }
  .buehne__schnellzugriff { margin-top: 2rem; }
  .buehne__kurz { padding: 1rem 0; }

  /* Knopfreihen allgemein */
  .knopfreihe { gap: .6rem; }
  .abschnitt .knopfreihe .schalter--gross { width: 100%; justify-content: center; }
}

@media (max-width: 380px) {
  /* Sehr schmale Geraete: Innenabstaende zurueckfahren, damit der Text
     nicht in zu kurze Zeilen zerfaellt. */
  .bahn { width: min(100% - 1.6rem, var(--bahn)); }
  .karte__koerper { padding: 1rem; }
  .buehne__titel { font-size: clamp(1.9rem, 9.5vw, 2.6rem); }
  .zahl__wert { font-size: clamp(2.2rem, 13vw, 3rem); }
}

/* ═════════════════════════════════════════════════════════════════════════
   Verzeichnis auf den Rechtstexten
   Links das Verzeichnis, rechts der Text. Der gerade gelesene Abschnitt
   wird hervorgehoben.
   ═════════════════════════════════════════════════════════════════════════ */

.rechtsnav__marke {
  display: block;
  font-family: var(--schrift-daten);
  font-size: .66rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--hell-3);
  margin-bottom: .9rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--rand);
}
.rechtsnav__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  /* Bei sehr langen Verzeichnissen scrollt die Liste in sich, während der
     Block als Ganzes mitwandert - sonst müsste man an hundert Einträgen
     vorbeiscrollen, um wieder nach oben zu kommen. */
  max-height: calc(100vh - var(--kopfunten, 78px) - 6rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--rand-stark) transparent;
}
.rechtsnav__liste::-webkit-scrollbar { width: 5px; }
.rechtsnav__liste::-webkit-scrollbar-thumb {
  background: var(--rand-stark);
  border-radius: 99px;
}
.rechtsnav__liste li { margin: 0; }
/* Der Inhaltsbereich neben dem Verzeichnis darf nicht breiter werden als
   seine Spalte - sonst schiebt langer Text die Seite auseinander. */
.zweispalt > * { min-width: 0; }
.rechtsnav__liste a {
  display: flex;
  gap: .7rem;
  align-items: baseline;
  padding: .5rem .7rem;
  border-radius: var(--rund-1);
  font-size: .88rem;
  line-height: 1.4;
  color: var(--hell-3);
  border-left: 2px solid transparent;
  transition: color var(--schnell), background var(--schnell), border-color var(--schnell);
}
.rechtsnav__liste a:hover { color: var(--hell); background: var(--glas); }
.rechtsnav__liste a.ist-hier {
  color: var(--hell);
  background: var(--glas-2);
  border-left-color: var(--tuerkis);
}
.rechtsnav__nr {
  flex: none;
  font-family: var(--schrift-daten);
  font-size: .68rem;
  color: var(--tuerkis-hell);
  opacity: .75;
}

/* Auf schmalen Geräten steht das Verzeichnis über dem Text und klappt
   zusammen - sonst müsste man an zwanzig Zeilen vorbeiscrollen. */
@media (max-width: 940px) {
  .rechtsnav .klebrig { position: static; }
  .rechtsnav__liste {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: .1rem;
    max-height: none;
    padding-bottom: 1.4rem;
    margin-bottom: 1.4rem;
    border-bottom: 1px solid var(--rand);
  }
}

/* Fließtext, der die volle Bahnbreite nutzen darf. Auf den Rechtstexten
   wirkt eine zu schmale Spalte unter dem breiten Seitenkopf verloren. */
.inhaltstext--breit { max-width: none; }
.inhaltstext--breit p,
.inhaltstext--breit li { max-width: 78ch; }

/* ═════════════════════════════════════════════════════════════════════════
   Sammelseite der Lösungsmöglichkeiten
   ═════════════════════════════════════════════════════════════════════════ */

.moeglichblock {
  padding-bottom: var(--luft-5);
  margin-bottom: var(--luft-5);
  border-bottom: 1px solid var(--rand);
  scroll-margin-top: calc(var(--kopfhoehe) + 1.5rem);
}
.moeglichblock:last-of-type { border-bottom: 0; margin-bottom: 0; }

.moeglichblock__kopf {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  margin-bottom: var(--luft-3);
}
.moeglichblock__kopf h2 {
  margin: .3rem 0 .5rem;
  /* Zusammengesetzte Begriffe wie „Buchungs- & Reservierungssoftware“
     sprengen auf schmalen Geräten sonst die Spalte. */
  overflow-wrap: anywhere;
  hyphens: auto;
}
.moeglichblock__kopf > div { min-width: 0; }
.moeglichblock__kopf .fliess { margin: 0; }
.moeglichblock__kopf .karte__symbol { flex: none; margin: 0; }

/* Zwei Spalten, damit die langen Listen nicht endlos untereinander stehen. */
.moeglichliste {
  list-style: none;
  margin: 0 0 var(--luft-3);
  padding: 0;
  display: grid;
  /* minmax(0, …) statt einer festen Mindestbreite: Auf sehr schmalen
     Geräten würde eine Spalte sonst breiter als der Bildschirm. */
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap: .1rem 1.6rem;
}
.moeglichliste li span { min-width: 0; overflow-wrap: anywhere; }
.moeglichliste li {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  margin: 0;
  padding: .5rem 0;
  font-size: .95rem;
  line-height: 1.45;
  color: var(--hell-2);
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.moeglichliste .symbol {
  flex: none;
  width: 15px; height: 15px;
  margin-top: .28rem;
  color: var(--ton, var(--tuerkis));
}

/* ═════════════════════════════════════════════════════════════════════════
   STARTSEITE
   Eigene Bausteine, damit die Startseite nicht wie eine Aneinanderreihung
   von Kartenrastern wirkt.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── Manifest ─────────────────────────────────────────────────────────
   Ein großer Satz über die volle Breite. Er trägt den Abschnitt allein,
   deshalb bekommt er viel Luft und eine ruhige Zeilenführung. */
.manifest {
  padding-block: clamp(6rem, 14vw, 11rem);
  border-bottom: 1px solid var(--rand);
}
.manifest__satz {
  font-family: var(--schrift-titel);
  font-weight: 500;
  font-size: clamp(1.4rem, .9rem + 2.1vw, 2.9rem);
  line-height: 1.28;
  letter-spacing: -.02em;
  color: var(--hell);
  /* Der Satz soll die Bahn ausfüllen - ein schmaler Block mit viel Leere
     rechts daneben wirkt wie ein Fehler im Layout. */
  max-width: 30ch;
  margin: 0;
  text-wrap: balance;
}
.manifest__satz em {
  font-style: normal;
  background: var(--band);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.manifest__zusatz {
  margin: clamp(1.8rem, 4vw, 2.8rem) 0 0;
  font-size: clamp(1rem, .95rem + .35vw, 1.12rem);
  line-height: 1.75;
  color: var(--hell-3);
}
/* Ab Tabletbreite zweispaltig - so bleibt die Zeile lesbar kurz und der
   Text füllt trotzdem die Bahn. */
/* Ab Tabletbreite nebeneinander statt untereinander - so bleibt die Zeile
   lesbar kurz und der Text füllt trotzdem die Bahn. Zwei echte Spalten
   statt eines Textflusses, damit die Absätze zusammenbleiben. */
@media (min-width: 860px) {
  .manifest__zusatz {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(2rem, 5vw, 4rem);
    max-width: 84ch;
  }
}
.manifest__zusatz p { margin: 0 0 1rem; }
.manifest__zusatz p:last-child { margin-bottom: 0; }
.manifest__satz b {
  font-weight: 700;
  color: var(--hell);
  background: var(--band);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media (min-width: 900px)  { .manifest__satz { max-width: 34ch; } }
@media (min-width: 1250px) { .manifest__satz { max-width: 38ch; font-size: clamp(2.2rem, 1rem + 2.4vw, 3.3rem); } }

.manifest__kunden {
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
  padding-top: 1.6rem;
  border-top: 1px solid var(--rand);
  display: grid;
  gap: 1rem;
}
.manifest__kundenmarke {
  font-family: var(--schrift-daten);
  font-size: .66rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--hell-3);
}
.manifest__namen {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 2.2rem;
}
.manifest__namen span {
  font-size: .95rem;
  color: var(--hell-3);
  transition: color var(--weich);
}
.manifest__namen:hover span { color: var(--hell-3); }
.manifest__namen span:hover { color: var(--hell); }

/* ── Leistungen als Liste ────────────────────────────────────────────
   Nummerierte Zeilen links, mitlaufendes Bild rechts. Der Wechsel
   uebernimmt haupt.js. */
.leistungsliste__kopf { max-width: 720px; margin-bottom: clamp(2rem, 5vw, 3.5rem); }

.leistungsliste {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
}
@media (min-width: 1000px) {
  .leistungsliste { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); }
}

.leistungsliste__zeilen { border-top: 1px solid var(--rand); }

.leistungszeile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.2rem;
  padding: clamp(1rem, 2.2vw, 1.5rem) 0;
  border-bottom: 1px solid var(--rand);
  position: relative;
  transition: color var(--weich);
}
/* Ein Farbstreifen faehrt beim Zeigen von links ein - ohne das Layout
   anzufassen, damit nichts umbricht. */
.leistungszeile::before {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--band);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.leistungszeile:hover::before,
.leistungszeile.ist-aktiv::before { transform: scaleX(1); }

.leistungszeile__nr {
  font-family: var(--schrift-daten);
  font-size: .78rem;
  color: var(--hell-3);
  width: 2.2rem;
  flex: none;
}
.leistungszeile:hover .leistungszeile__nr,
.leistungszeile.ist-aktiv .leistungszeile__nr { color: var(--tuerkis); }

.leistungszeile__titel {
  display: block;
  font-family: var(--schrift-titel);
  font-weight: 700;
  font-size: clamp(1.15rem, 1rem + 1vw, 1.9rem);
  line-height: 1.2;
  color: var(--hell-2);
  transition: color var(--weich);
}
.leistungszeile:hover .leistungszeile__titel,
.leistungszeile.ist-aktiv .leistungszeile__titel { color: var(--hell); }

.leistungszeile__text {
  display: block;
  font-size: .88rem;
  color: var(--hell-3);
  margin-top: .2rem;
}

/* Kleines Bild in der Zeile - nur dort, wo die Bildsäule fehlt. */
.leistungszeile__bild {
  display: block;
  width: 74px;
  aspect-ratio: 4 / 3;
  border-radius: var(--rund-1);
  overflow: hidden;
  background: var(--tinte-3);
  flex: none;
}
.leistungszeile__bild img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1000px) { .leistungszeile__bild { display: none; } }

.leistungszeile__pfeil {
  color: var(--hell-3);
  display: grid;
  place-items: center;
  transition: color var(--weich), transform var(--weich);
}
.leistungszeile__pfeil .symbol { width: 18px; height: 18px; }
.leistungszeile:hover .leistungszeile__pfeil,
.leistungszeile.ist-aktiv .leistungszeile__pfeil {
  color: var(--tuerkis);
  transform: translateX(4px);
}

/* Bildsäule: alle Bilder gestapelt, sichtbar ist das zur aktiven Zeile. */
.leistungsliste__buehne {
  display: none;
  position: sticky;
  top: calc(var(--kopfhoehe) + 2rem);
}
@media (min-width: 1000px) { .leistungsliste__buehne { display: grid; } }
.leistungsliste__buehne > * { grid-area: 1 / 1; }

.leistungsliste__folie {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  border-radius: var(--rund-3);
  overflow: hidden;
  border: 1px solid var(--rand);
  opacity: 0;
  visibility: hidden;
  transform: scale(1.02);
  transition: opacity .6s cubic-bezier(.16,1,.3,1),
              transform .6s cubic-bezier(.16,1,.3,1), visibility .6s;
}
.leistungsliste__folie.ist-aktiv { opacity: 1; visibility: visible; transform: none; }
.leistungsliste__folie img { width: 100%; height: 100%; object-fit: cover; }
.leistungsliste__folie figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.4rem;
  background: linear-gradient(180deg, transparent, rgba(10,15,22,.92) 60%);
}
.leistungsliste__gruppe {
  display: block;
  font-family: var(--schrift-daten);
  font-size: .64rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tuerkis-hell);
  margin-bottom: .3rem;
}
.leistungsliste__titel {
  display: block;
  font-family: var(--schrift-titel);
  font-weight: 700;
  font-size: 1.25rem;
  color: #fff;
}

/* ── Referenzen im versetzten Raster ─────────────────────────────────
   Unterschiedlich hohe Kacheln statt gleichfoermiger Reihen. */
.versatz {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.4vw, 1.8rem);
  align-items: start;
}
.versatz__kachel {
  position: relative;
  display: block;
  border-radius: var(--rund-3);
  overflow: hidden;
  background: var(--tinte-3);
}
.versatz__kachel--gross { aspect-ratio: 4 / 3; }
.versatz__kachel--hoch  { aspect-ratio: 3 / 4; }
.versatz__kachel--quer  { aspect-ratio: 4 / 3; }
/* Die zweite Spalte laeuft versetzt mit - das bricht die starre Reihe auf. */
@media (min-width: 800px) {
  .versatz__kachel:nth-child(even) { margin-top: clamp(2rem, 6vw, 5rem); }
}
@media (max-width: 620px) {
  .versatz { grid-template-columns: minmax(0, 1fr); }
  .versatz__kachel { aspect-ratio: 4 / 3; }
  .versatz__kachel:nth-child(even) { margin-top: 0; }
}

.versatz__bild { display: block; width: 100%; height: 100%; }
.versatz__bild img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1s cubic-bezier(.16,1,.3,1);
}
.versatz__kachel:hover .versatz__bild img { transform: scale(1.05); }

.versatz__deck {
  position: absolute;
  inset: auto 0 0 0;
  padding: clamp(1.2rem, 2.4vw, 1.8rem);
  background: linear-gradient(180deg, rgba(10,15,22,0), rgba(10,15,22,.55) 30%, rgba(10,15,22,.95));
}
.versatz__titel {
  display: block;
  font-family: var(--schrift-titel);
  font-weight: 700;
  font-size: clamp(1.05rem, .95rem + .6vw, 1.4rem);
  color: #fff;
  margin-bottom: .2rem;
  text-shadow: 0 1px 12px rgba(10,15,22,.7);
}
.versatz__kunde { display: block; font-size: .88rem; color: var(--hell-2); }

/* ── Agenturband ─────────────────────────────────────────────────────── */
.agenturband { padding-block: var(--abschnitt-y); }
.agenturband__innen {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 900px) {
  .agenturband__innen { grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); }
}
.agenturband__bild {
  position: relative;
  border-radius: var(--rund-3);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--rand);
}
.agenturband__bild img { width: 100%; height: 100%; object-fit: cover; }
.agenturband__marke {
  position: absolute;
  left: 1rem; bottom: 1rem;
  padding: .45rem .9rem;
  border-radius: 100px;
  background: rgba(10,15,22,.75);
  backdrop-filter: blur(8px);
  font-family: var(--schrift-daten);
  font-size: .7rem;
  letter-spacing: .08em;
  color: var(--hell-2);
}

/* Zahlen als Zeilen statt als vier gleiche Kacheln. */
.zahlenzeilen {
  margin: clamp(1.6rem, 4vw, 2.6rem) 0;
  padding: 0;
  display: grid;
  gap: 0;
}
.zahlenzeilen > div {
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
  padding: .85rem 0;
  border-bottom: 1px solid var(--rand);
}
.zahlenzeilen > div:first-child { border-top: 1px solid var(--rand); }
.zahlenzeilen dt { margin: 0; flex: none; min-width: 5.5rem; }
.zahlenzeilen dt .zahl__wert { font-size: clamp(1.8rem, 1.2rem + 1.6vw, 2.6rem); }
.zahlenzeilen dd { margin: 0; color: var(--hell-3); font-size: .95rem; }

/* ── Kundenstimme ─────────────────────────────────────────────────────
   Eine große Stimme statt drei kleiner Karten. */
.stimmband {
  padding-block: var(--abschnitt-y);
  background:
    radial-gradient(80% 130% at 50% 0%, rgba(24,112,184,.16), transparent 60%),
    var(--tinte-2);
  border-top: 1px solid var(--rand);
  border-bottom: 1px solid var(--rand);
}
.stimmband .bahn { display: grid; }
.stimmband__zitat {
  grid-area: 1 / 1;
  margin: 0;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .7s cubic-bezier(.16,1,.3,1),
              transform .7s cubic-bezier(.16,1,.3,1), visibility .7s;
}
.stimmband__zitat.ist-aktiv { opacity: 1; visibility: visible; transform: none; }
.stimmband__zitat p {
  font-family: var(--schrift-titel);
  font-weight: 500;
  font-size: clamp(1.25rem, .9rem + 1.5vw, 2.1rem);
  line-height: 1.35;
  letter-spacing: -.015em;
  color: var(--hell);
  margin: 0 0 1.6rem;
  text-wrap: balance;
}
.stimmband__zitat p::before { content: '„'; color: var(--tuerkis); }
.stimmband__zitat p::after  { content: '“'; color: var(--tuerkis); }
.stimmband__name {
  display: block;
  font-weight: 600;
  color: var(--hell-2);
}
.stimmband__rolle {
  display: block;
  font-family: var(--schrift-daten);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--hell-3);
  margin-top: .3rem;
}
.stimmband__punkte {
  grid-area: 2 / 1;
  display: flex;
  justify-content: center;
  gap: .5rem;
  margin-top: 2.4rem;
}
.stimmband__punkt {
  width: 34px; height: 3px;
  border: 0;
  border-radius: 99px;
  background: var(--rand-stark);
  cursor: pointer;
  padding: 0;
  transition: background var(--weich);
}
.stimmband__punkt.ist-aktiv { background: var(--tuerkis); }
/* Trotz schmaler Optik eine treffbare Flaeche. */
.stimmband__punkt::after {
  content: '';
  position: absolute;
  inset: -14px -6px;
}
.stimmband__punkt { position: relative; }


/* ── Referenzkarte im Kopfbereich ────────────────────────────────────
   Sie zeigt echte Arbeit statt reiner Dekoration und gibt dem rechten
   Teil der Bühne einen Grund, da zu sein. */
.buehnekarte {
  display: none;
  border-radius: var(--rund-3);
  border: 1px solid var(--rand);
  background: rgba(10,15,22,.62);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  overflow: hidden;
  box-shadow: 0 40px 80px -50px rgba(0,0,0,.95);
}
@media (min-width: 1000px) { .buehnekarte { display: block; } }

.buehnekarte__innen { display: block; }
.buehnekarte__bild {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--tinte-3);
}
.buehnekarte__bild img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1s cubic-bezier(.16,1,.3,1);
}
.buehnekarte__innen:hover .buehnekarte__bild img { transform: scale(1.05); }

.buehnekarte__koerper { display: block; padding: 1.2rem 1.3rem 1.1rem; }
.buehnekarte__marke {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--schrift-daten);
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--hell-3);
  margin-bottom: .5rem;
}
/* Kleiner Punkt, der ruhig pulsiert - Zeichen dafür, dass hier etwas
   Aktuelles steht. */
.buehnekarte__punkt {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--tuerkis);
  box-shadow: 0 0 0 0 rgba(0,163,164,.7);
  animation: pulsieren 2.6s ease-out infinite;
}
@keyframes pulsieren {
  70%  { box-shadow: 0 0 0 9px rgba(0,163,164,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,163,164,0); }
}
@media (prefers-reduced-motion: reduce) { .buehnekarte__punkt { animation: none; } }

.buehnekarte__titel {
  display: block;
  font-family: var(--schrift-titel);
  font-weight: 700;
  font-size: 1.08rem;
  line-height: 1.25;
  color: var(--hell);
  margin-bottom: .25rem;
}
.buehnekarte__kunde {
  display: block;
  font-size: .86rem;
  color: var(--hell-3);
  margin-bottom: .8rem;
}
.buehnekarte__innen .pfeilverweis { font-size: .85rem; min-height: 0; }

.buehnekarte__zahlen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0;
  border-top: 1px solid var(--rand);
}
.buehnekarte__zahlen > div {
  padding: .9rem .6rem;
  text-align: center;
  border-right: 1px solid var(--rand);
}
.buehnekarte__zahlen > div:last-child { border-right: 0; }
.buehnekarte__zahlen dt {
  font-family: var(--schrift-titel);
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--tuerkis-hell);
  margin: 0;
}
.buehnekarte__zahlen dd {
  margin: .1rem 0 0;
  font-family: var(--schrift-daten);
  font-size: .6rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--hell-3);
}

/* ═════════════════════════════════════════════════════════════════════════
   Referenzkacheln
   Gleiche Größe, gleiches Bildformat, Text unter dem Bild. Bei
   Bildschirmfotos von Websites ist das wichtig: Liegt der Text auf dem
   Bild, wird der Seitenkopf angeschnitten und das Bild wirkt zerstückelt.
   ═════════════════════════════════════════════════════════════════════════ */

.werkkachel {
  display: flex;
  flex-direction: column;
  border-radius: var(--rund-3);
  overflow: hidden;
  border: 1px solid var(--rand-hell);
  background: #fff;
  transition: transform var(--weich), box-shadow var(--weich), border-color var(--weich);
}
.werkkachel:hover {
  border-color: var(--kobalt);
  box-shadow: 0 24px 50px -30px rgba(24,112,184,.6);
}
.werkkachel__bild {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--papier-2);
  border-bottom: 1px solid var(--rand-hell);
}
/* object-position oben: Bei Bildschirmfotos zählt der Kopfbereich. */
.werkkachel__bild img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 1s cubic-bezier(.16,1,.3,1);
}
.werkkachel:hover .werkkachel__bild img { transform: scale(1.04); }

.werkkachel__koerper {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.2rem 1.3rem 1.4rem;
}
.werkkachel__marke {
  font-family: var(--schrift-daten);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--kobalt);
  margin-bottom: .5rem;
}
.werkkachel__titel {
  font-family: var(--schrift-titel);
  font-weight: 700;
  font-size: clamp(1.02rem, .95rem + .35vw, 1.22rem);
  line-height: 1.28;
  color: var(--dunkel);
  margin-bottom: .3rem;
}
.werkkachel__kunde { font-size: .9rem; color: var(--dunkel-2); margin-top: auto; }

/* Auf dunklem Grund umgekehrt. */
.abschnitt:not(.abschnitt--hell) .werkkachel {
  border-color: var(--rand);
  background: var(--glas);
}
.abschnitt:not(.abschnitt--hell) .werkkachel__bild { border-bottom-color: var(--rand); }
.abschnitt:not(.abschnitt--hell) .werkkachel__titel { color: var(--hell); }
.abschnitt:not(.abschnitt--hell) .werkkachel__kunde { color: var(--hell-3); }
.abschnitt:not(.abschnitt--hell) .werkkachel__marke { color: var(--tuerkis-hell); }

/* ── Einwilligung in Formularen ───────────────────────────────────────
   Der Haken ist Pflicht. Die Fläche ist bewusst großzügig, damit man ihn
   auch auf dem Telefon sicher trifft. */
.einwilligung {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  padding: 1rem 1.1rem;
  margin: var(--luft-2) 0;
  border: 1px solid var(--rand);
  border-radius: var(--rund-2);
  background: var(--glas);
}
.einwilligung input[type="checkbox"] {
  flex: none;
  width: 22px; height: 22px;
  margin-top: .1rem;
  accent-color: var(--tuerkis);
  cursor: pointer;
}
.einwilligung label {
  margin: 0;
  font-size: .9rem;
  line-height: 1.55;
  color: var(--hell-2);
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--schrift-text);
  font-weight: 400;
}
.einwilligung a { color: var(--tuerkis); text-decoration: underline; text-underline-offset: 3px; }
.einwilligung a:hover { color: var(--tuerkis-hell); }
.einwilligung:has(input:focus-visible) { border-color: var(--tuerkis); }
.abschnitt--hell .einwilligung {
  border-color: var(--rand-hell);
  background: #fff;
}
.abschnitt--hell .einwilligung label { color: var(--dunkel-2); }
.abschnitt--hell .einwilligung a { color: var(--kobalt); }

/* Rückrufformular in der Kontaktkachel */
.kontaktkachel--aktion { display: block; }
.rueckrufform { margin-top: 1rem; display: grid; gap: .7rem; }
.rueckrufform .feldgruppe { margin: 0; }
.rueckrufform label {
  font-size: .68rem;
  letter-spacing: .1em;
  margin-bottom: .3rem;
}
.rueckrufform .einwilligung {
  margin: .2rem 0 .4rem;
  padding: .8rem .9rem;
}
.rueckrufform .einwilligung label {
  font-size: .8rem;
  letter-spacing: 0;
}

/* ── Visitenkarte im Impressum ────────────────────────────────────────
   Die Pflichtangaben bleiben im Fließtext, daneben steht eine Karte mit
   Logo und den Angaben, die man tatsächlich sucht. */
.visitenkarte {
  padding: clamp(1.5rem, 3vw, 2.2rem);
  border-radius: var(--rund-3);
  border: 1px solid var(--rand);
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(0,163,164,.12), transparent 55%),
    radial-gradient(100% 80% at 100% 100%, rgba(24,112,184,.14), transparent 58%),
    var(--glas);
}
.visitenkarte__logo { height: 34px; width: auto; margin-bottom: 1.2rem; }
.visitenkarte__wort { font-size: 1.5rem; display: inline-block; margin-bottom: 1.2rem; }
.visitenkarte__claim {
  font-family: var(--schrift-daten);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tuerkis-hell);
  margin: 0 0 1.6rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--rand);
}
.visitenkarte__daten { margin: 0 0 1.6rem; display: grid; gap: .2rem; }
.visitenkarte__daten dt {
  font-family: var(--schrift-daten);
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--hell-3);
  margin-top: 1rem;
}
.visitenkarte__daten dt:first-child { margin-top: 0; }
.visitenkarte__daten dd { margin: 0; color: var(--hell-2); line-height: 1.6; }
.visitenkarte__daten a { color: var(--tuerkis); }
.visitenkarte__daten a:hover { color: var(--tuerkis-hell); }

/* ═════════════════════════════════════════════════════════════════════════
   Vergrößerte Bildansicht
   ═════════════════════════════════════════════════════════════════════════ */

.bildknopf {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--rand);
  border-radius: var(--rund-2);
  overflow: hidden;
  background: var(--tinte-3);
  cursor: zoom-in;
  transition: border-color var(--weich), transform var(--weich);
}
.bildknopf:hover { border-color: var(--tuerkis); }
.bildknopf img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bildknopf__lupe {
  position: absolute;
  right: .7rem; bottom: .7rem;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(10,15,22,.78);
  backdrop-filter: blur(6px);
  color: #fff;
  opacity: 0;
  transform: scale(.9);
  transition: opacity var(--weich), transform var(--weich);
}
.bildknopf:hover .bildknopf__lupe,
.bildknopf:focus-visible .bildknopf__lupe { opacity: 1; transform: none; }
.bildknopf__lupe .symbol { width: 16px; height: 16px; }
.hilfetext {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.bildreihe {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: .8rem;
}
.bildreihe .bildknopf { aspect-ratio: 4 / 3; }

.lupe__inhalt { margin: 0; display: grid; gap: 1rem; justify-items: center; }
.lupe__inhalt img {
  max-width: min(1400px, 100%);
  max-height: 78vh;
  width: auto; height: auto;
  border-radius: var(--rund-2);
  box-shadow: 0 40px 90px -40px rgba(0,0,0,.9);
  animation: fensterkasten .45s cubic-bezier(.16,1,.3,1);
}
.lupe__inhalt figcaption {
  font-family: var(--schrift-daten);
  font-size: .76rem;
  letter-spacing: .08em;
  color: var(--hell-3);
  text-align: center;
}


/* ═════════════════════════════════════════════════════════════════════════
   Anfrageformular in Schritten
   ═════════════════════════════════════════════════════════════════════════ */

.fragebogen__kopf {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-bottom: clamp(2rem, 5vw, 3.2rem);
}
.fragebogen__balken {
  flex: 1;
  height: 4px;
  border-radius: 99px;
  background: var(--rand);
  overflow: hidden;
}
.fragebogen__balken span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--band);
  border-radius: 99px;
  transition: width .5s cubic-bezier(.16,1,.3,1);
}
.fragebogen__stand {
  flex: none;
  font-family: var(--schrift-daten);
  font-size: .72rem;
  letter-spacing: .1em;
  color: var(--hell-3);
}

.fbschritt { animation: fbauf .5s cubic-bezier(.16,1,.3,1); }
@keyframes fbauf { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.fbschritt h2 { margin-bottom: var(--luft-2); }
.fbschritt > .fliess { margin-bottom: var(--luft-4); }
/* Ohne JavaScript stehen alle Schritte untereinander – die Seite bleibt
   ausfüllbar, nur eben als eine lange Liste. */
.hat-js .fbschritt:not(.ist-aktiv) { display: none; }

/* Bereichsauswahl */
.bereichsraster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}
.bereichskachel {
  display: grid;
  gap: .5rem;
  justify-items: start;
  padding: 1.6rem 1.4rem;
  border: 1px solid var(--rand);
  border-radius: var(--rund-2);
  background: var(--glas);
  color: var(--hell);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--weich), background var(--weich), transform var(--weich);
}
.bereichskachel:hover,
.bereichskachel.ist-gewaehlt {
  border-color: var(--tuerkis);
  background: var(--glas-2);
}
.bereichskachel__symbol {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: var(--rund-1);
  background: var(--band-weich);
  color: var(--tuerkis);
}
.bereichskachel__symbol .symbol { width: 22px; height: 22px; }
.bereichskachel__titel {
  font-family: var(--schrift-titel);
  font-weight: 700;
  font-size: 1.05rem;
}
.bereichskachel__zahl {
  font-family: var(--schrift-daten);
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--hell-3);
}

/* Leistungsauswahl */
.leistungswahl { display: grid; gap: .7rem; }
.leistungskachel {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--rand);
  border-radius: var(--rund-2);
  background: var(--glas);
  color: var(--hell);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--weich), background var(--weich), transform var(--weich);
}
.leistungskachel:hover,
.leistungskachel.ist-gewaehlt {
  border-color: var(--ton, var(--tuerkis));
  background: var(--glas-2);
}
.leistungskachel__symbol {
  flex: none;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: var(--rund-1);
  background: var(--ton-weich, var(--band-weich));
  color: var(--ton, var(--tuerkis));
}
.leistungskachel__symbol .symbol { width: 19px; height: 19px; }
.leistungskachel__titel {
  display: block;
  font-family: var(--schrift-titel);
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: .15rem;
}
.leistungskachel__text { display: block; font-size: .86rem; color: var(--hell-3); }

/* Fragen */
.fragenliste { display: grid; gap: var(--luft-4); }
.frageblock { display: grid; gap: .5rem; }
.frageblock fieldset { border: 0; padding: 0; margin: 0; }
.frageblock legend {
  padding: 0;
  margin-bottom: .6rem;
  font-weight: 600;
  font-size: 1rem;
  color: var(--hell);
}
.frageblock label {
  font-weight: 600;
  font-size: 1rem;
  color: var(--hell);
}
.frageblock .hilfe { margin: 0; }
/* Kurz aufleuchten, wenn ein Pflichtfeld fehlt. */
.eingabe.ist-offen,
textarea.ist-offen {
  border-color: var(--koralle);
  animation: ruckeln .4s;
}
@keyframes ruckeln {
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

.farbfeld { display: flex; gap: .6rem; align-items: center; }
.farbfeld__waehler {
  flex: none;
  width: 48px; height: 44px;
  padding: 3px;
  border: 1px solid var(--rand);
  border-radius: var(--rund-1);
  background: var(--glas);
  cursor: pointer;
}

.fragebogen__steuerung {
  display: flex;
  align-items: center;
  gap: .8rem;
  flex-wrap: wrap;
  margin-top: clamp(2rem, 5vw, 3rem);
  padding-top: 1.6rem;
  border-top: 1px solid var(--rand);
}
.fragebogen__steuerung [data-fbzuruecksetzen] { margin-left: auto; }

@media (max-width: 560px) {
  .fragebogen__steuerung { display: grid; }
  .fragebogen__steuerung .schalter { width: 100%; justify-content: center; }
  .fragebogen__steuerung [data-fbzuruecksetzen] { margin-left: 0; justify-content: center; }
}

/* Der Feldsatz ist nur ein technischer Rahmen – er soll nichts zeichnen. */
.fbfelder { border: 0; padding: 0; margin: 0; min-width: 0; }

/* ═════════════════════════════════════════════════════════════════════════
   Cookies und lokaler Speicher
   Kein Einwilligungsbanner – es gibt nichts einzuwilligen. Stattdessen ein
   Fenster, das auf Wunsch erklärt, was gespeichert wird.
   ═════════════════════════════════════════════════════════════════════════ */

.fussknopf {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: color var(--schnell), text-decoration-color var(--schnell);
}
.fussknopf:hover { color: var(--tuerkis); text-decoration-color: currentColor; }

/* ── Gemeinsame Grundlage aller Fenster ───────────────────────────────
   Cookie-Hinweis, Bildansicht und Rückrufbitte teilen sich Aufbau,
   Abstände und die Schließen-Schaltfläche oben rechts. */
.fenster {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 2.5rem);
  background: rgba(6,10,15,.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  animation: fensterauf .3s cubic-bezier(.16,1,.3,1);
}
.fenster[hidden] { display: none; }
@keyframes fensterauf { from { opacity: 0; } to { opacity: 1; } }

.fenster__kasten {
  position: relative;
  width: min(660px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  padding: clamp(1.8rem, 4vw, 2.8rem);
  border: 1px solid var(--rand);
  border-radius: var(--rund-3);
  background: var(--tinte-2);
  box-shadow: 0 40px 90px -40px rgba(0,0,0,.95);
  animation: fensterkasten .45s cubic-bezier(.16,1,.3,1);
}
@keyframes fensterkasten { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.fenster__kasten h2 { margin: .3rem 0 .8rem; }
.fenster__kasten--breit { width: min(1100px, 100%); }

/* Schließen: immer oben rechts, gleiche Größe, gleiche Bewegung. */
.fenster__zu {
  position: absolute;
  top: clamp(.9rem, 2vw, 1.4rem);
  right: clamp(.9rem, 2vw, 1.4rem);
  z-index: 3;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--rand-stark);
  border-radius: 50%;
  background: var(--glas-2);
  color: var(--hell);
  cursor: pointer;
  transition: background var(--weich), color var(--weich), border-color var(--weich);
}
.fenster__zu .symbol { width: 18px; height: 18px; }
.fenster__zu:hover,
.fenster__zu:focus-visible {
  background: var(--band);
  border-color: transparent;
  color: #06121a;
}

.fenster__fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .8rem 1.4rem;
  margin-top: var(--luft-3);
  padding-top: 1.2rem;
  border-top: 1px solid var(--rand);
}

.speicherfenster__fuss .pfeilverweis { margin-left: auto; }

/* ── Einwilligungsbanner ─────────────────────────────────────────────── */
.einwilligung-banner {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 195;
  padding: clamp(.8rem, 2vw, 1.4rem);
  animation: bannerrein .5s cubic-bezier(.16,1,.3,1);
}
.einwilligung-banner[hidden] { display: none; }
@keyframes bannerrein { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

.einwilligung-banner__kasten {
  width: min(var(--bahn), 100%);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  padding: 1.2rem 1.4rem;
  border: 1px solid var(--rand-stark);
  border-radius: var(--rund-2);
  background: rgba(14,20,29,.97);
  backdrop-filter: blur(20px);
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.95);
}
.einwilligung-banner__text { flex: 1 1 320px; }
.einwilligung-banner__text p { margin: .3rem 0 0; font-size: .92rem; color: var(--hell-2); line-height: 1.55; }
.einwilligung-banner__text a { color: var(--tuerkis); text-decoration: underline; }
.einwilligung-banner__knoepfe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem 1rem;
}

@media (max-width: 620px) {
  .einwilligung-banner__knoepfe { width: 100%; }
  .einwilligung-banner__knoepfe .schalter { flex: 1 1 auto; justify-content: center; }
}

/* ═════════════════════════════════════════════════════════════════════════
   KUNDENPORTAL
   ═════════════════════════════════════════════════════════════════════════ */

.portalnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: 1.2rem;
  margin-bottom: var(--luft-4);
  border-bottom: 1px solid var(--rand);
}
.portalnav__wer {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-weight: 600;
  color: var(--hell-2);
}
.portalnav__wer .symbol { color: var(--tuerkis); }

/* ── Ticketliste ─────────────────────────────────────────────────────── */
.ticketliste { display: grid; gap: .6rem; }
.ticketzeile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--rand);
  border-radius: var(--rund-2);
  background: var(--glas);
  transition: border-color var(--weich), background var(--weich), transform var(--weich);
}
.ticketzeile:hover {
  border-color: var(--tuerkis);
  background: var(--glas-2);
}
/* Eine Antwort von uns wird deutlich markiert – sonst geht sie unter. */
.ticketzeile.ist-neu { border-color: var(--tuerkis); }
.ticketzeile.ist-neu::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--tuerkis);
  box-shadow: 0 0 0 4px rgba(0,163,164,.18);
}
.ticketzeile__nummer {
  font-family: var(--schrift-daten);
  font-size: .78rem;
  color: var(--hell-3);
}
.ticketzeile__betreff {
  display: block;
  font-family: var(--schrift-titel);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--hell);
  margin-bottom: .2rem;
}
.ticketzeile__meta { display: block; font-size: .84rem; color: var(--hell-3); }
.ticketzeile__meta strong { color: var(--tuerkis); }

.ticketstand {
  flex: none;
  padding: .3rem .75rem;
  border-radius: 100px;
  border: 1px solid var(--rand-stark);
  font-family: var(--schrift-daten);
  font-size: .64rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ticketstand--neu    { border-color: var(--tuerkis);   color: var(--tuerkis); }
.ticketstand--arbeit { border-color: var(--kobalt);    color: #6fb0f5; }
.ticketstand--warten { border-color: var(--bernstein); color: var(--bernstein); }
.ticketstand--fertig { border-color: var(--salbei);    color: var(--salbei); }
.ticketstand--zu     { color: var(--hell-3); }

/* ── Verlauf eines Tickets ───────────────────────────────────────────── */
.ticketverlauf { display: grid; gap: 1rem; margin-bottom: var(--luft-4); }
.beitrag {
  padding: 1.2rem 1.3rem;
  border: 1px solid var(--rand);
  border-radius: var(--rund-2);
  background: var(--glas);
  max-width: 88%;
}
/* Antworten von uns sitzen rechts und heben sich farblich ab – wie in
   einem Nachrichtenverlauf, damit man auf einen Blick sieht, wer spricht. */
.beitrag--wir {
  margin-left: auto;
  background: var(--band-weich);
  border-color: rgba(0,163,164,.3);
}
.beitrag__kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .6rem;
}
.beitrag__wer { font-weight: 700; color: var(--hell); }
.beitrag__zeit {
  font-family: var(--schrift-daten);
  font-size: .7rem;
  color: var(--hell-3);
  white-space: nowrap;
}
.beitrag__text { color: var(--hell-2); line-height: 1.65; }

.beitrag__dateien {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .9rem;
  padding-top: .9rem;
  border-top: 1px solid var(--rand);
}
.dateikachel {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem .8rem;
  border: 1px solid var(--rand);
  border-radius: var(--rund-1);
  background: var(--tinte-2);
  transition: border-color var(--weich);
}
.dateikachel:hover { border-color: var(--tuerkis); }
.dateikachel .symbol { color: var(--tuerkis); flex: none; }
.dateikachel__name { display: block; font-size: .86rem; color: var(--hell); }
.dateikachel__groesse {
  display: block;
  font-family: var(--schrift-daten);
  font-size: .66rem;
  color: var(--hell-3);
}

/* ── Projekte im Portal ──────────────────────────────────────────────── */
.portalprojekte { display: grid; gap: .9rem; margin-bottom: 1rem; }
.portalprojekt {
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--rand);
}
.portalprojekt:last-child { border-bottom: 0; padding-bottom: 0; }
.portalprojekt__titel {
  display: block;
  font-family: var(--schrift-titel);
  font-weight: 700;
  color: var(--hell);
}
.portalprojekt__art { display: block; font-size: .85rem; color: var(--hell-3); margin-bottom: .3rem; }
.portalprojekt__adresse {
  display: inline-block;
  font-size: .85rem;
  color: var(--tuerkis);
  margin-bottom: .5rem;
}

@media (max-width: 620px) {
  .ticketzeile { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
  .ticketzeile.ist-neu::before { display: none; }
  .beitrag { max-width: 100%; }
}

/* ═════════════════════════════════════════════════════════════════════════
   KONTAKTSEITE
   ═════════════════════════════════════════════════════════════════════════ */

/* Drei Wege gleich zu Anfang: schreiben, anrufen lassen, Angebot. */
.wegraster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}
.weg {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 1.6rem 1.5rem;
  border: 1px solid var(--rand);
  border-radius: var(--rund-2);
  background: var(--glas);
  transition: border-color var(--weich), background var(--weich), transform var(--weich);
}
.weg:hover {
  border-color: var(--tuerkis);
  background: var(--glas-2);
}
/* Der dritte Weg führt weiter als die anderen – er darf auffallen. */
.weg--stark {
  border-color: rgba(0,163,164,.4);
  background: var(--band-weich);
}
.weg__symbol {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: var(--rund-1);
  background: var(--band-weich);
  color: var(--tuerkis);
  margin-bottom: .3rem;
}
.weg__symbol .symbol { width: 21px; height: 21px; }
.weg__titel {
  font-family: var(--schrift-titel);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--hell);
}
.weg__text { font-size: .92rem; color: var(--hell-3); line-height: 1.55; flex: 1; }

/* ── Anfahrt ─────────────────────────────────────────────────────────── */
.anschrift {
  font-style: normal;
  margin: var(--luft-3) 0;
  line-height: 1.8;
  color: var(--dunkel-2);
}
.abschnitt--hell .anschrift strong { color: var(--dunkel); }

.kartenfeld {
  position: relative;
  min-height: 340px;
  border-radius: var(--rund-3);
  overflow: hidden;
  border: 1px solid var(--rand-hell);
  background:
    repeating-linear-gradient(0deg, rgba(15,23,32,.05) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, rgba(15,23,32,.05) 0 1px, transparent 1px 44px),
    var(--papier-2);
}
.kartenfeld iframe { width: 100%; height: 100%; min-height: 340px; border: 0; display: block; }

.kartenfeld__hinweis {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  gap: .7rem;
  padding: clamp(1.4rem, 4vw, 2.4rem);
}
.kartenfeld__hinweis h3 { margin: 0; color: var(--dunkel); }
.kartenfeld__hinweis p { margin: 0; max-width: 42ch; color: var(--dunkel-2); font-size: .92rem; line-height: 1.6; }
.kartenfeld__hinweis .hilfe { color: var(--dunkel-3); }
.kartenfeld__symbol {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--band);
  color: #fff;
}
.kartenfeld__symbol .symbol { width: 22px; height: 22px; }

/* ═════════════════════════════════════════════════════════════════════════
   Bestätigung nach dem Absenden
   Ein eigenes Fenster statt einer Meldung, die im Seitenfluss untergeht.
   ═════════════════════════════════════════════════════════════════════════ */

.danke {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 2.5rem);
  background: rgba(6,10,15,.92);
  backdrop-filter: blur(16px);
  animation: fensterauf .35s cubic-bezier(.16,1,.3,1);
}
.danke[hidden] { display: none; }

.danke__kasten {
  position: relative;
  width: min(500px, 100%);
  padding: clamp(2rem, 5vw, 3rem);
  border: 1px solid var(--rand);
  border-radius: var(--rund-3);
  background: var(--tinte-2);
  box-shadow: 0 40px 90px -40px rgba(0,0,0,.95);
  text-align: center;
  animation: fensterrein .45s cubic-bezier(.16,1,.3,1);
}
.danke__zeichen {
  width: 64px; height: 64px;
  margin: 0 auto 1.2rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--band);
  color: #06121a;
}
.danke__zeichen .symbol { width: 30px; height: 30px; stroke-width: 2.6; }
/* Der Haken wird gezeichnet statt eingeblendet – das wirkt wie eine
   Bestätigung, nicht wie ein Bild. */
.danke__zeichen .symbol path {
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  animation: hakenziehen .5s .2s ease-out forwards;
}
@keyframes hakenziehen { to { stroke-dashoffset: 0; } }

.danke__titel {
  font-family: var(--schrift-titel);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-weight: 700;
  margin: 0 0 .7rem;
  color: var(--hell);
}
.danke__text { margin: 0 0 1.6rem; color: var(--hell-2); line-height: 1.65; }
.danke__zu {
  position: absolute;
  top: .9rem; right: .9rem;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 1px solid var(--rand);
  border-radius: 50%;
  background: var(--glas);
  color: var(--hell);
  cursor: pointer;
  transition: background var(--weich), transform var(--weich);
}
.danke__zu:hover { background: var(--tuerkis); color: #06121a; transform: rotate(90deg); }

@media (prefers-reduced-motion: reduce) {
  .aufgabe, .aufgabe__kasten, .danke, .danke__kasten, .danke__zeichen .symbol path { animation: none; }
  .danke__zeichen .symbol path { stroke-dashoffset: 0; }
}

/* ── COLOREA Mobil ───────────────────────────────────────────────────── */
.mobilband {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.6rem, 4vw, 3rem);
  align-items: center;
}
@media (min-width: 900px) {
  .mobilband { grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); }
}
.mobilband__bild {
  border-radius: var(--rund-3);
  overflow: hidden;
  border: 1px solid var(--rand);
  aspect-ratio: 4 / 3;
}
.mobilband__bild img { width: 100%; height: 100%; object-fit: cover; }
.mobilband__text h2 { margin-bottom: var(--luft-2); }

/* ── Projektdaten ─────────────────────────────────────────────────────
   Beschriftung und Wert stehen untereinander. Die Beschriftung ist
   kräftig gesetzt, damit sich die Zeilen voneinander abheben. */
.datenliste {
  display: grid;
  gap: .8rem;
  margin: 0 0 var(--luft-3);
}
.datenliste dt {
  font-family: var(--schrift-daten);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tuerkis-hell);
  margin: 0;
}
.datenliste dd {
  margin: .2rem 0 0;
  font-size: .96rem;
  color: var(--hell);
  padding-bottom: .8rem;
  border-bottom: 1px solid var(--rand);
}
.datenliste dd:last-of-type { border-bottom: 0; padding-bottom: 0; }
.abschnitt--hell .datenliste dt { color: var(--kobalt); }
.abschnitt--hell .datenliste dd { color: var(--dunkel); border-bottom-color: var(--rand-hell); }

/* Flacher Seitenkopf – für Seiten, bei denen es um die Sache geht und
   nicht um den Auftritt, etwa die Anmeldung zum Kundenportal. */
.seitenkopf--schmal {
  padding-top: calc(var(--kopfhoehe) + clamp(1.6rem, 3vw, 2.6rem));
  padding-bottom: clamp(1.2rem, 2.4vw, 2rem);
}
.seitenkopf--schmal .seitenkopf__titel { font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3rem); }
.seitenkopf--schmal + .abschnitt { padding-top: clamp(2rem, 4vw, 3rem); }

/* ── Referenzen: Film und Galerie ─────────────────────────────────────
   Nicht jede Referenz ist eine Website. Filme und Bildstrecken bekommen
   auf der Kachel ein Kennzeichen und auf der Detailseite eine eigene
   Darstellung. */
.werkkachel__bild { position: relative; }
.werkkachel__art {
  position: absolute;
  left: .7rem; top: .7rem;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .65rem;
  border-radius: 100px;
  background: rgba(10,15,22,.8);
  backdrop-filter: blur(6px);
  color: #fff;
  font-family: var(--schrift-daten);
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.werkkachel__art .symbol { width: 13px; height: 13px; color: var(--tuerkis); }

/* Film */
.filmfeld {
  position: relative;
  border-radius: var(--rund-3);
  overflow: hidden;
  border: 1px solid var(--rand);
  background: var(--tinte-3);
  aspect-ratio: 16 / 9;
}
.filmfeld video,
.filmfeld iframe { width: 100%; height: 100%; display: block; border: 0; object-fit: cover; }
.filmfeld__hinweis {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  gap: .7rem;
  padding: clamp(1.4rem, 4vw, 2.4rem);
  background:
    radial-gradient(70% 90% at 50% 40%, rgba(24,112,184,.18), transparent 70%),
    var(--tinte-2);
}
.filmfeld__hinweis h3 { margin: 0; }
.filmfeld__hinweis p { margin: 0; max-width: 44ch; color: var(--hell-3); font-size: .92rem; line-height: 1.6; }
.filmfeld__symbol {
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--band);
  color: #fff;
}
.filmfeld__symbol .symbol { width: 24px; height: 24px; }

/* Galerie: erstes Bild groß, die übrigen als Raster darunter. */
.galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: .8rem;
}
.galerie__feld { aspect-ratio: 1; }
.galerie__feld--gross {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 9;
}
@media (min-width: 700px) {
  .galerie { grid-template-columns: repeat(3, 1fr); }
  .galerie__feld--gross { grid-column: span 3; }
}

/* ═════════════════════════════════════════════════════════════════════════
   BEWEGUNG BEIM ZEIGEN
   Nichts hebt sich mehr an oder springt zur Seite. Stattdessen läuft ein
   Rahmen um das Element und die Fläche wird kräftiger. Das ist ruhiger,
   verschiebt kein Layout und funktioniert auch bei langen Beschriftungen.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── Schaltflächen ────────────────────────────────────────────────────
   Beim Zeigen wandert ein heller Schimmer von links durch den Knopf. */
.schalter {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.schalter::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg,
    transparent 0%, rgba(255,255,255,.22) 45%, rgba(255,255,255,.22) 55%, transparent 100%);
  transform: translateX(-120%);
  transition: transform .65s cubic-bezier(.16,1,.3,1);
  pointer-events: none;
}
.schalter:hover::after,
.schalter:focus-visible::after { transform: translateX(120%); }

/* Der Randknopf füllt sich beim Zeigen von links mit Farbe. */
.schalter--rand::before,
.schalter--still::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--band);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s cubic-bezier(.16,1,.3,1);
}
.schalter--rand:hover,
.schalter--still:hover { color: #06121a; border-color: transparent; }
.schalter--rand:hover::before,
.schalter--still:hover::before,
.schalter--rand:focus-visible::before,
.schalter--still:focus-visible::before { transform: scaleX(1); }

/* ── Karten und Kacheln ───────────────────────────────────────────────
   Eine Linie in Markenfarbe läuft beim Zeigen um das Element herum. Sie
   liegt als eigener Rahmen darüber und ändert deshalb nichts am Layout. */
.karte,
.werkkachel,
.weg,
.bereichskachel,
.leistungskachel,
.projektkachel,
.moeglichkeit,
.ticketzeile,
.versatz__kachel,
.buehnekarte,
.dateikachel {
  position: relative;
}
.karte::after,
.werkkachel::after,
.weg::after,
.bereichskachel::after,
.leistungskachel::after,
.projektkachel::after,
.moeglichkeit::after,
.ticketzeile::after,
.versatz__kachel::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid transparent;
  pointer-events: none;
  transition: border-color .35s ease, box-shadow .35s ease;
}
.karte:hover::after,
.werkkachel:hover::after,
.weg:hover::after,
.bereichskachel:hover::after,
.leistungskachel:hover::after,
.projektkachel:hover::after,
.moeglichkeit:hover::after,
.ticketzeile:hover::after,
.versatz__kachel:hover::after {
  border-color: var(--ton, var(--tuerkis));
  box-shadow: 0 0 0 3px rgba(0,163,164,.12);
}
/* Auf hellem Grund passt das Markenblau besser als das Türkis. */
.abschnitt--hell .karte:hover::after,
.abschnitt--hell .werkkachel:hover::after,
.abschnitt--hell .moeglichkeit:hover::after {
  border-color: var(--kobalt);
  box-shadow: 0 0 0 3px rgba(24,112,184,.12);
}

/* Bilder in Karten zoomen weiterhin ganz leicht - das ist Bewegung im
   Bild, nicht am Element, und verschiebt nichts. */

/* ── Vierte Spalte im Fußbereich ──────────────────────────────────────
   Vorher blieb der rechte Teil leer. Jetzt steht dort ein Aufruf mit dem
   Markenzeichen als ruhigem Hintergrund. */
.fusszeile__aufruf {
  position: relative;
  padding: 1.4rem 1.5rem 1.6rem;
  border: 1px solid var(--rand);
  border-radius: var(--rund-2);
  background: var(--band-weich);
  overflow: hidden;
}
.fusszeile__aufruf h3 { margin: 0 0 .5rem; }
.fusszeile__aufruf p {
  margin: 0 0 1.1rem;
  font-size: .9rem;
  line-height: 1.6;
  color: var(--hell-3);
  max-width: 30ch;
}
.fusszeile__aufruf .schalter { margin-bottom: .8rem; }
.fusszeile__aufruf .pfeilverweis {
  display: block;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: .86rem;
  color: var(--hell-3);
  cursor: pointer;
  min-height: 0;
}
.fusszeile__aufruf .pfeilverweis:hover { color: var(--tuerkis); }

/* Das Zeichen liegt groß und blass im Hintergrund der Spalte. */
.fusszeile__zeichen {
  position: absolute;
  right: -2.5rem;
  bottom: -2.5rem;
  width: 160px;
  opacity: .07;
  pointer-events: none;
}
.fusszeile__zeichen img { width: 100%; height: auto; }

@media (max-width: 900px) {
  .fusszeile__zeichen { width: 120px; }
}

/* Film als Hintergrund der Bühne – verhält sich wie das Bild. */
.buehne__bild video {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: blur(2px) saturate(115%);
}
/* Wer Bewegung reduziert haben möchte, sieht nur das Vorschaubild. */
@media (prefers-reduced-motion: reduce) {
  .buehne__bild video { display: none; }
  .buehne__bild { background-size: cover; background-position: center; }
}

/* ── Hinweis auf offene Rechnungen ───────────────────────────────────
   Steht im Portal ganz oben. Bewusst deutlich, aber nicht schrill: Eine
   offene Rechnung ist eine Information, keine Mahnung. */
.offenhinweis {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.2rem 1.4rem;
  margin-bottom: var(--luft-4);
  border: 1px solid rgba(217,154,43,.35);
  border-left: 3px solid var(--bernstein);
  border-radius: var(--rund-2);
  background: rgba(217,154,43,.08);
}
.offenhinweis strong { display: block; color: var(--hell); margin-bottom: .25rem; }
.offenhinweis p { margin: 0; font-size: .92rem; line-height: 1.6; color: var(--hell-2); }
.offenhinweis__symbol {
  flex: none;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(217,154,43,.18);
  color: var(--bernstein);
}
.offenhinweis__symbol .symbol { width: 19px; height: 19px; }

/* Überfällig wird kräftiger gezeigt - aber immer noch sachlich. */
.offenhinweis--spaet {
  border-color: rgba(200,80,60,.4);
  border-left-color: var(--koralle);
  background: rgba(200,80,60,.08);
}
.offenhinweis--spaet .offenhinweis__symbol { background: rgba(200,80,60,.18); color: var(--koralle); }

/* Als Verweis auf der Übersicht. */
a.offenhinweis { transition: border-color var(--weich), background var(--weich); }
a.offenhinweis:hover { border-color: var(--bernstein); background: rgba(217,154,43,.13); }
a.offenhinweis--spaet:hover { border-color: var(--koralle); background: rgba(200,80,60,.13); }

/* Eine offene Rechnung wird auch in der Liste gekennzeichnet. */
.beleg--offen { border-left: 3px solid var(--bernstein); }
.ticketstand--offen { border-color: var(--koralle); color: var(--koralle); }

/* ── Belege im Kundenportal ──────────────────────────────────────────── */
.unterlagen { margin-bottom: var(--luft-6); }
.unterlagen:last-child { margin-bottom: 0; }

.jahrmarke {
  font-family: var(--schrift-daten);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--hell-3);
  margin: var(--luft-4) 0 .8rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--rand);
}
.unterlagen .jahrmarke:first-of-type { margin-top: 0; }

.belegliste { display: grid; gap: .6rem; }

.beleg {
  border: 1px solid var(--rand);
  border-radius: var(--rund-2);
  background: var(--glas);
  overflow: hidden;
  transition: border-color var(--weich);
}
.beleg:hover { border-color: var(--rand-stark); }
.beleg[open] { border-color: var(--tuerkis); }

.beleg summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.2rem;
  cursor: pointer;
  list-style: none;
}
.beleg summary::-webkit-details-marker { display: none; }
/* Eigenes Aufklappzeichen statt des Standarddreiecks. */
.beleg summary::after {
  content: '';
  width: 8px; height: 8px;
  border-right: 2px solid var(--hell-3);
  border-bottom: 2px solid var(--hell-3);
  transform: rotate(45deg);
  transition: transform var(--weich);
  margin-left: .4rem;
}
.beleg[open] summary::after { transform: rotate(-135deg); }

.beleg__nummer {
  font-family: var(--schrift-daten);
  font-size: .8rem;
  color: var(--hell-3);
  white-space: nowrap;
}
.beleg__titel {
  display: block;
  font-weight: 600;
  color: var(--hell);
  margin-bottom: .15rem;
}
.beleg__datum { display: block; font-size: .84rem; color: var(--hell-3); }
.beleg__betrag {
  font-family: var(--schrift-titel);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--hell);
  white-space: nowrap;
}

.beleg__inhalt {
  padding: 0 1.2rem 1.3rem;
  border-top: 1px solid var(--rand);
  padding-top: 1.2rem;
}
.beleg__text {
  font-size: .92rem;
  line-height: 1.65;
  color: var(--hell-2);
  margin: 0 0 1rem;
}

.positionen {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.2rem;
  font-size: .9rem;
}
.positionen th {
  text-align: left;
  padding: .5rem .6rem;
  font-family: var(--schrift-daten);
  font-size: .64rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--hell-3);
  border-bottom: 1px solid var(--rand);
  font-weight: 700;
}
.positionen td {
  padding: .7rem .6rem;
  border-bottom: 1px solid rgba(255,255,255,.05);
  color: var(--hell-2);
  vertical-align: top;
}
.positionen td strong { color: var(--hell); font-weight: 600; }
.positionen .rechts, .positionen th.rechts { text-align: right; white-space: nowrap; }
.positionen__text {
  display: block;
  font-size: .85rem;
  color: var(--hell-3);
  margin-top: .2rem;
  line-height: 1.5;
}

@media (max-width: 700px) {
  .beleg summary { grid-template-columns: minmax(0, 1fr) auto; gap: .5rem 1rem; }
  .beleg__nummer { grid-column: 1 / -1; }
  .beleg summary::after { display: none; }
  .positionen th:nth-child(2), .positionen td:nth-child(2),
  .positionen th:nth-child(3), .positionen td:nth-child(3) { display: none; }
}

/* ── Zugänge ─────────────────────────────────────────────────────────── */
.zugangsliste { display: grid; gap: .8rem; }
.zugang {
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--rand);
  border-radius: var(--rund-2);
  background: var(--glas);
}
.zugang__kopf { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin-bottom: .4rem; }
.zugang__titel { font-weight: 700; color: var(--hell); }
.zugang__adresse { display: inline-block; font-size: .86rem; color: var(--tuerkis); margin-bottom: .8rem; }
.zugang__paar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: .8rem;
  padding-top: .8rem;
  border-top: 1px solid var(--rand);
}
.zugang__marke {
  display: block;
  font-family: var(--schrift-daten);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--hell-3);
  margin-bottom: .25rem;
}
.zugang code {
  font-family: var(--schrift-daten);
  font-size: .92rem;
  color: var(--hell);
  background: var(--tinte-3);
  padding: .3rem .6rem;
  border-radius: var(--rund-1);
  display: inline-block;
}
.zugang__zeigen {
  border: 0;
  background: none;
  padding: .3rem .4rem;
  font: inherit;
  font-size: .8rem;
  color: var(--tuerkis);
  cursor: pointer;
  text-decoration: underline;
}