:root {
  --papier: #f6f3ec;
  --karte: #fffdf8;
  --tinte: #2b2723;
  --leise: #6d655a;
  --linie: #ded7c9;
  --akzent: #2c5f5a;
  --akzent-hell: #dcebe8;
  --gelb: #fbeab8;
  --gelb-rand: #e3bf5a;
  --gruen: #d6ecd6;
  --gruen-rand: #6aa76a;
  --rot: #a93c30;
  --hdr: 96px;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--tinte);
  background: var(--papier);
}
* { box-sizing: border-box; }
html { scroll-behavior: auto; }
body { margin: 0; background: var(--papier); line-height: 1.5; }
h1, h2, h3 { line-height: 1.25; font-weight: 600; margin: 0; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--akzent); }
[hidden] { display: none !important; }

/* Kopf */
.kopf { position: sticky; top: 0; z-index: 30; background: var(--papier); border-bottom: 1px solid var(--linie); padding: 10px 16px 0; }
.kopf-zeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 1500px; margin: 0 auto; }
.kopf h1 { font-size: 1.05rem; white-space: nowrap; }
.kopf-rechts { display: flex; align-items: center; gap: 12px; min-width: 0; }
.status { color: var(--leise); font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status.fehler { color: var(--rot); font-weight: 600; }
.person-knopf { border: 1px solid var(--linie); background: var(--karte); padding: 5px 12px; border-radius: 16px; font-weight: 600; white-space: nowrap; }
.person-knopf:hover { border-color: var(--akzent); }
.tabs { display: flex; gap: 4px; max-width: 1500px; margin: 8px auto 0; overflow-x: auto; }
.tabs button { background: none; border: none; border-bottom: 3px solid transparent; padding: 7px 14px; color: var(--leise); white-space: nowrap; font-weight: 600; }
.tabs button:hover { color: var(--tinte); }
.tabs button[aria-selected="true"] { color: var(--akzent); border-bottom-color: var(--akzent); }
main { max-width: 1500px; margin: 0 auto; padding: 16px; }

/* Allgemeine Eingaben */
input[type="text"], textarea, select { background: #fff; border: 1px solid var(--linie); border-radius: 6px; padding: 8px 10px; width: 100%; }
input[type="text"]:focus, textarea:focus, select:focus { outline: 2px solid var(--akzent); outline-offset: 1px; border-color: var(--akzent); }
button.knopf, .knopf-primär { border: 1px solid var(--linie); background: var(--karte); padding: 8px 18px; border-radius: 6px; font-weight: 600; }
button.knopf:hover { border-color: var(--akzent); }
button.knopf:disabled { opacity: .45; cursor: default; }
button.knopf-primär, .knopf-primär { background: var(--akzent); border-color: var(--akzent); color: #fff; }
button.leise { border: none; background: none; color: var(--leise); margin-top: 8px; }
.linkt { background: none; border: none; color: var(--akzent); padding: 0 2px; text-decoration: underline; }
.leer { padding: 32px; text-align: center; color: var(--leise); }

/* Markierungen im Text */
.m { padding: 0 2px; border-radius: 3px; background: var(--gelb); border-bottom: 2px solid var(--gelb-rand); cursor: pointer; }
.m sup { font-size: .72em; color: #8a6d1a; }
.m-unl { font-style: italic; color: #6b5a1d; }
.m-struck { text-decoration: inherit; }
.m-fertig { background: var(--gruen); border-bottom: 2px solid var(--gruen-rand); font-style: normal; color: #1d4d1d; font-weight: 600; }
.m-bestaetigt { background: #ecf5ec; border-bottom: 2px solid #b6d4b6; font-style: normal; color: inherit; font-weight: 400; }
.name-hint { color: var(--leise); font-size: .86em; }
em.anm { color: var(--leise); font-size: .93em; }
.seg-marker { background: var(--akzent-hell); color: var(--akzent); font-size: .85rem; font-weight: 600; padding: 3px 8px; border-radius: 4px; margin: 12px 0 8px; display: inline-block; }
.text { font-family: Georgia, "Times New Roman", serif; overflow-wrap: anywhere; }
.text ul, .text ol { padding-left: 1.2em; margin: .4em 0; }
.text li { margin: .15em 0; }
.text hr { border: none; border-top: 1px dashed var(--linie); margin: 12px 0; }
.text p { margin: .5em 0; }

/* Offene Stellen */
.offen-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.viewer { background: #e8e2d4; border: 1px solid var(--linie); border-radius: 8px; overflow: hidden; }
.offen-layout .viewer { position: sticky; top: calc(var(--hdr) + 12px); height: calc(100vh - var(--hdr) - 28px); display: flex; flex-direction: column; }
.viewer-werkzeug { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px; background: var(--karte); border-bottom: 1px solid var(--linie); font-size: .88rem; gap: 8px; flex-wrap: wrap; }
.viewer-knoepfe { display: flex; align-items: center; gap: 4px; }
.viewer-knoepfe button { border: 1px solid var(--linie); background: var(--papier); border-radius: 5px; padding: 3px 10px; min-width: 34px; }
.viewer-zoom { min-width: 3.3em; text-align: center; color: var(--leise); }
.viewer-flaeche { flex: 1; overflow: auto; background: #d9d2c2; min-height: 0; cursor: grab; }
.viewer-flaeche.zieht { cursor: grabbing; }
.viewer-flaeche img { display: block; width: 100%; height: auto; max-width: none; user-select: none; -webkit-user-drag: none; }
.karte-offen { background: var(--karte); border: 1px solid var(--linie); border-radius: 8px; padding: 18px; }
.filter { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-bottom: 14px; font-size: .92rem; }
.segmente { display: inline-flex; border: 1px solid var(--linie); border-radius: 6px; overflow: hidden; }
.segmente button { background: var(--karte); border: none; padding: 5px 12px; }
.segmente button[aria-pressed="true"] { background: var(--akzent); color: #fff; }
.filter label { display: flex; align-items: center; gap: 6px; }
.fortschritt { font-size: .9rem; color: var(--leise); margin-bottom: 4px; display: flex; justify-content: space-between; gap: 8px; }
.balken { height: 6px; background: #e8e2d4; border-radius: 3px; overflow: hidden; margin-bottom: 14px; }
.balken div { height: 100%; background: var(--akzent); width: 0; }
.quelle { font-size: .9rem; color: var(--leise); margin-bottom: 10px; }
.quelle strong { color: var(--tinte); }
.tag-strike { display: inline-block; margin-left: 8px; color: var(--rot); font-size: .8rem; font-weight: 600; }
.kontext { border-left: 3px solid var(--linie); padding: 2px 0 2px 14px; margin: 14px 0 18px; }
.kontext .z { color: var(--leise); margin: 4px 0; }
.kontext .z-haupt { color: var(--tinte); font-size: 1.1rem; margin: 8px 0; }
.kontext .m.aktuell { outline: 2px solid var(--akzent); outline-offset: 1px; background: #fff3c9; }
.eingabe-reihe label { display: block; font-weight: 600; margin-bottom: 6px; }
.eingabe-reihe input { font-size: 1.1rem; }
.hilfe { color: var(--leise); font-size: .85rem; margin: 6px 0 14px; }
.nav-knopfe { display: flex; justify-content: space-between; gap: 10px; }

/* Protokoll */
.toolbar { position: sticky; top: var(--hdr); z-index: 20; background: var(--papier); padding: 8px 0; display: flex; align-items: center; gap: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--linie); }
.toolbar select { width: auto; }
.seite { background: var(--karte); border: 1px solid var(--linie); border-radius: 8px; padding: 16px; margin-bottom: 18px; scroll-margin-top: calc(var(--hdr) + 62px); }
.seite h2 { font-size: 1.1rem; margin-bottom: 4px; }
.fakten { display: flex; flex-wrap: wrap; gap: 2px 18px; font-size: .86rem; color: var(--leise); margin-bottom: 12px; }
.fakten b { font-weight: 600; color: var(--tinte); }
.seite-inhalt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.seite-foto { display: block; padding: 0; border: 1px solid var(--linie); border-radius: 6px; overflow: hidden; background: #e8e2d4; cursor: zoom-in; width: 100%; }
.seite-foto img { display: block; width: 100%; height: auto; }
.seite-notiz { margin-top: 14px; }
.seite-notiz label { font-weight: 600; font-size: .92rem; display: block; margin-bottom: 4px; }
.seite-notiz textarea { min-height: 70px; resize: vertical; }

/* Tabellen */
.abschnitte { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 14px; font-size: .92rem; }
.tabelle-block { margin-bottom: 30px; scroll-margin-top: calc(var(--hdr) + 12px); }
.tabelle-block h2 { font-size: 1.15rem; margin-bottom: 4px; }
.hinweis { color: var(--leise); font-size: .88rem; margin: 0 0 10px; }
table.tab { width: 100%; border-collapse: collapse; background: var(--karte); font-size: .9rem; border: 1px solid var(--linie); }
table.tab th, table.tab td { padding: 7px 9px; border-bottom: 1px solid var(--linie); text-align: left; vertical-align: top; }
table.tab th { background: #efe9dc; position: sticky; top: var(--hdr); z-index: 5; font-weight: 600; }
table.tab input { min-width: 130px; }
.seitenlinks { display: flex; flex-wrap: wrap; gap: 2px 8px; }
.name-unsicher { color: var(--rot); font-size: .75rem; margin-left: 6px; font-weight: 600; }
details.lang summary { cursor: pointer; color: var(--akzent); font-weight: 600; }
details.lang[open] summary { margin-bottom: 4px; }

/* Reise */
.reise-fakten { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px 14px; background: var(--karte); border: 1px solid var(--linie); border-radius: 8px; padding: 10px 14px; margin-bottom: 12px; }
.reise-fakten div { min-width: 0; }
.reise-fakten dt { font-size: .75rem; color: var(--leise); text-transform: uppercase; letter-spacing: .03em; }
.reise-fakten dd { margin: 0; font-weight: 600; font-size: .95rem; overflow-wrap: anywhere; }
.reise-layout { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; }
.karte-box { width: min(calc((100vh - var(--hdr) - 215px) * 1.3333), 66vw, 1040px); position: relative; border-radius: 8px; overflow: hidden; border: 1px solid var(--linie); background: #1f3d4d; }
.karte-box img { display: block; width: 100%; height: auto; }
#karte-nord { position: absolute; inset: 0; opacity: 0; transition: opacity .45s ease; }
.karte-box.zeigt-nord #karte-nord { opacity: 1; }
.karten-name { position: absolute; left: 10px; bottom: 10px; display: flex; flex-direction: column; gap: 1px; background: rgba(30, 28, 24, .72); color: #fff; padding: 4px 10px; border-radius: 6px; font-size: .85rem; font-weight: 600; pointer-events: none; }
.karten-name .legende { font-size: .72rem; font-weight: 400; opacity: .85; }
.karte-box svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.pfad-ohne { stroke-dasharray: 10 14; }
.pfad { fill: none; stroke: #d6452d; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-opacity: .92; }
.stopp { fill: #d6452d; stroke: #fff6e0; stroke-width: 2.5; }
#marker { transition: transform .5s ease-in-out; }
#marker.ohne-uebergang { transition: none; }
#marker .ring { fill: #d6452d; stroke: #fff6e0; stroke-width: 4; }
#marker .kern { fill: #fff6e0; }
#marker.aus { opacity: .35; }
.aus-hinweis { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); background: rgba(30, 28, 24, .85); color: #fff; padding: 6px 14px; border-radius: 16px; font-size: .92rem; font-weight: 600; max-width: 92%; text-align: center; }
.reise-seite { background: var(--karte); border: 1px solid var(--linie); border-radius: 8px; padding: 14px 16px; }
.reise-seite h2 { font-size: 1.1rem; }
.reise-seite .sitzung { color: var(--leise); font-size: .86rem; margin: 2px 0 10px; }
.reise-seite p { margin: 8px 0; }
.reise-orte { color: var(--leise); font-size: .88rem; }
.ungefaehr { color: var(--leise); font-size: .85rem; }
.reise-steuerung { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; background: var(--karte); border: 1px solid var(--linie); border-radius: 8px; padding: 10px 14px; margin-top: 12px; }
.reise-steuerung input[type="range"] { flex: 1 1 240px; accent-color: var(--akzent); min-width: 180px; }
.reise-steuerung select { width: auto; }
.reise-steuerung .zaehler { color: var(--leise); font-size: .9rem; white-space: nowrap; }

/* Dialoge */
dialog { border: 1px solid var(--linie); border-radius: 10px; padding: 22px; background: var(--karte); color: var(--tinte); }
dialog::backdrop { background: rgba(35, 30, 22, .55); }
#person-dialog { width: min(92vw, 400px); }
#person-dialog h2 { font-size: 1.25rem; margin-bottom: 4px; }
#person-dialog p { color: var(--leise); font-size: .92rem; margin: 0 0 14px; }
.person-liste { display: grid; gap: 8px; }
.person-liste button { text-align: left; padding: 11px 14px; border: 1px solid var(--linie); background: #fff; border-radius: 6px; font-weight: 600; }
.person-liste button:hover, .person-liste button:focus { border-color: var(--akzent); background: var(--akzent-hell); }
.person-liste .rolle { font-weight: 400; color: var(--leise); margin-left: 6px; }
#lightbox { padding: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; border: none; border-radius: 0; background: #d9d2c2; }
#lightbox .viewer { height: 100%; border: none; border-radius: 0; display: flex; flex-direction: column; }

/* Schmale Bildschirme */
@media (max-width: 900px) {
  .offen-layout, .reise-layout { grid-template-columns: minmax(0, 1fr); }
  .karte-box { width: 100%; }
  .offen-layout .viewer { position: static; height: 62vh; order: 2; }
  .seite-inhalt { grid-template-columns: minmax(0, 1fr); }
  .reise-fakten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  main { padding: 12px; }
  .kopf h1 { font-size: .95rem; }
  .status { display: none; }
  .status.fehler { display: inline; }
  .tabs button { padding: 6px 10px; }

  table.tab thead { display: none; }
  table.tab, table.tab tbody, table.tab tr, table.tab td { display: block; width: 100%; }
  table.tab tr { padding: 8px 2px; border-bottom: 2px solid var(--linie); }
  table.tab td { border: none; padding: 3px 9px; }
  table.tab td[data-label]::before { content: attr(data-label) ": "; color: var(--leise); font-size: .82rem; font-weight: 600; }
  table.tab input { min-width: 0; }
  .toolbar { top: var(--hdr); }
}

@media (max-width: 600px) {
  .karten-name .legende { display: none; }
}

/* Quests */
.quest-legende { color: var(--leise); margin: 0 0 14px; }
.quest-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 14px; align-items: start; }
.quest { background: var(--karte); border: 1px solid var(--linie); border-radius: 8px; padding: 14px 16px; }
.quest h2 { margin: 0 0 8px; font-size: 1.1rem; }
.quest ul { list-style: none; margin: 0; padding: 0; }
.quest ul ul { padding-left: 1.5em; }
.quest li { position: relative; padding-left: 1.5em; margin: 3px 0; overflow-wrap: anywhere; }
.q-sym { position: absolute; left: 0; font-weight: 700; }
.q-erledigt > .q-sym { color: var(--gruen-rand); }
.q-lore > .q-sym { color: var(--akzent); }
.q-gescheitert > .q-sym { color: var(--rot); }

/* Wetter am Marker */
.wetter-grund { fill: var(--karte); stroke: var(--linie); stroke-width: 2; opacity: .94; }

/* Wetterkarte */
#wetter-karte { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.wetter-ort circle { fill: rgba(255, 253, 248, .78); stroke: rgba(70, 64, 56, .35); stroke-width: 1.5; }
.ohne-wetter #wetter-karte, .ohne-wetter #wetter-orte { display: none; }
.wetter-schalter { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.wetter-schalter input { width: auto; }

/* Zeitstrahl */
.zeitstrahl { max-width: 760px; margin: 8px auto 40px; --zs-breite: 150px; }
.zs-punkt { display: flex; gap: 22px; align-items: flex-start; position: relative; }
.zs-jahr { width: var(--zs-breite); flex: none; text-align: right; font-weight: 700; color: var(--akzent); font-size: 1.05rem; font-variant-numeric: tabular-nums; padding-top: 1px; }
.zs-reise .zs-jahr { font-size: .92rem; padding-top: 3px; }
.zs-inhalt { border-left: 3px solid var(--akzent); padding: 0 0 6px 18px; position: relative; flex: 1; min-width: 0; }
.zs-inhalt::before { content: ""; position: absolute; left: -9px; top: 4px; width: 15px; height: 15px; border-radius: 50%; background: var(--akzent); border: 2px solid var(--papier); box-sizing: border-box; }
.zs-reise .zs-inhalt::before { background: #d6452d; }
.zs-ca .zs-inhalt::before { background: var(--papier); border-color: var(--akzent); }
.zs-inhalt h2 { font-size: 1rem; margin: 0 0 2px; }
.zs-inhalt p { margin: 0 0 3px; }
.zs-quelle { color: var(--leise); font-size: .85rem; }
.zs-spanne { margin-left: calc(var(--zs-breite) + 22px); border-left: 3px solid var(--akzent); display: flex; align-items: center; padding-left: 18px; }
.zs-spanne span { color: var(--leise); font-size: .85rem; font-style: italic; }
@media (max-width: 560px) { .zeitstrahl { --zs-breite: 88px; } .zs-punkt { gap: 12px; } .zs-spanne { margin-left: calc(var(--zs-breite) + 12px); } .zs-reise .zs-jahr { font-size: .8rem; } }

/* Quest-Filter */
.quest-filter { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: end; margin: 0 0 12px; }
.quest-filter label { display: flex; flex-direction: column; gap: 3px; font-size: .85rem; color: var(--leise); }
.quest-filter select, .quest-filter input { width: auto; min-width: 130px; font-size: 1rem; color: var(--tinte); }