/* TwineBox für Schulen – Farben aus Simons Bildern: Magenta der Kiste, Gelb des Roboters */

@font-face { font-family: "Quicksand"; src: url("schrift/quicksand.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }

:root {
  color-scheme: light;
  --papier: #fbf8f4;
  --weiss: #ffffff;
  --tinte: #2a1d33;
  --grau: #6d6475;
  --linie: #e7dfe6;
  --magenta: #a9147f;
  --magenta-dunkel: #85105f;
  --magenta-hell: #f6e3ef;
  --gelb: #f5cd00;
  --gelb-hell: #fff6cc;
  --gruen: #2a9d3c;
  --rot: #c62f2f;
  --schatten: 0 1px 2px rgba(42, 29, 51, .06), 0 6px 18px -8px rgba(42, 29, 51, .22);
  --rund: 16px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papier); color: var(--tinte); font: 500 17px/1.5 "Quicksand", system-ui, -apple-system, "Segoe UI", sans-serif; }
img { max-width: 100%; }
a { color: var(--magenta); }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; font-weight: 700; }
p { margin: 0 0 .75em; }
:focus-visible { outline: 3px solid #1e6edc; outline-offset: 2px; border-radius: 6px; }
[hidden] { display: none !important; }
.versteckt { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.klein { font-size: 14px; color: var(--grau); }
.meldung { min-height: 1.5em; margin: .5em 0 0; color: var(--rot); font-weight: 600; }

/* ---------- Knöpfe und Symbole ---------- */

.icon { width: 20px; height: 20px; flex: none; }
.icon path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon--voll path { fill: currentColor; }

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .45em;
  padding: .6em 1.1em; border: 2px solid var(--magenta); border-radius: 12px;
  background: var(--magenta); color: #fff; font: inherit; font-weight: 700; text-decoration: none;
  cursor: pointer; transition: background .15s, transform .1s;
}
.knopf:hover { background: var(--magenta-dunkel); border-color: var(--magenta-dunkel); }
.knopf:active { transform: translateY(1px); }
.knopf:disabled { background: #d9cdd6; border-color: #d9cdd6; cursor: default; }
.knopf--gross { font-size: 19px; padding: .7em 1.3em; }
.knopf--klein { padding: .35em .8em; font-size: 15px; }
.knopf--leise { background: var(--weiss); color: var(--magenta); border-color: var(--linie); }
.knopf--leise:hover { background: var(--magenta-hell); border-color: var(--magenta-hell); }
.knopf--gefahr { background: var(--rot); border-color: var(--rot); }
.knopf--gefahr:hover { background: #a32424; border-color: #a32424; }

.zahl, .symbol {
  display: inline-flex; align-items: center; gap: .3em; padding: .35em .5em; border: 0; border-radius: 10px;
  background: none; color: var(--grau); font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
}
.zahl:hover, .symbol:hover { background: var(--magenta-hell); color: var(--magenta); }
.zahl:disabled { cursor: default; background: none; color: var(--grau); }
.zahl--an { color: var(--magenta); }
.symbol--gefahr:hover { background: #fbe5e5; color: var(--rot); }

.textfeld {
  width: 100%; padding: .6em .8em; border: 2px solid var(--linie); border-radius: 12px; background: var(--weiss);
  font: inherit; color: inherit;
}
.textfeld:focus { border-color: var(--magenta); outline: none; }
label { display: block; font-weight: 700; margin-bottom: .35em; }

.karte-weiss { background: var(--weiss); border-radius: 20px; box-shadow: var(--schatten); }

/* ---------- Startseite ---------- */

.start { position: relative; max-width: 640px; margin: 0 auto; padding: 20px 16px 24px; text-align: center; }
.start__logo { margin: 0 auto 6px; }
.start__logo img { width: 210px; display: block; margin: 0 auto; }

/* Links und rechts eine Twine-Geschichtenkarte als Verzierung, nur wo Platz ist */
@media (min-width: 1100px) {
  .start::before, .start::after {
    content: ""; position: absolute; top: 60px; width: min(300px, calc((100vw - 640px) / 2 - 40px)); aspect-ratio: 320 / 620;
    background: url("bilder/geschichtenkarte.svg") no-repeat center / contain; pointer-events: none;
  }
  .start::before { right: calc(100% + 24px); }
  .start::after { left: calc(100% + 24px); top: 140px; transform: scaleX(-1); }
}

/* Bühne: Sprechblase, Kiste, sechs Felder mit schlafenden Robotern */
.buehne { padding-top: 6px; background: radial-gradient(ellipse 260px 150px at 50% 52%, var(--gelb-hell), transparent 70%); }
/* Platz für eine längere Meldung reservieren, damit Kiste und Felder nicht springen */
.blasenplatz { display: flex; align-items: flex-end; justify-content: center; margin-bottom: 16px; }
.blase {
  position: relative; display: inline-block; max-width: 100%; margin: 0; padding: 10px 22px;
  border: 3px solid var(--tinte); border-radius: 22px; background: var(--weiss);
  font-size: 21px; font-weight: 700; line-height: 1.3;
}
.blase::before, .blase::after { content: ""; position: absolute; left: 50%; border-style: solid; border-color: transparent; }
.blase::before { top: calc(100% + 3px); margin-left: -12px; border-width: 14px 12px 0; border-top-color: var(--tinte); }
.blase::after { top: 100%; margin-left: -8px; border-width: 13px 8px 0; border-top-color: var(--weiss); }
/* Die drei Kistenbilder sind verschieden hoch: feste Fläche, unten ausgerichtet, damit nichts springt */
.buehne__kiste { width: 170px; height: 150px; display: block; margin: 0 auto; object-fit: contain; object-position: 50% 100%; }

.pinform { margin: 0; }
.ziffern { position: relative; display: flex; justify-content: center; gap: 10px; width: max-content; max-width: 100%; margin: 44px auto 0; }
.ziffer { position: relative; width: 58px; height: 70px; }
.ziffer__zahl {
  position: relative; z-index: 1; display: grid; place-items: center; width: 100%; height: 100%;
  border: 3px solid #d6c9d3; border-radius: 14px; background: var(--weiss); box-shadow: 0 4px 0 #e7dfe6;
  font-size: 36px; font-weight: 700; line-height: 1;
}
.ziffer--dran .ziffer__zahl { border-color: var(--magenta); }
.ziffer--dran .ziffer__zahl::after { content: ""; width: 3px; height: 34px; border-radius: 2px; background: var(--magenta); animation: blinken 1s steps(1) infinite; }
.ziffer--voll .ziffer__zahl { border-color: var(--tinte); animation: ploppen .18s ease-out; }
.ziffer__roboter {
  position: absolute; left: 50%; bottom: calc(100% - 18px); z-index: 0; width: 54px; max-width: none; margin-left: -27px;
  transform: translateY(12px); transition: transform .25s cubic-bezier(.3, 1.6, .5, 1);
}
.ziffer--wach .ziffer__roboter { transform: translateY(-6px); animation: huepfen .45s ease-out; }
.ziffern--jubel .ziffer__roboter { animation: jubeln .4s ease-in-out infinite alternate; }
.ziffern--jubel .ziffer:nth-child(even) .ziffer__roboter { animation-delay: .2s; }
.ziffern--verwirrt .ziffer__roboter { animation: verwirrt .6s ease-in-out; }
.ziffern__eingabe {
  position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; margin: 0; padding: 0; border: 0;
  opacity: 0; font-size: 16px; caret-color: transparent; cursor: text;
}
.pinform .knopf { margin-top: 20px; }
.umschalten {
  display: block; margin: 12px auto 0; padding: 4px 8px; border: 0; background: none; font: inherit; font-size: 15px; font-weight: 600;
  color: var(--grau); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.umschalten:hover { color: var(--magenta); }

/* Lehrperson mit Schlüssel: ein gewöhnliches Feld statt der sechs Felder */
.pinform--schluessel .ziffer { display: none; }
.pinform--schluessel .ziffern { width: min(340px, 100%); margin-top: 18px; }
.pinform--schluessel .ziffern__eingabe {
  position: static; opacity: 1; padding: .5em .8em; border: 3px solid #d6c9d3; border-radius: 14px; background: var(--weiss);
  font: 700 24px/1.2 "Quicksand", sans-serif; text-align: center; color: inherit; caret-color: auto;
}
.pinform--schluessel .ziffern__eingabe:focus { border-color: var(--magenta); outline: none; }

@keyframes blinken { 50% { opacity: 0; } }
@keyframes ploppen { 50% { transform: scale(1.08); } }
@keyframes huepfen { 0% { transform: translateY(12px); } 55% { transform: translateY(-18px); } 100% { transform: translateY(-6px); } }
@keyframes jubeln { from { transform: translateY(-6px) rotate(-6deg); } to { transform: translateY(-22px) rotate(6deg); } }
@keyframes verwirrt { 20% { transform: translateY(-6px) rotate(-14deg); } 45% { transform: translateY(-6px) rotate(12deg); } 70% { transform: translateY(-4px) rotate(-8deg); } }

.lehrpersonen { display: flex; align-items: center; gap: 20px; margin-top: 40px; padding: 18px 22px; text-align: left; }
.lehrpersonen__bild { width: 92px; flex: none; }
.lehrpersonen h2 { font-size: 20px; margin-bottom: .25em; }
.lehrpersonen p { color: var(--grau); }

.letzte { margin-top: 18px; }
.letzte h3 { font-size: 16px; color: var(--grau); }
.letzte__liste { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }

@media (max-width: 480px) {
  .start__logo img { width: 180px; }
  .buehne { background-image: radial-gradient(ellipse 150px 120px at 50% 52%, var(--gelb-hell), transparent 70%); }
  .blasenplatz { min-height: 72px; }
  .blase { font-size: 19px; padding: 8px 16px; }
  .buehne__kiste { width: 140px; height: 124px; }
  .ziffern { gap: 7px; margin-top: 40px; }
  .ziffer { width: 45px; height: 58px; }
  .ziffer__zahl { font-size: 30px; border-radius: 12px; }
  .ziffer__roboter { width: 46px; margin-left: -23px; }
  .lehrpersonen { flex-direction: column; text-align: center; gap: 8px; }
  .lehrpersonen__bild { width: 80px; }
  .letzte__liste { justify-content: center; }
}
.letzte__kiste {
  display: inline-flex; align-items: center; gap: .5em; padding: .4em .9em .4em .5em; border: 2px solid var(--linie); border-radius: 12px;
  background: var(--weiss); font: inherit; font-weight: 700; color: var(--tinte); cursor: pointer;
}
.letzte__kiste img { width: 34px; }
.letzte__kiste:hover { border-color: var(--magenta); }

/* ---------- Neue Kiste ---------- */

.neu { max-width: 560px; margin: 0 auto; padding: 16px 16px 40px; text-align: center; }
.neu__bild { width: 190px; display: block; margin: 8px auto 4px; }
.neu__form { text-align: left; margin-top: 16px; }
.neu__form .knopf { margin-top: 14px; width: 100%; }
.zurueck { display: inline-flex; align-items: center; gap: .3em; float: left; font-weight: 700; text-decoration: none; }

/* ---------- Kiste ---------- */

.kopf {
  position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  padding: 10px 16px; background: var(--weiss); border-bottom: 1px solid var(--linie);
}
.kopf__start img { width: 40px; display: block; }
.kopf__titel { flex: 1 1 200px; margin: 0; font-size: 22px; color: var(--magenta); }
.kopf__pin { display: inline-flex; align-items: baseline; gap: .4em; padding: .25em .8em; border-radius: 12px; background: var(--gelb-hell); border: 2px solid var(--gelb); }
.kopf__pin span { font-size: 14px; font-weight: 700; color: var(--grau); }
.kopf__pin strong { font-size: 22px; letter-spacing: .08em; }
.kopf__knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }

.kiste { max-width: 1280px; margin: 0 auto; padding: 20px 16px 32px; }
.hochladen { display: flex; margin: 4px auto 24px; }

.willkommen { margin: 0 auto 24px; max-width: 760px; padding: 18px 20px; border-radius: 20px; background: var(--gelb-hell); border: 2px solid var(--gelb); }
.willkommen__teile { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 24px; }
.willkommen .gross { font-size: 26px; font-weight: 700; margin: 0; }
.code { font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .04em; }

.leer { text-align: center; padding: 16px 0 8px; color: var(--grau); }
.leer img { width: 220px; display: block; margin: 0 auto 8px; }
.leer__titel { font-size: 20px; font-weight: 700; color: var(--tinte); }

.raster { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 28px 20px; }
.geschichte { display: flex; flex-direction: column; background: var(--weiss); border-radius: var(--rund); box-shadow: var(--schatten); margin-top: 14px; }
.geschichte__kopf { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 14px 0 8px; border-radius: var(--rund) var(--rund) 0 0; background: var(--magenta); color: #fff; }
.geschichte__avatar { width: 62px; height: auto; margin-top: -22px; margin-bottom: -6px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .18)); }
.geschichte__name { font-weight: 700; font-size: 18px; overflow-wrap: anywhere; }
.geschichte__inhalt { padding: 12px 14px 4px; flex: 1; }
.geschichte__titel { font-size: 18px; margin: 0 0 .2em; overflow-wrap: anywhere; }
.geschichte__zeit { font-size: 14px; color: var(--grau); margin: 0; }
.geschichte__knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; padding: 8px 10px 12px; }
.geschichte__knoepfe .knopf { margin-right: auto; }
.geschichte__lp { display: flex; gap: 4px; width: 100%; border-top: 1px solid var(--linie); padding-top: 6px; margin-top: 4px; }
.geschichte__lp .symbol { font-size: 14px; }

/* ---------- Lesen ---------- */

.lesen { display: grid; grid-template-rows: auto 1fr; height: 100vh; height: 100dvh; background: var(--weiss); }
.lesen--kommentare { grid-template-columns: 1fr minmax(300px, 380px); grid-template-rows: auto 1fr; }
.lesen__kopf { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 8px 12px; border-bottom: 1px solid var(--linie); background: var(--weiss); }
.lesen__titel { flex: 1 1 180px; display: flex; flex-direction: column; line-height: 1.25; }
.lesen__titel strong { font-size: 18px; }
.lesen__titel span { color: var(--grau); font-size: 14px; }
.lesen__knoepfe { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.lesen__flaeche { position: relative; min-height: 0; overflow: auto; }
.lesen__flaeche--karte { padding: 16px; background: #f3f6fa; }
.lesen__spiel { display: block; width: 100%; height: 100%; border: 0; background: #000; }

.kommentare { display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--linie); background: var(--papier); }
.kommentare h2 { font-size: 18px; padding: 14px 16px 0; }
.kommentare__liste { list-style: none; margin: 0; padding: 0 16px; overflow: auto; flex: 1; }
.kommentar { position: relative; padding: 10px 36px 10px 12px; margin-bottom: 8px; background: var(--weiss); border-radius: 12px; box-shadow: var(--schatten); }
.kommentar--leer { color: var(--grau); box-shadow: none; background: none; padding-left: 0; }
.kommentar__zeit { font-size: 13px; color: var(--grau); margin: 0 0 .2em; }
.kommentar__text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.kommentar .symbol { position: absolute; top: 6px; right: 4px; }
.kommentare__form { padding: 12px 16px 16px; border-top: 1px solid var(--linie); display: grid; gap: 8px; }
.kommentare__form .knopf { justify-self: end; }

/* ---------- Karte der Passagen ---------- */

.karte-aussen { position: relative; overflow: hidden; }
.karte {
  position: relative; transform-origin: 0 0;
  background-color: #fff;
  background-image: linear-gradient(#e9eef5 1px, transparent 1px), linear-gradient(90deg, #e9eef5 1px, transparent 1px);
  background-size: 25px 25px; border-radius: 8px;
}
.karte__pfeile { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
.karte__pfeil { fill: none; stroke: #7a8696; stroke-width: 1.6; }
.karte__spitze { fill: #7a8696; }
.karte__passage {
  position: absolute; display: flex; flex-direction: column; gap: 2px; overflow: hidden; padding: 6px 7px; text-align: left;
  background: #fff; border: 1px solid #c8d1dd; border-radius: 4px; box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
  font: 500 11px/1.3 "Quicksand", sans-serif; color: var(--tinte); cursor: pointer;
}
.karte__passage:hover { background: #fcefe2; }
.karte__passage--start { border-color: var(--gruen); border-top: 5px solid var(--gruen); box-shadow: 0 0 0 1px rgba(42, 157, 60, .35); }
.karte__name { font-weight: 700; font-size: 12px; overflow-wrap: break-word; hyphens: auto; }
.karte__auszug { flex: 1; min-height: 0; color: #7a7480; overflow: hidden; -webkit-mask-image: linear-gradient(#000 65%, transparent); mask-image: linear-gradient(#000 65%, transparent); }

/* ---------- Dialoge ---------- */

.dialog { width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 28px 24px 22px; border: 0; border-radius: 22px; background: var(--weiss); color: var(--tinte); box-shadow: 0 20px 60px -20px rgba(42, 29, 51, .5); }
.dialog::backdrop { background: rgba(42, 29, 51, .45); }
.dialog h2 { font-size: 22px; padding-right: 32px; }
.dialog__zu { position: absolute; top: 12px; right: 12px; padding: 6px; border: 0; border-radius: 10px; background: none; color: var(--grau); cursor: pointer; }
.dialog__zu:hover { background: var(--magenta-hell); color: var(--magenta); }
.dialog__knoepfe { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-top: 16px; }
.dialog hr { border: 0; border-top: 1px solid var(--linie); margin: 18px 0; }

.dialog--tafel { width: min(900px, calc(100vw - 24px)); text-align: center; padding: 40px 24px; }
.tafel__text { font-size: clamp(20px, 3vw, 30px); margin: 0; color: var(--grau); }
.tafel__adresse { font-size: clamp(24px, 5vw, 52px); font-weight: 700; margin: .1em 0 .5em; overflow-wrap: anywhere; }
.tafel__pin { font-size: clamp(64px, 16vw, 170px); font-weight: 700; letter-spacing: .1em; line-height: 1; margin: .15em 0 0; color: var(--magenta); }

.schluessel { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.schluessel code { font-size: 26px; font-weight: 700; padding: .15em .5em; background: var(--gelb-hell); border-radius: 10px; }

.dialog--hilfe { text-align: left; padding-top: 44px; }
.hilfe__bild img { display: block; width: 100%; border-radius: 12px; margin-bottom: 4px; }
.hilfe__schritte { padding-left: 1.3em; }
.hilfe__schritte li { margin-bottom: .35em; }

.dialog--code { width: min(760px, calc(100vw - 24px)); }
.code { white-space: pre-wrap; overflow-wrap: anywhere; }
pre.code { margin: 0; padding: 14px; background: #f5f2f6; border-radius: 12px; font-size: 14px; line-height: 1.5; max-height: 60vh; overflow: auto; }

/* ---------- Hochladen ---------- */

.ablage {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 16px; margin: 6px 0 14px;
  border: 3px dashed #d7b7cc; border-radius: 18px; text-align: center; cursor: pointer; font-weight: 700;
}
.ablage img { width: 84px; }
.ablage:hover, .ablage--drueber { border-color: var(--gruen); background: #effaf1; }
.ablage__text { font-size: 19px; }
.video summary { cursor: pointer; color: var(--magenta); font-weight: 700; }
.video video { width: 100%; margin-top: 10px; border-radius: 12px; background: #000; }
.chip { display: inline-block; padding: .3em .9em; border-radius: 999px; background: var(--magenta-hell); color: var(--magenta); font-weight: 700; }
.wer .knopf { width: 100%; margin-top: 12px; }
.archiv { list-style: none; padding: 0; display: grid; gap: 8px; }
.archiv .knopf { width: 100%; justify-content: flex-start; }
.ergebnis { text-align: center; padding: 10px 0; }
.ergebnis img { width: 130px; display: block; margin: 0 auto 10px; }
.ergebnis p { font-size: 20px; font-weight: 700; }
.ergebnis--gut img { animation: zoomen .5s ease-out; }

/* ---------- Fuss, Meldungen, Bewegung ---------- */

.fuss { display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center; align-items: center; padding: 18px 16px 28px; color: var(--grau); font-size: 14px; }
.fuss__hilfe { display: inline-flex; align-items: center; gap: .3em; border: 0; background: none; font: inherit; font-weight: 700; color: var(--magenta); cursor: pointer; }
.fuss__team { padding: 4px 8px; font-size: 18px; line-height: 1; color: #ece5ea; text-decoration: none; }
.fuss__team:hover, .fuss__team:focus-visible { color: var(--grau); }
.traeger { display: inline-flex; align-items: center; gap: .6em; font-weight: 700; color: var(--tinte); text-decoration: none; }
.traeger:hover { color: var(--magenta); text-decoration: underline; }
.traeger img { display: block; height: 45px; width: auto; }
.fuss .traeger img { height: 32px; }
.dialog--hilfe .traeger { margin-top: 4px; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 50; padding: 10px 18px; border-radius: 12px; background: var(--tinte); color: #fff; font-weight: 600; box-shadow: var(--schatten); }

.schuetteln { animation: schuetteln .5s; }
.wackeln { animation: wackeln .5s; }
@keyframes schuetteln { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
@keyframes wackeln { 30% { transform: scale(1.08) rotate(-3deg); } 60% { transform: scale(1.08) rotate(3deg); } }
@keyframes zoomen { from { transform: scale(.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

@media (max-width: 760px) {
  .lesen--kommentare { grid-template-columns: 1fr; grid-template-rows: auto minmax(45vh, 1fr) auto; height: auto; min-height: 100dvh; }
  .lesen--kommentare .lesen__spiel { min-height: 45vh; }
  .kommentare { border-left: 0; border-top: 1px solid var(--linie); }
  .kopf__titel { font-size: 19px; }
  .kopf__knoepfe .knopf { font-size: 15px; padding: .4em .8em; }
}

/* ---------- Einbettung (Twine-Embed) ---------- */

.einbettung { margin: 0; height: 100vh; display: flex; flex-direction: column; background: #f3f6fa; }
.einbettung__leiste { display: flex; gap: 4px; padding: 4px 6px; font-size: 14px; }
.einbettung__karte { flex: 1; min-height: 0; padding: 4px 8px 8px; overflow: auto; color: var(--grau); }
.umwandeln { text-align: left; }
.umwandeln h1, .umwandeln > p { text-align: center; }
.umwandeln__hand { width: 110px; transform: scaleY(-1); }
.umwandeln__vorschau { overflow: auto; padding: 8px; background: #fff; border-radius: 12px; box-shadow: var(--schatten); }
.umwandeln__vorschau iframe { border: 0; max-width: 100%; }