/* Chiffriermaschine: dunkler Schreibtisch, Geräte aus Stahl und Bakelit,
   rote Highlights (#FF2D2D), Schrift in Weiß und Hellgrau.
   Nur Systemschriften, nichts wird nachgeladen. */

:root {
  --grund: #0d0d0f;
  --flaeche: #161618;
  --blatt: #1c1c20;
  --linie: #3b3b43;
  --text: #ececef;
  --text-weich: #a8a8b2;
  --rot: #ff2d2d;
  --rot-dunkel: #b81818;
  --rot-tint: rgba(255, 45, 45, .16);
  --auf-rot: #1a0606; /* Schrift auf rotem Grund */
  --silber: #c3c3cc;
  --silber-dunkel: #71717b;
  --schwarz: #0a0a0b;

  --ui: Bahnschrift, "DIN Alternate", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --maschine: "Courier Prime", "Courier New", Courier, monospace;
  --schraube: #8e8e98 0 3.5px, #111 4px 5px, transparent 5.5px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--ui);
  line-height: 1.5;
  color: var(--text);
  background-color: var(--grund);
  background-image:
    linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
}

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

.sprung { position: absolute; left: -999px; top: 0; background: var(--blatt); color: var(--text); padding: .5rem 1rem; z-index: 10; }
.sprung:focus { left: 1rem; top: 1rem; }
.versteckt { position: fixed; opacity: 0; pointer-events: none; }
.ohne-js { max-width: 40rem; margin: 2rem auto; padding: 1rem; background: var(--blatt); border: 1px solid var(--linie); }

/* ---------- Kopf ---------- */
.kopf { max-width: 72rem; margin: 0 auto; padding: 2.5rem 1rem 1.5rem; }
.kopf h1 {
  margin: 0;
  font-size: clamp(2.1rem, 9.5vw, 5rem);
  font-weight: 800;
  font-stretch: 75%;
  line-height: 1;
  letter-spacing: .01em;
  color: #fff;
  /* Schablonenschnitt quer durch die Buchstaben, wie auf Gerätekisten */
  -webkit-mask-image: linear-gradient(#000 0 57%, transparent 57% 62%, #000 62%);
  mask-image: linear-gradient(#000 0 57%, transparent 57% 62%, #000 62%);
}
.kopf p { margin: .9rem 0 0; max-width: 44rem; color: var(--text-weich); }

/* ---------- Karteikasten ---------- */
.rahmen { max-width: 72rem; margin: 0 auto; padding: 0 1rem 2rem; }

/* Der gewählte Reiter ragt 1px über den Rand, um die Linie des Tisches zu überdecken.
   Dafür ist unten 1px Platz (und der Tisch rückt 1px hoch), sonst entsteht eine senkrechte Scrollleiste. */
.reiter { display: flex; align-items: flex-end; gap: .25rem; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; padding: .4rem 0 1px; margin-bottom: -1px; }
.reiter-knopf {
  flex: 1 1 0;
  min-width: 7.6rem;
  display: flex; flex-direction: column;
  text-align: left;
  font: inherit;
  color: var(--text);
  background: #1b1b1e;
  border: 1px solid var(--linie);
  border-bottom: 0;
  border-radius: .5rem .5rem 0 0;
  padding: .5rem .9rem .45rem;
  cursor: pointer;
}
.reiter-knopf:hover { background: #242428; }
.reiter-knopf .r-name { font-weight: 700; font-size: 1.05rem; line-height: 1.25; }
.reiter-knopf .r-kurz { font-size: .8rem; color: var(--text-weich); }
.reiter-knopf[aria-selected="true"] {
  position: relative; z-index: 1;
  margin-bottom: -1px;
  padding-top: .75rem;
  background: var(--flaeche);
  border-top: 4px solid var(--rot);
}

.tisch {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  padding: clamp(1rem, 3vw, 1.75rem);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 0 .5rem .5rem .5rem;
}

.vorstellung h2 { margin: 0 0 .35rem; font-size: 1.7rem; line-height: 1.2; color: #fff; }
.vorstellung p { margin: 0; max-width: 66ch; color: var(--text-weich); }

/* ---------- Geräte ---------- */
.geraet {
  --g1: #3a3a42; --g2: #2a2a30; --g3: #1b1b1f;
  position: relative;
  padding: clamp(1.1rem, 3vw, 2rem);
  border-radius: .6rem;
  color: var(--text);
  background:
    radial-gradient(circle at 14px 14px, var(--schraube)),
    radial-gradient(circle at calc(100% - 14px) 14px, var(--schraube)),
    radial-gradient(circle at 14px calc(100% - 14px), var(--schraube)),
    radial-gradient(circle at calc(100% - 14px) calc(100% - 14px), var(--schraube)),
    linear-gradient(180deg, var(--g1), var(--g2) 35%, var(--g3));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 0 1px rgba(255, 255, 255, .06), 0 3px 0 #000, 0 18px 26px -14px #000;
}
.geraet-enigma, .geraet-playfair { --g1: #3b3937; --g2: #2a2927; --g3: #1b1a19; }
.geraet-vigenere { --g1: #353a3d; --g2: #272b2e; --g3: #1a1d1f; }

.geraet-hinweis { margin: 0; max-width: 58ch; text-align: center; font-size: .875rem; color: var(--text-weich); }

.knopf {
  font: inherit; font-weight: 600;
  min-height: 2.5rem;
  padding: .45rem .95rem;
  color: var(--text);
  background: transparent;
  border: 1.5px solid var(--silber-dunkel);
  border-radius: .3rem;
  cursor: pointer;
}
.knopf:hover { background: rgba(255, 255, 255, .08); border-color: var(--silber); }
.knopf:active { background: var(--rot); border-color: var(--rot); color: var(--auf-rot); }
.klein-knopf { min-height: 2.25rem; padding: .3rem .75rem; font-size: .875rem; }

/* --- Enigma --- */
.geraet-enigma { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.4rem; justify-items: center; container-type: inline-size; }
.reihe { display: flex; justify-content: center; gap: clamp(.25rem, 1.2vw, .6rem); }

.en-fenster {
  display: flex; align-items: stretch; gap: clamp(.4rem, 2vw, 1.1rem);
  padding: .8rem clamp(.6rem, 2vw, 1.2rem);
  background: var(--schwarz);
  border-radius: .5rem;
  box-shadow: inset 0 3px 8px #000, 0 1px 0 rgba(255, 255, 255, .1);
}
.ukw-platte { display: grid; align-content: center; justify-items: center; gap: .1rem; padding-right: clamp(.4rem, 2vw, 1rem); border-right: 1px solid var(--linie); font-size: .75rem; color: var(--text-weich); }
.ukw-name { font-size: 1.9rem; line-height: 1; color: var(--silber); }
.fenster { display: grid; justify-items: center; gap: .2rem; width: clamp(3.3rem, 12vw, 4.8rem); }
.fenster .seite, .fenster .walzenname { font-size: .75rem; color: var(--text-weich); white-space: nowrap; }
.scheibe {
  overflow: hidden; width: 100%; height: 4.6rem;
  display: grid; grid-template-rows: 1fr 1.7fr 1fr; place-items: center;
  background: linear-gradient(#050506, #1f1f23 50%, #050506);
  border: 2px solid var(--silber-dunkel); border-radius: .3rem;
  font-weight: 700;
}
.scheibe .nach, .scheibe .vor { font-size: .95rem; color: rgba(236, 236, 239, .4); }
.scheibe .jetzt { font-size: 2rem; line-height: 1; color: var(--rot); }
.scheibe.tick > span { animation: tick .14s ease-out; }
@keyframes tick { from { transform: translateY(40%); opacity: .5; } to { transform: none; opacity: 1; } }
.dreh {
  width: 100%; height: 1.5rem; padding: 0;
  font-size: .7rem; line-height: 1;
  color: var(--silber); background: transparent;
  border: 1px solid var(--silber-dunkel); border-radius: .25rem;
  cursor: pointer;
}
.dreh:hover { background: rgba(255, 255, 255, .1); }

.lampfeld, .tastatur {
  display: grid; gap: clamp(.25rem, 1.2vw, .6rem);
  --t: clamp(1.7rem, 7.4vw, 3.1rem);
  --t: clamp(1.7rem, calc((100cqw - 2.4rem) / 9.4), 3.1rem); /* passt sich der Breite des Geräts an */
}
.lampe {
  display: grid; place-items: center;
  width: var(--t); height: var(--t);
  border-radius: 50%;
  font-size: calc(var(--t) * .42);
  color: #7b7b86;
  background: radial-gradient(circle at 50% 35%, #34343a, #0c0c0e);
  border: 2px solid #4d4d55;
  transition: box-shadow .08s, background .08s;
}
.lampe b { font-weight: 700; }
.lampe.an {
  color: var(--auf-rot);
  background: radial-gradient(circle, #ffb3b3, var(--rot) 55%, #b30f0f);
  border-color: #ff9a9a;
  box-shadow: 0 0 .9rem .25rem rgba(255, 45, 45, .85), 0 0 2.4rem .6rem rgba(255, 45, 45, .38);
}
.taste {
  width: var(--t); height: var(--t); padding: 0;
  display: grid; place-items: center;
  font: inherit; font-size: calc(var(--t) * .42); font-weight: 700;
  color: #f0f0f3;
  background: radial-gradient(circle at 50% 30%, #4e4e57, #151518);
  border: 3px solid var(--silber); border-radius: 50%;
  box-shadow: 0 3px 0 #000, 0 6px 7px rgba(0, 0, 0, .55);
  cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none;
}
.taste.unten { transform: translateY(3px); box-shadow: 0 0 0 #000, 0 1px 2px rgba(0, 0, 0, .55); }

.stromweg { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem; margin: 0; padding: 0; list-style: none; }
.stromweg li {
  min-width: 2.7rem; padding: .2rem .25rem .15rem; text-align: center;
  background: var(--schwarz); border-radius: .3rem; border-bottom: 3px solid transparent;
}
.stromweg b { display: block; font-size: 1.2rem; line-height: 1.2; color: #fff; }
.stromweg i { display: block; font-style: normal; font-size: .65rem; color: var(--text-weich); }
.stromweg .hin { border-bottom-color: var(--silber-dunkel); }
.stromweg .rueck { border-bottom-color: var(--rot); }
.stromweg .mitte { background: var(--rot); }
.stromweg .mitte b { color: var(--auf-rot); }
.stromweg .mitte i { color: #4d0d0d; }
.stromweg .weg-leer { width: 100%; min-width: 0; padding: .55rem; background: transparent; font-size: .875rem; color: var(--text-weich); border: 0; }

.band { width: 100%; max-width: 46rem; display: grid; grid-template-columns: 4.2rem minmax(0, 1fr); color: var(--text); background: var(--schwarz); border: 1px solid #2c2c32; border-radius: 2px; box-shadow: 0 2px 0 #000; }
.band-etiketten { display: grid; align-content: center; padding: .4rem .5rem; font-size: .75rem; line-height: 1.7rem; color: var(--text-weich); border-right: 1px dashed #55555d; }
.band-etiketten span { height: 1.7rem; }
.band-inhalt { overflow-x: auto; padding: .4rem .7rem; font-family: var(--maschine); font-size: 1.1rem; letter-spacing: .14em; white-space: pre; scrollbar-width: thin; }
.bandzeile { height: 1.7rem; line-height: 1.7rem; }
.bandzeile + .bandzeile { color: var(--rot); font-weight: 700; }
.en-aktionen { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }

/* --- Caesar --- */
.cs-layout { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 1rem; min-width: 0; }
.scheibe-svg { width: min(100%, 25rem); height: auto; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; font-family: var(--ui); }
.scheibe-svg.zieht { cursor: grabbing; }
.scheibe-svg:focus-visible { outline-offset: 4px; border-radius: 50%; }
.rand { fill: var(--schwarz); stroke: var(--silber-dunkel); stroke-width: 3; }
.ring-aussen { fill: none; stroke: #2f2f36; stroke-width: 44; }
.bu-aussen { fill: #ececef; font-size: 22px; font-weight: 700; }
.ring-innen { transform-origin: 200px 200px; transition: transform .5s cubic-bezier(.3, .7, .2, 1); }
.zieht .ring-innen { transition: none; }
.ring-innen circle { fill: none; stroke: #131315; stroke-width: 40; }
.bu-innen { fill: var(--rot); font-size: 20px; font-weight: 700; }
.nabe { fill: #0f0f11; stroke: var(--silber-dunkel); stroke-width: 2; }
.nabe-zahl { fill: #fff; font-size: 54px; font-weight: 800; }
.nabe-text { fill: var(--text-weich); font-size: 13px; }
.marke { fill: var(--rot); }
.zuordnung { display: grid; gap: .15rem; max-width: 100%; overflow-x: auto; font-family: var(--maschine); font-size: .95rem; scrollbar-width: thin; }
.zl-label { margin-top: .35rem; font-family: var(--ui); font-size: .75rem; color: var(--text-weich); }
.zuordnung-zeile { display: flex; }
.zuordnung-zeile span { width: 1.3em; text-align: center; }
.zuordnung-zeile:last-child { color: var(--rot); font-weight: 700; }

/* --- Vigenère --- */
.vg-layout { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.vg-rechts { display: grid; gap: .9rem; min-width: 0; }
.qz {
  --c: 1.15rem;
  display: grid; grid-template-columns: repeat(27, var(--c));
  font-family: var(--maschine); font-size: .66rem; font-weight: 700;
  background: rgba(0, 0, 0, .4); padding: .3rem; border-radius: .3rem;
}
.qz span { height: var(--c); display: grid; place-items: center; color: rgba(236, 236, 239, .5); }
.qz .qk { color: var(--silber); }
.qz .qk.wort { background: var(--rot-tint); color: #fff; }
.qz .qb { background: rgba(255, 45, 45, .13); color: var(--text); }
.qz .qk.aktiv { background: var(--rot); color: var(--auf-rot); }
.qz .treffer { background: var(--rot); color: var(--auf-rot); outline: 2px solid #fff; outline-offset: 1px; position: relative; z-index: 1; }
.arbeitsblatt { display: flex; gap: .1rem; overflow-x: auto; padding: .5rem .6rem; color: var(--text); background: var(--schwarz); border: 1px solid #2c2c32; border-radius: 2px; font-family: var(--maschine); font-size: 1.1rem; scrollbar-width: thin; }
.az-spalte, .spalte { display: grid; grid-template-rows: repeat(3, 2rem); align-items: center; }
.az-spalte { padding-right: .6rem; margin-right: .3rem; font-family: var(--ui); font-size: .75rem; color: var(--text-weich); border-right: 1px dashed #55555d; white-space: nowrap; }
.spalte { padding: 0 .1rem; font: inherit; text-align: center; color: inherit; background: transparent; border: 0; border-radius: 2px; cursor: pointer; }
.spalte b { font-weight: 700; min-width: 1.5rem; }
.spalte .schl { color: var(--text-weich); font-weight: 400; }
.spalte .erg { color: var(--rot); }
.spalte.gewaehlt { background: var(--rot-tint); }

/* --- Playfair --- */
.pf-layout { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.pf-rechts { display: grid; gap: .9rem; min-width: 0; }
.gitter5 { --k: clamp(2.6rem, 11vw, 3.7rem); display: grid; grid-template-columns: repeat(5, var(--k)); gap: .35rem; padding: .6rem; background: var(--schwarz); border-radius: .4rem; box-shadow: inset 0 3px 8px #000; }
.kachel { height: var(--k); display: grid; place-items: center; font-size: calc(var(--k) * .45); font-weight: 800; color: var(--text); background: #2c2c32; border-radius: .25rem; box-shadow: 0 2px 0 #000; }
.kachel.wort { background: #4a1d1f; color: #fff; }
.kachel.a { box-shadow: 0 0 0 3px var(--rot), 0 2px 0 #000; }
.kachel.b { box-shadow: 0 0 0 3px #fff, 0 2px 0 #000; }
.paare { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.paare li { width: 4.4rem; padding: .3rem .2rem .25rem; text-align: center; color: var(--text); background: var(--schwarz); border: 1px solid #2c2c32; border-radius: .25rem; font-family: var(--maschine); cursor: pointer; }
.paare li.gewaehlt { outline: 3px solid var(--rot); outline-offset: 1px; }
.paare b { display: block; font-size: 1.25rem; line-height: 1.5; letter-spacing: .12em; }
.paare .erg { color: var(--rot); border-top: 1px dashed #55555d; }
.paare i { display: block; font-family: var(--ui); font-style: normal; font-size: .68rem; line-height: 1.3; color: var(--text-weich); }

/* --- Skytale --- */
.sk-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem; min-width: 0; }
.sk-titel { margin: .3rem 0 0; font-size: .9rem; color: var(--text-weich); }
.stab { position: relative; padding: 0 1.4rem; }
.stab::before, .stab::after { content: ""; position: absolute; top: -.25rem; bottom: -.25rem; width: 1.5rem; background: linear-gradient(90deg, #5d5d68, #d4d4dc 45%, #5d5d68); border-radius: .35rem; }
.stab::before { left: 0; }
.stab::after { right: 0; }
.stab-raster {
  display: grid; grid-template-columns: repeat(var(--sp, 1), 1.6rem); max-height: 18rem; overflow: auto;
  background: linear-gradient(180deg, #1c1c20, #45454e 25%, #5b5b66 50%, #45454e 75%, #1c1c20);
  scrollbar-width: thin;
}
.zelle { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; font-family: var(--maschine); font-size: 1.05rem; font-weight: 700; color: #f4f4f6; text-shadow: 0 1px 1px rgba(0, 0, 0, .6); }
.stab-raster .zelle.an { background: rgba(255, 45, 45, .6); }
.streifen { display: flex; gap: .25rem; overflow-x: auto; padding: .4rem .5rem; color: var(--rot); background: var(--schwarz); border: 1px solid #2c2c32; border-radius: 2px; scrollbar-width: thin; }
.streifen .windung { display: inline-flex; flex: none; padding-right: .25rem; border-right: 2px solid #55555d; }
.streifen .windung:last-child { border-right: 0; }
.streifen .zelle { width: 1.15rem; color: var(--rot); text-shadow: none; }
.streifen .windung.an { background: var(--rot-tint); }

/* ---------- Arbeitsbereich ---------- */
.arbeit { display: grid; grid-template-columns: minmax(0, 27rem) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.blatt {
  padding: clamp(1rem, 3vw, 1.5rem);
  background: var(--blatt);
  border: 1px solid var(--linie);
  box-shadow: 4px 4px 0 #000;
}
.blatt h2 { display: inline-block; margin: 0 0 1rem; padding-bottom: .3rem; font-size: 1.3rem; line-height: 1.2; color: #fff; border-bottom: 3px solid var(--rot); }
.blatt h3 { margin: 0; font-size: 1.05rem; color: #fff; }

input, select, textarea {
  font: inherit; color: var(--text);
  background: #101012; border: 1.5px solid #4a4a52; border-radius: 3px;
  padding: .45rem .6rem;
}
input::placeholder, textarea::placeholder { color: var(--text-weich); opacity: 1; }
select { max-width: 100%; }
option { background: #1c1c20; color: var(--text); }
input[type="number"] { width: 4.6rem; padding-right: .3rem; }
label { font-weight: 600; }
.klein { margin: .45rem 0 0; max-width: 64ch; font-size: .875rem; color: var(--text-weich); }
.status { min-height: 1.5em; margin: .6rem 0 0; font-weight: 600; color: var(--text); }
.status.fehler, .fehler { color: var(--rot); }

.controls { display: grid; gap: 1.1rem; }
.feld-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; }
.feld-spalte { display: grid; gap: .4rem; }
.feld-spalte .klein { margin: 0; }
.knoepfe { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }
.controls .knoepfe { margin-top: 0; }

.ukw-wahl { display: flex; align-items: center; gap: .7rem; }
.walzentafel { display: grid; grid-template-columns: minmax(5.2rem, 7rem) repeat(3, minmax(0, 1fr)); gap: .5rem; align-items: center; }
.tafel-kopf { font-weight: 700; font-size: .875rem; }
.tafel-label { font-size: .875rem; font-weight: 600; }
.walzentafel select { width: 100%; padding-inline: .4rem; }
.walzentafel input[type="number"] { width: 3.9rem; }
.vg-rechts .geraet-hinweis, .pf-rechts .geraet-hinweis, .sk-layout .geraet-hinweis { text-align: left; }
.zahl { display: flex; align-items: center; gap: .35rem; }
.bu { min-width: 1.1rem; font-family: var(--maschine); font-size: 1.15rem; color: var(--rot); }

.steckbrett { display: grid; gap: .5rem; }
.buchsen { display: grid; gap: .35rem; padding: .7rem .4rem; background: var(--schwarz); border: 1px solid #2c2c32; border-radius: .4rem; --b: clamp(1.8rem, 8.6vw, 2.2rem); }
.buchsen .reihe { gap: clamp(.15rem, 1vw, .3rem); }
.buchse {
  position: relative; width: var(--b); height: var(--b); padding: 0;
  font: inherit; font-weight: 700; font-size: .95rem; color: var(--text);
  background: radial-gradient(circle at 50% 40%, #2a2a30, #0c0c0e);
  border: 3px solid #5a5a63; border-radius: 50%;
  cursor: pointer; touch-action: manipulation;
}
.buchse i { position: absolute; right: -.1rem; bottom: -.15rem; font-style: normal; font-size: .62rem; line-height: 1; padding: .1rem .15rem; border-radius: .6rem; background: #0c0c0e; }
.buchse.belegt { border-color: var(--kabel); }
.buchse.belegt i { color: var(--kabel); }
.buchse.gewaehlt { border-color: var(--rot); box-shadow: 0 0 0 3px rgba(255, 45, 45, .45); }
.k0 { --kabel: #ff7a6b; } .k1 { --kabel: #5aa0ff; } .k2 { --kabel: #4fd18b; } .k3 { --kabel: #ffa94d; } .k4 { --kabel: #e072d0; }
.k5 { --kabel: #3fd0d0; } .k6 { --kabel: #e6c84a; } .k7 { --kabel: #ff9fc0; } .k8 { --kabel: #9fb2d6; } .k9 { --kabel: #c98b5a; }
.steck-zeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.steck-zeile .klein { margin: 0; }

.code-zeile { margin-top: 1.4rem; padding-top: 1rem; border-top: 1px dashed #55555d; display: grid; }
.code-zeile input { width: 100%; margin-top: .35rem; font-family: var(--maschine); font-size: 1rem; }

.modus { display: flex; margin-bottom: 1rem; }
.modus button {
  flex: 1; min-height: 2.75rem; padding: .5rem .8rem;
  font: inherit; font-weight: 700; color: var(--text); background: transparent;
  border: 1.5px solid var(--silber-dunkel); cursor: pointer;
}
.modus button:first-child { border-radius: .3rem 0 0 .3rem; }
.modus button:last-child { border-radius: 0 .3rem .3rem 0; margin-left: -1.5px; }
.modus button:hover { background: rgba(255, 255, 255, .08); }
.modus button[aria-pressed="true"] { color: var(--auf-rot); background: var(--rot); border-color: var(--rot); position: relative; }

.felder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.feld { display: grid; gap: .3rem; align-content: start; }
.feld label { font-size: .9rem; }
textarea {
  width: 100%; min-height: 11rem; resize: vertical;
  font-family: var(--maschine); font-size: 1.05rem; line-height: 1.6rem;
  background-color: #101012;
  background-image: repeating-linear-gradient(transparent 0 calc(1.6rem - 1px), rgba(255, 255, 255, .07) calc(1.6rem - 1px) 1.6rem);
  background-attachment: local;
  padding-top: 0;
}
.ausgabe textarea { color: #fff; font-weight: 700; background-color: #160e0f; border-color: var(--rot); }
.optionen { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; margin-top: 1rem; }
.optionen select { flex: 1 1 18rem; }

.fuss { max-width: 72rem; margin: 0 auto; padding: .5rem 1rem 2.5rem; font-size: .875rem; color: var(--text-weich); }
.fuss p { margin: 0; max-width: 62ch; }

/* ---------- Schmale Bildschirme ---------- */
@media (max-width: 62rem) {
  .arbeit { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 46rem) {
  .felder { grid-template-columns: minmax(0, 1fr); }
  .vg-layout, .pf-layout { grid-template-columns: minmax(0, 1fr); }
  .qz { --c: calc((100vw - 6.5rem) / 27); font-size: .5rem; justify-self: center; }
  .reiter-knopf .r-kurz { display: none; }
  .reiter-knopf { min-width: 6.4rem; }
}
@media (max-width: 30rem) {
  .rahmen, .kopf, .fuss { padding-inline: .6rem; }
  .tisch { padding: .8rem; }
  .geraet { padding: 1rem .7rem; }
  .en-fenster { padding-inline: .5rem; gap: .4rem; }
  .ukw-platte { padding-right: .4rem; }
  .walzentafel { grid-template-columns: minmax(4.2rem, 5.2rem) repeat(3, minmax(0, 1fr)); gap: .4rem .3rem; }
  .zahl { flex-direction: column; align-items: flex-start; gap: 0; }
  .walzentafel input[type="number"], input[type="number"] { width: min(100%, 3.6rem); }
  /* Steckerbrett auf dem Handy: sechs Buchsen pro Reihe, damit sie groß genug zum Antippen bleiben */
  .buchsen { grid-template-columns: repeat(6, minmax(0, 1fr)); justify-items: center; gap: .5rem .25rem; --b: 2.4rem; }
  .buchsen .reihe { display: contents; }
}

@media (max-width: 30rem) {
  /* Walzentafel: Beschriftung über den drei Spalten statt links daneben */
  .walzentafel { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .walzentafel > span:first-child { display: none; }
  .tafel-label { grid-column: 1 / -1; margin-top: .3rem; }
  .zahl { flex-direction: row; align-items: center; gap: .3rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}