/* Weblion · Website, Fassung 6 (10.11.2026): weniger steril, mit Witz. Der Löwe als Maskottchen (Strichzeichnung),
   Büro-Bingo, Schreibtisch vorher/nachher beim Scrollen, Zeitfresser-Rechner, „Was wir nicht tun“, 404 mit Löwe.
   Rhythmus: grüner Kopfbereich (Löwe frisst Papier) → Systemleiste → Bingo → Schreibtisch → grünes Rechner-Band →
   Abläufe + Leistungen → Ehrenwort → Vorgehen mit Pfotenspur → Kontakt (Löwe winkt). */
html, body { height: auto; }   /* feste Höhe aus stil.css würde die mitlaufende Kopfleiste nach dem ersten Bildschirm abschneiden */
body { background: var(--seite); min-height: 100%; }
main { overflow-x: clip; }   /* gedrehte Bingo-Karte und Schatten dürfen am Handy keinen Querlauf erzeugen */
.breite { max-width: 1160px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
section.block { padding-block: 96px; }
.himmel { background: var(--bg); }
section.minze { background: var(--tuerkis-hell); }
.ueber-titel { display: grid; gap: 12px; margin-bottom: 40px; max-width: 760px; }
.ueber-titel h2 { font-size: clamp(30px, 4.4vw, 46px); line-height: 1.08; letter-spacing: -.02em; }
.ueber-titel p { margin: 0; color: var(--leise); font-size: 18.5px; }
.kennung { color: var(--tuerkis); font-weight: 700; }
.unsichtbar { position: absolute; width: 0; height: 0; overflow: hidden; }
.nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vn-hinweis { margin-top: 14px; font-size: 13.5px; color: var(--leise); max-width: 46em; }
@media (max-width: 760px) { section.block { padding-block: 64px; } }

/* ---------- Kopf ---------- */
.seitenkopf { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--held) 94%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255, 255, 255, .08); padding-top: env(safe-area-inset-top, 0px); }
.seitenkopf .breite { display: flex; align-items: center; gap: 22px; min-height: 68px; }
.marke { display: inline-flex; align-items: center; gap: 10px; font-size: 22px; color: var(--tinte); }
.seitenkopf .marke img { display: block; height: 28px; width: auto; }
.seitenkopf nav { display: flex; gap: 26px; margin-left: auto; font-size: 15.5px; font-weight: 600; }
.seitenkopf nav a { color: var(--held-leise); text-decoration: none; }
.seitenkopf nav a:hover { color: var(--held-text); }
.sprachen { display: flex; gap: 6px; }
.sprache { font-size: 13px; font-weight: 700; color: var(--held-text); text-decoration: none; background: rgba(255, 255, 255, .1); border-radius: 999px; padding: 6px 11px; }
.sprache:hover { background: var(--orange); color: var(--auf-orange); }
.knopf.orange { background: var(--orange); color: var(--auf-orange); box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--orange) 80%, transparent); transition: transform .15s ease, background .15s ease; }
.knopf.orange:hover { background: var(--orange-tief); transform: translateY(-2px) rotate(-.6deg); }
.kopf-knopf { width: auto; padding: 10px 18px; font-size: 15px; }
@media (max-width: 920px) { .seitenkopf nav { display: none; } .sprachen { margin-left: auto; } }
@media (max-width: 460px) { .kopf-knopf { display: none !important; } }

/* ---------- Der Löwe (gemeinsam für alle Auftritte) ---------- */
.loewe { display: block; overflow: visible; }
.loewe path, .loewe circle, .loewe ellipse { stroke: #13352A; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.l-maehne { fill: #E8B04B; } .l-maehne-innen { fill: #D99A3A; stroke-width: 0 !important; } .l-ohr { fill: #F0C468; } .l-ohr-innen { fill: #D9963C; stroke-width: 0 !important; }
.l-gesicht { fill: #FCE6B3; } .l-schnauze { fill: #FFF5DA; stroke-width: 2.5 !important; }
.l-pulli { fill: #2E8B63; } .l-arm { fill: none; stroke: #2E8B63 !important; stroke-width: 17 !important; }
.l-umriss-dick { fill: none; stroke-width: 23 !important; }
.l-schwanz-innen { fill: none; stroke: #E8B04B !important; stroke-width: 5 !important; }
.l-schwanz .l-umriss-dick { stroke-width: 10 !important; }
.l-pfote { fill: #F5CF7A; } .l-marke { fill: #E8B04B; stroke-width: 2.5 !important; }
.l-linie { fill: none; stroke-width: 2.5 !important; }
.l-auge, .l-nase, .l-punkt { fill: #13352A; stroke-width: 0 !important; }
.l-glanz { fill: #fff; stroke-width: 0 !important; }
.l-baeckchen { fill: #F09A6A; opacity: .5; stroke-width: 0 !important; transform-box: fill-box; transform-origin: 50% 50%; }
.l-rachen { fill: #6B2A1E; stroke-width: 2.5 !important; } .l-zunge { fill: #E8806B; stroke-width: 0 !important; } .l-zahn { fill: #fff; stroke-width: 1.4 !important; }
.l-bein { fill: none; stroke: #F0C468 !important; stroke-width: 16 !important; }
.l-stuhl { fill: #2B5445; stroke-width: 2.5 !important; } .l-stuhl-dunkel, .l-rad { fill: #13352A; stroke-width: 0 !important; } .l-fuss-kreuz { stroke-width: 8 !important; fill: none; }
.l-arm-gelenk { fill: #2E8B63; stroke-width: 0 !important; }
.l-arm-hoch { display: none; }
.l-schweiss { fill: #9ED3F0; stroke-width: 2 !important; }
.l-augen-froh, .l-brauen-sorge, .l-schweiss, .l-maul-auf { opacity: 0; }
.l-augen-froh { stroke-width: 3.2 !important; }
.loewe.froh .l-augen { opacity: 0; } .loewe.froh .l-augen-froh { opacity: 1; }
.loewe.maul .l-maul-auf { opacity: 1; } .loewe.maul .l-maul-zu { opacity: 0; }
.l-maul-auf { transform-box: fill-box; transform-origin: 50% 0; }
.l-augen { transform-box: fill-box; transform-origin: 50% 50%; animation: blinzeln 5.2s infinite; }
.l-pupillen { transition: transform .25s ease-out; }
.l-schwanz { transform-box: view-box; transform-origin: 152px 222px; animation: wedeln 3.4s ease-in-out infinite; }
.l-arm-r { transform-box: view-box; transform-origin: 143px 170px; }
@keyframes blinzeln { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes wedeln { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-9deg); } }
@media (prefers-color-scheme: dark) { .loewe .l-pulli, .loewe .l-arm-gelenk { fill: #3C9C70; } .loewe .l-arm { stroke: #3C9C70 !important; } .loewe .l-stuhl { fill: #3A6A58; } }

/* ---------- Kopfbereich: der Löwe frisst den Posteingang ---------- */
.held { position: relative; overflow: hidden; background: var(--held); color: var(--held-text); }
.held::before, .held::after { content: ""; position: absolute; border-radius: 50%; filter: blur(70px); opacity: .75; pointer-events: none; animation: treiben 18s ease-in-out infinite alternate; }
.held::before { width: 560px; height: 560px; right: -120px; top: -160px; background: color-mix(in srgb, #2E8B63 45%, transparent); }
.held::after { width: 520px; height: 520px; left: -160px; bottom: -220px; background: color-mix(in srgb, #E8B04B 30%, transparent); animation-delay: -9s; }
@keyframes treiben { to { transform: translate(60px, 40px) scale(1.12); } }
.einstieg { position: relative; z-index: 1; min-height: calc(100svh - 68px); padding-block: 48px 56px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.einstieg h1 { font-size: clamp(44px, 6.2vw, 84px); line-height: 1.03; letter-spacing: -.025em; margin: 16px 0 22px; }
.einstieg h1 .wort { display: inline-block; animation: wort .8s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * 110ms + 100ms); }
/* Leuchtstift-Kasten: inline-block mit kleinerer Zeilenhöhe, damit das Gold nicht in die Zeile darüber ragt (Tilo 10.11.) */
.einstieg h1 em { display: inline-block; font-style: normal; line-height: .86; padding: .07em .1em .05em; color: var(--held); background: linear-gradient(var(--sonne), var(--sonne)) no-repeat 0 100% / 100% 100%; border-radius: .12em; animation: leuchtstift .7s cubic-bezier(.2, .8, .2, 1) 1s both; }
@keyframes wort { from { opacity: 0; transform: translateY(.45em); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes leuchtstift { from { background-size: 0 100%; color: inherit; } to { background-size: 100% 100%; } }
.einstieg .kennung { color: var(--orange); }
.einstieg .lead { font-size: clamp(18px, 1.9vw, 21px); color: var(--held-leise); margin: 0 0 30px; max-width: 32em; }
.aktionen { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.aktionen .knopf { width: auto; padding: 17px 26px; border-radius: 14px; }
.aktionen .knopf.rand { padding: 15.5px 24px; }
.kleingedruckt { margin-top: 14px; font-size: 14px; color: var(--held-leise); }
.held .knopf.rand { background: transparent; color: var(--held-text); border-color: rgba(247, 241, 227, .5); }
.held .knopf.rand:hover { border-color: var(--held-text); }

/* Bühne. Ohne JavaScript (oder bei „weniger Bewegung“) zeigt sie den satten Löwen mit dem Ergebnis; seite.js spielt
   Papier fliegt herum → Löwe frisst Stück für Stück → „Mjam“ → vorbereitete Vorgänge → Freigabe → Stunden zählen hoch. */
.buehne { position: relative; height: 600px; }
.buehne::before { content: ""; position: absolute; inset: 0 2%; border-radius: 28px; background: rgba(255, 255, 255, .06); border: 1.5px solid rgba(255, 255, 255, .12); box-shadow: 0 30px 60px -40px rgba(0, 0, 0, .6); }
.buehne-titel { position: absolute; left: 50%; top: 22px; transform: translateX(-50%); font-weight: 800; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--held-leise); white-space: nowrap; }
.karte-b { color: var(--tinte); position: absolute; left: 0; top: 0; display: none; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; border-radius: 13px; background: var(--flaeche); border: 1.5px solid var(--linie); box-shadow: 0 12px 24px -16px rgba(0, 0, 0, .6); font-weight: 600; font-size: 14px; white-space: nowrap; will-change: transform, opacity; }
.buehne.laeuft .karte-b { display: flex; z-index: 4; }   /* vor dem Löwen, damit man sieht, wie das Papier im Maul verschwindet */
.karte-b .ico { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; flex: none; }
.karte-b .ico svg { width: 16px; height: 16px; }
.karte-b:nth-of-type(4n+1) .ico { background: var(--blau-hell); color: var(--blau); }
.karte-b:nth-of-type(4n+2) .ico { background: var(--orange-hell); color: var(--orange-tief); }
.karte-b:nth-of-type(4n+3) .ico { background: var(--sonne-hell); color: #8A6414; }
.karte-b:nth-of-type(4n+4) .ico { background: var(--tuerkis-hell); color: var(--tuerkis); }
.ergebnis-b { position: absolute; left: 50%; top: 70px; width: min(330px, 86%); transform: translateX(-50%); color: var(--tinte); background: var(--flaeche); border-radius: 20px; padding: 18px 18px 16px; box-shadow: 0 24px 50px -26px rgba(0, 0, 0, .7); display: grid; gap: 10px; }
.ergebnis-b strong { font-size: 17px; }
.ergebnis-b ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14.5px; font-weight: 600; color: var(--leise); }
.ergebnis-b li { display: flex; align-items: center; gap: 8px; }
.ergebnis-b .ico { width: 22px; height: 22px; border-radius: 50%; background: var(--tuerkis-hell); color: var(--tuerkis); display: grid; place-items: center; flex: none; }
.ergebnis-b .ico svg { width: 14px; height: 14px; stroke-width: 3; }
.freigabe-knopf { display: grid; font-weight: 800; font-size: 16px; border-radius: 13px; padding: 12px 20px; margin-top: 4px; background: var(--tuerkis); color: #fff; white-space: nowrap; text-align: center; }
.freigabe-knopf span { grid-area: 1 / 1; }
.freigabe-knopf .f1 { opacity: 0; }
.gewinn { color: var(--tinte); position: absolute; right: 0; top: 10px; display: grid; gap: 2px; padding: 14px 18px; border-radius: 18px; background: var(--flaeche); box-shadow: 0 22px 44px -22px rgba(0, 0, 0, .7); transform: rotate(3deg); z-index: 3; }
.gewinn b { font-weight: 800; font-size: 30px; line-height: 1; color: var(--orange-tief); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.gewinn > span { font-size: 13px; font-weight: 700; color: var(--leise); }
.loewe-platz { position: absolute; left: 50%; bottom: 0; width: 230px; transform: translateX(-50%); z-index: 2; }
.held-loewe { width: 100%; height: auto; }
.sprechblase { position: absolute; left: 82%; top: 8px; white-space: nowrap; background: var(--flaeche); color: var(--tinte); font-weight: 800; font-size: 15px; padding: 8px 14px; border-radius: 16px 16px 16px 4px; box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .7); transform: rotate(-4deg); }
@media (max-width: 980px) {
  .einstieg { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-block: 36px 48px; gap: 28px; }
  .buehne { height: 540px; }
  .buehne::before { inset: 0; }
  .karte-b { font-size: 13px; }
  .gewinn { right: 2%; top: -8px; } .gewinn b { font-size: 26px; }
  .loewe-platz { width: 190px; }
  .sprechblase { left: auto; right: 74%; border-radius: 16px 16px 4px 16px; }
}
@media (max-width: 700px) { .aktionen .knopf { width: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .einstieg h1 .wort, .einstieg h1 em, .held::before, .held::after, .l-augen, .l-schwanz { animation: none; }
}

/* ---------- Systeme (laufende Leiste) ---------- */
.systeme { border-block: 1px solid var(--linie); background: var(--flaeche); overflow: hidden; }
.systeme .breite { display: flex; align-items: center; gap: 28px; padding-block: 22px; }
.systeme .titel { flex: none; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--leise); }
.laufband { overflow: hidden; flex: 1 1 auto; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.laufband ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 12px; width: max-content; animation: laufen 38s linear infinite; }
.laufband:hover ul { animation-play-state: paused; }
.laufband li { white-space: nowrap; font-weight: 700; font-size: 15.5px; padding: 9px 16px; border-radius: 999px; }
.laufband li:nth-child(4n+1) { background: var(--blau-hell); color: var(--blau); }
.laufband li:nth-child(4n+2) { background: var(--tuerkis-hell); color: var(--tuerkis); }
.laufband li:nth-child(4n+3) { background: var(--orange-hell); color: var(--orange-tief); }
.laufband li:nth-child(4n+4) { background: var(--sonne-hell); color: #8A6414; }
@keyframes laufen { to { transform: translateX(-50%); } }
@media (max-width: 760px) { .systeme .breite { flex-direction: column; align-items: flex-start; gap: 14px; } .laufband { width: 100%; } }

/* ---------- Büro-Bingo ---------- */
.bingo-raster { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); grid-template-areas: "titel karte" "ergebnis karte"; gap: 0 56px; align-items: start; }
.bingo-titel { grid-area: titel; align-self: end; } .bingo { grid-area: karte; align-self: center; } .bingo-ergebnis { grid-area: ergebnis; }
.bingo { position: relative; background: var(--flaeche); padding: 22px 22px 24px; transform: rotate(-1.2deg);
  border: 2.5px solid var(--tinte); border-radius: 255px 18px 225px 18px / 18px 225px 18px 255px; box-shadow: 10px 12px 0 -2px var(--orange); }
.bingo-kopf { display: grid; grid-template-columns: repeat(5, 1fr); text-align: center; font-weight: 800; font-size: clamp(26px, 3.4vw, 38px); letter-spacing: .04em; color: var(--tinte); margin-bottom: 12px; }
.bingo-kopf span:nth-child(odd) { color: var(--orange-tief); transform: rotate(-4deg); } .bingo-kopf span:nth-child(even) { transform: rotate(3deg); }
.bingo-feld { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px dashed var(--linie); border-left: 2px dashed var(--linie); }
.bingo-zelle { position: relative; min-height: 112px; display: grid; place-items: center; gap: 4px; align-content: center; padding: 14px 12px; border: 0; border-right: 2px dashed var(--linie); border-bottom: 2px dashed var(--linie);
  background: none; color: var(--tinte); font: 600 15px/1.3 var(--text); text-align: center; cursor: pointer; transition: background .2s ease, transform .15s ease; -webkit-tap-highlight-color: transparent; }
.bingo-zelle:hover { background: var(--sonne-hell); }
.bingo-zelle:active { transform: scale(.97); }
.bingo-zelle .bz-text { position: relative; z-index: 1; }
.bingo-zelle.kaffee { background: var(--orange-hell); font-style: italic; }
.bingo-zelle.kaffee .ico { width: 26px; height: 26px; color: var(--orange-tief); }
.bingo-zelle[aria-pressed="true"] { background: color-mix(in srgb, var(--sonne) 22%, transparent); }
.kringel { position: absolute; inset: 8px 6px; width: calc(100% - 12px); height: calc(100% - 16px); pointer-events: none; overflow: visible; }
.kringel path { opacity: 0; fill: none; stroke: var(--orange-tief); stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .45s cubic-bezier(.4, 0, .2, 1); }
.bingo-zelle[aria-pressed="true"] .kringel path { stroke-dashoffset: 0; opacity: 1; }
.bingo-stand { font-weight: 700; color: var(--leise); font-variant-numeric: tabular-nums; }
.bingo-treffer { margin-top: 18px; display: grid; gap: 8px; justify-items: start; animation: hereinploppen .5s cubic-bezier(.2, 1.4, .4, 1) both; }
.bingo-treffer strong { font-size: clamp(40px, 5vw, 60px); line-height: 1; font-weight: 800; color: var(--orange-tief); transform: rotate(-3deg); letter-spacing: -.02em; }
.bingo-treffer p { margin: 0; font-size: 18px; max-width: 30em; }
.bingo-treffer small { color: var(--leise); font-size: 13.5px; }
.bingo-treffer .knopf { width: auto; padding: 15px 22px; border-radius: 14px; margin-top: 6px; }
/* Tipp-Hand (wie TapHintHand in der App): bis zum ersten Tipp, dann verschwindet sie */
.tipp-hand { position: absolute; left: 52%; top: 44%; width: 68px; height: 68px; pointer-events: none; z-index: 2; animation: tippen 2s ease-in-out infinite; transition: opacity .3s ease; }
.tipp-hand svg { width: 100%; height: 100%; display: block; overflow: visible; }
.tipp-hand path, .schiebe-hand path { fill: #B9801C; stroke: #FFFDF7; stroke-width: 1.3; paint-order: stroke; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .25)); }
.tipp-hand .welle { position: absolute; left: 31px; top: 7px; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 3px solid #B9801C; opacity: 0; animation: welle 2s ease-out infinite; }
.bingo.benutzt .tipp-hand { opacity: 0; }
@keyframes tippen { 0%, 100% { transform: translateY(0) scale(1); } 45%, 55% { transform: translateY(14px) scale(.86); } }
@keyframes welle { 0%, 44% { opacity: 0; transform: translateY(14px) scale(.3); } 50% { opacity: .9; transform: translateY(14px) scale(.5); } 85%, 100% { opacity: 0; transform: translateY(14px) scale(1.6); } }
@media (prefers-reduced-motion: reduce) { .tipp-hand, .tipp-hand .welle { animation: none; } }
.bingo.jubel { animation: jubel .7s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes jubel { 0% { transform: rotate(-1.2deg); } 25% { transform: rotate(1.6deg) scale(1.03); } 55% { transform: rotate(-2.4deg) scale(1.02); } 100% { transform: rotate(-1.2deg); } }
@keyframes hereinploppen { from { opacity: 0; transform: scale(.9) translateY(10px); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) { .bingo-raster { grid-template-columns: minmax(0, 1fr); grid-template-areas: "titel" "karte" "ergebnis"; gap: 0; } .bingo-titel { margin-bottom: 28px; } .bingo { transform: rotate(-.6deg); } .bingo-ergebnis { margin-top: 26px; } }
@media (max-width: 520px) { .bingo { padding: 14px 10px 16px; } .bingo-zelle { min-height: 108px; font-size: 12.5px; padding: 10px 5px; hyphens: auto; overflow-wrap: break-word; } .bingo-zelle.kaffee .ico { width: 20px; height: 20px; } }

/* ---------- Schreibtisch vorher/nachher (beim Scrollen) ---------- */
.tisch-block { position: relative; }
.tisch-buehne { padding-block: 96px; }
.tisch-block.scrollt { height: 240vh; }
.tisch-block.scrollt .tisch-buehne { position: sticky; top: 68px; height: calc(100svh - 68px); padding-block: 24px; display: grid; align-items: center; overflow: hidden; }
.tisch-raster { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 40px; align-items: center; width: 100%; }
.tisch-text .ueber-titel { margin-bottom: 20px; }
.tisch-zahl { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.tisch-zahl strong { font-size: clamp(56px, 7vw, 92px); font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--orange-tief); font-variant-numeric: tabular-nums; min-width: 2.2ch; }
.tisch-zahl span { font-size: 19px; font-weight: 700; }
.tisch-unter { display: grid; margin-top: 6px; font-weight: 600; color: var(--leise); }
.tisch-unter span { grid-area: 1 / 1; transition: opacity .3s ease; }
.tisch-unter .u-nachher { opacity: 0; }
.tisch-block.ist-nachher .u-vorher { opacity: 0; } .tisch-block.ist-nachher .u-nachher { opacity: 1; }
.umschalter { display: none; gap: 6px; margin-top: 22px; background: var(--flaeche); padding: 5px; border-radius: 999px; width: max-content; box-shadow: inset 0 0 0 1.5px var(--linie); }
.js .umschalter { display: flex; }
.umschalter button { border: 0; cursor: pointer; font: 700 15px var(--text); padding: 9px 18px; border-radius: 999px; background: none; color: var(--tinte); }
.umschalter button[aria-pressed="true"] { background: var(--blau); color: var(--auf-akzent); }
.tisch-svg { display: block; width: 100%; height: auto; overflow: hidden; }
.tisch-svg.hoch { display: none; }
.t-uhrtext.gross { font-size: 21px; }
.t-schrift.klein { font-size: 14px; }
.t-schrift.klein.t-weiss { font-size: 12px; }
.t-papier { fill: #FFFDF7; stroke: #13352A; stroke-width: 2.5; }
.t-zeilen { fill: none; stroke: #B9AE95; stroke-width: 2.5; stroke-linecap: round; }
.t-zettel { fill: #F6D365; stroke: #13352A; stroke-width: 2; }
.t-krakel, .t-ring, .t-hoerer, .t-henkel, .t-haken, .t-dampf path { fill: none; stroke: #13352A; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.t-hoerer { stroke-width: 9; }
.t-ring { stroke: #D9534F; }
.t-boden { fill: none; stroke: var(--linie); stroke-width: 3; stroke-linecap: round; }
.t-tisch { fill: #C99A62; stroke: #13352A; stroke-width: 3; }
.t-geraet { fill: #13352A; }
.t-bildschirm { fill: #FFFDF7; }
.t-schrift { font: 800 17px var(--text); fill: #13352A; }
.t-weiss { fill: #fff; font-size: 15px; }
.t-rot { fill: #D9534F; }
.t-mail { fill: #E4DAC4; }
.t-ok { fill: #E2F0E7; stroke: #2E8B63; stroke-width: 3; }
.t-haken { stroke: #2E8B63; stroke-width: 5; }
.t-tasse { fill: #FFFDF7; stroke: #13352A; stroke-width: 3; }
.t-dampf path { stroke: #4F6A5E; stroke-width: 2.5; animation: dampf 2.4s ease-in-out infinite; }
.t-dampf path + path { animation-delay: -1.2s; }
@keyframes dampf { 0%, 100% { transform: translateY(0); opacity: .9; } 50% { transform: translateY(-5px); opacity: .45; } }
.t-topf { fill: #B9801C; stroke: #13352A; stroke-width: 3; }
.t-blatt { fill: #2E8B63; stroke: #13352A; stroke-width: 2.5; }
.t-zifferblatt { fill: var(--flaeche); stroke: var(--tinte); stroke-width: 4; }
.t-strich-d { stroke: var(--tinte); stroke-width: 3; stroke-linecap: round; }
.t-zeiger, .t-nabe { fill: var(--tinte); }
.t-uhrtext { font: 800 19px var(--text); fill: var(--tinte); }
@media (max-width: 900px) {
  .tisch-raster { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .tisch-block.scrollt .tisch-buehne { padding-block: 12px; align-items: start; }
  .tisch-block.scrollt .ueber-titel p, .tisch-block.scrollt .vn-hinweis { display: none; }
  .tisch-block.scrollt .ueber-titel { margin-bottom: 8px; gap: 6px; }
  .tisch-block.scrollt .ueber-titel h2 { font-size: clamp(24px, 6.4vw, 34px); }
  .tisch-zahl strong { font-size: 52px; }
  .tisch-zahl span { font-size: 16px; }
  .umschalter { margin-top: 12px; }
}

/* ---------- Zeitfresser-Rechner (grünes Band) ---------- */
.rechner-block { background: var(--held); color: var(--held-text); position: relative; overflow: hidden; }
.rechner-block .kennung { color: var(--orange); }
.rechner-block .ueber-titel p, .rechner-block .vn-hinweis { color: var(--held-leise); }
.rechner-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.regler { position: relative; display: grid; gap: 12px; margin-top: 26px; font-weight: 700; font-size: 17px; }
/* Schiebe-Hand (Tilo 10.11.): zeigt, dass man den Regler schieben kann; verschwindet beim ersten eigenen Versuch */
.schiebe-hand { position: absolute; left: calc(8% - 22px); top: calc(100% - 20px); width: 64px; height: 64px; pointer-events: none; z-index: 2; animation: schieben 2.6s ease-in-out infinite; transition: opacity .3s ease; }
.schiebe-hand svg { width: 100%; height: 100%; display: block; overflow: visible; }
.rechner-raster.benutzt .schiebe-hand { opacity: 0; }
.regler:has(.schiebe-hand) { margin-bottom: 40px; }
.rechner-raster.benutzt .regler:has(.schiebe-hand) { margin-bottom: 0; transition: margin .3s ease; }
@keyframes schieben { 0%, 100% { transform: translateX(0) rotate(-8deg); } 50% { transform: translateX(90px) rotate(8deg); } }
@media (prefers-reduced-motion: reduce) { .schiebe-hand { animation: none; } }
.regler > span { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.regler output { font-size: 22px; font-weight: 800; color: var(--orange); font-variant-numeric: tabular-nums; white-space: nowrap; }
.regler input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 10px; border-radius: 99px; cursor: pointer;
  background: linear-gradient(90deg, var(--orange) var(--wert, 10%), rgba(255, 255, 255, .16) var(--wert, 10%)); }
.regler input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; border-radius: 50%; background: var(--held-text); border: 4px solid var(--orange); box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .7); }
.regler input[type=range]::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: var(--held-text); border: 4px solid var(--orange); }
.rechner-ergebnis { background: var(--flaeche); color: var(--tinte); border-radius: 26px; padding: 30px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7); transform: rotate(1.2deg); display: grid; gap: 18px; }
.rechner-ergebnis .haupt { display: grid; gap: 4px; }
.rechner-ergebnis .haupt strong { font-size: clamp(64px, 8vw, 104px); line-height: .95; font-weight: 800; letter-spacing: -.04em; color: var(--orange-tief); font-variant-numeric: tabular-nums; }
.rechner-ergebnis .haupt span { font-size: 19px; font-weight: 700; }
.rechner-ergebnis ul { list-style: none; margin: 0; padding: 16px 0 0; border-top: 2px dashed var(--linie); display: grid; gap: 10px; }
.rechner-ergebnis li { font-size: 16.5px; color: var(--leise); display: flex; align-items: baseline; gap: 12px; }
.rechner-ergebnis li b { flex: none; min-width: 2.4ch; font-size: 24px; color: var(--tinte); font-variant-numeric: tabular-nums; }
.rechner-ergebnis .knopf { width: auto; justify-self: start; padding: 15px 22px; border-radius: 14px; }
.ploppt { animation: ploppen .35s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes ploppen { 50% { transform: scale(1.08); } }
@media (max-width: 900px) { .rechner-raster { grid-template-columns: minmax(0, 1fr); gap: 32px; } .rechner-ergebnis { transform: none; padding: 24px; } }

/* ---------- Abläufe zum Anklicken + Leistungen ---------- */
/* Abläufe mit Farbakzent je Ablauf (Tilo 10.11.: „zu einheitlich“): Gold, Waldgrün, Gold (Terrakotta passte nicht, Tilo 11.11.) */
.akzent-0 { --akzent: #E8B04B; --akzent-tief: #8A6414; }
.akzent-1 { --akzent: #2E8B63; --akzent-tief: #1F6B4A; }
.akzent-2 { --akzent: #E8B04B; --akzent-tief: #8A6414; }
@media (prefers-color-scheme: dark) { .akzent-0 { --akzent-tief: #F0BE5E; } .akzent-1 { --akzent-tief: #6FD3A0; } .akzent-2 { --akzent-tief: #F0BE5E; } }
.reiter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.reiter button { border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; font: 700 15.5px var(--text); padding: 8px 18px 8px 8px; border-radius: 999px;
  background: var(--flaeche); color: var(--tinte); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--akzent) 50%, transparent); transition: transform .15s ease; }
.reiter button:hover { transform: translateY(-2px); }
.reiter .ico { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--akzent) 22%, transparent); color: var(--akzent-tief); }
.reiter .ico svg { width: 17px; height: 17px; }
.reiter button[aria-selected="true"] { background: var(--akzent); color: #10291F; box-shadow: 0 10px 22px -12px var(--akzent); }
.reiter button[aria-selected="true"] .ico { background: rgba(255, 255, 255, .55); color: #10291F; }
.ablauf-tafel { position: relative; overflow: hidden; background: var(--flaeche); border-radius: 26px; padding: 34px 30px; border-top: 8px solid var(--akzent); box-shadow: 0 24px 50px -32px rgba(20, 48, 77, .45); }
.tafel-zeichen { position: absolute; right: -50px; bottom: -60px; width: 220px; height: 220px; color: var(--akzent); opacity: .09; pointer-events: none; }
.tafel-zeichen svg { width: 100%; height: 100%; }
.ablauf-tafel + .ablauf-tafel { margin-top: 18px; }
.js .ablauf-tafel + .ablauf-tafel { margin-top: 0; }
.ablauf-tafel h3 { position: relative; display: flex; align-items: center; gap: 12px; font-size: 24px; margin-bottom: 28px; }
.ablauf-tafel h3 .ico { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--akzent); color: #10291F; flex: none; }
.ablauf-tafel h3 .ico svg { width: 24px; height: 24px; }
.kette { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; position: relative; }
.kette::before { content: ""; position: absolute; left: 10%; right: 10%; top: 25px; height: 3px; border-radius: 2px; background: repeating-linear-gradient(90deg, var(--akzent) 0 8px, transparent 8px 14px); opacity: .8; }
.kette li { position: relative; display: grid; justify-items: center; gap: 12px; text-align: center; font-weight: 600; font-size: 15px; line-height: 1.3; }
.kette .knoten { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: color-mix(in srgb, var(--akzent) 24%, var(--flaeche)); color: var(--akzent-tief); font-weight: 800; font-size: 18px; animation: knoten 7.5s ease infinite both; --puls: var(--akzent); }
.kette li:nth-child(2) .knoten { animation-delay: 1.5s; } .kette li:nth-child(3) .knoten { animation-delay: 3s; }
.kette li:nth-child(4) .knoten { animation-delay: 4.5s; } .kette li:nth-child(5) .knoten { animation-delay: 6s; }
.kette li.freigabe .knoten { background: var(--held); color: var(--orange); }
.kette li.freigabe .knoten::after { content: ""; width: 18px; height: 10px; border: solid var(--orange); border-width: 0 0 3.5px 3.5px; transform: translateY(-2px) rotate(-45deg); }
.kette li.freigabe .knoten span { display: none; }
.beispiel-zeile { position: relative; margin-top: 26px; display: inline-flex; align-items: center; gap: 10px; background: color-mix(in srgb, var(--akzent) 22%, var(--flaeche)); color: var(--tinte); border-radius: 999px; padding: 9px 16px; font-weight: 700; font-size: 15px; }
.beispiel-zeile::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--akzent-tief); }
@keyframes knoten { 0% { transform: none; box-shadow: 0 0 0 0 transparent; } 6% { transform: translateY(-6px) scale(1.06); box-shadow: 0 0 0 8px color-mix(in srgb, var(--puls) 25%, transparent); } 16%, 100% { transform: none; box-shadow: 0 0 0 0 transparent; } }
@media (max-width: 860px) {
  .kette { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .kette::before { left: 25px; right: auto; top: 10px; bottom: 10px; width: 3px; height: auto; background: repeating-linear-gradient(180deg, var(--akzent) 0 8px, transparent 8px 14px); }
  .kette li { grid-template-columns: 52px minmax(0, 1fr); justify-items: start; align-items: center; text-align: left; gap: 16px; }
  .ablauf-tafel { padding: 26px 20px; }
}
.leist-kasten { margin-top: 72px; }
.leist-titel { display: grid; gap: 10px; font-size: clamp(26px, 3.4vw, 36px); line-height: 1.1; letter-spacing: -.02em; margin-bottom: 30px; }
.leist-titel .kennung { font-size: 13px; letter-spacing: .14em; }
.leistungen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 56px; }
.leistungen li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 18px; align-items: start; }
.leistungen .ico { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; transition: transform .2s ease; }
.leistungen li:hover .ico { transform: rotate(-8deg) scale(1.08); }
.leistungen .ico svg { width: 26px; height: 26px; }
.leistungen li:nth-child(4n+1) .ico { background: var(--blau-hell); color: var(--blau); }
.leistungen li:nth-child(4n+2) .ico { background: var(--tuerkis-hell); color: var(--tuerkis); }
.leistungen li:nth-child(4n+3) .ico { background: var(--orange-hell); color: var(--orange-tief); }
.leistungen li:nth-child(4n+4) .ico { background: var(--sonne-hell); color: #8A6414; }
.leistungen h4 { font-family: var(--display); font-weight: 800; font-size: 20px; margin: 4px 0 6px; }
.leistungen p { margin: 0; color: var(--leise); }
@media (max-width: 760px) { .leistungen { grid-template-columns: minmax(0, 1fr); gap: 24px; } .leist-kasten { margin-top: 56px; } }

/* ---------- Ehrenwort: was wir nicht tun (Strich wird gezogen, sobald die Liste ins Bild kommt) ---------- */
.nicht-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 56px; }
.nicht-liste li { display: grid; gap: 6px; align-content: start; }
.weg { position: relative; justify-self: start; font-family: var(--display); font-weight: 800; font-size: clamp(21px, 2.3vw, 26px); line-height: 1.2; letter-spacing: -.01em; }
/* Strich als Hintergrund je Zeile (box-decoration-break), damit er auch bei zweizeiligen Sätzen durch jede Zeile geht */
.weg s { text-decoration: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8 C20 4 34 9 52 6 C70 3 84 8 98 4' fill='none' stroke='%23C2463C' stroke-width='3.4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat 0 62% / 100% .5em; -webkit-box-decoration-break: clone; box-decoration-break: clone; padding-inline: 2px; }
.js .nicht-liste .weg s { background-size: 0% .5em; transition: background-size .55s cubic-bezier(.4, 0, .2, 1); transition-delay: calc(var(--i) * 140ms + 200ms); }
.js .nicht-liste.gesehen .weg s { background-size: 100% .5em; }
.nicht-liste p { margin: 0; color: var(--leise); max-width: 34em; }
@media (max-width: 760px) { .nicht-liste { grid-template-columns: minmax(0, 1fr); gap: 24px; } }

/* ---------- Vorgehen als Pfotenspur ---------- */
.schritte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; position: relative; }
.schritte::before { content: ""; position: absolute; left: 56px; right: calc((100% - 84px) / 4 - 10px); top: 16px; height: 26px; opacity: .55;
  background: var(--orange-tief);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 26'%3E%3Cg transform='rotate(90 13 13)'%3E%3Cellipse cx='13' cy='16' rx='6' ry='5'/%3E%3Ccircle cx='7' cy='9' r='2.3'/%3E%3Ccircle cx='11' cy='6.5' r='2.3'/%3E%3Ccircle cx='15.5' cy='6.5' r='2.3'/%3E%3Ccircle cx='19' cy='9' r='2.3'/%3E%3C/g%3E%3C/svg%3E") repeat-x 0 0 / 52px 26px;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 26'%3E%3Cg transform='rotate(90 13 13)'%3E%3Cellipse cx='13' cy='16' rx='6' ry='5'/%3E%3Ccircle cx='7' cy='9' r='2.3'/%3E%3Ccircle cx='11' cy='6.5' r='2.3'/%3E%3Ccircle cx='15.5' cy='6.5' r='2.3'/%3E%3Ccircle cx='19' cy='9' r='2.3'/%3E%3C/g%3E%3C/svg%3E") repeat-x 0 0 / 52px 26px; }
.schritte li { position: relative; display: grid; gap: 10px; align-content: start; }
.schritte .nr { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--flaeche); border: 3px solid var(--blau); font-weight: 800; font-size: 22px; color: var(--blau); font-variant-numeric: tabular-nums; }
.schritte li:nth-child(1) .nr, .schritte li:nth-child(2) .nr { border-color: var(--orange); color: var(--orange-tief); }
.schritte h3 { font-size: 19px; margin-top: 6px; }
.schritte p { margin: 0; color: var(--leise); font-size: 15.5px; }
.aufwand { margin-top: 36px; padding: 18px 22px; border-radius: 16px; background: var(--blau-hell); font-size: 17px; }
@media (max-width: 980px) {
  .schritte { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .schritte::before { left: 15px; right: auto; top: 60px; bottom: 0; width: 26px; height: auto;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 52'%3E%3Cg transform='rotate(180 13 13)'%3E%3Cellipse cx='13' cy='16' rx='6' ry='5'/%3E%3Ccircle cx='7' cy='9' r='2.3'/%3E%3Ccircle cx='11' cy='6.5' r='2.3'/%3E%3Ccircle cx='15.5' cy='6.5' r='2.3'/%3E%3Ccircle cx='19' cy='9' r='2.3'/%3E%3C/g%3E%3C/svg%3E") repeat-y 0 0 / 26px 52px;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 52'%3E%3Cg transform='rotate(180 13 13)'%3E%3Cellipse cx='13' cy='16' rx='6' ry='5'/%3E%3Ccircle cx='7' cy='9' r='2.3'/%3E%3Ccircle cx='11' cy='6.5' r='2.3'/%3E%3Ccircle cx='15.5' cy='6.5' r='2.3'/%3E%3Ccircle cx='19' cy='9' r='2.3'/%3E%3C/g%3E%3C/svg%3E") repeat-y 0 0 / 26px 52px; }
  .schritte li { grid-template-columns: 56px minmax(0, 1fr); column-gap: 18px; } .schritte .nr { grid-row: span 2; position: relative; z-index: 1; } .schritte h3 { margin-top: 14px; }
}

/* ---------- Schluss: Löwe schaut über die Visitenkarte und winkt ---------- */
.naechster { background: var(--orange-hell); }
.naechster .breite { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 48px; align-items: end; }
.naechster .ueber-titel h2 { font-size: clamp(34px, 5.2vw, 58px); }
.karte-mit-loewe { position: relative; padding-top: 152px; }
.winker { position: absolute; right: 24px; top: 0; width: 190px; height: auto; z-index: 0; }
/* Winken: eigener erhobener Arm mit Ellbogen nach außen, nur der Unterarm schwingt (Tilo 10.11.: Beugung war falsch herum) */
.winker .l-arm-r { display: none; } .winker .l-arm-hoch { display: inline; }
.winker .l-unterarm { transform-box: view-box; transform-origin: 184px 160px; animation: winken 5s ease-in-out infinite; }
.naechster:has(.knopf.orange:hover) .winker .l-unterarm, .karte-mit-loewe:hover .winker .l-unterarm { animation: winken-jetzt .8s ease-in-out infinite; }
@keyframes winken { 0%, 58%, 100% { transform: rotate(0deg); } 64% { transform: rotate(-16deg); } 70% { transform: rotate(14deg); } 76% { transform: rotate(-16deg); } 82% { transform: rotate(12deg); } 88% { transform: rotate(0deg); } }
@keyframes winken-jetzt { 0%, 100% { transform: rotate(-16deg); } 50% { transform: rotate(14deg); } }
.visitenkarte { position: relative; z-index: 1; font-style: normal; background: var(--flaeche); border-radius: 22px; padding: 26px; display: grid; gap: 6px; font-size: 16px; box-shadow: 0 24px 44px -28px rgba(20, 48, 77, .45); }
.visitenkarte .kennung { margin-bottom: 4px; }
.visitenkarte strong { font-family: var(--display); font-weight: 800; font-size: 22px; }
@media (max-width: 900px) { .naechster .breite { grid-template-columns: minmax(0, 1fr); gap: 24px; } }
@media (prefers-reduced-motion: reduce) { .winker .l-unterarm { animation: none !important; } }

.seitenfuss { padding-block: 28px 32px; font-size: 14px; color: var(--held-leise); background: var(--held); }
.seitenfuss .breite { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.seitenfuss a { color: var(--held-leise); }

/* ---------- 404 ---------- */
.fehler-seite { background: var(--held); color: var(--held-text); min-height: 100vh; }
.fehler-innen { min-height: 100vh; display: grid; place-items: center; align-content: center; gap: 14px; text-align: center; padding: 32px max(20px, env(safe-area-inset-left, 0px)); }
.fehler-innen .loewe { width: 220px; height: auto; margin-bottom: 8px; }
.fehler-innen h1 { font-size: clamp(30px, 5vw, 52px); line-height: 1.08; letter-spacing: -.02em; max-width: 16em; }
.fehler-innen p { margin: 0; color: var(--held-leise); font-size: 18px; }
.fehler-wege { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px; }
.fehler-wege .knopf { width: auto; padding: 14px 22px; }
.fehler-wege .knopf.rand { background: transparent; color: var(--held-text); border-color: rgba(247, 241, 227, .5); }

@media (prefers-reduced-motion: reduce) {
  .kette .knoten, .laufband ul, .t-dampf path { animation: none !important; }
  .laufband ul { flex-wrap: wrap; width: auto; } .laufband li.doppelt { display: none; } .laufband { mask-image: none; -webkit-mask-image: none; }
}

/* Handy: eigene Hochformat-Szene, die den Bildschirm füllt (Tilo 10.11.: unten ein Drittel leer) */
@media (max-width: 700px) {
  .tisch-svg.quer { display: none; }
  .tisch-svg.hoch { display: block; }
  .tisch-block.scrollt .tisch-raster { height: 100%; grid-template-rows: auto minmax(0, 1fr) auto auto auto; gap: 6px; align-content: stretch; }
  .tisch-block.scrollt .tisch-text { display: contents; }
  .tisch-block.scrollt .ueber-titel { grid-row: 1; margin-bottom: 0; }
  .tisch-block.scrollt .tisch-bild { grid-row: 2; min-height: 0; display: flex; align-items: center; justify-content: center; }
  .tisch-block.scrollt .tisch-bild { overflow: hidden; }
  /* Höhe an den Platz zwischen Überschrift und Zahl/Schalter binden, damit der Schalter auch bei 320 × 640 sichtbar bleibt */
  .tisch-block.scrollt .tisch-bild .tisch-svg.hoch { width: 100%; height: auto; max-height: calc(100svh - 68px - 270px); }
  .tisch-block.scrollt .tisch-zahl { grid-row: 3; }
  .tisch-block.scrollt .tisch-unter { grid-row: 4; margin-top: 0; }
  .tisch-block.scrollt .umschalter { grid-row: 5; margin-top: 4px; }
  .tisch-block.scrollt .vn-hinweis { display: none; }
  .tisch-block.scrollt .tisch-buehne { align-items: stretch; padding-block: 10px 14px; }
}