.kopf { background: var(--flaeche); border-bottom: 1px solid var(--linie); }
.kopf .band { width: min(1060px, 92vw); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; height: 64px; }
.wort { display: flex; align-items: baseline; gap: 9px; font-size: 1.15rem; }
.wort .zusatz { font-weight: 400; color: var(--gedimmt); font-size: 0.9rem; }
.pin-schirm .wort { font-size: 1.5rem; }

.band { width: min(1060px, 92vw); margin-inline: auto; }
main.band { padding: 30px 0 80px; }
.reihe { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; gap: 12px; flex-wrap: wrap; }
.reihe h1 { font-size: 1.5rem; }
.reihe .zahl { color: var(--gedimmt); font-size: 0.95rem; }

.gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.seitenkarte { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.seitenkarte .titelzeile { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.seitenkarte h3 { font-size: 1.1rem; }
.seitenkarte .hostz { color: var(--gedimmt); font-size: 0.85rem; }
.seitenkarte .marken { display: flex; gap: 6px; flex-wrap: wrap; }
.seitenkarte .aktionen { display: flex; gap: 8px; margin-top: auto; flex-wrap: wrap; }
.seitenkarte.pausiert { opacity: 0.72; }

.leer { text-align: center; padding: 60px 20px; color: var(--gedimmt); }

/* Modal */
.hinterlegung { position: fixed; inset: 0; background: rgba(15,18,25,.45); display: none; align-items: center; justify-content: center; z-index: 50; padding: 20px; }
.hinterlegung.auf { display: flex; }
.modal { width: min(560px, 100%); max-height: 90vh; overflow-y: auto; padding: 26px; }
.modal h2 { font-size: 1.3rem; margin-bottom: 4px; }
.modal .unter { color: var(--gedimmt); font-size: 0.92rem; margin-bottom: 20px; }
.modal .zeile { margin-bottom: 15px; }
.modal .zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.modal .modalfuss { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--linie); }
.modal .modalfuss .links { margin-right: auto; }

.wahl { display: flex; gap: 8px; }
.wahl button { flex: 1; padding: 11px; border: 1px solid var(--linie-stark); background: var(--flaeche); border-radius: 10px; font: inherit; font-weight: 500; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer; color: var(--gedimmt); transition: border-color .2s, color .2s, background .2s; }
.wahl button.an { border-color: var(--akzent); background: var(--akzent-weich); color: var(--akzent-tief); }

.kasten { background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: 12px; padding: 14px; }
.kasten .kastenkopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.kasten .kastenkopf label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--gedimmt); font-weight: 500; }
.kasten code { display: block; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.82rem; word-break: break-all; color: var(--tinte); line-height: 1.5; }
.kasten .grosscode { font-size: 1.4rem; font-weight: 500; letter-spacing: 0.18em; }
.kasten .kastenhinweis { margin: 6px 0 0; font-size: 0.85rem; color: var(--gedimmt); line-height: 1.5; }
.kasten-frisch { border-color: var(--akzent); background: var(--akzent-weich); }
.kasten-frisch .grosscode { color: var(--akzent-tief); }

.gefahrzone { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--linie-stark); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gefahrzone span { font-size: 0.86rem; color: var(--gedimmt); }

/* Anmeldung: heller Himmel wie auf der Startseite */
.pin-schirm {
  min-height: 100dvh; display: grid; place-items: center; padding: 24px; position: relative; overflow: hidden;
  color: #0e1638;
  background: linear-gradient(180deg, #4f7fd9 0%, #a8c6f5 55%, #e3eeff 100%);
}
.pin-himmel { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; display: block; }
.pin-schirm::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23k)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.05; mix-blend-mode: overlay;
}
.pin-schirm .box {
  position: relative; z-index: 2;
  width: min(390px, 100%); text-align: center; padding: 40px 34px;
  background: rgba(255, 255, 255, 0.66);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 24px;
  box-shadow: 0 40px 90px -40px rgba(14, 22, 56, 0.5);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  backdrop-filter: blur(22px) saturate(1.3);
}
.pin-schirm .wort { gap: 0; justify-content: center; font-size: 1.55rem; }
.pin-schirm .marke-ab { color: #0e1638; }
.pin-schirm h1 { font-size: 1.3rem; margin: 18px 0 6px; letter-spacing: -0.02em; color: #0e1638; }
.pin-schirm p { color: #47517e; font-size: 0.92rem; margin-bottom: 22px; }
.pin-schirm .feld { background: rgba(255, 255, 255, 0.55); border-color: rgba(14, 22, 56, 0.18); color: #0e1638; }
.pin-schirm .feld:focus { border-color: var(--akzent); box-shadow: 0 0 0 3px rgba(57, 50, 220, 0.12); }
.pin-schirm .feld::placeholder { color: #8a93b6; }
.pin-schirm .pin-feld { text-align: center; letter-spacing: 0.4em; font-size: 1.3rem; font-weight: 500; }
.pin-schirm .knopf { background: #0e1638; color: #f5f8ff; }
@media (pointer: fine) { .pin-schirm .knopf:hover { background: var(--akzent); color: #fff; } }
.pin-schirm .fehler { color: #c62a2a; font-size: 0.88rem; min-height: 1.2em; margin-top: 10px; }
#dashboard { display: none; }
#dashboard.an { display: block; }