* { box-sizing: border-box; }
body { margin: 0; background: #171a1f; color: #e9eef5; font: 16px/1.5 Segoe UI, Arial, sans-serif; }
.karte { width: min(440px, calc(100% - 32px)); margin: 8vh auto; padding: 28px; border: 1px solid #353c45; border-radius: 12px; background: #20252c; box-shadow: 0 16px 48px #0005; }
h1 { margin-top: 0; font-size: 1.45rem; }
h2 { font-size: 1.15rem; }
label { display: block; margin: 16px 0; color: #cbd5e1; }
input, textarea { display: block; width: 100%; margin-top: 6px; padding: 10px; border: 1px solid #4b5563; border-radius: 6px; background: #15191e; color: #fff; font: inherit; }
textarea { overflow-wrap: anywhere; }
button { padding: 10px 18px; border: 0; border-radius: 6px; background: #1676cc; color: white; font: inherit; cursor: pointer; }
button:disabled { opacity: .55; cursor: wait; }
.meldung { min-height: 1.5em; color: #a9c9e8; }
.meldung.fehler { color: #ff9b9b; }
code { display: block; padding: 10px; border-radius: 6px; background: #101317; overflow-wrap: anywhere; }
button.gefahr { background: #b42318; }
button.gefahr:disabled { cursor: not-allowed; }
.loeschen-bestaetigung input { display: inline-block; width: auto; min-width: 180px; margin-top: 0; }
.hinweis { color: #cbd5e1; }
details.hilfe { margin-top: 24px; padding: 10px 14px; border: 1px solid #353c45; border-radius: 8px; }
details.hilfe summary { cursor: pointer; color: #8ec5ff; }