/* ============================================================
   Tenew, Landingpage (Root-Domain tenew.de)
   Eigenstaendiges Stylesheet: die Landingpage laedt app.css NICHT.
   Die Tokens sind hier bewusst wiederholt und muessen mit dem
   :root-Block in app.css wertgleich bleiben.

   Farbwelt: Espresso und Messing auf Kalk. Auf einer Messingflaeche steht
   --text (4,8:1), nicht Weiss (3,3:1) und nicht --espresso (4,4:1).

   Bewegungsgrenzen (verbindlich, Auftrag 2026-09-06):
   keine Mausparallaxe, Bloecke blenden EINMAL ein und stehen dann,
   Hover-Wechsel bleibt, Partnerband laeuft durch, Logo zeichnet
   sich genau einmal. prefers-reduced-motion schaltet alles ab
   (Block am Dateiende).
   ============================================================ */

@font-face {
  /* Die Wortmarke. Eigene Schriftdatei aus Schibsted Grotesk bei Gewicht 500,
     gebaut von werkzeuge/markenschrift-bauen.js. Sie enthaelt genau die sechs
     Glyphen von "tenew." und traegt den optischen Ausgleich des Punktes (-.12em)
     in der Vorbreite der Glyphe, nicht mehr als margin im Stylesheet.
     Der Name muss abweichen: Schibsted Grotesk steht unter der SIL Open Font
     License, die Aenderungen erlaubt und einen anderen Familiennamen verlangt.
     Lizenztext und Aenderungsvermerk: public/fonts/OFL.txt.
     Als data:-URI eingebettet und nicht als Datei verlinkt, aus drei Gruenden:
     1068 Byte lohnen keinen zweiten Abruf, die Marke steht damit ohne Nachladen
     schon beim ersten Bild, und der Service Worker braucht keinen neuen Eintrag
     in seiner Asset-Liste, er hat dieses Stylesheet ohnehin.
     unicode-range grenzt die Schrift auf ihre fuenf Zeichen ein: taucht der
     Familienname versehentlich anderswo auf, faellt jedes andere Zeichen
     zurueck auf Schibsted Grotesk. */
  font-family: 'Tenew Marke';
  font-style: normal; font-weight: 500; font-display: block;
  src: url('data:font/woff2;base64,d09GMk9UVE8AAAQsAAoAAAAACDgAAAPfAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAADYVKBmAATAE2AiQDGD9sdGFnEgQGBYZjByAbggfIHoNtu3FVXS8vnclkMnk5j61FnCo7dqoibXwgIB0IOG0zsO/XtnfwZzZU8EiiET2paXs8//7t3F8rg0DiFmnkrQSTgAMMJIzwwfP/x0onEmeA8ok/HMAhnnNt2iK1Ygu7cFdogT5vt655I6AyjYtAm346gREBFuasN1gOTv/swI8DxUd8RtmQBUIxPBSrhOIE9Ykx3IxRs8pYANhgjwWA3U6KBeCvK84EYs/kamm356Z3T7MYwBhmicucM1fuPHkLf+sp5cqRe1MJZzzpjE8fImbZJ0+n4WMBYCebyqax6WwGDA0YRZNEsdHsMkeyhYuFspO3gbSWjDezco3rPjmOFB4l9eIkScsvtaalj6flIY++0tuB/PmlfpPkupL6T7/P/uOscQsnriTUCk95pC1GrAn933rTUq7VJQ5jiUM1r7ZfstWLww/RDFg1rPyx/yXuf3H+6kMXe3jo7epfhOfo3Jjzg/H8oJOzo02sHLU7vtGLG4stzkC6FVPYLnxoehmuSaplTTXpzbDb21PsfXKyu7eWbdY0FlSJNag8tD1jqy7Txj5JH/sOkQdJd6/LfLw8Hi93d/xF8AadXXp4Ox7etu3Y6muo1a+lelce5ZpNhkBhnNzzKuFXSGiLEYe13OSlyFWp1T8e42Q57oDcdPXQqYv7kfH+yjeEj+na4NNjDA/dW9kUw41VF/kpD1JyAam3JEXhjJJeDbk5Pc5gzK3zEhag8p3zYYbsypU70ouUtF/aYtSs2lPy6vu3YekyoI1MacvuTc/ESE5bFm9QSgfZiWdMpK61JzWbJSWn74o0RkaqcnvEMyrlQjbt/sY+3qbSWzLfwq6bb3vkCFbyS/Zs6TNv3rxnyRHCw7Rn6JZ56Ou6pEc1lB/am3tB1669W11oA6V7y/6CAvzgRwBMbR6G/ZA7HErRjLXRmQhwGzjeTP4JyBVM07Nijk5fwqdg/2MhlAKwQJyQQ3tLe6dKxZT6UpfVvJpWjhWQZMk7rbtePrllL/YPFQQAgPdn1zxojqQOqA9qoy1XFDyZhL3bU52O4QYAoAIAfgNxAfHMtZMtydcyDnzrAdQCFUDe1gUAAgAAZ+oK4wPCWfhEkcUwEdJJI5JPB1ElqLDcsL7lSBu1SZu1RVu1bbljH+3OaceYMEdop9YTTrVLFF5vRXA5IJLZI1E5XFpuWN9ypI3apM3aoq3attyxj3Znp8N64zUhAgAAAACARgAAAAAAkKj3TFgGXw6n6jq2ZgYSBvomDhZT1+FMzmd5a/G73tqZWFlyyiWH3BIUkbDu2b+A5vORmh6b/oW2T0KRhPTBYVACAAAA') format('woff2');
  unicode-range: U+002E, U+0065, U+006E, U+0074, U+0077;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('/fonts/schibsted-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('/fonts/schibsted-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('/fonts/plexmono-600-latin.woff2') format('woff2');
}

:root {
  --kalk: #EDEBE5;  --kalk-hell: #F8F7F3;
  --stein: #DAD7CE; --stein-tief: #C6C1B5; --leinen: #E3DFD4;
  --espresso: #2E2620; --espresso-2: #3D342C; --espresso-3: #4A4038;
  --messing: #A98754; --messing-hell: #D6B37C;
  /* Messing als TEXT auf hellem Grund: #A98754 traegt dort nur 3,3:1. */
  --messing-text: #75592A;
  --text: #26211C;
  --text-leise: #6B6259;        /* 6,0:1 auf Weiss, 5,0:1 auf Kalk */
  --text-leise-tief: #57504A;   /* fuer Leinen und Stein */
  --karte: #ffffff;

  /* Statusrollen, wertgleich mit app.css. Die Landingpage nutzt sie fuer die
     Vorgangskarte und fuer die Vorher-Nachher-Karte im Problem-Abschnitt.
     Kein Zustand ist je allein an der Farbe erkennbar: jede Marke traegt
     zusaetzlich Klartext, teils ein Zeichen. */
  --status-erledigt: #3E6B4F;  --status-erledigt-bg: #E6EDE7;
  --status-wartet: #57504A;    --status-wartet-bg: #E7E5DE;
  --status-sie: var(--messing); --status-sie-bg: #FBF7F0;
  --status-problem: #8E3226;   --status-problem-bg: #F6E3DF;
  /* Bestandsnamen, bis Etappe 3 hiessen die beiden so. */
  --gruen: var(--status-erledigt); --gruen-bg: var(--status-erledigt-bg);
  --schnell: .22s cubic-bezier(.4, 0, .2, 1);
  --sanft: .55s cubic-bezier(.22, 1, .36, 1);
  /* --- Eckenrundung, drei Stufen (2026-09-11) ---
     Vorher standen ueberall feste 4px und 999px im Stylesheet. Jetzt an einer Stelle
     steuerbar. Regel bei verschachtelten Kaesten: innen immer kleiner als aussen. */
  --rund-gross: 12px;           /* Karten und grosse Flaechen */
  --rund-klein: 8px;            /* kleine Kaesten, Eingabefelder, innen liegende Kaesten */
  --rund-voll: 999px;           /* Statuspillen und die beiden Hauptknoepfe */
  --marke-punkt-abstand: .04em;  /* Abstand des Markenpunkts, siehe .wortmarke i */
  --rand: 40px;                 /* seitlicher Innenabstand */
  --spalte: 1180px;             /* Satzbreite */
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--kalk);
  color: var(--text);
  font-family: 'Schibsted Grotesk', -apple-system, 'Segoe UI', Roboto, system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3 { margin: 0; font-weight: 500; letter-spacing: -.038em; }
h1 { font-size: clamp(2.1rem, 3.9vw, 3.5rem); line-height: 1.04; }
h2 { font-size: clamp(1.85rem, 3.6vw, 3rem); line-height: 1.06; }
h3 { font-size: 1.32rem; line-height: 1.22; letter-spacing: -.028em; font-weight: 600; }
p { margin: 0; }

.zeile { max-width: var(--spalte); margin: 0 auto; padding: 0 var(--rand); }
.eyebrow {
  font-size: .68rem; font-weight: 700; letter-spacing: .17em;
  text-transform: uppercase; color: var(--messing-text); margin-bottom: 18px;
}
.gross { font-size: 1.14rem; color: var(--text-leise); }
.leise { color: var(--text-leise); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--espresso); color: var(--kalk-hell); padding: 12px 20px;
}
.skip-link:focus { left: 12px; top: 12px; }

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

/* ---------- Hover-Wechsel der Beschriftungen (A3) ----------
   Die Beschriftung steht zweimal im Markup. Feste Hoehe + overflow:hidden,
   Verschiebung um exakt eine Zeilenhoehe. Hoehe, em-Hoehe und Verschiebewert
   MUESSEN uebereinstimmen, sonst sind beide Kopien gleichzeitig sichtbar.
   Deshalb hier ueberall in px statt em: bei font-display:swap weicht die
   Zeilenhoehe der Ersatzschrift ab, und genau dann bricht die em-Fassung. */
.wechsel {
  display: inline-flex; align-items: flex-start; overflow: hidden;
  height: 22px; line-height: 22px; vertical-align: middle;
  text-decoration: none;
}
.wechsel > span { display: block; transition: transform var(--sanft); }
.wechsel > span > em {
  display: block; font-style: normal; height: 22px; line-height: 22px; white-space: nowrap;
}
.wechsel:hover > span, .wechsel:focus-visible > span { transform: translateY(-22px); }

/* ---------- Knoepfe ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  height: 46px; padding: 0 24px; border-radius: var(--rund-voll);
  font-size: .95rem; font-weight: 600; text-decoration: none;
  border: 1px solid transparent; cursor: pointer;
  transition: background var(--schnell), border-color var(--schnell), color var(--schnell);
}
/* align-items MUSS flex-start bleiben. Mit center zentriert der Flexcontainer die
   doppelt hohe Beschriftungsgruppe im Knopf, dann ist von beiden Kopien nur die
   Haelfte zu sehen und der Knopf wirkt leer. */
.knopf.wechsel { height: 46px; line-height: 46px; align-items: flex-start; padding: 0 24px; }
/* 44 statt 46: box-sizing ist border-box, der 1px-Rahmen oben und unten geht von der
   Hoehe ab. Beschriftungshoehe und Verschiebewert muessen die INHALTShoehe treffen. */
.knopf.wechsel > span > em { height: 44px; line-height: 44px; }
.knopf.wechsel:hover > span, .knopf.wechsel:focus-visible > span { transform: translateY(-44px); }
/* Auf Messing steht --text: Weiss traegt dort 3,3:1, --espresso nur 4,4:1. */
.knopf.messing { background: var(--messing); color: var(--text); }
.knopf.messing:hover { background: var(--messing-hell); }
.knopf.rahmen { border-color: rgba(46, 38, 32, .28); color: var(--text); }
.knopf.rahmen:hover { border-color: var(--espresso); background: rgba(46, 38, 32, .05); }
.knopf.klein { height: 38px; padding: 0 18px; font-size: .88rem; }
.knopf.klein.wechsel { line-height: 38px; }
.knopf.klein.wechsel > span > em { height: 36px; line-height: 36px; }
.knopf.klein.wechsel:hover > span, .knopf.klein.wechsel:focus-visible > span { transform: translateY(-36px); }
/* Zweiter Knopf auf dunkler Flaeche (Abschluss). Heller Rahmen, helle Schrift,
   13,9:1. Der frueher hier stehende .aufmessing entfaellt mit der Messingflaeche. */
.knopf.aufdunkel { border-color: rgba(248, 247, 243, .6); color: var(--kalk-hell); }
.knopf.aufdunkel:hover { background: rgba(248, 247, 243, .12); border-color: var(--kalk-hell); }

/* ---------- Schwebende Navigation (A2) ---------- */
.navzone {
  position: fixed; top: 16px; left: 0; right: 0; z-index: 90; pointer-events: none;
}
.navzone .zeile { display: flex; align-items: flex-start; gap: 14px; position: relative; }
.pille {
  pointer-events: auto; display: flex; align-items: center;
  background: rgba(248, 247, 243, .86);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid rgba(46, 38, 32, .1); border-radius: var(--rund-voll);
  padding: 8px 8px 8px 18px;
  box-shadow: 0 12px 34px -24px rgba(46, 38, 32, .7);
  max-width: calc(100vw - 2 * var(--rand));
}
/* ---------- Wortmarke ----------
   Die Marke ist der Schriftzug: "tenew" plus Punkt in Messing. Kein Bildzeichen.
   Gewicht 500, Laufweite leicht eng, immer klein. Der Punkt ist das einzige
   Akzentelement und wird nie umgefaerbt. */
.wortmarke {
  font-family: 'Tenew Marke', 'Schibsted Grotesk', -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-weight: 500; letter-spacing: -.01em; text-transform: lowercase;
  color: var(--espresso); white-space: nowrap;
}
/* Kein Rand mehr: der Ausgleich steckt jetzt in der Vorbreite der Glyphe. */
/* Abstand des Markenpunkts. Die Laufweite der Wortmarke ist negativ und zieht auch den
   Punkt an das w heran; zusaetzlich steckt im Zeichensatz "Tenew Marke" ein optischer
   Ausgleich in der Vorbreite der Glyphe. Beides zusammen liess den Punkt kleben. Diese
   Variable nimmt genau so viel davon zurueck, wie noetig ist, und sonst nichts:
   Form, Farbe und Groesse des Punkts sind unveraendert. */
.wortmarke i { font-style: normal; color: var(--messing); margin-left: var(--marke-punkt-abstand); }
/* Auf dunklem Grund kehren sich beide Werte um. */
.auf-dunkel .wortmarke { color: var(--kalk-hell); }
.auf-dunkel .wortmarke i { color: var(--messing-hell); }
.wortmarke.gross { font-size: 1.55rem; }
.wortmarke.riesig { font-size: clamp(2.4rem, 5vw, 3.4rem); display: block; }

.pille .marke { display: flex; align-items: center; text-decoration: none; flex: none; }
.pille .marke .wortmarke { font-size: 1.14rem; }

.schublade {
  display: flex; align-items: center; overflow: hidden;
  max-width: 0; opacity: 0;
  transition: max-width var(--sanft), opacity var(--schnell), margin var(--sanft);
}
.pille.offen .schublade { max-width: 680px; opacity: 1; margin-left: 20px; }
.schublade a { font-size: .93rem; color: var(--text-leise); padding: 0 13px; }
.schublade a:hover { color: var(--espresso); }

.griff {
  pointer-events: auto; margin-left: 12px; flex: none;
  width: 36px; height: 36px; border-radius: var(--rund-voll); border: 0; cursor: pointer;
  background: rgba(46, 38, 32, .07); color: var(--espresso);
  display: grid; place-items: center; transition: background var(--schnell);
}
.griff:hover { background: rgba(46, 38, 32, .13); }
.griff b { display: block; width: 15px; height: 1.5px; background: currentColor; position: relative; transition: transform var(--sanft); }
.griff b::before, .griff b::after {
  content: ""; position: absolute; left: 0; width: 15px; height: 1.5px; background: currentColor;
  transition: transform var(--sanft), opacity var(--schnell);
}
.griff b::before { top: -5px; }
.griff b::after { top: 5px; }
/* Drei Striche werden zum X, sobald das Menue offen ist. menue-auf wird in jeder
   Bildschirmbreite gesetzt, .offen nur oberhalb von 900px fuer die Schublade. */
.pille.offen .griff b, .pille.menue-auf .griff b { transform: rotate(45deg); }
.pille.offen .griff b::before, .pille.menue-auf .griff b::before { transform: translateY(5px) rotate(-90deg); }
.pille.offen .griff b::after, .pille.menue-auf .griff b::after { opacity: 0; }

.navrechts { pointer-events: auto; margin-left: auto; display: flex; gap: 12px; align-items: center; }
.navrechts .anmelden {
  font-size: .93rem; font-weight: 600; color: var(--text); text-decoration: none;
  background: rgba(248, 247, 243, .86);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid rgba(46, 38, 32, .1); border-radius: var(--rund-voll); padding: 0 18px;
  height: 38px; line-height: 38px;
}
.navrechts .anmelden.wechsel > span > em { height: 36px; line-height: 36px; }
.navrechts .anmelden.wechsel:hover > span, .navrechts .anmelden.wechsel:focus-visible > span { transform: translateY(-36px); }

/* Klappfeld unter der Kopf-Pille, unter 900px. Die Schublade in der Pille bleibt dort zu.
   Es sitzt in der navzone, also direkt unter dem Kopf, und ist nur so hoch wie sein Inhalt.
   Die Seite darunter bleibt sichtbar und lesbar; ein Tippen daneben schliesst es. */
.klappfeld {
  display: none; position: absolute; top: 100%; left: 0; right: 0;
  margin-top: 10px; z-index: 95; pointer-events: auto;
  background: var(--espresso); color: var(--kalk-hell);
  border-radius: var(--rund-gross); padding: 10px 18px 18px;
  box-shadow: 0 26px 60px -30px rgba(46, 38, 32, .85);
}
.klappfeld.offen { display: block; }
.klappfeld a {
  display: block; text-decoration: none; font-size: 1.15rem; font-weight: 500;
  letter-spacing: -.02em; padding: 13px 0; border-bottom: 1px solid rgba(196, 164, 115, .28);
}
/* Die beiden Knoepfe in voller Breite untereinander. Frueher standen sie nebeneinander
   in einem flex-wrap, und die Beschriftung lief ueber den Rand der Messingpille hinaus. */
/* Der letzte Menuepunkt braucht keine Trennlinie, darunter kommt die Knopfreihe. */
.klappfeld a:last-of-type { border-bottom: 0; }
.klappfeld .aktionen { margin-top: 12px; display: grid; gap: 10px; }
/* display zuruecksetzen: .klappfeld a setzt block und wuerde das inline-flex des Knopfes
   ueberschreiben, wodurch die Beschriftung linksbuendig klebt statt mittig zu stehen. */
.klappfeld .aktionen .knopf { display: flex; width: 100%; border-bottom: 0; }
.klappfeld .aktionen .knopf.rahmen { border-color: rgba(248, 247, 243, .5); color: var(--kalk-hell); }
.klappfeld .aktionen .knopf.rahmen:hover { background: rgba(248, 247, 243, .12); border-color: var(--kalk-hell); }

@media (max-width: 900px) {
  .pille.offen .schublade { max-width: 0; opacity: 0; margin-left: 0; }
  .navrechts .anmelden { display: none; }
}
@media (max-width: 560px) {
  .navrechts .knopf { display: none; }
}

/* ---------- Abschnittsrhythmus ---------- */
section { padding: 104px 0; }
section.eng { padding: 72px 0; }
.hell { background: var(--kalk-hell); }
.leinen { background: var(--leinen); }


/* Nur fuer Screenreader. Die Tabelle im Problem-Abschnitt braucht eine
   Beschriftung, sichtbar waere sie dort eine Dopplung der Ueberschrift. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.punkt { font-style: normal; color: var(--messing); }

/* ---------- 01 Seitenkopf ---------- */
.hero { padding: 168px 0 96px; }
.hero-zeile { display: grid; grid-template-columns: 1.25fr .75fr; gap: 68px; align-items: center; }
/* Zwei feste Zeilen, nie drei. Beide Zeilen tragen eigene Farbe und eigenes
   Gewicht, brauchen also ohnehin je ein Element; der Umbruch faellt dabei ab. */
/* Eigene Groesse statt der h1-Groesse: die erste Zeile hat 33 Zeichen und soll
   in EINER Zeile stehen. Mit clamp(...2.4rem) traegt sie das bis hinunter zu
   etwa 470 px Fensterbreite. Darunter passt der Satz bei keiner Schriftgroesse
   mehr in eine Zeile, die noch nach Ueberschrift aussieht. */
.kopf-titel { display: grid; font-size: clamp(1.6rem, 2.95vw, 2.4rem); }
.kt-eins { font-weight: 400; color: var(--messing-text); }
.kt-zwei { font-weight: 500; color: var(--espresso); }
.kt-zwei i { font-style: normal; color: var(--messing); }
.hero .gross { margin-top: 24px; max-width: 34em; }
.hero .aktionen { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 12px; }
.namensherkunft {
  margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--messing);
  font-size: .93rem; color: var(--text-leise); max-width: 32em;
}
.namensherkunft b { font-weight: 600; color: var(--text); }

/* Vorgangskarte. Der Kopf ist dunkel, damit die Karte oben abschliesst und die
   fuenf Statuszeilen darunter die einzige Farbigkeit tragen. */
.vorgang {
  background: var(--kalk-hell); border: 1px solid rgba(46, 38, 32, .12); border-radius: var(--rund-gross);
  box-shadow: 0 44px 80px -56px rgba(46, 38, 32, .9); overflow: hidden;
}
.vorgang-kopf {
  background: var(--espresso); padding: 26px 28px 22px;
  border-radius: var(--rund-gross) var(--rund-gross) 0 0;
}
.vorgang-etikett { font-size: .62rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--messing-hell); }
.vorgang-titel { margin-top: 10px; font-size: 1.14rem; font-weight: 600; letter-spacing: -.02em; color: var(--karte); }
.vorgang-zusatz { margin-top: 4px; font-size: .86rem; color: var(--stein-tief); }
.vorgang-liste { list-style: none; margin: 0; padding: 8px 0; }
.vorgang-liste li { display: flex; align-items: center; gap: 14px; padding: 13px 28px; font-size: .92rem; color: var(--text-leise); }
.vnr { font-size: .72rem; font-weight: 700; color: var(--stein-tief); flex: none; width: 20px; }
.vtxt { flex: 1; }
.vst {
  font-size: .72rem; font-weight: 600; letter-spacing: .04em; color: var(--text-leise);
  background: rgba(46, 38, 32, .06); border-radius: var(--rund-voll); padding: 4px 11px; flex: none;
  transition: background var(--sanft), color var(--sanft);
}
.vorgang-liste li.fertig .vnr { color: var(--messing-text); }
.vorgang-liste li.fertig .vtxt { color: var(--espresso); }
/* Erledigt traegt jetzt die Statusfarbe, nicht mehr Grau. Erkennbar bleibt der
   Zustand trotzdem am Klartext in der Pille, nie an der Farbe allein. */
.vorgang-liste li.fertig .vst { color: var(--status-erledigt); background: var(--status-erledigt-bg); }
.vorgang-liste li.dran { background: rgba(169, 135, 84, .1); }
.vorgang-liste li.dran .vnr { color: var(--messing-text); }
.vorgang-liste li.dran .vtxt { color: var(--espresso); font-weight: 600; }
/* --text auf Messing (4,8:1). Weiss waere 3,3:1. */
.vorgang-liste li.dran .vst { background: var(--messing); color: var(--text); }
.vorgang-fuss { padding: 16px 28px 20px; border-top: 1px solid rgba(46, 38, 32, .12); font-size: .76rem; color: var(--text-leise); }
.pruefwert { font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-weight: 600; color: var(--messing-text); }

/* ---------- 02 Das Problem ---------- */
.problem-zeile { display: grid; grid-template-columns: .92fr 1.08fr; gap: 56px; align-items: start; margin-top: 50px; }

/* Vorher-Nachher-Karte. Im Markup steht das Nachher, landing.js spult zurueck. */
.ov {
  background: var(--karte); border: 1px solid rgba(46, 38, 32, .12); border-radius: var(--rund-gross);
  overflow: hidden; box-shadow: 0 34px 64px -54px rgba(46, 38, 32, .85);
}
.ov-kopf {
  background: var(--espresso); padding: 22px 26px; transition: background var(--sanft);
  border-radius: var(--rund-gross) var(--rund-gross) 0 0;
}
.ov.vorher .ov-kopf { background: var(--status-problem); }
.ov-titel { font-size: 1.1rem; font-weight: 600; letter-spacing: -.02em; color: var(--karte); }
.ov-unter { margin-top: 4px; font-size: .88rem; color: var(--stein); }
.ov-liste { list-style: none; margin: 0; padding: 6px 0; }
.ov-liste li { display: flex; align-items: center; gap: 14px; padding: 12px 26px; font-size: .94rem; }
/* Feste Breite, damit die Karte beim Textwechsel von "Sie" auf "laeuft
   automatisch" nicht springt. */
.ov-marke {
  flex: none; width: 11.9em; text-align: center; font-size: .7rem; font-weight: 700;
  letter-spacing: .03em; border-radius: var(--rund-voll); padding: 5px 8px; white-space: nowrap;
  transition: background var(--sanft), color var(--sanft), box-shadow var(--sanft);
}
.ov-marke.ok { background: var(--status-erledigt-bg); color: var(--status-erledigt); }
/* Der Auftrag nennt hier --messing. Als Schrift traegt Messing auf Hell nur
   3,3:1, deshalb steht der Text in --messing-text auf --status-sie-bg und der
   Messington als Rahmen. Die Rolle bleibt sichtbar dieselbe. */
.ov-marke.sie { background: var(--status-sie-bg); color: var(--messing-text); box-shadow: inset 0 0 0 1px var(--messing); }
.ov.vorher .ov-marke { background: var(--status-problem-bg); color: var(--status-problem); box-shadow: none; }
.ov-txt { flex: 1; color: var(--text); }
.ov-fuss { padding: 16px 26px 20px; border-top: 1px solid rgba(46, 38, 32, .12); font-size: .88rem; color: var(--text-leise); }
/* Nur waehrend des Abspielens: die Zeilen kommen einzeln. Ohne die Klasse
   (kein JS, kein Beobachter, prefers-reduced-motion) stehen sie sofort da. */
.ov.spielt .ov-liste li { opacity: 0; transform: translateY(8px); }
.ov.spielt .ov-liste li.ein { opacity: 1; transform: none; transition: opacity .4s ease, transform .4s ease; }

/* Beispielrechnung */
.rechnung h3 { font-size: 1.32rem; }
.rechnung-unter { margin-top: 12px; font-size: .95rem; color: var(--text-leise); }
.erg-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 26px 0 22px; }
.erg { border-radius: var(--rund-klein); padding: 22px 20px; }
.erg-etikett { display: block; font-size: .62rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.erg b { display: block; margin-top: 10px; font-size: 1.5rem; font-weight: 500; letter-spacing: -.03em; }
.erg-ohne { background: var(--espresso); color: var(--karte); }
.erg-ohne .erg-etikett { color: var(--messing-hell); }
.erg-mit { background: var(--karte); border: 1px solid var(--messing); color: var(--text); }
.erg-mit .erg-etikett { color: var(--messing-text); }
.rechnung-tafel { margin-top: 22px; }
.rechnung-tafel[hidden] { display: none; }
/* Sicherheitsnetz fuer sehr schmale Geraete: die Tabelle rollt in ihrem eigenen
   Kasten, die Seite bekommt dadurch nie eine waagerechte Rollleiste. */
.tafel-rollen { overflow-x: auto; }
.rechnung-tabelle { width: 100%; border-collapse: collapse; font-size: .87rem; }
.rechnung-tabelle th, .rechnung-tabelle td {
  text-align: left; padding: 9px 6px; vertical-align: top;
  border-bottom: 1px solid rgba(46, 38, 32, .13);
}
.rechnung-tabelle thead th {
  font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-leise-tief);
}
.rechnung-tabelle th:nth-child(2), .rechnung-tabelle th:nth-child(3),
.rechnung-tabelle td:nth-child(2), .rechnung-tabelle td:nth-child(3) {
  text-align: right; white-space: nowrap; width: 4.4em;
}
.rechnung-tabelle tfoot th, .rechnung-tabelle tfoot td {
  font-weight: 700; color: var(--text); border-bottom: 0; border-top: 2px solid var(--messing);
}
.quelle { margin-top: 14px; font-size: .82rem; line-height: 1.5; color: var(--text-leise); }

.belege {
  display: grid; grid-template-columns: 1fr 1fr; gap: 30px;
  margin-top: 46px; padding-top: 28px; border-top: 1px solid rgba(46, 38, 32, .14);
}
.beleg p { font-size: .95rem; }
.beleg-quelle { margin-top: 6px; font-size: .8rem; color: var(--text-leise); }

/* ---------- 03 So entsteht ein Termin ---------- */
.drei { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 0 16px; align-items: stretch; margin-top: 50px; }
.dk { background: var(--karte); border: 1px solid rgba(46, 38, 32, .12); border-radius: var(--rund-gross); padding: 26px 24px; }
.dk-dunkel { background: var(--espresso); border-color: var(--espresso); color: var(--kalk-hell); }
.dk-etikett { display: block; font-size: .62rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--messing-text); }
.dk-dunkel .dk-etikett { color: var(--messing-hell); }
.dk h3 { margin-top: 12px; font-size: 1.08rem; }
.dk-liste { list-style: none; margin: 18px 0 0; padding: 0; }
.dk-liste li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid rgba(46, 38, 32, .12); font-size: .9rem; }
.dk-dunkel .dk-liste li { border-top-color: rgba(214, 179, 124, .3); }
.dk-tag { font-weight: 600; flex: none; }
.dk-zeit { color: var(--text-leise); }
.dk-dunkel .dk-zeit { color: var(--stein); }
.dk-zeichen { flex: none; width: 16px; text-align: center; font-weight: 700; }
/* Das Zeichen ist Zugabe, nie die einzige Auskunft: daneben steht immer der
   Klartext, bei der gesperrten Zeile ausdruecklich "nicht freigegeben". */
.dk-zeichen.ja { color: var(--messing-hell); }
.dk-zeichen.nein { color: var(--stein-tief); }
.dk-fuss { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(214, 179, 124, .32); font-size: .84rem; color: var(--stein); }
/* Der Pfeil ist das einzige Zeichen, das die Leserichtung traegt, also ein
   bedeutungstragendes Grafikelement. In --messing haette er auf Kalk nur
   2,8:1, deshalb --messing-text mit 5,5:1. Der Auftrag nennt hier --messing;
   das ist die einzige Stelle, an der davon abgewichen wird. */
.pfeil { align-self: center; color: var(--messing-text); font-size: 1.5rem; line-height: 1; }
.pfeil::before { content: "\2192"; }

.ohnesie { margin-top: 34px; background: var(--karte); border: 1px solid rgba(46, 38, 32, .12); border-radius: var(--rund-gross); padding: 30px 32px; }
.ohnesie-liste { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 34px; }
.ohnesie-liste li { display: flex; gap: 12px; font-size: .95rem; }
.haken { flex: none; color: var(--status-erledigt); font-weight: 700; }
.ohnesie-fuss {
  margin-top: 24px; padding-top: 18px; border-top: 1px solid rgba(46, 38, 32, .12);
  display: flex; align-items: center; gap: 12px; font-size: .95rem; color: var(--text-leise-tief);
}
.kein-telefon { flex: none; color: var(--messing-text); }

/* ---------- 04 So laeuft es ab, feststehende Buehne ---------- */
.ablauf { background: var(--leinen); padding: 112px 0 124px; }
.ablauf .leise { color: var(--text-leise-tief); }
.szene { display: grid; grid-template-columns: 1fr 1fr; gap: 74px; margin-top: 76px; align-items: start; }
.schritte { display: grid; gap: 10vh; }
/* Der Entwurf dimmt den inaktiven Schritt ueber opacity: .32. Das ergibt auf Leinen
   1,5:1, der Text waere praktisch unlesbar, und das betrifft immer vier von fuenf
   Schritten gleichzeitig. Dasselbe Bild entsteht ueber die FARBE: der aktive Schritt
   traegt Espresso, die anderen Grau (6,0:1). Der Wechsel ist genauso deutlich, bleibt
   aber lesbar. */
.schritt { padding: 36px 0; border-top: 1px solid rgba(46, 38, 32, .16); }
.schritt h3 { color: var(--text-leise-tief); transition: color var(--sanft); }
.schritt.aktiv h3 { color: var(--espresso); }
.schritt p { margin-top: 12px; color: var(--text-leise-tief); transition: color var(--sanft); }
.zahl { font-size: .72rem; font-weight: 700; letter-spacing: .1em; color: var(--text-leise-tief); display: block; margin-bottom: 14px; transition: color var(--sanft); }
.schritt.aktiv .zahl { color: var(--messing-text); }
.klebe { position: sticky; top: 130px; height: min(64vh, 530px); }
.buehne { position: relative; width: 100%; height: 100%; }
.buehne .bild {
  position: absolute; inset: 0; min-height: 0;
  opacity: 0; transform: translateY(18px) scale(.99);
  transition: opacity var(--sanft), transform var(--sanft);
}
.buehne .bild.zeigen { opacity: 1; transform: none; }

/* ---------- 05 Fuer wen ---------- */
.wen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 50px; }
.wen-spalte { background: var(--karte); border: 1px solid rgba(46, 38, 32, .12); border-radius: var(--rund-gross); padding: 32px 28px; }
.wen-etikett { display: block; font-size: .64rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--messing-text); margin-bottom: 14px; }
.wen-spalte h3 { font-size: 1.14rem; }
.wen-spalte p { margin-top: 12px; font-size: .95rem; color: var(--text-leise); }

/* ---------- Partnerband, bedingt ---------- */
.partner-titel {
  text-align: center; font-size: .68rem; font-weight: 600; letter-spacing: .2em;
  /* Ohne opacity: .55 haette der Titel auf Kalk nur 2,1:1 getragen. Die
     Zurueckhaltung tragen Groesse, Sperrung und Grauton allein. */
  text-transform: uppercase; color: var(--text-leise-tief); margin-bottom: 26px;
}
.laufband {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.laufband-spur { display: flex; gap: 26px; width: max-content; animation: laufen 46s linear infinite; }
.laufband-spur span {
  flex: none; padding: 14px 30px; font-size: 1rem; font-weight: 600; letter-spacing: -.02em;
  color: var(--text-leise-tief); white-space: nowrap;
}
@keyframes laufen { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Kundenstimme, bedingt ---------- */
.stimme-kasten {
  background: var(--karte); border: 1px solid rgba(46, 38, 32, .12); border-radius: var(--rund-gross);
  display: grid; grid-template-columns: 1fr 240px; gap: 48px; padding: 48px;
  align-items: center;
}
.stimme-kasten blockquote { margin: 0; font-size: clamp(1.3rem, 2.2vw, 1.75rem); line-height: 1.35; letter-spacing: -.03em; }
.stimme-wer { margin-top: 22px; font-size: .92rem; color: var(--text-leise); }
/* Kasten im Kasten: das Portraet sitzt in der Kundenstimme, seine Rundung ist deshalb
   die kleinere von beiden. */
.stimme-kasten .bild { min-height: 240px; border-radius: var(--rund-klein); }

/* ---------- 06 Funktionen ----------
   Der Text steht immer im HTML. Zugeklappt wird er ueber max-height, nicht
   ueber display:none oder hidden: Suchmaschinen und Screenreader lesen ihn
   dadurch in jedem Zustand.
   Maus: oeffnet per :hover und :focus-within, ganz ohne JavaScript.
   Touch: dort greift @media (hover: hover) nicht, deshalb setzt landing.js
   auf Antippen die Klasse .offen, und immer nur bei einer Kachel. */
/* align-items: start ist hier wichtig. Ohne die Zeile zieht das Raster alle
   Kacheln einer Reihe auf die Hoehe der geoeffneten, die zugeklappten stehen
   dann mit einer leeren Flaeche darunter. */
.fkt-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 44px; align-items: start; }
.fkt { background: var(--karte); border: 1px solid rgba(46, 38, 32, .12); border-radius: var(--rund-gross); }
.fkt h3 { margin: 0; font-size: 1.05rem; }
.fkt-knopf {
  display: flex; align-items: center; gap: 14px; width: 100%;
  background: none; border: 0; padding: 22px 22px; cursor: pointer;
  font: inherit; color: var(--text); text-align: left;
}
.fkt-symbol { width: 24px; height: 24px; flex: none; color: var(--messing-text); }
.fkt-titel { flex: 1; font-weight: 600; letter-spacing: -.02em; }
.fkt-plus { flex: none; width: 14px; height: 14px; position: relative; color: var(--text-leise); transition: transform var(--sanft); }
.fkt-plus::before, .fkt-plus::after { content: ""; position: absolute; background: currentColor; }
.fkt-plus::before { left: 0; right: 0; top: 6px; height: 2px; }
.fkt-plus::after { top: 0; bottom: 0; left: 6px; width: 2px; }
.fkt-text {
  max-height: 0; overflow: hidden; margin: 0; padding: 0 22px;
  font-size: .94rem; color: var(--text-leise);
  transition: max-height var(--sanft), padding var(--sanft);
}
.fkt.offen .fkt-text { max-height: 18em; padding-bottom: 22px; }
.fkt.offen .fkt-plus { transform: rotate(45deg); }
@media (hover: hover) {
  .fkt:hover .fkt-text, .fkt:focus-within .fkt-text { max-height: 18em; padding-bottom: 22px; }
  .fkt:hover .fkt-plus, .fkt:focus-within .fkt-plus { transform: rotate(45deg); }
  .fkt:hover { border-color: var(--messing); }
}

/* ---------- 07 Preis ---------- */
.preis-zeile { display: grid; grid-template-columns: .9fr 1.1fr; gap: 60px; margin-top: 52px; align-items: start; }
.preis-kasten {
  background: var(--karte); border: 1px solid rgba(46, 38, 32, .12); border-radius: var(--rund-gross);
  padding: 42px 40px;
}
.betrag { font-size: clamp(2.8rem, 5vw, 3.8rem); font-weight: 500; letter-spacing: -.05em; line-height: 1; }
.betrag s { font-size: .42em; font-weight: 400; color: var(--text-leise); margin-right: .3em; letter-spacing: -.02em; }
.betrag-einheit { margin-top: 10px; color: var(--text-leise); }
.preis-kasten .knopf { margin-top: 28px; width: 100%; }
.preis-kasten .hinweis { margin-top: 14px; font-size: .88rem; color: var(--text-leise); text-align: center; }
.leistungen { list-style: none; margin: 0; padding: 0; }
.leistungen li { display: flex; gap: 18px; align-items: baseline; padding: 15px 0; border-bottom: 1px solid rgba(46, 38, 32, .12); font-size: 1rem; }
.leistungen li::before { content: ""; flex: none; width: 18px; height: 1.5px; background: var(--messing); transform: translateY(-4px); }

/* Die vier Zusicherungen. Sie standen frueher als eigenes Kachelband weit oben
   und stehen jetzt dort, wo sie hingehoeren: beim Preis. */
.zusicherungen {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px;
  margin-top: 56px; padding-top: 34px; border-top: 1px solid rgba(46, 38, 32, .14);
}
.zusicherung { border-left: 1px solid var(--messing); padding-left: 18px; }
.zusicherung b { display: block; font-size: .97rem; font-weight: 600; margin-bottom: 6px; }
.zusicherung span { font-size: .9rem; color: var(--text-leise); }

/* ---------- Aktionsband ---------- */
.aktionsband {
  margin-top: 26px; background: var(--messing); color: var(--text); border-radius: var(--rund-klein);
  padding: 16px 24px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
/* display: flex wuerde [hidden] ueberstimmen. Ohne diese Zeile bliebe das Band
   sichtbar, obwohl keine Aktion laeuft. */
.aktionsband[hidden] { display: none; }
.aktionsband .marke-pille {
  background: var(--espresso); color: var(--kalk-hell); border-radius: var(--rund-voll);
  font-size: .64rem; font-weight: 700; letter-spacing: .14em; padding: 5px 12px; flex: none;
}
.aktionsband .text { font-weight: 600; flex: 1; min-width: 12em; }
.aktionsband .laufzeit { font-size: .88rem; }

/* ---------- 08 Abschluss ----------
   Flaeche Espresso statt Messing. Auf Messing sass der Messing-Knopf auf seiner
   eigenen Farbe und war als Knopf nicht mehr zu erkennen. */
.schluss { background: var(--espresso); color: var(--kalk-hell); text-align: center; }
.schluss h2 { max-width: 20em; margin: 0 auto; }
.schluss p { margin: 24px auto 0; max-width: 40em; color: var(--stein); }
.schluss .aktionen { margin-top: 34px; display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }

/* ---------- Fuss ---------- */
.fussbereich { background: var(--espresso); color: var(--kalk-hell); padding: 62px 0 40px; }
.fuss-marke { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; }
.fuss-claim { font-size: .86rem; color: var(--messing-hell); letter-spacing: .04em; }
.fuss-linie { height: 1px; background: rgba(196, 164, 115, .3); margin: 30px 0 22px; }
.fuss-zeile { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; font-size: .9rem; }
.fuss-zeile nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.fuss-zeile a { color: var(--kalk-hell); text-decoration: none; }
.fuss-zeile a:hover { text-decoration: underline; text-underline-offset: 3px; }
.fuss-ort { margin-left: auto; color: var(--messing-hell); }

/* ---------- Bildplatzhalter ---------- */
.bild {
  position: relative; background: var(--stein); border-radius: var(--rund-gross);
  box-shadow: inset 0 0 0 1px rgba(46, 38, 32, .16);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 26px; min-height: 250px; overflow: hidden;
}
.bild b { font-size: .68rem; font-weight: 700; letter-spacing: .08em; color: var(--messing-text); display: block; margin-bottom: 8px; }
.bild i { font-style: normal; font-size: .87rem; color: var(--text-leise-tief); line-height: 1.45; max-width: 34em; }
/* Liegt die echte Datei, fuellt sie den Platzhalter vollstaendig aus, ohne CSS-Aenderung. */
.bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Einblenden beim Scrollen ---------- */
.auf { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.22, 1, .36, 1); }
.auf.da { opacity: 1; transform: none; }
/* Ohne JS ist .auf dauerhaft unsichtbar. Deshalb hebt ein noscript-Stilblock
   im Kopf der Seite die Startwerte auf; landing.js deckt zusaetzlich den Fall ab,
   dass IntersectionObserver fehlt. */

/* ---------- Schmale Bildschirme ---------- */
@media (max-width: 1080px) {
  :root { --rand: 28px; }
  .fkt-raster { grid-template-columns: repeat(2, 1fr); }
  .wen { grid-template-columns: 1fr; }
  .drei { grid-template-columns: 1fr; gap: 14px; }
  .pfeil { justify-self: center; }
  .pfeil::before { content: "\2193"; }
}
@media (max-width: 940px) {
  section { padding: 76px 0; }
  .hero { padding: 132px 0 76px; }
  .hero-zeile, .problem-zeile, .preis-zeile { grid-template-columns: 1fr; gap: 44px; }
  .belege { grid-template-columns: 1fr; gap: 24px; }
  .zusicherungen { grid-template-columns: repeat(2, 1fr); gap: 26px; }
  .ohnesie-liste { grid-template-columns: 1fr; }
  .szene { grid-template-columns: 1fr; gap: 0; }
  .klebe { position: relative; top: 0; height: 300px; margin-bottom: 28px; }
  .schritte { gap: 0; }
  .stimme-kasten { grid-template-columns: 1fr; padding: 34px; }
}
@media (max-width: 620px) {
  :root { --rand: 20px; }
  body { font-size: 16px; }
  .fkt-raster { grid-template-columns: 1fr; }
  .zusicherungen { grid-template-columns: 1fr; }
  .erg-paar { grid-template-columns: 1fr; }
  .preis-kasten { padding: 30px 24px; }
  .ohnesie { padding: 24px 22px; }
  .rechnung-tabelle { font-size: .82rem; }
  .rechnung-tabelle th, .rechnung-tabelle td { padding: 8px 4px; }
  .rechnung-tabelle th:nth-child(2), .rechnung-tabelle th:nth-child(3),
  .rechnung-tabelle td:nth-child(2), .rechnung-tabelle td:nth-child(3) { width: 3.9em; }
  .ov-marke { width: 11.9em; font-size: .62rem; }
  .ov-liste li, .ov-kopf, .ov-fuss { padding-left: 18px; padding-right: 18px; }
  .fuss-ort { margin-left: 0; width: 100%; }
}

/* ---------- Bewegung abschalten (Pflicht) ----------
   Beide Animationen zeigen hier sofort ihren Endzustand. Der steht ohnehin im
   Markup, landing.js spult bei prefers-reduced-motion gar nicht erst zurueck. */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .auf { opacity: 1; transform: none; }
  /* Ohne Uebergang koennen die fuenf Buehnenbilder nicht uebereinander liegen,
     sie stehen dann untereinander, alle sichtbar. */
  .klebe { position: relative; top: 0; height: auto; }
  .buehne { display: grid; gap: 16px; }
  .buehne .bild { position: relative; inset: auto; opacity: 1; transform: none; min-height: 250px; }
  .ov .ov-liste li { opacity: 1; transform: none; }
}