:root {
  --hg: #f4f5f7; --karte: #ffffff; --text: #1c2330; --blass: #5d6878; --rand: #d9dde4;
  --akzent: #1f5fbf; --akzent-text: #ffffff; --gefahr: #b3261e; --erfolg: #1b6e3c; --hinweis: #6b5300;
}
@media (prefers-color-scheme: dark) {
  :root { --hg: #12161d; --karte: #1b212b; --text: #e8ebf0; --blass: #9aa5b5; --rand: #303846;
    --akzent: #6ea5f7; --akzent-text: #0c1320; --gefahr: #ff8a80; --erfolg: #7bd69b; --hinweis: #e6c765; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--hg); color: var(--text); font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
main { max-width: 760px; margin: 0 auto; padding: 16px max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
h1 { font-size: 1.4rem; margin: 0 0 8px; }
h2 { font-size: 1.1rem; margin: 0 0 12px; }
.laden { text-align: center; color: var(--blass); padding: 48px 16px; }
.karte { background: var(--karte); border: 1px solid var(--rand); border-radius: 12px; padding: 20px; margin: 0 0 16px; }
.schmal { max-width: 420px; margin: 8vh auto 0; }
.kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 8px 0 16px; flex-wrap: wrap; }
.kopf h1 { margin: 0; }
.wer { color: var(--blass); margin-right: 12px; }
.feld { display: block; margin: 12px 0; }
.feld span { display: block; font-size: .9rem; color: var(--blass); margin-bottom: 4px; }
input[type=text], input[type=password], input[type=search] {
  width: 100%; padding: 10px 12px; font: inherit; color: inherit; background: var(--hg);
  border: 1px solid var(--rand); border-radius: 8px; }
input:focus-visible, button:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
button { font: inherit; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--rand); background: var(--karte); color: var(--text); cursor: pointer; }
button:disabled { opacity: .6; cursor: default; }
button.haupt { background: var(--akzent); color: var(--akzent-text); border-color: var(--akzent); font-weight: 600; padding: 10px 18px; }
button.gefahr { color: var(--gefahr); }
form .haupt { width: 100%; margin-top: 8px; }
.haken { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0; font-size: .9rem; }
.haken input { margin-top: 4px; }
.meldung { padding: 10px 12px; border-radius: 8px; margin: 12px 0 0; border: 1px solid currentColor; font-size: .95rem; }
.meldung.fehler { color: var(--gefahr); }
.meldung.erfolg { color: var(--erfolg); }
.meldung.hinweis { color: var(--hinweis); }
.ablage { border: 2px dashed var(--rand); border-radius: 12px; padding: 24px 16px; text-align: center; }
.ablage.aktiv { border-color: var(--akzent); }
.ablage p { margin: 10px 0 0; color: var(--blass); font-size: .9rem; }
.versteckt { display: none; }
.liste { list-style: none; margin: 12px 0 0; padding: 0; }
.liste li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--rand); flex-wrap: wrap; }
.liste li:first-child { border-top: 0; }
.dok { min-width: 0; flex: 1 1 220px; }
.dok strong { display: block; overflow-wrap: anywhere; }
.dok small { color: var(--blass); }
.knoepfe { display: flex; gap: 8px; }
.leer { color: var(--blass); margin: 12px 0 0; }
.zeile { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end; margin-top: 12px; }
.zeile .feld { margin: 0; }
@media (max-width: 600px) { .zeile { grid-template-columns: 1fr; } }
h3 { font-size: 1rem; margin: 0 0 4px; }
.eng { max-width: 420px; }
.eng button { margin-top: 8px; }
.abstand { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--rand); }
button.schlicht { display: block; width: 100%; margin-top: 12px; border: 0; background: none; color: var(--akzent); text-decoration: underline; }
.schluessel { font: 600 1.15rem/1.8 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .06em; text-align: center;
  padding: 14px; border: 2px solid var(--akzent); border-radius: 10px; overflow-wrap: anywhere; user-select: all; }
.schluessel span { display: block; }
@media print { button, .haken { display: none !important; } body { background: #fff; color: #000; } .karte { border: 0; } }

/* ---------- Kopfbild mit Verlauf ---------- */
.banner {
  /* Auf dem iPhone reicht das Bild bis unter die Statusleiste (Uhrzeit, Akku):
     viewport-fit=cover im HTML, hier die zusätzliche Höhe für diesen Bereich. */
  position: relative; min-height: calc(clamp(220px, 42vw, 420px) + env(safe-area-inset-top)); display: flex; align-items: flex-end;
  /* oben ein leichter Abendhimmel-Schimmer, unten weich in den Seitenhintergrund */
  background:
    linear-gradient(180deg, rgba(27, 42, 68, .25) 0%, rgba(27, 42, 68, 0) 30%, rgba(0, 0, 0, 0) 70%, var(--hg) 100%),
    linear-gradient(90deg, rgba(18, 22, 29, .25) 0%, rgba(18, 22, 29, 0) 40%),
    url("/bild/kopf.jpg") center 40% / cover no-repeat;
  padding-top: env(safe-area-inset-top);
}
.banner-innen { width: 100%; max-width: 760px; margin: 0 auto; padding: 16px 16px 22px;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.banner h1 { margin: 0; color: #fff; font-size: 2rem; letter-spacing: .01em; text-shadow: 0 2px 12px rgba(0, 0, 0, .55); }
#banner-rechts { display: flex; align-items: center; gap: 10px; }
#banner-rechts .wer { color: #fff; margin: 0; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
button.auf-bild { background: rgba(255, 255, 255, .18); color: #fff; border-color: rgba(255, 255, 255, .45); backdrop-filter: blur(6px); }
.banner + main .schmal { margin-top: 8px; }
@media (min-width: 700px) { .banner h1 { font-size: 2.5rem; } }