/* Gestaltung der CISA-Webseite.

   Der Aufbau: Oben steht eine feste Kopfzeile über die ganze Breite. Sie trägt das Zeichen, die Navigation, die beiden
   Schalter für Darstellung und Flächen, den Warenkorb und den Weg in den Rundgang. Darunter folgt der Inhalt in
   Abschnitten. Die Startseite führt mit einem großen Bildschirmfoto im Fensterrahmen, zwei schwebenden Karten mit
   echten Beispielwerten, einem Laufband der Bereiche und einem Schaufenster, das die Ansichten des Programms wechselt.

   Regeln, die überall gelten:
     1. Ein Bildschirmfoto steht immer vollständig und im echten Seitenverhältnis. Nichts wird beschnitten.
     2. Hinter Text liegt eine ruhige Fläche. Lesbarkeit geht vor Wirkung.
     3. Raster haben gleich große Elemente.
     4. Bewegung ist Zugabe: Mit „Bewegung reduzieren“ steht alles still, und nichts fehlt.

   Alle Farben stehen oben als Variablen. Es gibt zwei Darstellungen (dunkel als Grundfassung, hell) und zwei Arten
   von Flächen: klar (Linien und Kanten) und weich (gewölbt, mit sanften Schatten statt Linien). */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("schrift/InterVariable.woff2") format("woff2"); }

:root {
  color-scheme: dark;
  --grund: #080c14; --leiste: #0b111c;
  --flaeche: #101827; --flaeche2: #18233a;
  --linie: #1e293c; --linie2: #314059;
  --text: #eaf0fb; --text2: #aab7d0; --text3: #8492ae;
  --akzent: #7aa2ff; --akzent-stark: #4f7df0; --akzent-auf: #0a1122; --akzent-weich: rgba(122, 162, 255, .12); --begleit: #62cfe6;
  --gut: #4cc39a;
  --schein: rgba(72, 112, 236, .2);
  --tief: rgba(0, 0, 0, .6); --hell: rgba(130, 160, 230, .07); --tief-innen: rgba(0, 0, 0, .5); --hell-innen: rgba(130, 160, 230, .06);
  --rund: 14px; --rund-klein: 9px; --breite: 1336px; --rand: clamp(18px, 4vw, 48px); --kopfhoehe: 68px;
  --schrift: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --ziffern: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  /* Das Wabenmuster nimmt das Sechseck aus dem Zeichen von CISA auf. */
  --waben: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='96' viewBox='0 0 28 48'%3E%3Cpath d='M14 0L28 8V24L14 32L0 24V8ZM14 32V48' fill='none' stroke='%237aa2ff' stroke-opacity='.13' stroke-width='.6'/%3E%3C/svg%3E");
}
:root[data-thema="hell"] {
  color-scheme: light;
  --grund: #eef2f8; --leiste: #f6f8fc;
  --flaeche: #ffffff; --flaeche2: #f1f5fb;
  --linie: #d6ddeb; --linie2: #b4c0d8;
  --text: #101727; --text2: #45526e; --text3: #5c6984;
  --akzent: #2c5bd1; --akzent-stark: #2450bd; --akzent-auf: #ffffff; --akzent-weich: rgba(44, 91, 209, .09); --begleit: #0d7f9a;
  --gut: #177a58;
  --schein: rgba(74, 118, 240, .14);
  --tief: rgba(140, 156, 190, .5); --hell: rgba(255, 255, 255, .95); --tief-innen: rgba(140, 156, 190, .34); --hell-innen: rgba(255, 255, 255, .9);
  --waben: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='96' viewBox='0 0 28 48'%3E%3Cpath d='M14 0L28 8V24L14 32L0 24V8ZM14 32V48' fill='none' stroke='%232c5bd1' stroke-opacity='.16' stroke-width='.6'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--kopfhoehe) + 24px); -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 16px/1.62 var(--schrift); color: var(--text); background: var(--grund); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--akzent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
h1, h2, h3 { margin: 0; font-weight: 680; letter-spacing: -.022em; line-height: 1.12; text-wrap: balance; overflow-wrap: break-word; }
h1 { font-size: clamp(2.3rem, 4.4vw, 3.9rem); letter-spacing: -.03em; line-height: 1.04; }
h2 { font-size: clamp(1.6rem, 2.7vw, 2.35rem); }
h3 { font-size: 1.16rem; letter-spacing: -.012em; line-height: 1.3; }
p { margin: 0 0 1em; overflow-wrap: break-word; }
ul, ol { margin: 0; padding: 0; list-style: none; }
dl, dd, figure { margin: 0; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--akzent); outline-offset: 3px; border-radius: 6px; }
.leise { color: var(--text2); } .klein { font-size: .9rem; }
.mittig { margin: clamp(22px, 3vw, 34px) 0 0; text-align: center; }
.sprung { position: fixed; left: 12px; top: 12px; z-index: 60; padding: 10px 16px; border-radius: var(--rund-klein); background: var(--akzent); color: var(--akzent-auf); font-weight: 650; transform: translateY(-160%); transition: transform .2s; }
.sprung:focus { transform: none; }
main { overflow-x: clip; }
main:focus { outline: none; }
main > * { max-width: var(--breite); margin-inline: auto; padding-inline: var(--rand); }

/* ---------- Kopfzeile: bleibt oben stehen; die schmale Zeile darüber klappt beim Blättern ein ---------- */
.kopf { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--leiste) 90%, transparent); -webkit-backdrop-filter: saturate(1.5) blur(16px); backdrop-filter: saturate(1.5) blur(16px); border-bottom: 1px solid var(--linie); transition: box-shadow .25s; }
.kopf.gerollt { box-shadow: 0 16px 34px -24px var(--tief); }
.kopf-oben { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 34px; padding-inline: max(var(--rand), calc((100% - var(--breite)) / 2 + var(--rand))); border-bottom: 1px solid var(--linie); color: var(--text3); font: 500 .7rem/1 var(--ziffern); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; overflow: hidden; transition: height .28s ease, opacity .2s ease, border-color .2s; }
.kopf-oben ul { display: flex; gap: 26px; }
.kopf-oben li { display: flex; align-items: center; gap: 9px; }
.kopf-oben .lampe::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gut); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gut) 22%, transparent); }
.kopf.gerollt .kopf-oben { height: 0; opacity: 0; border-bottom-color: transparent; }
.kopf-haupt { display: flex; align-items: center; gap: clamp(12px, 1.8vw, 28px); height: var(--kopfhoehe); padding-inline: max(var(--rand), calc((100% - var(--breite)) / 2 + var(--rand))); }
.marke { display: inline-flex; flex: none; align-items: center; gap: 11px; color: var(--text); font-weight: 740; font-size: 1.24rem; letter-spacing: .05em; }
.marke:hover { text-decoration: none; }
.marke img { border-radius: 8px; }
.menue { display: flex; flex: 1; align-items: stretch; gap: 2px; min-width: 0; height: 100%; }
.menue > a { position: relative; display: flex; align-items: center; padding: 0 clamp(8px, 1vw, 14px); color: var(--text2); font-size: .96rem; font-weight: 560; white-space: nowrap; transition: color .15s; }
.menue > a::after { content: ""; position: absolute; left: clamp(8px, 1vw, 14px); right: clamp(8px, 1vw, 14px); bottom: -1px; height: 2px; border-radius: 2px; background: var(--akzent); transform: scaleX(0); transform-origin: left; transition: transform .28s cubic-bezier(.2, .7, .2, 1); }
.menue > a:hover { color: var(--text); text-decoration: none; }
.menue > a:hover::after, .menue > a[aria-current="page"]::after { transform: scaleX(1); }
.menue > a[aria-current="page"] { color: var(--text); }
.menue-schalter { display: flex; align-items: center; gap: 4px; margin-left: auto; padding-left: 10px; }
.kopf-rechts { display: flex; flex: none; align-items: center; gap: 8px; }
.schalter { display: inline-flex; align-items: center; gap: 9px; min-width: 42px; min-height: 42px; padding: 0 11px; border: 1px solid transparent; border-radius: var(--rund-klein); background: none; color: var(--text2); font-size: .9rem; font-weight: 540; white-space: nowrap; transition: color .15s, background .15s, border-color .15s; }
.schalter:hover { color: var(--text); background: var(--flaeche); border-color: var(--linie); text-decoration: none; }
.schalter svg { flex: none; width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.schalter.korb { border-color: var(--linie); }
.schalter.korb[aria-current="page"] { color: var(--text); background: var(--flaeche2); border-color: var(--linie2); }
.schalter.korb b { min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--akzent); color: var(--akzent-auf); font-size: .76rem; font-weight: 700; text-align: center; }
.schalter.korb b[hidden] { display: none; }
.nur-schmal { display: none; }
/* Die Linie unter der Kopfzeile zeigt, wie weit die Seite gelesen ist (--gelesen setzt seite.js, 0 bis 1). */
.lauf { position: absolute; left: 0; bottom: -1px; height: 2px; width: calc(var(--gelesen, 0) * 100%); background: linear-gradient(90deg, var(--akzent), var(--begleit)); }
/* Die beiden Schalter tragen in der Kopfzeile ihr Zeichen und ein kurzes Wort (data-kurz setzt seite.js); der volle Name
   steht als Hinweis am Mauszeiger und im aufgeklappten Menü schmaler Fenster. Unter 1336 Pixeln bleibt nur das Zeichen. */
@media (min-width: 981px) {
  .menue-schalter .schalter span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .menue-schalter .schalter::after { content: attr(data-kurz); }
}
@media (max-width: 1335px) and (min-width: 981px) {
  .menue-schalter .schalter { padding: 0; justify-content: center; }
  .menue-schalter .schalter::after { content: none; }
}
@media (max-width: 1239px) {
  .kopf .kopf-ruf { display: none; }
  .schalter.korb span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}

/* ---------- Knöpfe ---------- */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 11px 22px; border-radius: var(--rund-klein); border: 1px solid var(--linie2); background: transparent; color: var(--text); font-weight: 620; font-size: .98rem; line-height: 1.2; text-align: center; transition: background .15s, border-color .15s, transform .15s, box-shadow .2s; }
.knopf:hover { text-decoration: none; border-color: var(--akzent); background: var(--akzent-weich); }
.knopf.haupt { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-auf); box-shadow: 0 10px 26px -14px var(--akzent); }
.knopf.haupt:hover { background: color-mix(in srgb, var(--akzent) 88%, #fff); transform: translateY(-1px); box-shadow: 0 14px 30px -14px var(--akzent); }
.knopf.pfeil::after { content: "→"; transition: transform .15s; }
.knopf.pfeil:hover::after { transform: translateX(3px); }
.knopf[disabled], .knopf.haupt[disabled] { cursor: default; transform: none; border-color: var(--linie); background: var(--flaeche2); color: var(--text3); box-shadow: none; }
.knopf.breit { width: 100%; }
.knopf.klein { min-height: 40px; padding: 7px 15px; font-size: .9rem; }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Seitenkopf der Unterseiten und Abschnitte ---------- */
.seitenkopf { position: relative; isolation: isolate; padding-top: clamp(48px, 7vw, 96px); padding-bottom: clamp(30px, 4vw, 52px); }
.seitenkopf::before, .auftakt::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: radial-gradient(900px 480px at 78% -60px, var(--schein), transparent 72%), var(--waben); -webkit-mask-image: linear-gradient(#000 30%, transparent); mask-image: linear-gradient(#000 30%, transparent); pointer-events: none; }
.seitenkopf h1 { max-width: 19ch; }
.seitenkopf .einleitung { max-width: 66ch; margin: 22px 0 0; }
.seitenkopf .knopfreihe { margin-top: 30px; }
.seitenkopf .knopfreihe + .leise { max-width: 76ch; margin: 18px 0 0; }
.vorzeile, .marke-klein, .etikett { margin: 0 0 16px; color: var(--akzent); font: 600 .76rem/1.4 var(--ziffern); letter-spacing: .12em; text-transform: uppercase; }
.etikett { margin: 0; align-self: flex-start; padding: 4px 9px; border-radius: 6px; background: var(--akzent-weich); letter-spacing: .1em; }
.einleitung { color: var(--text2); font-size: clamp(1.05rem, 1.4vw, 1.22rem); line-height: 1.62; }
.betont { color: var(--akzent); }
.pfad { margin: 0 0 20px; color: var(--text3); font-size: .92rem; }
.abschnitt { padding-top: clamp(48px, 7vw, 104px); }
.abschnitt.eng { padding-top: clamp(26px, 3.4vw, 44px); }
main > .abschnitt:last-child { padding-bottom: clamp(56px, 7vw, 96px); }
/* Über jedem Abschnitt steht eine feine Linie, die links im Akzent beginnt. */
.abschnittskopf { display: grid; gap: 14px clamp(24px, 4vw, 64px); align-items: end; margin-bottom: clamp(26px, 3.6vw, 46px); padding-top: 30px; background: linear-gradient(90deg, var(--akzent) 0 64px, var(--linie) 64px) top / 100% 1px no-repeat; }
.abschnittskopf.geteilt { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.abschnittskopf h2 { max-width: 24ch; }
.abschnittskopf .vorzeile { margin-bottom: 12px; }
.abschnittskopf p:not(.vorzeile) { margin: 0; max-width: 62ch; color: var(--text2); font-size: 1.06rem; }
.abschnittskopf div > p:not(.vorzeile) { margin-top: 14px; }

/* ---------- Auftakt der Startseite ---------- */
.auftakt { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4.4vw, 68px); align-items: center; padding-top: clamp(44px, 6vw, 92px); padding-bottom: clamp(40px, 5vw, 72px); }
.auftakt h1 { font-size: clamp(2.4rem, 4.5vw, 4.1rem); }
.auftakt h1 .betont { display: block; }
.auftakt .einleitung { margin: 24px 0 30px; max-width: 46ch; }
.belege { display: flex; flex-direction: column; gap: 9px; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--linie); color: var(--text2); font-size: .95rem; }
.belege li { display: flex; align-items: center; gap: 12px; }
.belege svg { flex: none; width: 19px; height: 19px; fill: none; stroke: var(--akzent); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* Das Bildschirmfoto im Fensterrahmen; zwei Karten mit Beispielwerten schweben davor und folgen dem Mauszeiger ein wenig. */
.schau { position: relative; --x: 0; --y: 0; }
.schau .abb { box-shadow: 0 50px 110px -50px var(--tief), 0 0 90px -30px var(--schein); }
.abb.fenster::before { content: ""; display: block; height: 32px; border-bottom: 1px solid var(--linie); background: radial-gradient(circle at 18px 50%, var(--linie2) 0 4.5px, transparent 5.5px), radial-gradient(circle at 36px 50%, var(--linie2) 0 4.5px, transparent 5.5px), radial-gradient(circle at 54px 50%, var(--linie2) 0 4.5px, transparent 5.5px), var(--flaeche2); }
.schwebe { position: absolute; z-index: 2; padding: 14px 16px 15px; border: 1px solid var(--linie2); border-radius: var(--rund); background: color-mix(in srgb, var(--flaeche2) 90%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 26px 54px -24px var(--tief); translate: calc(var(--x) * var(--zug, 0px)) calc(var(--y) * var(--zug, 0px)); transition: translate .5s cubic-bezier(.2, .7, .2, 1); }
.schwebe p { margin: 0; }
.schwebe-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 8px; }
.schwebe-kopf b { color: var(--akzent); font: 650 .74rem/1.3 var(--ziffern); letter-spacing: .1em; text-transform: uppercase; }
.schwebe-kopf span { color: var(--text3); font-size: .78rem; }
.schwebe-luma { left: clamp(-34px, -2.4vw, -12px); bottom: 62px; width: min(318px, 62%); --zug: 14px; }
.schwebe-frage { color: var(--text2); font-size: .9rem; }
.schwebe-antwort { margin-top: 8px; padding: 9px 12px; border-radius: var(--rund-klein); background: var(--akzent-weich); color: var(--text); font-weight: 620; }
.schwebe-zahl { right: clamp(-22px, -1.6vw, -8px); top: -30px; width: 208px; --zug: -10px; }
.schwebe-wert { font-size: 1.62rem; font-weight: 720; letter-spacing: -.025em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.schwebe-linie { display: block; width: 100%; height: 40px; margin-top: 8px; fill: none; stroke: var(--gut); stroke-width: 2.2; stroke-linecap: round; }
.bewegt .schwebe-luma { animation: schweben 7s ease-in-out infinite alternate; }
.bewegt .schwebe-zahl { animation: schweben 9s ease-in-out -3s infinite alternate; }
@keyframes schweben { from { transform: translateY(0); } to { transform: translateY(-9px); } }

/* ---------- Laufband der Bereiche: steht ohne Bewegung als umbrochene Zeile ---------- */
main > .laufband { max-width: none; padding-inline: 0; }
.laufband { overflow: hidden; border-block: 1px solid var(--linie); background: color-mix(in srgb, var(--flaeche) 55%, transparent); }
.laufband ul { display: flex; flex-wrap: wrap; justify-content: center; }
.laufband li { display: flex; align-items: center; gap: 13px; padding: 15px 20px; color: var(--text2); font: 560 .78rem/1 var(--ziffern); letter-spacing: .11em; text-transform: uppercase; white-space: nowrap; }
.laufband li::before { content: ""; flex: none; width: 9px; height: 10px; background: var(--linie2); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.laufband li.modul { color: var(--text); }
.laufband li.modul::before { background: var(--akzent); }
.laufband.laeuft { -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.laufband.laeuft ul { flex-wrap: nowrap; justify-content: flex-start; width: max-content; animation: band 64s linear infinite; }
.laufband.laeuft:hover ul { animation-play-state: paused; }
@keyframes band { to { transform: translateX(-50%); } }

/* ---------- Kennzahlen ---------- */
.zahlen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.zahlen li { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 26px 24px 24px; border: 1px solid var(--linie); border-radius: var(--rund); background: var(--flaeche); color: var(--text2); font-size: .95rem; line-height: 1.5; overflow: hidden; }
.zahlen li::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: linear-gradient(90deg, var(--akzent), transparent 70%); }
.zahlen b { color: var(--text); font-size: clamp(2.5rem, 4.2vw, 3.5rem); font-weight: 740; letter-spacing: -.04em; line-height: .95; font-variant-numeric: tabular-nums; }

/* ---------- Flächen und Raster ---------- */
.flaeche, .feld, .abb, .produkt { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rund); }
.raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.raster.zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.raster.vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.raster.abstand { margin-top: 16px; }
.feld { position: relative; display: flex; flex-direction: column; gap: 10px; padding: clamp(20px, 2.4vw, 28px); transition: border-color .2s, transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s; }
.raster > .feld:hover { border-color: var(--linie2); transform: translateY(-3px); box-shadow: 0 22px 40px -28px var(--tief); }
a.feld { color: inherit; }
a.feld:hover { text-decoration: none; border-color: var(--akzent); }
.feld p { margin: 0; color: var(--text2); font-size: .97rem; }
.feld h2 { font-size: 1.3rem; }
.feld .mehr { margin-top: auto; padding-top: 10px; color: var(--akzent); font-weight: 620; font-size: .94rem; }
.feld .mehr .knopf { color: var(--akzent-auf); }
.zeichen { display: grid; flex: none; place-items: center; width: 44px; height: 44px; border-radius: var(--rund-klein); background: var(--akzent-weich); color: var(--akzent); }
.zeichen svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.zweispaltig { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.nebeneinander { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.nebeneinander.oben { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: start; }
.nebeneinander.umgekehrt > :first-child { order: 2; }
.nebeneinander.dokument { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: start; }

/* Aufzählung mit dem Sechseck aus dem Zeichen von CISA. */
.sechseck li { position: relative; padding: 8px 0 8px 26px; color: var(--text2); }
.sechseck li::before { content: ""; position: absolute; left: 2px; top: 15px; width: 11px; height: 12px; background: var(--akzent); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.sechseck b { color: var(--text); font-weight: 640; }
.sechseck.zweireihig { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }

.angaben div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 14px; padding: 10px 0; border-top: 1px solid var(--linie); }
.angaben dt { color: var(--text3); font-size: .92rem; }
.angaben dd { color: var(--text); font-size: .95rem; }
.tabelle { width: 100%; border-collapse: collapse; font-size: .96rem; }
.tabelle th, .tabelle td { padding: 13px 16px; border-top: 1px solid var(--linie); text-align: left; vertical-align: top; }
.tabelle thead th { border-top: 0; color: var(--text3); font: 600 .74rem/1.4 var(--ziffern); letter-spacing: .1em; text-transform: uppercase; }
.tabelle td:first-child { width: 28%; color: var(--text); font-weight: 620; }
.tabelle td { color: var(--text2); }
.rollbar { overflow-x: auto; padding: 6px 6px 2px; }
.hinweis { display: flex; gap: 14px; margin: 18px 0 0; padding: 16px 18px; border-left: 3px solid var(--akzent); border-radius: 0 var(--rund-klein) var(--rund-klein) 0; background: var(--akzent-weich); color: var(--text2); font-size: .96rem; }
.hinweis b { color: var(--text); }
/* Das Band am Ende einer Seite: der nächste Schritt, groß und mit dem Wabenmuster. */
.band { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 26px; padding: clamp(28px, 4.4vw, 56px); overflow: hidden; background: radial-gradient(720px 320px at 100% 0, var(--schein), transparent 70%), var(--waben), var(--flaeche); }
.band h2 { font-size: clamp(1.5rem, 2.6vw, 2.2rem); max-width: 22ch; }
.band p { margin: 12px 0 0; max-width: 56ch; color: var(--text2); }

/* ---------- Abbildungen ---------- */
.abb { overflow: hidden; }
.abb-bild { display: block; width: 100%; padding: 0; border: 0; background: var(--grund); cursor: zoom-in; }
.abb-bild img { width: 100%; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.raster .abb-bild:hover img { transform: scale(1.025); }
.abb figcaption { position: relative; display: flex; align-items: baseline; gap: 14px; padding: 12px 16px; border-top: 1px solid var(--linie); background: var(--flaeche); color: var(--text2); font-size: .9rem; }
.abb-gross { flex: none; margin-left: auto; color: var(--text3); font-size: .82rem; }
.abb-bild:hover + figcaption .abb-gross { color: var(--akzent); }

/* ---------- Detailansicht: eine Ansicht des Rundgangs im Einzelnen, oder eine Abbildung groß.
   Aufbau in drei Zeilen mit demselben Rand ringsum: Kopf (Titel links; Zähler, Pfeile und Schließen rechts in einer Reihe),
   Leib (Bild und Beschreibung nebeneinander) und die Leiste mit den Ansichten des Abschnitts. */
.ansicht { --an-rand: clamp(16px, 2vw, 26px); width: min(94vw, 1480px); max-width: none; height: min(90vh, 960px); max-height: none; padding: 0; border: 1px solid var(--linie2); border-radius: var(--rund); background: var(--flaeche); color: var(--text); overflow: hidden; box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .55); }
.ansicht[open] { display: flex; flex-direction: column; }
.ansicht::backdrop { background: rgba(4, 8, 16, .72); backdrop-filter: blur(6px); }
:root[data-thema="hell"] .ansicht::backdrop { background: rgba(28, 38, 62, .42); }
:root.ansicht-offen { overflow: hidden; }
.ansicht-kopf { display: flex; align-items: center; gap: 20px; padding: 14px var(--an-rand); border-bottom: 1px solid var(--linie); }
.ansicht-name { flex: 1; min-width: 0; }
.ansicht-name .vorzeile { margin: 0 0 3px; }
.ansicht-name h2 { margin: 0; font-size: clamp(1.15rem, 1.7vw, 1.5rem); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ansicht-steuer { display: flex; flex: none; align-items: center; gap: 8px; }
.ansicht-zaehler { margin-right: 8px; color: var(--text3); font: 560 .82rem/1 var(--ziffern); white-space: nowrap; }
.ansicht-steuer .knopf { width: 42px; min-height: 42px; height: 42px; padding: 0; }
.ansicht-steuer svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ansicht-leib { display: grid; flex: 1; min-height: 0; grid-template-columns: minmax(0, 1.62fr) minmax(330px, 1fr); grid-template-rows: minmax(0, 1fr); }
.ansicht-bild { position: relative; margin: 0; border-right: 1px solid var(--linie); background: var(--grund); }
.ansicht-bild button { position: absolute; inset: 0; padding: var(--an-rand); border: 0; background: none; cursor: zoom-in; }
.ansicht-bild img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 .6px var(--linie2)) drop-shadow(0 18px 28px rgba(10, 20, 40, .22)); opacity: 0; transition: opacity .25s; }
.ansicht-bild img.geladen { opacity: 1; }
.ansicht-text { padding: var(--an-rand) calc(var(--an-rand) + 4px); overflow-y: auto; overscroll-behavior: contain; }
.ansicht-ort { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 7px 13px; border-radius: 999px; background: var(--akzent-weich); color: var(--akzent); font-size: .86rem; font-weight: 620; line-height: 1.35; }
.ansicht-ort svg { flex: none; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ansicht-beschreibung { margin: 0 0 6px; color: var(--text); font-size: 1.03rem; line-height: 1.65; }
.ansicht-text h3 { margin: 24px 0 10px; color: var(--text3); font: 600 .74rem/1.3 var(--ziffern); letter-spacing: .12em; text-transform: uppercase; }
.ansicht-text .sechseck { margin: 0; padding: 0; list-style: none; }
.ansicht-text .sechseck li { padding-top: 5px; padding-bottom: 5px; font-size: .95rem; }
.ansicht-text .sechseck li::before { top: 12px; }
.ansicht-ablauf { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: schritt; }
.ansicht-ablauf li { position: relative; padding-left: 40px; color: var(--text2); font-size: .95rem; line-height: 1.55; counter-increment: schritt; }
.ansicht-ablauf li::before { content: counter(schritt); position: absolute; left: 0; top: -2px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--akzent); color: var(--akzent-auf); font: 650 .8rem/1 var(--ziffern); }
.ansicht-ablauf li:not(:last-child)::after { content: ""; position: absolute; left: 12.5px; top: 28px; bottom: -12px; width: 1px; background: var(--linie2); }
.ansicht-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ansicht-chips .chip::after { content: " →"; color: var(--akzent); }
.ansicht-leiste { display: flex; gap: 10px; padding: 12px var(--an-rand); border-top: 1px solid var(--linie); overflow-x: auto; scrollbar-width: thin; }
.ansicht-leiste:empty { display: none; }
.an-mini { display: flex; flex: none; flex-direction: column; gap: 6px; width: 140px; padding: 6px; border: 1px solid transparent; border-radius: var(--rund-klein); background: none; color: var(--text3); font-size: .8rem; font-weight: 560; line-height: 1.3; text-align: left; transition: color .15s, border-color .15s, background .15s; }
.an-mini img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: left top; border: 1px solid var(--linie); border-radius: 6px; }
.an-mini:hover { color: var(--text); border-color: var(--linie2); }
.an-mini[aria-current="true"] { border-color: var(--akzent); background: var(--akzent-weich); color: var(--text); }
/* Bild über die ganze Breite; bei einer einfachen Abbildung ist das der einzige Zustand. */
.ansicht.gross .ansicht-leib, .ansicht.nur-bild .ansicht-leib { grid-template-columns: minmax(0, 1fr); }
.ansicht.gross .ansicht-text, .ansicht.nur-bild .ansicht-text, .ansicht.nur-bild .ansicht-leiste,
.ansicht.nur-bild .ansicht-zaehler, .ansicht.nur-bild [data-an-zurueck], .ansicht.nur-bild [data-an-weiter] { display: none; }
.ansicht.gross .ansicht-bild, .ansicht.nur-bild .ansicht-bild { border-right: 0; }
.ansicht.gross .ansicht-bild button { cursor: zoom-out; }
.ansicht.nur-bild .ansicht-bild button { cursor: default; }
@media (max-width: 900px) {
  .ansicht { width: 100vw; height: 100dvh; border: 0; border-radius: 0; }
  .ansicht-kopf { gap: 12px; }
  .ansicht-zaehler { display: none; }
  .ansicht-steuer .knopf { width: 40px; min-height: 40px; height: 40px; }
  .ansicht-leib { display: block; overflow-y: auto; }
  .ansicht-bild { border-right: 0; border-bottom: 1px solid var(--linie); }
  .ansicht-bild button { position: static; display: block; width: 100%; }
  .ansicht-bild img { height: auto; }
  .ansicht-text { overflow: visible; }
  .ansicht.nur-bild .ansicht-leib { display: grid; place-items: center; }
  .an-mini { width: 112px; }
}
/* Ein Dokument im Hochformat (das erzeugte PDF) steht schmaler, damit es nicht die ganze Höhe des Fensters braucht. */
.abb.hochkant { max-width: 440px; justify-self: center; }
.abb.hochkant .abb-bild { background: #fff; }
.wechsel { position: relative; }
.wechsel .darueber { position: absolute; inset: 0; opacity: 0; transition: opacity .45s ease; }
.wechsel.blende .darueber { opacity: 1; }

/* ---------- Schaufenster: links die Blickwinkel, rechts die Ansicht dazu ---------- */
.schaufenster { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(18px, 2.6vw, 36px); align-items: start; }
.sf-liste { display: flex; flex-direction: column; gap: 6px; }
.sf-punkt { position: relative; display: block; width: 100%; padding: 15px 18px 15px 20px; border: 1px solid transparent; border-radius: var(--rund-klein); background: none; color: var(--text2); text-align: left; overflow: hidden; transition: background .2s, border-color .2s, color .2s; }
.sf-punkt b { display: block; color: inherit; font-size: 1.04rem; font-weight: 620; letter-spacing: -.01em; }
.sf-punkt span { display: block; max-height: 0; opacity: 0; overflow: hidden; font-size: .93rem; line-height: 1.55; transition: max-height .35s ease, opacity .3s ease, margin .35s ease; }
.sf-punkt:hover { color: var(--text); background: color-mix(in srgb, var(--flaeche) 70%, transparent); }
.sf-punkt[aria-selected="true"] { color: var(--text); background: var(--flaeche); border-color: var(--linie); box-shadow: inset 3px 0 0 var(--akzent); }
.sf-punkt[aria-selected="true"] span { max-height: 7em; margin-top: 6px; opacity: 1; color: var(--text2); }
/* Die Linie unten im gewählten Punkt läuft, solange das Schaufenster von selbst weiterschaltet. */
.sf-punkt i { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: linear-gradient(90deg, var(--akzent), var(--begleit)); }
.schaufenster.laeuft .sf-punkt[aria-selected="true"] i { animation: sf-lauf var(--takt, 7s) linear forwards; }
@keyframes sf-lauf { to { width: 100%; } }
.sf-buehne { box-shadow: 0 40px 90px -52px var(--tief); }

/* ---------- Weg: Stationen in einer Reihe, durch eine Linie verbunden ---------- */
.weg { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.weg.drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.weg li { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 22px 20px; border: 1px solid var(--linie); border-radius: var(--rund); background: var(--flaeche); color: var(--text2); font-size: .93rem; line-height: 1.5; }
.weg li b { color: var(--text); font-size: 1.06rem; font-weight: 640; }
.weg li .zeichen { margin-bottom: 6px; }
.weg li + li::before { content: "→"; position: absolute; left: -16px; top: 44px; width: 16px; color: var(--akzent); font-size: .95rem; line-height: 1; text-align: center; transform: translateY(-50%); }

/* ---------- Gespräch mit Luma ---------- */
.gespraech { display: flex; flex-direction: column; gap: 12px; padding: clamp(18px, 2.4vw, 28px); border: 1px solid var(--linie); border-radius: var(--rund); background: radial-gradient(520px 260px at 0 0, var(--schein), transparent 70%), var(--flaeche); }
.sprech { max-width: 88%; margin: 0; padding: 12px 16px; border-radius: 16px; font-size: .96rem; line-height: 1.55; }
.sprech p { margin: 0 0 .5em; }
.sprech p:last-child { margin-bottom: 0; }
.sprech.frage { align-self: flex-end; border-bottom-right-radius: 5px; background: var(--akzent); color: var(--akzent-auf); font-weight: 560; }
.sprech.antwort { align-self: flex-start; border: 1px solid var(--linie); border-bottom-left-radius: 5px; background: var(--flaeche2); color: var(--text); }
.sprech ul { margin: 0 0 .5em; padding-left: 18px; list-style: disc; color: var(--text2); }
.sprech-fuss { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; color: var(--text3); font: 500 .72rem/1.4 var(--ziffern); letter-spacing: .06em; text-transform: uppercase; }
.sprech-fuss span:first-child { color: var(--akzent); }
.sprech-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.sprech-knoepfe span { padding: 5px 12px; border: 1px solid var(--linie2); border-radius: 999px; color: var(--text2); font-size: .84rem; font-weight: 560; }
.gespraech > .leise { margin: 6px 2px 0; }
.messwerte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 22px 0 26px; }
.messwerte div { padding: 16px 16px 14px; border: 1px solid var(--linie); border-radius: var(--rund-klein); background: var(--flaeche); }
.messwerte dt { color: var(--text); font-size: 1.5rem; font-weight: 720; letter-spacing: -.025em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.messwerte dd { margin-top: 6px; color: var(--text2); font-size: .84rem; line-height: 1.45; }

/* ---------- Rundgang ---------- */
.inhaltsmarken { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; border: 1px solid var(--linie); border-radius: var(--rund); overflow: hidden; background: var(--flaeche); }
.inhaltsmarken a { display: flex; flex-direction: column; gap: 6px; padding: 18px 18px 16px; color: var(--text); font-weight: 620; line-height: 1.3; transition: background .15s; }
.inhaltsmarken a + a { border-left: 1px solid var(--linie); }
.inhaltsmarken a:hover { text-decoration: none; background: var(--flaeche2); }
.inhaltsmarken small { color: var(--text3); font-weight: 500; font-size: .84rem; }
.tourfeld { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(24px, 3.6vw, 56px); align-items: start; }
.buehne { position: sticky; top: calc(var(--kopfhoehe) + 28px); }
.kapitel { min-height: 58vh; padding: 4px 0 44px 24px; border-left: 2px solid var(--linie); opacity: .5; transition: opacity .35s, border-color .35s; }
.kapitel.aktiv { opacity: 1; border-left-color: var(--akzent); }
.kapitel:last-child { min-height: 0; }
.kapitel p { color: var(--text2); }
.kapitel h3 { margin-bottom: 12px; font-size: 1.42rem; }
.kapitel .im-kapitel { display: none; margin-top: 18px; }
.fortschritt { height: 3px; margin-top: 12px; border-radius: 2px; background: var(--linie); overflow: hidden; }
.fortschritt i { display: block; height: 100%; width: calc(var(--teil, 0) * 100%); background: linear-gradient(90deg, var(--akzent), var(--begleit)); transition: width .35s ease; }

/* ---------- Fragen ---------- */
.fragen details { border-top: 1px solid var(--linie); }
.fragen details:first-of-type { border-top: 0; }
.fragen summary { display: flex; justify-content: space-between; gap: 18px; padding: 17px 2px; cursor: pointer; font-weight: 620; list-style: none; }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: "+"; flex: none; color: var(--akzent); font: 500 1.3rem/1 var(--ziffern); transition: transform .2s; }
.fragen details[open] summary::after { transform: rotate(45deg); }
.fragen details p { margin: 0; padding: 0 2px 18px; max-width: 74ch; color: var(--text2); }

/* ---------- Shop ---------- */
.filterzeile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; }
.filterzeile .rechts { margin-left: auto; display: flex; align-items: center; gap: 10px; color: var(--text3); font-size: .92rem; }
.chip { min-height: 38px; padding: 7px 14px; border-radius: var(--rund-klein); border: 1px solid var(--linie); background: transparent; color: var(--text2); font-size: .93rem; font-weight: 560; }
.chip:hover { border-color: var(--linie2); color: var(--text); }
.chip[aria-pressed="true"] { background: var(--flaeche2); border-color: var(--akzent); color: var(--text); }
select.chip { -webkit-appearance: none; appearance: none; padding-right: 34px; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%238492ae' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 13px center / 11px; }
.produktliste { display: flex; flex-direction: column; gap: 16px; }
.produkt { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr); gap: clamp(18px, 2.4vw, 32px); align-items: center; padding: 16px; transition: border-color .2s, box-shadow .25s; }
.produkt:hover { border-color: var(--linie2); box-shadow: 0 26px 46px -34px var(--tief); }
.produkt[hidden] { display: none; }
.produktbild img { width: 100%; border-radius: var(--rund-klein); border: 1px solid var(--linie); }
.produkttext { display: flex; flex-direction: column; gap: 8px; }
.produkttext h3 { font-size: 1.5rem; }
.produkttext h3 a { color: var(--text); }
.produkttext p { margin: 0; }
.produkttext .marke-klein { margin: 0; }
.produktfuss { display: flex; flex-direction: column; align-items: stretch; gap: 14px; padding: 6px 8px 6px clamp(14px, 2vw, 26px); border-left: 1px solid var(--linie); }
.preis { margin: 0; font-size: 1.36rem; font-weight: 700; letter-spacing: -.015em; line-height: 1.2; font-variant-numeric: tabular-nums; }
.preis small { display: block; margin-top: 5px; color: var(--text3); font-size: .82rem; font-weight: 500; letter-spacing: 0; }
.preis.gross { font-size: 2rem; }
.produktkopf { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 16px; align-items: start; }
.kaufkasten { display: flex; flex-direction: column; gap: 16px; padding: clamp(20px, 2.6vw, 28px); }
.kaufkasten p { margin: 0; }
.korbliste { display: flex; flex-direction: column; }
.korbzeile { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 16px 0; border-top: 1px solid var(--linie); }
.korbzeile:first-child { border-top: 0; }
.korbzeile img { width: 112px; border-radius: 6px; border: 1px solid var(--linie); }
.korbzeile h3 { font-size: 1.06rem; }
.korbzeile .marke-klein { margin: 0 0 4px; }
.korbzeile .rechts { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.linkknopf { padding: 0; border: 0; background: none; color: var(--text3); font-size: .88rem; text-decoration: underline; text-underline-offset: 3px; }
.linkknopf:hover { color: var(--text); }
.summe { display: flex; justify-content: space-between; gap: 14px; padding: 12px 0; border-top: 1px solid var(--linie); color: var(--text2); }
.summe.gesamt { margin-bottom: 14px; color: var(--text); font-weight: 700; font-size: 1.14rem; }
.kasse { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 16px; align-items: start; }
.kasse .feld h2 { margin-bottom: 6px; }

/* ---------- Fuß ---------- */
.fuss { border-top: 1px solid var(--linie); background: var(--leiste); }
.fuss-innen { max-width: var(--breite); margin: 0 auto; padding: clamp(36px, 5vw, 60px) var(--rand) 28px; display: grid; grid-template-columns: minmax(0, 2.4fr) repeat(3, minmax(0, 1fr)); gap: 30px clamp(24px, 4vw, 60px); }
.fuss-marke p { margin: 16px 0 0; max-width: 40ch; color: var(--text3); font-size: .93rem; }
.fuss nav { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.fuss-titel { margin: 4px 0 6px; color: var(--text3); font: 600 .72rem/1.4 var(--ziffern); letter-spacing: .12em; text-transform: uppercase; }
.fuss nav a { color: var(--text2); font-size: .95rem; }
.fuss nav a:hover { color: var(--text); }
.fuss-zeile { max-width: var(--breite); margin: 0 auto; padding: 18px var(--rand) 34px; border-top: 1px solid var(--linie); color: var(--text3); font-size: .86rem; }

.meldung { position: fixed; right: 24px; bottom: 24px; z-index: 50; max-width: min(92vw, 440px); padding: 13px 18px; border-radius: var(--rund-klein); border-left: 3px solid var(--akzent); background: var(--flaeche2); box-shadow: 0 18px 40px -18px var(--tief); color: var(--text); font-size: .95rem; }
.meldung[hidden] { display: none; }

/* ---------- Weiche Flächen (Soft Surface): gewölbte Flächen mit sanftem Licht und Schatten statt Linien ---------- */
:root[data-flaechen="weich"] { --rund: 24px; --rund-klein: 14px; --flaeche: color-mix(in srgb, var(--grund) 82%, var(--flaeche2)); }
:root[data-flaechen="weich"] :is(.flaeche, .feld, .abb, .produkt, .inhaltsmarken, .ansicht, .zahlen li, .weg li, .gespraech, .messwerte div) { border-color: transparent; box-shadow: 9px 9px 22px var(--tief), -7px -7px 18px var(--hell); }
:root[data-flaechen="weich"] .raster > .feld:hover { border-color: transparent; box-shadow: 12px 12px 26px var(--tief), -8px -8px 20px var(--hell); }
:root[data-flaechen="weich"] .knopf { border-color: transparent; background: var(--flaeche); box-shadow: 5px 5px 12px var(--tief), -4px -4px 10px var(--hell); }
:root[data-flaechen="weich"] .knopf:hover { background: var(--flaeche); box-shadow: 3px 3px 8px var(--tief), -2px -2px 6px var(--hell); }
:root[data-flaechen="weich"] .knopf:active, :root[data-flaechen="weich"] .chip[aria-pressed="true"] { box-shadow: inset 3px 3px 6px var(--tief-innen), inset -2px -2px 5px var(--hell-innen); }
:root[data-flaechen="weich"] .knopf.haupt { background: var(--akzent); box-shadow: 5px 5px 14px var(--tief), -4px -4px 10px var(--hell); }
:root[data-flaechen="weich"] .knopf[disabled] { box-shadow: inset 3px 3px 6px var(--tief-innen), inset -2px -2px 5px var(--hell-innen); background: var(--flaeche); }
:root[data-flaechen="weich"] .chip { border-color: transparent; background: var(--flaeche); box-shadow: 4px 4px 10px var(--tief), -3px -3px 8px var(--hell); }
:root[data-flaechen="weich"] .kopf { border-bottom-color: transparent; box-shadow: 0 10px 26px -14px var(--tief); }
:root[data-flaechen="weich"] .kopf-oben { border-bottom-color: transparent; }
:root[data-flaechen="weich"] .schalter:hover { border-color: transparent; background: var(--flaeche); box-shadow: 4px 4px 10px var(--tief), -3px -3px 8px var(--hell); }
:root[data-flaechen="weich"] .schalter.korb { border-color: transparent; background: var(--flaeche); box-shadow: 4px 4px 10px var(--tief), -3px -3px 8px var(--hell); }
:root[data-flaechen="weich"] .schalter[data-flaechen-wechsel] { color: var(--akzent); box-shadow: inset 3px 3px 6px var(--tief-innen), inset -2px -2px 5px var(--hell-innen); }
:root[data-flaechen="weich"] .abb figcaption, :root[data-flaechen="weich"] .inhaltsmarken a + a, :root[data-flaechen="weich"] .produktfuss { border-color: color-mix(in srgb, var(--linie) 60%, transparent); }
:root[data-flaechen="weich"] .zeichen { box-shadow: inset 3px 3px 6px var(--tief-innen), inset -2px -2px 5px var(--hell-innen); background: var(--flaeche); }
:root[data-flaechen="weich"] .hinweis { border-left-color: transparent; border-radius: var(--rund-klein); box-shadow: inset 3px 3px 6px var(--tief-innen), inset -2px -2px 5px var(--hell-innen); background: var(--flaeche); }
:root[data-flaechen="weich"] .zahlen li::before { display: none; }
:root[data-flaechen="weich"] .sf-punkt[aria-selected="true"] { border-color: transparent; box-shadow: inset 3px 3px 6px var(--tief-innen), inset -2px -2px 5px var(--hell-innen); }
:root[data-flaechen="weich"] .sprech.antwort, :root[data-flaechen="weich"] .schwebe-antwort { border-color: transparent; background: var(--flaeche); box-shadow: inset 3px 3px 6px var(--tief-innen), inset -2px -2px 5px var(--hell-innen); }
:root[data-flaechen="weich"] .schwebe { border-color: transparent; background: var(--flaeche); box-shadow: 10px 10px 24px var(--tief), -6px -6px 16px var(--hell); }
:root[data-flaechen="weich"] .laufband { border-color: transparent; box-shadow: inset 0 6px 12px -8px var(--tief-innen), inset 0 -6px 12px -8px var(--hell-innen); }
:root[data-flaechen="weich"] .band { background: var(--flaeche); }

/* ---------- Bewegung: Inhalte kommen beim Blättern ruhig herein ---------- */
.bewegt .zeig { opacity: 0; transform: translateY(20px); transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--warte, 0ms); }
.bewegt .zeig.da { opacity: 1; transform: none; }
/* Der Auftakt baut sich beim Laden nacheinander auf. */
.bewegt .auftakt-text > *, .bewegt .schau { animation: herein .8s cubic-bezier(.2, .7, .2, 1) both; }
.bewegt .auftakt-text > :nth-child(2) { animation-delay: .06s; } .bewegt .auftakt-text > :nth-child(3) { animation-delay: .12s; }
.bewegt .auftakt-text > :nth-child(4) { animation-delay: .18s; } .bewegt .auftakt-text > :nth-child(5) { animation-delay: .24s; }
.bewegt .schau { animation-delay: .16s; animation-duration: 1s; }
@keyframes herein { from { opacity: 0; transform: translateY(22px); } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bewegt .zeig { opacity: 1; transform: none; transition: none; }
  .bewegt .auftakt-text > *, .bewegt .schau, .bewegt .schwebe-luma, .bewegt .schwebe-zahl { animation: none; }
  .kapitel { opacity: 1; transition: none; }
  .schwebe, .wechsel .darueber, .fortschritt i, .knopf, .feld, .abb-bild img, .sf-punkt span, .kopf-oben, .menue > a::after { transition: none; }
}

/* ---------- Schmalere Fenster ---------- */
@media (max-width: 1180px) {
  .raster.vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .weg { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .weg li:nth-child(4)::before { display: none; }
  .inhaltsmarken { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .inhaltsmarken a:nth-child(n+4) { border-top: 1px solid var(--linie); }
  .inhaltsmarken a:nth-child(4) { border-left: 0; }
  .produkt { grid-template-columns: minmax(0, 4fr) minmax(0, 5fr); }
  .produktfuss { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; padding: 14px 4px 2px; border-left: 0; border-top: 1px solid var(--linie); }
  .messwerte { grid-template-columns: minmax(0, 1fr); }
}
/* Unter dieser Breite steht im Rundgang jedes Kapitel mit seinem eigenen Bild; die stehende Bühne entfällt. */
@media (max-width: 1100px) {
  .tourfeld { grid-template-columns: minmax(0, 1fr); }
  .buehne { display: none; }
  .kapitel { min-height: 0; opacity: 1; padding-bottom: 34px; }
  .kapitel .im-kapitel { display: block; }
}
/* Unter 981 Pixeln klappt die Navigation hinter den Menüknopf; die Schalter stehen dort mit ihrem Namen. */
@media (max-width: 980px) {
  :root { --kopfhoehe: 60px; }
  .kopf-oben { display: none; }
  .nur-schmal { display: inline-flex; padding: 0; justify-content: center; border-color: var(--linie); }
  .kopf-haupt { justify-content: space-between; }
  .menue { position: absolute; top: 100%; left: 0; right: 0; display: none; flex-direction: column; align-items: stretch; gap: 2px; height: auto; max-height: calc(100vh - var(--kopfhoehe)); padding: 10px var(--rand) 18px; overflow-y: auto; background: var(--leiste); border-bottom: 1px solid var(--linie); box-shadow: 0 30px 50px -30px var(--tief); }
  .menue.offen { display: flex; }
  .menue > a { min-height: 48px; padding: 0 12px; border-radius: var(--rund-klein); font-size: 1.02rem; }
  .menue > a::after { display: none; }
  .menue > a[aria-current="page"] { background: var(--flaeche2); box-shadow: inset 3px 0 0 var(--akzent); }
  .menue-schalter { flex-direction: column; align-items: stretch; gap: 2px; margin: 10px 0 0; padding: 10px 0 0; border-top: 1px solid var(--linie); }
  .menue-schalter .schalter { justify-content: flex-start; min-height: 48px; padding: 0 12px; font-size: 1rem; }
  .auftakt, .nebeneinander, .nebeneinander.oben, .nebeneinander.dokument, .produktkopf, .kasse, .schaufenster, .abschnittskopf.geteilt { grid-template-columns: minmax(0, 1fr); }
  .auftakt h1 .betont { display: inline; }
  .schau { margin-top: 26px; }
  .schwebe-luma { left: 10px; bottom: 56px; }
  .schwebe-zahl { right: 10px; top: -22px; }
  .nebeneinander.umgekehrt > :first-child { order: 0; }
  .raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sf-liste { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .sf-punkt { width: auto; padding: 9px 14px; border-color: var(--linie); }
  .sf-punkt b { font-size: .93rem; }
  .sf-punkt span { display: none; }
  .sf-punkt[aria-selected="true"] { border-color: var(--akzent); box-shadow: none; background: var(--flaeche2); }
  .fuss-innen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fuss-marke { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
  .raster, .raster.zwei, .raster.vier, .zweispaltig, .sechseck.zweireihig, .weg, .weg.drei { grid-template-columns: minmax(0, 1fr); }
  .weg li + li::before { content: "↓"; left: 40px; top: -16px; width: auto; height: 16px; line-height: 16px; transform: none; }
  .weg li:nth-child(4)::before { display: block; }
  .zahlen li { padding: 20px 18px 18px; }
  /* Auf dem Telefon stehen die beiden Karten unter dem Bild statt davor, damit sie nichts verdecken. */
  .schau { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .schwebe { position: static; width: auto; translate: none; }
  .bewegt .schwebe-luma, .bewegt .schwebe-zahl { animation: none; }
  .schwebe-zahl { order: 2; } .schwebe-linie { display: none; }
  .inhaltsmarken { grid-template-columns: minmax(0, 1fr); }
  .inhaltsmarken a + a { border-left: 0; border-top: 1px solid var(--linie); }
  .produkt { grid-template-columns: minmax(0, 1fr); }
  .produktfuss { flex-direction: column; align-items: stretch; }
  .angaben div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .korbzeile { grid-template-columns: 84px minmax(0, 1fr); }
  .korbzeile img { width: 84px; }
  .korbzeile .rechts { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
  .filterzeile .rechts { margin-left: 0; width: 100%; }
  .fuss-innen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Auf dem Telefon steht jede Zeile einer Tabelle als Block; die Spaltenüberschrift steht klein über ihrem Wert. */
  .rollbar { padding: 4px 16px; }
  .tabelle, .tabelle tbody, .tabelle tr, .tabelle td { display: block; }
  .tabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tabelle tr { padding: 14px 0; border-top: 1px solid var(--linie); }
  .tabelle tr:first-child { border-top: 0; }
  .tabelle td, .tabelle td:first-child { width: auto; padding: 0; border: 0; }
  .tabelle td:first-child { margin-bottom: 4px; font-size: 1.02rem; }
  .tabelle td + td { margin-top: 8px; }
  .tabelle td + td[data-kopf]::before { content: attr(data-kopf); display: block; color: var(--text3); font: 600 .7rem/1.5 var(--ziffern); letter-spacing: .1em; text-transform: uppercase; }
  .abb figcaption { flex-wrap: wrap; row-gap: 2px; }
  .sprech { max-width: 96%; }
  .meldung { left: 16px; right: 16px; bottom: 16px; }
}

/* ====================================================================================================================
   Rundgang (seit dem 13.10.2026): Jeder Abschnitt hat seine eigene Form, damit die Seite nicht fünfmal gleich aussieht.
   Reiter über einer Bühne, ein stehendes Bild mit vorbeiziehenden Kapiteln, Kacheln in verschiedenen Größen, Bild und
   Text im Wechsel, Folien nebeneinander. Darüber eine Leiste, die zeigt, in welchem Abschnitt man gerade liest.
   ==================================================================================================================== */
:root:has(.rg-nav) { scroll-padding-top: calc(var(--kopfhoehe) + 84px); }
main > .rg-nav { max-width: none; padding-inline: 0; }
.rg-nav { position: sticky; top: var(--kopfhoehe); z-index: 30; border-block: 1px solid var(--linie); background: color-mix(in srgb, var(--grund) 86%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.rg-nav-innen { display: flex; flex-wrap: wrap; gap: 4px; max-width: var(--breite); margin: 0 auto; padding: 9px var(--rand); }
.rg-nav a { display: inline-flex; align-items: center; gap: 9px; min-height: 40px; padding: 0 15px; border-radius: 999px; color: var(--text2); font-size: .93rem; font-weight: 560; white-space: nowrap; transition: background .2s, color .2s; }
.rg-nav a small { min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--flaeche2); color: var(--text3); font: 600 .72rem/1.5 var(--ziffern); text-align: center; }
.rg-nav a:hover { color: var(--text); background: var(--flaeche); text-decoration: none; }
.rg-nav a.aktiv { color: var(--akzent-auf); background: var(--akzent); }
.rg-nav a.aktiv small { background: color-mix(in srgb, var(--akzent-auf) 16%, transparent); color: var(--akzent-auf); }

/* ---------- Reiter über einer Bühne ---------- */
.rg-reiterleiste { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.rg-tab { min-height: 42px; padding: 0 17px; border: 1px solid var(--linie); border-radius: 999px; background: transparent; color: var(--text2); font-size: .95rem; font-weight: 560; transition: background .2s, color .2s, border-color .2s; }
.rg-tab:hover { color: var(--text); border-color: var(--linie2); }
.rg-tab[aria-selected="true"] { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-auf); }
.rg-reiterfeld { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(20px, 3vw, 44px); align-items: start; padding: clamp(18px, 2.4vw, 30px); border: 1px solid var(--linie); border-radius: var(--rund); background: radial-gradient(560px 300px at 0 0, var(--schein), transparent 70%), var(--flaeche); }
.rg-tafel h3 { margin-bottom: 12px; font-size: 1.55rem; }
.rg-tafel p { color: var(--text2); }
.rg-tafel .im-kapitel { margin: 18px 0 30px; }
/* Ohne Skript stehen alle Ansichten untereinander, jede mit ihrem Bild. Mit Skript zeigt die Bühne die gewählte. */
.rg-reiter:not(.bereit) .rg-reiterleiste, .rg-reiter:not(.bereit) .rg-reiterbild { display: none; }
.rg-reiter:not(.bereit) .rg-reiterfeld { grid-template-columns: minmax(0, 1fr); }
.rg-reiter.bereit .rg-tafel { display: none; }
.rg-reiter.bereit .rg-tafel.aktiv { display: block; animation: herein .45s cubic-bezier(.2, .7, .2, 1) both; }
.rg-reiter.bereit .rg-tafel .im-kapitel { display: none; }

/* ---------- Kacheln in verschiedenen Größen ---------- */
.rg-kacheln { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.rg-kachel.abb-bild { display: flex; flex-direction: column; padding: 0; border: 1px solid var(--linie); border-radius: var(--rund); background: var(--flaeche); color: inherit; text-align: left; overflow: hidden; transition: border-color .2s, transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s; }
.rg-kachel.abb-bild:hover { border-color: var(--akzent); transform: translateY(-3px); box-shadow: 0 24px 44px -30px var(--tief); }
.rg-kachel img { width: 100%; }
.rg-kacheltext { display: flex; flex: 1; flex-direction: column; gap: 5px; padding: 14px 16px 15px; border-top: 1px solid var(--linie); }
.rg-kacheltext b { color: var(--text); font-size: 1.03rem; font-weight: 640; }
.rg-kacheltext span { color: var(--text2); font-size: .9rem; line-height: 1.5; }
.rg-kacheltext i { margin-top: auto; padding-top: 8px; color: var(--akzent); font-size: .84rem; font-style: normal; font-weight: 620; }
.rg-kachel:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.rg-kachel:nth-child(1) .rg-kacheltext { padding: 20px 22px; }
.rg-kachel:nth-child(1) b { font-size: 1.45rem; }
.rg-kachel:nth-child(1) .rg-kacheltext span { font-size: 1rem; }
.rg-kachel:nth-child(6), .rg-kachel:nth-child(9), .rg-kachel:nth-child(10) { grid-column: span 2; }
.rg-kacheltext small { color: var(--akzent); font: 600 .7rem/1.3 var(--ziffern); letter-spacing: .08em; text-transform: uppercase; }
/* Der Verweis eines Kapitels auf seine Detailansicht. */
.rg-mehr { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 9px 15px; border: 1px solid var(--linie2); border-radius: 999px; background: var(--flaeche); color: var(--akzent); font-size: .9rem; font-weight: 620; transition: border-color .15s, background .15s; }
.rg-mehr::after { content: "→"; transition: transform .15s; }
.rg-mehr:hover { border-color: var(--akzent); background: var(--akzent-weich); }
.rg-mehr:hover::after { transform: translateX(3px); }
:root[data-flaechen="weich"] .rg-mehr { border-color: transparent; box-shadow: 4px 4px 10px var(--tief), -3px -3px 8px var(--hell); }

/* ---------- Bild und Text im Wechsel ---------- */
.rg-wechsel { display: flex; flex-direction: column; gap: clamp(30px, 4.4vw, 60px); }
.rg-zeile { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(20px, 3.4vw, 52px); align-items: center; }
.rg-zeile:nth-child(even) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.rg-zeile:nth-child(even) .abb { order: 2; }
.rg-zeilentext h3 { margin-bottom: 12px; font-size: 1.6rem; }
.rg-zeilentext p { color: var(--text2); }
.rg-marken { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.rg-marken li { padding: 7px 13px; border: 1px solid var(--linie2); border-radius: 14px; color: var(--text2); font-size: .87rem; line-height: 1.4; }

/* ---------- Folien nebeneinander ---------- */
.rg-bahn { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain; scrollbar-width: none; border-radius: var(--rund); }
.rg-bahn::-webkit-scrollbar { display: none; }
.rg-folie { display: grid; flex: 0 0 100%; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(18px, 3vw, 40px); align-items: center; padding: clamp(16px, 2.2vw, 26px); border: 1px solid var(--linie); border-radius: var(--rund); background: var(--flaeche); scroll-snap-align: start; }
.rg-folientext h3 { margin-bottom: 12px; font-size: 1.5rem; }
.rg-folientext p { color: var(--text2); }
.rg-streifenfuss { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 16px; }
.rg-punkte { display: flex; gap: 6px; }
.rg-punkt { position: relative; width: 30px; height: 26px; padding: 0; border: 0; background: none; transition: width .25s; }
.rg-punkt::before { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 6px; border-radius: 3px; background: var(--linie2); transition: background .2s; }
.rg-punkt[aria-current="true"] { width: 46px; }
.rg-punkt[aria-current="true"]::before { background: var(--akzent); }
.rg-zaehler { min-width: 64px; color: var(--text3); font: 600 .76rem/1 var(--ziffern); letter-spacing: .06em; text-align: center; }

/* ---------- Zwischenruf zwischen zwei Abschnitten ---------- */
.rg-zwischenruf { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(22px, 4vw, 56px); align-items: center; padding: clamp(24px, 4vw, 52px); overflow: hidden; background: radial-gradient(720px 320px at 0 0, var(--schein), transparent 70%), var(--waben), var(--flaeche); }
.rg-zwischenruf h2 { font-size: clamp(1.5rem, 2.5vw, 2.1rem); max-width: 20ch; }
.rg-zwischenruf p:not(.vorzeile) { margin: 14px 0 0; color: var(--text2); }
.rg-zwischenruf .knopf { margin-top: 8px; }

:root[data-flaechen="weich"] :is(.rg-reiterfeld, .rg-kachel.abb-bild, .rg-folie, .rg-zwischenruf) { border-color: transparent; box-shadow: 9px 9px 22px var(--tief), -7px -7px 18px var(--hell); }
:root[data-flaechen="weich"] .rg-reiterfeld, :root[data-flaechen="weich"] .rg-zwischenruf { background: var(--flaeche); }
:root[data-flaechen="weich"] .rg-tab, :root[data-flaechen="weich"] .rg-marken li { border-color: transparent; background: var(--flaeche); box-shadow: 4px 4px 10px var(--tief), -3px -3px 8px var(--hell); }
:root[data-flaechen="weich"] .rg-tab[aria-selected="true"] { background: var(--akzent); }
:root[data-flaechen="weich"] .rg-kacheltext { border-top-color: color-mix(in srgb, var(--linie) 60%, transparent); }
:root[data-flaechen="weich"] .rg-nav { border-color: transparent; box-shadow: 0 10px 22px -16px var(--tief); }

@media (prefers-reduced-motion: reduce) {
  .rg-bahn { scroll-behavior: auto; }
  .rg-reiter.bereit .rg-tafel.aktiv { animation: none; }
  .rg-kachel.abb-bild, .rg-punkt, .rg-punkt::before { transition: none; }
}
@media (max-width: 1180px) {
  .rg-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rg-kachel:nth-child(1) { grid-row: auto; }
  .rg-kachel:nth-child(6), .rg-kachel:nth-child(9), .rg-kachel:nth-child(10) { grid-column: auto; }
}
@media (max-width: 1300px) {
  /* Damit die Leiste der Abschnitte einzeilig bleibt, entfällt hier die Zahl der Ansichten. */
  .rg-nav a { padding: 0 11px; }
  .rg-nav a small { display: none; }
}
@media (max-width: 1040px) {
  /* Darunter bräuchte die Leiste zwei Zeilen; sie bleibt dann am Anfang der Seite stehen, statt mitzuwandern. */
  .rg-nav { position: static; }
  :root:has(.rg-nav) { scroll-padding-top: calc(var(--kopfhoehe) + 16px); }
}
@media (max-width: 980px) {
  .rg-reiterfeld, .rg-zeile, .rg-zeile:nth-child(even), .rg-folie, .rg-zwischenruf { grid-template-columns: minmax(0, 1fr); }
  .rg-reiterbild { order: -1; }
  .rg-zeile:nth-child(even) .abb { order: 0; }
}
@media (max-width: 420px) {
  .rg-punkte { display: none; }
}
@media (max-width: 680px) {
  .rg-kacheln { grid-template-columns: minmax(0, 1fr); }
  .rg-kachel:nth-child(1) { grid-column: auto; }
  .rg-streifenfuss { gap: 10px; }
  .rg-punkt { width: 20px; } .rg-punkt[aria-current="true"] { width: 30px; }
}

/* ---------- Rundgang, Form „stehendes Bild“: Bild und Text sitzen unter der Leiste der Abschnitte (13.10.2026) ----------
   Fehler, den Friedrich gemeldet hat: Im zweiten Abschnitt lag der obere Rand des stehenden Bildes hinter der Leiste der
   Abschnitte, weil beide an derselben Stelle haften wollten, und der Text des Kapitels stand nicht auf der Höhe des
   Bildes. Jetzt gehört dem Bild die ganze Fläche unter Kopfzeile und Leiste, und es steht in deren Mitte. Jedes Kapitel
   ist genauso hoch wie diese Fläche und trägt seinen Text in der Mitte: Steht ein Kapitel im Fenster, dann stehen Text
   und Bild auf gleicher Höhe, und nichts liegt hinter der Leiste. */
:root { --tourleiste: 0px; }
:root:has(.rg-nav) { --tourleiste: 60px; }
@media (max-width: 1040px) {
  /* Hier haftet die Leiste der Abschnitte nicht mehr; sie braucht dann auch keinen Platz. */
  :root:has(.rg-nav) { --tourleiste: 0px; }
}
@media (min-width: 1101px) {
  .tour-buehne { --flaeche: calc(100vh - var(--kopfhoehe) - var(--tourleiste)); }
  .tour-buehne .buehne { top: calc(var(--kopfhoehe) + var(--tourleiste)); display: grid; align-content: center; box-sizing: border-box; height: var(--flaeche); padding-block: 14px; }
  .tour-buehne .buehne .abb-bild { display: grid; place-items: center; background: var(--grund); }
  .tour-buehne .buehne .abb-bild img { width: auto; max-width: 100%; max-height: calc(var(--flaeche) - 118px); }
  .tour-buehne .buehne .wechsel .darueber { width: 100%; height: 100%; object-fit: contain; max-height: none; }
  .tour-buehne .kapitel, .tour-buehne .kapitel:last-child { display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; min-height: var(--flaeche); padding-block: 28px; }
}