@font-face{font-family:Bricolage;font-weight:700;font-display:swap;src:url(fonts/Bricolage-Display.ttf) format("truetype")}
@font-face{font-family:Inter;font-weight:400;font-display:swap;src:url(fonts/Inter-Regular.ttf) format("truetype")}
@font-face{font-family:Inter;font-weight:600;font-display:swap;src:url(fonts/Inter-SemiBold.ttf) format("truetype")}

:root{
  --paper:#F4F3EE; --surface:#FFFFFF; --surface2:#EDEBE4; --sunken:#E4E1D8;
  --ink:#16181A; --ink70:#4A4E51; --ink45:#84887F; --line:#DAD7CD; --line2:#C6C2B6;
  --slate:#2F5D62; --slate-soft:#E2ECEC; --sand:#B98A5E;
  --ok:#3E6B4F; --warn:#A8761F; --crit:#6E1F23;
  --ok-soft:#E3EDE5; --warn-soft:#F6EBD7; --crit-soft:#F2E0E0;
  --shadow:0 1px 2px rgba(22,24,26,.06), 0 8px 24px -16px rgba(22,24,26,.25);
  --rail:246px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#101214; --surface:#191C1E; --surface2:#212527; --sunken:#0B0D0E;
  --ink:#ECEAE3; --ink70:#B0B4B2; --ink45:#7C8180; --line:#2C3134; --line2:#3A4043;
  --slate:#6FA8AC; --slate-soft:#1B2E30; --sand:#D2A576;
  --ok:#7FB08D; --warn:#D7A44E; --crit:#D08A88;
  --ok-soft:#1C2A21; --warn-soft:#2C2417; --crit-soft:#2E1B1C;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -16px rgba(0,0,0,.8);
}}
:root[data-theme="dark"]{
  --paper:#101214; --surface:#191C1E; --surface2:#212527; --sunken:#0B0D0E;
  --ink:#ECEAE3; --ink70:#B0B4B2; --ink45:#7C8180; --line:#2C3134; --line2:#3A4043;
  --slate:#6FA8AC; --slate-soft:#1B2E30; --sand:#D2A576;
  --ok:#7FB08D; --warn:#D7A44E; --crit:#D08A88;
  --ok-soft:#1C2A21; --warn-soft:#2C2417; --crit-soft:#2E1B1C;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -16px rgba(0,0,0,.8);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--paper); color:var(--ink); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased; font-variant-numeric:tabular-nums;
}
h1,h2,h3{font-family:Bricolage,Inter,sans-serif;font-weight:700;letter-spacing:-.015em;text-wrap:balance;margin:0}
a{color:var(--slate)}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;background:var(--sunken);padding:1px 5px;border-radius:4px}

/* --- Anmeldung --- */
.gate{min-height:100vh;display:grid;place-items:center;padding:24px;background:var(--ink)}
.gatebox{background:var(--surface);border-radius:14px;padding:34px 32px;max-width:380px;width:100%;text-align:center;box-shadow:var(--shadow)}
.gatebox h1{font-size:22px;margin-bottom:6px}
.gatebox p{color:var(--ink70);font-size:13px;margin:0 0 22px}
.door{width:26px;height:36px;border-radius:3px;background:var(--sand);position:relative;margin:0 auto 16px}
.door::after{content:"";position:absolute;right:5px;top:16px;width:4px;height:4px;border-radius:50%;background:var(--ink)}
.err{color:var(--crit);font-size:12.5px;margin-top:14px;min-height:18px}

/* --- Chrome --- */
.topbar{display:flex;align-items:center;gap:14px;height:52px;padding:0 20px;background:var(--ink);color:var(--paper);position:sticky;top:0;z-index:30}
.brand{display:flex;align-items:center;gap:9px;font-family:Bricolage,sans-serif;font-weight:700}
.brand .door{width:15px;height:21px;margin:0}
.brand .door::after{right:3px;top:9px;width:2.5px;height:2.5px}
.brand small{font-family:Inter,sans-serif;font-weight:500;opacity:.55;letter-spacing:.06em;text-transform:uppercase;font-size:10.5px}
.topbar .spacer{flex:1}
.env{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;padding:3px 8px;border-radius:4px;background:rgba(244,243,238,.12)}
.who{display:flex;align-items:center;gap:8px;font-size:12.5px;opacity:.9}
.avatar{width:24px;height:24px;border-radius:50%;background:var(--slate);display:grid;place-items:center;font-size:10px;font-weight:600;color:#fff}
.linkbtn{background:none;border:0;color:inherit;font:inherit;font-size:12px;opacity:.65;cursor:pointer;text-decoration:underline}
.linkbtn:hover{opacity:1}

/* Einstellungen in der Kopfzeile — heute nur die Sprache. */
.einst{position:relative}
.zahnrad{display:grid;place-items:center;width:26px;height:26px;padding:0;border:0;
  background:none;color:inherit;opacity:.65;cursor:pointer;border-radius:7px}
.zahnrad:hover,.zahnrad[aria-expanded="true"]{opacity:1;background:rgba(244,243,238,.12)}
.zahnrad:focus-visible{outline:2px solid var(--sand);outline-offset:1px}
.einst-menu{position:absolute;right:0;top:26px;z-index:40;min-width:190px;
  background:var(--surface);color:var(--ink);border:1px solid var(--line);
  border-radius:10px;padding:7px;box-shadow:var(--shadow)}
.einst-lab{font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink45);font-weight:600;padding:5px 8px 6px}
.einst-eintrag{display:flex;align-items:center;gap:8px;width:100%;text-align:left;
  border:0;background:none;font:inherit;font-size:13px;color:var(--ink);
  padding:6px 8px;border-radius:7px;cursor:pointer}
.einst-eintrag:hover{background:var(--surface2)}
.einst-eintrag[aria-pressed="true"]{font-weight:600}
.ee-haken{width:12px;color:var(--slate)}
.einst-fuss{font-size:11px;color:var(--ink45);padding:7px 8px 3px;
  border-top:1px solid var(--line);margin-top:5px}

.shell{display:flex;min-height:calc(100vh - 52px)}
.rail{width:var(--rail);flex:none;border-right:1px solid var(--line);background:var(--surface2);padding:16px 12px;display:flex;flex-direction:column;gap:20px;overflow-y:auto;max-height:calc(100vh - 52px);position:sticky;top:52px}
.rail-label{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink45);font-weight:600;padding:0 8px 7px}
.navitem{display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:7px 9px;border-radius:7px;border:0;background:none;cursor:pointer;font:inherit;font-size:13.5px;color:var(--ink70)}
.navitem:hover{background:var(--sunken);color:var(--ink)}
.navitem[aria-current="true"]{background:var(--ink);color:var(--paper);font-weight:600}
.navitem .cnt{margin-left:auto;font-size:11px;color:var(--ink45)}
.navitem[aria-current="true"] .cnt{color:rgba(244,243,238,.6)}
.navitem:focus-visible{outline:2px solid var(--slate);outline-offset:1px}
.sub .navitem{font-size:12.5px;padding:5px 9px;padding-left:18px}
/* Staedte in der Seitenleiste klappen ab drei Staedten ein. */
.rail-stadt{display:flex;align-items:center;gap:6px;width:100%;text-align:left;
  padding:5px 8px 6px;border:0;background:none;cursor:pointer;font:inherit;
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink45);font-weight:600}
.rail-stadt:hover{color:var(--ink70)}
.rail-stadt .cnt{margin-left:auto;letter-spacing:0;text-transform:none;font-size:11px;font-weight:400}
.rs-pfeil{font-size:11px;width:9px;letter-spacing:0}
.sub.zu{display:none}
tr.klickbar{cursor:pointer}
tr.klickbar:hover{background:var(--surface2)}
/* App-Einstellungen: Zahl rechts, Wirkung links. */
.einst-zeile{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;
  padding:11px 0;border-top:1px solid var(--line)}
.einst-zeile:first-child{border-top:0;padding-top:0}
.ez-t{flex:1;min-width:240px;display:flex;flex-direction:column;gap:2px}
.ez-t b{font-size:13.5px}
.ez-t span{font-size:12px;color:var(--ink45);line-height:1.45}
.ez-w{display:flex;align-items:center;gap:8px}
.ez-w .inp{width:104px;text-align:right}
.ez-e{font-size:12px;color:var(--ink45);width:34px}
.ez-v{font-size:11px;color:var(--ink45);width:96px}
.ez-v.ab{color:var(--warn)}

/* Eigenes Profil: Wahl in Zeilen statt nebeneinander, damit die Sätze
   lesbar bleiben. Und das Siegel so, wie es die App zeigt. */
.seg.wahl{display:flex;flex-direction:column;gap:2px;align-items:stretch;padding:4px}
.seg.wahl button{text-align:left;padding:8px 12px;font-size:13px}
.siegel{display:flex;align-items:center;gap:11px;padding:2px 0 12px}
.siegel-mono{width:38px;height:38px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:var(--slate);color:#fff;font-size:13px;font-weight:600;letter-spacing:.04em}
.siegel-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.siegel-t b{font-size:13.5px}
.siegel-t span{font-size:11.5px;color:var(--ink45)}
.siegel-blatt{border-top:1px solid var(--line);padding-top:11px;font-size:13px;line-height:1.55}
.siegel-blatt p{margin:0 0 8px}
.siegel-blatt p:last-child{margin-bottom:0}
#pr-text{width:100%;font:inherit;font-size:13.5px;line-height:1.55}
.fotozeile{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.fotogross{width:84px;height:84px;flex:none;border-radius:50%;object-fit:cover;
  display:grid;place-items:center;background:var(--slate);color:#fff;
  font-size:26px;font-weight:600;letter-spacing:.04em}
.fotogross.leer{background:var(--sunken);color:var(--ink45)}
.fz-t{display:flex;flex-direction:column;gap:8px}
img.siegel-mono{object-fit:cover}
/* Der eigene Name in der Kopfzeile ist der Weg ins Profil. */
.ichbtn{display:flex;align-items:center;gap:8px;border:0;background:none;
  font:inherit;font-size:12.5px;color:inherit;cursor:pointer;padding:2px 4px;border-radius:7px}
.ichbtn:hover{background:rgba(244,243,238,.12)}
.ichbtn img.avatar{object-fit:cover}

/* Eine Aufgabe als ganze Zeile — „Zu tun" beginnt mit der Prüfliste. */
.zeile-aufgabe{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  font:inherit;cursor:pointer;margin-bottom:26px;padding:13px 16px;border-radius:10px;
  border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow)}
.zeile-aufgabe:hover{border-color:var(--slate)}
.za-t{display:flex;flex-direction:column;gap:2px}
.za-t b{font-size:14px}
.za-t span{font-size:12.5px;color:var(--ink45)}
.za-pfeil{margin-left:auto;color:var(--ink45);font-size:18px}

.main{flex:1;min-width:0;padding:24px 28px 80px;max-width:1340px}
.crumb{font-size:12px;color:var(--ink45);margin-bottom:6px}
.crumb b{color:var(--ink70);font-weight:500}
.page-h{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:4px}
.page-h h1{font-size:26px}
.page-sub{color:var(--ink70);margin:6px 0 22px;max-width:76ch}

/* Einordnung im Kopf statt in einer eigenen Karte am Seitenende: Rang, Form
   und Verb standen ohnehin schon oben als Pillen, und Linsen und Bekanntheit
   ordnen den Ort ein — das gehört neben den Namen, nicht 1500 px darunter. */
.kopf-steuer{display:flex;flex-wrap:wrap;align-items:center;gap:10px 26px;margin:12px 0 18px}
.ks-blk{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.ks-lab{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink45)}
.ks-hint{font-size:11.5px;color:var(--ink45)}
.checkrow-trenner{font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink45);margin:11px 0 7px;border-top:1px solid var(--line);padding-top:9px}
.chip.et{text-transform:uppercase;letter-spacing:.05em;font-size:11px}
.chip-jahr{opacity:.6;letter-spacing:0;text-transform:none}

/* --- Bausteine --- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow)}
.card-h{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--line)}
.card-h h3{font-size:14px;letter-spacing:0}
.card-h .r{margin-left:auto;font-size:12px;color:var(--ink45)}
.card-b{padding:16px}
.grid{display:grid;gap:16px}
.g3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}

.stat{display:flex;flex-direction:column;gap:3px}
.stat .n{font-family:Bricolage,sans-serif;font-weight:700;font-size:29px;line-height:1;letter-spacing:-.02em}
.stat .l{font-size:11.5px;color:var(--ink45)}
.statrow{display:flex;gap:28px;flex-wrap:wrap}

.pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:2.5px 8px;border-radius:20px;white-space:nowrap}
.p-s{background:var(--sand);color:#2a1c0c}
.p-a{background:var(--slate-soft);color:var(--slate)}
.p-b{background:var(--sunken);color:var(--ink45)}
.p-ok{background:var(--ok-soft);color:var(--ok)}
.p-warn{background:var(--warn-soft);color:var(--warn)}
.p-crit{background:var(--crit-soft);color:var(--crit)}
.p-ghost{background:transparent;border:1px solid var(--line2);color:var(--ink45)}

.bar{height:5px;border-radius:3px;background:var(--sunken);overflow:hidden}
.bar i{display:block;height:100%;background:var(--slate);border-radius:3px}
.bar.warn i{background:var(--warn)}
.bar.ok i{background:var(--ok)}
.barline{display:grid;grid-template-columns:96px 1fr 60px;gap:10px;align-items:center;font-size:12px;padding:3px 0}
.barline .k{color:var(--ink70)}
.barline .v{text-align:right;color:var(--ink45);font-size:11.5px}

.clickable{cursor:pointer;transition:transform .12s ease,box-shadow .12s ease}
.clickable:hover{transform:translateY(-1px);box-shadow:0 2px 4px rgba(22,24,26,.08),0 14px 32px -18px rgba(22,24,26,.4)}

.seg{display:inline-flex;background:var(--sunken);border-radius:8px;padding:2.5px;gap:2px}
.seg button{border:0;background:none;font:inherit;font-size:12.5px;padding:5px 13px;border-radius:6px;cursor:pointer;color:var(--ink70)}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.1)}

/* --- Kontaktbogen --- */
.sheet{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:16px}
.tile{border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--surface);cursor:pointer;position:relative}
.tile:hover{box-shadow:0 0 0 2px var(--slate)}
.thumb{position:relative;height:156px;background:var(--sunken);overflow:hidden}
/* Zuschnitt-Ansicht: Rahmen bekommt das Seitenverhältnis der App-Fläche.
   Maße aus dem App-Code: Vollbild 428x611 pt, Karussell 116x226 pt. */
.zeigt-zuschnitt .thumb{height:auto}
.c-vollbild .thumb{aspect-ratio:428/611}
.c-karussell .thumb{aspect-ratio:116/226}
.sheet.c-vollbild{grid-template-columns:repeat(auto-fill,minmax(196px,1fr))}
.sheet.c-karussell{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.fokus-marke{position:absolute;left:7px;bottom:7px;z-index:2;font-size:11px;line-height:1;
  color:#F4F3EE;background:rgba(22,24,26,.62);border-radius:4px;padding:3px 5px}
/* Löschen auf der Kachel: erscheint erst beim Darüberfahren, damit es beim
   Durchsehen nicht im Weg ist und nicht versehentlich getroffen wird. */
.kachel-weg{
  position:absolute;right:6px;bottom:6px;z-index:4;width:26px;height:26px;border-radius:50%;
  border:0;cursor:pointer;background:rgba(22,24,26,.66);color:#F4F3EE;font-size:12px;
  opacity:0;transition:opacity .12s,background .12s;
}
.tile:hover .kachel-weg,.kachel-weg:focus-visible{opacity:1}
/* Bildsuche direkt von der Kachel (24.08.2026) — neben dem Löschen, gleiche
   Form, andere Farbe beim Überfahren: Die beiden liegen dicht beieinander und
   das eine ist nicht rückgängig zu machen. */
.kachel-bild{
  position:absolute;right:38px;bottom:6px;z-index:4;width:26px;height:26px;border-radius:50%;
  border:0;cursor:pointer;background:rgba(22,24,26,.66);color:#F4F3EE;font-size:14px;
  opacity:0;transition:opacity .12s,background .12s;
}
.tile:hover .kachel-bild,.kachel-bild:focus-visible{opacity:1}
.kachel-bild:hover{background:var(--slate)}
.kachel-weg:hover{background:var(--crit)}
.btn.danger:hover{background:var(--crit);color:#fff;border-color:var(--crit)}

/* Auswahl für einen neuen Rundgang */
.tile.waehlbar{cursor:copy}
.tile.gewaehlt{box-shadow:0 0 0 3px var(--slate)}
.haken{position:absolute;left:8px;top:8px;z-index:4;width:22px;height:22px;border-radius:6px;
  display:grid;place-items:center;font-size:13px;font-weight:700;
  background:rgba(244,243,238,.9);color:var(--slate);box-shadow:0 1px 3px rgba(0,0,0,.35)}
.tile.gewaehlt .haken{background:var(--slate);color:#fff}
.nur-tour{position:absolute;right:8px;top:8px;z-index:4;font-size:9.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;padding:3px 7px;border-radius:4px;
  background:var(--ink);color:var(--paper);opacity:.85}
.auswahlleiste{
  position:sticky;bottom:0;margin:18px -28px -80px;padding:13px 28px;z-index:12;
  background:var(--surface);border-top:1px solid var(--line);display:flex;align-items:center;gap:12px;
  box-shadow:0 -8px 24px -20px rgba(0,0,0,.5);flex-wrap:wrap;
}

/* Stationen-Karte und -Liste in der Tour-Ansicht */
.tourkarte{height:300px;background:var(--sunken);border-bottom:1px solid var(--line);
  position:relative;z-index:0;isolation:isolate}
.karte-platzhalter{height:100%;display:grid;place-items:center;color:var(--ink45);font-size:12.5px}
.karten-nr{
  width:26px;height:26px;border-radius:50%;background:var(--sand);color:#2a1c0c;
  display:grid;place-items:center;font:600 12px/1 Inter,sans-serif;
  border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.45);
}
.leaflet-container{font-family:Inter,sans-serif}
.stat-zeile{display:flex;gap:11px;align-items:center;padding:10px 16px;border-bottom:1px solid var(--line)}
.stat-zeile:last-child{border-bottom:0}
.stat-fuss{display:flex;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid var(--line);flex-wrap:wrap}

/* Stationen im Tour-Dialog */
.t-station{display:flex;gap:11px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--line)}
.t-station:last-child{border-bottom:0}
.t-nr{width:22px;height:22px;border-radius:50%;background:var(--sand);color:#2a1c0c;flex:none;
  display:grid;place-items:center;font-size:11px;font-weight:700;margin-top:2px}
.t-name{font-weight:600;font-size:13px;margin-bottom:5px}
.t-sicht{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10px;
  color:var(--ink45);flex:none;cursor:pointer;padding-top:2px}
.t-pfeile{display:flex;flex-direction:column;gap:2px;flex:none;padding-top:2px}
.t-pfeile .chip-akt{font-size:10px;padding:3px 5px;background:var(--sunken)}
.t-pfeile .chip-akt:disabled{opacity:.25;cursor:default}
@media (max-width:820px){.auswahlleiste{margin:18px -16px -60px;padding:12px 16px}}
.thumb canvas,.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.thumb img{opacity:0;transition:opacity .25s}
.thumb img.on{opacity:1}
.tile .meta{padding:8px 9px 10px}
.tile .nm{font-size:12px;font-weight:600;line-height:1.3;margin-bottom:5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:31px}
.tile .fl{display:flex;gap:4px;flex-wrap:wrap;align-items:center;font-size:10.5px;color:var(--ink45)}
/* Die leere Kachel: ein weisses Bild in derselben Groesse wie die anderen,
   damit man sieht, wo der neue Ort landet. Sie ist ein <button>, also
   Schriftgroessen und Ausrichtung zuruecksetzen. */
.tile-neu{display:block;width:100%;text-align:left;font:inherit;padding:0;
  border:1px dashed var(--line2);background:var(--surface)}
.tile-neu .tn-plus{display:grid;place-items:center;aspect-ratio:428/611;
  background:#fff;color:var(--line2);font-size:38px;font-weight:300;line-height:1}
.tile-neu:hover{border-style:solid;border-color:var(--slate)}
.tile-neu:hover .tn-plus{color:var(--slate)}
.tile-neu .nm{min-height:0;margin-bottom:4px}
/* Im Dunkelmodus waere eine reinweisse Flaeche ein Scheinwerfer. */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tile-neu .tn-plus{background:var(--surface2)}}
:root[data-theme="dark"] .tile-neu .tn-plus{background:var(--surface2)}
.tile .corner{position:absolute;top:7px;left:7px;z-index:2}
.tile .flag{position:absolute;top:7px;right:7px;z-index:2}
.flagdot{min-width:18px;height:18px;padding:0 4px;border-radius:9px;display:grid;place-items:center;font-size:10px;font-weight:700;background:var(--crit);color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.35)}

table{width:100%;border-collapse:collapse;font-size:12.5px}
th{text-align:left;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink45);font-weight:600;padding:0 10px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:9px 10px;border-bottom:1px solid var(--line)}
tr:last-child td{border-bottom:0}
tbody tr{cursor:pointer}
tbody tr:hover td{background:var(--surface2)}
.tblwrap{overflow-x:auto}
.num{text-align:right}

/* --- Detail --- */
.split{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(300px,.7fr);gap:18px;align-items:start}
.field{margin-bottom:15px}
.field label{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink45);font-weight:600;margin-bottom:5px}
.field label .hint{margin-left:auto;font-size:10.5px;letter-spacing:0;text-transform:none;font-weight:400}
.ro{background:var(--surface2);border:1px solid var(--line);border-radius:7px;padding:9px 11px;font-size:13.5px;color:var(--ink);white-space:pre-wrap}
.ro.empty{color:var(--ink45);font-style:italic}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:12px;padding:4px 9px;border-radius:6px;background:var(--slate-soft);color:var(--slate);font-weight:500}
.chip.first{background:var(--slate);color:#fff}
.chip-akt{border:0;background:none;color:inherit;opacity:.55;cursor:pointer;font-size:11px;
  line-height:1;padding:2px;border-radius:3px;font-family:inherit}
.chip-akt:hover{opacity:1;background:rgba(0,0,0,.12)}
.chip-akt:focus-visible{outline:2px solid currentColor;outline-offset:1px;opacity:1}
.addlinse{font:inherit;font-size:12px;padding:4px 8px;border-radius:6px;border:1px dashed var(--line2);
  background:none;color:var(--ink45);cursor:pointer}
.addlinse:focus-visible{outline:2px solid var(--slate);outline-offset:1px}

.phone{width:230px;margin:0 auto;border-radius:26px;border:1px solid var(--line2);background:#16181A;overflow:hidden;box-shadow:var(--shadow)}
/* Vorschau im Telefon-Rahmen: 230 pt breit, Hero = 66 % der Bildschirmhöhe
   im Verhältnis 428:611 — also 230 / 428 * 611 ≈ 328. */
.phone .hero{position:relative;height:328px}
.phone .hero .thumb{position:absolute;inset:0;height:100%;aspect-ratio:auto}
.phone .scrim{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.32) 0%,rgba(0,0,0,0) 32%,rgba(22,24,26,.72) 74%,#16181A 100%)}
.phone .txt{position:absolute;left:14px;right:14px;bottom:11px;color:#F4F3EE;z-index:3}
.phone .kick{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:#B98A5E;font-weight:700;margin-bottom:4px}
.phone .ttl{font-family:Bricolage,sans-serif;font-weight:700;font-size:16px;line-height:1.14}
.phone .body{background:#16181A;color:#CFCCC4;font-size:10.5px;line-height:1.5;padding:9px 14px 14px}
.phone .body .dc{float:left;font-family:Bricolage,sans-serif;font-size:25px;line-height:.82;color:#B98A5E;margin:2px 5px 0 0}

.kv{display:grid;grid-template-columns:auto 1fr;gap:5px 12px;font-size:12.5px;margin:0}
.kv dt{color:var(--ink45)}
.kv dd{margin:0}

.checkrow{display:flex;gap:9px;align-items:flex-start;padding:9px 0;border-bottom:1px solid var(--line);font-size:12.5px}
.checkrow:last-child{border-bottom:0}
.checkrow .ic{width:17px;height:17px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:10px;font-weight:700;margin-top:1px}
.ic-ok{background:var(--ok-soft);color:var(--ok)}
.ic-warn{background:var(--warn-soft);color:var(--warn)}
.ic-crit{background:var(--crit-soft);color:var(--crit)}
.checkrow .t{flex:1;min-width:0}
.checkrow .t b{font-weight:600;display:block}
.checkrow .t span{color:var(--ink45);font-size:11.5px}

.todo{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--line)}
.todo:last-child{border-bottom:0}
.todo .bullet{width:6px;height:6px;border-radius:50%;background:var(--warn);flex:none;margin-top:7px}
.todo .tx{flex:1;font-size:12.5px;line-height:1.45}
.todo .src{color:var(--ink45);font-size:11px;margin-top:2px;cursor:pointer}
.todo .src:hover{color:var(--slate);text-decoration:underline}

.srclist{display:flex;flex-direction:column;gap:7px}
.srcitem{display:flex;gap:8px;align-items:baseline;font-size:12.5px}
.srcitem .n{width:15px;color:var(--ink45);font-size:11px;flex:none}
.srcitem a{text-decoration:none;border-bottom:1px solid transparent}
.srcitem a:hover{border-bottom-color:var(--slate)}
.srcitem .host{color:var(--ink45);font-size:11px}
.quelle-neu{display:flex;gap:7px;margin-top:11px;flex-wrap:wrap}
.quelle-neu .inp{flex:1;min-width:150px;font-size:12.5px;padding:6px 9px}
.feld-fuss{display:flex;align-items:center;gap:10px;margin-top:6px}
.feld-stand{font-size:11.5px;color:var(--warn);flex:1}
.feld-fuss .btn{padding:5px 11px;font-size:12px}

.btn{font:inherit;font-size:12.5px;font-weight:500;padding:7px 13px;border-radius:7px;border:1px solid var(--line2);background:var(--surface);color:var(--ink);cursor:pointer}
.btn:hover{background:var(--surface2)}
.btn.pri{background:var(--slate);border-color:var(--slate);color:#fff}
.btn.pri:hover{filter:brightness(1.08)}
.btn:focus-visible{outline:2px solid var(--slate);outline-offset:1px}
/* Ein gesperrter Knopf darf nicht aussehen wie ein bereiter. */
.btn:disabled{opacity:.4;cursor:default}
.btn.pri:disabled:hover{filter:none}
.btnrow{display:flex;gap:8px;flex-wrap:wrap}

/* Bild-Karten: großes Titelbild, darunter die Alternativen */
.bildkarte{margin:0 0 12px}
.bildkarte:last-of-type{margin-bottom:0}
.lupe{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;position:relative;border-radius:8px}
.lupe .thumb{height:132px;border-radius:8px;border:1px solid var(--line)}
.bildkarte.ist-titel .lupe .thumb{height:186px;border:0;outline:2px solid var(--slate);outline-offset:1px}
/* Im Zuschnitt-Modus bestimmt die Höhe die Breite (Seitenverhältnis der App-Fläche) */
.bildkarte.zeigt-zuschnitt .lupe .thumb{height:210px;width:auto;margin:0 auto}
.bildkarte.zeigt-zuschnitt.ist-titel .lupe .thumb{height:290px}
.bildkarte.c-karussell .lupe .thumb{height:230px}
.bildkarte.c-karussell.ist-titel .lupe .thumb{height:300px}
.lupe:focus-visible{outline:2px solid var(--slate);outline-offset:3px}
.galtag{
  position:absolute;left:8px;top:8px;font-size:9.5px;font-weight:700;z-index:3;
  letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:4px;
  background:var(--slate);color:#fff;
}
.galtag.neu{background:var(--sand);color:#2a1c0c}
.pulsen{animation:pulsen 1.4s ease-in-out infinite}
@keyframes pulsen{0%,100%{opacity:1}50%{opacity:.25}}
.lupe-icon{
  position:absolute;right:8px;bottom:8px;z-index:3;width:24px;height:24px;border-radius:6px;
  display:grid;place-items:center;background:rgba(22,24,26,.62);color:#F4F3EE;font-size:13px;
  opacity:0;transition:opacity .12s;
}
.lupe:hover .lupe-icon,.lupe:focus-visible .lupe-icon{opacity:1}
.bildkarte figcaption{display:flex;align-items:center;gap:8px;margin-top:6px;min-height:28px}
.bildkarte .cred{font-size:11px;color:var(--ink45);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bildkarte figcaption .btn{padding:4px 10px;font-size:11.5px}

/* Großbild-Ansicht */
.overlay{
  position:fixed;inset:0;z-index:2000;background:rgba(10,11,12,.93);
  display:grid;place-items:center;padding:32px;cursor:zoom-out;
}
.overlay img{max-width:100%;max-height:calc(100vh - 64px);object-fit:contain;border-radius:4px;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.9)}
.overlay-zu{
  position:fixed;z-index:2001;top:16px;right:20px;width:36px;height:36px;border-radius:50%;border:0;
  background:rgba(244,243,238,.14);color:#F4F3EE;font-size:16px;cursor:pointer;
}
.overlay-zu:hover{background:rgba(244,243,238,.26)}
.overlay-hinweis{position:fixed;bottom:16px;left:0;right:0;text-align:center;color:rgba(244,243,238,.5);font-size:11.5px}

/* Zuschnitt-Dialog */
.overlay.zuschnitt{cursor:default;padding:24px}
.zu-box{background:var(--surface);border-radius:12px;max-width:1000px;width:100%;
  max-height:calc(100vh - 48px);display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--shadow)}
.zu-kopf{display:flex;align-items:baseline;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.zu-kopf b{font-family:Bricolage,sans-serif;font-size:15px}
.zu-kopf span{font-size:12px;color:var(--ink45);flex:1}
.zu-kopf .overlay-zu{position:static;width:28px;height:28px;background:var(--sunken);color:var(--ink70);font-size:13px}
.zu-inhalt{display:flex;gap:18px;padding:18px;overflow:auto;align-items:flex-start}
.zu-bild{position:relative;flex:1;min-width:0;cursor:crosshair;touch-action:none;user-select:none;
  background:var(--sunken);border-radius:8px;overflow:hidden}
.zu-bild img{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none}
.zu-rahmen{position:absolute;border:2px solid var(--sand);pointer-events:none;
  box-shadow:0 0 0 9999px rgba(10,11,12,.34)}
.zu-rahmen[data-f="vollbild"]{border-color:var(--slate);border-style:dashed;box-shadow:none}
.zu-rahmen span{position:absolute;top:-1px;left:-1px;font-size:9px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;background:var(--sand);color:#2a1c0c;padding:2px 6px;border-radius:0 0 4px 0}
/* zweiter Rahmen beschriftet unten, sonst überlagern sich die Fähnchen */
.zu-rahmen[data-f="vollbild"] span{background:var(--slate);color:#fff;
  top:auto;bottom:-1px;border-radius:0 4px 0 0}
.zu-punkt{position:absolute;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;
  border:2.5px solid #fff;background:var(--crit);box-shadow:0 0 0 1.5px rgba(0,0,0,.5);pointer-events:none}
.zu-vorschau{display:flex;gap:14px;flex:none}
.zu-v-titel{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink45);
  font-weight:600;margin-bottom:6px;display:flex;gap:6px}
.zu-v-titel span{color:var(--line2);font-weight:400;letter-spacing:0;text-transform:none}
.zu-v-rahmen{position:relative;overflow:hidden;border-radius:7px;background:var(--sunken);
  border:1px solid var(--line2);width:132px}
.zu-v[data-v="vollbild"] .zu-v-rahmen{width:176px}
.zu-v-rahmen img{position:absolute;max-width:none}
.zu-fuss{display:flex;align-items:center;gap:12px;padding:12px 18px;border-top:1px solid var(--line);flex-wrap:wrap}
.zu-wert{font-size:12px;color:var(--ink45);flex:1;font-variant-numeric:tabular-nums}
@media (max-width:840px){
  .zu-inhalt{flex-direction:column}
  .zu-vorschau{align-self:center}
}

.note{background:var(--warn-soft);border-left:3px solid var(--warn);border-radius:0 7px 7px 0;padding:11px 13px;font-size:12.5px}
.note.crit{background:var(--crit-soft);border-left-color:var(--crit)}
.note.ok{background:var(--ok-soft);border-left-color:var(--ok)}

.loading{display:grid;place-items:center;padding:70px 20px;color:var(--ink45);font-size:13px}
.view{display:none}
.view.on{display:block}
.empty-state{padding:40px;text-align:center;color:var(--ink45)}
.searchbox{width:100%;font:inherit;font-size:13px;padding:8px 11px;border:1px solid var(--line2);border-radius:7px;background:var(--surface);color:var(--ink)}
.searchbox:focus{outline:2px solid var(--slate);outline-offset:-1px}

@media (max-width:1080px){.split{grid-template-columns:1fr}}
@media (max-width:820px){
  .rail{display:none}
  .main{padding:18px 16px 60px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Bildsucher */
.such-zeile{display:flex;gap:8px;margin-bottom:10px}
.such-zeile .inp{flex:1}
.such-filter{display:flex;gap:14px;flex-wrap:wrap;align-items:center;padding-bottom:12px;
  border-bottom:1px solid var(--line)}
.q-schalter{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink70);cursor:pointer}
.q-schalter .langsam{font-size:10px;color:var(--ink45);border:1px solid var(--line2);
  border-radius:3px;padding:0 4px}
.such-hinweis{padding:48px 20px;text-align:center;color:var(--ink45);font-size:13px}
.such-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.treffer{margin:0;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--surface)}
.treffer .lupe{display:block;width:100%;cursor:zoom-in}
.treffer .thumb{height:170px;border-radius:0}
.treffer figcaption{padding:9px 10px 11px}
.tr-quelle{font-size:11px;font-weight:600;color:var(--slate);display:flex;gap:6px;align-items:baseline}
.tr-groesse{margin-left:auto;color:var(--ink45);font-weight:400}
.tr-cred{font-size:11px;color:var(--ink45);margin:3px 0 8px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.treffer .btnrow .btn{padding:5px 9px;font-size:11.5px;flex:1}

/* Kopfzeile: Rang-Verteilung als eine Kapsel */
.stufen{display:inline-flex;border:1px solid var(--line2);border-radius:20px;overflow:hidden}
.stufen span{font-size:11px;font-weight:600;padding:2.5px 9px}
.stufen .s{background:var(--sand);color:#2a1c0c}
.stufen .a{background:var(--slate-soft);color:var(--slate)}
.stufen .b{background:var(--sunken);color:var(--ink45)}
/* Fußzeile des Kontaktbogens */
.fuss-leiste{display:flex;align-items:center;gap:12px;margin-top:26px;padding-top:18px;
  border-top:1px solid var(--line);flex-wrap:wrap}
.fuss-leiste .hin{font-size:12.5px;color:var(--ink45);flex:1;min-width:200px}

/* ---------------- Posteingang (Rollen-Umbau, Stufe 2) ----------------
   Die Gruppe, die auf eine Entscheidung wartet, ist die einzige mit Farbe.
   Alles andere bleibt ruhig — sonst schreien vier Listen gleichzeitig. */
.rollenchip{font-size:11px;letter-spacing:.04em;padding:3px 8px;border-radius:999px;
  background:var(--slate-soft);color:var(--slate);font-weight:600;margin-right:10px;white-space:nowrap}
.navitem .cnt.warn{background:var(--warn);color:#fff;border-radius:999px;
  padding:1px 7px;font-weight:700;font-size:10.5px}
.navitem[aria-current="true"] .cnt.warn{color:#fff}

.banner{margin-bottom:16px}
.post-gruppe{margin:0 0 30px}
.post-gruppe h2{font-family:Bricolage,Georgia,serif;font-size:17px;font-weight:700;
  margin:0 0 3px;display:flex;align-items:center;gap:9px}
.post-gruppe h2 .cnt{font-size:11.5px;font-weight:600;color:var(--ink45);
  background:var(--sunken);border-radius:999px;padding:2px 8px}
.post-gruppe h2 .cnt.warn{background:var(--warn);color:#fff}
.gruppe-sub{font-size:13px;color:var(--ink45);margin:0 0 12px;max-width:62ch}
.post-gruppe.stumm{opacity:.72}
.post-gruppe.stumm:hover{opacity:1}
.leer{font-size:13px;color:var(--ink45);border:1px dashed var(--line);
  border-radius:10px;padding:14px 16px;background:var(--surface2)}

.vorgang{border:1px solid var(--line);border-radius:10px;background:var(--surface);
  padding:13px 15px;margin-bottom:9px;box-shadow:var(--shadow)}
.vorgang.mehr{display:none}
/* Ein schwerer Eingriff bekommt eine Kante, keine Fuellfarbe: er soll auffallen,
   ohne die Liste in eine Warnwand zu verwandeln. */
.vorgang.schwer{border-left:3px solid var(--warn)}
.v-kopf{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-bottom:3px}
.v-art{font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink45);font-weight:600}
.vorgang.schwer .v-art{color:var(--warn)}
.v-kopf strong{font-size:14.5px}
.v-ort{font-size:13px;color:var(--ink70)}
.v-meta{font-size:12px;color:var(--ink45);margin-bottom:7px}
.v-frist{color:var(--warn);font-weight:600}
.v-scope{font-variant:all-small-caps;letter-spacing:.04em}
.v-diff{font-size:12.5px;color:var(--ink70);background:var(--surface2);
  border-radius:7px;padding:7px 10px;margin-bottom:7px;word-break:break-word}
.v-diff .alt{text-decoration:line-through;color:var(--ink45)}
.v-diff .neu{font-weight:600;color:var(--ink)}
.v-grund{font-size:12.5px;color:var(--ink70);font-style:italic;margin-bottom:7px}
.v-fuss{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.v-fuss .hint{font-size:12px;color:var(--ink45)}

/* ---------------- Rollen & Zuständigkeit (Stufe 3+4) ---------------- */
.tabwrap{overflow-x:auto;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.tab{width:100%;border-collapse:collapse;font-size:13.5px;min-width:560px}
.tab th{text-align:left;font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink45);font-weight:600;padding:10px 14px;border-bottom:1px solid var(--line);
  white-space:nowrap}
.tab td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.tab tr:last-child td{border-bottom:0}
.tab .r{text-align:right}
.tab .ink45{color:var(--ink45);font-size:12px}
.warn-text{color:var(--warn);font-weight:600}
.crit-text{color:var(--crit)}
.dumeta{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate);
  background:var(--slate-soft);border-radius:999px;padding:1px 7px;font-weight:700}

.einladungen{margin-top:16px;border:1px dashed var(--line2);border-radius:10px;padding:13px 15px}
.einladungen h3{font-family:Bricolage,Georgia,serif;font-size:14px;margin:0 0 8px}
.einladung{font-size:13px;padding:5px 0;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.einladungen .gruppe-sub{margin:8px 0 0}

/* Ernennen-Dialog — gleiche Bauform wie Löschen und Zuschnitt */
.ernbox{max-width:520px}
.ernbody{padding:18px}
.dlabel{display:block;font-size:12px;font-weight:600;color:var(--ink70);margin:14px 0 5px}
.ernbody .dlabel:first-child{margin-top:0}
.dlabel .hint{font-weight:400;color:var(--ink45)}
.ernbody .inp{width:100%}
.ernbody select.inp{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink45) 50%),
  linear-gradient(135deg,var(--ink45) 50%,transparent 50%);
  background-position:calc(100% - 17px) 52%,calc(100% - 12px) 52%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:34px}
.rollenwahl{display:flex;gap:6px;flex-wrap:wrap}
.rollenwahl button{font:inherit;font-size:12.5px;padding:6px 12px;border-radius:999px;
  border:1px solid var(--line2);background:var(--surface);color:var(--ink70);cursor:pointer}
.rollenwahl button:hover{border-color:var(--slate);color:var(--ink)}
.rollenwahl button.an{background:var(--slate);border-color:var(--slate);color:#fff;font-weight:600}
.derr{color:var(--crit);font-size:12.5px;margin-top:10px;min-height:1em}
.ernfuss{display:flex;align-items:center;gap:9px;padding:13px 18px;border-top:1px solid var(--line);
  background:var(--surface2);border-radius:0 0 12px 12px}

/* ---------------- Übernommene Rolle ----------------
   Das Band sitzt über allem und lässt sich nicht wegklicken: Wer vergisst,
   dass er in fremder Rolle steckt, hält fehlende Orte für Datenverlust. */
.ueband{position:fixed;top:0;left:0;right:0;z-index:2500;display:flex;align-items:center;
  gap:11px;padding:9px 18px;background:var(--sand);color:#241a10;font-size:13px;
  box-shadow:0 2px 10px -4px rgba(0,0,0,.5)}
.ueband strong{font-size:13.5px}
.ueband .uedet{opacity:.78;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ueband .btn{background:#241a10;border-color:#241a10;color:var(--sand);padding:4px 12px;font-size:12px}
.ueband .btn:hover{filter:brightness(1.3)}
.uepunkt{width:8px;height:8px;border-radius:50%;background:#241a10;flex:none;
  animation:uepuls 2.4s ease-in-out infinite}
@keyframes uepuls{0%,100%{opacity:1}50%{opacity:.25}}
/* Das Band schiebt die Seite nach unten, statt die Kopfzeile zu verdecken —
   die klebt oben und muss ihren Halt behalten. */
body.hat-ueband{padding-top:38px}
body.hat-ueband .topbar{top:38px}
body.hat-ueband .rail{top:90px;max-height:calc(100vh - 90px)}
body.hat-ueband .shell{min-height:calc(100vh - 90px)}
body.hat-ueband .overlay{top:38px}
.rollenchip.sim{background:var(--sand);color:#241a10}
@media (max-width:700px){ .ueband .uedet{display:none} }

.gate-hinweis{font-size:11.5px;color:var(--ink45);margin:10px 0 0;line-height:1.45}
.klopfchip{font-size:10px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;
  color:#241a10;background:var(--sand);border-radius:999px;padding:2px 8px;white-space:nowrap}
.suchzeile{display:flex;gap:8px;align-items:center;margin:0 0 12px}
.suchzeile .inp{flex:1;max-width:340px}

/* ---------------- Steckbrief einer Person aus der App ---------------- */
.namebtn{font:inherit;font-size:14px;font-weight:600;color:var(--ink);background:none;border:0;
  padding:0;cursor:pointer;text-align:left;border-bottom:1px solid transparent}
.namebtn:hover{color:var(--slate);border-bottom-color:var(--slate)}
.steckbox{max-width:620px}
.steckbox .ernbody{max-height:calc(100vh - 220px);overflow-y:auto}
.steck-h{font-family:Bricolage,Georgia,serif;font-size:14px;margin:20px 0 9px;
  padding-bottom:5px;border-bottom:1px solid var(--line)}
.steck-h:first-child{margin-top:0}
.ortliste{border:1px solid var(--line);border-radius:9px;overflow:hidden}
.ortzeile{display:flex;align-items:baseline;gap:10px;padding:8px 12px;font-size:13.5px;
  border-bottom:1px solid var(--line)}
.ortzeile:last-child{border-bottom:0}
.ortzeile:nth-child(odd){background:var(--surface2)}
.ort-ebene{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink45);
  font-weight:600;width:52px;flex:none}
.ort-zahl{margin-left:auto;font-size:12px;color:var(--ink45);white-space:nowrap}
.steck-fuss{font-size:12px;color:var(--ink45);margin:8px 0 0;font-style:italic}
.steck-meta{font-size:12.5px;color:var(--ink45);margin-top:10px}
.steckbox .statrow{margin:0}
.beitrag{border:1px solid var(--line);border-radius:9px;padding:11px 13px;margin-bottom:8px;
  background:var(--surface2)}
.beitrag .v-diff{background:var(--surface);margin:6px 0}

/* Hinweis auf eine neuere Fassung — unaufdringlich unten, nicht als Sperre.
   Die alte Oberfläche funktioniert ja, sie ist nur nicht die neueste. */
.neuband{position:fixed;z-index:2400;left:50%;transform:translateX(-50%);bottom:18px;
  display:flex;align-items:center;gap:10px;padding:9px 14px;border-radius:999px;
  background:var(--ink);color:var(--paper);font-size:13px;
  box-shadow:0 8px 28px -8px rgba(0,0,0,.55)}
.neuband .btn{background:var(--paper);border-color:var(--paper);color:var(--ink);
  padding:4px 12px;font-size:12px}
.neuband .linkbtn{color:rgba(244,243,238,.6)}
.neuband .linkbtn:hover{color:var(--paper)}

/* Mail-Blatt: drei Felder zum Kopieren, nichts wird verschickt. */
.kopierzeile{display:flex;gap:8px;align-items:flex-start}
.kopierzeile .inp{flex:1}
.kopierzeile textarea.inp{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;line-height:1.5}
.kopierzeile .btn{flex:none}

/* Prüfpunkte, die man beantworten kann — die anderen bleiben Text. */
.todo.machbar{background:var(--surface2);border-radius:9px;padding:10px 12px;margin-bottom:6px}
.punktfuss{display:flex;gap:8px;margin-top:8px}
.punktfuss .btn{padding:4px 12px;font-size:12px}

/* „Etwas stimmt hier nicht" — der Weg zurück zur KI. */
.ueberarbeiten{display:flex;align-items:center;gap:12px;margin-top:16px;
  padding-top:14px;border-top:1px solid var(--line);flex-wrap:wrap}
.ueberarbeiten .hint{font-size:12px;color:var(--ink45);flex:1;min-width:200px}
.v-patch{margin:8px 0;display:grid;gap:8px}
.v-patch > div{background:var(--surface);border-radius:7px;padding:8px 10px;font-size:12.5px}
.v-patch b{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink45)}

/* Ort vorschlagen — die Karte ist das Hauptbedienelement, nicht Zierde. */
.vorschlagbox{max-width:640px}
.vorschlagkarte{height:280px;border:1px solid var(--line);border-radius:9px;
  overflow:hidden;z-index:0;isolation:isolate}
.vorschlagbox .ink45{font-size:12px;margin-top:6px}

/* ---------------- „Hier ist offen" ----------------
   Steht über dem Datensatz, weil es das Einzige ist, was jemand hier
   erledigen kann. Sandfarben wie das Rollen-Band: dieselbe Bedeutung —
   „das wartet auf dich". */
.offen{border:1px solid var(--sand);background:var(--sand-soft);border-radius:11px;
  padding:14px 16px;margin-bottom:18px}
.offen-kopf{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.offen-kopf h3{font-family:Bricolage,Georgia,serif;font-size:15px;margin:0}
.offen-kopf .cnt{font-size:11px;font-weight:700;padding:1px 8px;border-radius:999px;
  background:var(--warn);color:#fff}
.offen-kopf .ink45{margin-left:auto;font-size:12px;color:var(--ink45)}
/* Der Knopf steht UNTER dem Satz, den er beantwortet — wie ueberall sonst
   auf der Seite. Rechts daneben las man erst den Satz, sprang nach rechts,
   und bei zwei Zeilen Text stand der Knopf auf halber Hoehe im Nichts. */
.offen-zeile{display:flex;flex-direction:column;align-items:flex-start;gap:9px;
  padding:10px 12px;border-radius:8px;background:var(--surface);margin-bottom:6px}
.offen-zeile:last-child{margin-bottom:0}
.offen-zeile .tx{font-size:13.5px;line-height:1.45}
.offen-zeile .ink45{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink45)}
.offen-zeile .btn{padding:4px 12px;font-size:12px}
.offen-zeile:not(.machbar){background:transparent;border:1px dashed var(--line2)}
.offen.leer{display:flex;align-items:center;gap:10px;background:var(--ok-soft);
  border-color:var(--ok);font-size:13.5px;padding:11px 16px}

/* Die rechte Spalte scrollt ganz normal mit. Vorher klebte nur die
   Vorschau — Ort und Löschen schoben sich beim Scrollen darunter durch,
   was wie ein Fehler aussah. Die ganze Spalte festzustellen half nicht:
   Sie ist mit rund 820 px höher als der Bildschirm und hätte eine zweite
   Bildlaufleiste gebraucht. Und der Grund fürs Kleben ist weg — die Texte
   werden nicht mehr im Feld geändert, sondern über „Texte ändern". */
.split > .klebspalte{align-self:start}

/* ---------------- Galerie als Raster ----------------
   Drei Bilder untereinander waren rund 1000 px — und man will sie ohnehin
   nebeneinander sehen, um zu entscheiden, welches das Titelbild wird. Alle
   drei gleich groß, auch das Titelbild: Man vergleicht Motive, und dafür
   müssen sie dieselbe Fläche bekommen. Erkennbar bleibt es an der Marke
   und am Rahmen. auto-fit statt auto-fill, damit drei Bilder die Zeile
   ausfüllen und nicht in vier Spalten links kleben. */
.galerie{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;
  align-items:start}
.galerie .bildkarte{margin:0}
.galerie .bildkarte .lupe .thumb{height:150px;width:100%;margin:0;aspect-ratio:auto;
  object-fit:cover}
.galerie .bildkarte figcaption{flex-wrap:wrap;gap:5px}
.galerie .bildkarte .cred{flex:1 0 100%;white-space:normal;line-height:1.35}

/* Posteingang: gebuendelte Laeufe und Bildvergleiche */
.vgruppe{border:1px solid var(--line);border-radius:10px;background:var(--surface);
  padding:13px 15px;margin-bottom:10px;box-shadow:var(--shadow)}
.vg-kopf{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-bottom:3px}
.vg-kopf strong{font-size:14.5px}
.vg-inhalt{margin-top:11px;display:grid;gap:8px}
.vg-inhalt.zu{display:none}
.vg-inhalt .vorgang{margin:0;background:var(--surface2)}
.v-kopf .v-frist,.vg-kopf .v-frist{margin-left:auto;font-size:11.5px;
  background:var(--warn-soft);color:var(--warn);padding:2px 8px;border-radius:20px}
.v-bilder{display:grid;gap:5px;margin:7px 0 9px}
.v-bilder > div{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.vb-lab{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink45);
  width:56px;flex:none}
.vb .thumb{width:58px;height:42px;border-radius:5px;border:1px solid var(--line)}
.vb.neu .thumb{border:2px solid var(--ok)}
.vb.weg .thumb{border:2px solid var(--crit);opacity:.65}
.vb-leer{font-size:11.5px;color:var(--ink45)}

/* Ort-Karte: klein, aber gross genug, um die Strassenseite zu erkennen. */
.ortkarte{height:190px;background:var(--sunken)}
.ortfuss{display:flex;flex-wrap:wrap;gap:4px 14px;padding:11px 15px;
  font-size:11.5px;color:var(--ink45)}
.ortfuss code{font-size:11px}

/* Worauf es auf dem Bild ankommt — über der Trefferliste, damit man beim
   Durchsehen weiss, wonach man schaut. Bis 24.08.2026 belegte dieser Text das
   SUCHFELD vor und lieferte dort nachweislich null Treffer. */
.bild-worauf {
  display: flex; gap: 7px; align-items: flex-start;
  margin: 10px 0 0; padding: 8px 11px;
  border-radius: 9px; background: var(--sand12, rgba(220,201,168,.16));
  font-size: 12.5px; line-height: 1.45; color: var(--ink70, #4a5a6a);
}

/* ZEILENANSICHT (24.08.2026) — Bild links, Text rechts, ZWEI je Zeile.
   Dieselbe Kachel wie im Raster, nur anders gelegt: ein zweiter Renderpfad
   waere die Stelle, an der die beiden Ansichten auseinanderlaufen.

   DER APP-AUSSCHNITT BLEIBT (Roman-Befund 24.08.2026): Erst hatte ich hier
   `aspect-ratio:auto` und eine feste Hoehe gesetzt — und damit genau das
   ausgeschaltet, wofuer die Kachel da ist. In ihr faellt auf, wenn ein Bild in
   der App schief beschnitten wird; ohne den Ausschnitt sieht man ein Foto,
   aber nicht das, was der Reisende sieht. Also nur die BREITE setzen und die
   Hoehe dem Seitenverhaeltnis aus `.c-vollbild` ueberlassen. */
.sheet.zeilen{grid-template-columns:repeat(auto-fill,minmax(430px,1fr));gap:12px}
.sheet.zeilen .tile{display:flex;align-items:stretch}
.sheet.zeilen .thumb{width:152px;flex:0 0 152px}
.sheet.zeilen .meta{flex:1;min-width:0;padding:12px 14px;display:flex;
  flex-direction:column;justify-content:center}
.sheet.zeilen .nm{font-size:14.5px}
.sheet.zeilen .teaser{
  font-size:12.5px;line-height:1.5;color:var(--ink70);margin-top:7px;
  display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden;
}
/* Im Raster bleibt der Teaser aus — dort zaehlt die Uebersicht. */
.sheet:not(.zeilen) .teaser{display:none}
.ansicht-um{white-space:nowrap}

/* Die zwei Alternativen und der Zuschnitt in der Zeile (24.08.2026).
   Beide gehoeren NUR in die Zeilenansicht: Im Raster zaehlt die Uebersicht,
   und drei Bilder je Kachel waeren dort Laerm. Ausgeblendet statt gar nicht
   gerendert, damit es bei EINER Markup-Stelle bleibt. */
/* DIE HOEHE TEILEN, nicht aus der Breite rechnen (Roman-Befund 24.08.2026:
   „so dass beide uebereinander die volle Hoehe des Hauptbildes ausnutzen").
   Vorher bestimmte das Seitenverhaeltnis die Hoehe der Alternativen — zwei
   davon blieben kuerzer als das Titelbild und liessen unten eine graue Luecke.
   Jetzt teilen sie sich per flex genau die Hoehe der Zeile. Bei 75 px Breite
   kommt dabei ein Verhaeltnis von rund 0,71 heraus — der App-Ausschnitt liegt
   bei 0,70, der Unterschied ist nicht zu sehen. Und der Ausschnitt zaehlt
   ohnehin dort, wo er wirkt: auf dem TITELBILD. */
.sheet.zeilen .neben{display:flex;flex-direction:column;gap:5px;
  margin:5px 5px 5px 0;flex:0 0 75px;background:none}
.sheet.zeilen .bk-alt{position:relative;border:0;padding:0;background:none;
  cursor:pointer;display:block;width:75px;flex:1;min-height:0}
.sheet.zeilen .bk-alt .thumb{width:75px;height:100%;aspect-ratio:auto;border-radius:5px}
/* Ein Spalt ringsum, wie im Entwurf: Ohne ihn kleben die drei Bilder
   aneinander und man liest sie als eines. */
.sheet.zeilen .tile > .thumb{margin:5px;border-radius:5px}
.sheet.zeilen .bk-alt[disabled]{cursor:default}
.sheet.zeilen .bk-alt .waehl{position:absolute;inset:0;display:grid;place-items:center;
  opacity:0;background:rgba(31,95,91,.72);color:#fff;font-size:10.5px;font-weight:700;
  transition:opacity .12s;border-radius:2px}
.sheet.zeilen .bk-alt:hover .waehl{opacity:1}
.sheet.zeilen .bk-alt[disabled]:hover .waehl{opacity:0}

/* Auf dem Titelbild, unten links — dort liegt in der Zeile die Bildspalte. */
.sheet.zeilen .zuschnitt-knopf{position:absolute;left:12px;bottom:12px;z-index:4;
  background:rgba(22,24,26,.72);color:#F4F3EE;border:0;border-radius:5px;
  font-size:10.5px;padding:3px 8px;cursor:pointer;opacity:0;transition:opacity .12s}
.sheet.zeilen .tile:hover .zuschnitt-knopf,
.sheet.zeilen .zuschnitt-knopf:focus-visible{opacity:1}

.sheet:not(.zeilen) .neben,
.sheet:not(.zeilen) .zuschnitt-knopf{display:none}

/* Die Stufen-Pille sitzt absolut zur Kachel — mit dem 5-px-Spalt um das
   Titelbild wandert sie mit, sonst haengt sie ueber dem Rand statt auf dem
   Bild.

   DIE FAHNE BLEIBT, WO SIE IST (eigener Fehlgriff 24.08.2026): Ich hatte sie
   nach links unter die Pille geschoben — dort haette sie das Bild verdeckt.
   Oben rechts liegt in der Zeile die TEXTspalte; dort stoert sie niemanden
   und ist trotzdem zu sehen. */
.sheet.zeilen .corner{left:12px;top:12px}