:root {
  --grund: #10141c; --karte: #1a2130; --rand: #2b3546;
  --text: #e8edf5; --leise: #97a3b6;
  --akzent: #4ade80; --akzent-tief: #16341f; --akzent-rand: #2f6b41; --akzent-text: #08240f;
  --warn: #3a2a12; --warn-rand: #7a5a20; --warn-text: #f0d9a8;
  --fehler: #3a1a1c; --fehler-rand: #7a2f36; --fehler-text: #f5c2c7;
}
@media (prefers-color-scheme: light) {
  :root {
    --grund:#f6f8fb; --karte:#fff; --rand:#dde3ec; --text:#161c26; --leise:#5b6676;
    --akzent:#15803d; --akzent-tief:#eaf7ef; --akzent-rand:#b7dfc6; --akzent-text:#fff;
    --warn:#fdf6e3; --warn-rand:#e3cc8f; --warn-text:#6b4e12;
    --fehler:#fdeaec; --fehler-rand:#f0b4bb; --fehler-text:#8a1f2a;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0; padding: 0 1rem 4rem;
  background: var(--grund); color: var(--text);
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif;
}
a { color: var(--akzent); }
.huelle { max-width: 62rem; margin: 0 auto; }
.schmal { max-width: 34rem; }

header { padding: 2.5rem 0 1.75rem; text-align: center; }
header h1 { margin: 0 0 .35rem; font-size: clamp(1.7rem, 5vw, 2.5rem); letter-spacing: -.02em; }
header p { margin: 0; color: var(--leise); }
.adresse {
  display: inline-block; margin-top: .75rem; padding: .4rem .9rem;
  background: var(--karte); border: 1px solid var(--rand); border-radius: .5rem;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace; color: var(--akzent);
}

.gitter { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.karte {
  background: var(--karte); border: 1px solid var(--rand); border-radius: .9rem;
  padding: 1.5rem; display: flex; flex-direction: column;
}
.karte h2 { margin: 0 0 .25rem; font-size: 1.3rem; }
.preis { font-size: 2rem; font-weight: 700; color: var(--akzent); margin: .5rem 0 .1rem; }
.takt { color: var(--leise); font-size: .9rem; }
.karte p { color: var(--leise); font-size: .95rem; }

ul.vorteile { list-style: none; padding: 0; margin: 1rem 0; flex: 1; }
ul.vorteile li { padding: .35rem 0 .35rem 1.5rem; position: relative; }
ul.vorteile li::before { content: "✓"; position: absolute; left: 0; color: var(--akzent); font-weight: 700; }

.knopf {
  display: block; width: 100%; padding: .8rem 1rem; border: 0; border-radius: .55rem;
  background: var(--akzent); color: var(--akzent-text); font: inherit; font-weight: 650;
  cursor: pointer; text-align: center; text-decoration: none; min-height: 44px;
}
.knopf:hover { filter: brightness(1.08); }
.knopf.leise { background: transparent; border: 1px solid var(--rand); color: var(--text); font-weight: 500; }

label { display: block; margin: 1.25rem 0 .35rem; font-weight: 600; }
input[type=text] {
  width: 100%; padding: .75rem .9rem; min-height: 44px;
  background: var(--grund); color: var(--text);
  border: 1px solid var(--rand); border-radius: .55rem; font: inherit;
}
input[type=text]:focus { outline: 2px solid var(--akzent); outline-offset: 1px; }
.hilfe { color: var(--leise); font-size: .875rem; margin: .4rem 0 0; }

.meldung { margin: 1.25rem 0; padding: .9rem 1.1rem; border-radius: .6rem; font-size: .95rem; border: 1px solid; }
.meldung.gut    { background: var(--akzent-tief); border-color: var(--akzent-rand); color: var(--text); }
.meldung.warn   { background: var(--warn);   border-color: var(--warn-rand);   color: var(--warn-text); }
.meldung.fehler { background: var(--fehler); border-color: var(--fehler-rand); color: var(--fehler-text); }

.zeile { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--rand); }
.zeile:last-child { border-bottom: 0; }
.zeile dt { color: var(--leise); margin: 0; }
.zeile dd { margin: 0; text-align: right; font-weight: 600; }
.nummer { font-family: ui-monospace, Consolas, monospace; letter-spacing: .04em; }

footer { margin-top: 3rem; text-align: center; color: var(--leise); font-size: .85rem; }
footer a { color: var(--leise); }