/* Hausdesign: Grundlagen und Bausteine. Farbwerte stehen ausschließlich in tokens.css. */

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;background:var(--grund);color:var(--text);
  font-family:var(--font-schrift);font-size:16px;line-height:1.5}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;touch-action:manipulation}
a{color:var(--akzent)}
:focus-visible{outline:2px solid var(--akzent);outline-offset:2px}
.matt{color:var(--matt)}
.anzeige{font-family:var(--font-anzeige)}

/* Icon */
.ik{width:1em;height:1em;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;vertical-align:-.15em}

/* Karte */
.karte{background:var(--panel);border:1px solid var(--rand);border-radius:var(--r-gross);
  padding:var(--luft-4);box-shadow:var(--schatten);min-width:0}
.karten-kopf{display:flex;align-items:center;gap:var(--luft-2);margin-bottom:var(--luft-3);
  font-size:12px;line-height:16px;letter-spacing:.08em;text-transform:uppercase;color:var(--matt)}
.karten-kopf .ik{font-size:16px;color:var(--akzent)}
.karten-kopf .mehr{margin-left:auto;color:var(--akzent);text-transform:none;letter-spacing:0;text-decoration:none}
.karten-raster{display:grid;gap:var(--luft);grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr))}
.gross-wert{font-family:var(--font-anzeige);font-size:40px;line-height:1;margin:0 0 var(--luft-3)}

/* Knopf */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:var(--luft-2);
  min-height:var(--ziel-min);padding:0 var(--luft-4);border-radius:var(--r-klein);
  background:var(--panel-2);border:1px solid var(--rand-stark);color:var(--text);
  font-size:14px;text-decoration:none;transition:background-color .15s,border-color .15s}
.knopf.haupt{background:var(--akzent);border-color:var(--akzent);color:var(--auf-akzent);font-weight:700}
.knopf.gefahr{background:var(--rot);border-color:var(--rot);color:var(--auf-rot);font-weight:700}
.knopf.rund{width:var(--ziel-min);padding:0;border-radius:50%}
.knopf.breit{width:100%}
.knopf:active:not(:disabled){transform:scale(.98)}
.knopf:disabled{opacity:.45;cursor:not-allowed}
.aktionen{display:flex;flex-wrap:wrap;gap:var(--luft-2)}

/* Kachel */
.kacheln{display:grid;gap:var(--luft-2);grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
.kachel{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:3px;
  min-height:var(--kachel-hoehe);padding:var(--luft-3);border-radius:var(--r-mittel);
  background:var(--panel-2);border:1px solid var(--rand);color:var(--text);text-align:left;
  transition:background-color .15s,border-color .15s}
.kachel:active{transform:scale(.98)}
.kachel .icon{display:grid;place-items:center;width:var(--icon-feld);height:var(--icon-feld);margin-bottom:var(--luft-1);
  border-radius:var(--r-klein);background:var(--panel-3);color:var(--matt);font-size:22px}
.kachel .name{font-size:15px;line-height:20px;font-weight:700}
.kachel .unter{font-size:13px;line-height:18px;color:var(--matt)}
.kachel .watt{position:absolute;top:10px;right:var(--luft-3);font-family:var(--font-anzeige);font-size:12px;color:var(--matt)}
.kachel.an{background:var(--gold-sanft);border-color:var(--gold)}
.kachel.an .icon{background:var(--gold);color:var(--auf-gold)}
.kachel.an .unter,.kachel.an .watt{color:var(--gold)}
.kachel.weg{opacity:.45}

/* Chip */
.chips{display:flex;flex-wrap:wrap;gap:var(--luft-2)}
.chip{display:inline-flex;align-items:center;gap:7px;padding:7px var(--luft-3);border-radius:var(--r-voll);
  background:var(--panel-2);border:1px solid var(--rand);color:var(--text);font-size:13px;line-height:1.2;text-decoration:none}
.chip .ik{font-size:15px;color:var(--matt)}
.chip.gold,.chip.gold .ik{color:var(--gold);border-color:var(--gold)}
.chip.gruen,.chip.gruen .ik{color:var(--gruen);border-color:var(--gruen)}
.chip.orange,.chip.orange .ik{color:var(--orange);border-color:var(--orange)}
.chip.rot,.chip.rot .ik{color:var(--rot);border-color:var(--rot)}
.person-basti{--person:var(--person-basti)}
.person-jessi{--person:var(--person-jessi)}
.person-teo{--person:var(--person-teo)}
.person-mina{--person:var(--person-mina)}
.punkt{flex:none;width:10px;height:10px;border-radius:var(--r-voll);background:var(--person);box-shadow:0 0 0 1px var(--rand-feld)}
.chip.voll{background:var(--person);border-color:var(--person);color:var(--auf-person)}
.chip.voll .ik{color:var(--auf-person)}

/* Wertzeile */
.wert-zeile{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:7px 0;
  border-top:1px solid var(--rand);font-size:14px;line-height:20px}
.wert-zeile:first-child{border-top:0}
.wert-name{display:inline-flex;align-items:center;gap:7px;color:var(--matt)}
.wert-name .ik{font-size:15px}
.wert{text-align:right;font-family:var(--font-anzeige)}

/* Reiter */
.mit-leiste{display:grid;grid-template-columns:88px minmax(0,1fr);min-height:100vh}
.leiste{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:var(--luft-1);padding:var(--luft-3) var(--luft-2);
  overflow-y:auto;scrollbar-width:none;background:var(--grund-tief);border-right:1px solid var(--rand)}
.reiter{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;min-height:var(--ziel-min);padding:7px var(--luft-1);
  border-radius:var(--r-klein);border:1px solid transparent;background:none;color:var(--matt);font-size:12px;line-height:1.2;text-decoration:none}
.reiter .ik{font-size:22px}
.reiter.aktiv{background:var(--panel-2);border-color:var(--akzent);color:var(--text)}
.reiter .zahl{position:absolute;top:3px;right:12px;min-width:18px;height:18px;padding:0 var(--luft-1);border-radius:9px;
  display:grid;place-items:center;background:var(--gold);color:var(--auf-gold);font-family:var(--font-anzeige);font-size:10px;font-weight:700}
.reiter .zahl:empty{display:none}
.unterleiste{display:flex;flex-wrap:wrap;gap:var(--luft-2)}
.unterleiste a,.unterleiste button{min-height:var(--ziel-min);display:inline-flex;align-items:center;padding:0 15px;
  border-radius:var(--r-voll);background:var(--panel);border:1px solid var(--rand);color:var(--text);font-size:14px;text-decoration:none}
.unterleiste .aktiv{background:var(--lila-sanft);border-color:var(--lila)}
@media (max-width:640px){
  .mit-leiste{display:block}
  .leiste{position:sticky;top:0;z-index:5;height:auto;flex-direction:row;border-right:0;border-bottom:1px solid var(--rand)}
  .reiter{flex:0 0 72px}
}

/* Meldung */
.meldung{display:flex;gap:10px;align-items:flex-start;padding:var(--luft-3) var(--luft-4);border-radius:var(--r-mittel);
  border:1px solid var(--akzent);background:var(--akzent-sanft);color:var(--text);font-size:14px;line-height:20px}
.meldung>.ik{font-size:20px;color:var(--akzent)}
.meldung strong{display:block;font-size:15px}
.meldung.erfolg{border-color:var(--gruen);background:var(--gruen-sanft)} .meldung.erfolg>.ik{color:var(--gruen)}
.meldung.warnung{border-color:var(--orange);background:var(--orange-sanft)} .meldung.warnung>.ik{color:var(--orange)}
.meldung.fehler{border-color:var(--rot);background:var(--rot-sanft)} .meldung.fehler>.ik{color:var(--rot)}

/* Balken */
.balken{height:10px;border-radius:var(--r-voll);background:var(--panel-3);overflow:hidden}
.balken i{display:block;height:100%;border-radius:inherit;background:var(--akzent)}
.balken.gross{height:14px}
.balken.gruen i{background:var(--gruen)} .balken.orange i{background:var(--orange)} .balken.rot i{background:var(--rot)}
.balken.xp i{background:linear-gradient(90deg,var(--lila),var(--akzent))}

/* Feld */
.feld{display:block;margin-bottom:13px}
.feld>span{display:block;margin-bottom:var(--luft-1);font-size:13px;line-height:18px;color:var(--matt)}
.feld input,.feld select,.feld textarea{display:block;width:100%;min-height:var(--ziel-min);padding:10px var(--luft-3);
  border-radius:var(--r-klein);border:1px solid var(--rand-feld);background:var(--grund);color:var(--text);font-size:16px}
.feld.gross input{font-family:var(--font-anzeige);font-size:30px;text-align:right}
.feld small{display:block;margin-top:var(--luft-1);font-size:13px;line-height:18px;color:var(--matt)}
.feld.fehler input,.feld.fehler select,.feld.fehler textarea{border-color:var(--rot)}
.feld.fehler small{color:var(--rot)}

/* Popup */
.popup-grund{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:var(--luft-4);background:rgba(3,6,14,.82)}
.popup{width:min(560px,100%);max-height:calc(100vh - 32px);overflow-y:auto;padding:var(--luft-6);
  background:var(--panel);border:1px solid var(--rand-stark);border-radius:var(--r-gross);box-shadow:var(--schatten)}
.popup-kopf{display:flex;align-items:center;justify-content:space-between;gap:var(--luft-3);margin-bottom:var(--luft-3)}
.popup-kopf h2{margin:0;font-size:20px;line-height:26px}

@media print{
  html,body{background:#fff}
  .leiste,.popup-grund{display:none}
  .karte{box-shadow:none;break-inside:avoid}
}