:root {
    --bg: #f5f7fa;
    --karte: #ffffff;
    --rand: #e4e8ee;
    --rand-stark: #cfd6e0;
    --text: #1a2433;
    --grau: #6b7686;
    --grau-hell: #9aa4b2;
    --primaer: #2563eb;
    --primaer-dunkel: #1d4ed8;
    --primaer-bg: #eef4ff;
    --erfolg: #157347;
    --erfolg-bg: #e4f6ec;
    --fehler: #b42318;
    --fehler-bg: #fdecea;
    --warnung: #92610a;
    --warnung-bg: #fdf3e2;
    --radius: 12px;
    --schatten: 0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.04);
    --schatten-mittel: 0 4px 16px rgba(16,24,40,.08);
    --seitenleiste-w: 250px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--primaer); text-decoration: none; }

/* ── App-Shell mit Seitenleiste ── */
body.app { display: flex; min-height: 100vh; }

.seitenleiste {
    width: var(--seitenleiste-w);
    flex: 0 0 var(--seitenleiste-w);
    background: var(--karte);
    border-right: 1px solid var(--rand);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
}
.marke { display: block; padding: 1.4rem 1.4rem 1rem; }
.marke img { display: block; width: 100%; max-width: 176px; height: auto; }
.haupt-nav { display: flex; flex-direction: column; padding: .5rem .7rem; gap: .15rem; flex: 1; }
.nav-item {
    display: flex; align-items: center; gap: .7rem;
    padding: .6rem .75rem; border-radius: 9px;
    color: var(--grau); font-weight: 600; font-size: .93rem;
}
.nav-item .ic { width: 20px; text-align: center; font-size: .95rem; opacity: .8; }
.nav-item:hover { background: var(--bg); color: var(--text); }
.nav-item.aktiv { background: var(--primaer-bg); color: var(--primaer-dunkel); }
.leiste-fuss { border-top: 1px solid var(--rand); padding: .9rem 1rem; }
.nutzer-box { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--primaer); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.nutzer-name { font-weight: 600; font-size: .9rem; }
.abmelden { width: 100%; background: none; border: 1px solid var(--rand); color: var(--grau); padding: .5rem; border-radius: 8px; cursor: pointer; font: inherit; }
.abmelden:hover { border-color: var(--rand-stark); color: var(--text); }

.inhalt { flex: 1; min-width: 0; }
.inhalt-innen { max-width: 1500px; margin: 0 auto; padding: 2rem 2.5rem 4rem; }

/* Mobile Topbar / Hamburger (nur < 800px sichtbar) */
.mobil-topbar { display: none; }
.burger { background: none; border: 1px solid var(--rand); border-radius: 9px; font-size: 1.2rem; line-height: 1; width: 42px; height: 42px; cursor: pointer; color: var(--text); }
.marke-mobil { display: block; line-height: 0; }
.marke-mobil img { display: block; height: 24px; width: auto; }
.nav-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 40; }
.pflicht { color: var(--fehler); font-weight: 700; }

/* Detaillierter Rechenweg */
.rechenweg { margin-top: 2rem; }
.rechenweg > summary { cursor: pointer; font-weight: 700; color: var(--primaer-dunkel); font-size: 1rem; padding: .2rem 0; }
.rechenweg > summary:hover { color: var(--primaer); }
.rechenweg .rw-intro { color: var(--grau); font-size: .85rem; margin: .6rem 0 1rem; }
.rechenweg h4 { margin: 1.2rem 0 .3rem; font-size: .95rem; color: var(--text); }
.rw-tab td { font-size: .88rem; vertical-align: top; }
.rw-tab td:first-child { width: 34%; color: var(--text); }
.rw-rechnung { color: var(--grau); font-variant-numeric: tabular-nums; }
.rw-erg { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rw-pruef { background: #fff8e6; border: 1px solid #f5d98b; border-radius: 8px; padding: .7rem .9rem; font-size: .84rem; color: #6b5300; margin: .8rem 0 0; }

/* Bodenrichtwert-Auskunft */
.brw-treffer { margin-top: 1.2rem; border-color: var(--primaer); }
.brw-wert { font-size: 2rem; font-weight: 800; color: var(--primaer); margin: .2rem 0 .8rem; }
.feld-hinweis { color: var(--grau); font-size: .84rem; margin: .1rem 0 .9rem; }

/* Gast (Login) */
body.gast { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
body.gast .inhalt-innen { padding: 1rem; width: 100%; max-width: 440px; }

/* Logo über Karte auf den Seiten ohne Seitenleiste (Login, Fehler, Rechtstexte) */
.gast-marke { text-align: center; margin: 0 0 1.6rem; }
.gast-marke img { height: 34px; width: auto; max-width: 100%; }

/* ── Kopfzeilen / Typo ── */
.kopfzeile { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
h1 { font-size: 1.6rem; margin: 0; letter-spacing: -.02em; }
h2 { font-size: 1.15rem; margin: 2rem 0 .8rem; letter-spacing: -.01em; }
h3 { font-size: 1rem; margin: 0 0 .6rem; }
.hinweis { color: var(--grau); font-size: .92rem; }

/* ── Karten ── */
.karte { background: var(--karte); border: 1px solid var(--rand); border-radius: var(--radius); padding: 1.5rem; margin-bottom: 1.2rem; box-shadow: var(--schatten); }
.karte.schmal { max-width: 440px; margin-inline: auto; }

/* ── Formulare ── */
label { display: block; margin-bottom: 1rem; font-weight: 600; font-size: .88rem; color: var(--text); }
input, select, textarea {
    display: block; width: 100%; margin-top: .4rem;
    padding: .62rem .75rem; border: 1px solid var(--rand-stark); border-radius: 9px;
    font-size: .98rem; font-weight: 400; background: #fff; color: var(--text); font-family: inherit;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primaer); box-shadow: 0 0 0 3px var(--primaer-bg); }
input[type=color] { padding: .2rem; height: 42px; }
input[type=checkbox], input[type=radio] { width: auto; display: inline-block; margin: 0; }
textarea { resize: vertical; }

button, .knopf {
    display: inline-flex; align-items: center; gap: .4rem; justify-content: center;
    padding: .62rem 1.2rem; border: 0; border-radius: 9px; font-size: .95rem; font-weight: 600;
    cursor: pointer; text-decoration: none; font-family: inherit;
}
.primaer { background: var(--primaer); color: #fff; }
.primaer:hover { background: var(--primaer-dunkel); }
.knopf { background: #fff; color: var(--text); border: 1px solid var(--rand-stark); }
.knopf:hover { border-color: var(--grau-hell); }
.link { background: none; color: var(--primaer); padding: .5rem .2rem; border: 0; cursor: pointer; }
.aktionen { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; margin-top: .5rem; }

fieldset.karte { border: 1px solid var(--rand); }
legend { font-weight: 700; padding: 0 .5rem; color: var(--text); }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 1.4rem; }
.grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 1.4rem; }
@media (max-width: 700px) { .grid3, .grid2 { grid-template-columns: 1fr; } }

/* ── Tabellen ── */
.tabelle { width: 100%; border-collapse: collapse; background: var(--karte); border: 1px solid var(--rand); border-radius: var(--radius); overflow: hidden; box-shadow: var(--schatten); }
.tabelle th, .tabelle td { text-align: left; padding: .7rem 1rem; border-bottom: 1px solid var(--rand); }
.tabelle th { background: #f8fafc; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--grau); }
.tabelle tr:last-child td { border-bottom: 0; }
.klickbar { cursor: pointer; }
.klickbar:hover { background: var(--primaer-bg); }
td.pos { color: var(--erfolg); font-weight: 600; }
td.neg { color: var(--fehler); font-weight: 600; }

.daten { display: grid; grid-template-columns: 220px 1fr; gap: .5rem 1rem; margin: 0; }
.daten dt { color: var(--grau); }
.daten dd { margin: 0; }
.leer { color: var(--grau); padding: 3rem 0; text-align: center; }

/* ── Flash ── */
.flash { padding: .8rem 1.1rem; border-radius: 10px; margin-bottom: 1rem; font-size: .93rem; }
.flash-erfolg  { background: var(--erfolg-bg);  color: var(--erfolg); }
.flash-fehler  { background: var(--fehler-bg);  color: var(--fehler); }
.flash-warnung { background: var(--warnung-bg); color: var(--warnung); }
.flash-info    { background: var(--primaer-bg); color: var(--primaer-dunkel); }

/* ── Projekt-Kacheln (Dashboard) ── */
.karten-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.2rem; }
.projekt-karte { background: var(--karte); border: 1px solid var(--rand); border-radius: var(--radius); padding: 1.3rem; box-shadow: var(--schatten); transition: box-shadow .15s, transform .15s; cursor: pointer; }
.projekt-karte:hover { box-shadow: var(--schatten-mittel); transform: translateY(-2px); }
.projekt-karte .titel { font-weight: 700; font-size: 1.05rem; margin-bottom: .3rem; }
.projekt-karte .meta { color: var(--grau); font-size: .85rem; }
.badge { display: inline-block; padding: .2rem .6rem; border-radius: 999px; font-size: .75rem; font-weight: 600; background: var(--primaer-bg); color: var(--primaer-dunkel); }

/* ── Workflow-Kacheln (Projekt-Hub) ── */
.schritte { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; }
.schritt-kachel { display: block; background: var(--karte); border: 1px solid var(--rand); border-radius: var(--radius); padding: 1.2rem; box-shadow: var(--schatten); transition: box-shadow .15s, transform .15s; }
.schritt-kachel:hover { box-shadow: var(--schatten-mittel); transform: translateY(-2px); }
.schritt-kachel .num { width: 30px; height: 30px; border-radius: 8px; background: var(--primaer-bg); color: var(--primaer-dunkel); display: flex; align-items: center; justify-content: center; font-weight: 700; margin-bottom: .7rem; }
.schritt-kachel .kt { font-weight: 700; margin-bottom: .2rem; color: var(--text); }
.schritt-kachel .kb { color: var(--grau); font-size: .85rem; }
.optional-tag { display: inline-block; font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--grau); background: var(--bg); border: 1px solid var(--rand); border-radius: 20px; padding: .05rem .5rem; margin-left: .35rem; vertical-align: middle; }
.schritt-kachel.fertig .num { background: var(--erfolg-bg); color: var(--erfolg); }
.schritt-kachel.primaer-kachel { border-color: var(--primaer); }

/* ── Wizard (Bewertungsformular) ── */
.wizard-steps { display: flex; gap: .4rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
/* Reiter wachsen mit ihrer Beschriftung und schrumpfen nicht darunter –
   sonst wird der Zahlenkreis zusammengequetscht und die Schrift bricht um. */
.wizard-steps .ws {
    display: inline-flex; align-items: center; gap: .4rem;
    flex: 0 0 auto;
    padding: .5rem .75rem; border-radius: 9px;
    background: var(--karte); border: 1px solid var(--rand);
    font-size: .8rem; font-weight: 600; line-height: 1.2; color: var(--grau);
    white-space: nowrap; cursor: pointer;
}
.wizard-steps .ws:hover { border-color: var(--primaer); color: var(--primaer-dunkel); }
/* flex: 0 0 20px + aspect-ratio: der Kreis bleibt unter allen Umständen rund. */
.wizard-steps .ws .wn {
    flex: 0 0 20px; width: 20px; height: 20px; aspect-ratio: 1; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--bg); color: var(--grau); font-size: .72rem; margin: 0;
}
.wizard-steps .ws.aktiv { border-color: var(--primaer); color: var(--primaer-dunkel); background: var(--primaer-bg); }
.wizard-steps .ws.aktiv .wn { background: var(--primaer); color: #fff; }
.wizard-steps .ws.erledigt .wn { background: var(--erfolg); color: #fff; }
/* Schmale Schirme: eine Zeile zum Wischen statt eines unruhigen Blocksatzes. */
@media (max-width: 760px) {
    .wizard-steps { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: .35rem; -webkit-overflow-scrolling: touch; }
    .wizard-steps .ws { scroll-snap-align: center; }
}
.form-step { display: none; }
.form-step.aktiv { display: block; }

/* ── Aufklappbare Hilfe in den Formularschritten ── */
.hilfe { border: 1px solid var(--rand); border-radius: 9px; background: var(--bg); margin-bottom: .9rem; }
.hilfe > summary { cursor: pointer; padding: .55rem .8rem; font-size: .83rem; font-weight: 600; color: var(--primaer-dunkel); list-style: none; display: flex; align-items: center; gap: .4rem; }
.hilfe > summary::-webkit-details-marker { display: none; }
.hilfe > summary::before { content: '?'; flex: 0 0 18px; width: 18px; height: 18px; aspect-ratio: 1; border-radius: 50%; background: var(--primaer); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 700; }
.hilfe > summary::after { content: 'einblenden'; margin-left: auto; font-weight: 400; color: var(--grau); font-size: .78rem; }
.hilfe[open] > summary::after { content: 'ausblenden'; }
.hilfe > summary:hover { color: var(--primaer); }
.hilfe .hilfe-inhalt { padding: 0 .8rem .8rem; font-size: .85rem; line-height: 1.55; color: var(--text); }
.hilfe .hilfe-inhalt p { margin: .4rem 0; }
.hilfe .hilfe-inhalt ul { margin: .4rem 0 .4rem 1.1rem; padding: 0; }
.hilfe .hilfe-inhalt li { margin: .22rem 0; }
.hilfe .quelle { display: block; margin-top: .6rem; padding-top: .5rem; border-top: 1px solid var(--rand); font-size: .78rem; color: var(--grau); }

/* Marktdaten: Bezeichnung, Preis und Datum in einer Zeile. */
.tabelle.marktdaten input { width: 100%; margin: 0; }
.tabelle.marktdaten td { vertical-align: middle; }
.tabelle.marktdaten + .tabelle.marktdaten { margin-top: 1rem; }
@media (max-width: 760px) {
    .tabelle.marktdaten thead { display: none; }
    .tabelle.marktdaten, .tabelle.marktdaten tbody, .tabelle.marktdaten tr, .tabelle.marktdaten td { display: block; width: 100%; }
    .tabelle.marktdaten tr { border: 1px solid var(--rand); border-radius: 9px; padding: .5rem; margin-bottom: .6rem; }
    .tabelle.marktdaten td { border: 0; padding: .2rem 0; }
}
.wizard-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 1rem; }

.checks { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem 1.4rem; }
@media (max-width: 700px) { .checks { grid-template-columns: 1fr; } }
.check { font-weight: 400; display: flex; align-items: center; gap: .5rem; margin-bottom: 0; }

/* ── Standardstufen-Assistent ── */
.ss-zeile { display: grid; grid-template-columns: 240px 1fr; gap: .8rem; align-items: center; margin-bottom: .55rem; }
@media (max-width: 700px) { .ss-zeile { grid-template-columns: 1fr; gap: .25rem; } }
.ss-zeile .ss-name { display: flex; align-items: center; gap: .25rem; font-weight: 600; }
/* margin-left:auto statt space-between – sonst verteilt sich das Info-Zeichen
   als drittes Kind in die Mitte der Zeile. */
.ss-zeile .ss-gewicht { margin-left: auto; flex: 0 0 auto; display: inline-flex; min-width: 26px; height: 22px; padding: 0 .35rem; border-radius: 999px; background: var(--primaer-bg); color: var(--primaer-dunkel); align-items: center; justify-content: center; font-size: .72rem; font-weight: 700; }
.ss-zeile select { margin: 0; }
#ss_ergebnis { border-top: 1px solid var(--rand); padding-top: .7rem; }

/* Herleitung der gewogenen Standardstufe (Ergebnisseite) */
.ss-herleitung { width: 100%; border-collapse: collapse; margin-top: .5rem; }
.ss-herleitung th, .ss-herleitung td { padding: .3rem .5rem; border-bottom: 1px solid var(--rand); font-size: .85rem; text-align: left; }
.ss-herleitung td.num, .ss-herleitung th.num { text-align: right; }
.ss-herleitung tr.summe td { font-weight: 700; border-top: 2px solid var(--rand); border-bottom: none; }

/* ── Ergebnis ── */
.ergebnis-haupt { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; align-items: center; background: linear-gradient(135deg, var(--primaer-bg), #ffffff); border-color: var(--primaer); }
.ergebnis-haupt .gross { display: flex; flex-direction: column; }
.ergebnis-haupt .label { color: var(--grau); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
.ergebnis-haupt .wert { font-size: 2.6rem; font-weight: 800; color: var(--primaer); line-height: 1.05; letter-spacing: -.02em; }
.ergebnis-haupt .spanne { color: var(--grau); }
.ergebnis-haupt .neben { display: flex; gap: 2.5rem; }
.ergebnis-haupt .neben div { display: flex; flex-direction: column; }
.ergebnis-haupt .wert2 { font-size: 1.5rem; font-weight: 700; }
tr.fuehrend { background: var(--primaer-bg); font-weight: 600; }
.tag { display: inline-block; padding: .12rem .55rem; border-radius: 999px; font-size: .78rem; }
.tag-ok { background: var(--erfolg-bg); color: var(--erfolg); }
.tag-warn { background: var(--warnung-bg); color: var(--warnung); }

/* ── SWOT ── */
.swot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 900px) { .swot-grid { grid-template-columns: 1fr; } }
.swot-grid h3 { margin: 0 0 .5rem; }
.swot-staerke { border-top: 3px solid var(--erfolg); }
.swot-schwaeche { border-top: 3px solid var(--fehler); }
.swot-chance { border-top: 3px solid var(--primaer); }
.swot-risiko { border-top: 3px solid var(--warnung); }
.vorschlag-kat { padding: .5rem 0; border-bottom: 1px solid var(--rand); }
.vorschlag-kat:last-child { border-bottom: 0; }
.kat-name { display: inline-block; min-width: 190px; font-weight: 600; font-size: .85rem; color: var(--grau); vertical-align: top; }
.chip { font-size: .8rem; padding: .22rem .65rem; margin: .15rem; border-radius: 999px; border: 1px solid var(--rand-stark); background: #fff; cursor: pointer; font-family: inherit; }
.chip:hover { background: var(--bg); }
.chip-staerke { border-color: #bfe6cf; }
.chip-schwaeche { border-color: #f6c9c4; }
.chip-chance { border-color: #c3d9fb; }
.chip-risiko { border-color: #f5e0b8; }
.loesungen input { margin-top: 0; }
.loesungen td { padding: .4rem; }

/* ── Glossar / Info ── */
.glossar dt { font-weight: 700; color: var(--primaer-dunkel); margin-top: 1.1rem; }
.glossar dd { margin: .2rem 0 0; color: var(--text); }
.info-i { position: relative; display: inline-block; margin-left: .3rem; color: var(--grau-hell); cursor: help; font-size: .9rem; }
.info-i:hover, .info-i:focus { color: var(--primaer); outline: none; }
.info-i::after {
    content: attr(data-tip);
    position: absolute; left: 50%; bottom: 150%; transform: translateX(-50%);
    background: #1a2433; color: #fff; padding: .55rem .7rem; border-radius: 7px;
    width: max-content; max-width: 280px; white-space: normal; text-align: left;
    font-size: .8rem; font-weight: 400; line-height: 1.4; letter-spacing: 0;
    opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .08s; z-index: 100;
    box-shadow: 0 4px 16px rgba(16,24,40,.18);
}
.info-i::before {
    content: ""; position: absolute; left: 50%; bottom: 150%; transform: translate(-50%, 100%);
    border: 6px solid transparent; border-top-color: #1a2433;
    opacity: 0; visibility: hidden; transition: opacity .08s; z-index: 100;
}
.info-i:hover::after, .info-i:focus::after,
.info-i:hover::before, .info-i:focus::before { opacity: 1; visibility: visible; }

@media (max-width: 800px) {
    body.app { flex-direction: column; }
    .mobil-topbar {
        display: flex; align-items: center; gap: .8rem;
        padding: .6rem .9rem; background: var(--karte);
        border-bottom: 1px solid var(--rand);
        position: sticky; top: 0; z-index: 30;
    }
    /* Seitenleiste als Off-Canvas-Drawer */
    .seitenleiste {
        position: fixed; top: 0; left: 0; height: 100vh; width: 82%; max-width: 300px;
        flex-basis: auto; z-index: 50;
        transform: translateX(-100%); transition: transform .22s ease;
        box-shadow: 2px 0 16px rgba(15,23,42,.12);
    }
    body.app.nav-offen .seitenleiste { transform: translateX(0); }
    body.app:not(.nav-offen) .nav-backdrop { display: none; }
    .inhalt-innen { padding: 1.2rem; }
}
@media (min-width: 801px) {
    .nav-backdrop { display: none; }
}

/* ── Rechtstexte + Fußzeile ── */
.rechtstext { max-width: 800px; margin: 0 auto; }
.rechtstext ul { padding-left: 1.2rem; }
.rechtstext li { margin-bottom: .4rem; }
body.gast.recht { align-items: flex-start; }
body.gast.recht .inhalt-innen { max-width: 840px; padding: 2rem; }
.app-fuss { border-top: 1px solid var(--rand); margin-top: 2rem; padding: 1.2rem 2.5rem; color: var(--grau); font-size: .82rem; text-align: center; }
.app-fuss a { color: var(--grau); }
.app-fuss a:hover { color: var(--primaer); }

/* ── "Berechnung läuft"-Overlay ── */
.lade-overlay { position: fixed; inset: 0; background: rgba(245,247,250,.94); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.lade-box { background: var(--karte); border: 1px solid var(--rand); border-radius: var(--radius); box-shadow: var(--schatten-mittel); padding: 2.5rem 3rem; text-align: center; max-width: 460px; width: 90%; }
.lade-spinner { width: 44px; height: 44px; border: 4px solid var(--primaer-bg); border-top-color: var(--primaer); border-radius: 50%; margin: 0 auto 1.2rem; animation: dreh .8s linear infinite; }
@keyframes dreh { to { transform: rotate(360deg); } }
.lade-titel { font-weight: 700; font-size: 1.2rem; margin-bottom: .4rem; }
.lade-status { color: var(--grau); font-size: .9rem; margin-bottom: 1.3rem; min-height: 1.3em; }
.ladebalken { height: 8px; background: var(--primaer-bg); border-radius: 999px; overflow: hidden; }
.ladebalken-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--primaer), #60a5fa); border-radius: 999px; transition: width 3s linear; }

/* ── Visueller Ergebnis-Report ── */
.visual-grid { display: grid; grid-template-columns: 300px 1fr; gap: 1.2rem; margin-top: 1.2rem; align-items: start; }
@media (max-width: 800px) { .visual-grid { grid-template-columns: 1fr; } }
.sicherheit-karte .sicherheit-wert { font-size: 1.25rem; font-weight: 800; margin-top: .3rem; }
.sich-erfolg { color: var(--erfolg); } .sich-warnung { color: var(--warnung); } .sich-fehler { color: var(--fehler); } .sich-info { color: var(--primaer); }
.sich-fill-erfolg { background: linear-gradient(90deg, var(--erfolg), #34d399); }
.sich-fill-warnung { background: linear-gradient(90deg, var(--warnung), #fbbf24); }
.sich-fill-fehler { background: linear-gradient(90deg, var(--fehler), #f87171); }
.sich-fill-info { background: var(--primaer); }
.wertbalken { margin-top: .6rem; display: flex; flex-direction: column; gap: .55rem; }
.wb-zeile { display: grid; grid-template-columns: 130px 1fr 120px; align-items: center; gap: .8rem; }
/* Seit Vergleichsobjekte eine Bezeichnung haben, werden die Beschriftungen lang
   („EFH 148 m², Wattstraße 8, Baujahr 1991 (11/2025)"). Ohne Kürzung zieht eine
   Zeile das halbe Diagramm auseinander; der volle Text steht im title und in
   der Tabelle „Marktvergleich" darunter. */
.wb-name { font-size: .85rem; color: var(--grau); font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wb-track { background: var(--bg); border-radius: 999px; height: 22px; overflow: hidden; }
.wb-fill { height: 100%; background: #cdd9f5; border-radius: 999px; min-width: 3%; transition: width .5s; }
.wb-fill.wb-fuehrend { background: linear-gradient(90deg, var(--primaer), #60a5fa); }
.wb-wert { text-align: right; font-weight: 700; font-size: .92rem; }
@media (max-width: 560px) { .wb-zeile { grid-template-columns: 90px 1fr 90px; } }

/* ── Fotos ── */
.foto-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; }
.foto-kachel { background: var(--karte); border: 1px solid var(--rand); border-radius: var(--radius); overflow: hidden; box-shadow: var(--schatten); }
.foto-kachel img { width: 100%; height: 150px; object-fit: cover; display: block; }
.foto-kachel form { padding: .4rem .7rem; text-align: right; }

/* ── Hilfe ───────────────────────────────────────────────────────────────
   Knopf unten rechts auf jeder Seite, dazu das Fenster, das von rechts
   einfährt. Kein abdunkelnder Hintergrund: Die Seite soll lesbar bleiben,
   während daneben die Anleitung steht. Die Fläche fängt nur den Klick ab. */
.hilfe-knopf {
    position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 60;
    width: 3.25rem; height: 3.25rem; aspect-ratio: 1; border-radius: 999px;
    border: 1px solid var(--primaer); background: var(--primaer); color: #fff;
    font-size: 1.5rem; font-weight: 700; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 20px rgba(15, 23, 42, .22);
    transition: transform .12s, box-shadow .12s;
}
.hilfe-knopf:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(15, 23, 42, .28); }
.hilfe-knopf:focus-visible { outline: 3px solid var(--primaer-bg); outline-offset: 2px; }

.hilfe-auswahl {
    position: fixed; right: 1.5rem; bottom: 5.5rem; z-index: 61;
    width: 340px; max-width: calc(100vw - 3rem);
    background: var(--karte); border: 1px solid var(--rand); border-radius: 12px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, .2); overflow: hidden;
}
.hilfe-auswahl-kopf { padding: .7rem .9rem .5rem; font-size: .7rem; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase; color: var(--grau);
    border-bottom: 1px solid var(--rand); }
.hilfe-auswahl-liste { padding: .35rem; max-height: 50vh; overflow-y: auto; }
.hilfe-auswahl-liste a { display: flex; gap: .55rem; padding: .5rem; border-radius: 8px;
    text-decoration: none; color: var(--text); }
.hilfe-auswahl-liste a:hover { background: var(--bg); }
.hilfe-auswahl-liste .nr { flex: 0 0 18px; width: 18px; height: 18px; aspect-ratio: 1;
    border-radius: 6px; background: var(--primaer-bg); color: var(--primaer-dunkel);
    font-size: .68rem; font-weight: 700; display: flex; align-items: center;
    justify-content: center; margin-top: .15rem; }
.hilfe-auswahl-liste strong { display: block; font-size: .82rem; font-weight: 600; }
.hilfe-auswahl-liste em { display: block; font-size: .72rem; color: var(--grau);
    font-style: normal; line-height: 1.35; margin-top: .1rem; }
.hilfe-auswahl-fuss { display: block; padding: .6rem .9rem; border-top: 1px solid var(--rand);
    font-size: .76rem; font-weight: 600; color: var(--primaer-dunkel); text-decoration: none; }
.hilfe-auswahl-fuss:hover { background: var(--bg); }

.hilfe-schatten { position: fixed; inset: 0; z-index: 69; background: transparent; }

/* Eine Klasse mit `display` schlägt die Browserregel für [hidden]. Ohne diese
   Zeile stünde das Hilfefenster auf jeder Seite offen. */
.hilfe-fenster[hidden], .hilfe-auswahl[hidden], .hilfe-schatten[hidden] { display: none !important; }

.hilfe-fenster {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 70;
    width: 440px; max-width: 100vw; display: flex; flex-direction: column;
    background: var(--karte); border-left: 1px solid var(--rand);
    box-shadow: -14px 0 40px rgba(15, 23, 42, .16);
    animation: hilfeRein .18s ease-out;
}
@keyframes hilfeRein { from { transform: translateX(100%); } to { transform: translateX(0); } }
/* Unter 640 px bliebe daneben kein benutzbarer Rest – dann volle Breite. */
@media (max-width: 639px) { .hilfe-fenster { width: 100vw; border-left: 0; } }

.hilfe-kopf { display: flex; align-items: center; gap: .55rem; padding: .6rem .8rem;
    border-bottom: 1px solid var(--rand); }
.hilfe-ic { width: 1.75rem; height: 1.75rem; flex: 0 0 1.75rem; border: 1px solid var(--rand);
    border-radius: 6px; background: var(--karte); color: var(--grau); cursor: pointer;
    display: flex; align-items: center; justify-content: center; font-size: .9rem; }
.hilfe-ic:hover { background: var(--bg); color: var(--text); }
.hilfe-weg { flex: 1; min-width: 0; font-size: .7rem; color: var(--grau); }
.hilfe-weg b { display: block; font-size: .85rem; color: var(--text); font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hilfe-tab { font-size: .7rem; color: var(--primaer-dunkel); text-decoration: none; white-space: nowrap; }

.hilfe-suche { padding: .55rem .8rem; border-bottom: 1px solid var(--rand); }
.hilfe-suche input { width: 100%; margin: 0; font-size: .85rem; }

.hilfe-koerper { flex: 1; overflow-y: auto; padding: 1rem .95rem 2rem; font-size: .88rem; line-height: 1.6; }
.hilfe-laedt { color: var(--grau); font-size: .85rem; }

.hilfe-artikel h2 { font-size: 1rem; margin: 1.3rem 0 .4rem; scroll-margin-top: .5rem; }
.hilfe-artikel h2:first-child { margin-top: 0; }
.hilfe-artikel h3 { font-size: .9rem; margin: 1rem 0 .3rem; }
.hilfe-artikel p { margin: .5rem 0; }
.hilfe-artikel ul, .hilfe-artikel ol { margin: .5rem 0 .5rem 1.15rem; padding: 0; }
.hilfe-artikel li { margin: .25rem 0; }
.hilfe-artikel code { background: var(--bg); border: 1px solid var(--rand); border-radius: 4px;
    padding: 0 .25rem; font-size: .85em; }
.hilfe-artikel blockquote { margin: .7rem 0; padding: .6rem .8rem; border-left: 3px solid var(--primaer);
    background: var(--primaer-bg); border-radius: 0 8px 8px 0; font-size: .85rem; }
.hilfe-artikel hr { border: 0; border-top: 1px solid var(--rand); margin: 1.2rem 0; }

.hilfe-toc { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .9rem;
    padding-bottom: .7rem; border-bottom: 1px solid var(--rand); }
.hilfe-toc a { font-size: .72rem; padding: .22rem .5rem; border-radius: 999px;
    background: var(--bg); color: var(--grau); text-decoration: none; }
.hilfe-toc a:hover { background: var(--primaer-bg); color: var(--primaer-dunkel); }

/* Bild zu einem Hilfeschritt: zeigt, wo auf der Seite etwas steht. */
.hilfe-bild { margin: .8rem 0; }
.hilfe-bild img { display: block; width: 100%; height: auto; border: 1px solid var(--rand);
    border-radius: 8px; background: var(--bg); }
.hilfe-bild figcaption { margin-top: .35rem; font-size: .74rem; color: var(--grau); }
.hilfe-bild-fehlt { margin: .8rem 0; padding: .7rem .8rem; border: 1px dashed var(--rand);
    border-radius: 8px; background: var(--bg); color: var(--grau); font-size: .78rem; }

.hilfe-kapitel-liste { display: grid; gap: .3rem; }
.hilfe-kapitel-liste a { display: block; padding: .5rem .6rem; border-radius: 8px;
    text-decoration: none; color: var(--text); }
.hilfe-kapitel-liste a:hover { background: var(--bg); }
.hilfe-kapitel-liste strong { display: block; font-size: .85rem; font-weight: 600; }
.hilfe-kapitel-liste em { display: block; font-size: .75rem; color: var(--grau);
    font-style: normal; line-height: 1.4; }

.hilfe-funde-kopf { font-size: .72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: var(--grau); margin-bottom: .5rem; }
.hilfe-fund { display: block; padding: .55rem .6rem; border-radius: 8px; text-decoration: none;
    color: var(--text); border: 1px solid transparent; }
.hilfe-fund:hover { background: var(--bg); border-color: var(--rand); }
.hilfe-fund .t { display: block; font-size: .85rem; font-weight: 600; }
.hilfe-fund .k { display: block; font-size: .7rem; color: var(--primaer-dunkel); }
.hilfe-fund .s { display: block; font-size: .74rem; color: var(--grau); line-height: 1.4; margin-top: .15rem; }

.hilfe-weiter { margin-top: 1.5rem; padding-top: .8rem; border-top: 1px solid var(--rand);
    display: flex; flex-direction: column; gap: .35rem; }
.hilfe-weiter a { font-size: .8rem; font-weight: 600; color: var(--primaer-dunkel); text-decoration: none; }
.hilfe-weiter a:hover { text-decoration: underline; }

/* Artikel als ganze Seite: etwas luftiger, Bilder nicht über volle Breite. */
.hilfe-seite { font-size: .95rem; line-height: 1.65; }
.hilfe-seite .hilfe-bild { max-width: 720px; }