/* distantlines Creator-Plattform. Schriften liegen lokal (keine Anfrage an Google). */
@font-face { font-family: Marcellus; src: url("schriften/marcellus-latin.dc6fd559e41d.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: Outfit; src: url("schriften/outfit-latin.98ccc2b7f189.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
/* Aufbau: eine ruhige Spalte wie ein Begleitheft zur Geschenkbox. Dunkles Weinrot auf Creme,
   Gold nur dort, wo etwas verdient oder erreicht ist (Fortschritt, Code-Karte, aktuelle Stufe). */
:root {
  color-scheme: light;
  --tief: #50000b; --akzent: #6b0010; --creme: #fffcf9; --sand: #f7eee6; --sand2: #f5ede0;
  --linie: #ead9d2; --grau: #765357; --gold1: #dbb15c; --gold2: #fde9bf; --weiss: #ffffff;
  --gut: #2e6b3a; --gut-bg: #e7f1e6; --warn: #8a5a00; --warn-bg: #fbefcf; --krit: #9a1b1b; --krit-bg: #f9e1dd;
  --serif: Marcellus, Georgia, "Times New Roman", serif;
  --sans: Outfit, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--creme); color: var(--tief); font-family: var(--sans); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--creme); }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -.01em; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(34px, 6.4vw, 54px); line-height: 1.08; }
h2 { font-size: clamp(24px, 4vw, 30px); line-height: 1.2; }
h3 { font-size: 20px; line-height: 1.25; }
p { margin: 0; }
a { color: var(--akzent); }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.band { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.spalte { max-width: 900px; margin: 0 auto; }
.klein { font-size: 14px; color: var(--grau); }
.marke { font-family: var(--sans); font-weight: 700; font-size: 21px; letter-spacing: -.02em; text-decoration: none; color: var(--tief); }
.auge { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--grau); }
.stapel { display: flex; flex-direction: column; gap: 16px; }
.stapel-gross { display: flex; flex-direction: column; gap: 36px; }

.beispiel { display: inline-block; background: var(--warn-bg); color: var(--warn); border-radius: 4px; padding: 1px 7px; font-size: 11px; font-weight: 600; letter-spacing: .04em; }

/* Kopf */
.kopf { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 9; background: var(--creme); border-bottom: 1px solid var(--linie); }
.kopf .spalte { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; padding-block: 12px; }
.kopf nav { display: flex; flex-wrap: wrap; gap: 4px 18px; flex: 1; min-width: 0; }
.kopf nav a { text-decoration: none; color: var(--grau); font-size: 15px; padding: 4px 0; border-bottom: 2px solid transparent; }
.kopf nav a[aria-current="page"] { color: var(--tief); font-weight: 600; border-bottom-color: var(--akzent); }

main { padding-block: 40px 72px; }
.knopf { display: inline-block; border: 0; background: var(--akzent); color: var(--weiss); border-radius: 24px; padding: 15px 26px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-align: center; text-decoration: none; }
.knopf[disabled] { background: var(--linie); color: var(--grau); cursor: not-allowed; }
.knopf.hell { background: var(--weiss); color: var(--akzent); border: 1px solid var(--akzent); }
.knopf.breit { display: block; width: 100%; }

/* Onboarding */
.fortschritt { background: var(--tief); color: var(--creme); border-radius: 18px; padding: 26px; }
.fortschritt h2 { color: var(--creme); margin: 6px 0 16px; }
.fortschritt .auge { color: var(--gold2); }
.balken { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 16px; }
.balken i { height: 8px; border-radius: 999px; background: rgba(255,252,249,.18); }
.balken i.an { background: linear-gradient(90deg, var(--gold1), var(--gold2)); }
.fortschritt p { color: rgba(255,252,249,.82); font-size: 15px; max-width: 62ch; }
.schritt { background: var(--weiss); border: 1px solid var(--linie); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.schritt.fertig { border-color: var(--gold1); }
.schritt header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.schritt header .auge { flex: 0 0 100%; }
.drei { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.drei > div { background: var(--sand); border-radius: 12px; padding: 16px; min-width: 0; }
.drei b { display: block; margin-bottom: 4px; }
.zwei { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.zwei > * { min-width: 0; }
ul.liste { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
ul.liste li { padding-left: 26px; position: relative; }
ul.liste li::before { content: ""; position: absolute; left: 4px; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: var(--gold1); }
ul.liste.ja li::before { content: "✓"; background: none; top: 0; left: 2px; width: auto; height: auto; color: var(--gut); font-weight: 700; }
ul.liste.nein li::before { content: "✕"; background: none; top: 0; left: 2px; width: auto; height: auto; color: var(--krit); font-weight: 700; }
.hinweis { background: var(--krit-bg); border: 1px solid var(--krit); color: var(--krit); border-radius: 12px; padding: 14px 16px; }
.haken { display: flex; gap: 12px; align-items: flex-start; border: 1.5px solid var(--linie); border-radius: 12px; padding: 14px 16px; cursor: pointer; background: var(--creme); }
.haken input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--akzent); flex: none; }
.haken:has(input:checked) { border-color: var(--gold1); background: var(--sand2); }
.platzhalter { border: 1px dashed var(--grau); border-radius: 12px; padding: 22px 16px; text-align: center; color: var(--grau); font-size: 14px; background: var(--sand); }
.tabelle { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 15px; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--linie); white-space: nowrap; }
th { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--grau); font-weight: 600; }
.geschenk { border: 2px dashed var(--gold1); background: var(--sand2); border-radius: 16px; padding: 28px 24px; text-align: center; display: flex; flex-direction: column; gap: 12px; align-items: center; }

/* Code-Karte */
.karte { position: relative; display: grid; grid-template-columns: 1fr 220px; border-radius: 18px; overflow: hidden; background: linear-gradient(120deg, var(--gold1), var(--gold2) 55%, var(--gold1)); color: #3a2a06; }
.karte .text { padding: 26px; display: flex; flex-direction: column; gap: 12px; min-width: 0; border-right: 2px dashed rgba(58,42,6,.35); }
.karte .text .auge { color: #5b4410; }
.karte h2 { font-size: clamp(28px, 5vw, 40px); color: #3a2a06; }
.karte img { width: 100%; height: 100%; object-fit: cover; display: block; }
.codezeile { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.code { font-family: var(--mono); font-size: 18px; letter-spacing: .08em; border: 1.5px dashed rgba(58,42,6,.55); border-radius: 10px; padding: 9px 14px; background: rgba(255,255,255,.4); user-select: all; }
.kopieren { border: 1px solid rgba(58,42,6,.4); background: rgba(255,255,255,.55); border-radius: 999px; padding: 7px 14px; font-size: 13px; color: #3a2a06; }
.karte.zu .code { filter: blur(6px); user-select: none; }
.feld { background: var(--weiss); border: 1px solid var(--linie); border-radius: 14px; padding: 18px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.feld .code { font-size: 16px; border-color: var(--linie); background: var(--sand); color: var(--tief); overflow-wrap: anywhere; }
.feld .kopieren { border-color: var(--linie); background: var(--weiss); color: var(--tief); }
.zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.zahlen > div { border-top: 2px solid var(--tief); padding-top: 10px; min-width: 0; }
.zahlen b { display: block; font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.zahlen span { font-size: 13px; color: var(--grau); }

/* Stufen */
.stufe { display: grid; grid-template-columns: 54px 1fr auto; gap: 6px 16px; align-items: center; border: 1px solid var(--linie); border-radius: 14px; padding: 16px 18px; background: var(--weiss); }
.stufe .nr { font-family: var(--serif); font-size: 26px; color: var(--grau); }
.stufe .satz { font-family: var(--serif); font-size: 30px; white-space: nowrap; }
.stufe.jetzt { border: 2px solid var(--gold1); background: var(--sand2); }
.stufe .marke-jetzt { display: inline-block; margin-left: 8px; background: var(--tief); color: var(--creme); border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 600; }
.leiste { grid-column: 2 / -1; height: 6px; border-radius: 999px; background: var(--linie); overflow: hidden; }
.leiste i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold1), var(--gold2)); }

/* Briefing */
.briefing { background: var(--tief); color: var(--creme); border-radius: 18px; overflow: hidden; display: grid; grid-template-columns: 1.2fr 1fr; }
.briefing .text { padding: 30px 26px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.briefing h1 { color: var(--creme); font-size: clamp(30px, 5vw, 44px); }
.briefing h1 em { font-style: normal; color: var(--gold2); }
.briefing img { width: 100%; height: 100%; min-height: 220px; object-fit: cover; display: block; }
.pille { align-self: flex-start; background: linear-gradient(90deg, var(--gold1), var(--gold2)); color: #3a2a06; border-radius: 999px; padding: 4px 12px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.fakten { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.fakten > div { border: 1px solid var(--linie); border-radius: 12px; padding: 14px 16px; background: var(--weiss); min-width: 0; }
.fakten > div.offen { border-style: dashed; border-color: var(--grau); background: var(--sand); }
.fakten b { display: block; font-size: 17px; }
.bilder { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.bilder img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; display: block; }

/* Admin */
.status { display: inline-block; border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 600; }
.status.gut { background: var(--gut-bg); color: var(--gut); }
.status.warn { background: var(--warn-bg); color: var(--warn); }
.status.krit { background: var(--krit-bg); color: var(--krit); }
.status.neutral { background: var(--sand); color: var(--grau); }
.bedarf { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: center; border: 1px solid var(--linie); border-left: 4px solid var(--warn); border-radius: 10px; padding: 12px 16px; background: var(--weiss); }
.bedarf.krit { border-left-color: var(--krit); }
.bedarf button { border: 1px solid var(--akzent); background: var(--weiss); color: var(--akzent); border-radius: 999px; padding: 6px 14px; font-size: 13px; white-space: nowrap; }
.quelle { background: var(--sand); border-radius: 12px; padding: 16px 18px; font-size: 14px; }

footer { border-top: 1px solid var(--linie); padding-block: 26px 40px; font-size: 14px; color: var(--grau); }
footer .spalte { display: flex; flex-wrap: wrap; gap: 8px 28px; justify-content: space-between; }
footer .adresse { user-select: all; color: var(--tief); font-weight: 600; }
.toast { position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--tief); color: var(--creme); border-radius: 999px; padding: 9px 18px; font-size: 14px; z-index: 20; }

@media (max-width: 640px) {
  .kopf nav { order: 3; flex: 0 0 100%; }
    .karte, .briefing { grid-template-columns: 1fr; }
  .karte .text { border-right: 0; border-bottom: 2px dashed rgba(58,42,6,.35); }
  .karte img { max-height: 220px; }
  .stufe { grid-template-columns: 40px 1fr; }
  .stufe .satz { grid-column: 2; font-size: 24px; }
  .bedarf { grid-template-columns: 1fr; }
  .schritt, .fortschritt { padding: 20px 18px; }
}
@media (prefers-reduced-motion: no-preference) { .balken i, .leiste i { transition: background .3s, width .3s; } }

/* --- Ergänzungen der echten Plattform (ersetzen die style-Attribute des Entwurfs) --- */
.schmal { max-width: 62ch; }
.hell { color: rgba(255,252,249,.82); }
.bild-43 { border-radius: 12px; aspect-ratio: 4/3; object-fit: cover; width: 100%; display: block; }
.karte-hinweis { font-size: 14px; }
.karte a:not(.knopf) { color: #3a2a06; }
.ganze-zeile { grid-column: 2 / -1; }
.kopf form { margin: 0; }
.kopf .abmelden { border: 1px solid var(--linie); background: var(--weiss); border-radius: 999px; padding: 6px 14px; font-size: 13px; color: var(--grau); }
.kopf .wer { font-size: 13px; color: var(--grau); }
button.haken { width: 100%; text-align: left; font-size: 16px; }
.haken .kasten { width: 20px; height: 20px; border: 1.5px solid var(--grau); border-radius: 4px; flex: none; margin-top: 2px; background: var(--weiss); }
.haken.fertig { border-color: var(--gold1); background: var(--sand2); cursor: default; }
.haken.fertig .kasten { border-color: var(--gut); background: var(--gut); position: relative; }
.haken.fertig .kasten::after { content: "✓"; position: absolute; inset: 0; color: var(--weiss); font-size: 14px; line-height: 18px; text-align: center; }
button.haken:hover { border-color: var(--akzent); }
progress.leiste { -webkit-appearance: none; appearance: none; border: 0; width: 100%; display: block; }
progress.leiste::-webkit-progress-bar { background: var(--linie); border-radius: 999px; }
progress.leiste::-webkit-progress-value { background: linear-gradient(90deg, var(--gold1), var(--gold2)); border-radius: 999px; }
progress.leiste::-moz-progress-bar { background: var(--gold1); border-radius: 999px; }
.anmeldung { max-width: 460px; margin: 6vh auto 0; display: flex; flex-direction: column; gap: 18px; }
.anmeldung label { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--grau); display: block; margin-bottom: 6px; }
.anmeldung input[type=email] { width: 100%; font: inherit; color: var(--tief); padding: 14px 16px; border: 1.5px solid var(--linie); border-radius: 12px; background: var(--weiss); }
.anmeldung input[type=email]:focus { border-color: var(--akzent); outline: none; }
.meldung { border-radius: 12px; padding: 12px 16px; background: var(--sand); border: 1px solid var(--linie); }
.meldung.error { background: var(--krit-bg); border-color: var(--krit); color: var(--krit); }
.meldung.warning { background: var(--warn-bg); border-color: var(--warn); color: var(--warn); }
.schalter { display: flex; flex-wrap: wrap; gap: 8px; }
.bedarf form { margin: 0; }
.neuigkeit { border-bottom: 1px solid var(--linie); padding-bottom: 24px; display: flex; flex-direction: column; gap: 8px; }
.neuigkeit p { max-width: 62ch; }
.leer { border: 1px dashed var(--grau); border-radius: 12px; padding: 22px 16px; color: var(--grau); background: var(--sand); }
.briefing + .fakten { margin-top: -12px; }

.schritt, #abschluss { scroll-margin-top: 110px; }