/* SUUM CUIQUE – Porphyr, Travertin, Blattgold, Patina */
:root{
  --grund:#1a1317; --grund-2:#241a1f; --tafel:rgba(30,22,27,.78); --tafel-hell:rgba(46,35,41,.86);
  --stein:#eadfcb; --stein-2:#bfb2a2; --asche:#8c7f79; --linie:rgba(234,223,203,.14); --linie-2:rgba(234,223,203,.28);
  --gold:#d9ae55; --gold-2:#f0cf86; --patina:#6fb3a5; --blut:#c0513f; --seide:#f6ece6;
  --ok:#7fbf8e; --warn:#e0a84e; --krit:#d0604e;
  --display:"Cormorant Unicase","Cormorant Garamond",Georgia,serif;
  --text:"Alegreya Sans","Gill Sans","Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --r:6px;
}
[hidden]{display:none!important;}
html,body{height:100%;}
body{margin:0;background:var(--grund);color:var(--stein);font-family:var(--text);font-size:15px;line-height:1.45;overflow:hidden;-webkit-font-smoothing:antialiased;}
button,input,select,textarea{font:inherit;color:inherit;}
.buehne{position:fixed;inset:0;}
#stadt,#schleier{position:absolute;inset:0;width:100%;height:100%;display:block;}
#stadt{transition:filter 1.6s ease;cursor:grab;}
#stadt.greifen{cursor:grabbing;}
#stadt.verhuellt{filter:blur(7px) saturate(.55) brightness(.8);}
#schleier{pointer-events:none;}

/* Kopfzeile */
.kopf{position:fixed;left:0;right:0;top:0;z-index:20;display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding:calc(12px + env(safe-area-inset-top,0px)) 20px 12px;background:linear-gradient(var(--grund) 10%,rgba(26,19,23,0));}
.marke{font-family:var(--display);font-size:26px;letter-spacing:.32em;font-weight:600;line-height:1;}
.marke small{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--asche);margin-top:4px;}
.phasen{display:flex;gap:4px;margin-left:auto;list-style:none;padding:0;margin-block:0;}
.phasen li{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:5px 10px;border:1px solid var(--linie);color:var(--asche);border-radius:999px;}
.phasen li.aktiv{color:var(--grund);background:var(--gold);border-color:var(--gold);}
.phasen li.fertig{color:var(--stein-2);border-color:var(--linie-2);}
.tag{font-family:var(--mono);font-size:12px;color:var(--stein-2);}

/* Bildschirme */
.schirm{position:fixed;inset:0;z-index:10;pointer-events:none;}
.schirm > *{pointer-events:auto;}
.tafel{background:var(--tafel);backdrop-filter:blur(14px) saturate(1.1);-webkit-backdrop-filter:blur(14px);border:1px solid var(--linie);border-radius:var(--r);box-shadow:0 20px 60px rgba(0,0,0,.35);}
.augenbraue{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--patina);}
h1,h2,h3{font-family:var(--display);font-weight:500;margin:0;text-wrap:balance;letter-spacing:.02em;}
.knopf{appearance:none;border:1px solid var(--gold);background:var(--gold);color:#241a10;padding:11px 20px;border-radius:999px;cursor:pointer;font-weight:700;letter-spacing:.04em;transition:transform .15s,background .2s,box-shadow .2s;}
.knopf:hover{background:var(--gold-2);box-shadow:0 0 0 4px rgba(217,174,85,.18);}
.knopf:active{transform:translateY(1px);}
.knopf.leise{background:transparent;color:var(--stein);border-color:var(--linie-2);font-weight:500;}
.knopf.leise:hover{border-color:var(--stein-2);background:rgba(234,223,203,.06);box-shadow:none;}
.knopf:disabled{opacity:.4;cursor:not-allowed;}
:focus-visible{outline:2px solid var(--patina);outline-offset:2px;}

/* Intro */
#s-eintritt{display:flex;align-items:flex-end;padding:0 max(16px,5vw) max(48px,9vh);}
.these{max-width:640px;}
.these h1{font-size:clamp(44px,8vw,104px);line-height:.92;letter-spacing:.12em;margin:10px 0 18px;}
.these p{font-size:clamp(17px,2vw,21px);color:var(--stein-2);max-width:34em;margin:0 0 26px;}
.these em{font-family:var(--display);font-style:italic;color:var(--stein);font-size:1.15em;}
.these .zeile{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.these{transition:opacity .4s;}
.these.blass > :not(.zeile){opacity:.06;}
.these .fuss{font-family:var(--mono);font-size:11px;color:var(--asche);margin-top:22px;}

/* Verfassung */
#s-konvent{display:grid;grid-template-columns:minmax(300px,420px) 1fr minmax(260px,330px);gap:16px;padding:92px 20px 20px;}
.gesetze{padding:18px 18px 12px;overflow:auto;max-height:calc(100vh - 140px);}
.gesetze h2{font-size:30px;margin:4px 0 4px;}
.gesetze .hinweis{color:var(--stein-2);margin:0 0 14px;font-size:14px;}
.presets{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px;}
.presets button{font-size:12px;padding:5px 11px;}
.gesetz{padding:12px 0;border-top:1px solid var(--linie);}
.gesetz .kopfz{display:flex;justify-content:space-between;align-items:baseline;gap:8px;}
.gesetz label{font-family:var(--display);font-size:20px;font-weight:600;}
.gesetz .wert{font-family:var(--mono);font-size:12px;color:var(--gold);white-space:nowrap;}
.gesetz p{margin:2px 0 8px;font-size:13px;color:var(--stein-2);}
.gesetz .pole{display:flex;justify-content:space-between;font-size:11px;color:var(--asche);font-family:var(--mono);margin-top:3px;}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:22px;background:transparent;cursor:pointer;}
input[type=range]::-webkit-slider-runnable-track{height:3px;background:linear-gradient(90deg,var(--gold) var(--p,50%),var(--linie-2) var(--p,50%));border-radius:2px;}
input[type=range]::-moz-range-track{height:3px;background:var(--linie-2);}
input[type=range]::-moz-range-progress{height:3px;background:var(--gold);}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;margin-top:-7.5px;border-radius:50%;background:var(--stein);border:3px solid var(--gold);box-shadow:0 0 0 4px rgba(217,174,85,.15);}
input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--stein);border:3px solid var(--gold);}
.vorschau{padding:18px;align-self:start;display:flex;flex-direction:column;gap:14px;max-height:calc(100vh - 112px);overflow:auto;}
.vorschau h3{font-size:22px;}
.masse{display:grid;gap:10px;}
.mass .z{display:flex;justify-content:space-between;font-size:13px;}
.mass .z b{font-family:var(--mono);font-weight:500;font-variant-numeric:tabular-nums;}
.mass .z span i{font-style:normal;color:var(--asche);font-size:11px;margin-left:6px;}
.balken{height:6px;background:rgba(234,223,203,.08);border-radius:3px;overflow:hidden;margin-top:4px;}
.balken span{display:block;height:100%;border-radius:3px;transition:width .5s ease,background .5s;}
.aequitas{display:flex;align-items:center;gap:14px;padding:12px;border:1px solid var(--linie);border-radius:var(--r);}
.aequitas canvas{width:74px;height:74px;flex:none;}
.aequitas .gross{font-family:var(--display);font-size:34px;line-height:1;}
.aequitas small{color:var(--stein-2);font-size:12px;}
.geburtsrisiko{border-top:1px solid var(--linie);padding-top:12px;}
.stapel{display:flex;height:24px;border-radius:4px;overflow:hidden;margin:8px 0 6px;}
.stapel span{transition:flex-grow .5s ease;min-width:2px;}
.legende{display:grid;grid-template-columns:1fr 1fr;gap:3px 10px;font-size:12px;color:var(--stein-2);}
.legende div{display:flex;align-items:center;gap:6px;}
.legende i{width:9px;height:9px;border-radius:2px;flex:none;}
.legende b{margin-left:auto;font-family:var(--mono);font-weight:400;color:var(--stein);font-variant-numeric:tabular-nums;}
.risiko{font-size:14px;margin:10px 0 0;}
.risiko strong{font-family:var(--display);font-size:26px;color:var(--gold);}
.besiegeln{width:100%;padding:14px;font-size:15px;}
.stimmen-info{font-size:12px;color:var(--asche);text-align:center;margin:-6px 0 0;}

/* Geburt */
#s-geburt{display:grid;place-items:center;padding:20px;}
.karte-szene{perspective:1400px;display:flex;flex-direction:column;align-items:center;gap:22px;}
.karte{width:min(320px,80vw);aspect-ratio:5/7;position:relative;transform-style:preserve-3d;transition:transform 1.6s cubic-bezier(.2,.8,.2,1);}
.karte.offen{transform:rotateY(180deg);}
.karte .seite{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:14px;border:1px solid var(--linie-2);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;overflow:hidden;}
.karte .rueck{background:radial-gradient(circle at 50% 40%,#3a2a33,#1a1317 70%);}
.karte .rueck .siegel{width:120px;height:120px;border-radius:50%;border:2px solid var(--gold);display:grid;place-items:center;font-family:var(--display);font-size:22px;letter-spacing:.2em;color:var(--gold);box-shadow:inset 0 0 0 6px rgba(217,174,85,.15);}
.karte .vorn{transform:rotateY(180deg);background:linear-gradient(170deg,var(--rollenfarbe,#3a2a33) -40%,#1d1519 60%);}
.karte .vorn canvas{width:150px;height:150px;}
.karte .vorn h2{font-size:42px;margin-top:6px;}
.karte .vorn p{color:var(--stein-2);font-size:14px;margin:6px 0 12px;}
.karte .vorn dl{display:grid;grid-template-columns:auto auto;gap:4px 16px;margin:0;font-size:13px;}
.karte .vorn dt{color:var(--asche);text-align:right;}
.karte .vorn dd{margin:0;text-align:left;font-family:var(--mono);}
.geburt-text{font-family:var(--display);font-size:22px;color:var(--stein-2);text-align:center;min-height:1.5em;}

/* Leben */
#s-leben .rolle{position:absolute;left:20px;top:92px;width:280px;padding:16px;}
.rolle .kopfz{display:flex;gap:12px;align-items:center;}
.rolle canvas{width:56px;height:56px;flex:none;}
.rolle h2{font-size:28px;line-height:1;}
.rolle .gens{font-family:var(--mono);font-size:10.5px;color:var(--asche);margin-top:2px;}
.melden{background:none;border:0;color:var(--asche);cursor:pointer;font-size:14px;padding:2px 4px;margin-left:4px;}
.melden:hover{color:#ff9a86;}
.rolle .ort{font-size:13px;color:var(--stein-2);}
.werte{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0 10px;}
.wert-kachel{padding:8px 10px;border:1px solid var(--linie);border-radius:var(--r);}
.wert-kachel span{display:block;font-size:11px;color:var(--asche);font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase;}
.wert-kachel b{font-family:var(--display);font-size:26px;font-weight:600;font-variant-numeric:tabular-nums;}
.wert-kachel b.plus{color:var(--ok);} .wert-kachel b.minus{color:var(--krit);}
.tagwerke{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--stein-2);}
.tagwerke i{width:14px;height:14px;border-radius:50%;border:1.5px solid var(--gold);display:inline-block;}
.tagwerke i.voll{background:var(--gold);}
.gesellschaft{border-top:1px solid var(--linie);margin-top:12px;padding-top:10px;}
.gesellschaft canvas{width:100%;height:70px;display:block;}
.gesellschaft .leg{display:flex;gap:12px;font-size:11px;font-family:var(--mono);color:var(--stein-2);}
.gesellschaft .leg i{display:inline-block;width:10px;height:2px;vertical-align:middle;margin-right:4px;}
.mini-masse{display:grid;grid-template-columns:repeat(2,1fr);gap:6px 12px;margin-top:8px;}

.seitenleiste{position:absolute;right:20px;top:92px;bottom:112px;width:390px;display:flex;flex-direction:column;overflow:hidden;}
.reiter{display:flex;flex-wrap:wrap;border-bottom:1px solid var(--linie);padding:4px 6px 0;}
.reiter button{flex:1 0 auto;background:none;border:0;padding:9px 7px;cursor:pointer;color:var(--asche);font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;border-bottom:2px solid transparent;}
.reiter button[aria-selected=true]{color:var(--stein);border-bottom-color:var(--gold);}
.reiter .zahl{display:inline-grid;place-items:center;min-width:17px;height:17px;border-radius:9px;background:var(--blut);color:#fff;font-size:10px;margin-left:4px;}
.reiterinhalt{overflow:auto;padding:14px 16px;flex:1;}
.antrag{border:1px solid var(--linie);border-radius:var(--r);padding:12px;margin-bottom:10px;}
.antrag .von{font-size:12px;color:var(--asche);}
.antrag h4{margin:4px 0;font-family:var(--display);font-size:20px;font-weight:600;}
.antrag .aenderung{font-family:var(--mono);font-size:12px;color:var(--gold);}
.antrag q{display:block;font-style:italic;color:var(--stein-2);font-size:13px;margin:6px 0 10px;}
.antrag .zeile{display:flex;gap:6px;align-items:center;}
.antrag .zeile button{padding:6px 14px;font-size:13px;}
.antrag .gewicht{margin-left:auto;font-size:11px;color:var(--asche);font-family:var(--mono);}
.antrag.erledigt{opacity:.55;}
.antrag .stand{height:4px;display:flex;border-radius:2px;overflow:hidden;margin-top:8px;background:rgba(234,223,203,.08);}
.antrag .stand .ja{background:var(--ok);} .antrag .stand .nein{background:var(--krit);}
.chronik{list-style:none;margin:0;padding:0;}
.chronik li{display:grid;grid-template-columns:44px 1fr;gap:10px;padding:8px 0;border-bottom:1px solid var(--linie);font-size:13.5px;animation:rein .5s ease;}
.chronik .d{font-family:var(--mono);font-size:11px;color:var(--asche);padding-top:2px;}
.chronik li[data-art=gesetz] span{color:var(--gold-2);}
.chronik li[data-art=aufstand] span{color:#ff9a86;}
.chronik li[data-art=tribunal] span{color:#9fd6cb;}
@keyframes rein{from{opacity:.2;transform:translateY(-4px);}to{opacity:1;transform:none;}}
.buergerliste{width:100%;border-collapse:collapse;font-size:13px;}
.buergerliste th{text-align:left;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--asche);font-weight:400;padding:4px 0;}
.buergerliste td{padding:6px 0;border-top:1px solid var(--linie);}
.buergerliste td.n{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;}
.buergerliste tr.ich td{color:var(--gold-2);}
.pille{display:inline-block;font-size:10px;padding:1px 7px;border-radius:999px;border:1px solid var(--linie-2);color:var(--stein-2);}
.verf-liste{display:grid;gap:8px;}
.verf-liste div{display:grid;grid-template-columns:1fr 60px;align-items:center;gap:8px;font-size:13px;}

.aktionsleiste{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(18px + env(safe-area-inset-bottom,0px));display:flex;gap:8px;padding:10px;align-items:stretch;max-width:calc(100vw - 32px);}
.aktion{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:84px;padding:8px 10px;border-radius:var(--r);border:1px solid var(--linie);background:rgba(234,223,203,.03);cursor:pointer;transition:background .2s,border-color .2s,transform .15s;}
.aktion:hover:not(:disabled){background:rgba(217,174,85,.12);border-color:var(--gold);transform:translateY(-2px);}
.aktion:disabled{opacity:.35;cursor:not-allowed;}
.aktion svg{width:26px;height:26px;stroke:var(--stein);fill:none;stroke-width:1.4;}
.aktion span{font-size:12.5px;font-weight:600;}
.aktion small{font-size:10.5px;color:var(--asche);font-family:var(--mono);}
.aktion.gefahr svg{stroke:#ff9a86;}
.trenner{width:1px;background:var(--linie);margin:0 4px;}
.tagende{min-width:110px;justify-content:center;}

.notiz{position:fixed;left:50%;top:92px;transform:translate(-50%,-10px);opacity:0;z-index:40;padding:10px 18px;border-radius:999px;background:var(--tafel-hell);border:1px solid var(--linie-2);font-size:14px;transition:opacity .3s,transform .3s;pointer-events:none;max-width:calc(100vw - 32px);text-align:center;}
.notiz.an{opacity:1;transform:translate(-50%,0);}
.viertel-info{position:fixed;z-index:30;padding:12px 14px;width:230px;pointer-events:none;}
.viertel-info h4{margin:0;font-family:var(--display);font-size:22px;}
.viertel-info p{margin:2px 0 8px;font-size:12.5px;color:var(--stein-2);}
.viertel-info dl{display:grid;grid-template-columns:1fr auto;gap:2px 10px;margin:0;font-size:12.5px;}
.viertel-info dd{margin:0;font-family:var(--mono);text-align:right;}

/* Dialog */
.dialog-hg{position:fixed;inset:0;z-index:50;background:rgba(10,7,9,.6);display:grid;place-items:center;padding:16px;}
.dialog{width:min(460px,100%);padding:22px;}
.dialog h3{font-size:28px;margin-bottom:4px;}
.dialog p{color:var(--stein-2);margin:0 0 14px;font-size:14px;}
.dialog .feld{display:grid;gap:6px;margin-bottom:12px;}
.dialog .feld label{font-size:12px;font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--asche);}
.dialog select,.dialog textarea{background:rgba(0,0,0,.25);border:1px solid var(--linie-2);border-radius:var(--r);padding:9px 10px;}
.dialog select option{background:var(--grund-2);}
.dialog textarea{min-height:70px;resize:vertical;}
.dialog .zeile{display:flex;gap:8px;justify-content:flex-end;margin-top:6px;}
.urteil{border:1px solid var(--gold);border-radius:var(--r);padding:16px;text-align:center;background:radial-gradient(circle at 50% 0,rgba(217,174,85,.14),transparent 70%);}
.urteil .waage{font-family:var(--display);font-size:40px;}
.urteil q{display:block;font-family:var(--display);font-style:italic;font-size:20px;margin-top:8px;color:var(--gold-2);}

/* Wertung */
#s-wertung{display:grid;place-items:center;padding:92px 16px 20px;}
.wertung{width:min(760px,100%);padding:26px;max-height:calc(100vh - 112px);overflow:auto;}
.wertung h2{font-size:46px;}
.wertung .raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:18px 0;}
.wertung .titel-gross{font-family:var(--display);font-size:34px;color:var(--gold);}
.wertung canvas{width:100%;height:140px;display:block;}

.demo-hinweis{position:fixed;left:20px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:15;font-family:var(--mono);font-size:10.5px;color:var(--asche);letter-spacing:.06em;}

@media (max-width:1100px){
  #s-konvent{grid-template-columns:1fr;padding:84px 16px 16px;overflow:auto;}
  #s-konvent > .luft{display:none;}
  .gesetze,.vorschau{max-height:none;}
  #s-konvent{align-content:start;}
  .seitenleiste{width:300px;}
}
@media (max-width:760px){
  .kopf{padding-inline:16px;gap:8px;}
  .phasen li{padding:4px 7px;font-size:9.5px;}
  #s-leben{overflow:auto;}
  #s-leben .rolle{position:relative;left:auto;top:auto;width:auto;margin:260px 16px 10px;}
  .seitenleiste{position:relative;right:auto;top:auto;bottom:auto;width:auto;margin:0 16px 130px;max-height:60vh;}
  .aktionsleiste{position:fixed;left:16px;right:16px;transform:none;overflow-x:auto;}
  .demo-hinweis{display:none;}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;}
}

/* ───── Live-Version ───── */
.uhr{font-family:var(--mono);font-size:12px;color:var(--stein-2);min-width:120px;text-align:right;font-variant-numeric:tabular-nums;}
.kopf-knoepfe{display:flex;gap:6px;}
.rund{position:relative;width:38px;height:38px;border-radius:50%;border:1px solid var(--linie-2);background:rgba(234,223,203,.04);cursor:pointer;display:grid;place-items:center;}
.rund:hover{border-color:var(--gold);}
.rund svg{width:18px;height:18px;stroke:var(--stein);fill:none;stroke-width:1.6;stroke-linejoin:round;}
.rund .zahl{position:absolute;top:-4px;right:-4px;}
.zahl{display:inline-grid;place-items:center;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--blut);color:#fff;font-size:10px;margin-left:4px;font-family:var(--mono);}
.banner{position:fixed;left:50%;transform:translateX(-50%);top:78px;z-index:25;padding:8px 16px;border-radius:999px;background:var(--tafel-hell);border:1px solid var(--gold);font-size:13px;max-width:calc(100vw - 32px);text-align:center;}
.banner.wartung{border-color:var(--warn);}
.eintritt{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-top:4px;}
.feld{display:grid;gap:5px;}
.feld label{font-size:11px;font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--asche);}
.feld input,.feld select,.feld textarea{background:rgba(0,0,0,.3);border:1px solid var(--linie-2);border-radius:var(--r);padding:10px 12px;min-width:0;}
.feld select option{background:var(--grund-2);}
.eintritt .feld input{width:190px;}
.klein{font-size:12.5px;color:var(--stein-2);margin:4px 0 0;}
.vermaechtnis-box{border:1px dashed var(--gold);border-radius:var(--r);padding:10px 12px;font-size:13.5px;}
.vermaechtnis-box q{display:block;font-family:var(--display);font-size:19px;font-style:italic;color:var(--gold-2);margin-top:4px;}
.geburt-brief{max-width:360px;text-align:center;font-family:var(--display);font-style:italic;font-size:19px;color:var(--gold-2);margin:0;}
.leiste{display:grid;grid-template-columns:78px 1fr 34px;align-items:center;gap:8px;font-size:12px;color:var(--stein-2);margin-top:6px;}
.leiste .balken{margin:0;}
.leiste b{font-family:var(--mono);font-weight:400;text-align:right;color:var(--stein);}
.tagwerke{margin-top:10px;}
.lager{display:flex;flex-wrap:wrap;gap:4px;margin-top:10px;}
.lager span{font-size:11.5px;padding:2px 8px;border-radius:999px;background:rgba(234,223,203,.06);border:1px solid var(--linie);}
.lager span b{font-family:var(--mono);font-weight:500;color:var(--gold-2);margin-left:3px;}
.zeile-sb{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px;}
.epoche{margin-top:10px;font-size:12px;color:var(--stein-2);border-top:1px solid var(--linie);padding-top:8px;}
.epoche b{color:var(--stein);font-family:var(--display);font-size:16px;}
.epoche .ok{color:var(--ok);} .epoche .offen{color:var(--asche);}
.rolle{max-height:calc(100vh - 220px);overflow:auto;}
.amt-pille{display:inline-block;margin-left:6px;font-size:10px;padding:1px 7px;border-radius:999px;background:var(--gold);color:#241a10;font-family:var(--mono);vertical-align:middle;}
.krise{position:absolute;left:50%;transform:translateX(-50%);top:92px;width:min(460px,calc(100vw - 760px));min-width:300px;padding:12px 16px;border-color:var(--blut);}
.krise h4{margin:0;font-family:var(--display);font-size:22px;color:#ff9a86;}
.krise .ziele{display:grid;gap:6px;margin:8px 0;}
.krise .ziel{display:grid;grid-template-columns:110px 1fr 70px;gap:8px;align-items:center;font-size:12.5px;}
.krise .ziel b{font-family:var(--mono);font-weight:400;text-align:right;}
.krise .zeile{display:flex;gap:6px;flex-wrap:wrap;}
.krise .zeile button{padding:6px 12px;font-size:12.5px;}
.karte-klein{border:1px solid var(--linie);border-radius:var(--r);padding:12px;margin-bottom:10px;}
.karte-klein h4{margin:0 0 2px;font-family:var(--display);font-size:20px;font-weight:600;}
.karte-klein .meta{font-size:12px;color:var(--asche);}
.karte-klein .zeile{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:8px;}
.karte-klein .zeile button{padding:6px 12px;font-size:12.5px;}
.karte-klein.fertig{border-color:rgba(127,191,142,.5);}
.karte-klein.ruine{border-color:rgba(208,96,78,.5);}
.fortschritt{display:grid;gap:4px;margin-top:6px;}
.fortschritt div{display:grid;grid-template-columns:96px 1fr 84px;gap:8px;align-items:center;font-size:12px;}
.fortschritt b{font-family:var(--mono);font-weight:400;text-align:right;font-variant-numeric:tabular-nums;}
.tabelle{width:100%;border-collapse:collapse;font-size:12.5px;}
.tabelle th{text-align:left;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--asche);font-weight:400;padding:4px 4px;}
.tabelle td{padding:6px 4px;border-top:1px solid var(--linie);vertical-align:middle;}
.tabelle td.n{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;}
.tabelle button{padding:3px 9px;font-size:12px;}
.tabelle tr.ich td{color:var(--gold-2);}
.mini{padding:4px 10px;font-size:12px;}
.abschnitt{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--patina);margin:14px 0 6px;}
.abschnitt:first-child{margin-top:0;}
.leer{color:var(--stein-2);font-size:13.5px;}
.forum{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px;}
.forum li{border-left:2px solid var(--linie-2);padding-left:10px;font-size:13.5px;}
.forum li small{display:block;color:var(--asche);font-size:11px;}
.dialog.breit{width:min(760px,100%);max-height:calc(100vh - 40px);overflow:auto;}
.ahnen{display:grid;gap:6px;}
.ahnen div{display:grid;grid-template-columns:60px 1fr 70px 70px;gap:8px;font-size:13px;border-top:1px solid var(--linie);padding-top:6px;align-items:center;}
.err-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px;}
.err{border:1px solid var(--linie);border-radius:var(--r);padding:8px 10px;font-size:12px;opacity:.45;}
.err.hat{opacity:1;border-color:var(--gold);}
.err b{display:block;font-family:var(--display);font-size:17px;}
.lade{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:var(--grund);font-family:var(--display);font-size:26px;letter-spacing:.2em;color:var(--stein-2);transition:opacity .8s;}
.lade.weg{opacity:0;pointer-events:none;}
.fehlerbox{color:#ff9a86;font-size:13px;}
.brief{border-top:1px solid var(--linie);padding:8px 0;font-size:13.5px;}
.brief.neu{border-left:3px solid var(--gold);padding-left:8px;}
.brief small{display:block;color:var(--asche);font-size:11px;}
@media (max-width:1300px){ .krise{left:auto;right:430px;transform:none;width:320px;} }
@media (max-width:1100px){ .krise{position:relative;left:auto;right:auto;top:auto;margin:0 16px 10px;width:auto;} }
@media (max-width:760px){
  .uhr{min-width:0;font-size:10.5px;}
  .eintritt .feld input{width:100%;}
  .eintritt .feld{flex:1 1 100%;}
  #s-leben .rolle{max-height:none;}
}
.feld input[type=range]{background:none;border:0;padding:0;}
.risiko strong{white-space:nowrap;}

.eintritt-reiter{display:flex;gap:4px;margin-bottom:10px;}
.eintritt-reiter button{background:none;border:0;border-bottom:2px solid transparent;color:var(--asche);padding:6px 10px;cursor:pointer;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;}
.eintritt-reiter button[aria-selected=true]{color:var(--stein);border-bottom-color:var(--gold);}
.eintritt .feld input{width:170px;}
.these p.klein{font-size:12.5px;margin:0;}