/* ORDERMAN-Theme: abgeleitet von orderman.com (Raleway 900 für Titel, Open Sans für Text,
   Schwarz/Weiß/Hellgrau, Akzent Grün #51B948, eckige Buttons in Versalien). */
@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@700;900&family=Open+Sans:wght@400;600;700&display=swap");
:root {
  --pink: #000000;          /* Primäraktion: Schwarz */
  --magenta: #51B948;       /* Hover / Hervorhebung: Orderman-Grün */
  --teal: #51B948;
  --sand: #8A8A8A;
  --ink: #000000;
  --body: #555555;
  --label: #7A7A7A;
  --creme: #F6F6F6;
  --sand-bg: #EAEAEA;
  --card: #FFFFFF;
  --line: #D9D9D9;
  --q0: #51B948; --q0-bg: #EAF6E8;
  --q1: #000000; --q1-bg: #F6F6F6;
  --q2: #8A8A8A; --q2-bg: #EFEFEF;
  --q3: #2E7D32; --q3-bg: #E3F0E3;
  --q4: #333333; --q4-bg: #ECECEC;
  --q5: #A8D5A2; --q5-bg: #F1F8F0;
  --c0: #51B948; --c1: #000000; --c2: #8A8A8A; --c3: #2E7D32; --c4: #333333; --c5: #A8D5A2;
  --display: "Open Sans", system-ui, sans-serif;
  --mono: "Open Sans", system-ui, sans-serif;
}
h1, h2, .summary, .lobby h2, .qhead h2, .card h1, .wait h1, .done h1 { font-family: "Raleway", sans-serif; font-weight: 900; font-stretch: normal; font-variation-settings: normal; letter-spacing: 0; }
.cloud .w { font-family: "Raleway", sans-serif; font-weight: 900; font-stretch: normal; font-variation-settings: normal; }
.expanded { font-stretch: normal; font-variation-settings: normal; }
.eyebrow, .step, .total, .join .url, .join .code, .lobby .url, .lobby .code, .top .code, .count, .bar .val, .avg, .ai .meta, .admin-btn, .bar-ctl strong, .qnum { font-family: "Open Sans", sans-serif; letter-spacing: .08em; }
.eyebrow b, .title .eyebrow, .top .code b, .join .url, .lobby .url { color: #51B948; }
.btn, .opt, .send, .code, dialog, .panel, .note, .join, .card, .composer, .sessions a, .qrow, .bar-ctl, .toast, .bar .track, .bar .fill, .ai .themes li, .admin-bar, .col, .add-btn, textarea, input[type=text], dialog input, dialog select, dialog textarea { border-radius: 0 !important; }
.btn { text-transform: uppercase; letter-spacing: .06em; font-family: "Open Sans", sans-serif; font-weight: 600; border: 2px solid #000; background: #000; color: #fff; }
.btn:hover { background: #51B948; border-color: #51B948; color: #fff; }
.btn.ghost { background: transparent; color: #000; border-color: #000; }
.btn.ghost:hover { background: #000; color: #fff; }
.bar-ctl { background: #000; }
.bar-ctl .btn { border-color: #fff; background: #fff; color: #000; }
.bar-ctl .btn:hover { background: #51B948; border-color: #51B948; color: #fff; }
.bar-ctl .btn.ghost { background: transparent; color: #fff; }
.bar-ctl .btn.ghost:hover { background: #fff; color: #000; }
.bar-ctl .btn.ai-btn { background: #51B948; border-color: #51B948; color: #fff; }
.bar-ctl .btn.ai-btn:hover { background: #fff; color: #000; border-color: #fff; }
.ai { border-color: #51B948; }
.ai .eyebrow { color: #51B948; }
.ai .themes li { background: #EAF6E8; }
.ai .meta b { color: #51B948; }
.opt[aria-pressed=true] { border-color: #51B948; background: #EAF6E8; }
.opt[aria-pressed=true] .qnum { --qc: #51B948; }
.done .check { background: #51B948; border-radius: 50% !important; }
.wait .dots { color: #51B948; }
.top .logo, .card .logo { height: 22px; }
.top { background: #fff; border-bottom: 1px solid var(--line); }
:focus-visible { outline-color: #51B948; }