.schild-ebene { position: relative; z-index: 40; }
.schild, .schild-leiste, .schild-blatt, .schild-mini { --schild: #1a1b1d; --schild-text: #ede8df; --schild-leise: #9c968c; --schild-haar: rgba(237, 232, 223, .16); }
.schild button, .schild-leiste button, .schild-blatt button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; letter-spacing: inherit; text-transform: inherit; }

.schild { position: fixed; left: 0; top: 0; width: 176px; transform-origin: 0 0; will-change: transform; --unten: 0px; }
/* Nur die sichtbare Platte nimmt Klicks an, nicht der abgeschnittene Rest darunter */
.schild { pointer-events: none; }
.schild-platte { pointer-events: auto; }
.schild-slot { position: relative; }
.schild-slot .schild { position: absolute; will-change: auto; }
.schild-schatten { position: absolute; inset: 0; border-radius: 2px; transform-origin: 50% 0; pointer-events: none; }
.schild-schatten.eng { box-shadow: 0 1px 1px rgba(0, 0, 0, .55), 0 2px 5px rgba(0, 0, 0, .35); }
.schild-schatten.weit { box-shadow: 0 18px 40px -8px rgba(0, 0, 0, .7), 0 6px 14px rgba(0, 0, 0, .35); opacity: 0; }
.schild-platte {
  position: relative; display: grid; padding: 10px 11px 0;
  background: linear-gradient(180deg, #202124, var(--schild) 40%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09);
  border-radius: 2px; color: var(--schild-text);
  font: 400 10.5px/1.5 var(--mono, "DM Mono", monospace); letter-spacing: .08em; text-transform: uppercase;
  clip-path: inset(0 0 var(--unten) 0 round 2px);
}
.schild[data-ort="tuer"] .schild-platte, .schild[data-ort="ecke"] .schild-platte { transition: clip-path .28s cubic-bezier(.23, 1, .32, 1); }
.schild[data-ort="tuer"] .schild-schatten, .schild[data-ort="ecke"] .schild-schatten { transition: transform .28s cubic-bezier(.23, 1, .32, 1); }
.schild-kopf { display: grid; text-align: left; padding-bottom: 7px !important; margin-bottom: 4px; border-bottom: 1px solid var(--schild-haar) !important; line-height: 1.5; }
.schild-marke { letter-spacing: .1em; text-transform: none; }
.schild-unter { color: var(--schild-leise); }
.schild-felder { margin: 0; }
.schild-feld { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; border-bottom: 1px solid var(--schild-haar); }
.schild-feld dt { color: var(--schild-leise); }
.schild-feld dd { margin: 0; text-align: right; color: var(--schild-leise); text-transform: none; letter-spacing: .04em; }
.schild-feld.gesetzt dd, .schild-feld[data-feld="baugruppe"] dd { color: var(--schild-text); }
.schild-feld dd.praegen { animation: praegen .26s steps(4, end); }
@keyframes praegen { 0% { opacity: 0; } 35% { opacity: .7; } 60% { opacity: .25; } 100% { opacity: 1; } }
.schild-rueckruf {
  display: block; margin: 9px 0 0; padding: 8px 0 7px; text-align: center; text-decoration: none;
  border-radius: 2px; background: var(--akzent, #db693f); color: #120804; letter-spacing: .12em;
  transition: transform .12s cubic-bezier(.23, 1, .32, 1), background-color .16s cubic-bezier(.23, 1, .32, 1);
}
.schild-rueckruf:active { transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) { .schild-rueckruf:hover { background: #e57a50; } }
.schild-ladestand { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px; padding: 7px 0 4px; color: var(--schild-leise); transition: opacity .3s linear; }
.schild-ladestand[hidden] { display: none; }
.schild-ladestand i { height: 2px; background: var(--schild-haar); overflow: hidden; }
.schild-ladestand b { display: block; height: 100%; background: var(--akzent, #db693f); transform-origin: 0 50%; transform: scaleX(0); }
.schild-ladestand output { font-variant-numeric: tabular-nums; color: var(--schild-text); }
.schild.geladen .schild-ladestand { opacity: 0; }
.schild-menue { display: grid; gap: 10px; padding: 12px 0; }
.schild-menue[hidden] { display: none; }
.schild-sprung ul { list-style: none; margin: 0; padding: 0; display: grid; }
.schild-sprung a { display: block; padding: 4px 0; color: var(--schild-text); text-decoration: none; letter-spacing: .08em; }
@media (hover: hover) and (pointer: fine) { .schild-sprung a:hover { color: var(--akzent, #db693f); } }
.schild-schalter { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.schild-schalter > span { grid-column: 1 / -1; color: var(--schild-leise); }
.schild-schalter button, .schild-leicht {
  padding: 5px 4px; border: 1px solid var(--schild-haar); border-radius: 2px; letter-spacing: .03em;
  color: var(--schild-leise); transition: color .14s, border-color .14s;
}
.schild-schalter button[aria-pressed="true"], .schild-leicht[aria-pressed="true"] { color: var(--schild-text); border-color: var(--akzent, #db693f); }
.schild :focus-visible, .schild-leiste :focus-visible, .schild-blatt :focus-visible { outline: 2px solid var(--akzent, #db693f); outline-offset: 2px; }

/* Handy: Leiste unten, Blatt von unten, kleines Schild fliegt von der Tür */
.schild-leiste, .schild-blatt, .schild-mini { display: none; }
.schild-ebene[data-handy="true"] > .schild { display: none; }
.schild-ebene[data-handy="true"] .schild-leiste {
  display: flex; align-items: center; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0;
  height: calc(56px + env(safe-area-inset-bottom)); padding: 0 10px env(safe-area-inset-bottom) 16px;
  background: linear-gradient(180deg, #202124, var(--schild)); color: var(--schild-text);
  box-shadow: 0 -1px 0 rgba(255, 255, 255, .06), 0 -10px 30px rgba(0, 0, 0, .35);
  font: 400 10.5px/1.5 var(--mono, monospace); letter-spacing: .08em; text-transform: uppercase;
  transition: transform .3s cubic-bezier(.23, 1, .32, 1);
}
.schild-leiste.weg { transform: translateY(110%); }
.schild-leiste-kopf { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; min-height: 48px; text-align: left; }
.schild-leiste-feld { display: grid; opacity: 0; transition: opacity .2s linear; }
.schild-leiste.gefuellt .schild-leiste-feld { opacity: 1; }
.schild-leiste-feld small { font-size: 9px; color: var(--schild-leise); }
.schild-leiste .schild-rueckruf { margin: 0; padding: 0 14px; min-height: 40px; display: grid; place-items: center; }
.schild-leiste-laden { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--akzent, #db693f); transform-origin: 0 50%; transform: scaleX(0); transition: opacity .4s linear; }
.schild-leiste.geladen .schild-leiste-laden { opacity: 0; }
.schild-ebene[data-handy="true"] .schild-blatt {
  display: grid; gap: 14px; position: fixed; left: 0; right: 0; bottom: calc(56px + env(safe-area-inset-bottom));
  max-height: 72svh; overflow: auto; padding: 18px 16px 20px; background: var(--schild); color: var(--schild-text);
  font: 400 12px/1.5 var(--mono, monospace); letter-spacing: .08em; text-transform: uppercase;
  border-radius: 2px 2px 0 0; box-shadow: 0 -18px 40px rgba(0, 0, 0, .5);
  transform: translateY(105%); transition: transform .28s cubic-bezier(.23, 1, .32, 1);
}
.schild-ebene .schild-blatt[hidden] { display: none; }
.schild-ebene .schild-blatt.offen { transform: none; }
.schild-blatt .schild-sprung a, .schild-blatt .schild-schalter button, .schild-blatt .schild-leicht { min-height: 44px; }
.schild-blatt .schild-rueckruf { padding: 14px 0; }
.schild-ebene[data-handy="true"] .schild-mini {
  display: grid; gap: 3px; align-content: start; position: fixed; left: 0; top: 0; width: 26px; height: 34px; padding: 5px 4px;
  background: var(--schild); border-radius: 1px; transform-origin: 0 0; box-shadow: 0 2px 6px rgba(0, 0, 0, .5); pointer-events: none;
}
.schild-mini b { height: 2px; background: rgba(237, 232, 223, .4); }
.schild-ebene.ruhig .schild-blatt, .schild-ebene.ruhig .schild-leiste { transition: none; }

/* Nach dem Absenden: Knopf wird Anzeige, ein Lichtreflex läuft einmal über die Platte */
.schild-rueckruf.erledigt { background: transparent; color: var(--schild-text); box-shadow: inset 0 0 0 1px var(--akzent, #db693f); cursor: default; }
.schild-rueckruf.erledigt:active { transform: none; }
.schild-platte::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 236, 214, .22) 48%, rgba(255, 236, 214, .05) 56%, transparent 66%);
  background-size: 260% 100%; background-position: 100% 0;
}
.schild.gemeldet .schild-platte::after { animation: reflex 1.1s cubic-bezier(.23, 1, .32, 1) .15s both; }
@keyframes reflex { 0% { opacity: 1; background-position: 100% 0; } 100% { opacity: 1; background-position: 0 0; } }
.schild-ebene.ruhig .schild.gemeldet .schild-platte::after, .schild-slot .schild.gemeldet.ruhig .schild-platte::after { animation: none; }
@media (prefers-reduced-motion: reduce) { .schild.gemeldet .schild-platte::after { animation: none; } }