/* Hakan: Farbe vom Goldhamschter, Gelb-Schwarz vom Trikot (und vo dr Baustell). */
:root {
  --gelb: #ffc21a;
  --nuss: #2e2117;

  /* Gehege und Ruum (Tag) */
  --streu-hinde: #d6c398;
  --streu: #efe2c0;
  --streu-mitti: #e5d3aa;
  --streu-unde: #d2bd8c;
  --streu-linie: #bf9f63;
  --span: #fbf4e2;
  --tunnel-hell: #866541;
  --tunnel: #4b3721;
  --tunnel-rand: #b2925f;
  --kammer: #5e4529;
  --nest: #f1dc9e;
  --holz-hell: #dcab70;
  --holz: #b98a56;
  --holz-dunkel: #85602f;
  --rueckwand-obe: #c7ab83;
  --rueckwand: #e0caa2;
  --tisch-obe: #b4875c;
  --tisch: #855c38;
  --wand-hell: #f1f5f4;
  --wand: #d6e2e6;
  --liecht: #fff3d2;
  --himmel-obe: #6fb6e6;
  --himmel: #d3ebf8;
  --fensterrahme: #f7fafb;
  --glas: rgba(255, 255, 255, .32);
  --glas-rand: #8ea6ad;
  --mass: #2f6fb0;
  --zzz: #2f6fb0;
  --stei: #a3abae;
  --stei-schrift: #6c7477;

  --flaeche: #ffffff;
  --flaeche-2: #eef3f4;
  --linie: #c3d0d4;
  --text: #2e2117;
  --text-leis: #5a676b;
  --alarm: #d93a2b;
  --ok: #24804c;

  --f-display: 'Big Shoulders Stencil Display', 'Arial Narrow', sans-serif;
  --f-text: 'Bricolage Grotesque', system-ui, -apple-system, sans-serif;
  color-scheme: light;
}

/* Dr Hakan isch wach = Nacht. D App wird dunkel, wenn er ufstoht. */
body.nacht {
  --wand-hell: #24315a;
  --wand: #18223f;
  --liecht: #a9bcff;
  --himmel-obe: #060b1e;
  --himmel: #1b2853;
  --fensterrahme: #3a4a78;
  --glas: rgba(150, 175, 255, .06);
  --glas-rand: #50618f;
  --streu-hinde: #7f7258;
  --streu: #a79878;
  --streu-mitti: #988a6b;
  --streu-unde: #82755a;
  --streu-linie: #6f5f43;
  --span: #c9bea2;
  --tunnel-hell: #4d3c27;
  --tunnel: #251c11;
  --tunnel-rand: #7b6a4c;
  --kammer: #3e2f1c;
  --nest: #c9b78a;
  --holz-hell: #9a7a55;
  --holz: #7d5f3d;
  --holz-dunkel: #57412a;
  --rueckwand-obe: #4e4434;
  --rueckwand: #6d604b;
  --tisch-obe: #5c4636;
  --tisch: #3f2f25;
  --mass: #86b7ec;
  --zzz: #86b7ec;
  --stei: #59617a;
  --stei-schrift: #3a405a;
  --flaeche: #212d52;
  --flaeche-2: #2a3862;
  --linie: #3a4a78;
  --text: #eef1f8;
  --text-leis: #a9b3cf;
  --alarm: #ff5a47;
  --ok: #5fd08f;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--wand);
  color: var(--text);
  font-family: var(--f-text);
  font-size: 16px;
  line-height: 1.45;
}
button { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--mass); outline-offset: 2px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
[hidden] { display: none !important; }

.app {
  max-width: 480px;
  margin: 0 auto;
  padding: 0 16px calc(92px + env(safe-area-inset-bottom));
}

h1 { font-family: var(--f-display); font-weight: 900; font-size: 46px; line-height: .9; margin: 0; }

/* ---------- Login ---------- */
.login { max-width: 480px; margin: 0 auto; padding: max(18px, env(safe-area-inset-top)) 16px 32px; }
.login-held { width: 112px; margin: 6px auto 0; }
.login-held svg { display: block; width: 100%; height: auto; }
.login-titel { text-align: center; font-size: 66px; }
.login-sub { text-align: center; color: var(--text-leis); margin: 6px 0 18px; }
.login-form { display: grid; gap: 6px; }
.login-form label { font-weight: 700; font-size: 14px; margin-top: 4px; }
.login-form .knopf { margin-top: 10px; }
input:not([type="range"]) {
  font: inherit;
  font-size: 16px;
  padding: 11px 14px;
  border-radius: 12px;
  border: 2px solid var(--text);
  background: var(--flaeche);
  color: var(--text);
  min-width: 0;
}
.fehler { color: var(--alarm); font-weight: 700; margin: 4px 0 0; }
.aafrog-danke p { margin: 0 0 10px; }
.kontakt a, .karte a:not(.knopf) { color: var(--text); font-weight: 700; }

/* ---------- Chopf ---------- */
.kopf {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: max(14px, env(safe-area-inset-top)) 0 0;
}
.status { margin: 6px 0 0; color: var(--text-leis); font-size: 15px; line-height: 1.3; }
.kopf-rechts { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.rund-knopf {
  display: inline-flex; align-items: center; gap: 6px;
  height: 40px; padding: 0 12px 0 10px;
  border-radius: 999px; border: 2px solid var(--text);
  background: var(--flaeche); color: var(--text);
  font: inherit; font-weight: 700; font-size: 14px; cursor: pointer;
}
.rund-knopf svg { width: 18px; height: 18px; }
.konto-knopf { border: 0; padding: 0; background: none; border-radius: 50%; cursor: pointer; line-height: 0; box-shadow: 0 0 0 2px var(--text); }

/* Countdown wie d Uhr im Ziel vom Ironman */
.renn-uhr-band {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  margin: 10px 0 0;
  padding: 8px 12px;
  border-radius: 12px;
  background: #000;
  color: #fff;
}
.cd-label { font-size: 13px; font-weight: 700; color: #cfcfcf; line-height: 1.15; max-width: 6em; }
.cd-zyt {
  font-family: var(--f-display); font-weight: 900; font-size: 36px; line-height: 1;
  color: var(--gelb); font-variant-numeric: tabular-nums; letter-spacing: .02em;
}
.renn-uhr-band.ist-wach .cd-zyt { color: #fff; }
.cd-rechts { display: grid; justify-items: end; gap: 2px; font-size: 12.5px; color: #cfcfcf; line-height: 1.2; text-align: right; }
.cd-uhr { font-family: var(--f-display); font-weight: 700; font-size: 15px; color: #fff; }
.tempo { font-family: var(--f-text); font-size: 11px; font-weight: 800; background: var(--alarm); color: #fff; border-radius: 6px; padding: 1px 5px; }

/* ---------- Sprechblase und Szene ---------- */
.blase {
  position: relative;
  z-index: 1;
  margin: 12px 0 0;
  padding: 10px 14px;
  background: var(--flaeche);
  border: 2px solid var(--text);
  border-radius: 16px;
  font-weight: 600;
  font-size: 15.5px;
  line-height: 1.35;
  min-height: calc(3 * 1.35em + 24px);
  display: flex;
  align-items: center;
}
.blase::after {
  content: '';
  position: absolute;
  left: 44%;
  bottom: -10px;
  width: 16px;
  height: 16px;
  background: var(--flaeche);
  border-right: 2px solid var(--text);
  border-bottom: 2px solid var(--text);
  transform: rotate(45deg);
}
.blase.neu { animation: plopp .3s ease-out; }
@keyframes plopp { from { transform: scale(.97); opacity: .3; } }

.szene { position: relative; margin: 0 -16px; cursor: pointer; aspect-ratio: 400 / 340; }
.szene-hinten svg, .szene-vorne svg { display: block; width: 100%; height: auto; }
.szene-vorne { position: absolute; inset: 0; }
.szene.tot .szene-hinten, .szene.tot .welt { filter: grayscale(.85) brightness(.92); }
.schildli { font-family: var(--f-text); font-size: 5.2px; font-weight: 700; fill: #4a3a18; letter-spacing: .02em; }
.mass text { font-family: var(--f-display); font-weight: 700; }
.band-text { font-family: var(--f-display); font-weight: 900; font-size: 13px; fill: #000; }

.speiche.dreht { animation: dreh .5s linear infinite; transform-box: view-box; transform-origin: 92px 110px; }
@keyframes dreh { to { transform: rotate(360deg); } }
.renne { animation: hopp .22s ease-in-out infinite alternate; }
@keyframes hopp { to { transform: translateY(-4px); } }
.atme { animation: atme 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes atme { 50% { transform: scaleY(1.04); } }
.zzz text { font-family: var(--f-display); font-weight: 900; font-size: 14px; opacity: 0; animation: zzz 3s ease-in-out infinite; }
.zzz text:nth-child(2) { animation-delay: 1s; }
.zzz text:nth-child(3) { animation-delay: 2s; }
@keyframes zzz { 0% { opacity: 0; transform: translateY(6px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(-10px); } }
.mampf .hk-kopf { animation: mampf .3s ease-in-out infinite alternate; }
@keyframes mampf { to { transform: translateY(1.4px); } }
.waelze { animation: waelze 1.2s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 85%; }
@keyframes waelze { 25% { transform: rotate(-16deg); } 75% { transform: rotate(16deg); } }
.kratz { animation: kratz .28s ease-in-out infinite alternate; }
@keyframes kratz { to { transform: translateY(-5px); } }
.guck { animation: guck 2.8s ease-in-out infinite; }
@keyframes guck { 0%, 100% { transform: translateY(20px); } 35%, 75% { transform: translateY(0); } }
.schlotter { animation: schlotter .07s linear infinite alternate; }
@keyframes schlotter { to { transform: translateX(1.4px); } }
.stink { animation: stink 2.4s ease-in-out infinite; }
@keyframes stink { 50% { transform: translateY(-4px); opacity: .5; } }
.sandstaub circle, .dreck circle { animation: staub 1.1s ease-out infinite; }
.sandstaub circle:nth-child(2n), .dreck circle:nth-child(2n) { animation-delay: .5s; }
@keyframes staub { from { transform: translateY(6px); opacity: 1; } to { transform: translateY(-6px); opacity: 0; } }
.hand { animation: hand 2.4s ease-in-out infinite; }
@keyframes hand { 50% { transform: translateX(-4px); } }

/* ---------- Wärt ---------- */
.werte { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin: 6px 0 16px; }
.wert {
  display: grid;
  grid-template-columns: 24px 1fr;
  grid-template-areas: "emo label" "emo balke";
  column-gap: 8px;
  align-items: center;
}
.wert-emo { grid-area: emo; font-size: 19px; line-height: 1; }
.wert-label { grid-area: label; font-size: 13px; font-weight: 700; color: var(--text-leis); line-height: 1.2; }
.balke {
  grid-area: balke;
  display: block;
  height: 11px;
  margin-top: 3px;
  border-radius: 6px;
  background: var(--flaeche-2);
  border: 1.5px solid var(--text);
  overflow: hidden;
}
.fuell { display: block; height: 100%; background: #d98a3f; transition: width .6s ease; }
.wert.warn .fuell { background: repeating-linear-gradient(-45deg, var(--gelb) 0 5px, #000 5px 10px); }
.wert.krit .fuell { background: repeating-linear-gradient(-45deg, var(--alarm) 0 5px, #000 5px 10px); min-width: 10px; }
.wert.krit .wert-label { color: var(--alarm); }
.wert.krit .balke { animation: puls 1s ease-in-out infinite; }
@keyframes puls { 50% { border-color: var(--alarm); } }

/* ---------- Charte und Chnöpf ---------- */
.karte {
  background: var(--flaeche);
  border: 1.5px solid var(--linie);
  border-radius: 16px;
  padding: 14px 14px 16px;
  margin: 0 0 12px;
}
.karte h2 { font-size: 19px; font-weight: 800; margin: 0 0 10px; line-height: 1.2; }
.karte-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.leis { color: var(--text-leis); font-size: 14px; margin: 0; }
.klein { font-size: 13px; margin-top: 6px; }
.leer { margin: 4px 0 14px; font-weight: 600; }
.abstand { margin-top: 14px; }

.knopf {
  font: inherit;
  font-weight: 700;
  padding: 11px 16px;
  min-height: 48px;
  border-radius: 12px;
  border: 2px solid var(--text);
  background: var(--flaeche);
  color: var(--text);
  cursor: pointer;
}
a.knopf { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; text-align: center; }
.knopf:active { transform: translateY(1px); }
.knopf-voll { width: 100%; }
.knopf-primaer { background: var(--gelb); color: #000; border-color: #000; box-shadow: 3px 3px 0 #000; }
.knopf-primaer:active { box-shadow: 1px 1px 0 #000; transform: translate(2px, 2px); }
.knopf-alarm { background: var(--alarm); color: #fff; border-color: var(--alarm); }
.klein-knopf { min-height: 38px; padding: 6px 12px; font-size: 14px; }
.knopf-reihe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.knopf-reihe .knopf { flex: 1 1 140px; }
.knopf-text { font: inherit; font-weight: 700; background: none; border: 0; color: var(--text-leis); padding: 10px 4px; cursor: pointer; text-decoration: underline; }

/* Hüt z'tue */
.aufgabe-liste { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.aufgabe {
  width: 100%;
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 9px 12px;
  border-radius: 12px;
  border: 2px solid var(--text);
  background: var(--flaeche);
  box-shadow: inset 6px 0 0 var(--gelb);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.aufgabe:active { transform: translateY(1px); }
.aufgabe-emo { font-size: 22px; text-align: center; line-height: 1; }
.aufgabe-txt b { display: block; font-size: 16px; font-weight: 700; line-height: 1.2; }
.aufgabe-txt small { display: block; font-size: 13px; color: var(--text-leis); }
.aufgabe-min { font-family: var(--f-display); font-weight: 700; font-size: 20px; color: var(--text-leis); }
.aufgabe.wartet { border-style: dashed; box-shadow: none; }
.erledigt .aufgabe { border: 1.5px solid var(--linie); box-shadow: none; background: transparent; min-height: 48px; }
.erledigt .aufgabe-emo { color: var(--ok); font-weight: 800; font-size: 18px; }
.erledigt .aufgabe-txt b { font-weight: 600; }

.kontroll-liste { list-style: none; margin: 0; padding: 0; }
.kontroll-liste li {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid var(--linie);
  align-items: baseline;
}
.kontroll-liste small { color: var(--text-leis); font-size: 13px; }
.kontroll-ico { font-weight: 800; }
.kontroll-liste .ok .kontroll-ico { color: var(--ok); }
.kontroll-liste .offe .kontroll-ico, .kontroll-liste .offe small { color: var(--alarm); }

.vertretig-band {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 2px solid #000;
  background: var(--gelb);
  color: #000;
}
.vertretig-band p { margin: 0; font-size: 14.5px; line-height: 1.3; }
.vertretig-band .knopf { background: #fff; color: #000; border-color: #000; }
.vertretig-liste { display: grid; gap: 8px; margin-top: 12px; }
.vertretig-wahl {
  display: grid; gap: 2px;
  padding: 12px 14px;
  border-radius: 12px; border: 2px solid var(--text);
  background: var(--flaeche); color: var(--text);
  font: inherit; text-align: left; cursor: pointer;
}
.vertretig-wahl small { color: var(--text-leis); }

.tod-karte { background: #000; color: #fff; border-color: #000; }
.tod-karte h2 { font-family: var(--f-display); font-weight: 900; font-size: 34px; margin-bottom: 4px; }
.tod-karte .leis { color: #c9c9c9; margin-bottom: 14px; }
.tod-ursach { font-weight: 700; margin: 0 0 6px; }
.tod-karte .knopf:not(.knopf-primaer) { background: #fff; color: #000; border-color: #fff; }

/* ---------- Tabs unde ---------- */
.tabs {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  padding: 6px max(6px, calc((100vw - 480px) / 2 + 6px)) calc(6px + env(safe-area-inset-bottom));
  background: var(--flaeche);
  border-top: 2px solid var(--text);
}
.tabs button {
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  display: grid;
  justify-items: center;
  gap: 1px;
  padding: 6px 0 5px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--text-leis);
  cursor: pointer;
}
.tabs button span { font-size: 20px; line-height: 1.1; }
.tabs button[aria-current="page"] { background: var(--gelb); color: #000; }

/* ---------- Chat ---------- */
.tab-titel { font-size: 24px; font-weight: 800; margin: 14px 0 2px; }
.tab-sub { margin-bottom: 14px; }
.chat-liste { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 12px; }
.msg { display: grid; grid-template-columns: 34px 1fr; gap: 8px; align-items: start; }
.msg.mii { grid-template-columns: 1fr 34px; }
.msg.mii .avatar { order: 2; }
.msg-blase { background: var(--flaeche); border: 1.5px solid var(--linie); border-radius: 4px 14px 14px 14px; padding: 8px 12px 9px; min-width: 0; }
.msg.mii .msg-blase { background: var(--gelb); color: #000; border-color: #000; border-radius: 14px 4px 14px 14px; }
.msg-meta { display: flex; flex-wrap: wrap; gap: 2px 6px; align-items: baseline; font-size: 12px; color: var(--text-leis); }
.msg-meta b { font-size: 13.5px; color: var(--text); }
.msg-meta time { margin-left: auto; }
.msg.mii .msg-meta, .msg.mii .msg-meta b { color: #000; }
.msg p { margin: 3px 0 0; overflow-wrap: anywhere; }
.art-hakan .msg-blase { border: 2px solid #d98a3f; }
.art-verwarnig .msg-blase { border: 2px solid var(--alarm); font-weight: 700; }
.art-stupf .msg-blase { border-style: dashed; }
.art-tod .msg-blase { background: #000; color: #fff; border-color: #000; }
.art-tod .msg-meta, .art-tod .msg-meta b { color: #ddd; }
.chat-form {
  position: sticky;
  bottom: calc(70px + env(safe-area-inset-bottom));
  display: flex;
  gap: 8px;
  padding: 10px 0;
  background: var(--wand);
}
.chat-form input { flex: 1; }

/* ---------- Wettbüro ---------- */
.wett-kopf h2 { font-family: var(--f-display); font-weight: 900; font-size: 32px; margin-bottom: 6px; }
.wett-kopf p { margin: 0; }
.wett-stand { font-weight: 700; }
.wett-zahl { font-family: var(--f-display); font-weight: 900; font-size: 52px; line-height: .9; margin-right: 6px; }
.wett-liste { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 16px; }
.wett-liste p { margin: 0 0 8px; font-weight: 650; line-height: 1.3; }
.wett-liste p small { color: var(--text-leis); font-weight: 600; white-space: nowrap; }
.jonei { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.verteilig { margin-left: auto; font-size: 12.5px; color: var(--text-leis); }
.note-tipp { display: flex; align-items: center; gap: 12px; }
.note-tipp input { flex: 1; accent-color: #d98a3f; height: 28px; }
.note-tipp output { font-family: var(--f-display); font-weight: 900; font-size: 32px; min-width: 2.4ch; text-align: right; }
.leaderboard { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.leaderboard li { display: grid; grid-template-columns: 24px 32px 1fr auto; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 10px; }
.leaderboard li.ich { background: var(--flaeche-2); box-shadow: inset 4px 0 0 var(--gelb); }
.lb-rang { font-family: var(--f-display); font-weight: 900; font-size: 22px; text-align: center; }
.lb-name { font-weight: 700; line-height: 1.2; }
.lb-name small { display: block; font-weight: 500; color: var(--text-leis); font-size: 12.5px; }
.lb-punkte { font-family: var(--f-display); font-weight: 900; font-size: 26px; }
.resultat-liste { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.resultat-liste li { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: baseline; font-size: 14px; padding-bottom: 6px; border-bottom: 1px solid var(--linie); }
.resultat-liste .ok { color: var(--ok); font-weight: 800; }
.resultat-liste .falsch { color: var(--alarm); font-weight: 700; }

/* ---------- Logbuech ---------- */
.log-liste { list-style: none; margin: 0; padding: 0; }
.log {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--linie);
  font-size: 14.5px;
  line-height: 1.35;
}
.log time { font-family: var(--f-display); font-weight: 700; font-size: 16px; color: var(--text-leis); }
.log.art-fehler span, .log.art-alarm span { color: var(--alarm); font-weight: 650; }

/* ---------- Pilot ---------- */
.pilot-kopf h2 { font-family: var(--f-display); font-weight: 900; font-size: 32px; margin: 0 0 2px; }
.countdown-gross { display: flex; align-items: center; gap: 12px; margin: 14px 0 8px; }
.countdown-zahl { font-family: var(--f-display); font-weight: 900; font-size: 92px; line-height: .8; }
.countdown-txt { font-weight: 700; font-size: 16px; line-height: 1.25; max-width: 15ch; }
.index { font-family: var(--f-display); font-weight: 900; font-size: 24px; }
.doppelmeter { display: block; width: 100%; height: auto; margin: 2px 0 12px; }
.meter-zahl text { font-family: var(--f-display); font-weight: 700; font-size: 11px; }
.urteil-titel { font-family: var(--f-display); font-weight: 900; font-size: 32px; line-height: 1; margin: 0 0 4px; }
.urteil-text { margin: 0; }
.stat { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; margin: 0; align-items: baseline; }
.stat dt { color: var(--text-leis); font-size: 15px; }
.stat dd { margin: 0; font-family: var(--f-display); font-weight: 700; font-size: 21px; text-align: right; }
.friedhof { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.friedhof li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; }
.grabstei { width: 40px; height: 46px; }
.friedhof b { display: block; font-family: var(--f-display); font-weight: 900; font-size: 20px; line-height: 1; }
.friedhof small { display: block; color: var(--text-leis); }
.fakte ul { margin: 0; padding-left: 18px; }
.fakte li { margin: 4px 0; font-size: 14.5px; }

.aaleitig details { border-top: 1px solid var(--linie); }
.aaleitig details:last-of-type { border-bottom: 1px solid var(--linie); margin-bottom: 14px; }
.aaleitig summary {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px 0; font-weight: 750; cursor: pointer; list-style: none;
}
.aaleitig summary::-webkit-details-marker { display: none; }
.aaleitig summary::after { content: '+'; font-family: var(--f-display); font-weight: 900; font-size: 24px; line-height: 1; }
.aaleitig details[open] summary::after { content: '−'; }
.aaleitig-inhalt { padding: 0 0 12px; font-size: 15px; }
.aaleitig-inhalt p { margin: 0 0 8px; }
.aaleitig-inhalt ul { margin: 0 0 8px; padding-left: 18px; }
.plan, .punkte { width: 100%; border-collapse: collapse; font-size: 14.5px; margin: 0 0 10px; }
.plan th, .punkte th { text-align: left; vertical-align: top; padding: 7px 10px 7px 0; font-weight: 750; border-bottom: 1px solid var(--linie); }
.plan th { white-space: nowrap; }
.plan td, .punkte td { padding: 7px 0; vertical-align: top; border-bottom: 1px solid var(--linie); }
.punkte td:nth-child(2) { color: var(--text-leis); font-size: 13px; padding-right: 8px; }
.punkte td:last-child { text-align: right; font-family: var(--f-display); font-weight: 700; font-size: 17px; white-space: nowrap; }
.punkte .summe th, .punkte .summe td { border-bottom: 0; border-top: 2px solid var(--text); font-size: 20px; }

/* ---------- Sheets ---------- */
.sheet {
  width: 100%;
  max-width: 480px;
  max-height: 92vh;
  margin: auto auto 0;
  padding: 14px 16px calc(18px + env(safe-area-inset-bottom));
  overflow: auto;
  border: 0;
  border-top: 3px solid var(--text);
  border-radius: 20px 20px 0 0;
  background: var(--flaeche);
  color: var(--text);
}
.sheet::backdrop { background: rgba(10, 14, 30, .5); }
.sheet-kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 2px; }
.sheet-kopf h2 { font-size: 22px; font-weight: 800; margin: 0; }
.sheet h3 { font-size: 15px; font-weight: 800; margin: 18px 0 8px; }
.zue {
  width: 40px; height: 40px; flex-shrink: 0;
  font: inherit; font-size: 17px;
  border-radius: 50%;
  border: 2px solid var(--text);
  background: none;
  color: var(--text);
  cursor: pointer;
}

/* Alli Aktione: alles uf ei Blick, ohni scrolle */
.aktion-legende { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 8px 0 10px; font-size: 12.5px; font-weight: 700; color: var(--text-leis); }
.aktion-legende span::before {
  content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 5px;
  border-radius: 3px; background: var(--g-farb); vertical-align: -1px;
}
.g-fueter { --g-farb: #f0a830; }
.g-putze { --g-farb: #4a90c8; }
.g-bschaeftige { --g-farb: #58a65c; }
.g-zaehme { --g-farb: #e07a8a; }
.aktion-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.aktion {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 2px;
  min-height: 64px;
  padding: 9px 4px 6px;
  border-radius: 12px;
  border: 2px solid var(--text);
  background: var(--flaeche);
  box-shadow: inset 0 5px 0 var(--g-farb);
  color: var(--text);
  font: inherit;
  text-align: center;
  cursor: pointer;
}
.aktion:active { transform: translateY(1px); }
.aktion:disabled { cursor: default; opacity: .7; border-style: dashed; }
.a-emo { font-size: 22px; line-height: 1; }
.aktion b { font-size: 13px; line-height: 1.15; }
.aktion small { font-size: 11.5px; color: var(--text-leis); }

/* ---------- Chat: Fotos, Videos, Sprochnochrichte ---------- */
.chat-form { position: sticky; align-items: center; flex-wrap: nowrap; }
.icon-knopf {
  flex-shrink: 0;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%; border: 2px solid var(--text);
  background: var(--flaeche); color: var(--text); cursor: pointer; padding: 0;
}
.icon-knopf svg { width: 21px; height: 21px; }
.icon-knopf-primaer { background: var(--gelb); color: #000; border-color: #000; }
.chat-form.nimmt-uf > :not(.ufnahm) { visibility: hidden; }
.ufnahm {
  position: absolute; inset: 6px 0;
  display: flex; align-items: center; gap: 8px;
  padding: 0 4px 0 14px; border-radius: 999px;
  background: var(--flaeche); border: 2px solid var(--alarm);
}
.ufnahm-punkt { width: 12px; height: 12px; border-radius: 50%; background: var(--alarm); animation: puls-punkt 1s ease-in-out infinite; }
@keyframes puls-punkt { 50% { opacity: .3; } }
#ufnahm-zyt { font-family: var(--f-display); font-weight: 900; font-size: 20px; min-width: 3ch; }
.ufnahm-txt { flex: 1; font-size: 13.5px; color: var(--text-leis); }
.msg-bild { display: block; padding: 0; border: 0; background: none; margin: 6px 0 2px; cursor: zoom-in; border-radius: 10px; overflow: hidden; line-height: 0; }
.msg-bild img { display: block; width: 100%; max-width: 260px; max-height: 320px; object-fit: cover; border-radius: 10px; background: var(--flaeche-2); min-height: 80px; }
.msg-video { display: block; width: 100%; max-width: 280px; max-height: 360px; margin: 6px 0 2px; border-radius: 10px; background: #000; }
.msg-ton { display: flex; align-items: center; gap: 6px; margin: 6px 0 2px; }
.msg-ton audio { flex: 1; min-width: 0; height: 40px; max-width: 240px; }
.msg-ton small { color: inherit; opacity: .75; }
.bild-gross { padding: 0; border: 0; background: transparent; max-width: 96vw; max-height: 92vh; overflow: visible; }
.bild-gross::backdrop { background: rgba(0, 0, 0, .85); }
.bild-gross img { display: block; max-width: 96vw; max-height: 88vh; border-radius: 12px; }
.bild-gross .zue { position: absolute; top: -12px; right: -6px; background: #fff; color: #000; border-color: #000; }

/* ---------- Verwaltig (App-Verwalter) ---------- */
.verwaltig .admin-grund { display: block; font-weight: 700; font-size: 14px; margin: 12px 0 4px; }
.verwaltig #admin-grund { width: 100%; margin-bottom: 8px; }
.verwaltig details { border-top: 1px solid var(--linie); }
.verwaltig details:last-of-type { border-bottom: 1px solid var(--linie); }
.verwaltig summary {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 12px 0; font-weight: 800; cursor: pointer; list-style: none;
}
.verwaltig summary::-webkit-details-marker { display: none; }
.verwaltig summary small { font-weight: 600; color: var(--text-leis); margin-left: auto; }
.verwaltig summary::after { content: '+'; font-family: var(--f-display); font-weight: 900; font-size: 22px; line-height: 1; }
.verwaltig details[open] summary::after { content: '−'; }
.admin-inhalt { padding: 0 0 14px; }
.admin-inhalt h4 { margin: 14px 0 6px; font-size: 14.5px; }
.admin-inhalt .knopf-reihe { margin-top: 0; margin-bottom: 8px; }
.admin-werte { display: grid; gap: 6px; margin-bottom: 10px; }
.admin-wert { display: grid; grid-template-columns: 120px 1fr 34px; align-items: center; gap: 8px; font-size: 14px; font-weight: 650; }
.admin-wert input { accent-color: var(--mass); }
.admin-wert output { font-family: var(--f-display); font-weight: 800; font-size: 18px; text-align: right; }
.admin-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.admin-liste li { display: grid; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--linie); }
.admin-benutzer { display: flex; gap: 10px; align-items: center; }
.admin-benutzer small { display: block; color: var(--text-leis); font-size: 12.5px; }
.chip-alarm { border-color: var(--alarm); color: var(--alarm); }
.verwaltig textarea {
  width: 100%; margin-bottom: 8px; padding: 10px 12px;
  font: inherit; font-size: 16px; border-radius: 12px; border: 2px solid var(--text);
  background: var(--flaeche); color: var(--text); resize: vertical;
}
.regle-gruppe { display: grid; gap: 6px; }
.regel { display: grid; grid-template-columns: 1fr 86px; gap: 10px; align-items: center; font-size: 14px; font-weight: 600; }
.regel input { width: 100%; padding: 8px 10px; text-align: right; font-family: var(--f-display); font-weight: 800; font-size: 18px; }
.warnig-text { color: var(--alarm); font-weight: 700; }
.log.art-admin span { color: var(--mass); font-weight: 650; }
.art-durchsag .msg-blase { border: 2px solid var(--mass); }
.msg-weg {
  margin-left: 4px; width: 26px; height: 26px; border-radius: 50%;
  border: 1.5px solid var(--linie); background: none; color: var(--text-leis);
  font: inherit; font-size: 12px; line-height: 1; cursor: pointer;
}
.msg.mii .msg-weg { border-color: #000; color: #000; }
.knopf-text.annull { display: inline-block; font-size: 13px; padding: 4px 0 0; color: var(--mass); }
.annulliert { display: block; color: var(--mass); font-weight: 700; font-size: 12.5px; margin-top: 4px; }
.pause-band {
  display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center;
  margin: 0 0 12px; padding: 10px 12px; border-radius: 14px;
  border: 2px solid var(--mass); background: color-mix(in srgb, var(--mass) 14%, var(--flaeche));
}
.pause-band p { margin: 0; font-size: 14.5px; line-height: 1.3; }
.pause-symbol { font-size: 26px; }
.renn-uhr-band.pausiert .cd-zyt { color: #9cc7f5; }
.szene.pausiert * { animation-play-state: paused !important; }
.szene.pausiert svg { filter: saturate(.55); }

/* Snus: deklariert als lebensgfährlich */
.g-gefahr { --g-farb: var(--alarm); }
.aktion-gefahr {
  grid-column: 1 / -1;
  grid-template-columns: auto auto;
  grid-template-areas: "emo label" "emo warn";
  justify-content: center;
  justify-items: start;
  column-gap: 10px;
  min-height: 58px;
  border-color: var(--alarm);
  box-shadow: none;
  background:
    repeating-linear-gradient(-45deg, var(--gelb) 0 7px, #000 7px 14px) top / 100% 6px no-repeat,
    color-mix(in srgb, var(--alarm) 10%, var(--flaeche));
  padding-top: 12px;
}
.aktion-gefahr .a-emo { grid-area: emo; font-size: 26px; }
.aktion-gefahr b { grid-area: label; }
.aktion-gefahr small { grid-area: warn; color: var(--alarm); font-weight: 800; font-size: 12.5px; }
.gefahr-hinwys { padding: 8px 10px; border-left: 5px solid var(--alarm); background: color-mix(in srgb, var(--alarm) 10%, transparent); border-radius: 6px; }
.warnig { text-align: center; padding-top: 0; overflow: hidden; }
.warnig-band { height: 12px; margin: 0 -16px 10px; background: repeating-linear-gradient(-45deg, var(--gelb) 0 10px, #000 10px 20px); }
.warnig .warnig-symbol { font-size: 46px; line-height: 1; margin: 6px 0 0; text-align: center; }
.warnig h2 { font-family: var(--f-display); font-weight: 900; font-size: 34px; color: var(--alarm); margin: 4px 0 8px; }
.warnig p { text-align: left; margin: 0; }

.profilbild { display: flex; gap: 14px; align-items: center; }
.profilbild .avatar { flex-shrink: 0; border-radius: 50%; box-shadow: 0 0 0 2px var(--text); }
.profilbild-knoepf { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; }
.profilbild-knoepf .knopf { flex: 1 1 130px; display: inline-flex; align-items: center; justify-content: center; text-align: center; }
.konto-kopf { display: flex; gap: 12px; align-items: center; margin: 8px 0 2px; }
.konto-kopf b { display: block; font-size: 18px; }
.konto-kopf small { color: var(--text-leis); }
.aafrog-liste, .benutzer-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.aafrog-liste li { display: grid; gap: 8px; padding: 10px; border: 1.5px solid var(--linie); border-radius: 12px; }
.aafrog-liste small { display: block; color: var(--text-leis); }
.zugang { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.benutzer-liste li { display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; align-items: center; font-size: 14.5px; }
.benutzer-liste small { color: var(--text-leis); }
.rolle-liste { display: grid; gap: 8px; }
.rolle-wahl {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px;
  border-radius: 14px;
  border: 2px solid var(--linie);
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.rolle-wahl small { display: block; font-size: 13px; opacity: .75; }
.rolle-wahl[aria-pressed="true"] { border-color: #000; background: var(--gelb); color: #000; }
.chip-reihe { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.chip {
  font: inherit;
  font-weight: 700;
  font-size: 14.5px;
  padding: 8px 16px;
  min-height: 40px;
  border-radius: 999px;
  border: 2px solid var(--text);
  background: none;
  color: var(--text);
  cursor: pointer;
}
.chip[aria-pressed="true"] { background: var(--text); color: var(--flaeche); }
.chip:disabled { opacity: .55; cursor: default; }

.teile-url { margin: 12px 0; padding: 10px 12px; border-radius: 10px; background: var(--flaeche-2); font-size: 14px; overflow-wrap: anywhere; }
.teile-knoepf { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.teile-knoepf .knopf { padding: 10px 6px; font-size: 14.5px; }

/* ---------- Guide ---------- */
.guide {
  width: min(420px, calc(100% - 32px));
  padding: 20px 20px 16px;
  border: 3px solid #000;
  border-radius: 22px;
  background: var(--flaeche);
  color: var(--text);
  text-align: center;
}
.guide::backdrop { background: rgba(10, 14, 30, .62); }
.guide-bild { min-height: 132px; display: grid; place-items: center; margin-bottom: 6px; }
.guide-bild .avatar { box-shadow: 0 0 0 3px #000; border-radius: 50%; }
.guide-hamschter { width: 116px; height: auto; }
.guide-hamschter.klein { width: 78px; }
.guide h2 { font-family: var(--f-display); font-weight: 900; font-size: 31px; line-height: 1; margin: 6px 0 10px; }
.guide p { margin: 0 0 16px; font-size: 16px; line-height: 1.45; text-align: left; }
.guide-punkte { display: flex; justify-content: center; gap: 6px; margin-bottom: 14px; }
.guide-punkte span { width: 8px; height: 8px; border-radius: 4px; background: var(--linie); }
.guide-punkte .aktiv { width: 22px; background: var(--text); }
.guide-knoepf { display: flex; gap: 8px; align-items: center; }
.guide-knoepf .knopf-primaer { margin-left: auto; }
.guide .doppelmeter { margin: 0; }
.renn-uhr { display: grid; justify-items: center; padding: 12px 24px; border-radius: 14px; background: #000; color: #fff; }
.renn-uhr span { font-size: 13px; color: #cfcfcf; }
.renn-uhr b { font-family: var(--f-display); font-weight: 900; font-size: 60px; line-height: 1; color: var(--gelb); }
.guide-reihe { display: flex; align-items: center; justify-content: center; gap: 14px; }
.guide-emo { font-size: 40px; }

/* ---------- Toasts ---------- */
.toasts {
  position: fixed;
  z-index: 20;
  top: max(10px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  width: min(448px, calc(100% - 32px));
  display: grid;
  gap: 6px;
  pointer-events: none;
}
.toast {
  padding: 10px 14px;
  border-radius: 12px;
  background: #000;
  color: #fff;
  font-weight: 650;
  font-size: 14.5px;
  border-left: 7px solid var(--gelb);
  animation: rein .25s ease-out;
  transition: opacity .4s, transform .4s;
}
.toast.alarm {
  border-left: 0;
  padding-top: 15px;
  background:
    repeating-linear-gradient(-45deg, var(--gelb) 0 7px, #000 7px 14px) top / 100% 6px no-repeat,
    #000;
}
.toast.weg { opacity: 0; transform: translateY(-6px); }
@keyframes rein { from { opacity: 0; transform: translateY(-8px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .zzz text { opacity: .8; }
}

/* Neustart vom Pilotprojekt */
.neustart-liste { margin: 8px 0 12px; padding-left: 18px; font-size: 14px; color: var(--text-leis); }
.neustart-liste li { margin: 4px 0; }
.warnig p + p { margin-top: 8px; }

/* Hauptpreis im Wettbüro */
.preis-karte {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 14px;
  align-items: center;
  margin: 0 0 12px;
  padding: 14px;
  border-radius: 16px;
  border: 2px solid #000;
  background: linear-gradient(135deg, #fff3c4, #ffd75e 55%, #f1b82c);
  color: #1d1406;
}
.preis-gutschein {
  position: relative;
  display: grid;
  align-content: space-between;
  aspect-ratio: 1.586;
  padding: 8px 9px;
  border-radius: 9px;
  background: linear-gradient(140deg, #ffffff 0%, #e9f1f4 45%, #c7dbe3 100%);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .25), inset 0 0 0 1px rgba(0, 0, 0, .12);
  transform: rotate(-6deg);
  overflow: hidden;
}
.preis-stab { position: absolute; right: 6px; bottom: 4px; width: 22px; height: 44px; }
.preis-name { position: relative; font-weight: 800; font-size: 11.5px; line-height: 1.1; color: #1d1406; }
.preis-wert { position: relative; font-family: var(--f-display); font-weight: 900; font-size: 22px; line-height: 1; color: #1d1406; }
.preis-text h2 { font-family: var(--f-display); font-weight: 900; font-size: 26px; margin: 0 0 4px; line-height: 1; }
.preis-text p { margin: 0 0 6px; font-size: 14.5px; line-height: 1.35; }
.preis-text .leis { color: #4a3a18; }
.preis-stand { padding-top: 6px; border-top: 1px solid rgba(0, 0, 0, .18); }
.leaderboard li.erschte { background: linear-gradient(90deg, rgba(255, 194, 26, .28), transparent 80%); }
.pokal { font-size: 20px; }

/* Push-Ystellige: Schalter */
.schalter {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--linie);
  cursor: pointer;
}
.schalter.haupt { border-bottom: 2px solid var(--text); }
.schalter-text b { display: block; font-size: 15px; font-weight: 700; line-height: 1.25; }
.schalter-text small { display: block; font-size: 12.5px; color: var(--text-leis); }
.schalter input {
  order: 2;
  appearance: none;
  -webkit-appearance: none;
  width: 46px;
  height: 28px;
  margin: 0;
  border-radius: 999px;
  border: 2px solid var(--text);
  background: var(--flaeche-2);
  position: relative;
  cursor: pointer;
  transition: background-color .2s;
}
.schalter input::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--text);
  transition: transform .2s;
}
.schalter input:checked { background: var(--gelb); border-color: #000; }
.schalter input:checked::after { transform: translateX(18px); background: #000; }
.schalter input:focus-visible { outline: 3px solid var(--mass); outline-offset: 2px; }
.push-liste { margin-bottom: 6px; }
.push-status { margin: 0 0 8px; font-weight: 700; font-size: 14px; }
.push-status.ok { color: var(--ok); }
.push-status.falsch { color: var(--alarm); }

/* Installations-Aaleitig */
.app-link { margin: 0 0 6px; padding: 10px 12px; border-radius: 10px; background: var(--flaeche-2); font-size: 16px; overflow-wrap: anywhere; }
.schritt { margin: 0 0 10px; padding-left: 22px; }
.schritt li { margin: 6px 0; padding-left: 4px; line-height: 1.4; }
.schritt li::marker { font-family: var(--f-display); font-weight: 900; }
.push-tabelle th small { display: block; font-weight: 600; color: var(--text-leis); font-size: 12.5px; }
.push-tabelle th { white-space: normal; width: 40%; }
.push-tabelle td { font-size: 13.5px; }

/* Rückfrog (z.B. vor em Aastupfe): ruhiger als d Warnig */
.frog { text-align: center; }
.frog .frog-symbol { font-size: 44px; line-height: 1; margin: 8px 0 0; text-align: center; }
.frog h2 { font-family: var(--f-display); font-weight: 900; font-size: 26px; line-height: 1.15; margin: 6px 0 10px; }
.frog p { text-align: left; margin: 0; }
.frog p + p { margin-top: 8px; }
.frog .knopf-reihe { margin-top: 16px; }
.schalter.gsperrt { opacity: .55; }
.schalter.gsperrt input { cursor: not-allowed; }

/* Realitäts-Check und Yygriff-Lischte im Tab «Pilot» */
.realitaet p { margin: 0 0 8px; }
.realitaet p.leis { margin: 10px 0 0; }
.yygriffe { margin-top: 12px; border-top: 1px solid var(--linie); }
.yygriffe summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; }
.yygriffe .log-liste { margin: 4px 0 8px; }
.regel input:disabled { opacity: .55; }

/* Aafrog an d Silya: si muess aanäh oder ablehne */
.vertretig-band.aafrog-silya { grid-template-columns: auto 1fr; }
.vertretig-band.aafrog-silya .knopf-reihe { grid-column: 1 / -1; margin: 2px 0 0; }
.vertretig-band.aafrog-silya .knopf-primaer { background: #000; color: var(--gelb); }

/* Prototyp: vorgspuelti Zyt */
.proto-zyt { display: flex; gap: 10px; align-items: center; margin: 6px 0 0; padding: 8px 12px; border-radius: 12px; border: 2px dashed #000; background: #fff3c4; color: #000; }
.proto-zyt[hidden] { display: none; }
.proto-zyt p { margin: 0; font-size: 13px; line-height: 1.3; flex: 1; }
.proto-zyt .knopf { flex: none; }

/* Haftungsausschluss im Tab «Pilot» */
.disclaimer { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--linie); font-size: 11.5px; line-height: 1.45; color: var(--text-leis); }

/* Haftungsausschluss bestätige bim erschte Login */
.disclaimer-gross { margin: 8px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--flaeche-2); font-size: 13px; line-height: 1.5; max-height: 42vh; overflow-y: auto; }
.disclaimer-check { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 0; text-align: left; font-size: 14px; font-weight: 700; line-height: 1.35; cursor: pointer; }
.disclaimer-check input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: #000; }
#disclaimer-ok:disabled { opacity: .45; cursor: not-allowed; }

/* Konto: Passwort ändere */
.passwort-form { display: grid; gap: 8px; margin: 6px 0 4px; }