/*
 * Die Reise: Onboarding, Startseite "Heute", Fahrplan, Aufgabe.
 * Leitbild in docs/erlebnis.md. Ruhig, warm, gross genug zum Antippen:
 * Schaltflaechen mindestens 48 px, Text mindestens 17 px im Onboarding.
 */
:root {
	--hz-akzent: #87652c;
	--hz-akzent-dunkel: #6f5223;
	--hz-akzent-hell: #f3ead9;
	--hz-sand: #f5efe5;
	--hz-gold: #b08d57;
	--hz-text: #2b2420;
	--hz-leise: #6b5f52;
	--hz-linie: #e6dccb;
	--hz-flaeche: #fffcf7;
	--hz-serif: "Cormorant Garamond", Didot, Georgia, serif;
}
[data-bs-theme="dark"] {
	--hz-akzent: #d4b47a;
	--hz-akzent-dunkel: #e6cb98;
	--hz-akzent-hell: #2b2218;
	--hz-sand: #15110d;
	--hz-gold: #d9bd84;
	--hz-text: #f3e9d6;
	--hz-leise: #c2b49f;
	--hz-linie: #3a3026;
	--hz-flaeche: #1e1913;
}

.hz-akzent { color: var(--hz-akzent) !important; }

.btn.hz-primaer {
	background: var(--hz-akzent);
	color: #fff;
	min-height: 48px;
	border: 0;
}
[data-bs-theme="dark"] .btn.hz-primaer { color: #1a1015; }
.btn.hz-primaer:hover, .btn.hz-primaer:focus-visible { background: var(--hz-akzent-dunkel); color: #fff; }
[data-bs-theme="dark"] .btn.hz-primaer:hover { color: #1a1015; }

/* ------------------------------------------------------------ Reiseschale */
body.hz-reise { background: var(--hz-sand); color: var(--hz-text); font-size: 17px; min-height: 100vh; display: flex; flex-direction: column; }
.hz-kopf { display: flex; justify-content: space-between; align-items: center; padding: 18px 24px; }
.hz-marke { display: inline-flex; align-items: center; }
.hz-marke img { height: 40px; }
.hz-kopf-link { color: var(--hz-leise); font-weight: 600; min-height: 48px; display: inline-flex; align-items: center; }
.hz-buehne { flex: 1; width: 100%; max-width: 680px; margin: 0 auto; padding: 8px 20px 48px; }
.hz-fuss { display: flex; gap: 20px; justify-content: center; padding: 20px; font-size: 0.9rem; }
.hz-fuss a { color: var(--hz-leise); }

.hz-schritt { animation: hz-auftauchen 0.35s ease-out; }
@media (prefers-reduced-motion: reduce) { .hz-schritt { animation: none; } }
@keyframes hz-auftauchen { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.hz-begruessung { text-align: center; padding-top: 40px; }
.hz-gross { font-size: 4rem; color: var(--hz-akzent); display: block; margin-bottom: 16px; }
.hz-fortschritt { color: var(--hz-akzent); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.85rem; margin: 24px 0 8px; }
.hz-frage { font-family: var(--hz-serif); font-size: 2.3rem; font-weight: 600; letter-spacing: 0.01em; line-height: 1.25; margin-bottom: 12px; color: var(--hz-text); }
.hz-frage:focus { outline: none; }
.hz-hilfe { color: var(--hz-leise); font-size: 1.05rem; margin-bottom: 20px; }
.hz-leitsatz { font-size: 1.15rem; color: var(--hz-text); margin-bottom: 24px; }
.hz-antwort { margin: 12px 0 28px; }
.hz-antwort .form-label { font-size: 1rem; font-weight: 600; }
.hz-unterfrage { margin-top: 20px; }

.hz-wahlen { display: grid; gap: 12px; }
.hz-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.hz-wahl { position: relative; display: block; cursor: pointer; margin: 0; }
.hz-wahl input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.hz-wahl span {
	display: flex; flex-direction: column; justify-content: center; min-height: 52px; padding: 12px 18px;
	background: var(--hz-flaeche); border: 2px solid var(--hz-linie); border-radius: 14px; transition: border-color 0.15s, background 0.15s;
}
.hz-chips .hz-wahl span { border-radius: 999px; min-height: 48px; padding: 10px 18px; }
.hz-wahl small { color: var(--hz-leise); font-size: 0.92rem; margin-top: 2px; }
.hz-wahl input:checked + span { border-color: var(--hz-akzent); background: var(--hz-akzent-hell); }
.hz-wahl input:focus-visible + span { outline: 3px solid var(--hz-akzent); outline-offset: 2px; }

.hz-weiter { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.hz-weiter [data-weiter] { margin-left: auto; min-width: 140px; }
.hz-weiter .btn { min-height: 48px; font-size: 1rem; }
.btn.hz-unbekannt { background: transparent; color: var(--hz-akzent); border: 2px dashed var(--hz-akzent) !important; }
.btn.hz-unbekannt:hover { background: var(--hz-akzent-hell); color: var(--hz-akzent); }

.hz-laden { text-align: center; padding: 80px 0; color: var(--hz-leise); }

.hz-block { background: var(--hz-flaeche); border: 1px solid var(--hz-linie); border-radius: 16px; padding: 20px 22px; margin-bottom: 16px; }
.hz-block h2 { font-family: var(--hz-serif); font-size: 1.45rem; font-weight: 600; margin-bottom: 12px; }
.hz-speichern { border: 2px solid var(--hz-akzent); }
.hz-hinweis { margin: 12px 0 4px; }
.hz-quelle { color: var(--hz-leise); font-size: 0.85rem; margin: 0; }

.hz-balken { display: grid; gap: 8px; }
.hz-balken-zeile { display: grid; grid-template-columns: minmax(120px, 38%) 1fr auto; gap: 10px; align-items: center; font-size: 0.95rem; }
.hz-balken-spur { background: var(--hz-akzent-hell); border-radius: 999px; height: 10px; overflow: hidden; }
.hz-balken-fuell { background: var(--hz-akzent); height: 100%; border-radius: 999px; }

/* ------------------------------------------------------------ Listen */
.hz-haken, .hz-liste, .hz-schritte, .hz-kommentare { list-style: none; padding: 0; margin: 0; }
.hz-haken li { padding: 6px 0 6px 30px; position: relative; }
.hz-haken li::before { content: "✓"; position: absolute; left: 4px; color: var(--hz-akzent); font-weight: 700; }
.hz-liste li { padding: 8px 0; border-bottom: 1px solid var(--hz-linie); }
.hz-liste li:last-child { border-bottom: 0; }
.hz-schritte { counter-reset: hz-schritt; display: grid; gap: 14px; }
.hz-schritte > li { counter-increment: hz-schritt; position: relative; padding: 16px 16px 16px 60px; border: 1px solid var(--hz-linie); border-radius: 14px; background: var(--hz-flaeche); }
.hz-schritte > li::before {
	content: counter(hz-schritt); position: absolute; left: 16px; top: 16px; width: 30px; height: 30px; border-radius: 50%;
	background: var(--hz-akzent); color: #fff; display: grid; place-items: center; font-weight: 700;
}
[data-bs-theme="dark"] .hz-schritte > li::before { color: #1a1015; }
.hz-schritte h3 { font-size: 1.1rem; font-weight: 700; margin: 2px 0 6px; }
.hz-schritte p { margin: 0 0 4px; color: var(--hz-leise); }
.hz-schritte .hz-schritt-aktionen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.hz-kommentare li { padding: 10px 0; border-bottom: 1px solid var(--hz-linie); }

/* ------------------------------------------------------------ Meilensteine */
.hz-meilenstein, .hz-feier { display: flex; gap: 16px; align-items: center; border-radius: 16px; background: linear-gradient(135deg, var(--hz-akzent-hell), var(--hz-flaeche)); border: 1px solid var(--hz-akzent); padding: 18px 20px; margin-bottom: 16px; }
.hz-feier { padding: 0; }
.hz-meilenstein i, .hz-feier-symbol { font-size: 2.6rem; color: var(--hz-gold); }
.hz-meilenstein p { margin: 4px 0 0; color: var(--hz-leise); }
.hz-feier-ueber { color: var(--hz-akzent); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.8rem; margin-bottom: 4px; }
@media (prefers-reduced-motion: no-preference) { .hz-feier { animation: hz-auftauchen 0.6s ease-out; } }

/* ------------------------------------------------------------ Kapitelband */
.hz-band { display: flex; gap: 0; list-style: none; padding: 0; margin: 0; overflow-x: auto; scrollbar-width: thin; }
.hz-band li { flex: 1 0 96px; position: relative; text-align: center; padding-top: 2px; }
.hz-band li::before { content: ""; position: absolute; top: 19px; left: -50%; width: 100%; height: 3px; background: var(--hz-linie); z-index: 0; }
.hz-band li:first-child::before { display: none; }
.hz-band li.hz-fertig::before, .hz-band li.hz-jetzt::before { background: var(--hz-akzent); }
.hz-band .hz-punkt { position: relative; z-index: 1; width: 38px; height: 38px; border-radius: 50%; margin: 0 auto 6px; display: grid; place-items: center; font-weight: 700; background: var(--hz-flaeche); border: 3px solid var(--hz-linie); color: var(--hz-leise); }
.hz-band li.hz-fertig .hz-punkt { background: var(--hz-akzent); border-color: var(--hz-akzent); color: #fff; }
.hz-band li.hz-jetzt .hz-punkt { border-color: var(--hz-akzent); color: var(--hz-akzent); box-shadow: 0 0 0 5px var(--hz-akzent-hell); }
.hz-band .hz-name { font-size: 0.82rem; color: var(--hz-leise); display: block; line-height: 1.2; padding: 0 4px; }
.hz-band li.hz-jetzt .hz-name { color: var(--hz-text); font-weight: 700; }
.hz-modus { background: var(--hz-akzent-hell); color: var(--hz-akzent-dunkel); }
.hz-kapitel { border-top: 1px solid var(--hz-linie); padding-top: 18px; }
.hz-karte-hinweis { border: 1px dashed var(--hz-akzent); }

.hz-ampel { width: 18px; height: 18px; border-radius: 50%; display: inline-block; }
.hz-ampel.gruen { background: #2e8b57; } .hz-ampel.gelb { background: #d49b00; } .hz-ampel.rot { background: #c0392b; }

/* ------------------------------------------------------------ Fahrplan */
.hz-zeitachse { display: grid; gap: 24px; }
.hz-zeit-kapitel h2 { font-size: 1.3rem; font-weight: 700; margin-bottom: 2px; }
.hz-zeit-kapitel > p { color: var(--hz-leise); margin-bottom: 12px; }
.hz-zeit-liste { list-style: none; margin: 0; padding: 0 0 0 22px; border-left: 3px solid var(--hz-linie); }
.hz-zeit-liste li { position: relative; padding: 10px 0 10px 16px; }
.hz-zeit-liste li::before { content: ""; position: absolute; left: -31px; top: 18px; width: 16px; height: 16px; border-radius: 50%; background: var(--hz-flaeche); border: 3px solid var(--hz-linie); }
.hz-zeit-liste li.erledigt::before { background: var(--hz-akzent); border-color: var(--hz-akzent); }
.hz-zeit-liste li.uebersprungen { opacity: 0.6; }
.hz-zeit-liste a { font-weight: 600; font-size: 1.05rem; color: var(--hz-text); }
.hz-zeit-liste li.erledigt a { text-decoration: line-through; text-decoration-color: var(--hz-leise); }
.hz-zeit-meta { color: var(--hz-leise); font-size: 0.9rem; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 2px; }

/* ------------------------------------------------------------ Aufgabe */
.hz-warum { background: var(--hz-akzent-hell); border-radius: 12px; padding: 12px 16px; }
.hz-begriff { background: none; border: 0; padding: 0; color: inherit; text-decoration: underline dotted var(--hz-akzent); text-underline-offset: 3px; cursor: help; font: inherit; }
.hz-erklaerung { display: block; margin: 8px 0; padding: 10px 14px; border-left: 3px solid var(--hz-akzent); background: var(--hz-sand); border-radius: 0 10px 10px 0; font-size: 0.95rem; }

/* ------------------------------------------------------------ Feierliches */
.hz-gross { color: var(--hz-gold); }
.hz-zierlinie { display: block; width: 120px; height: 1px; margin: 18px auto; background: linear-gradient(90deg, transparent, var(--hz-gold), transparent); }
.hz-begruessung .hz-frage { font-size: 2.8rem; }
.hz-kopfkarte h1 { font-family: var(--hz-serif); font-size: 2.6rem !important; }
.hz-kapitel h2, .hz-feier h2 { font-family: var(--hz-serif); }
.hz-feier, .hz-meilenstein { background: linear-gradient(135deg, var(--hz-akzent-hell), var(--hz-flaeche) 70%); border-color: var(--hz-gold); }
.hz-feier-symbol, .hz-meilenstein i { color: var(--hz-gold) !important; }
.hz-band li.hz-fertig .hz-punkt { background: linear-gradient(135deg, #7d5c26, #c9a96e); border-color: #b08d57; }
.hz-schritte > li::before { background: linear-gradient(135deg, #7d5c26, #b08d57); }
.btn.hz-primaer { background: linear-gradient(135deg, #7d5c26 0%, #87652c 45%, #9c7a3e 100%); letter-spacing: 0.02em; }
[data-bs-theme="dark"] .btn.hz-primaer { background: linear-gradient(135deg, #c9a96e, #e2c48c); }
.hz-gross-bild { width: 84px; height: 84px; display: block; margin: 0 auto 12px; }

/* Vorschau einer Mail: Text wie verschickt, mit Umbruechen. */
.hz-vorschau {
    white-space: pre-wrap;
    font-family: inherit;
    font-size: 0.95rem;
    background: var(--hz-sand);
    border: 1px solid var(--hz-linie);
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
}

/* ------------------------------------------------------------ Wegweiser und Phasen */
.hz-wegweiser { background: var(--hz-flaeche); border: 1px solid var(--hz-linie); border-left: 4px solid var(--hz-akzent); border-radius: 12px; padding: 14px 18px; margin-bottom: 24px; }
.hz-wegweiser-kopf { display: flex; align-items: center; gap: 12px; }
.hz-wegweiser-knopf { margin-left: auto; }
.hz-phasen { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; counter-reset: phase; }
.hz-phasen li { counter-increment: phase; font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--hz-leise); padding: 4px 10px; border-radius: 999px; border: 1px solid transparent; }
.hz-phasen li::before { content: counter(phase) " "; font-weight: 700; }
.hz-phasen li.hier { color: var(--hz-akzent); border-color: var(--hz-akzent); font-weight: 700; }
.hz-phasen li.jetzt:not(.hier)::after { content: " · jetzt"; text-transform: none; letter-spacing: 0; }
.hz-wegweiser-rumpf { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 12px; }
@media (min-width: 992px) { .hz-wegweiser-rumpf { grid-template-columns: 3fr 2fr; gap: 32px; } }
.hz-wegweiser-ueber { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hz-akzent); font-weight: 700; margin-bottom: 4px; }
.hz-wegweiser-stand { display: flex; flex-direction: column; gap: 4px; margin: 10px 0; }
.hz-wegweiser-weiter { display: inline-block; font-weight: 600; margin-top: 4px; }
.hz-wegweiser-weiter::after { content: " →"; }

/* Phasenband auf "Heute" */
.hz-phasenband { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 8px; }
.hz-phasenband > div { border-radius: 12px; padding: 12px 14px; border: 1px solid var(--hz-linie); background: var(--hz-flaeche); color: var(--hz-leise); }
.hz-phasenband > div.jetzt { border-color: var(--hz-akzent); color: var(--hz-text); box-shadow: inset 0 -3px 0 var(--hz-akzent); }
.hz-phasenband strong { display: block; font-family: var(--hz-serif); font-size: 1.25rem; color: inherit; }
.hz-phasenband span { font-size: 0.85rem; }
@media (max-width: 767px) { .hz-phasenband { grid-template-columns: 1fr; } .hz-phasenband > div:not(.jetzt) span { display: none; } }