/* philipppivots — Design-System (mobile first)
   Farben aus stil.md / Brand Book. Keine externen Schriften: System-Stack, Inter wo installiert.
   Akzent (#E85A2A) höchstens zweimal je Ansicht. */

:root {
  --bg: #0F1115;
  --text: #F5F5F0;
  --akzent: #E85A2A;
  --neben: #D6A98F;
  --karte: #171A20;
  --rand: #262B33;
  --fehler: #F87171;
  --font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --radius: 14px;
  --radius-sm: 10px;
  --abstand: 20px;
  --schatten: 0 10px 30px rgba(0, 0, 0, .35);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  padding-bottom: env(safe-area-inset-bottom);
}
a { color: inherit; }
img, svg { max-width: 100%; display: block; }
button, input { font: inherit; }

.wrap { max-width: 560px; margin: 0 auto; padding: 44px var(--abstand) 40px; }
@media (min-width: 600px) { .wrap { padding-top: 64px; } }

/* --- Kopf --- */
.kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; }
.punkt { width: 12px; height: 12px; border-radius: 50%; background: var(--akzent); flex-shrink: 0; }
.marke { font-size: 14px; color: var(--neben); letter-spacing: .01em; text-decoration: none; }
.marke:hover { color: var(--text); }

.pille {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--akzent);
  border: 1px solid rgba(74, 222, 128, .32); background: rgba(74, 222, 128, .07);
  border-radius: 999px; padding: 7px 14px; margin-bottom: 22px;
}
.pille b { font-weight: 700; }
.pille.aus { display: none; }

/* --- Typografie --- */
h1 { font-size: clamp(30px, 8vw, 42px); font-weight: 800; line-height: 1.12; letter-spacing: -.02em; }
h1 .hl { color: var(--akzent); }
h2 { font-size: 15px; font-weight: 700; color: var(--neben); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 14px; }
.sub { color: var(--neben); font-size: 17px; margin-top: 16px; max-width: 46ch; }
.klein { font-size: 13px; color: var(--neben); }
.klein a { color: var(--neben); }

/* --- Cover-Karte (rein CSS, kein Bild) --- */
.cover { margin: 30px 0 34px; padding: 0 6px; }
.blatt {
  background: var(--karte); border: 1px solid var(--rand); border-radius: var(--radius);
  padding: 22px 22px 18px; box-shadow: var(--schatten);
  transform: rotate(-1.2deg);
}
.blatt .punkt { width: 10px; height: 10px; margin-bottom: 14px; }
.blatt .titel { font-size: 20px; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; }
.blatt .titel .hl { color: var(--akzent); }
.blatt .zeilen { margin: 16px 0 18px; display: grid; gap: 8px; }
.blatt .zeilen i { display: block; height: 7px; border-radius: 4px; background: var(--rand); }
.blatt .zeilen i:nth-child(2) { width: 82%; }
.blatt .zeilen i:nth-child(3) { width: 64%; }
.blatt .zeilen i:nth-child(4) { width: 90%; }
.blatt .fuss { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; font-size: 11px; color: var(--neben); }

/* --- Nutzen --- */
.nutzen { margin: 0 0 34px; }
.nutzen ul { list-style: none; display: grid; gap: 10px; }
.nutzen li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; }
.nutzen li::before {
  content: ""; flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%;
  background: var(--akzent); margin-top: 9px;
}

/* --- Formular --- */
.karte { background: var(--karte); border: 1px solid var(--rand); border-radius: var(--radius); padding: 24px 20px; }
.karte h3 { font-size: 18px; font-weight: 800; margin-bottom: 6px; letter-spacing: -.01em; }
.karte .klein { margin-bottom: 16px; }
form { display: grid; gap: 12px; }
label { font-size: 13px; color: var(--neben); }
.feld {
  width: 100%; background: #0B0D11; border: 1px solid var(--rand); border-radius: var(--radius-sm);
  padding: 15px 16px; color: var(--text); font-size: 16px; /* 16px verhindert iOS-Zoom */
  min-height: 52px;
}
.feld::placeholder { color: #5E626B; }
.feld:focus { outline: none; border-color: var(--akzent); box-shadow: 0 0 0 3px rgba(74, 222, 128, .18); }
.feld[aria-invalid="true"] { border-color: var(--fehler); }
.knopf {
  width: 100%; min-height: 54px; margin-top: 4px;
  background: var(--akzent); color: #0B1410; border: 0; border-radius: var(--radius-sm);
  padding: 15px 20px; font-size: 17px; font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  transition: filter .15s, transform .05s;
}
.knopf:hover { filter: brightness(1.06); }
.knopf:active { transform: translateY(1px); }
.knopf:disabled { opacity: .7; cursor: wait; }
.knopf .kreis { display: none; width: 16px; height: 16px; border: 2px solid rgba(11, 20, 16, .35); border-top-color: #0B1410; border-radius: 50%; animation: dreh .8s linear infinite; }
.knopf.laedt .kreis { display: inline-block; }
@keyframes dreh { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .knopf .kreis { animation: none; } .blatt { transform: none; } }

.fehler { color: var(--fehler); font-size: 14px; border: 1px solid rgba(248, 113, 113, .35); background: rgba(248, 113, 113, .08); border-radius: var(--radius-sm); padding: 10px 12px; }
.tipp { font-size: 14px; color: var(--akzent); cursor: pointer; text-decoration: underline; background: none; border: 0; text-align: left; padding: 0; }
[hidden] { display: none !important; }

.haken { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--neben); cursor: pointer; }
.haken input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--akzent); flex-shrink: 0; }

/* --- Vertrauen --- */
.vertrauen { margin: 30px 0 0; display: grid; gap: 10px; }
.vertrauen div { display: flex; gap: 12px; font-size: 15px; color: var(--neben); }
.vertrauen b { color: var(--text); font-weight: 600; }
.vertrauen .haken-icon { flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--rand); display: grid; place-items: center; font-size: 11px; color: var(--akzent); margin-top: 2px; }

/* --- Schritte --- */
.schritte { margin-top: 34px; display: grid; gap: 12px; }
.schritt { display: flex; gap: 14px; align-items: flex-start; }
.schritt .nr { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--rand); background: var(--karte); display: grid; place-items: center; font-size: 13px; font-weight: 700; color: var(--neben); }
.schritt p { font-size: 15px; color: var(--neben); }
.schritt p b { color: var(--text); font-weight: 600; }

/* --- Hub-Liste --- */
.liste { margin-top: 40px; border-top: 1px solid var(--rand); padding-top: 28px; }
.g { display: flex; align-items: baseline; gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--rand); text-decoration: none; color: inherit; }
.g:last-of-type { border-bottom: 0; }
.g .kw { font-size: 12px; font-weight: 700; color: var(--neben); border: 1px solid var(--rand); border-radius: 6px; padding: 3px 8px; min-width: 76px; text-align: center; flex-shrink: 0; }
.g .t { font-size: 16px; flex: 1; }
.g .pfeil { color: var(--neben); }
a.g:hover .t { text-decoration: underline; }
a.g:hover .pfeil { color: var(--akzent); }
.g.aktiv .kw { color: var(--akzent); border-color: rgba(74, 222, 128, .4); }
.g.aktiv .t { font-weight: 700; }
.g.offen .t, .g.offen .bald { color: var(--neben); }
.g.offen .kw { opacity: .5; }
.g .bald { font-size: 12px; }

/* --- Danke-Seite --- */
.download { margin-top: 26px; }
.postfach { margin-top: 26px; padding: 18px 20px; border: 1px solid var(--rand); border-radius: var(--radius); background: var(--karte); }
.postfach p { font-size: 15px; }
.postfach p + p { margin-top: 8px; }

/* --- Rechtstexte --- */
.recht { font-size: 15px; color: var(--neben); line-height: 1.65; }
.recht p { margin-bottom: 14px; }
.recht a { color: var(--text); }

/* --- Fuß --- */
footer { margin-top: 48px; border-top: 1px solid var(--rand); padding-top: 22px; font-size: 13px; color: var(--neben); display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
footer a { color: var(--neben); }
footer a:hover { color: var(--text); }
.hinweis { width: 100%; }