:root { --rot:#54010b; --orange:#ff6233; --hell:#f4f0f0; --gruen:#d4e6cd; --text:#2b2b2b; }
* { box-sizing:border-box; }
body { font-family:-apple-system,Segoe UI,Arial,sans-serif; background:var(--hell); color:var(--text); margin:0; }
a { color:var(--rot); }
.kopf { background:#fff; border-bottom:3px solid var(--orange); padding:.7rem 1.5rem; display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; }
.kopf .logo { font-weight:800; font-size:1.3rem; color:var(--rot); text-decoration:none; letter-spacing:.02em; }
.kopf nav a { text-decoration:none; color:var(--rot); padding:.35rem .9rem; border-radius:20px; margin-right:.3rem; }
.kopf nav a.aktiv, .kopf nav a:hover { background:var(--rot); color:#fff; }
.kopf .spezies-chip { margin-left:auto; font-size:.9rem; color:#555; }
main { max-width:1200px; margin:0 auto; padding:1.5rem; }
h1 { color:var(--rot); margin:.2rem 0 1rem; }
h2 { color:var(--rot); font-size:1.15rem; margin:1.4rem 0 .6rem; }
.hinweis { font-size:.85rem; color:#777; }
.fuss { max-width:1200px; margin:2rem auto 0; padding:1rem 1.5rem; font-size:.8rem; color:#888; border-top:1px solid #ddd; }
.card { background:#fff; border-radius:10px; padding:1.25rem; margin-bottom:1.25rem; box-shadow:0 1px 4px rgba(0,0,0,.08); }
.btn { display:inline-block; background:var(--orange); color:#fff; border:none; border-radius:6px; padding:.6rem 1.1rem; font-size:1rem; cursor:pointer; text-decoration:none; }
.btn.sec { background:#fff; color:var(--rot); border:1px solid var(--rot); }
.btn.klein { padding:.3rem .7rem; font-size:.85rem; }
.btn:disabled { opacity:.5; cursor:wait; }

/* Startseite */
.start-wahl { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin:1.5rem 0; }
.start-wahl a { display:block; background:#fff; border-radius:14px; padding:2rem; text-align:center; text-decoration:none; color:var(--rot); box-shadow:0 1px 4px rgba(0,0,0,.08); border:2px solid transparent; }
.start-wahl a:hover { border-color:var(--orange); }
.start-wahl .icon { font-size:4rem; display:block; margin-bottom:.5rem; }
.start-wahl b { font-size:1.4rem; }
.start-wege { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.start-wege a { display:block; background:#fff; border-radius:10px; padding:1.2rem; text-decoration:none; color:var(--text); box-shadow:0 1px 4px rgba(0,0,0,.08); border-left:6px solid var(--orange); }
.start-wege a b { color:var(--rot); display:block; margin-bottom:.3rem; }
@media (max-width:700px) { .start-wahl, .start-wege { grid-template-columns:1fr; } }

/* Layout Karte + Panel */
.zweispaltig { display:grid; grid-template-columns:minmax(0,3fr) minmax(280px,2fr); gap:1.25rem; align-items:start; }
@media (max-width:900px) { .zweispaltig { grid-template-columns:1fr; } }
.panel { position:sticky; top:1rem; }

/* Körperkarte */
.karte { position:relative; display:block; width:100%; max-width:560px; margin:0 auto; user-select:none; }
.karte img { width:100%; display:block; border-radius:8px; background:#fff; }
.karte svg.overlay { position:absolute; inset:0; width:100%; height:100%; }
.karte polygon.region { fill:rgba(255,98,51,.0); stroke:rgba(84,1,11,.25); stroke-width:.4; cursor:pointer; transition:fill .15s; }
.karte polygon.region:hover, .karte polygon.region.aktiv { fill:rgba(255,98,51,.18); stroke:var(--orange); }
.karte polyline.verlauf { fill:none; stroke-width:1.1; stroke-linecap:round; stroke-linejoin:round; opacity:.7; pointer-events:none; }
.karte polyline.verlauf.gedimmt { opacity:.15; }
.karte .marker { position:absolute; width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:50%; background:#bbb; border:2px solid #fff; box-shadow:0 0 0 1px #999; cursor:pointer; transition:transform .15s; }
.karte .marker:hover, .karte .marker.aktiv { transform:scale(1.45); z-index:3; }
.karte .marker.hervor { background:var(--orange); box-shadow:0 0 0 2px var(--rot), 0 0 0 6px rgba(255,98,51,.25); width:18px; height:18px; margin:-9px 0 0 -9px; z-index:2; }
.karte .marker.aktiv { background:var(--rot); }
.karte .marker span { position:absolute; left:16px; top:-4px; font-size:.7rem; background:#fff; padding:0 .3rem; border-radius:3px; white-space:nowrap; border:1px solid #ccc; pointer-events:none; }
.karte .marker.leise span { display:none; }
.karte .marker.leise:hover span { display:block; }
.karten-tabs a { display:inline-block; margin:0 .4rem .6rem 0; padding:.3rem .8rem; border-radius:16px; border:1px solid #ccc; text-decoration:none; font-size:.85rem; color:#555; background:#fff; cursor:pointer; }
.karten-tabs a.aktiv { background:var(--rot); color:#fff; border-color:var(--rot); }
.karten-legende { font-size:.8rem; color:#777; margin-top:.4rem; }

/* Chips */
.chips { display:flex; flex-wrap:wrap; gap:.4rem; }
.chip { display:inline-flex; align-items:center; gap:.4rem; background:#fff; border:1px solid #ddd; border-radius:16px; padding:.25rem .7rem; font-size:.85rem; cursor:pointer; }
.chip:hover, .chip.aktiv { border-color:var(--orange); background:#fff4f0; }
.chip .dot { width:9px; height:9px; border-radius:50%; display:inline-block; }
.chip.ohne { opacity:.65; cursor:default; }
.chip .wert { color:#777; font-size:.78rem; }

/* Balken Kohärenz */
.balken-liste { display:grid; grid-template-columns:1fr; gap:.3rem; }
.balken { display:grid; grid-template-columns:200px 1fr 52px; align-items:center; gap:.6rem; font-size:.88rem; }
.balken .name { display:flex; align-items:center; gap:.4rem; }
.balken .name .dot { width:10px; height:10px; border-radius:50%; display:inline-block; }
.balken .skala { position:relative; height:12px; background:#eee; border-radius:6px; }
.balken .skala:before { content:''; position:absolute; left:50%; top:-2px; bottom:-2px; width:1px; background:#999; }
.balken .fuell { position:absolute; top:0; height:12px; background:var(--orange); border-radius:6px; }
.balken .fuell.neg { background:#2c5f8a; }
.balken .zahl { text-align:right; color:#555; font-variant-numeric:tabular-nums; }
@media (max-width:600px) { .balken { grid-template-columns:120px 1fr 44px; } }
.skala-legende { display:flex; justify-content:space-between; font-size:.75rem; color:#888; margin:.2rem 0 .6rem; padding-left:calc(200px + .6rem); padding-right:calc(52px + .6rem); }

/* Punkt-Panel */
.punkt-panel h3 { margin:0 0 .3rem; color:var(--orange); }
.punkt-panel .meta { font-size:.85rem; color:#666; margin-bottom:.6rem; }
.ebene { border-left:4px solid #ccc; padding:.4rem .8rem; margin:.5rem 0; background:#fafafa; border-radius:0 4px 4px 0; }
.ebene.klassisch { border-color:#1f3a63; } .ebene.ausbildung { border-color:#c77a2c; } .ebene.praxis { border-color:var(--orange); background:#fff7f4; }
.ebene-kopf { font-size:.75rem; text-transform:uppercase; letter-spacing:.04em; color:#777; margin-bottom:.2rem; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.ebene-kopf .quelle { text-transform:none; letter-spacing:0; font-style:italic; }
.field { margin:.25rem 0; font-size:.9rem; }
.label { font-weight:600; color:var(--rot); }
.bericht { border:1px dashed #b9a; background:#fbfaf6; border-radius:8px; padding:.8rem; margin-top:1rem; }
.bericht h4 { margin:0 0 .4rem; font-size:.9rem; color:#6b4f00; text-transform:uppercase; letter-spacing:.04em; }
.bericht .eintrag { border-top:1px solid #e6e0d0; padding:.5rem 0; font-size:.88rem; }
.bericht .eintrag:first-of-type { border-top:none; }
.bericht .kenn { color:#777; font-size:.78rem; }
.bericht .soll-typ { display:inline-block; background:#eee; border-radius:4px; padding:0 .4rem; font-size:.75rem; margin-right:.3rem; }
.leer { color:#999; font-style:italic; font-size:.9rem; }

/* Tabellen */
table { width:100%; border-collapse:collapse; font-size:.9rem; }
th, td { text-align:left; padding:.45rem .5rem; border-bottom:1px solid #eee; vertical-align:top; }
th { color:var(--rot); background:#faf7f7; }

/* Upload */
.drop { border:2px dashed #c9b; border-radius:12px; padding:2rem; text-align:center; background:#fff; }
.drop.aktiv { border-color:var(--orange); background:#fff4f0; }
.fortschritt { margin-top:.8rem; font-size:.9rem; color:#555; }
details summary { cursor:pointer; color:var(--rot); }