/* Game Show, Studio, Arcade. Local assets only: ready for classroom Wi-Fi. */
:root {
  --bg: #f5f4ee;
  --bg2: #ecebe3;
  --karte: #fffefa;
  --text: #19252a;
  --gedimmt: #646f70;
  --gelb: #f5d64d;
  --orange: #b85328;
  --rot: #b93648;
  --gruen: #167154;
  --blau: #326b9d;
  --ink: #182b30;
  --ink-text: #fffdf2;
  --line: #dcded5;
  --soft: #edeee7;
  --accent-text: #2a2816;
  --mint: #b8dfc8;
  --coral: #f4bba9;
  --shadow: 0 12px 32px #25322a08;
  --radius: 22px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg);
  color: var(--text);
  font: 16px/1.55 "Segoe UI",Arial,sans-serif;
  min-height: 100vh;
}

body[data-theme="studio"] {
  --bg: #f3f6fa;
  --bg2: #e9eef5;
  --karte: #fff;
  --text: #192b46;
  --gedimmt: #5a6b80;
  --gelb: #b8d5ff;
  --ink: #203a61;
  --line: #dbe3ee;
  --soft: #edf2f8;
  --mint: #d0e9e3;
  --coral: #f6d6ce;
  --accent-text: #173d74;
  --radius: 14px;
}

/* Campus: the Almost Know look. Calm navy, warm gold, serif headlines. */
body[data-theme="campus"] {
  --bg: #0e1626;
  --bg2: #132036;
  --karte: #17233a;
  --text: #edf0f6;
  --gedimmt: #a6b0c3;
  --gelb: #e9b949;
  --ink: #0a111f;
  --ink-text: #edf0f6;
  --line: #2a3853;
  --soft: #1f2c46;
  --mint: #a3d9c7;
  --coral: #f3b4a8;
  --accent-text: #1d1605;
  --rot: #f08c84;
  --gruen: #7fcfaa;
  --blau: #8fb5ee;
  --orange: #f0a85e;
  --shadow: 0 12px 40px #0005;
  --radius: 14px;
  --serif: "Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,Cambria,serif;
}

body[data-theme="campus"] :is(h1,h2,.brand strong) {
  font-family: var(--serif);
  letter-spacing: -.01em;
}

.brand-ak {
  gap: 10px;
}

/* Almost Know mark: an almost-closed circle and the gold dot that completes it. */
.ak-logo {
  width: 34px;
  height: 34px;
  flex: none;
  overflow: visible;
}

.ak-ring {
  fill: none;
  stroke: currentColor;
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 117;
  animation: ak-draw .9s cubic-bezier(.6,0,.2,1) both;
}

.ak-dot {
  fill: var(--gelb, #e9b949);
  transform-box: fill-box;
  transform-origin: center;
  animation: ak-click .45s cubic-bezier(.3,1.6,.5,1) .75s both;
}

@keyframes ak-draw {
  from { stroke-dashoffset: 117; }
}

@keyframes ak-click {
  from { opacity: 0; transform: translate(9px,9px) scale(.2); }
}

a:hover > .ak-logo .ak-dot {
  animation: ak-click .45s cubic-bezier(.3,1.6,.5,1) both;
}

@media (prefers-reduced-motion: reduce) {
  .ak-ring,.ak-dot { animation: none !important; }
}

.brand-word {
  font-family: var(--serif, Georgia, serif);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0;
}

.brand-word em {
  color: var(--gelb);
  font-style: normal;
}

body[data-theme="campus"] .highlight {
  background: none;
  color: var(--gelb);
}

body[data-theme="arcade"] {
  --bg: #111421;
  --bg2: #1c2032;
  --karte: #1d2335;
  --text: #f3f4ff;
  --gedimmt: #b4bbd1;
  --gelb: #def766;
  --ink: #0c1020;
  --ink-text: #f3f4ff;
  --line: #353d57;
  --soft: #282f46;
  --mint: #b0ebcf;
  --coral: #ffb5bf;
  --accent-text: #18250b;
  --rot: #ff8fa3;
  --gruen: #87dfb5;
  --blau: #87b9ff;
  --orange: #ffb585;
  --shadow: 0 12px 40px #0002;
  --radius: 18px;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

button,input,select,textarea {
  font: inherit;
}

button,a,input,select,textarea,summary {
  -webkit-tap-highlight-color: transparent;
}

button {
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 13px 20px;
  font-weight: 750;
  color: var(--accent-text);
  background: var(--gelb);
  cursor: pointer;
  transition: background .15s,transform .15s,box-shadow .15s;
}

button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 5px 14px #172a3010;
}

button:active:not(:disabled) {
  transform: translateY(1px);
}

button:disabled {
  opacity: .48;
  cursor: not-allowed;
}

button.sekundaer {
  color: var(--text);
  background: var(--soft);
  border-color: var(--line);
}

button.gefahr {
  color: var(--rot);
  background: transparent;
  border-color: currentColor;
}

button.voll {
  width: 100%;
}

button.compact {
  font-size: .8rem;
  padding: 8px 12px;
}

:focus-visible {
  outline: 3px solid var(--blau);
  outline-offset: 4px;
}

svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  vertical-align: middle;
}

[hidden],.versteckt {
  display: none!important;
}

h1,h2,h3 {
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -.035em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2rem,4vw,3.5rem);
}

h2 {
  font-size: 1.5rem;
}

h3 {
  font-size: 1.05rem;
}

p {
  overflow-wrap: anywhere;
}

.hinweis {
  color: var(--gedimmt);
  font-size: .875rem;
  line-height: 1.6;
}

.fehler {
  color: var(--rot);
  font-size: .86rem;
  line-height: 1.5;
  margin: 9px 0;
}

.fehler:empty {
  display: none;
}

.zentriert {
  text-align: center;
}

.gross {
  font-size: 2rem;
}

.gelb {
  color: var(--accent-text);
  background: var(--gelb);
  border-radius: 4px;
  padding: 0 .15em;
}

.eyebrow,.section-label,.projector-kicker {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .13em;
  font-weight: 750;
  color: var(--gedimmt);
}

.eyebrow {
  display: flex;
  gap: 9px;
  align-items: center;
}

.zentriert .eyebrow {
  justify-content: center;
}

.live-dot {
  width: 7px;
  height: 7px;
  background: var(--gruen);
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.site-header {
  max-width: 1320px;
  margin: 0 auto;
  padding: 25px 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--line);
}

.brand {
  display: flex;
  gap: 11px;
  align-items: center;
  text-decoration: none;
  font-size: .55rem;
  font-weight: 800;
  letter-spacing: .16em;
  line-height: 1.5;
}

.brand strong {
  display: block;
  font-size: 1.11rem;
  letter-spacing: -.045em;
  line-height: 1.08;
}

.brand-dot {
  color: var(--orange);
}

.brand-icon {
  display: grid;
  place-items: center;
  background: var(--gelb);
  color: var(--accent-text);
  width: 41px;
  height: 44px;
  border: 1px solid var(--text);
  border-radius: 11px;
  transform: rotate(-5deg);
}

.brand-icon svg {
  width: 26px;
  height: 26px;
}

.header-tools {
  display: flex;
  gap: 18px;
  align-items: center;
}

.connection-status {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .7rem;
  color: var(--gedimmt);
}

.connection-status:before {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  background: var(--orange);
  border-radius: 50%;
}

.connection-status.is-online:before {
  background: var(--gruen);
}

.connection-lost .site-header {
  border-bottom-color: var(--orange);
}

.appearance {
  position: relative;
}

.appearance-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 5px;
  background: none;
  color: var(--text);
  font-size: .76rem;
}

.appearance-toggle svg {
  width: 17px;
  height: 17px;
}

.appearance-menu {
  position: absolute;
  top: 42px;
  right: 0;
  width: 285px;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
  background: var(--karte);
  z-index: 100;
  box-shadow: 0 16px 50px #0002;
}

.appearance-menu>p {
  font-size: .8rem;
  font-weight: 700;
  margin: 0 0 10px;
}

.theme-option {
  display: flex;
  gap: 11px;
  align-items: center;
  width: 100%;
  padding: 10px 6px;
  border-radius: 8px;
  color: var(--text);
  text-align: left;
  background: none;
}

.theme-option small {
  display: block;
  color: var(--gedimmt);
  font-size: .72rem;
  font-weight: 400;
}

.theme-option strong {
  font-size: .83rem;
}

.theme-swatch {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 6px solid #f4d64d;
  background: #182b30;
}

.swatch-studio {
  border-color: #c8dcfb;
  background: #fff;
}

.swatch-arcade {
  border-color: #def766;
  background: #15192b;
}

.theme-check {
  margin-left: auto;
}

.sprach-wahl {
  display: flex;
  gap: 2px;
  border: 1px solid var(--line);
  padding: 3px;
  border-radius: 8px;
}

.sprach-wahl button {
  padding: 5px 8px;
  min-width: 34px;
  min-height: 30px;
  background: none;
  color: var(--gedimmt);
  font-size: .72rem;
  border-radius: 5px;
}

.sprach-wahl button.an {
  color: var(--karte);
  background: var(--text);
}

.container {
  max-width: 720px;
  margin: 0 auto;
  padding: 36px 28px 70px;
}

.container.join-view,.lehrer .container,.beamer .container {
  max-width: 1232px;
}

.karte {
  background: var(--karte);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  margin: 16px 0;
  box-shadow: var(--shadow);
}

label {
  display: block;
  color: var(--text);
  font-size: .75rem;
  font-weight: 650;
  margin-top: 17px;
}

input,select,textarea {
  display: block;
  width: 100%;
  padding: 12px 14px;
  margin-top: 7px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--bg);
  color: var(--text);
  /* 16px minimum: iOS Safari zooms the whole page into smaller inputs. */
  font-size: max(16px, .9rem);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

input:focus,select:focus,textarea:focus {
  outline: 2px solid var(--text);
  outline-offset: 1px;
}

input::placeholder,textarea::placeholder {
  color: var(--gedimmt);
  opacity: .65;
}

textarea {
  min-height: 135px;
  resize: vertical;
  font-family: Consolas,monospace;
  font-size: max(16px, .78rem);
}

/* Entry: an invitation, a seat, and a little know-how. */
.join-layout {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 8%;
  align-items: center;
  padding: 20px 0 43px;
}

.join-story h1 {
  font-size: clamp(2.8rem,4.7vw,4.35rem);
  line-height: 1.08;
  margin: 20px 0;
  letter-spacing: -.065em;
}

.highlight {
  background: linear-gradient(transparent 66%,var(--gelb) 66%,var(--gelb) 94%,transparent 94%);
}

.hero-description {
  color: var(--gedimmt);
  font-size: .97rem;
  max-width: 440px;
  line-height: 1.75;
}

.ladder-art {
  position: relative;
  height: 237px;
  max-width: 470px;
  padding-top: 20px;
  margin-top: 25px;
}

.art-caption {
  font-size: .56rem;
  letter-spacing: .16em;
  font-weight: 750;
  color: var(--gedimmt);
  display: block;
  margin-bottom: 14px;
}

.ladder-step {
  width: 76%;
  display: flex;
  align-items: center;
  gap: 15px;
  border-radius: 11px;
  padding: 13px 18px;
  height: 63px;
  border: 1px solid var(--line);
  font-size: .89rem;
  font-weight: 700;
}

.ladder-step small {
  display: block;
  font-size: .59rem;
  font-weight: 400;
  opacity: .65;
}

.ladder-top {
  position: relative;
  margin-left: 48px;
  background: var(--ink);
  color: var(--ink-text);
  transform: rotate(-4deg);
  z-index: 3;
  box-shadow: 0 7px 0 var(--bg);
}

.ladder-middle {
  margin-top: -2px;
  margin-left: 24px;
  background: var(--mint);
  color: #183e30;
  transform: rotate(-4deg);
  z-index: 2;
}

.ladder-bottom {
  margin-top: -2px;
  background: var(--karte);
  color: var(--gedimmt);
  transform: rotate(-4deg);
}

.ladder-rank {
  font-size: 1.4rem;
  opacity: .6;
  letter-spacing: -.08em;
}

.ladder-symbol {
  color: var(--gelb);
  margin-left: auto;
}

.ladder-arrow {
  margin-left: auto;
  font-size: 1.45rem;
}

.art-sticker {
  position: absolute;
  right: 3px;
  bottom: 20px;
  transform: rotate(8deg);
  background: var(--gelb);
  color: var(--accent-text);
  border: 1px solid var(--text);
  border-radius: 10px;
  box-shadow: 3px 3px 0 var(--text);
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 12px;
  font-size: .64rem;
}

.art-sticker svg {
  width: 18px;
}

.join-card {
  padding: 32px;
  margin: 0;
  box-shadow: 7px 7px 0 var(--bg2);
}

.join-card-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}

.ticket-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--soft);
}

.join-card h2 {
  font-size: 1.9rem;
  margin-bottom: 12px;
}

.join-card .hinweis {
  max-width: 320px;
  font-size: .83rem;
}

.code-input {
  font-size: 1.75rem;
  font-weight: 750;
  letter-spacing: .32em;
  padding: 12px 16px;
  text-transform: uppercase;
}

.join-card label {
  margin-top: 19px;
}

.join-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 24px;
  font-size: .85rem;
  padding: 15px 18px;
}

.join-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: .72rem;
  color: var(--gedimmt);
  margin: 17px 0 24px;
}

.join-note svg {
  width: 14px;
  height: 14px;
}

.host-link {
  border-top: 1px solid var(--line);
  padding-top: 17px;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  font-size: .72rem;
  color: var(--gedimmt);
  overflow-wrap: anywhere;
}

.host-link a {
  color: var(--text);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
}

/* Inline SVG icons (Experience.icon) size to the surrounding text. */
.ladder-arrow svg,.auf svg,.ab svg,.reveal-badge svg,.answer-check svg,.bounty-mark svg,
.mitspieler svg,.site-footer a svg,.host-link a svg {
  width: 1em;
  height: 1em;
  vertical-align: -.15em;
}

.ladder-arrow svg {
  width: 1.2em;
  height: 1.2em;
}

.answer-check svg {
  stroke-width: 2.6;
}

.bounty-mark {
  color: var(--gelb);
}

.section-heading {
  display: flex;
  align-items: center;
  gap: 20px;
}

.section-heading .hinweis {
  font-size: .72rem;
}

.section-line {
  flex: 1;
  border-top: 1px solid var(--line);
}

.rules-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 28px;
  margin: 25px 0;
}

.rules-grid article {
  position: relative;
  padding-left: 46px;
}

.rule-icon {
  position: absolute;
  left: 0;
  top: 0;
  width: 33px;
  height: 33px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--gelb);
  color: var(--accent-text);
}

.rule-icon svg {
  width: 18px;
  height: 18px;
}

.rule-icon.mint {
  background: var(--mint);
  color: #183e30;
}

.rule-icon.coral {
  background: var(--coral);
  color: #61352b;
}

.rules-grid h3 {
  font-size: .9rem;
  margin: 2px 0 7px;
  letter-spacing: -.02em;
}

.rules-grid p {
  font-size: .76rem;
  color: var(--gedimmt);
  line-height: 1.7;
}

.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  margin-top: 34px;
  padding-top: 20px;
  font-size: .72rem;
  color: var(--gedimmt);
}

.site-footer a {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
}

.kaufi-signature {
  display: flex;
  align-items: center;
  gap: 9px;
}

.kaufi-signature img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 28%;
  border: 2px solid var(--gelb);
}

.champion-title {
  color: var(--gelb);
  font-size: .85rem;
  font-weight: 700;
}

/* Student game surface. */
.lobby-welcome {
  padding: 38px 25px;
}

.welcome-icon {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--mint);
  color: #183e30;
  margin: 0 auto 22px;
}

.welcome-icon svg {
  width: 32px;
  height: 32px;
}

.lobby-welcome h1 {
  font-size: 2.2rem;
  margin: 15px 0;
}

.lobby-facts {
  display: flex;
  gap: 15px;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  margin: 25px 0;
}

.lobby-rules {
  margin: 34px 0;
}

.lobby-rules .rules-grid {
  grid-template-columns: 1fr;
  gap: 22px;
}

.player-hud {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
  font-size: .84rem;
}

.player-identity,.wallet {
  display: flex;
  align-items: center;
  gap: 9px;
}

.mini-avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  background: var(--mint);
  color: #183e30;
  border-radius: 50%;
  font-weight: 750;
}

.wallet {
  background: var(--karte);
  border: 1px solid var(--line);
  border-radius: 30px;
  padding: 7px 13px;
}

.wallet svg {
  width: 18px;
  color: var(--orange);
}

.wallet small {
  color: var(--gedimmt);
}

.player-hud .wallet {
  margin-left: auto;
}

.sound-toggle {
  flex: none;
  white-space: nowrap;
}

.player-question {
  padding: 26px;
}

.frage-text {
  font-size: 1.65rem;
  line-height: 1.3;
  letter-spacing: -.035em;
  font-weight: 750;
  margin: 25px 0;
  overflow-wrap: anywhere;
}

.antworten {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 20px;
}

.antwort {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  padding: 18px 16px;
  min-height: 80px;
  border-radius: 12px;
  width: 100%;
  text-align: left;
  color: var(--text);
  background: var(--bg);
  font-weight: 700;
  font-size: .92rem;
  box-shadow: none;
}

.answer-letter {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  font-size: .8rem;
  border-radius: 8px;
  background: #f4bba9;
  color: #56332a;
}

.a1 .answer-letter {
  background: #bfd6ef;
  color: #193e6b;
}

.a2 .answer-letter {
  background: #b8dfc8;
  color: #164932;
}

.a3 .answer-letter {
  background: #f5de8c;
  color: #5b4614;
}

.answer-copy {
  overflow-wrap: anywhere;
  min-width: 0;
}

.answer-check {
  margin-left: auto;
  font-size: 1.3em;
}

.antwort.gewaehlt,.antwort.richtig {
  outline: 2px solid var(--gruen);
  outline-offset: 1px;
  background: var(--soft);
  opacity: 1;
}

.antwort.gewaehlt {
  outline-color: var(--blau);
}

.antwort:disabled {
  opacity: .6;
}

.antwort.gewaehlt:disabled {
  opacity: 1;
}

.antwort.falsch {
  opacity: .34;
}

.timer-caption {
  display: flex;
  justify-content: space-between;
  color: var(--gedimmt);
  font-size: .7rem;
  margin-top: 18px;
}

.timer-caption strong {
  color: var(--text);
  font-size: .9rem;
  font-variant-numeric: tabular-nums;
}

.timerleiste {
  height: 6px;
  background: var(--soft);
  border-radius: 8px;
  overflow: hidden;
  margin: 9px 0 17px;
}

.timerleiste>div {
  height: 100%;
  background: var(--gruen);
  width: 100%;
  border-radius: 8px;
}

.timerleiste>div.urgent {
  background: var(--rot);
}

.tisch-leiste {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 10px;
  font-size: .72rem;
}

.tisch-label {
  color: var(--gedimmt);
  margin-right: 5px;
}

.mitspieler {
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 20px;
}

.mitspieler.fertig {
  color: var(--gruen);
}

.invest-knopf,.schraube-knopf {
  width: 100%;
  margin-top: 12px;
  font-size: .8rem;
  padding: 11px;
  border: 1px solid var(--line);
}

.invest-knopf {
  background: var(--mint);
  color: #183e30;
}

.schraube-knopf {
  background: var(--coral);
  color: #61352b;
}

.invest-badge,.geschraubt-banner {
  padding: 11px 14px;
  border-radius: 10px;
  margin-top: 12px;
  background: var(--mint);
  color: #183e30;
  font-size: .83rem;
  font-weight: 650;
}

.geschraubt-banner {
  background: var(--coral);
  color: #61352b;
}

.investition-banner {
  background: var(--mint);
  color: #183e30;
}

.punkte-pop {
  font-size: 3rem;
  font-weight: 850;
  color: var(--gruen);
  letter-spacing: -.05em;
}

.kommentar {
  background: var(--soft);
  border-left: 3px solid var(--orange);
  padding: 14px;
  border-radius: 5px;
  margin: 14px 0;
  font-size: .88rem;
}

.liga-block {
  margin: 13px 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
}

.liga-titel {
  padding: 11px 17px;
  font-size: .85rem;
  background: var(--soft);
  font-weight: 750;
}

.liga-block:first-child .liga-titel {
  background: var(--gelb);
  color: var(--accent-text);
}

.liga-mitglieder {
  padding: 7px 17px;
  background: var(--karte);
}

.liga-mitglieder>div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  font-size: .85rem;
  border-bottom: 1px solid var(--line);
}

.liga-mitglieder>div:last-child {
  border: 0;
}

.liga-mitglieder>div>span:last-child {
  white-space: nowrap;
}

.auf {
  color: var(--gruen);
  font-weight: 700;
}

.ab {
  color: var(--rot);
  font-weight: 700;
}

.bleibt,.offline {
  color: var(--gedimmt);
}

.namens-wolke {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
}

.namens-wolke>span {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 40px;
  padding: 7px 13px;
  background: var(--bg);
  font-size: .83rem;
}

.namens-wolke>.is-me {
  background: var(--mint);
  color: #183e30;
  border-color: transparent;
}

/* Host console. */
.page-heading {
  margin: 10px 0 30px;
}

.page-heading h1 {
  margin: 12px 0;
}

.page-heading>p:last-child {
  color: var(--gedimmt);
  max-width: 670px;
  font-size: .95rem;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0,1.45fr) minmax(320px,1fr);
  gap: 25px;
  align-items: start;
}

.dashboard-grid>.host-main,.dashboard-grid>.host-sidebar {
  min-width: 0;
}

.dashboard-grid .karte:first-child {
  margin-top: 0;
}

.host-login {
  max-width: 440px;
  padding: 30px;
}

.host-login .hinweis {
  margin-top: 20px;
}

.host-login button {
  margin-top: 20px;
}

.panel-heading {
  margin-bottom: 20px;
}

.panel-heading h2 {
  margin: 8px 0 9px;
}

.host-live-panel>.panel-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.status-pill {
  display: inline-block;
  background: var(--soft);
  color: var(--text);
  border: 1px solid var(--line);
  padding: 5px 12px;
  border-radius: 30px;
  font-size: .72rem;
  font-weight: 700;
}

.host-join {
  display: flex;
  gap: 18px;
  justify-content: space-between;
  align-items: center;
}

.host-code {
  font-size: 3.5rem;
  font-weight: 850;
  letter-spacing: .14em;
  line-height: 1.25;
}

.host-qr {
  width: 108px;
  height: 108px;
  border-radius: 9px;
  border: 1px solid var(--line);
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 10px;
  margin: 24px 0;
}

.stat-card {
  border: 1px solid var(--line);
  padding: 15px;
  border-radius: 12px;
}

.stat-card strong {
  display: block;
  font-size: 1.6rem;
  line-height: 1.3;
}

.stat-card small {
  font-size: .9rem;
  color: var(--gedimmt);
}

.stat-card span {
  font-size: .72rem;
  color: var(--gedimmt);
}

.button-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.button-row button {
  font-size: .8rem;
}

.text-link {
  color: var(--text);
  font-weight: 700;
  font-size: .78rem;
}

.host-controls {
  padding-top: 24px;
  margin-top: 10px;
  border-top: 1px solid var(--line);
}

.action-hint {
  flex-basis: 100%;
}

.host-question {
  background: var(--soft);
  border-radius: 12px;
  padding: 18px;
  margin-top: 22px;
}

.host-question .panel-heading {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.host-question h3 {
  font-size: 1.15rem;
  line-height: 1.4;
}

.host-question p {
  margin-top: 10px;
}

progress {
  width: 100%;
  height: 7px;
  accent-color: var(--gruen);
  border: 0;
  border-radius: 8px;
  overflow: hidden;
  margin: 8px 0;
  background: var(--line);
}

progress::-webkit-progress-bar {
  background: var(--line);
}

progress::-webkit-progress-value {
  background: var(--gruen);
}

.preset-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 6px;
  margin: 20px 0;
}

.preset-grid .preset {
  padding: 12px 5px;
  font-size: .7rem;
  border-radius: 10px;
  background: var(--bg);
}

.preset strong {
  display: block;
  margin-bottom: 5px;
}

.preset span {
  display: block;
  font-size: .72rem;
  font-weight: 400;
  color: var(--gedimmt);
}

.preset-grid .preset.an {
  background: var(--gelb);
  color: var(--accent-text);
  border-color: var(--gelb);
}

.preset.an span {
  color: inherit;
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 9px;
}

.field-grid label {
  min-height: 2.8em;
  font-size: .75rem;
}

.setup-summary {
  background: var(--soft);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: .7rem;
  margin: 14px 0 6px;
}

.setup-panel .hinweis {
  font-size: .72rem;
}

.setup-panel form>button {
  margin-top: 20px;
}

.checkbox-field {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  line-height: 1.5;
}

.checkbox-field input {
  width: 16px;
  flex-shrink: 0;
  margin-top: 3px;
  accent-color: var(--gruen);
}

.checkbox-field small {
  display: block;
  margin-top: 4px;
}

.disclosure-panel {
  padding: 20px;
}

summary {
  cursor: pointer;
  font-weight: 750;
  font-size: .9rem;
}

details[open]>summary {
  margin-bottom: 24px;
}

.import-format {
  display: block;
  padding: 10px;
  font-size: .75rem;
  white-space: normal;
  overflow-wrap: anywhere;
  background: var(--soft);
  border-radius: 7px;
  margin-top: 10px;
}

.launch-guide {
  background: var(--ink);
  color: var(--ink-text);
  padding: 34px;
}

.launch-guide .eyebrow {
  color: var(--mint);
}

.launch-guide h2 {
  font-size: 2rem;
  margin: 14px 0 22px;
}

.launch-guide .text-link {
  color: var(--ink-text);
}

.step-list {
  list-style: none;
  counter-reset: steps;
  margin: 25px 0;
}

.step-list li {
  counter-increment: steps;
  padding-left: 43px;
  position: relative;
  margin-bottom: 24px;
  font-size: .85rem;
}

.step-list li:before {
  content: counter(steps,decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 750;
  color: var(--gelb);
  font-size: 1.15rem;
}

.step-list p {
  color: #b6c4c3;
  font-size: .8rem;
  line-height: 1.65;
  margin-top: 6px;
}

.host-roster {
  list-style: none;
}

.host-roster li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: .83rem;
}

.host-roster li:last-child {
  border-bottom: 0;
}

.roster-name {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.host-roster small {
  display: block;
  font-size: .72rem;
  color: var(--gedimmt);
}

.host-avatar {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 33px;
  height: 33px;
  background: var(--soft);
  border-radius: 50%;
  font-weight: 750;
}

.host-roster button {
  font-size: .72rem;
  padding: 6px 9px;
}

.roster-score {
  white-space: nowrap;
}

.roster-online {
  color: var(--gruen)!important;
}

.roster-help {
  margin-top: 14px;
}

.empty-state {
  padding: 20px 0;
  color: var(--gedimmt);
  font-size: .9rem;
}

.notice {
  padding: 15px 20px;
  border-radius: 12px;
  margin-bottom: 20px;
  background: var(--soft);
  font-size: .85rem;
}

.notice-success {
  color: var(--gruen);
}

.notice-error {
  color: var(--rot);
}

table.rangliste {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

table.rangliste td,table.rangliste th {
  padding: 12px 8px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  font-size: .93rem;
}

table.rangliste th {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--gedimmt);
}

table.rangliste td:last-child,table.rangliste th:last-child {
  text-align: right;
}

.rank-number {
  color: var(--gedimmt);
  font-size: .8rem;
}

/* Projector: large type, readable contrast and room for the whole class. */
.beamer .container {
  padding-top: 28px;
  padding-bottom: 90px;
}

.beamer-spalten {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}

.projector-hero {
  margin: 10px 0 28px;
}

.projector-hero h1 {
  font-size: clamp(2rem,4.2vw,3.65rem);
  margin: 12px 0;
}

.projector-hero>p,.projector-hero>div>p:not(.projector-kicker) {
  color: var(--gedimmt);
  font-size: 1rem;
}

.projector-kicker {
  display: flex;
  align-items: center;
  gap: 9px;
}

.zentriert .projector-kicker {
  justify-content: center;
}

.projector-lobby-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.projector-hero-mark {
  font-size: 4rem;
  line-height: 1;
  font-weight: 850;
  color: var(--text);
  background: var(--gelb);
  padding: 14px 23px;
  border-radius: 20px;
  transform: rotate(8deg);
}

.projector-lobby {
  grid-template-columns: 380px minmax(0,1fr);
}

.projector-lobby .karte {
  margin: 0;
}

.projector-join {
  text-align: center;
  background: var(--ink);
  color: var(--ink-text);
  padding: 28px;
}

.projector-join h2 {
  font-size: 1.35rem;
}

.projector-join img {
  width: 220px;
  height: 220px;
  max-width: 100%;
  background: #fff;
  padding: 10px;
  border-radius: 15px;
  margin: 22px auto;
}

.projector-join .projector-kicker {
  color: #b6c4c3;
  justify-content: center;
}

.beitritts-code {
  font-size: 3.2rem;
  font-weight: 850;
  letter-spacing: .18em;
  color: var(--gelb);
  padding-left: .18em;
  line-height: 1.4;
}

.join-address {
  font-size: .72rem;
  color: #b6c4c3;
  margin-top: 9px;
  overflow-wrap: anywhere;
}

.projector-roster {
  min-height: 480px;
  display: flex;
  flex-direction: column;
}

.roster-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 25px;
}

.roster-heading h2 {
  margin-top: 10px;
  font-size: 1.6rem;
}

.roster-count {
  font-size: 3.5rem;
  font-weight: 800;
  color: var(--gedimmt);
  opacity: .4;
  line-height: 1;
  letter-spacing: -.08em;
}

.projector-roster .namens-wolke {
  justify-content: flex-start;
}

.player-avatar {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  background: var(--gelb);
  color: var(--accent-text);
  border-radius: 50%;
  font-size: .7rem;
  text-transform: uppercase;
}

.player-avatar.avatar-1 {
  background: var(--mint);
  color: #183e30;
}

.player-avatar.avatar-2 {
  background: var(--coral);
  color: #61352b;
}

.player-avatar.avatar-3 {
  background: #bfd6ef;
  color: #193e6b;
}

.namens-wolke .player-chip {
  padding: 6px 12px 6px 6px;
}

.player-offline {
  opacity: .55;
}

.roster-footer {
  margin-top: auto;
  padding-top: 24px;
  color: var(--gedimmt);
  font-size: .8rem;
}

.roster-empty {
  color: var(--gedimmt);
  padding: 22px 10px;
}

.roster-empty>svg {
  width: 4rem;
  height: 4rem;
  color: var(--line);
}

.roster-empty .hinweis {
  margin-top: 10px;
}

.projector-lock {
  color: var(--rot);
  font-size: .8rem;
  margin-bottom: 14px;
}

.projector-waiting {
  text-align: center;
  padding: 35px 35px 60px;
  margin-top: 20px;
  background: var(--ink);
  color: var(--ink-text);
  border-radius: var(--radius);
}

.projector-waiting .projector-kicker {
  justify-content: center;
  color: var(--mint);
}

.projector-waiting>p {
  color: #b6c4c3;
}

.projector-waiting h1 {
  max-width: 740px;
  margin: 25px auto;
  font-size: clamp(2.3rem,5vw,4.4rem);
}

.projector-wait-mark {
  color: var(--gelb);
  font-size: 5rem;
  letter-spacing: -.15em;
  font-weight: 900;
  line-height: 1;
  transform: rotate(-8deg);
  padding: 30px 0 5px;
}

.projector-wait-status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid #526063;
  border-radius: 25px;
  padding: 10px 20px;
  font-size: .8rem;
  margin: 30px 0 15px;
}

.projector-waiting .hinweis {
  font-size: .78rem;
}

.projector-leagues {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 20px;
}

.projector-question {
  padding: 35px 40px;
}

.question-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}

.question-number {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--gedimmt);
  font-weight: 700;
}

.question-number>span {
  padding: 0 12px;
  opacity: .5;
}

.question-clock {
  font-size: 1.5rem;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}

.is-urgent {
  color: var(--rot);
}

.projector-question .frage-text {
  font-size: clamp(1.6rem,3.3vw,3rem);
  margin: 35px 0;
  max-width: 1000px;
}

.projector-question .antwort {
  min-height: 93px;
  font-size: 1.1rem;
  padding: 20px;
}

.projector-question .answer-letter {
  width: 42px;
  height: 42px;
  font-size: 1.05rem;
}

.answer-status {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  margin-top: 30px;
  font-size: .75rem;
  color: var(--gedimmt);
}

.answer-progress {
  height: 4px;
  background: var(--soft);
  border-radius: 6px;
  overflow: hidden;
  margin-top: 10px;
}

.answer-progress-fill {
  height: 100%;
  background: var(--gruen);
}

.reveal-badge {
  background: var(--mint);
  color: #183e30;
  border-radius: 30px;
  padding: 8px 16px;
  font-size: .8rem;
}

.projector-ranking {
  margin-top: 0;
}

.projector-ranking h2 {
  margin-top: 8px;
}

.projector-finale {
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--ink-text);
  padding: 30px 35px 0;
  overflow: hidden;
  margin-bottom: 30px;
}

.projector-finale .projector-kicker {
  color: var(--mint);
}

.projector-finale .projector-hero>p {
  color: #c8d2cf;
}

.podium {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 15px;
  margin: 30px auto 0;
  max-width: 850px;
}

.podium .platz {
  width: 30%;
  min-width: 0;
  padding: 20px 15px 0;
  background: #334649;
  color: var(--ink-text);
  text-align: center;
  border-radius: 15px 15px 0 0;
}

.podium .p1 {
  background: var(--gelb);
  color: var(--accent-text);
  padding-top: 30px;
}

.podium .p3 {
  background: #293c3f;
}

.podium-medal {
  font-size: 2rem;
}

.podium .name {
  font-size: 1.4rem;
  font-weight: 800;
  margin: 8px 0;
  overflow-wrap: anywhere;
}

.podium-score {
  font-size: 1.15rem;
}

.podium-rank {
  font-size: 3.2rem;
  line-height: 1.4;
  font-weight: 850;
  opacity: .45;
}

.podium .p1 .podium-rank {
  font-size: 5rem;
}

.podium .p3 .podium-rank {
  font-size: 2rem;
}

.musik-knopf,.fullscreen-knopf {
  position: fixed;
  bottom: 20px;
  z-index: 50;
  padding: 10px 15px;
  font-size: .73rem;
  border-radius: 30px;
  border: 1px solid var(--line);
  background: var(--karte);
  color: var(--text);
  box-shadow: var(--shadow);
}

.musik-knopf {
  right: 25px;
}

.musik-knopf.an {
  background: var(--gelb);
  color: var(--accent-text);
}

.fullscreen-knopf {
  left: 25px;
}

.kaufi-peek {
  display: none;
}

body[data-theme="arcade"] .highlight {
  background: none;
  color: var(--gelb);
}

@media(min-width:761px) and (max-height:850px) {
  .beamer .site-header {
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .beamer .container {
    padding-top: 20px;
    padding-bottom: 65px;
  }

  .projector-hero {
    margin: 0 0 20px;
  }

  .projector-hero h1 {
    font-size: 2.75rem;
  }

  .projector-join {
    padding: 20px;
  }

  .projector-join img {
    width: 174px;
    height: 174px;
    margin: 16px auto;
  }

  .beitritts-code {
    font-size: 2.8rem;
  }

  .projector-lobby {
    align-items: stretch;
  }

  .projector-roster {
    min-height: 0;
  }

  .projector-question {
    padding: 25px 32px;
  }

  .projector-question .frage-text {
    font-size: 2.15rem;
    margin: 25px 0;
  }

  .projector-question .antwort {
    min-height: 75px;
  }
}

@media(min-width:1400px) {
  .container.join-view {
    padding-top: 55px;
  }

  .join-layout {
    padding-bottom: 50px;
  }
}

@media(max-width:1000px) {
  .join-layout {
    gap: 5%;
  }

  .join-card {
    padding: 25px;
  }

  .join-story h1 {
    font-size: 3.1rem;
  }

  .dashboard-grid {
    grid-template-columns: minmax(0,1.15fr) minmax(310px,1fr);
    gap: 18px;
  }

  .dashboard-grid .karte {
    padding: 21px;
  }

  .projector-lobby {
    grid-template-columns: 320px 1fr;
  }
}

@media(max-width:760px) {
  .site-header {
    padding: 17px 20px;
  }

  .header-tools {
    gap: 10px;
  }

  .connection-status {
    font-size: 0;
    gap: 0;
  }

  .connection-status:before {
    width: 7px;
    height: 7px;
  }

  .container {
    padding: 25px 20px 50px;
  }

  .join-layout {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 0 0 35px;
  }

  .join-story h1 {
    font-size: clamp(2.6rem,8vw,3.4rem);
    margin: 15px 0;
  }

  .hero-description {
    max-width: 100%;
    font-size: .88rem;
  }

  .ladder-art {
    display: none;
  }

  .join-card {
    padding: 26px;
  }

  .join-card-heading {
    margin-bottom: 17px;
  }

  .join-card h2 {
    font-size: 1.65rem;
  }

  .rules-grid {
    gap: 20px;
    grid-template-columns: 1fr;
  }

  .section-heading .hinweis {
    display: none;
  }

  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .host-code {
    font-size: 3rem;
  }

  .page-heading {
    margin: 0 0 25px;
  }

  .beamer-spalten,.projector-lobby {
    grid-template-columns: 1fr;
  }

  .projector-hero-mark {
    display: none;
  }

  .projector-roster {
    min-height: 300px;
  }

  .projector-question {
    padding: 25px;
  }

  .projector-leagues {
    grid-template-columns: 1fr;
  }

  .projector-waiting {
    padding: 28px 22px;
  }

  .projector-waiting h1 {
    font-size: 2.8rem;
  }

  .projector-hero h1 {
    font-size: 2.35rem;
  }

  .projector-finale {
    padding: 25px 16px 0;
  }

  .podium {
    gap: 7px;
  }

  .podium .platz {
    width: 33.33%;
    padding-left: 8px;
    padding-right: 8px;
  }

  .podium .name {
    font-size: .96rem;
  }

  .podium-score {
    font-size: .9rem;
  }

  .podium .p1 .podium-rank {
    font-size: 4rem;
  }
}

@media(max-width:450px) {
  .site-header {
    padding: 15px 16px;
    gap: 10px;
  }

  .brand {
    font-size: .42rem;
    gap: 8px;
  }

  .brand strong {
    font-size: .86rem;
  }

  .brand-icon {
    width: 32px;
    height: 36px;
  }

  .brand-icon svg {
    width: 21px;
  }

  .header-tools {
    gap: 8px;
  }

  .appearance-toggle {
    padding: 5px 2px;
  }

  .appearance-toggle>span {
    display: none;
  }

  .sprach-wahl button {
    padding: 5px 6px;
    font-size: .7rem;
  }

  .container {
    padding: 24px 16px 45px;
  }

  .join-story .eyebrow {
    font-size: .7rem;
  }

  .join-card {
    padding: 23px;
  }

  .join-note {
    font-size: .7rem;
  }

  .join-story h1 {
    font-size: 2.65rem;
  }

  .appearance-menu {
    right: -65px;
  }

  .karte {
    padding: 23px;
  }

  .antworten {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .antwort {
    min-height: 66px;
    padding: 13px;
  }

  .player-question .frage-text {
    font-size: 1.4rem;
    margin: 20px 0;
  }

  .player-question>.hinweis {
    font-size: .7rem;
  }

  .player-hud {
    font-size: .74rem;
  }

  .wallet small {
    display: none;
  }

  .tisch-leiste {
    font-size: .7rem;
  }

  .question-meta {
    align-items: flex-start;
  }

  .question-number {
    font-size: .7rem;
  }

  .question-number>span {
    padding: 0 5px;
  }

  .question-clock {
    font-size: 1rem;
    white-space: nowrap;
  }

  .answer-status {
    flex-direction: column;
    gap: 4px;
  }

  .beamer .container {
    padding-bottom: 85px;
  }
}

@media(max-width:450px) {
  .join-story h1 {
    font-size: 2.1rem;
  }

  .hero-description {
    font-size: .83rem;
  }
}

@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation: none!important;
    transition: none!important;
    scroll-behavior: auto!important;
  }
}

/* In-app teacher sign-in (cloud) */
.cloud-login form {
  display: grid;
  gap: 8px;
}

.cloud-login label {
  margin-top: 6px;
  font-size: .85rem;
  font-weight: 700;
}

.cloud-login form > p {
  color: var(--gedimmt);
}

.cloud-login .link-button {
  justify-self: center;
  margin-top: 6px;
  padding: 6px 8px;
  border: 0;
  background: none;
  color: var(--gedimmt);
  font-size: .85rem;
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cloud-login .link-button:hover {
  color: var(--text);
}

.auth-or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 2px;
  color: var(--gedimmt);
  font-size: .8rem;
}

.auth-or::before,.auth-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.google-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.google-g {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  color: #4285f4;
  font: 800 .85rem/1 Arial,sans-serif;
}

.auth-info {
  padding: 10px 12px;
  border-radius: 10px;
  background: #7fcfaa1f;
  color: var(--gruen) !important;
  font-size: .88rem;
}