[hidden]{display:none!important}
:root{
  --bg:#dfe5e4; --glas:rgba(250,249,245,.86); --linie:rgba(30,40,40,.12); --ink:#1f2629; --ink2:#5b6568;
  --akzent:#2e6b73; --akzent2:#e6dcc3; --gut:#2f7d55; --warn:#b7791f; --alarm:#b8402f; --info:#3b6a8f;
  --f:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bg:#141b1f;--glas:rgba(22,30,34,.88);--linie:rgba(255,255,255,.1);--ink:#e8ecea;--ink2:#9fabad;--akzent:#6fb3a4;--akzent2:#2b3a3f;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#141b1f;--glas:rgba(22,30,34,.88);--linie:rgba(255,255,255,.1);--ink:#e8ecea;--ink2:#9fabad;--akzent:#6fb3a4;--akzent2:#2b3a3f;color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden}
body{background:var(--bg);color:var(--ink);font:14px/1.45 var(--f);-webkit-font-smoothing:antialiased}
#welt{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
#labels{position:fixed;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.wlabel{position:absolute;left:0;top:0;white-space:nowrap;font:600 12px var(--f);color:#fff;background:rgba(20,30,34,.62);padding:2px 7px;border-radius:5px;letter-spacing:.01em}
.wlabel.stadt{font-size:14px;background:rgba(20,30,34,.75)}
.wlabel.npc{background:rgba(60,55,40,.66)}
.glas{background:var(--glas);border:1px solid var(--linie);backdrop-filter:blur(12px) saturate(1.2);-webkit-backdrop-filter:blur(12px) saturate(1.2);border-radius:12px;box-shadow:0 8px 28px rgba(15,25,30,.14)}
button{font:inherit;color:inherit}
a{color:var(--akzent)}
.knopf{border:1px solid var(--linie);background:transparent;border-radius:8px;padding:8px 14px;cursor:pointer;font-weight:600;min-height:38px}
.knopf:hover{border-color:var(--akzent)}
.knopf.haupt{background:var(--akzent);border-color:var(--akzent);color:#fff}
:root[data-theme="dark"] .knopf.haupt{color:#0e1416}
.knopf.klein{padding:4px 10px;min-height:30px;font-size:13px}
.knopf:disabled{opacity:.45;cursor:not-allowed}
.knopf:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--akzent);outline-offset:2px}
input,select{font:inherit;color:var(--ink);background:rgba(255,255,255,.7);border:1px solid var(--linie);border-radius:8px;padding:8px 10px;min-height:38px;width:100%}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) input,:root:not([data-theme="light"]) select{background:rgba(0,0,0,.25)}}
label{display:block;font-size:12.5px;color:var(--ink2);font-weight:600}
label input,label select{margin-top:4px}
.fehler{color:var(--alarm);min-height:1.2em;margin:8px 0 0}
/* Wortmarke */
.wort{display:flex;align-items:center;gap:9px;font-weight:700;letter-spacing:.02em;color:var(--ink)}
.wort .zeichen{width:26px;height:26px;border-radius:6px;background:url(icon.svg) center/cover;flex:none}
.wort.gross{font-size:34px;letter-spacing:.01em;font-weight:650}
.wort.gross .zeichen{width:44px;height:44px;border-radius:10px}
.wort.klein{font-size:16px}
/* Laden */
.laden{position:fixed;inset:0;z-index:20;display:grid;place-content:center;justify-items:center;gap:14px;background:var(--bg);transition:opacity .5s}
.laden.weg{opacity:0;pointer-events:none}
.laden .wort{font-size:26px}
.lbar{width:220px;height:4px;border-radius:2px;background:var(--linie);overflow:hidden}.lbar span{display:block;height:100%;width:5%;background:var(--akzent);transition:width .3s}
#ltxt{color:var(--ink2);font-size:13px}
/* Start */
.start{position:fixed;inset:0;z-index:10;display:grid;place-items:center;padding:16px;background:linear-gradient(180deg,rgba(20,30,34,.25),rgba(20,30,34,.55));overflow:auto}
.startkarte{width:min(720px,100%);background:var(--glas);border:1px solid var(--linie);border-radius:16px;padding:26px 28px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 20px 60px rgba(0,0,0,.25)}
.kopf .unter{margin:4px 0 18px 54px;color:var(--ink2);font-size:15px}
.zwei{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mit{display:flex;gap:6px;align-items:flex-end}.mit input{flex:1}
fieldset{border:0;padding:0;margin:14px 0 8px}legend{font-size:12.5px;color:var(--ink2);font-weight:600;margin-bottom:6px}
.rollen{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.rolle{border:1px solid var(--linie);border-radius:10px;padding:10px 12px;cursor:pointer;background:transparent;text-align:left}
.rolle b{display:block;font-size:13.5px;hyphens:auto;overflow-wrap:anywhere}.rolle small{display:block;color:var(--ink2);font-size:12px;margin-top:3px;line-height:1.35}
.rolle[aria-pressed=true]{border-color:var(--akzent);box-shadow:inset 0 0 0 1px var(--akzent);background:color-mix(in srgb,var(--akzent) 8%,transparent)}
.rolle:disabled{opacity:.5;cursor:default}.rolle .bald{display:inline-block;font-size:10.5px;font-weight:600;border:1px solid var(--linie);border-radius:99px;padding:0 6px;margin-left:4px;color:var(--ink2)}
.opt{margin:10px 0;color:var(--ink2);font-size:13px}.opt summary{cursor:pointer}
.haken{display:flex;gap:8px;align-items:flex-start;font-weight:500;margin-top:6px}.haken input{width:auto;min-height:0;margin-top:3px}
.aktionen{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:14px}.aktionen .oder{color:var(--ink2);font-size:13px}.aktionen .mit input{width:90px;text-transform:uppercase}
.fuss{margin-top:16px;color:var(--ink2);font-size:12px}
.weiter{display:flex;gap:10px;align-items:center;margin:-4px 0 14px;color:var(--ink2);font-size:13px}
/* Oberleiste */
#top{position:fixed;z-index:5;top:calc(10px + env(safe-area-inset-top,0px));left:12px;right:12px;display:flex;align-items:center;gap:14px;padding:6px 10px;min-height:46px}
.datum{font:500 13px var(--mono);color:var(--ink2);white-space:nowrap}
.tempo{display:flex;gap:3px}.tempo button{border:1px solid var(--linie);background:transparent;border-radius:6px;padding:3px 8px;font:600 12px var(--f);cursor:pointer;min-height:28px}
.tempo button[aria-pressed=true]{background:var(--akzent);border-color:var(--akzent);color:#fff}
.sp{flex:1}
.kz{display:flex;flex-direction:column;align-items:flex-end;line-height:1.1}.kz span{font-size:10.5px;color:var(--ink2);text-transform:uppercase;letter-spacing:.06em}.kz b{font:600 15px var(--f);font-variant-numeric:tabular-nums;white-space:nowrap}
.kz b.neg{color:var(--alarm)}
.code{font:600 13px var(--mono);border:1px dashed var(--linie);background:transparent;border-radius:6px;padding:4px 8px;cursor:pointer}
/* Panel */
#panel{position:fixed;z-index:4;right:12px;top:calc(68px + env(safe-area-inset-top,0px));bottom:12px;width:410px;display:flex;flex-direction:column;overflow:hidden}
.tabs{display:flex;gap:2px;padding:6px;border-bottom:1px solid var(--linie);overflow-x:auto;scrollbar-width:none;flex:none}
.tabs button{border:0;background:transparent;border-radius:7px;padding:7px 10px;font:600 13px var(--f);cursor:pointer;white-space:nowrap;color:var(--ink2);position:relative}
.tabs button[aria-selected=true]{background:color-mix(in srgb,var(--akzent) 14%,transparent);color:var(--ink)}
.tabs .badge{position:absolute;top:2px;right:2px;min-width:16px;height:16px;border-radius:8px;background:var(--alarm);color:#fff;font-size:10.5px;line-height:16px;text-align:center;padding:0 4px}
.inhalt{overflow-y:auto;padding:12px 14px 18px;flex:1;overscroll-behavior:contain}
h2{font-size:16px;margin:4px 0 8px}h3{font-size:14px;margin:16px 0 6px}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.kpi{border:1px solid var(--linie);border-radius:9px;padding:7px 9px}.kpi span{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink2)}.kpi b{font:600 16px var(--f);font-variant-numeric:tabular-nums}
.kpi small{display:block;font-size:11px;color:var(--ink2)}
.karte-e{border:1px solid var(--linie);border-radius:10px;padding:10px 12px;margin:8px 0}
.karte-e .t{display:flex;justify-content:space-between;gap:8px;align-items:baseline}.karte-e .t b{font-size:13.5px}
.karte-e p{margin:4px 0;color:var(--ink2);font-size:12.5px}
.zeile{display:flex;justify-content:space-between;gap:8px;padding:3px 0;border-bottom:1px dotted var(--linie);font-size:13px}.zeile span:last-child{font-variant-numeric:tabular-nums;text-align:right}
.chip{display:inline-block;font:600 10.5px var(--f);padding:1px 7px;border-radius:99px;border:1px solid var(--linie);color:var(--ink2);white-space:nowrap;vertical-align:1px}
.chip.belegt{border-color:color-mix(in srgb,var(--gut) 50%,transparent);color:var(--gut)}
.chip.spielwert{border-color:var(--linie);color:var(--ink2)}
.chip.szenario{border-color:color-mix(in srgb,var(--warn) 55%,transparent);color:var(--warn)}
.chip.ungeprueft,.chip.fehlt{border-color:color-mix(in srgb,var(--alarm) 45%,transparent);color:var(--alarm)}
.chip.anz{background:#5d5446;color:#fff;border-color:#5d5446}
.info{border:1px solid var(--linie);background:transparent;border-radius:50%;width:20px;height:20px;font:600 11px/18px var(--f);cursor:pointer;padding:0;color:var(--ink2);vertical-align:1px}
.balken{height:6px;border-radius:3px;background:var(--linie);overflow:hidden;margin-top:5px}.balken span{display:block;height:100%;background:var(--akzent)}
.balken.warn span{background:var(--warn)}.balken.alarm span{background:var(--alarm)}
.regler{display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:center;margin:8px 0}.regler input[type=range]{grid-column:1/-1;padding:0;min-height:24px;background:transparent;border:0}
.hinweis{font-size:12px;color:var(--ink2);margin:8px 0}
.ok{color:var(--gut)}.warn{color:var(--warn)}.alarm{color:var(--alarm)}
.gebot{display:flex;gap:6px;margin-top:8px}.gebot input{width:120px;flex:none}
.uhr{font:600 12px var(--mono)}
table{width:100%;border-collapse:collapse;font-size:12.5px}td,th{padding:3px 4px;border-bottom:1px dotted var(--linie);text-align:right}td:first-child,th:first-child{text-align:left}
.mehr{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:10px}
svg.verlauf{width:100%;height:120px;display:block}
/* Auswahlkarte */
.karte{position:fixed;z-index:4;left:12px;top:calc(68px + env(safe-area-inset-top,0px));width:320px;max-height:calc(100% - 200px);overflow:auto;padding:12px 14px}
.karte .x{float:right;border:0;background:transparent;font-size:20px;cursor:pointer;color:var(--ink2);margin:-6px -6px 0 0}
/* Meldungen */
.feed{position:fixed;z-index:3;left:12px;bottom:12px;width:min(460px,calc(100% - 450px));display:flex;flex-direction:column;gap:6px;pointer-events:none}
.toast{background:var(--glas);border:1px solid var(--linie);border-left:4px solid var(--info);border-radius:9px;padding:8px 11px;font-size:13px;box-shadow:0 6px 18px rgba(0,0,0,.12);animation:rein .3s;pointer-events:auto;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.toast.tt-gut{border-left-color:var(--gut)}.toast.tt-warn{border-left-color:var(--warn)}.toast.tt-alarm{border-left-color:var(--alarm)}
@keyframes rein{from{transform:translateY(8px);opacity:0}}
/* Anzeige (Werbung) klar getrennt */
.anzeigebox{position:fixed;z-index:3;right:434px;bottom:12px;width:300px;background:#f7f3ea;color:#2c2a26;border:1px solid #cbbf9f;border-radius:10px;padding:10px 12px;font-size:12.5px;box-shadow:0 6px 18px rgba(0,0,0,.15)}
.anzeigebox .kopfz{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.anzeigebox .x{border:0;background:transparent;cursor:pointer;font-size:18px;color:#6b6252}
.anzeige{border:1px solid #d6caa9;background:#fbf8f1;color:#2c2a26;border-radius:10px;padding:10px 12px;margin:8px 0}
.anzeige .chip.anz{margin-right:6px}.anzeige p{margin:4px 0;color:#5d564a;font-size:12.5px}
.logo{width:100%;height:90px;border-radius:8px;display:grid;place-items:center;font-weight:700;font-size:20px;margin:6px 0;overflow:hidden}.logo img{max-width:90%;max-height:80px}
.modal{position:fixed;inset:0;z-index:30;background:rgba(10,15,18,.45);display:grid;place-items:center;padding:16px}
.mbox{width:min(560px,100%);max-height:85vh;overflow:auto;padding:16px 18px;position:relative}
.mx{position:absolute;right:8px;top:6px;border:0;background:transparent;font-size:22px;cursor:pointer;color:var(--ink2)}
.verbindung{position:fixed;z-index:40;left:50%;top:70px;transform:translateX(-50%);background:var(--alarm);color:#fff;padding:6px 12px;border-radius:8px;font-size:13px}
.chat{display:flex;flex-direction:column;gap:4px;max-height:220px;overflow:auto;font-size:13px;margin-bottom:8px}
.punkt{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;vertical-align:0}
/* Handy */
@media (max-width:760px){
  #top{left:8px;right:8px;gap:8px;padding:5px 8px}
  #top .wtxt,.kz.idx,.code{display:none}
  .tempo{gap:2px}.tempo button{padding:2px 5px;min-height:28px;font-size:11px}
  .kz span{display:none}.kz b{font-size:13px}
  .datum{font-size:11px}
  .datum{font-size:12px}
  #panel{left:0;right:0;bottom:0;top:auto;width:auto;height:52vh;border-radius:14px 14px 0 0;border-bottom:0}
  #panel.zu{height:auto}#panel.zu .inhalt{display:none}
  .tabs button{padding:8px 9px}
  .karte{left:8px;right:8px;width:auto;top:auto;bottom:calc(52vh + 8px);max-height:34vh}
  #panel.zu ~ .karte{bottom:64px}
  .feed{left:8px;right:8px;width:auto;bottom:calc(52vh + 8px)}
  #panel.zu ~ .feed{bottom:64px}
  .anzeigebox{left:8px;right:8px;width:auto;top:calc(64px + env(safe-area-inset-top,0px));bottom:auto}
  .toast:nth-last-child(n+3){display:none}
  .zwei{grid-template-columns:1fr}
  .startkarte{padding:18px 16px}
  .wort.gross{font-size:27px}.kopf .unter{margin-left:0}
  .kpis{grid-template-columns:repeat(2,1fr)}
}

/* Firmenprofil (Anzeige) */
.modal.profil .mbox{width:min(520px,100%);padding:0 0 16px}
.modal.profil #minhalt>*:not(.fp-kopf){margin-left:18px;margin-right:18px}
.fp-kopf{height:118px;display:grid;place-items:center;border-radius:inherit;border-bottom-left-radius:0;border-bottom-right-radius:0}
.fp-logo{font:700 24px/1.1 var(--f);letter-spacing:.01em;text-align:center;padding:0 16px}.fp-logo img{max-height:78px;max-width:80%;display:block;margin:auto}
.fp-marken{margin-top:12px!important;display:flex;flex-wrap:wrap;gap:6px}
.fp-name{margin:6px 0 2px;font-size:21px}.fp-kurz{color:var(--ink2);margin-top:0}
.fp-links{display:flex;flex-wrap:wrap;gap:8px}.fp-links a{text-decoration:none}
.fp-liste{padding-left:18px;margin:4px 0}.fp-liste li{margin:2px 0}
.fp-stelle{border:1px solid var(--linie);border-radius:10px;padding:8px 10px;margin:6px 0}.fp-stelle p{margin:3px 0;font-size:12.5px;color:var(--ink2)}
.fp-pakete{display:flex;flex-wrap:wrap;gap:6px}
.fp-fuss{border-top:1px solid var(--linie);padding-top:10px;margin-top:14px}
.modal.profil .mx{z-index:1;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.9);color:#222;line-height:1;top:8px;right:8px}
a.knopf{display:inline-flex;align-items:center;color:var(--ink)}a.knopf.haupt{color:#fff}