/* ==========================================================================
   MedienStop Eltern-SOC - warmes Markendesign (Pergament / Glut / Lora)
   Tokens uebernommen aus dem Prototyp (07_Prototypen/eltern-soc-prototyp.html).
   Mobil-first (ca. 390 px), Fonts werden lokal geladen (DSGVO - kein Google CDN).
   ========================================================================== */

/* --- Lokale Schrift Lora (liegt in wwwroot/fonts) ------------------------- */
@font-face {
    font-family: 'Lora';
    src: url('/fonts/Lora.ttf') format('truetype');
    font-weight: 400 600;
    font-display: swap;
}
@font-face {
    font-family: 'Lora';
    src: url('/fonts/Lora-Bold.ttf') format('truetype');
    font-weight: 700;
    font-display: swap;
}

:root {
    --pergament: #F3EADD;
    --karte: #FBF6EE;
    --rahmen: #E2D3BD;
    --text: #3A2E25;
    --gedaempft: #6E5E4F;
    --glut: #C75B39;
    --glut-dkl: #6B3F1D;
    --sanft: #F0DBBE;
    --gruen: #5E7B4F;
    --radius: 14px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--pergament);
    color: var(--text);
    font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    line-height: 1.6;
}

h1, h2, h3 { font-family: 'Lora', Georgia, serif; font-weight: 600; line-height: 1.25; margin: 0 0 .4rem; }
h1 { font-size: 1.7rem; }
h2 { font-size: 1.3rem; }
a { color: var(--glut-dkl); }

/* --- Kopf / Navigation ---------------------------------------------------- */
.kopf { background: var(--karte); border-bottom: 1px solid var(--rahmen); }
.kopf-inner, .fuss-inner, .inhalt {
    max-width: 1040px; margin: 0 auto; padding: .8rem 1.2rem;
}
.kopf-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; }
.logo { font-family: 'Lora', Georgia, serif; font-size: 1.2rem; font-weight: 700; text-decoration: none; color: var(--text); }
.logo .flamme { color: var(--glut); }
.logo-sub { color: var(--gedaempft); font-weight: 400; font-size: .95rem; }
.nav { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.nav a { text-decoration: none; color: var(--text); font-weight: 600; }
.nav a:hover { color: var(--glut); }
.link-btn { background: none; border: none; color: var(--glut-dkl); font: inherit; font-weight: 600; cursor: pointer; padding: 0; }
.logout-form { display: inline; }

.inhalt { padding-top: 1.4rem; padding-bottom: 2.5rem; }

/* --- Hero ----------------------------------------------------------------- */
.hero { display: flex; gap: 1.4rem; align-items: center; flex-wrap: wrap; margin-bottom: 1.4rem; }
.hero-text { flex: 1 1 320px; }
.kicker { display: inline-block; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: var(--glut-dkl); background: var(--sanft); border: 1px solid var(--rahmen); border-radius: 99px; padding: .15rem .6rem; margin-bottom: .5rem; }
.strich { width: 70px; height: 3px; background: var(--glut); border-radius: 2px; margin: .5rem 0 .8rem; }
.lead { color: var(--gedaempft); font-size: 1.05rem; }

/* --- Fortschritts-Ring ---------------------------------------------------- */
.ring { text-align: center; flex: 0 0 auto; }
.ring svg { display: block; }
.ring-bg { fill: none; stroke: var(--sanft); stroke-width: 10; }
.ring-fg { fill: none; stroke: var(--glut); stroke-width: 10; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 60px 60px; transition: stroke-dashoffset .5s ease; }
.ring .pz { font-family: 'Lora', Georgia, serif; font-size: 1.4rem; font-weight: 700; fill: var(--glut-dkl); }
.ring-sub { display: block; font-size: .85rem; color: var(--gedaempft); margin-top: .2rem; }

/* --- Karten --------------------------------------------------------------- */
.karte { background: var(--karte); border: 1px solid var(--rahmen); border-radius: var(--radius); padding: 1.1rem 1.3rem; margin: 1rem 0; }

/* --- Badges / Pills ------------------------------------------------------- */
.badge-glut { display: inline-block; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #fff; background: var(--glut); border-radius: 99px; padding: .2rem .7rem; margin-bottom: .5rem; }

/* --- Naechste Station ----------------------------------------------------- */
.naechste .einordnung { color: var(--gedaempft); }
.naechste.fertig { border-color: var(--gruen); }
.checkliste { list-style: none; padding: 0; margin: .8rem 0; }
.checkliste li { position: relative; padding: .25rem 0 .25rem 1.6rem; border-bottom: 1px dashed var(--rahmen); }
.checkliste li:before { content: "\2610"; position: absolute; left: 0; color: var(--glut); font-size: 1.05rem; }

/* --- Buttons -------------------------------------------------------------- */
.aktionen { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .9rem; }
.aktionen form { margin: 0; }
.btn { display: inline-block; border: 1px solid var(--rahmen); border-radius: 99px; padding: .5rem 1.1rem; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; background: var(--karte); color: var(--text); }
.btn-glut { background: var(--glut); border-color: var(--glut); color: #fff; }
.btn-glut:hover { background: var(--glut-dkl); border-color: var(--glut-dkl); }
.btn-leise { background: var(--sanft); }
.btn-link { background: none; border: none; color: var(--glut-dkl); padding: .5rem .3rem; }

/* --- Etappen-Akkordeon ---------------------------------------------------- */
.abschnitt-titel { margin-top: 1.8rem; }
details.etappe { border: 1px solid var(--rahmen); border-radius: 10px; background: var(--karte); margin: .7rem 0; padding: 0 1rem; }
details.etappe > summary { display: flex; align-items: center; gap: .6rem; padding: .8rem 0; cursor: pointer; list-style: none; flex-wrap: wrap; }
details.etappe > summary::-webkit-details-marker { display: none; }
.enr { font-size: 1.2rem; }
.etappe-titel { font-family: 'Lora', Georgia, serif; font-weight: 700; flex: 1 1 auto; }
.etappe-meta { color: var(--gedaempft); font-size: .9rem; }
.balken { flex: 1 1 100%; height: .5rem; background: var(--sanft); border-radius: 99px; overflow: hidden; }
.balken i { display: block; height: 100%; background: var(--glut); border-radius: 99px; transition: width .5s ease; }
.etappe-unter { color: var(--gedaempft); font-size: .95rem; margin: .2rem 0 .8rem; }

/* --- Station -------------------------------------------------------------- */
.station { border-top: 1px dashed var(--rahmen); padding: .7rem 0; }
.station-kopf { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.station-titel { font-weight: 600; }
.opt { font-size: .72rem; color: var(--gedaempft); background: var(--sanft); border-radius: 99px; padding: .05rem .45rem; margin-left: .35rem; }
.status-pill { font-size: .75rem; font-weight: 700; border-radius: 99px; padding: .12rem .6rem; }
.status-offen { background: var(--sanft); color: var(--glut-dkl); }
.status-erledigt { background: var(--gruen); color: #fff; }
.status-uebersprungen { background: #E6DED2; color: var(--gedaempft); }
.station.ist-erledigt .station-titel { color: var(--gruen); }
.station.ist-uebersprungen { opacity: .65; }
.station-aktionen { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.station-aktionen form { margin: 0; }
.mini { border: 1px solid var(--rahmen); background: var(--karte); border-radius: 99px; padding: .25rem .7rem; font: inherit; font-size: .85rem; cursor: pointer; text-decoration: none; color: var(--text); }
.mini-glut { background: var(--glut); border-color: var(--glut); color: #fff; }
.mini-link { background: none; border: none; color: var(--glut-dkl); }

/* --- Startseite ----------------------------------------------------------- */
.drei-schritte { display: grid; grid-template-columns: 1fr; gap: 1rem; margin: 1.5rem 0; }
.schritt { position: relative; }
.snr { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--glut); color: #fff; font-family: 'Lora', Georgia, serif; font-weight: 700; margin-bottom: .4rem; }
.fussnote-start { color: var(--gedaempft); font-style: italic; margin-top: 1.5rem; }

/* --- Bestandsaufnahme ----------------------------------------------------- */
.bestand-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.liste { list-style: none; padding: 0; margin: .5rem 0; }
.liste li { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .4rem 0; border-bottom: 1px dashed var(--rahmen); }
.formzeile { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }
.formzeile input, .formzeile select { padding: .45rem .6rem; border: 1px solid var(--rahmen); border-radius: 10px; background: #fff; font: inherit; flex: 1 1 auto; min-width: 0; }
.leise { color: var(--gedaempft); }

/* --- Identity-Seiten etwas auf Marke buegeln ------------------------------ */
input[type=email], input[type=password], input[type=text], textarea {
    border: 1px solid var(--rahmen); border-radius: 10px; padding: .5rem .6rem; font: inherit; background: #fff;
}
.btn-primary, button[type=submit].w-100 {
    background: var(--glut); border-color: var(--glut);
}

/* --- Footer --------------------------------------------------------------- */
.fuss { border-top: 1px solid var(--rahmen); background: var(--karte); margin-top: 2rem; }
.fuss-inner { display: flex; justify-content: space-between; gap: 1rem; color: var(--gedaempft); font-size: .9rem; }

/* --- Ab Tablet/Desktop ---------------------------------------------------- */
@media (min-width: 680px) {
    h1 { font-size: 2.1rem; }
    .drei-schritte { grid-template-columns: repeat(3, 1fr); }
    .bestand-grid { grid-template-columns: 1fr 1fr; }
    .hero { flex-wrap: nowrap; }
}

/* ==========================================================================
   SPRINT 2 - Fuehrung, abhakbare Teilpunkte, Organigramm, Auth & Politur
   ========================================================================== */

/* --- Navigations-Buttons (Registrieren/Anmelden oben rechts) -------------- */
.nav-btn { padding: .35rem .9rem; font-size: .95rem; }
.nav-konto { display: inline-flex; align-items: center; gap: .35rem; }
.nav-konto-icon { font-size: 1.05rem; }

/* --- Groessere / Block-Buttons -------------------------------------------- */
.btn-gross { padding: .7rem 1.5rem; font-size: 1.05rem; }
.btn-block { display: block; width: 100%; text-align: center; }

/* --- Anleitungs-Button (Glut-Akzent, klar als Button) --------------------- */
.btn-anleitung {
    display: inline-flex; align-items: center; gap: .45rem;
    background: #fff; color: var(--glut-dkl);
    border: 2px solid var(--glut); border-radius: 99px;
    padding: .5rem 1.1rem; font-weight: 700; text-decoration: none;
    box-shadow: 0 1px 0 var(--rahmen);
}
.btn-anleitung:hover { background: var(--glut); color: #fff; }
.btn-anleitung .ank-icon { font-size: 1.1rem; }
.naechste .btn-anleitung { margin: .2rem 0 .8rem; }
.mini-anleitung { padding: .35rem .9rem; font-size: .9rem; }

/* --- Gefahr-Button (Konto loeschen) --------------------------------------- */
.btn-gefahr { background: #fff; color: #9B2D1F; border: 1px solid #D8A99B; }
.btn-gefahr:hover { background: #9B2D1F; border-color: #9B2D1F; color: #fff; }

/* --- Fuehrungs-Kasten in "Als Naechstes dran" ----------------------------- */
.fuehrung {
    background: var(--sanft); border: 1px solid var(--rahmen);
    border-left: 4px solid var(--glut); border-radius: 10px;
    padding: .7rem .9rem; margin: .6rem 0 .8rem; color: var(--text);
}

/* --- Abhakbare Teilpunkte (Checkpoints) ----------------------------------- */
.cp-liste { margin: .6rem 0; }
.cp-form { margin: 0; }
.cp {
    display: flex; align-items: flex-start; gap: .6rem; cursor: pointer;
    padding: .45rem .15rem; border-bottom: 1px dashed var(--rahmen);
}
.cp:hover { background: rgba(199,91,57,.05); border-radius: 8px; }
.cp-input { position: absolute; opacity: 0; width: 0; height: 0; }
.cp-box {
    flex: 0 0 auto; width: 1.35rem; height: 1.35rem; margin-top: .05rem;
    border: 2px solid var(--glut); border-radius: 6px; background: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s ease;
}
.cp-box::after {
    content: "\2713"; color: #fff; font-weight: 700; font-size: .95rem;
    opacity: 0; transform: scale(.6); transition: all .15s ease;
}
.cp-input:checked + .cp-box { background: var(--gruen); border-color: var(--gruen); }
.cp-input:checked + .cp-box::after { opacity: 1; transform: scale(1); }
.cp-input:focus-visible + .cp-box { outline: 2px solid var(--glut-dkl); outline-offset: 2px; }
.cp-text { line-height: 1.4; }
.cp-an .cp-text { color: var(--gedaempft); text-decoration: line-through; }
.cp-save { margin-left: .5rem; }
.cp-stand { color: var(--gedaempft); font-size: .9rem; margin: .2rem 0 .6rem; }
.station-einordnung { color: var(--gedaempft); font-size: .95rem; margin: .2rem 0 .5rem; }

/* --- Callout-Kaesten ------------------------------------------------------ */
.callout {
    display: flex; gap: .7rem; align-items: flex-start;
    border: 1px solid var(--rahmen); border-radius: 12px;
    padding: .9rem 1.1rem; margin: 1.2rem 0;
}
.callout-icon { font-size: 1.4rem; line-height: 1.2; flex: 0 0 auto; }
.callout-tipp { background: var(--sanft); border-left: 4px solid var(--glut); font-style: normal; }
.callout-warnung { background: #FBEBE4; border-left: 4px solid var(--glut); color: var(--glut-dkl); }
.callout-erfolg { background: #E8F0E2; border-left: 4px solid var(--gruen); color: #34502C; }

/* --- Familien-Organigramm ------------------------------------------------- */
.org-kopf { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.mini-btn { padding: .35rem .9rem; font-size: .9rem; }
.org-leer { line-height: 1.7; }
.org-baum { margin-top: 1rem; }
.org-wurzel {
    display: inline-flex; align-items: center; gap: .5rem;
    font-family: 'Lora', Georgia, serif; font-weight: 700; font-size: 1.15rem;
    background: var(--glut); color: #fff; border-radius: 99px; padding: .4rem 1.1rem;
}
.org-wurzel-icon { font-size: 1.3rem; }
.org-personen { list-style: none; margin: 0; padding: .6rem 0 0 .9rem; border-left: 2px solid var(--rahmen); margin-left: 1.2rem; }
.org-person { position: relative; margin: .6rem 0; padding-left: 1rem; }
.org-person::before {
    content: ""; position: absolute; left: -2px; top: 1.4rem; width: .9rem; height: 2px;
    background: var(--rahmen);
}
.org-knoten {
    display: inline-flex; align-items: center; gap: .55rem; flex-wrap: wrap;
    background: var(--karte); border: 1px solid var(--rahmen); border-radius: 12px;
    padding: .5rem .8rem; text-decoration: none; color: var(--text);
}
a.org-knoten:hover { border-color: var(--glut); box-shadow: 0 2px 6px rgba(107,63,29,.12); }
.org-icon { font-size: 1.25rem; }
.org-name { font-weight: 700; }
.org-meta { color: var(--gedaempft); font-size: .85rem; }
.person-knoten.rolle-elternteil { border-left: 4px solid var(--glut); }
.person-knoten.rolle-kind { border-left: 4px solid var(--gruen); }
.person-knoten.rolle-erwachseneskind { border-left: 4px solid var(--glut-dkl); }
.haushalt-knoten { border-left: 4px solid var(--gedaempft); border-style: dashed; }
.org-geraete { list-style: none; margin: .35rem 0 0; padding: 0 0 0 1.8rem; }
.org-geraete li { margin: .25rem 0; }
.org-geraet {
    display: inline-flex; align-items: center; gap: .4rem; font-size: .9rem;
    background: var(--pergament); border: 1px solid var(--rahmen); border-radius: 99px;
    padding: .2rem .7rem; color: var(--gedaempft);
}
.org-geraet .org-icon { font-size: 1rem; }

/* --- Formularfelder (gruppiert, luftig) ----------------------------------- */
.formfeld { margin-top: 1rem; }
.feld { display: block; margin-bottom: .9rem; }
.feldzeile { display: flex; gap: .8rem; flex-wrap: wrap; }
.feldzeile .feld { flex: 1 1 180px; margin-bottom: .9rem; }
.feld-label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: .3rem; }
.eingabe, .feld input, .feld select {
    width: 100%; padding: .55rem .7rem; border: 1px solid var(--rahmen);
    border-radius: 10px; background: #fff; font: inherit;
}
.eingabe:focus, .feld input:focus, .feld select:focus {
    outline: 2px solid var(--glut); outline-offset: 1px; border-color: var(--glut);
}
.feld-check { display: flex; align-items: center; gap: .5rem; margin: .2rem 0 1rem; }
.feld-fehler, .field-validation-error { display: block; color: #9B2D1F; font-size: .85rem; margin-top: .25rem; }
.input-validation-error { border-color: #C0533F !important; background: #FCF3F0; }
.validation-summary-valid { display: none; }
.sektion-hilfe { margin: -.2rem 0 .8rem; font-size: .92rem; }

/* --- Anmeldung / Registrieren (schmal, zentriert) ------------------------- */
.auth-wrap { display: flex; justify-content: center; padding: 1.5rem 0; }
.auth-karte { width: 100%; max-width: 460px; }
.auth-karte .strich { margin-top: .3rem; }
.auth-wechsel { margin-top: 1rem; text-align: center; color: var(--gedaempft); }
.auth-wechsel a { font-weight: 700; }

/* --- Profil-Seite --------------------------------------------------------- */
.profil-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.info-zeile { display: flex; justify-content: space-between; gap: .6rem; padding: .5rem 0; border-bottom: 1px dashed var(--rahmen); flex-wrap: wrap; }
.info-label { color: var(--gedaempft); }
.info-wert { font-weight: 600; }
.karte-gefahr { border-color: #D8A99B; background: #FCF6F3; }

/* --- Personen-Liste in der Bestandsaufnahme ------------------------------- */
.liste-personen li { align-items: center; }
.person-zeile { display: inline-flex; align-items: center; gap: .55rem; }

/* --- Ab Tablet/Desktop: zweispaltige Profil-/Auth-Bereiche ----------------- */
@media (min-width: 680px) {
    .profil-grid { grid-template-columns: 1fr 1fr; }
}

/* --- Einklappbare Karten (progressive disclosure: nur EIN Schritt sichtbar) - */
.details-karte > summary.details-summary {
    display: flex; align-items: center; justify-content: space-between; gap: .6rem;
    cursor: pointer; list-style: none; padding: .2rem 0;
}
.details-karte > summary.details-summary::-webkit-details-marker { display: none; }
.details-karte .ds-titel { font-family: 'Lora', Georgia, serif; font-weight: 700; font-size: 1.3rem; }
.details-karte .ds-hint {
    font-size: .85rem; color: var(--glut-dkl); background: var(--sanft);
    border: 1px solid var(--rahmen); border-radius: 99px; padding: .15rem .7rem; white-space: nowrap;
}
.details-karte .ds-hint::after { content: " ▾"; }
.details-karte[open] .ds-hint::after { content: " ▴"; }
.details-karte[open] > summary.details-summary { margin-bottom: .8rem; }
.organigramm .org-kopf { margin-bottom: .8rem; }
.route-hinweis { margin: -.4rem 0 .8rem; font-size: .92rem; }