/* Chiaves Feld-App – auf Daumenbedienung ausgelegt.
   Grundsatz: nichts unter 48 px Höhe, großzügige Abstände, wenig auf einmal. */
:root {
  --f-blau: #3455a0;
  --f-blau-hell: #eaf0fb;
  --f-gruen: #1a7f37;
  --f-gruen-hell: #e6f4ea;
  --f-gelb: #fdf3d8;
  --f-gelb-t: #8a6100;
  --f-rot: #a32d2d;
  --f-text: #1c1e24;
  --f-text2: #5c6270;
  --f-text3: #9aa0ad;
  --f-rand: #dfe3ea;
  --f-flaeche: #ffffff;
  --f-grund: #f4f6fa;
  --f-tap: 52px;
  /* Abgehoben und leicht durchscheinend: die Flaeche laesst den Untergrund
     durchschimmern, ein weicher Schatten hebt sie ab. */
  --f-glas: rgba(255, 255, 255, .72);
  --f-glas-rand: rgba(255, 255, 255, .55);
  --f-hoch: 0 1px 2px rgba(22, 27, 45, .06), 0 4px 12px rgba(22, 27, 45, .07);
  --f-hoch-tief: 0 1px 2px rgba(22, 27, 45, .08);
  --f-hoch-blau: 0 2px 6px rgba(52, 85, 160, .28), 0 8px 20px rgba(52, 85, 160, .22);
}
@media (prefers-color-scheme: dark) {
  :root {
    --f-blau-hell: #1c2740; --f-gruen-hell: #16301f; --f-gelb: #3a2f12; --f-gelb-t: #f0c96a;
    --f-text: #e9ebf0; --f-text2: #a8aebc; --f-text3: #6c7383;
    --f-rand: #2b3040; --f-flaeche: #171a21; --f-grund: #0f1116;
    --f-glas: rgba(32, 37, 48, .66);
    --f-glas-rand: rgba(255, 255, 255, .07);
    --f-hoch: 0 1px 2px rgba(0, 0, 0, .35), 0 6px 16px rgba(0, 0, 0, .38);
    --f-hoch-tief: 0 1px 2px rgba(0, 0, 0, .4);
    --f-hoch-blau: 0 2px 8px rgba(0, 0, 0, .45), 0 8px 20px rgba(52, 85, 160, .3);
  }
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; padding: 0; height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  background: var(--f-grund); color: var(--f-text);
  font-size: 17px; line-height: 1.5;
  overscroll-behavior-y: contain;
}
/* Kopfleiste bleibt oben stehen, respektiert die Notch */
.kopf {
  position: sticky; top: 0; z-index: 20;
  background: var(--f-flaeche); border-bottom: 1px solid var(--f-rand);
  padding: calc(env(safe-area-inset-top) + 12px) 16px 12px;
  display: flex; align-items: center; gap: 12px; min-height: 60px;
}
/* Logo mittig, Zurück-Pfeil schwebt links darüber – so bleibt das Logo wirklich zentriert */
.kopf { justify-content: center; position: sticky; }
.kopf .logo { display: block; line-height: 0; }
.kopf .logo img { height: 26px; width: auto; }
.kopf .logo img.logo-hell { display: block; }
.kopf .logo img.logo-dunkel { display: none; }
@media (prefers-color-scheme: dark) {
  .kopf .logo img.logo-hell { display: none; }
  .kopf .logo img.logo-dunkel { display: block; }
}
.zurueck {
  position: absolute; left: 6px; bottom: 8px;
  border: none; background: none; color: var(--f-blau); font-size: 30px;
  width: 44px; height: 44px; cursor: pointer;
}
#titel { font-size: 20px; font-weight: 600; margin: 0 0 14px; }
#titel:empty { display: none; }
.inhalt { padding: 16px 16px calc(env(safe-area-inset-bottom) + 28px); }
/* Feste Leiste unten: bleibt beim Scrollen stehen */
.fussleiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
  padding: 10px 16px calc(env(safe-area-inset-bottom) + 10px);
  background: var(--f-flaeche); border-top: 1px solid var(--f-rand);
}
body.hat-fuss .inhalt { padding-bottom: calc(env(safe-area-inset-bottom) + 100px); }


/* Knöpfe – nie kleiner als der Daumen */
.taste {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: var(--f-tap); padding: 14px 18px;
  border-radius: 14px; border: 1px solid var(--f-glas-rand); background: var(--f-glas);
  -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%);
  box-shadow: var(--f-hoch);
  color: var(--f-text); font: inherit; font-weight: 600; cursor: pointer;
  transition: box-shadow .14s ease, transform .14s ease;
}
/* Beim Druecken sinkt der Knopf ein Stueck ein */
.taste:active { transform: translateY(1px) scale(.99); box-shadow: var(--f-hoch-tief); }
.taste.haupt { background: var(--f-blau); border-color: transparent; color: #fff; box-shadow: var(--f-hoch-blau); }
.taste.haupt:active { box-shadow: var(--f-hoch-tief); }
.taste.gruen { background: var(--f-gruen); border-color: transparent; color: #fff; box-shadow: var(--f-hoch-blau); }
.taste.still { font-weight: 500; color: var(--f-text2); }
.taste.gefahr { color: var(--f-rot); }
.taste[disabled] { opacity: .5; box-shadow: none; }

input, select {
  width: 100%; min-height: var(--f-tap); padding: 13px 15px;
  border: 1px solid var(--f-rand); border-radius: 14px;
  background: var(--f-flaeche); color: var(--f-text); font: inherit;
}
input:focus, select:focus { outline: 2px solid var(--f-blau); outline-offset: -1px; }
label.feld { display: block; margin-bottom: 14px; }
label.feld > span { display: block; font-size: 14px; color: var(--f-text2); margin-bottom: 6px; }

/* Plan-Karten */
.karte {
  background: var(--f-glas); border: 1px solid var(--f-glas-rand); border-radius: 16px;
  -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%);
  box-shadow: var(--f-hoch);
  padding: 15px 16px; margin-bottom: 12px; cursor: pointer;
  position: relative; overflow: hidden;
  transition: box-shadow .14s ease, transform .14s ease;
}
.karte:active { transform: translateY(1px) scale(.995); box-shadow: var(--f-hoch-tief); }
.karte .titel { font-weight: 600; font-size: 17px; }
.karte .unter { font-size: 14px; color: var(--f-text2); margin-top: 3px; }
.karte .zeile { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }

.marke {
  font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px;
  background: var(--f-grund); color: var(--f-text2);
}
.marke .ti { font-size: 13px; vertical-align: -1px; }
.marke.aktiv { background: var(--f-blau-hell); color: var(--f-blau); }

/* Kacheln innerhalb eines Plans */
.kacheln { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kachel {
  background: var(--f-glas); border: 1px solid var(--f-glas-rand); border-radius: 18px;
  -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%);
  box-shadow: var(--f-hoch);
  padding: 20px 14px; text-align: center; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 10px; min-height: 118px;
  justify-content: center; color: var(--f-text); font: inherit;
  position: relative; overflow: hidden;
  transition: opacity .2s ease, transform .2s cubic-bezier(.2, .8, .3, 1);
}
.kachel:active { transform: translateY(1px) scale(.99); box-shadow: var(--f-hoch-tief); }
.kachel .ti { font-size: 34px; line-height: 1; color: var(--f-blau); }
.kachel[disabled] .ti { color: var(--f-text3); }
.kachel .name { font-weight: 600; font-size: 15px; }
.kachel[disabled] { opacity: .45; box-shadow: none; }

.hinweis {
  border-radius: 14px; padding: 13px 15px; font-size: 15px; line-height: 1.5;
  margin-bottom: 14px;
}
.hinweis.gelb { background: var(--f-gelb); color: var(--f-gelb-t); }
.hinweis.gruen { background: var(--f-gruen-hell); color: var(--f-gruen); }
.hinweis.grau { background: var(--f-flaeche); border: 1px solid var(--f-rand); color: var(--f-text2); }

.leer { text-align: center; color: var(--f-text3); padding: 50px 20px; }
.trenner { height: 1px; background: var(--f-rand); margin: 20px 0; }

/* ── Netz-Anzeige ──────────────────────────────────────────────────────
   Oben über dem Logo, einmal in ganzer Breite. Nach drei Sekunden zieht sie
   sich nach rechts auf ein Symbol zusammen und gibt den Platz wieder frei;
   Antippen holt den Text zurück. */
#netz {
  position: fixed; top: calc(env(safe-area-inset-top) + 6px); right: 10px; z-index: 40;
  display: none; align-items: center; gap: 9px;
  max-width: calc(100vw - 20px);
  padding: 9px 14px; border: 0; border-radius: 999px;
  background: var(--f-gelb); color: var(--f-gelb-t);
  font: inherit; font-size: 13.5px; font-weight: 600; text-align: left;
  box-shadow: var(--f-hoch); cursor: pointer; overflow: hidden;
  transition: max-width .45s cubic-bezier(.3, .8, .3, 1), padding .45s ease;
}
body.offline #netz { display: flex; }
#netz .ti { font-size: 18px; flex: none; }
#netz .netz-text {
  white-space: nowrap; overflow: hidden;
  transition: opacity .2s ease;
}
/* Zusammengefahren: nur noch das Symbol */
#netz.klein { max-width: 40px; padding: 9px 11px; }
#netz.klein .netz-text { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  #netz, #netz .netz-text { transition: none; }
}

/* Ausleih-Animation: der Plan wandert aufs Gerät */
.ausleih-buehne { height: 92px; position: relative; margin: 6px 0 16px; overflow: hidden; }
.ausleih-blatt {
  position: absolute; left: 50%; top: 8px; width: 46px; height: 60px; margin-left: -23px;
  border-radius: 6px; border: 2px solid var(--f-blau); background: var(--f-blau-hell);
}
.ausleih-blatt::before, .ausleih-blatt::after {
  content: ''; position: absolute; left: 8px; right: 8px; height: 2px; background: var(--f-blau); opacity: .5;
}
.ausleih-blatt::before { top: 14px; } .ausleih-blatt::after { top: 24px; }
.laeuft .ausleih-blatt { animation: blattRein .9s ease-in-out infinite; }
@keyframes blattRein {
  0%   { transform: translateY(-34px) scale(1); opacity: 0; }
  35%  { opacity: 1; }
  100% { transform: translateY(26px) scale(.55); opacity: 0; }
}
.ausleih-geraet {
  position: absolute; left: 50%; bottom: 4px; width: 54px; height: 34px; margin-left: -27px;
  border: 2px solid var(--f-text2); border-bottom: none; border-radius: 8px 8px 0 0; background: var(--f-flaeche);
}
@media (prefers-reduced-motion: reduce) { .laeuft .ausleih-blatt { animation: none; opacity: 1; } }

#toast {
  position: fixed; left: 16px; right: 16px; bottom: calc(env(safe-area-inset-bottom) + 20px);
  background: var(--f-text); color: var(--f-grund); padding: 14px 16px; border-radius: 14px;
  font-size: 15px; text-align: center; z-index: 40; opacity: 0; pointer-events: none;
  transition: opacity .2s;
}
#toast.zeig { opacity: 1; }

/* Feste Leiste unten: drei gleich große Kacheln – Suche, Neuer Plan, Filter */
.fussdrei { display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 10px; }
.fusstaste {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: var(--f-tap); padding: 8px 6px;
  border: 1px solid var(--f-glas-rand); border-radius: 14px; background: var(--f-glas);
  -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%);
  box-shadow: var(--f-hoch);
  color: var(--f-text2); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  transition: box-shadow .14s ease, transform .14s ease;
}
.fusstaste .ti { font-size: 24px; line-height: 1; }
.fusstaste:active { transform: translateY(1px) scale(.98); box-shadow: var(--f-hoch-tief); }
.fusstaste.an { border-color: var(--f-blau); color: var(--f-blau); }
.fusstaste.haupt { background: var(--f-blau); border-color: transparent; color: #fff; box-shadow: var(--f-hoch-blau); }

/* Auswahl-Blatt, das von unten hereinkommt */
.blatt-bg {
  position: fixed; inset: 0; z-index: 45; background: rgba(15, 17, 22, .45);
  display: flex; align-items: flex-end; justify-content: center;
}
.blatt {
  width: 100%; max-width: 520px; background: var(--f-flaeche);
  border-radius: 20px 20px 0 0; padding: 20px 16px calc(env(safe-area-inset-bottom) + 16px);
  animation: blattHoch .18s ease-out;
  /* Lange Masken (Zylinder) passen nicht auf den Schirm – das Blatt selbst
     scrollt, die Räder darin behalten ihr eigenes Scrollen. */
  max-height: 88vh; max-height: 88dvh;
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
@keyframes blattHoch { from { transform: translateY(28px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .blatt { animation: none; } }
.blatt-titel { font-weight: 600; font-size: 16px; margin-bottom: 14px; }

/* Aufgeklappte Fußleiste: waechst aus der angetippten Kachel heraus und legt sich
   ueber die drei Kacheln, die dabei verblassen. Beide liegen uebereinander im Stapel. */
.fussstapel { position: relative; }
.fussdrei { transition: opacity .16s ease, transform .16s ease; }
.fussdrei.verblasst { opacity: 0; transform: scale(.97); pointer-events: none; }
.fussauf {
  position: absolute; inset: 0;
  display: flex; align-items: center; gap: 8px;
  background: var(--f-flaeche);
  animation: fussAuf .19s cubic-bezier(.2, .8, .3, 1) both;
}
/* Aus welcher Kachel es kommt: Suche sitzt links, Filter rechts */
.fussauf.von-links  { transform-origin: 14% center; }
.fussauf.von-rechts { transform-origin: 86% center; }
@keyframes fussAuf {
  from { opacity: 0; transform: scaleX(.3) scaleY(.88); }
  to   { opacity: 1; transform: none; }
}
/* Zuklappen: derselbe Weg rueckwaerts */
.fussauf.zu { animation: fussZu .17s cubic-bezier(.4, 0, .8, .4) both; }
@keyframes fussZu {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: scaleX(.3) scaleY(.88); }
}
@media (prefers-reduced-motion: reduce) {
  .fussauf, .fussauf.zu { animation: none; }
  .fussdrei { transition: none; }
}
.fussauf-zeichen { font-size: 22px; flex: none; color: var(--f-text2); }
.fussauf input {
  flex: 1; min-width: 0; min-height: 46px; border-radius: 12px;
}
.fussauf-zu {
  flex: none; width: 46px; height: 46px; border-radius: 12px;
  border: 1px solid var(--f-rand); background: var(--f-flaeche);
  color: var(--f-text2); font-size: 19px; cursor: pointer;
}
.fussauf.filter { gap: 7px; }
/* Filter-Kacheln: antippen blendet den Zustand aus (ausgegraut) */
.fchip {
  position: relative; overflow: hidden;
  flex: 1; min-width: 0; min-height: 56px; padding: 8px 4px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border-radius: 12px; border: 1px solid var(--f-blau); background: var(--f-glas);
  -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%);
  box-shadow: var(--f-hoch);
  font: inherit; font-size: 11.5px; font-weight: 600; color: var(--f-blau); cursor: pointer;
  transition: box-shadow .14s ease, transform .14s ease, opacity .14s ease;
}
.fchip .ti { font-size: 26px; line-height: 1; }
/* Abgeschaltet: ausgegraut – der Zustand verschwindet dann aus der Liste */
.fchip.aus { border-color: var(--f-rand); color: var(--f-text3); opacity: .55; box-shadow: var(--f-hoch-tief); }
.fchip:active { transform: translateY(1px) scale(.98); box-shadow: var(--f-hoch-tief); }

/* ── Tropfen ───────────────────────────────────────────────────────────
   Wo der Finger aufsetzt, laeuft eine Welle nach aussen. Auf den Kacheln
   folgt ihr ein Ring – wie ein Tropfen, der aufs Wasser trifft. */
.welle {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: currentColor; opacity: .16;
  animation: welleAus .55s cubic-bezier(.2, .7, .3, 1) both;
}
.welle.ring {
  background: transparent; border: 2px solid currentColor; opacity: .3;
  animation: welleRing .6s cubic-bezier(.2, .7, .3, 1) both;
}
.kachel .welle, .fchip .welle, .fusstaste.an .welle { color: var(--f-blau); }
@keyframes welleAus {
  from { transform: scale(.12); opacity: .22; }
  to   { transform: scale(1);   opacity: 0; }
}
@keyframes welleRing {
  from { transform: scale(.12); opacity: .45; }
  60%  { opacity: .2; }
  to   { transform: scale(1);   opacity: 0; }
}

/* Angetippte Kachel tritt hervor, die anderen treten zurueck */
.kacheln.einer-gewaehlt .kachel { opacity: .25; transform: scale(.96); }
.kacheln.einer-gewaehlt .kachel.gewaehlt { opacity: 1; transform: scale(1.05); }

/* Neuer Bildschirm kommt sanft herein statt hart zu erscheinen */
#seite.rein { animation: seiteRein .22s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes seiteRein {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .welle, #seite.rein { animation: none; }
  .kachel, .kacheln.einer-gewaehlt .kachel { transition: none; }
}

/* ── Dokumente und Schluesseluebergabe ─────────────────────────────────── */
/* Fuenfte Kachel nimmt die ganze Breite */
.kachel.breit { grid-column: 1 / -1; min-height: 88px; flex-direction: row; gap: 12px; }
.kachel.breit .ti { font-size: 28px; }

textarea {
  width: 100%; padding: 13px 15px; min-height: 120px;
  border: 1px solid var(--f-rand); border-radius: 14px;
  background: var(--f-flaeche); color: var(--f-text); font: inherit; resize: vertical;
}
textarea:focus { outline: 2px solid var(--f-blau); outline-offset: -1px; }
textarea[readonly] { opacity: .7; }

.abschnitt { font-size: 14px; font-weight: 600; color: var(--f-text2); margin: 0 0 10px 2px; }

/* Zwei statt drei Kacheln in der Leiste */
.fussdrei.zwei { grid-template-columns: 1fr 1fr; }

/* Eine Uebergabe-Zeile: Anzahl, Name, und rechts das Wegnehmen */
.ueb-zeile { margin-top: 8px; }
.ueb-name { flex: 1; min-width: 0; font-size: 14px; }
.ueb-name .unter { display: inline; font-size: 13px; }
.ueb-weg {
  flex: none; width: 34px; height: 34px; border-radius: 10px;
  border: 1px solid var(--f-rand); background: var(--f-flaeche);
  color: var(--f-text2); font-size: 15px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.ueb-tipp { margin-top: 10px; color: var(--f-blau); font-size: 13px; }

/* ── Uebersicht ────────────────────────────────────────────────────────── */
/* Umschalter zwischen Zylindern und Schluesseln – zwei grosse Flaechen */
.wahlzeile { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.wahl {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 46px; padding: 10px 8px;
  border: 1px solid var(--f-glas-rand); border-radius: 13px; background: var(--f-glas);
  -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%);
  box-shadow: var(--f-hoch);
  color: var(--f-text2); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  transition: box-shadow .14s ease, transform .14s ease, color .14s ease;
}
.wahl .ti { font-size: 19px; }
.wahl:active { transform: translateY(1px) scale(.99); box-shadow: var(--f-hoch-tief); }
.wahl.an { border-color: var(--f-blau); color: var(--f-blau); }

/* Aufgeklappter Teil einer Karte */
.ub-auf { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--f-rand); }
.ub-auf .abschnitt { margin-bottom: 8px; }
.ub-zeile { font-size: 14px; padding: 5px 0; }
.ub-zeile .unter { display: inline; margin-left: 6px; }

/* ── Rad zum Drehen ────────────────────────────────────────────────────
   Drei Zeilen hoch, die mittlere ist die gewählte. Das Einrasten macht
   der Browser selbst (scroll-snap) – das fühlt sich am Finger richtig an
   und läuft flüssiger als alles, was man in JavaScript nachbaut. */
.rad { position: relative; height: 138px; margin-top: 4px; }
.rad-rolle {
  height: 100%; overflow-y: auto; overscroll-behavior: contain;
  scroll-snap-type: y mandatory; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
}
.rad-rolle::-webkit-scrollbar { display: none; }
.rad-luft { height: 46px; }
.rad-wert {
  height: 46px; line-height: 46px; text-align: center;
  scroll-snap-align: center; scroll-snap-stop: always;
  font-size: 19px; font-weight: 600; color: var(--f-text3); cursor: pointer;
  transition: color .12s ease, transform .12s ease;
}
.rad-wert.an { color: var(--f-blau); font-size: 23px; transform: scale(1.04); }
/* Das Band zeigt, was gilt – liegt hinter den Zahlen und fängt keine Tipper ab */
.rad-band {
  position: absolute; left: 0; right: 0; top: 46px; height: 46px;
  border-radius: 12px; background: var(--f-blau-hell); pointer-events: none;
}
.feld-titel { display: block; font-size: 14px; color: var(--f-text2); margin-bottom: 6px; }
@media (prefers-reduced-motion: reduce) {
  .rad-rolle { scroll-behavior: auto; }
  .rad-wert { transition: none; }
}

/* Notiz-Karte: der Text steht im Vordergrund, Verfasser und Zeit darunter */
.karte.notiz .notiz-text { font-size: 15px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.karte.notiz .zeile { margin-top: 10px; }

/* Die häufigen Empfänger: untereinander, in derselben Größe wie die
   Knöpfe am Fuß des Fensters – ein durchgehendes Raster liest sich ruhiger
   als Kacheln in einer eigenen Größe. */
.zweiknopf { display: flex; flex-direction: column; gap: 10px; }
.zweiknopf .taste { justify-content: flex-start; gap: 12px; padding: 14px 18px; }
.zweiknopf .taste .ti { font-size: 22px; line-height: 1; color: var(--f-blau); }

/* Kleine Knöpfe in Karten: eigener Tropfen, damit nicht die ganze Karte aufleuchtet */
.ueb-weg, .fussauf-zu { position: relative; overflow: hidden; }
.ueb-weg .welle, .fussauf-zu .welle { color: var(--f-rot); }

/* ── Fragen und Meldungen der App ──────────────────────────────────────
   Eigene Fenster statt der Browser-Dialoge: gleiche Schrift, gleiche
   Knöpfe, kein „mobil.chiaves.app meldet…" im Titel. */
.frage-text { font-size: 15px; line-height: 1.55; color: var(--f-text2); margin-bottom: 18px; }
.frage-text p { margin: 0 0 6px; }
.frage-text p:last-child { margin-bottom: 0; }
.frage-luft { height: 10px; }
.taste.gefahr-voll { background: var(--f-rot); border-color: transparent; color: #fff; box-shadow: var(--f-hoch-blau); }
.blatt .taste + .taste { margin-top: 10px; }

/* Fertiger Schlüssel: alles übergeben. Grün, aber ruhig – der Rahmen trägt
   die Aussage, nicht die Fläche. */
.karte.fertig { border-color: var(--f-gruen); background: var(--f-gruen-hell); }
.karte.fertig .titel { color: var(--f-gruen); }
.karte.fertig .titel .ti { font-size: 17px; vertical-align: -2px; }

/* Zwei Räder nebeneinander – außen und innen */
.zwei-rad { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.zwei-rad .feld { margin-bottom: 14px; }
.zwei-rad .fest {
  height: 138px; display: flex; align-items: center; justify-content: center;
  color: var(--f-text2); font-size: 15px;
  border-radius: 12px; background: var(--f-grund);
}

/* Auswahl in Reihen: Bauform, Sonderzylinder, Funktionen */
.wahlreihe { display: flex; flex-wrap: wrap; gap: 8px; }
.wahlchip {
  position: relative; overflow: hidden;
  min-height: 42px; padding: 9px 14px;
  border: 1px solid var(--f-rand); border-radius: 12px; background: var(--f-flaeche);
  color: var(--f-text2); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  transition: border-color .12s ease, color .12s ease;
}
.wahlchip.an { border-color: var(--f-blau); color: var(--f-blau); background: var(--f-blau-hell); }
.wahlchip[disabled] { opacity: .5; }
.wahlchip:active { transform: scale(.97); }

/* Zwei Felder nebeneinander – Gebäude/Stockwerk, Nummer/Bezeichnung */
.zweispalt { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.zweispalt .feld { margin-bottom: 14px; }

/* Der gewählte Sonderzylinder sticht hervor */
.taste.an-sonder { border-color: var(--f-blau); color: var(--f-blau); background: var(--f-blau-hell); }

/* Liste der Sonderzylinder: Name antippen wählt, der Stern merkt vor */
.sz-zeile {
  display: flex; align-items: stretch; gap: 8px; margin-bottom: 8px;
}
.sz-name {
  position: relative; overflow: hidden;
  flex: 1; min-width: 0; text-align: left;
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 14px; min-height: var(--f-tap);
  border: 1px solid var(--f-rand); border-radius: 13px; background: var(--f-flaeche);
  color: var(--f-text); font: inherit; cursor: pointer;
}
.sz-name .titel { font-weight: 600; font-size: 15px; }
.sz-name .unter { font-size: 12.5px; color: var(--f-text2); }
.sz-zeile.an .sz-name { border-color: var(--f-blau); background: var(--f-blau-hell); }
.sz-stern {
  position: relative; overflow: hidden;
  flex: none; width: 52px; border-radius: 13px;
  border: 1px solid var(--f-rand); background: var(--f-flaeche);
  color: var(--f-text3); font-size: 21px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.sz-stern.an { color: #e0a400; border-color: #e0a400; }

/* Aktionsknöpfe nebeneinander – spart am Ende einer langen Maske eine Bildschirmhöhe */
.knopfreihe { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; margin-top: 4px; }
.knopfreihe .taste { padding: 12px 8px; font-size: 13.5px; line-height: 1.25; text-align: center; }
.knopfreihe .taste + .taste { margin-top: 0; }

/* Farbwahl: rundes Plättchen mit dem Kürzel darunter – nimmt wenig Platz,
   ist aber groß genug für den Daumen */
.farbchip {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-width: 54px; min-height: 58px; padding: 7px 6px;
  border: 1px solid var(--f-rand); border-radius: 12px; background: var(--f-flaeche);
  color: var(--f-text2); font: inherit; font-size: 11px; font-weight: 600; cursor: pointer;
}
.farbpunkt {
  width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .18); box-shadow: inset 0 -2px 4px rgba(0, 0, 0, .12);
}
.farbchip.an { border-color: var(--f-blau); color: var(--f-blau); background: var(--f-blau-hell); }
.farbchip[disabled] { opacity: .5; }
.farbchip:active { transform: scale(.96); }

/* Drei Felder oben: Gebäude, Stockwerk, Farbe – die Farbe braucht am wenigsten Platz */
.dreispalt { display: grid; grid-template-columns: 1fr 1fr 84px; gap: 10px; }
.dreispalt .feld { margin-bottom: 14px; }

/* Farbe oben: nur das Plättchen und das Kürzel, geändert wird durch Antippen */
.farbknopf {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%; min-height: var(--f-tap); padding: 8px 6px;
  border: 1px solid var(--f-glas-rand); border-radius: 14px; background: var(--f-glas);
  box-shadow: var(--f-hoch);
  color: var(--f-text); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.farbknopf[disabled] { opacity: .5; box-shadow: none; }

/* Bauform und Knauf teilen sich eine Reihe */
.bauformreihe { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: start; }
.bauformreihe .feld { margin-bottom: 14px; }
.bauformreihe .taste { white-space: nowrap; }

/* Farbliste im eigenen Blatt */
.farbzeile {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 11px 14px; margin-bottom: 8px; min-height: var(--f-tap);
  border: 1px solid var(--f-rand); border-radius: 13px; background: var(--f-flaeche);
  color: var(--f-text); font: inherit; text-align: left; cursor: pointer;
}
.farbzeile.an { border-color: var(--f-blau); background: var(--f-blau-hell); }
.farbpunkt.gross { width: 30px; height: 30px; flex: none; }
.farbtext { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.farbtext .titel { font-weight: 600; font-size: 15px; }
.farbtext .unter { font-size: 12.5px; color: var(--f-text2); }

/* Automatisch weitergezähltes Feld leuchtet kurz auf */
input.frisch { animation: frischAuf 1.4s ease-out both; }
@keyframes frischAuf {
  0%   { background: var(--f-gruen-hell); border-color: var(--f-gruen); }
  70%  { background: var(--f-gruen-hell); border-color: var(--f-gruen); }
  100% { background: var(--f-flaeche); border-color: var(--f-rand); }
}
.zy-meldung { animation: seiteRein .2s ease-out both; }
@media (prefers-reduced-motion: reduce) { input.frisch, .zy-meldung { animation: none; } }

/* Blatt bis nach oben: draußen zählt jeder Zentimeter Schirm */
.blatt { max-height: calc(100dvh - 10px); }

/* Meldung fährt von oben herein, liegt ÜBER der Maske und wieder hinaus */
#zy-band {
  position: fixed; left: 12px; right: 12px; z-index: 50;
  top: calc(env(safe-area-inset-top) + 8px);
  display: flex; align-items: center; gap: 9px;
  padding: 12px 16px; border-radius: 14px;
  background: var(--f-gruen); color: #fff;
  font-size: 14.5px; font-weight: 600;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
  transform: translateY(-160%); opacity: 0;
  transition: transform .34s cubic-bezier(.2, .8, .3, 1), opacity .28s ease;
  pointer-events: none;
}
#zy-band.ein { transform: none; opacity: 1; }
#zy-band .ti { font-size: 19px; }
@media (prefers-reduced-motion: reduce) { #zy-band { transition: opacity .2s ease; transform: none; } }

/* Felder, die dazukommen oder wegfallen: aufklappen und einblenden,
   verblassen und den Platz wieder schließen – statt hart zu erscheinen. */
.feldblock {
  overflow: hidden;
  transition: max-height .28s cubic-bezier(.2, .8, .3, 1), opacity .22s ease,
              margin-bottom .28s ease, transform .28s ease;
}
.feldblock.zu {
  max-height: 0 !important; opacity: 0; margin-bottom: 0 !important;
  transform: translateY(-4px); pointer-events: none;
}
/* Ausgetauschte Räder blenden sanft ein statt zu springen */
#zy-raeder.sanft { animation: sanftRein .26s ease-out both; }
@keyframes sanftRein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .feldblock { transition: none; }
  #zy-raeder.sanft { animation: none; }
}

/* Schalter mit Erklärung darunter – groß genug zum Antippen */
.schalter {
  display: flex; align-items: flex-start; gap: 12px; cursor: pointer;
  padding: 12px 14px; margin-bottom: 14px;
  border: 1px solid var(--f-rand); border-radius: 13px; background: var(--f-flaeche);
  font-size: 14.5px; line-height: 1.35;
}
.schalter input { width: 22px; height: 22px; min-height: 0; flex: none; margin-top: 1px; accent-color: var(--f-blau); }
.schalter .unter { display: block; margin-top: 3px; }
.taste.gefahr { color: var(--f-rot); border-color: var(--f-rand); }

/* Planseiten: Vorschau in der Karte, darunter Seite und Anzahl der Marker */
.planbild {
  width: 100%; height: 150px; margin-bottom: 10px;
  border-radius: 12px; overflow: hidden; background: var(--f-grund);
  display: flex; align-items: center; justify-content: center;
}
.planbild img { width: 100%; height: 100%; object-fit: cover; }
.planbild.pdf .ti { font-size: 44px; color: var(--f-text3); }

/* Die geöffnete Seite: Bild mit den Markern darauf */
.planflaeche { position: relative; width: 100%; margin-bottom: 14px; border-radius: 14px; overflow: hidden; background: var(--f-grund); }
.planflaeche img { width: 100%; display: block; }
.planmarke {
  position: absolute; transform: translate(-50%, -50%);
  min-width: 34px; height: 34px; padding: 0 8px;
  border-radius: 999px; border: 2px solid #fff; background: var(--f-blau);
  color: #fff; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}
.planmarke:active { transform: translate(-50%, -50%) scale(.92); }
.planbild img[data-pdf], .planflaeche img[data-pdf] { opacity: .25; min-height: 120px; }
.pdf-fehler::after { content: 'PDF konnte nicht angezeigt werden'; display: block; padding: 12px; font-size: 13px; color: var(--f-text3); text-align: center; }
.planbild.pdf-schwer::after, .planflaeche.pdf-schwer::after {
  content: 'Diese Seite ist sehr groß – sie lädt gerade noch'; display: block;
  padding: 10px; font-size: 12.5px; color: var(--f-text3); text-align: center;
}
.planlade {
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
  text-align: center; font-size: 13.5px; color: var(--f-text2);
}
.planbild.pdf { flex-direction: column; gap: 6px; }
.pdf-hinweis {
  position: absolute; left: 10px; right: 10px; top: 50%; transform: translateY(-50%);
  text-align: center; font-size: 13.5px; color: var(--f-text2); line-height: 1.5;
}
.pdf-hinweis a { color: var(--f-blau); font-weight: 600; }
.pdf-hinweis .unter { font-size: 12px; }
.planflaeche.pdf-fehler { min-height: 180px; }