:root {
  --bg:#fbf4e3; --karte:rgba(252,246,232,.96); --rand:#cfb48a; --text:#3d2b1c; --leise:#7a6450;
  --gruen:#3f6b33; --gruen-hell:#e3eed6; --orange:#d9a441; --orange-hell:#f7e7c2; --rot:#a8432f; --rot-hell:#f6e0d6;
  --blau:#8bb3c4; --blau-hell:#e4eff3; --knopf:#4f7a3a; --knopf-text:#fffaf0; --lila-hell:#f1e4c8;
}
@font-face { font-family:"Andika"; src:url("/schrift/Andika-Regular.ttf") format("truetype"); font-weight:400; font-display:swap; }
@font-face { font-family:"Andika"; src:url("/schrift/Andika-Bold.ttf") format("truetype"); font-weight:700; font-display:swap; }
@font-face { font-family:"Fondamento"; src:url("/schrift/Fondamento-Regular.ttf") format("truetype"); font-display:swap; }
* { box-sizing:border-box; }
html, body { margin:0; color:var(--text); font:18px/1.55 "Andika", "Segoe UI", Roboto, Arial, sans-serif; }
body { background:#efe3c8; min-height:100vh; padding-bottom:110px; }
body::before { content:""; position:fixed; inset:0; z-index:-1; background:url("/hintergrund.png") center / cover no-repeat; opacity:.28; }
h1, h2, h3 { font-family:"Fondamento", "Andika", serif; font-weight:400; margin:0 0 8px; color:#5a3d22; }
h1 { font-size:30px; } h2 { font-size:25px; } h3 { font-size:21px; }
p { margin:0 0 10px; }
.leise { color:var(--leise); font-size:16px; }
.versteckt { display:none !important; }

.rahmen { display:grid; grid-template-columns:280px 1fr; gap:18px; max-width:1100px; margin:0 auto; padding:16px; align-items:start; }
.seite-links { position:sticky; top:14px; display:flex; flex-direction:column; gap:12px; }
.klecksi { width:240px; height:208px; margin:0 auto; border-radius:48% 48% 42% 42%; overflow:hidden; background:radial-gradient(circle at 50% 40%, #fffdf5, #f3e6c8); border:3px solid var(--rand); box-shadow:0 6px 18px rgba(60,40,20,.2); }
.klecksi video { width:100%; height:100%; object-fit:cover; display:block; }
.blase { position:relative; background:var(--karte); border:2px solid var(--rand); border-radius:18px; padding:12px 16px; font-size:18px; min-height:54px; box-shadow:0 3px 10px rgba(60,40,20,.12); }
.blase::before { content:""; position:absolute; left:50%; top:-16px; margin-left:-8px; border:8px solid transparent; border-bottom-color:var(--rand); }
.blase::after { content:""; position:absolute; left:50%; top:-12px; margin-left:-7px; border:7px solid transparent; border-bottom-color:var(--karte); }
.blase.neu { animation:puls .5s ease-out; }
@keyframes puls { from { transform:scale(.97); opacity:.6; } to { transform:scale(1); opacity:1; } }
.untertitel { font-family:"Fondamento", serif; color:#5a3d22; text-align:center; font-size:17px; margin:0; }
.reiter { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.reiter button { font:inherit; font-size:17px; padding:8px 16px; border-radius:999px; border:2px solid var(--rand); background:var(--lila-hell); color:var(--text); cursor:pointer; }
.reiter button.aktiv { background:var(--knopf); color:var(--knopf-text); border-color:var(--knopf); }
.zaehler { text-align:center; font-size:15px; color:var(--leise); }

.inhalt { min-width:0; padding:0 0 24px; }
.karte { background:var(--karte); border:2px solid var(--rand); border-radius:18px; padding:18px 20px; margin:0 0 16px; box-shadow:0 4px 14px rgba(60,40,20,.12); }
.karte.leicht { background:rgba(252,246,232,.75); box-shadow:none; }
.stand { font-size:16px; color:var(--leise); margin-bottom:6px; }
.fest { background:var(--blau-hell); border-left:4px solid var(--blau); padding:10px 14px; border-radius:8px; margin:10px 0; font-size:17px; }
.fest ul, .fragenliste { margin:4px 0 0 18px; padding:0; }
.fragenliste li { margin:4px 0; }
textarea, input[type=text], input[type=password] { width:100%; font:inherit; font-size:18px; padding:12px 14px; border:2px solid var(--rand); border-radius:12px; background:#fffdf7; color:var(--text); }
textarea { min-height:120px; resize:vertical; }
textarea:focus, input:focus { outline:3px solid rgba(79,122,58,.35); border-color:var(--knopf); }
.zeile { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:10px; }
.dehnen { flex:1; }
.knopf { font:inherit; font-size:18px; padding:12px 22px; border-radius:999px; border:0; background:var(--knopf); color:var(--knopf-text); cursor:pointer; box-shadow:0 3px 8px rgba(40,60,30,.25); }
.knopf:hover { filter:brightness(1.08); }
.knopf:disabled { opacity:.5; cursor:default; box-shadow:none; }
.knopf.leise-knopf { background:var(--lila-hell); color:var(--text); border:2px solid var(--rand); box-shadow:none; }
.knopf.warm { background:var(--orange); color:#3d2b1c; }
.knopf.klein { font-size:15px; padding:7px 14px; }
.mikro { font:inherit; font-size:17px; padding:10px 16px; border-radius:999px; border:2px solid var(--rand); background:#fff7e6; color:var(--text); cursor:pointer; }
.mikro.laeuft { background:var(--rot-hell); border-color:var(--rot); animation:blink 1.2s infinite; }
@keyframes blink { 50% { opacity:.6; } }
.ablage { border:2px dashed var(--rand); border-radius:12px; padding:14px; text-align:center; color:var(--leise); background:rgba(255,250,240,.6); cursor:pointer; margin-top:10px; }
.ablage.aktiv { background:var(--gruen-hell); border-color:var(--gruen); color:var(--gruen); }
.ablage input { display:none; }
.dateiliste { margin:6px 0 0; padding:0; list-style:none; font-size:15px; color:var(--leise); }
.chip { display:inline-block; font-size:14px; padding:2px 10px; border-radius:999px; margin-left:6px; vertical-align:middle; border:1px solid transparent; }
.chip.fest { background:var(--gruen-hell); color:var(--gruen); border-color:#b9d3a8; }
.chip.idee { background:var(--orange-hell); color:#7a5a12; border-color:#e5cf9a; }
.chip.offen { background:#eee6d8; color:var(--leise); border-color:var(--rand); }
.abschnitt { margin:12px 0; }
.abschnitt h3 { display:flex; align-items:center; gap:6px; font-size:20px; }
.abschnitt textarea { min-height:70px; }
.stationen { display:flex; gap:6px; flex-wrap:wrap; margin:6px 0 14px; }
.stationen span { font-size:14px; padding:4px 10px; border-radius:999px; background:#eee6d8; color:var(--leise); }
.stationen span.jetzt { background:var(--knopf); color:var(--knopf-text); }
.stationen span.vorbei { background:var(--gruen-hell); color:var(--gruen); }
.frage { border-top:1px solid #e8dcc3; padding:12px 0; }
.frage .warum { font-size:15px; color:var(--leise); }
.frage.beantwortet { opacity:.85; }
.antwort { background:var(--gruen-hell); border-radius:10px; padding:8px 12px; margin-top:6px; }
.befund { border:2px solid var(--rand); border-radius:14px; padding:12px 14px; margin:10px 0; background:#fffdf7; }
.befund .art { display:inline-block; font-size:14px; padding:2px 10px; border-radius:999px; background:var(--rot-hell); color:var(--rot); margin-bottom:6px; }
.befund .zitat { padding:6px 12px; border-left:4px solid var(--rand); margin:6px 0; font-size:17px; }
.befund .zitat.neu { border-color:var(--orange); }
.befund .zitat.alt { border-color:var(--blau); }
.befund.entschieden { opacity:.75; }
.wahl { display:grid; gap:12px; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); margin-top:8px; }
.wahl button { font:inherit; text-align:left; padding:16px; border-radius:14px; border:2px solid var(--rand); background:#fffdf7; cursor:pointer; color:var(--text); }
.wahl button:hover { border-color:var(--knopf); background:var(--gruen-hell); }
.wahl button b { display:block; font-size:19px; margin-bottom:4px; }
.einheit { border-top:1px solid #e8dcc3; padding:10px 0; }
.einheit.fertig { opacity:.7; }
.einheit .nr { display:inline-block; min-width:30px; color:var(--leise); }
.einheit textarea { min-height:160px; margin-top:8px; }
.balken { height:12px; background:#eee6d8; border-radius:999px; overflow:hidden; margin:8px 0; }
.balken i { display:block; height:100%; background:linear-gradient(90deg, var(--gruen), var(--orange)); }
.regal { width:100%; border-collapse:collapse; font-size:16px; }
.regal th, .regal td { padding:6px 8px; border-bottom:1px solid #e8dcc3; text-align:left; vertical-align:middle; }
.regal img { width:36px; height:36px; border-radius:50%; object-fit:cover; vertical-align:middle; margin-right:8px; border:2px solid var(--rand); }
.buch { display:inline-block; width:18px; height:26px; border-radius:3px; margin-right:3px; border:1px solid var(--rand); background:#eee6d8; vertical-align:middle; }
.buch.fertig { background:var(--gruen); border-color:var(--gruen); }
.buch.angefangen { background:var(--orange); border-color:var(--orange); }
.buch.entfaellt { background:#cfc6b7; }
.legende span { margin-right:14px; font-size:15px; }
.liste { list-style:none; margin:0; padding:0; }
.liste li { border-top:1px solid #e8dcc3; padding:10px 0; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.liste li .dehnen { flex:1; min-width:160px; }
a { color:var(--gruen); }
.fuss { position:fixed; left:0; right:0; bottom:0; padding:10px 16px calc(10px + env(safe-area-inset-bottom)); display:flex; justify-content:center; pointer-events:none; }
.sagen { pointer-events:auto; display:flex; gap:8px; align-items:center; width:min(900px, 100%); background:var(--karte); border:2px solid var(--rand); border-radius:18px; padding:8px 10px; box-shadow:0 -4px 16px rgba(60,40,20,.15); margin-right:90px; }
.sagen textarea { flex:1; min-height:44px; max-height:140px; font-size:16px; padding:8px 12px; resize:none; }
.sagen .mikro { padding:8px 12px; }
.sagen .knopf { white-space:nowrap; font-size:16px; padding:10px 16px; }
body { padding-bottom:140px; }
@media (max-width:760px) { .sagen { flex-wrap:wrap; margin-right:0; } .sagen textarea { min-width:100%; } .einfall { display:none; } .reiter .einfall-nav { display:inline-block; background:var(--orange); border-color:var(--orange); } }
.reiter .einfall-nav { display:none; }
.einfall { position:fixed; right:16px; bottom:16px; font:inherit; font-size:17px; padding:12px 18px; border-radius:999px; border:0; background:var(--orange); color:#3d2b1c; cursor:pointer; box-shadow:0 4px 12px rgba(60,40,20,.3); z-index:5; }
.dialog { border:2px solid var(--rand); border-radius:18px; padding:20px; background:var(--karte); color:var(--text); max-width:560px; width:calc(100% - 32px); font:inherit; }
.dialog::backdrop { background:rgba(30,22,15,.55); }
.warten { position:fixed; left:50%; top:14px; transform:translateX(-50%); background:#3d2b1c; color:#fffaf0; padding:10px 18px; border-radius:999px; z-index:9; font-size:16px; box-shadow:0 4px 12px rgba(0,0,0,.3); }
.warten .punkt { display:inline-block; width:10px; height:10px; border-radius:50%; background:var(--orange); animation:blink 1s infinite; margin-right:6px; }
.toast { position:fixed; left:50%; bottom:90px; transform:translateX(-50%); background:var(--rot); color:#fff; padding:10px 18px; border-radius:12px; z-index:9; max-width:90%; }
.fehler { color:var(--rot); font-size:16px; }
@media (max-width:760px) {
  .rahmen { grid-template-columns:1fr; padding:12px 16px; }
  .seite-links { position:static; display:grid; grid-template-columns:110px 1fr; gap:10px 14px; align-items:center; }
  .klecksi { width:110px; height:96px; margin:0; }
  .blase { font-size:16px; }
  .blase::before { left:-14px; top:28px; margin:0; border:8px solid transparent; border-right-color:var(--rand); }
  .blase::after { left:-10px; top:29px; margin:0; border:7px solid transparent; border-right-color:var(--karte); }
  .untertitel { display:none; }
  .reiter, .zaehler { grid-column:1 / -1; }
  body { font-size:17px; }
}

.dateien { display:flex; flex-wrap:wrap; gap:8px; margin:8px 0; align-items:center; }
.dateien .vorschau img { height:84px; border-radius:10px; border:2px solid var(--rand); object-fit:cover; }
.dateien a.chip { text-decoration:none; font-size:15px; padding:6px 12px; }

/* Regal als Kacheln */
.figuren { display:grid; gap:10px; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); }
.figur { border:1px solid #e8dcc3; border-radius:12px; padding:8px 10px; background:rgba(255,253,247,.7); }
.figurkopf { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.figurkopf img { width:34px; height:34px; border-radius:50%; object-fit:cover; border:2px solid var(--rand); }
.kacheln { display:flex; flex-wrap:wrap; gap:6px; }
.kachel { font:inherit; font-size:15px; text-align:left; padding:8px 12px; border-radius:10px; border:2px solid var(--rand); background:#fffdf7; color:var(--text); cursor:pointer; max-width:100%; }
.kachel.fertig { background:var(--gruen-hell); border-color:#9dbd8a; }
.kachel.angefangen { background:var(--orange-hell); border-color:#e0bf72; }
.kachel.fehlt { background:#f6f0e4; border-style:dashed; color:var(--leise); }
.kachel.entfaellt { background:#ece6da; border-color:#cfc6b7; color:var(--leise); }
.kachel.quelle, .kachel.idee { background:#f3ecdc; border-style:dotted; }
.kachel:hover { filter:brightness(1.04); border-color:var(--knopf); }
.buecher { display:flex; flex-direction:column; gap:8px; }
.buch-zeile { display:grid; grid-template-columns:minmax(200px, 1fr) auto; gap:8px 14px; align-items:center; border-top:1px solid #e8dcc3; padding-top:8px; }
.klein { font-size:14px; }
.nachlesen { font:inherit; font-size:15px; margin:4px 6px 0 0; padding:6px 12px; border-radius:999px; border:2px solid var(--blau); background:#fff; color:var(--text); cursor:pointer; }
.nachlesen-kasten { margin-top:8px; }
.bisher { margin:6px 0 14px; }
.bisher summary { cursor:pointer; color:var(--gruen); font-size:16px; }
dialog:not([open]) { display:none; }
.lese { max-width:820px; width:calc(100% - 32px); max-height:90vh; flex-direction:column; }
.lese[open] { display:flex; }
.lese .leseinhalt { overflow:auto; flex:1; min-height:0; padding-right:6px; font-size:18px; line-height:1.6; }
.lese h3 { margin-top:18px; } .lese h4 { margin:12px 0 4px; color:var(--leise); }
.lesereiter { margin:8px 0; }
.probe { background:var(--rot); color:#fff; text-align:center; font-size:14px; padding:4px 10px; letter-spacing:.5px; }
@media (max-width:760px) { .buch-zeile { grid-template-columns:1fr; } }

.ki-zeile { font:inherit; font-size:13px; color:var(--leise); background:none; border:1px dashed var(--rand); border-radius:999px; padding:4px 10px; cursor:pointer; }
.ki-zeile.eigene { border-style:solid; color:var(--gruen); }
.blase .knopf { display:block; margin-top:8px; font-size:15px; padding:8px 14px; }
#kiAnbieter button { padding:12px; }
.dateien a.datei { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Bücherregal mit Deckeln */
.buchregal { display:grid; gap:18px 16px; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); padding:18px 14px 26px; background:linear-gradient(180deg, rgba(120,80,40,.08), rgba(120,80,40,.16)); border-radius:16px; border:2px solid var(--rand); }
.buchkarte { display:flex; flex-direction:column; gap:6px; align-items:stretch; }
.deckel { padding:0; border:0; background:none; cursor:pointer; border-radius:6px; box-shadow:4px 6px 14px rgba(40,25,10,.35); overflow:hidden; aspect-ratio:3/4; }
.deckel img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .15s; }
.deckel:hover img { transform:scale(1.03); }
.buchname { font-size:15px; line-height:1.3; }
.buchknoepfe { display:flex; flex-wrap:wrap; gap:4px; }
.buchknoepfe .chip { margin:0; cursor:pointer; text-decoration:none; font:inherit; font-size:13px; }

.figurengitter { display:grid; gap:10px; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); }
.figurkachel { font:inherit; display:flex; flex-direction:column; align-items:center; gap:4px; padding:12px 8px; border-radius:14px; border:2px solid var(--rand); background:#fffdf7; cursor:pointer; color:var(--text); text-align:center; }
.figurkachel:hover { border-color:var(--knopf); background:var(--gruen-hell); }
.figurkachel img, .figurkachel .platzhalter { width:72px; height:72px; border-radius:50%; object-fit:cover; border:2px solid var(--rand); background:#eee6d8; }
.figurkachel .chip { margin:2px 0 0; }
.figurkopf img.gross { width:72px; height:72px; }

.blaettern { display:flex; gap:8px; align-items:center; margin:6px 0; }
.seite { text-align:center; }
.seite img { max-width:100%; height:auto; border:1px solid var(--rand); border-radius:6px; box-shadow:0 4px 14px rgba(60,40,20,.2); background:#fff; min-height:200px; }
.lese { max-width:980px; }
.knopf.schliessen { background:var(--lila-hell); color:var(--text); border:2px solid var(--rand); box-shadow:none; font-size:16px; }
.figurkopf { position:sticky; top:0; background:var(--karte); z-index:2; padding:4px 0; }

.stand-chip { display:inline-block; font-size:13px; padding:2px 10px; border-radius:999px; border:1px solid var(--rand); background:#eee6d8; color:var(--leise); }
.stand-chip.fertig { background:var(--gruen-hell); color:var(--gruen); border-color:#9dbd8a; }
.stand-chip.angefangen { background:var(--orange-hell); color:#7a5a12; border-color:#e0bf72; }
.buchstand { display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:14px; }
.haken { display:inline-flex; align-items:center; gap:4px; font-size:14px; color:var(--leise); cursor:pointer; }
.haken.an { color:var(--gruen); font-weight:bold; }
.haken input { width:18px; height:18px; accent-color:var(--knopf); }
.stufen-zeile { display:flex; flex-wrap:wrap; gap:4px; }
.stufe { font:inherit; font-size:12px; padding:3px 8px; border-radius:999px; border:1px solid var(--rand); background:#f6f0e4; color:var(--leise); cursor:pointer; }
.stufe.fertig { background:var(--gruen-hell); color:var(--gruen); border-color:#9dbd8a; cursor:default; }
.stufe.angefangen { background:var(--orange-hell); color:#7a5a12; border-color:#e0bf72; }
.stufe.fehlt { border-style:dashed; }
.deckel.rahmen { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; background:rgba(255,253,247,.6); border:3px dashed var(--rand); box-shadow:none; color:var(--rand); font-size:48px; }
.deckel.rahmen img.klein { width:64px; height:64px; border-radius:50%; object-fit:cover; border:2px solid var(--rand); }
.deckel.rahmen:hover { border-color:var(--knopf); color:var(--knopf); }