/* Totes Wasser: dunkles Seewasser, wie die Soundtrack-Seite. */
:root { --bg: #071114; --flaeche: #0d1c21; --fg: #d9e7ea; --leise: #7f9aa1; --akzent: #3fa7c4; --linie: #1c3138; --rot: #e07a6a; }
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--fg); font: 17px/1.55 -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif; }
a { color: var(--akzent); }
.kopf { display: flex; justify-content: space-between; align-items: center; padding: 18px 16px; max-width: 720px; margin: 0 auto; }
.kopf nav { display: flex; gap: 16px; align-items: center; }
.kopf form { margin: 0; }
.marke { font-weight: 700; font-size: 12px; letter-spacing: 5px; color: var(--leise); text-decoration: none; }
main { max-width: 720px; margin: 0 auto; padding: 0 16px 48px; }
section { margin: 0 0 40px; }
h1 { font: italic 44px/1.05 Georgia, "Times New Roman", serif; margin: 0 0 14px; }
h2 { font-size: 13px; letter-spacing: 3px; text-transform: uppercase; color: var(--leise); margin: 0 0 12px; font-weight: 700; }
.buehne { padding: 48px 0 8px; border-bottom: 1px solid var(--linie); }
.buehne h1 { font-size: clamp(48px, 13vw, 84px); }
.vorspann { color: var(--akzent); font-size: 13px; letter-spacing: 3px; text-transform: uppercase; margin: 0 0 10px; }
.lead { font: italic 21px/1.4 Georgia, serif; color: var(--fg); max-width: 30em; }
.fakten { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.fakten li { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 10px; padding: 12px 14px; color: var(--leise); }
.fakten strong { color: var(--fg); }
.schritte { padding-left: 1.3em; }
.schritte li { margin-bottom: 10px; padding-left: 4px; }
ul li { margin-bottom: 8px; }
.fuss { border-top: 1px solid var(--linie); padding-top: 16px; color: var(--leise); font-size: 14px; }
.fuss a { color: var(--leise); }
.schmal { max-width: 360px; margin: 48px auto; }
.formular { display: grid; gap: 8px; }
.formular label { color: var(--leise); font-size: 14px; margin-top: 8px; }
input[type=email], input[type=password], input[type=text] { font: inherit; color: var(--fg); background: var(--flaeche); border: 1px solid var(--linie); border-radius: 8px; padding: 11px 12px; width: 100%; }
input[type=submit], button { font: 600 16px -apple-system, sans-serif; color: var(--bg); background: var(--fg); border: 0; border-radius: 999px; padding: 12px 24px; cursor: pointer; margin-top: 14px; }
button.link { background: none; color: var(--akzent); padding: 0; margin: 0; font-weight: 400; text-decoration: underline; }
.meldung { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 8px; padding: 10px 14px; }
.meldung.fehler { border-color: var(--rot); color: var(--rot); }
table { border-collapse: collapse; width: 100%; }
td { border-bottom: 1px solid var(--linie); padding: 9px 8px 9px 0; vertical-align: top; }
td:first-child { color: var(--leise); }
code { background: var(--flaeche); padding: 1px 5px; border-radius: 4px; font-size: 0.9em; }