/* ==========================================================
   Troncom -- Designsystem
   Schwarz ist der Grund. Von Squarespace: leichte, eng gesetzte
   Ueberschriften, kantige Versal-Knoepfe, Navigation mit Auf-
   klappmenues, grosse Abschlusszeile. Von Black Forest Labs:
   Mono-Beschriftung, Chips, Haarlinienraster, gestapelte Karten.

   Reihenfolge: Schrift, Tokens, Grundregeln, Satz, Raster,
   Navigation, Bausteine, Fuss, Bewegung.
   Seitenmodule (home.css, kiloesung.css ...) tragen nur noch
   ihre eigenen Diagramme und Sonderflaechen.
   ========================================================== */

/* ---------- Schrift ----------
   Geist und Geist Mono liegen selbst gehostet unter fonts/ --
   keine Anfrage an Google, die Besucher-IP bleibt beim eigenen Server. */
@font-face {
  font-family: 'Geist'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('fonts/geist-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('fonts/geist-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist Mono'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('fonts/geist-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist Mono'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('fonts/geist-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens ---------- */
:root {
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Raster */
  --wrap: 1520px;
  --gutter: clamp(20px, 2.8vw, 40px);
  --nav-leiste: clamp(64px, 5.6vw, 80px);    /* Zeile mit Logo, Menue und Knopf */
  /* Schwarz ueber der Zeile: der Verlauf darunter laesst die Leiste
     tiefer wirken, als sie ist -- so steht die Zeile in der optischen
     Mitte der schwarzen Zone statt an ihrer Oberkante. */
  --nav-oben: clamp(4px, 1.1vw, 16px);
  --nav-h: calc(var(--nav-oben) + var(--nav-leiste));   /* belegte Hoehe oben */
  --sek: clamp(88px, 11vw, 160px);           /* Abstand zwischen Abschnitten */
  --radius: 4px;
  --radius-karte: 8px;

  /* Grund und Flaechen -- alles bleibt schwarz, Stufen entstehen ueber Deckung */
  --black: #000;
  --white: #fff;
  --flaeche-1: #0a0a0a;                      /* Karte */
  --flaeche-2: #111;                         /* Karte im Menue, Hover */
  --flaeche-karte: rgba(255,255,255,.025);

  /* Deckungsleiter, siehe farbwelt.md */
  --text-2: rgba(255,255,255,.66);           /* Vorspann, Fliesstext */
  --text-3: rgba(255,255,255,.5);            /* Kicker, Beschriftung */
  --rule: rgba(255,255,255,.14);             /* Haarlinie */
  --rule-strong: rgba(255,255,255,.3);       /* Rahmen */

  /* Akzente: Bernstein = offen, Mint = erledigt (farbwelt.md) */
  --akzent: #FFC46B;
  --gegen: #7CF5B0;

  /* Bewegung */
  --ease: cubic-bezier(.25, 0, .3, 1);
  --ease-out: cubic-bezier(.16, .8, .3, 1);

  /* Altbestand, von den Diagrammen in den Seitenmodulen noch benutzt */
  --gray-400: #a3a3a3;
  --gray-500: #737373;
  --gray-900: #171717;
  --ease-1: cubic-bezier(0.25, 0, 0.3, 1);
  --ease-2: cubic-bezier(0.25, 0, 0.4, 1);
}

/* ---------- Grundregeln ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  /* Nichts darf seitlich ueberstehen -- auf dem Handy wuerde sonst das
     Layout breiter als der Bildschirm und der Menueknopf rutscht hinaus. */
  overflow-x: hidden;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 20px);
  background: #000;
  -webkit-text-size-adjust: 100%;
}
body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  background: #000;
  color: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* "clip" statt "hidden": beschneidet genauso, macht den Body aber
     nicht zum Scrollcontainer -- sonst wirkt position:sticky nicht. */
  overflow-x: hidden;
  overflow-x: clip;
}
img, video, svg, canvas, iframe { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
ul, ol { list-style: none; }
::selection { background: #fff; color: #000; }
:focus-visible { outline: 1px solid #fff; outline-offset: 3px; }

h1, h2, h3, h4 { font-weight: 400; hyphens: none; }
h1, h2 { text-wrap: balance; }
:where(p, li, dd, td, th) { overflow-wrap: break-word; hyphens: manual; }
/* Silbentrennung erst, wenn die Spalten schmal werden */
@media (max-width: 620px) { :where(p, li, dd, td, th) { hyphens: auto; } }

/* Bildschirmleser-Text */
.nur-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ---------- Satz ---------- */
.kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: clamp(11px, .95vw, 12px);
  font-weight: 400;
  letter-spacing: .14em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--text-3);
}
.kicker b { font-weight: 500; color: #fff; }
.t-display {
  font-size: clamp(46px, 6.8vw, 108px);
  font-weight: 300;
  letter-spacing: -.055em;
  line-height: .98;
}
.t-h2 {
  font-size: clamp(34px, 4.2vw, 60px);
  font-weight: 400;
  letter-spacing: -.045em;
  line-height: 1.02;
}
.t-h3 {
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 400;
  letter-spacing: -.03em;
  line-height: 1.12;
}
.t-sub {
  font-size: clamp(18px, 1.45vw, 21px);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.2;
}
.t-lead {
  font-size: clamp(17px, 1.45vw, 21px);
  line-height: 1.5;
  letter-spacing: -.01em;
  color: var(--text-2);
  hyphens: manual;
}
.t-body { font-size: clamp(15px, 1.15vw, 16px); line-height: 1.6; color: var(--text-2); }

/* ---------- Raster ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.sek { padding-block: var(--sek); }
.sek.is-eng { padding-block: calc(var(--sek) * .6); }
.sek.is-linie { border-top: 1px solid var(--rule); }

/* Abschnittskopf: links Kicker und Titel, rechts der Vorspann (Squarespace) */
.kopf {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
  gap: clamp(24px, 5vw, 96px);
  align-items: end;
  margin-bottom: clamp(44px, 5.4vw, 80px);
}
.kopf .kicker { margin-bottom: clamp(18px, 2vw, 26px); }
.kopf h2 {
  max-width: 18ch;
  font-size: clamp(34px, 4.2vw, 60px);
  font-weight: 400;
  letter-spacing: -.045em;
  line-height: 1.02;
}
.kopf > p, .kopf-text {
  max-width: 54ch;
  font-size: clamp(15px, 1.25vw, 17px);
  line-height: 1.6;
  color: var(--text-2);
}
.kopf.is-mittig {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
}
.kopf.is-mittig h2 { max-width: 20ch; margin-inline: auto; }
.kopf.is-mittig > p { margin-inline: auto; }
@media (max-width: 880px) {
  .kopf { grid-template-columns: 1fr; align-items: start; }
}

/* ---------- Navigation ----------
   Massiv schwarze Leiste ueber die volle Breite, ohne Kante. Darunter
   ein weicher Schatten, in dem der Inhalt beim Scrollen verschwindet.
   Links Logo, mittig die Punkte, rechts der weisse Kasten. Punkte mit
   Pfeil klappen ein Menue auf (Squarespace). */
body > nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: var(--nav-h);
  padding: var(--nav-oben) var(--gutter) 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: 24px;
}
body > nav::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: #000;
}
/* Uebergang statt Kante: der Verlauf beginnt im selben Schwarz wie die
   Leiste und laeuft ueber eine weiche Kurve aus -- keine gerade Rampe,
   sonst zeichnet sich ihr Anfang als Linie ab. */
body > nav::after {
  content: ''; position: absolute; left: 0; right: 0; top: 100%; z-index: -1; pointer-events: none;
  height: clamp(70px, 7.6vw, 112px);
  background: linear-gradient(to bottom,
    rgba(0,0,0,1)    0%,
    rgba(0,0,0,.97)  8%,
    rgba(0,0,0,.91) 16%,
    rgba(0,0,0,.82) 25%,
    rgba(0,0,0,.69) 35%,
    rgba(0,0,0,.54) 46%,
    rgba(0,0,0,.39) 57%,
    rgba(0,0,0,.25) 68%,
    rgba(0,0,0,.14) 79%,
    rgba(0,0,0,.06) 90%,
    rgba(0,0,0,0)  100%);
}
.logo { justify-self: start; align-self: center; display: block; line-height: 0; }
.logo img { height: clamp(22px, 2.1vw, 27px); width: auto; }

.nav-menu { justify-self: center; display: flex; align-items: stretch; gap: clamp(8px, 1.4vw, 24px); }
.nav-punkt { display: flex; align-items: center; }
.nav-link {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 8px;
  border: 0; background: none;
  color: #fff;
  font-size: 13px; font-weight: 500; letter-spacing: .06em; line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
}
.nav-link::after {
  content: ''; position: absolute; left: 8px; right: 8px; bottom: 4px; height: 1px;
  background: #fff; transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease);
}
.nav-link:hover::after,
.nav-link[aria-current="page"]::after,
.nav-link.is-hier::after,
.nav-punkt.is-offen > .nav-link::after { transform: scaleX(1); }
.nav-pfeil { width: 9px; height: 9px; flex: 0 0 auto; transition: transform .3s var(--ease); }
.nav-punkt.is-offen .nav-pfeil { transform: rotate(180deg); }

.nav-aktion { justify-self: end; align-self: center; display: flex; align-items: center; gap: 6px; }
.nav-cta {
  display: inline-flex; align-items: center; justify-content: center;
  height: clamp(42px, 3.4vw, 48px);
  padding: 0 clamp(16px, 1.6vw, 24px);
  border-radius: var(--radius);
  background: #fff; color: #000;
  font-size: 13px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap;
  transition: background-color .25s var(--ease);
}
.nav-cta:hover { background: rgba(255,255,255,.84); }

/* Aufklappmenue: schwarze Flaeche mit Rundung, mittig unter der Leiste */
.mega {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  width: min(1200px, calc(100vw - 2 * var(--gutter)));
  padding: clamp(28px, 2.8vw, 40px);
  border-radius: var(--radius-karte);
  opacity: 0; visibility: hidden;
  transform: translate(-50%, -8px);
  transition: opacity .28s var(--ease), transform .28s var(--ease), visibility 0s linear .28s;
  isolation: isolate;
}
.mega::after {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: #000;
  box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 50px 90px -10px rgba(0,0,0,.85);
}
/* Bruecke ueber den Spalt zwischen Leiste und Menue, damit der Zeiger
   auf dem Weg nach unten das Menue nicht verliert */
.mega::before { content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.nav-punkt.is-offen > .mega {
  opacity: 1; visibility: visible;
  transform: translate(-50%, 0);
  transition: opacity .28s var(--ease), transform .28s var(--ease), visibility 0s;
}
.mega-innen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: clamp(28px, 3vw, 44px); }
.mega-spalten { display: grid; grid-template-columns: repeat(var(--spalten, 3), minmax(0, 1fr)); gap: 28px; }
.mega-titel {
  display: block; margin-bottom: 18px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.52);
}
a.mega-titel:hover { color: #fff; }
.mega-liste li + li { margin-top: 12px; }
.mega-liste a {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 15px; line-height: 1.35; color: #fff;
}
.mega-liste a::after {
  content: '→'; opacity: 0; transform: translateX(-4px);
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.mega-liste a:hover::after, .mega-liste a:focus-visible::after { opacity: 1; transform: none; }
.mega-rechts { padding-left: clamp(24px, 2.6vw, 40px); border-left: 1px solid rgba(255,255,255,.12); display: grid; align-content: start; gap: 10px; }
.mega-rechts .mega-titel { margin-bottom: 8px; }
.mega-karte {
  display: block; padding: 16px;
  border-radius: 6px; background: rgba(255,255,255,.05);
  transition: background-color .2s var(--ease);
}
.mega-karte:hover { background: rgba(255,255,255,.09); }
.mega-karte b { display: block; font-size: 15px; font-weight: 400; color: #fff; }
.mega-karte span { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.4; color: rgba(255,255,255,.58); hyphens: manual; }
.mega-karte img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; margin-bottom: 12px; filter: saturate(.6) brightness(.85); }

/* Menueknopf -- nur schmal sichtbar */
.nav-toggle {
  display: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  width: 44px; height: 44px; margin-right: -10px;
  border: 0; background: none; color: #fff; cursor: pointer;
}
.nav-toggle span { display: block; width: 22px; height: 1.5px; background: currentColor; transition: transform .35s var(--ease); }
body > nav.is-open .nav-toggle span:first-child { transform: translateY(3.75px) rotate(45deg); }
body > nav.is-open .nav-toggle span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
.nav-nur-mobil { display: none; }

@media (max-width: 1080px) {
  body > nav { grid-template-columns: minmax(0, 1fr) auto; }
  .nav-toggle { display: flex; align-self: center; }
  .nav-aktion .nav-cta { display: none; }
  /* Das Menue wird zur schwarzen Vollflaeche, Untermenues klappen darin auf */
  .nav-menu {
    position: fixed; inset: 0; z-index: -2;
    justify-self: stretch; align-self: stretch;   /* sonst schrumpft die Flaeche auf Inhaltsbreite */
    flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0;
    padding: calc(var(--nav-h) + 8px) var(--gutter) 40px;
    background: #000;
    overflow-y: auto; overscroll-behavior: contain;
    opacity: 0; visibility: hidden;
    transition: opacity .3s var(--ease), visibility 0s linear .3s;
  }
  body > nav.is-open .nav-menu { opacity: 1; visibility: visible; transition: opacity .3s var(--ease), visibility 0s; }
  body > nav.is-open::after { display: none; }
  .nav-punkt { display: block; border-bottom: 1px solid var(--rule); }
  .nav-link {
    width: 100%; justify-content: space-between;
    padding: 20px 0;
    font-size: clamp(26px, 7vw, 36px); font-weight: 300; letter-spacing: -.035em; text-transform: none;
  }
  .nav-link::after { display: none; }
  .nav-pfeil { width: 14px; height: 14px; }
  .mega {
    position: static; width: auto; transform: none; padding: 0 0 24px;
    display: none; opacity: 1; visibility: visible;
  }
  .mega::before, .mega::after { display: none; }
  .nav-punkt.is-offen > .mega { display: block; transform: none; }
  .mega-innen, .mega-spalten { grid-template-columns: 1fr; gap: 24px; }
  .mega-rechts { padding-left: 0; border-left: 0; }
  .nav-nur-mobil { display: block; border-bottom: 0; padding-top: 28px; }
  .nav-nur-mobil .hero-cta { width: 100%; }
  html.nav-offen { overflow: hidden; }
}

/* ---------- Knoepfe (nach Squarespace) ----------
   Weisser Kasten, Versalien, kaum Rundung. Der Pfeil schiebt sich
   erst beim Zeigen herein. */
.hero-cta, .knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: clamp(52px, 4.2vw, 60px);
  padding: 0 clamp(22px, 2vw, 30px);
  border: 0; border-radius: var(--radius);
  background: #fff; color: #000;
  font-size: 13px; font-weight: 500; letter-spacing: .06em; line-height: 1;
  text-transform: uppercase; white-space: nowrap;
  cursor: pointer;
  transition: background-color .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
}
.hero-cta:hover, .knopf:hover { background: rgba(255,255,255,.84); }
.hero-cta:active, .knopf:active { transform: translateY(1px); }
.arrow { display: inline-block; }
.hero-cta .arrow, .knopf .arrow {
  width: 0; margin-left: -10px; overflow: hidden;
  opacity: 0; transform: translateX(-6px);
  transition: width .3s var(--ease), margin .3s var(--ease), opacity .3s var(--ease), transform .3s var(--ease);
}
.hero-cta:hover .arrow, .hero-cta:focus-visible .arrow,
.knopf:hover .arrow, .knopf:focus-visible .arrow { width: 1em; margin-left: 0; opacity: 1; transform: none; }

/* Zweiter Knopf (nach Black Forest Labs): dunkel, Haarkante, Glasgrund */
.is-ghost {
  background: rgba(0,0,0,.3); color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.3);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.is-ghost:hover { background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.7); }
.knopf-reihe { display: flex; flex-wrap: wrap; gap: 10px; }

/* Chips (nach Black Forest Labs): Mono-Versalien im Haarrahmen */
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,.25); border-radius: var(--radius);
  background: rgba(0,0,0,.3);
  color: #fff;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; line-height: 1.1;
  text-transform: uppercase; white-space: nowrap;
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.chip i { font-size: 10px; opacity: .75; }
a.chip:hover, a.chip:focus-visible { border-color: rgba(255,255,255,.65); background: rgba(255,255,255,.07); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* Pfeil-Verweis (nach Black Forest Labs): "→ Text", unterstrichen */
.pfeil-link {
  display: inline-flex; align-items: center; gap: 8px;
  color: #fff; font-size: 14px; font-weight: 500;
  text-decoration: underline; text-decoration-color: rgba(255,255,255,.4); text-underline-offset: 5px;
  transition: text-decoration-color .25s var(--ease);
}
.pfeil-link:hover, .pfeil-link:focus-visible { text-decoration-color: #fff; }
.pfeil-link::before { content: '→'; text-decoration: none; }

/* Pillen (Squarespace-Reiter) */
.pillen { display: flex; flex-wrap: wrap; gap: 6px; }
.pille {
  padding: 12px 18px; border: 0; border-radius: 100px;
  background: none; color: rgba(255,255,255,.72);
  font-size: 14px; font-weight: 500; letter-spacing: -.005em;
  cursor: pointer;
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.pille:hover { color: #fff; background: rgba(255,255,255,.07); }
.pille[aria-selected="true"] { color: #fff; background: rgba(255,255,255,.14); }

/* ---------- Buehne ----------
   Bild randlos, Text unten links (Unterseiten) oder mittig (Start).
   Unten laeuft das Bild in Schwarz aus. */
.buehne {
  position: relative;
  min-height: 92vh; min-height: 92svh;
  display: flex; align-items: flex-end;
  overflow: hidden;
  background: #000;
}
.buehne-bild { position: absolute; inset: 0; }
.buehne-bild img, .buehne-bild video { width: 100%; height: 100%; object-fit: cover; object-position: var(--bild-pos, 50% 50%); }
.buehne::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,0) 75%),
    linear-gradient(to bottom, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 55%, rgba(0,0,0,.9) 90%, #000 100%);
}
.buehne-inhalt {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--wrap); margin-inline: auto;
  padding: calc(var(--nav-h) + 80px) var(--gutter) clamp(56px, 9vh, 110px);
}
.buehne h1 {
  max-width: 14ch;
  margin-top: clamp(18px, 2vw, 26px);
  font-size: clamp(46px, 6.8vw, 108px);
  font-weight: 300; letter-spacing: -.055em; line-height: .98;
  text-shadow: 0 2px 40px rgba(0,0,0,.4);
}
.buehne .t-lead, .buehne-lead {
  max-width: 52ch;
  margin-top: clamp(20px, 2.4vw, 30px);
  font-size: clamp(17px, 1.45vw, 21px); line-height: 1.5; letter-spacing: -.01em;
  color: rgba(255,255,255,.88);
  hyphens: manual;
}
.buehne .kicker { color: rgba(255,255,255,.8); }
.buehne .knopf-reihe, .buehne .chips { margin-top: clamp(26px, 3vw, 40px); }
.buehne.is-mittig { align-items: center; text-align: center; }
.buehne.is-mittig::after {
  background:
    radial-gradient(ellipse 70% 60% at 50% 45%, rgba(0,0,0,.5) 0%, rgba(0,0,0,.2) 60%, rgba(0,0,0,0) 100%),
    linear-gradient(to bottom, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 24%, rgba(0,0,0,0) 60%, rgba(0,0,0,.9) 90%, #000 100%);
}
.buehne.is-mittig .buehne-inhalt { display: flex; flex-direction: column; align-items: center; }
.buehne.is-mittig h1 { max-width: 16ch; }
.buehne.is-mittig .knopf-reihe, .buehne.is-mittig .chips { justify-content: center; }
@media (max-width: 560px) {
  .buehne .knopf-reihe { flex-direction: column; align-items: stretch; width: 100%; }
}

/* Eintritt der Buehne: Zeilen heben sich nacheinander */
.buehne-inhalt > * { opacity: 0; transform: translateY(16px); animation: auftritt .9s var(--ease) forwards; }
.buehne-inhalt > *:nth-child(1) { animation-delay: .1s; }
.buehne-inhalt > *:nth-child(2) { animation-delay: .22s; }
.buehne-inhalt > *:nth-child(3) { animation-delay: .4s; }
.buehne-inhalt > *:nth-child(4) { animation-delay: .52s; }
.buehne-inhalt > *:nth-child(5) { animation-delay: .64s; }
@keyframes auftritt { to { opacity: 1; transform: none; } }

/* ---------- Karten ---------- */
.karten { display: grid; grid-template-columns: repeat(var(--spalten, 3), minmax(0, 1fr)); gap: clamp(10px, 1.1vw, 16px); }
.karte {
  padding: clamp(24px, 2.4vw, 34px);
  border-radius: var(--radius-karte);
  background: var(--flaeche-karte);
  box-shadow: inset 0 0 0 1px var(--rule);
}
.karte h3 { font-size: clamp(18px, 1.45vw, 21px); font-weight: 500; letter-spacing: -.02em; line-height: 1.2; }
.karte p { margin-top: 10px; font-size: clamp(14px, 1.1vw, 15px); line-height: 1.55; color: var(--text-2); }
.karte .kicker { margin-bottom: 18px; }
@media (max-width: 900px) { .karten { grid-template-columns: repeat(min(var(--spalten, 3), 2), minmax(0, 1fr)); } }
@media (max-width: 620px) { .karten { grid-template-columns: 1fr; } }

/* Bildkarte (Squarespace): Bild vollflaechig, Text oben, Pfeil unten rechts */
.bildkarte {
  position: relative; display: flex; flex-direction: column; justify-content: space-between;
  min-height: clamp(360px, 36vw, 520px);
  padding: clamp(22px, 2.2vw, 30px);
  border-radius: var(--radius-karte); overflow: hidden;
  background: var(--flaeche-1);
  isolation: isolate;
}
.bildkarte > img {
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.75) brightness(.72);
  transition: transform 1.2s var(--ease-out), filter .6s var(--ease);
}
.bildkarte::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(0,0,0,.72) 0%, rgba(0,0,0,.2) 45%, rgba(0,0,0,.55) 100%);
}
.bildkarte::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); pointer-events: none; }
.bildkarte h3 { font-size: clamp(20px, 1.6vw, 24px); font-weight: 500; letter-spacing: -.02em; line-height: 1.15; }
.bildkarte p { margin-top: 10px; max-width: 34ch; font-size: 15px; line-height: 1.5; color: rgba(255,255,255,.78); }
.bildkarte-pfeil {
  align-self: flex-end;
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255,255,255,.4);
  transition: background-color .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
}
a.bildkarte:hover > img { transform: scale(1.04); filter: saturate(.9) brightness(.8); }
a.bildkarte:hover .bildkarte-pfeil { background: #fff; color: #000; box-shadow: none; }

/* ---------- Merkmale: Symbol, Titel, Text im Haarlinienraster ---------- */
.merkmale { display: grid; grid-template-columns: repeat(var(--spalten, 3), minmax(0, 1fr)); column-gap: clamp(24px, 3vw, 48px); row-gap: clamp(36px, 4vw, 56px); }
.merkmal { padding-top: clamp(20px, 2vw, 26px); border-top: 1px solid var(--rule); }
.merkmal-symbol {
  width: 40px; height: 40px; display: grid; place-items: center;
  margin-bottom: clamp(18px, 2vw, 26px);
  border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--rule-strong);
  font-size: 15px; color: #fff;
}
.merkmal h3 { font-size: clamp(18px, 1.45vw, 21px); font-weight: 500; letter-spacing: -.02em; line-height: 1.2; }
.merkmal p { margin-top: 10px; max-width: 42ch; font-size: clamp(14px, 1.1vw, 15px); line-height: 1.6; color: var(--text-2); }
@media (max-width: 900px) { .merkmale { grid-template-columns: repeat(min(var(--spalten, 3), 2), minmax(0, 1fr)); } }
@media (max-width: 620px) { .merkmale { grid-template-columns: 1fr; } }

/* ---------- Schritte: Nummer in Mono, Text daneben ---------- */
.schritte { border-top: 1px solid var(--rule-strong); }
.schritt {
  display: grid; grid-template-columns: clamp(56px, 7vw, 110px) minmax(0, 1fr) minmax(0, 1.2fr);
  gap: clamp(14px, 2.4vw, 40px); align-items: baseline;
  padding: clamp(22px, 2.4vw, 32px) 0;
  border-bottom: 1px solid var(--rule);
}
.schritt-nr { font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; color: var(--text-3); }
.schritt h3 { font-size: clamp(20px, 1.8vw, 26px); font-weight: 400; letter-spacing: -.03em; line-height: 1.15; }
.schritt p { font-size: clamp(14px, 1.1vw, 15.5px); line-height: 1.6; color: var(--text-2); }
.schritt-zeit { display: block; margin-top: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
@media (max-width: 760px) {
  .schritt { grid-template-columns: 44px minmax(0, 1fr); }
  .schritt p { grid-column: 2; }
}

/* ---------- Aussage: ein Satz, gross und leicht ---------- */
.aussage { padding-block: var(--sek); text-align: center; }
.aussage p {
  max-width: 20ch; margin-inline: auto;
  font-size: clamp(34px, 5vw, 76px); font-weight: 300; letter-spacing: -.05em; line-height: 1.02;
  text-wrap: balance; hyphens: none;
}
.aussage span {
  display: block; margin-top: clamp(22px, 2.6vw, 34px);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3);
}

/* ---------- Band: Bild ueber die volle Breite, Titel mittig ---------- */
.band { position: relative; overflow: hidden; background: #000; }
.band img { width: 100%; height: clamp(380px, 52vw, 760px); object-fit: cover; object-position: var(--bild-pos, 50% 50%); filter: saturate(.8) brightness(.62); }
.band::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, #000 0%, rgba(0,0,0,0) 24%, rgba(0,0,0,0) 76%, #000 100%);
}
.band-text {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(14px, 1.6vw, 22px); padding: var(--gutter); text-align: center;
}
.band-text .kicker { color: rgba(255,255,255,.85); }
.band-titel {
  max-width: 16ch;
  font-size: clamp(40px, 6.4vw, 100px); font-weight: 300; letter-spacing: -.055em; line-height: 1;
  text-wrap: balance; text-shadow: 0 2px 40px rgba(0,0,0,.45);
}

/* ---------- Medienrahmen: Bild mit Kante und Rundung ---------- */
.medien { position: relative; overflow: hidden; border-radius: var(--radius-karte); background: var(--flaeche-1); }
.medien img { width: 100%; height: 100%; object-fit: cover; }
.medien::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); pointer-events: none; }

/* ---------- Reiter und Tour (gemeinsame Mechanik in troncom.js) ----------
   Reiter: Pillen oben, darunter wechselt die grosse Karte (Squarespace).
   Tour: links die Liste, rechts das Bild, laeuft von selbst weiter
   (Squarespace "So einfach wie nie"). */
[role="tabpanel"][hidden] { display: none; }

.tour { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 96px); align-items: center; }
.tour-liste { display: grid; gap: 4px; }
.tour-punkt {
  display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: baseline;
  padding: 6px 0; border: 0; background: none; text-align: left; cursor: pointer;
  color: rgba(255,255,255,.4);
  transition: color .3s var(--ease);
}
.tour-punkt:hover { color: rgba(255,255,255,.75); }
.tour-punkt[aria-selected="true"] { color: #fff; }
.tour-punkt .schritt-nr { color: inherit; opacity: .8; }
.tour-titel { font-size: clamp(22px, 2.2vw, 32px); font-weight: 300; letter-spacing: -.035em; line-height: 1.15; }
.tour-texte { margin-top: clamp(24px, 3vw, 40px); min-height: 7.5em; }
.tour-text p { max-width: 44ch; font-size: clamp(15px, 1.2vw, 16.5px); line-height: 1.6; color: var(--text-2); }
.tour-text .kicker { margin-bottom: 12px; }
.tour-steuer { display: flex; align-items: center; gap: 14px; margin-top: clamp(20px, 2.4vw, 30px); }
.tour-striche { display: flex; gap: 6px; }
.tour-striche span { position: relative; width: 28px; height: 2px; background: rgba(255,255,255,.2); overflow: hidden; }
.tour-striche span i { position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: left; }
.tour-striche span.is-fertig i { transform: scaleX(1); }
.tour-striche span.is-laeuft i { animation: tourLauf var(--tour-dauer, 6s) linear forwards; }
.tour.is-pause .tour-striche span.is-laeuft i { animation-play-state: paused; }
@keyframes tourLauf { to { transform: scaleX(1); } }
.tour-pause {
  width: 32px; height: 32px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: none; color: #fff; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.3);
}
.tour-pause:hover { box-shadow: inset 0 0 0 1px #fff; }
.tour-pause svg { width: 10px; height: 10px; }
.tour-pause .ic-play { display: none; }
.tour.is-pause .tour-pause .ic-play { display: block; }
.tour.is-pause .tour-pause .ic-pause { display: none; }
.tour-medien { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-karte); overflow: hidden; background: var(--flaeche-1); }
.tour-medien::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); pointer-events: none; }
.tour-bild { position: absolute; inset: 0; opacity: 0; transition: opacity .7s var(--ease); }
.tour-bild.is-aktiv { opacity: 1; }
.tour-bild img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.75) brightness(.78); transform: scale(1.04); transition: transform 6s linear; }
.tour-bild.is-aktiv img { transform: scale(1); }
.tour-bild figcaption { position: absolute; left: 16px; top: 16px; }
@media (max-width: 900px) {
  .tour { grid-template-columns: 1fr; }
  .tour-medien { order: -1; aspect-ratio: 16 / 10; }
}

/* ---------- Fragen: links der Kopf, rechts die Aufklappliste ---------- */
.fragen { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 96px); align-items: start; }
.fragen-kopf { position: sticky; top: calc(var(--nav-h) + 40px); }
.fragen-kopf h2 { margin-top: clamp(18px, 2vw, 26px); font-size: clamp(34px, 4.2vw, 60px); font-weight: 400; letter-spacing: -.045em; line-height: 1.02; max-width: 14ch; }
.fragen-kopf p { margin-top: 20px; max-width: 42ch; font-size: clamp(15px, 1.2vw, 16px); line-height: 1.6; color: var(--text-2); }
.fragen-liste { border-top: 1px solid var(--rule-strong); }
.frage { border-bottom: 1px solid var(--rule); }
.frage summary {
  display: grid; grid-template-columns: minmax(0, 1fr) 20px; gap: 20px; align-items: center;
  padding: clamp(20px, 2.2vw, 28px) 0;
  cursor: pointer; list-style: none;
  font-size: clamp(18px, 1.7vw, 24px); font-weight: 400; letter-spacing: -.025em; line-height: 1.25;
}
.frage summary::-webkit-details-marker { display: none; }
.frage-ic { position: relative; width: 14px; height: 14px; justify-self: end; }
.frage-ic::before, .frage-ic::after {
  content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: #fff;
  transition: transform .35s var(--ease), opacity .35s;
}
.frage-ic::after { transform: rotate(90deg); }
.frage[open] .frage-ic::after { transform: rotate(0); opacity: 0; }
.frage-antwort { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
.frage[open] .frage-antwort { grid-template-rows: 1fr; }
.frage-antwort > p { overflow: hidden; max-width: 64ch; font-size: clamp(15px, 1.2vw, 16px); line-height: 1.65; color: var(--text-2); }
.frage[open] .frage-antwort > p { padding-bottom: clamp(22px, 2.4vw, 30px); }
@media (max-width: 900px) {
  .fragen { grid-template-columns: 1fr; }
  .fragen-kopf { position: static; }
}

/* ---------- Abschluss (Squarespace): riesige leichte Zeile ---------- */
.abschluss { padding-block: calc(var(--sek) * 1.1) var(--sek); }
.abschluss h2 {
  max-width: 13ch;
  margin-top: clamp(20px, 2.4vw, 30px);
  font-size: clamp(48px, 7.2vw, 112px); font-weight: 300; letter-spacing: -.055em; line-height: .98;
}
.abschluss-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(18px, 2.4vw, 34px); margin-top: clamp(36px, 4.4vw, 60px); }
.abschluss-zeile p { max-width: 36ch; font-size: clamp(14px, 1.1vw, 15px); line-height: 1.5; color: var(--text-2); }

/* ---------- Rechtstexte (Impressum, Datenschutz) ----------
   Links bleibt der Kopf mit Inhaltsuebersicht stehen, rechts
   laeuft der Text in Abschnitten mit Haarlinien. */
.recht { padding: calc(var(--nav-h) + clamp(56px, 8vw, 120px)) 0 var(--sek); }
.recht-raster { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 96px); align-items: start; }
.recht-kopf { position: sticky; top: calc(var(--nav-h) + 40px); }
.recht-kopf h1 { margin-top: clamp(18px, 2vw, 26px); font-size: clamp(44px, 5.4vw, 84px); font-weight: 300; letter-spacing: -.055em; line-height: .98; hyphens: manual; }
.recht-kopf > p { margin-top: 18px; font-size: 15px; line-height: 1.5; color: var(--text-2); }
.recht-kopf .recht-stand { margin-top: 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.recht-inhalt { margin-top: clamp(28px, 3vw, 40px); padding-top: 20px; border-top: 1px solid var(--rule); }
.recht-inhalt ol { margin-top: 14px; display: grid; gap: 8px; }
.recht-inhalt a { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.6); transition: color .25s var(--ease); }
.recht-inhalt a:hover { color: #fff; }
.recht-text section { padding: clamp(24px, 2.6vw, 34px) 0; border-top: 1px solid var(--rule); }
.recht-text section:first-child { border-top-color: var(--rule-strong); }
.recht-text h2 { margin-bottom: 12px; font-size: clamp(20px, 1.7vw, 24px); font-weight: 400; letter-spacing: -.025em; line-height: 1.2; hyphens: manual; }
.recht-text p, .recht-text li { max-width: 68ch; font-size: clamp(15px, 1.15vw, 16px); line-height: 1.7; color: var(--text-2); }
.recht-text p + p { margin-top: 12px; }
.recht-text strong { font-weight: 500; color: #fff; }
.recht-text a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255,255,255,.4); text-underline-offset: 3px; }
.recht-text a:hover { text-decoration-color: #fff; }
.recht-text ul { margin: 10px 0 12px; }
.recht-text ul li { position: relative; padding-left: 18px; }
.recht-text ul li::before { content: ''; position: absolute; left: 0; top: .85em; width: 8px; height: 1px; background: rgba(255,255,255,.5); }
@media (max-width: 900px) {
  .recht-raster { grid-template-columns: 1fr; }
  .recht-kopf { position: static; }
}

/* ---------- Fuss ----------
   Oben der Satz zur Marke wie bei Squarespace, rechts die Spalten im
   Haarlinienraster wie bei Black Forest Labs, darunter die Wortmarke
   ueber die ganze Breite. */
footer { border-top: 1px solid var(--rule); padding: clamp(64px, 8vw, 120px) var(--gutter) clamp(24px, 2.8vw, 36px); }
.ft-oben { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: clamp(40px, 6vw, 110px); }
.ft-marke p {
  max-width: 22ch;
  font-size: clamp(22px, 2vw, 28px); font-weight: 400; line-height: 1.12; letter-spacing: -.025em;
}
.ft-spalten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ft-spalte { padding: 2px clamp(14px, 1.6vw, 24px) 4px; border-left: 1px solid var(--rule); }
.ft-spalte h4 { margin-bottom: clamp(18px, 2vw, 24px); font-size: clamp(15px, 1.2vw, 17px); font-weight: 500; letter-spacing: -.01em; }
.ft-spalte li + li { margin-top: clamp(8px, .9vw, 11px); }
.ft-spalte a {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.6); transition: color .25s var(--ease);
}
.ft-spalte a:hover, .ft-spalte a:focus-visible { color: #fff; }
.ft-kontakt .ft-mail {
  display: inline-block; padding-bottom: 5px; border-bottom: 1px solid rgba(255,255,255,.35);
  font-family: var(--font-sans); font-size: clamp(15px, 1.25vw, 17px); font-weight: 500;
  letter-spacing: -.01em; text-transform: none; color: #fff;
  transition: border-color .25s var(--ease);
}
.ft-kontakt .ft-mail:hover { border-bottom-color: #fff; }
.ft-kontakt p { margin-top: 16px; font-size: 13.5px; line-height: 1.55; color: rgba(255,255,255,.45); }
/* Wortmarke unten links, wie bei Black Forest Labs. Das SVG hat
   links 7,13 % Innenrand -- der Versatz zieht den Rahmen genau an
   die Textkante. */
.ft-wort { --breite: clamp(170px, 19vw, 290px); display: block; width: max-content; margin-top: clamp(56px, 7vw, 110px); line-height: 0; }
.ft-wort img { width: var(--breite); max-width: none; margin-left: calc(var(--breite) * -.0713); opacity: .92; transition: opacity .25s var(--ease); }
.ft-wort:hover img { opacity: 1; }
.ft-unten {
  margin-top: clamp(22px, 2.6vw, 34px); padding-top: clamp(18px, 2vw, 24px);
  border-top: 1px solid var(--rule);
  display: flex; justify-content: space-between; align-items: center; gap: 18px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.45);
}
.ft-recht { display: flex; gap: clamp(16px, 2vw, 28px); }
.ft-recht a { transition: color .25s var(--ease); }
.ft-recht a:hover { color: #fff; }
@media (max-width: 1000px) { .ft-oben { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
  .ft-spalten { grid-template-columns: 1fr 1fr; row-gap: 32px; }
  .ft-unten { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ---------- Bewegung beim Scrollen ---------- */
.fade-in { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.fade-in.visible { opacity: 1; transform: none; }

/* Gruppen (Karten, Merkmale, Schritte, Koepfe) treten nacheinander auf.
   troncom.js setzt .staffel und --i an die Kinder. */
.staffel > * {
  opacity: 0; translate: 0 26px;
  transition: opacity 1s var(--ease-out), translate 1s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.staffel.visible > * { opacity: 1; translate: 0 0; }

/* Bilder in Buehne und Band: langsamer Zoom, dazu Parallaxe beim Scrollen
   (--py setzt troncom.js). Zoom ueber "scale", Parallaxe ueber
   "translate" -- beide Eigenschaften setzen sich zusammen. */
.buehne-bild img { scale: 1.06; translate: 0 var(--py, 0px); animation: atmen 26s ease-in-out infinite alternate; will-change: translate; }
.buehne-bild video { scale: 1.08; translate: 0 var(--py, 0px); will-change: translate; }
.band img { scale: 1.16; translate: 0 var(--py, 0px); will-change: translate; }
@keyframes atmen { from { scale: 1.06; } to { scale: 1.14; } }

/* Lichtschein, der dem Zeiger ueber Karten folgt (--mx, --my aus troncom.js) */
.karte { position: relative; isolation: isolate; }
.karte::after {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.075), transparent 62%);
  opacity: 0; transition: opacity .4s var(--ease);
}
.karte:hover::after { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fade-in, .buehne-inhalt > * { opacity: 1; transform: none; transition: none; animation: none; }
  .staffel > * { opacity: 1; translate: none; transition: none; }
  .buehne-bild img, .buehne-bild video, .band img { animation: none; translate: none; }
  .tour-bild img { transition: none; transform: none; }
  .tour-striche span.is-laeuft i { animation: none; transform: scaleX(1); }
}