/* ═══════════════════════════════════════════════════════════════════
   DFQ Theme 2 — reines Design, keine Logik.
   Nach theme90.css laden. app.js bleibt unveraendert.
   Grafiken: /ui/panel-a.png  /ui/panel-b.png  /ui/plate-a.png
             /ui/plate-b.png  /ui/gold-plate.png  /ui/dfq-logo-new.png
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --gold: #f2a900;
  --gold-dim: #b87d05;
  --olive: #545a2c;
  --olive-lit: #7c8050;
  --ink: #000;
  --panel: #070905;
  --panel-2: #0c0e09;
  --line: #2b3025;
  --text: #efeee6;
  --text-dim: #b9bdac;
  --gutter: 6px;
  --frame: url("/ui/panel-a.png");
  --plate: url("/ui/plate-a.png");
  --title: url("/ui/plate-b.png");
  --goldbtn: url("/ui/gold-plate.png");
}

/* ── Grundlage ──────────────────────────────────────────────────── */
body {
  background: var(--s-0, #050603);
  font-family: Oswald, sans-serif;
  font-weight: 400;
  color: var(--text);
}
body:before {
  background-image: repeating-linear-gradient(0deg, rgba(84, 90, 44, 0.07) 0 1px, transparent 1px 4px);
  background-size: auto;
  opacity: 1;
}
#app {
  max-width: 480px;
  display: flex;
  flex-direction: column;
  background: var(--s-0, #000);
  border-inline: 1px solid var(--line);
}
.content {
  flex: 1;
  padding: 4px var(--gutter) 12px;
}
.content.auth-content,
.content.legal-content {
  padding-inline: var(--gutter);
}
.brk::after,
.btn.brk::after,
.seg button.brk::after {
  content: none !important;
}

/* Gemeinsamer Plattenrahmen fuer alle Karten */
.panel,
.card,
.roundcard,
.elite-card,
.regel,
.sperre,
.me-card,
.coach-panel,
.coach-status,
.coach-auftrag,
.coach-phase,
.cropper-box,
.claim-result {
  border: 16px solid transparent;
  border-image: var(--frame) 150 fill / 16px stretch;
  background: none;
  box-shadow: none;
  padding: 6px;
  margin-bottom: 6px;
}
.panel .card,
.card .card,
.panel .panel,
.coach-panel .card {
  border: 1px solid var(--line);
  border-image: none;
  background: var(--panel);
  padding: 10px;
}
.card + .card {
  margin-top: 6px;
}

/* ── Titel ──────────────────────────────────────────────────────── */
.section-title,
.content .section-title {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 62px;
  margin: 0 0 4px;
  padding: 0 18px;
  background: var(--title) center / 100% 100% no-repeat;
  font-family: Gunplay, Oswald, sans-serif;
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--text);
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.7);
  text-align: center;
}
.section-title:after {
  content: none;
}
.head-row {
  display: block;
  margin: 0;
}
.head-row small {
  display: block;
  text-align: center;
  margin: 4px 0 6px;
  font-family: "Share Tech Mono", monospace;
  font-size: 11px;
  color: var(--gold-text, var(--gold));
}
.eyebrow-rule {
  margin: 12px 0 4px;
  font-family: "Share Tech Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--gold-text, var(--gold));
}
.panel .panel-title,
.panel h1 {
  font-family: Gunplay, Oswald, sans-serif;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--text);
  margin: 0 0 2px;
}
.panel .panel-sub {
  font-family: Oswald, sans-serif;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-dim);
  margin: 0 0 10px;
}
.panel-kicker {
  font-family: "Share Tech Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--gold-text, var(--gold));
}
.regel h2,
.sperre h2,
.cropper-box h2,
.coach-status-zeile strong {
  display: flex;
  align-items: center;
  min-height: 28px;
  margin: 0 0 6px;
  padding: 0 12px;
  background: linear-gradient(180deg, #4a4f27, #545a2c);
  border: 1px solid var(--b-1, #05070a);
  box-shadow: inset 1px 1px 0 #7c8050;
  font-family: Gunplay, Oswald, sans-serif;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--text);
}

/* ── Fliesstext ─────────────────────────────────────────────────── */
.notice,
.coach-hinweis,
.regel li,
.regel p,
.sperre p,
.legal p {
  font-family: Oswald, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: 0;
  text-transform: none;
  color: var(--c-prim, #d5d8cb);
}
.regel p {
  color: var(--text-dim);
}
.regel li b {
  font-family: Gunplay, Oswald, sans-serif;
  font-weight: 400;
  color: var(--gold-text, var(--gold));
}
.regel ul {
  padding-left: 18px;
}
.regel,
.sperre {
  border-left-width: 16px;
}

/* ── Felder ─────────────────────────────────────────────────────── */
.fld {
  margin-bottom: 8px;
}
.fld > label,
.field label {
  font-family: "Share Tech Mono", monospace;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--c-sek, #9aa08a);
  margin-bottom: 3px;
}
.fld .box,
.inp,
.coach-inp,
.fld input {
  border-radius: 0;
}
.fld .box {
  background: var(--s-0, #000);
  border: 1px solid var(--line);
  border-left: 3px solid var(--olive);
}
.fld input {
  min-height: 44px;
  padding: 0 10px;
  font-family: Oswald, sans-serif;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0;
  color: var(--text);
}
.fld input::placeholder,
.inp::placeholder {
  font-size: 13px;
  letter-spacing: 0.08em;
  color: #7f8574;
}
.fld .box:focus-within,
.inp:focus {
  border-color: var(--gold-dim);
  border-left-color: var(--gold);
}
.inp,
textarea.inp,
select.inp {
  min-height: 44px;
  padding: 0 10px;
  background-color: var(--s-0, #000);
  border: 1px solid var(--line);
  border-left: 3px solid var(--olive);
  font-family: Oswald, sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: var(--text);
}
textarea.inp {
  padding: 10px;
}
.inp.search {
  margin-bottom: 5px;
  font-family: "Share Tech Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
}
.eye {
  width: 44px;
  border-left: none;
  color: var(--gold-text, var(--gold));
}

/* ── Knoepfe ────────────────────────────────────────────────────── */
.btn,
.button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  margin: 0 0 8px;
  padding: 0 14px;
  border: none;
  border-image: none;
  border-radius: 0;
  background: var(--goldbtn) center / 100% 100% no-repeat;
  box-shadow: none;
  font-family: Gunplay, Oswald, sans-serif;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: none;
  color: #1c1608;
  text-shadow: 0 1px 0 rgba(255, 235, 170, 0.5);
  cursor: pointer;
}
.btn:hover,
.button:hover {
  filter: brightness(1.08);
}
.btn svg {
  width: 18px;
  height: 18px;
}
.btn.ghost,
.button.secondary,
.coach-eintrag,
.btn.ghost.klein {
  background: var(--panel-2);
  border: 1px solid var(--olive);
  border-image: none;
  font-family: Oswald, sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--text);
  text-shadow: none;
}
.btn.quiet {
  background: var(--panel);
  border: 1px solid var(--line);
  border-image: none;
  font-family: Oswald, sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  text-shadow: none;
}
.button.danger {
  background: var(--s-0, #140b0a);
  border: 1px solid #6b2a22;
  color: #d2604a;
  text-shadow: none;
  font-family: Oswald, sans-serif;
  font-weight: 500;
  font-size: 14px;
}
.btn.small,
.button.small {
  width: auto;
  min-height: 44px;
  padding: 0 14px;
  font-size: 13px;
}
.link-right,
button.link,
.elite-head button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-family: "Share Tech Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-decoration: none;
  color: var(--gold-text, var(--gold));
}
.link-right {
  margin: 0;
  width: auto;
}
.auth-help-actions {
  display: flex;
  justify-content: space-between;
}
.rule,
.divider {
  margin: 10px 0;
  font-family: "Share Tech Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: #7f8574;
}
.formerr {
  border-radius: 0;
  font-family: Oswald, sans-serif;
  font-size: 13.5px;
}

/* ── Reiter oben (Anmelden / Elite Coins, Coaching-Bereiche) ─────── */
.seg {
  display: flex;
  gap: 6px;
  margin: 0 0 4px;
}
.seg button,
.coach-seg button {
  flex: 1;
  min-width: 0;
  min-height: 46px;
  padding: 0 6px;
  border: 1px solid var(--line);
  border-image: none;
  background: rgba(0, 0, 0, 0.35);
  font-family: Gunplay, Oswald, sans-serif;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}
.seg button.on,
.coach-seg button.on {
  border-color: transparent;
  border-image: none;
  background: var(--plate) center / 100% 100% no-repeat;
  color: var(--text);
}
.seg button svg {
  width: 16px;
  height: 16px;
}

/* ── Kopf der angemeldeten Ansicht ──────────────────────────────── */
.topbar {
  position: relative;
  z-index: 6;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px;
  padding: 8px 10px 0;
  min-height: 108px;
  border-bottom: none;
  background: var(--s-0, #000);
  align-items: start;
}
.topbar::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 8px;
  width: 140px;
  height: 96px;
  transform: translateX(-50%);
  background: url("/ui/dfq-logo-new.png") center / contain no-repeat;
  pointer-events: none;
  filter: drop-shadow(0 10px 8px #000) drop-shadow(0 4px 3px #000) drop-shadow(0 0 12px rgba(0, 0, 0, 0.9));
}
.burger {
  width: 44px;
  height: 44px;
  border: none;
  background: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  padding: 0;
}
.burger span {
  height: 2px;
  width: 100%;
  margin: 0;
  background: var(--gold);
}
.topbar-where {
  display: none;
}
.topbar-actions {
  grid-column: 3;
  justify-self: end;
  gap: 8px;
}
.topbar-icon {
  width: 40px;
  height: 44px;
  border: none;
  background: none;
  color: var(--gold-text, var(--gold));
}
.badge-dot {
  top: 6px;
  right: 6px;
  min-width: 8px;
  height: 8px;
  padding: 0;
  font-size: 0;
  border-radius: 50%;
  background: #e0342a;
}
.topbar-me {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border: 2px solid var(--gold-dim);
  background: var(--s-0, #0c0e09);
  font-family: Gunplay, sans-serif;
  color: var(--gold-text, var(--gold));
}
.topbar-me.has-photo {
  border-color: var(--gold);
}

/* ── Kopf der Anmeldeseiten ─────────────────────────────────────── */
.header {
  padding: 0;
  text-align: left;
  border: none;
  background: var(--s-0, #000);
}
.terminal-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 22px;
  padding: 0 8px;
  background: var(--s-0, #070905);
  border-bottom: 1px solid var(--line);
  font-family: "Share Tech Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: #7c8050;
}
.terminal-strip i {
  width: 8px;
  height: 8px;
  margin-left: 4px;
  background: var(--gold);
}
.terminal-strip i + i {
  background: var(--olive);
}
.terminal-strip i + i + i {
  background: var(--line);
}
.terminal-strip span {
  margin-right: auto;
}
.hazard-strip {
  height: 6px;
  background-image: repeating-linear-gradient(135deg, #f2a900 0 7px, #000 7px 14px);
  opacity: 0.8;
}
.auth-header-row {
  padding: 8px 14px 4px;
}
.auth-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.header .logo {
  content: url("/ui/dfq-logo-new.png");
  width: 88px;
  height: 48px;
  object-fit: contain;
  filter: drop-shadow(0 6px 5px #000);
}
.auth-brand strong {
  font-family: Gunplay, Oswald, sans-serif;
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 0.1em;
  color: var(--text);
}
.auth-help summary {
  border: 1px solid var(--gold);
  background: var(--s-0, #0c0e09);
  color: var(--gold-text, var(--gold));
  font-family: Gunplay, sans-serif;
}
.auth-help-panel {
  border: 16px solid transparent;
  border-image: var(--frame) 150 fill / 16px stretch;
  background: none;
  padding: 0 4px;
}
.auth-help-panel strong {
  color: var(--gold-text, var(--gold));
}
.auth-motto {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 2px 0 8px;
  font-family: Gunplay, Oswald, sans-serif;
  font-size: 15px;
  letter-spacing: 0.14em;
  color: var(--gold-text, var(--gold));
}
.auth-motto strong {
  font-weight: 400;
}
.header .motto,
.star-rule {
  display: none;
}
.header .account-gear,
.header .logout-btn,
.header .inbox-btn,
.header .view-switch {
  display: none;
}

/* ── Reiterleiste unten, wischbar ───────────────────────────────── */
.tabs {
  order: 10;
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  gap: 6px;
  margin: 0 6px 6px;
  padding: 2px 0;
  border: 10px solid transparent;
  border-image: var(--frame) 150 fill / 10px stretch;
  background: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar {
  display: none;
}
.tabs .tab {
  flex: 0 0 96px;
  scroll-snap-align: start;
  height: 42px;
  min-height: 42px;
  padding: 0 4px;
  border: 1px solid var(--line);
  border-image: none;
  background: rgba(0, 0, 0, 0.35);
  font-family: Gunplay, Oswald, sans-serif;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}
.tabs .tab.on {
  border-color: transparent;
  background: var(--plate) center / 100% 100% no-repeat;
  color: var(--text);
}
.legal-bar {
  order: 5;
  margin: 0;
  padding: 4px 0 10px;
  border: none;
  font-family: "Share Tech Mono", monospace;
  font-size: 11px;
  color: #7f8574;
}
.legal-bar button {
  min-height: 44px;
  text-decoration: none;
  color: #7f8574;
}

/* ── Ranglisten ─────────────────────────────────────────────────── */
.rankrow,
.week-row {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 48px;
  margin: 0 0 4px;
  padding: 4px 10px;
  background: var(--s-0, #070905);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
}
.rankrow:has(.m1) {
  border-left-color: #f2a900;
  background: var(--s-0, #0f120b);
}
.rankrow:has(.m2) {
  border-left-color: #d8dbd6;
}
.rankrow:has(.m3) {
  border-left-color: #cf9968;
}
.rankrow .medal {
  width: 26px;
  height: 29px;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background-image: none;
  background-color: var(--s-0, #000);
  border: none;
  font-family: Gunplay, Oswald, sans-serif;
  font-size: 13px;
  text-shadow: none;
  color: var(--c-sek, #9aa08a);
}
.rankrow .medal.m1,
.rankrow .medal.m2,
.rankrow .medal.m3 {
  color: #241f0c;
  background-size: auto;
}
.rankrow .medal.m1 {
  background-image: linear-gradient(160deg, #e8c76a, #a9861f);
}
.rankrow .medal.m2 {
  background-image: linear-gradient(160deg, #d8dbd6, #8d918a);
}
.rankrow .medal.m3 {
  background-image: linear-gradient(160deg, #cf9968, #8a5c30);
}
.rankrow .who {
  font-family: Gunplay, Oswald, sans-serif;
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
}
.rankrow .who small {
  font-family: "Share Tech Mono", monospace;
  font-size: 11px;
  color: var(--text-dim);
}
.rankrow .val {
  font-family: "Share Tech Mono", monospace;
  font-size: 15px;
  color: var(--gold-text, var(--gold));
}
.rankrow .val small {
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--c-sek, #9aa08a);
}
.elite-head {
  padding: 0 0 6px;
}
.elite-head strong {
  font-family: Gunplay, Oswald, sans-serif;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.06em;
  text-transform: none;
}
.elite-head svg {
  color: var(--gold-text, var(--gold));
}

/* ── Wochenkarte ────────────────────────────────────────────────── */
.roundcard .eyebrow,
.roundcard .kw,
.countdown b {
  font-family: Gunplay, Oswald, sans-serif;
}
.roundcard .eyebrow {
  font-family: "Share Tech Mono", monospace;
  font-size: 11px;
  color: var(--gold-text, var(--gold));
}
.roundcard .kw {
  font-size: 26px;
  margin: 2px 0 4px;
  white-space: nowrap;
}
.roundcard p {
  font-size: 14px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--c-prim, #d5d8cb);
}
.countdown {
  background: var(--s-0, #000);
  border: 1px solid var(--line);
  border-top: 2px solid var(--gold);
}
.countdown b {
  font-size: 20px;
  color: var(--gold-text, var(--gold));
}
.countdown span {
  font-family: "Share Tech Mono", monospace;
  font-size: 11px;
  color: var(--text-dim);
}

/* ── Tracking ───────────────────────────────────────────────────── */
.track-claim h1 {
  font-family: Oswald, sans-serif;
  font-weight: 600;
  font-size: 24px;
  letter-spacing: 0.02em;
}
.track-claim h1 span {
  color: var(--gold-text, var(--gold));
}
.track-claim p {
  font-size: 14px;
  color: var(--text-dim);
}
.me-card {
  grid-template-columns: 52px minmax(0, 1fr) auto;
}
.me-avatar {
  width: 52px;
  height: 52px;
  border: 2px solid var(--gold);
}
.me-coins b {
  font-family: "Share Tech Mono", monospace;
  font-size: 20px;
  color: var(--gold-text, var(--gold));
}
.me-coins span,
.me-coins em {
  font-family: "Share Tech Mono", monospace;
  font-size: 11px;
  color: var(--text-dim);
}
.task,
.proof-row {
  min-height: 56px;
  margin: 0;
  background: var(--s-0, #070905);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
}
.proof-row {
  border-style: dashed;
  border-color: #6b6f5c;
}
.task.on {
  background: var(--s-1, #16130a);
  border-color: var(--gold);
}
.task-icon,
.proof-icon,
.task-go,
.proof-go {
  background: var(--s-0, #000);
  border: 1px solid var(--olive);
}
.task-text strong,
.proof-text strong {
  font-family: Oswald, sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0;
}
.task-text small,
.proof-text small {
  font-family: "Share Tech Mono", monospace;
  font-size: 11px;
  color: var(--text-dim);
}
.task-coins {
  font-family: "Share Tech Mono", monospace;
  font-size: 14px;
  color: var(--gold-text, var(--gold));
}
.action,
.history {
  min-height: 48px;
}
.action.on {
  border-color: var(--gold);
}
.proof {
  background: var(--s-0, #000);
  border: 1px dashed #6b6f5c;
}

/* ── History, Postfach ──────────────────────────────────────────── */
.history.card,
.msg {
  border: 1px solid var(--line);
  border-image: none;
  border-left: 3px solid var(--olive);
  background: var(--s-0, #070905);
  padding: 4px 10px;
}
.msg.unread {
  border-left-color: var(--gold);
}
.msg-head strong {
  font-family: Gunplay, Oswald, sans-serif;
  font-weight: 400;
  text-transform: none;
}
.msg-body {
  font-size: 14px;
  color: var(--c-prim, #d5d8cb);
}
.positive {
  font-family: "Share Tech Mono", monospace;
  color: var(--gold-text, var(--gold));
}

/* ── Konto, Zuschnitt ───────────────────────────────────────────── */
.avatar-vorschau {
  border: 2px solid var(--gold);
}
.cropper-flaeche {
  border: 1px solid var(--gold-dim);
}
.cropper-box {
  max-width: 380px;
}

/* ── Coaching ───────────────────────────────────────────────────── */
.coach-panel {
  padding: 6px;
}
.coach-row > label,
.coach-schalter .text,
.coach-datum strong {
  font-family: Oswald, sans-serif;
  font-weight: 400;
  font-size: 14px;
}
.coach-datum strong,
.coach-uebung .name,
.coach-eintrag strong {
  font-family: Gunplay, Oswald, sans-serif;
  font-weight: 400;
}
.coach-inp {
  background: var(--s-0, #000);
  border: 1px solid var(--line);
  border-left: 3px solid var(--olive);
  font-family: "Share Tech Mono", monospace;
}
.coach-status-zeile {
  display: block;
}
.coach-status-zeile b {
  display: block;
  margin-top: 4px;
  font-family: "Share Tech Mono", monospace;
  color: var(--gold-text, var(--gold));
}
.coach-status-balken {
  height: 18px;
  padding: 2px;
  background: var(--s-0, #000);
  border: 1px solid var(--line);
}
.coach-status-balken i {
  background: repeating-linear-gradient(90deg, var(--gold) 0 10px, #000 10px 12px);
}
.coach-schalter .kasten {
  border: 1px solid var(--gold-dim);
  background: var(--s-0, #000);
}
.coach-schalter.on .kasten {
  background: var(--gold);
  border-color: var(--gold);
}
.coach-uhr {
  background: var(--s-0, #000);
  border: 1px solid var(--line);
}
.coach-uhr .zeit {
  color: var(--text);
}

/* ── Menue, Hinweis, Foto ───────────────────────────────────────── */
.drawer-inner {
  background: var(--s-0, #000);
  border-right: 1px solid var(--gold-dim);
}
.drawer h3 {
  font-family: "Share Tech Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--gold-text, var(--gold));
}
.drawer button {
  min-height: 48px;
  background: var(--s-0, #070905);
  border: 1px solid var(--line);
  border-left: 3px solid var(--olive);
  font-family: Oswald, sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--text);
}
.drawer button.on {
  border-color: transparent;
  background: var(--plate) center / 100% 100% no-repeat;
}
.chip {
  min-height: 44px;
  background: var(--s-0, #070905);
  border: 1px solid var(--line);
  color: var(--text-dim);
}
.chip.on {
  border-color: transparent;
  background: var(--plate) center / 100% 100% no-repeat;
  color: var(--text);
}
.toast {
  background: var(--s-0, #070905);
  border: 1px solid var(--gold);
  font-family: Oswald, sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: var(--text);
}
.loading,
.empty {
  font-family: "Share Tech Mono", monospace;
  font-size: 12px;
  color: #7f8574;
}
.secure {
  border-color: var(--olive);
  color: #b7bd8e;
}
.qr {
  border: 1px solid var(--gold-dim);
}


/* ── Dashboard der Woche-Ansicht ────────────────────────────────── */
.dash {
  height: 440px;
  box-sizing: border-box;
  margin-bottom: 4px;
  padding: 6px;
  border-style: solid;
  border-color: transparent;
  border-width: 70px 14px 15px 14px;
  border-image: url("/ui/dash-frame-soldier.png?v=2") 190 38 40 38 / 70px 14px 15px 14px stretch;
  background: url("/ui/avatar-bg.jpg") -170px 75% / 150% auto no-repeat, #000;
  background-clip: padding-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 176px;
  gap: 8px;
}
.dash-avatar {
  min-height: 0;
  background: url("/ui/avatar-joel.png") center bottom / auto 98% no-repeat;
}
.dash-side {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dash-name {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 4px;
  height: 50px;
}
.dash-name span {
  font-family: Gunplay, Oswald, sans-serif;
  font-size: 20px;
  line-height: 1;
  padding-bottom: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-name img {
  flex: none;
  height: 56px;
  width: 41px;
  object-fit: contain;
  margin-top: -6px;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.8));
}
.dash-gear-head {
  height: 42px;
  box-sizing: border-box;
  padding: 0 12px 0 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  background: url("/ui/plate-a.png") center / 100% 100% no-repeat;
  font-family: Oswald, sans-serif;
  font-weight: 500;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.dash-gear-head .bar {
  height: 5px;
  background: rgba(0, 0, 0, 0.5);
}
.dash-gear-head .bar i {
  display: block;
  height: 100%;
  background: var(--gold);
}
.gear-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 8px;
}
.gear {
  position: relative;
  min-height: 0;
  box-sizing: border-box;
  padding: 5px;
  display: flex;
  flex-direction: column;
  background: url("/ui/svg/equipment-card.svg") center / 100% 100% no-repeat;
}
.gear-img {
  flex: 1;
  display: grid;
  place-items: center;
  background: radial-gradient(ellipse at 50% 45%, rgba(84, 90, 44, 0.55), rgba(0, 0, 0, 0) 75%);
  font-family: "Share Tech Mono", monospace;
  font-size: 11px;
  color: #7f8574;
}
.gear-name {
  padding: 5px 0 3px;
  text-align: center;
  background: rgba(84, 90, 44, 0.28);
  font-family: Oswald, sans-serif;
  font-weight: 400;
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: 0.05em;
}
.shop-grid {
  grid-template-rows: none;
  grid-auto-rows: 150px;
  gap: 8px;
}
.shop-soon {
  text-align: center;
  padding: 0 0 4px;
  font-family: "Share Tech Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--gold-text, var(--gold));
  background: rgba(84, 90, 44, 0.28);
}
.post-card {
  position: relative;
  height: 372px;
  margin-bottom: 4px;
  background: url("/ui/post-frame.png") center / 100% 100% no-repeat;
}
.post-title,
.post-line,
.post-photo,
.post-foot {
  position: absolute;
  left: 5%;
  right: 5%;
}
.post-title {
  top: 5.6%;
  height: 11.5%;
  display: flex;
  align-items: center;
  padding-left: 4%;
  font-family: Gunplay, Oswald, sans-serif;
  font-size: 16px;
  letter-spacing: 0.1em;
}
.post-photo {
  top: 18.2%;
  bottom: 36.8%;
  background: url("/ui/post-photo.png") center / cover no-repeat;
}
.post-line {
  top: 64.5%;
  height: 9.5%;
  display: flex;
  align-items: center;
  padding-left: 3%;
  font-family: Gunplay, Oswald, sans-serif;
  font-size: 16px;
  letter-spacing: 0.05em;
}
.post-foot {
  top: 75.5%;
  height: 18.5%;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 4px 0;
}
.post-btn {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: none;
  cursor: pointer;
  background: var(--goldbtn) center / 100% 100% no-repeat;
  font-family: Gunplay, Oswald, sans-serif;
  font-size: 17px;
  letter-spacing: 0.06em;
  color: #1c1608;
  text-shadow: 0 1px 0 rgba(255, 235, 170, 0.5);
}
.post-btn img {
  width: 24px;
  height: 24px;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.7));
}
.coin-badge {
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 22px;
  width: 130px;
  background: url("/ui/svg/coin-reward-badge.svg") center / 100% 100% no-repeat;
  font-family: "Share Tech Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--gold-text, #e8c76a);
}
.coin-badge img {
  width: 14px;
  height: 14px;
}
.goal-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 134px;
  gap: 4px;
  margin-bottom: 4px;
}
.goal,
.goal-coins {
  box-sizing: border-box;
  height: 48px;
  border: 12px solid transparent;
  border-image: var(--frame) 150 fill / 12px stretch;
  display: flex;
  align-items: center;
  gap: 8px;
}
.goal span {
  flex: none;
  font-family: Gunplay, Oswald, sans-serif;
  font-size: 13px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.goal-bar {
  flex: 1;
  min-width: 0;
  height: 26px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 228fr 228fr 228fr 228fr 278fr;
  column-gap: 1.57%;
  padding: 7px 4.36%;
  background: url("/ui/svg/progress-bar.svg") center / 100% 100% no-repeat;
}
.goal-bar i {
  background: var(--s-1, #1a1d14);
}
.goal-bar i.on {
  background: var(--gold);
}
.goal-coins {
  justify-content: center;
  gap: 6px;
  font-family: Gunplay, Oswald, sans-serif;
  font-size: 15px;
  color: var(--gold-text, var(--gold));
  white-space: nowrap;
}
.goal-coins img {
  width: 24px;
  height: 24px;
}


/* ── Korrekturen: Anmeldeseite und Kopfzeile ────────────────────── */
.topbar {
  min-height: 70px;
}
.login-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
}
.login-shell .panel,
.login-shell .elite-card,
.login-shell .regel {
  border: 16px solid transparent;
  border-image: var(--frame) 150 fill / 16px stretch;
  background: none;
  box-shadow: none;
  padding: 6px;
  margin-bottom: 0;
}
.login-shell .elite-card {
  display: block;
}
.login-shell .elite-head {
  display: flex;
  min-height: 44px;
  margin: 0;
}
.login-shell .elite-head strong {
  font-size: 16px;
}
.login-shell .elite-head button {
  display: inline-flex;
  width: auto;
  font-size: 11px;
  border: none;
  background: none;
}
.login-shell .rankrow {
  grid-template-columns: 26px minmax(0, 1fr) auto;
  gap: 10px;
  padding: 4px 10px;
  margin-bottom: 4px;
  min-height: 48px;
}
.login-shell .rankrow .medal {
  width: 26px;
  height: 29px;
  font-size: 13px;
}
.login-shell .rankrow .who {
  font-size: 15px;
}
.login-shell .rankrow .val {
  grid-column: auto;
  font-size: 15px;
  text-align: right;
}
.login-shell .panel-title {
  font-size: 22px;
}
.login-shell .panel-sub {
  display: block;
  font-size: 14px;
  margin: 0 0 10px;
}
.login-shell .panel-kicker {
  font-size: 11px;
}
.login-shell .fld label {
  font-size: 11px;
  color: var(--c-sek, #9aa08a);
}
.login-shell .box {
  min-height: 44px;
  background: var(--s-0, #000);
  border: 1px solid var(--line);
  border-left: 3px solid var(--olive);
  box-shadow: none;
}
.login-shell .box input {
  min-height: 44px;
  font-size: 14px;
  padding-left: 10px;
}
.login-shell .btn {
  min-height: 48px;
  padding: 0 14px;
  border: none;
  border-image: none;
  background: var(--goldbtn) center / 100% 100% no-repeat;
  font-size: 16px;
  color: #1c1608;
  text-shadow: 0 1px 0 rgba(255, 235, 170, 0.5);
}
.login-shell .btn.ghost {
  background: var(--panel-2);
  border: 1px solid var(--olive);
  font-family: Oswald, sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: var(--text);
  text-shadow: none;
}
.login-shell .btn.quiet {
  background: var(--panel);
  border: 1px solid var(--line);
  font-family: Oswald, sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: var(--text-dim);
  text-shadow: none;
}
.login-shell .btn svg {
  display: inline-block;
}
.login-shell .regel {
  grid-column: auto;
}
.auth-help-actions {
  display: flex;
  justify-content: space-between;
  gap: 4px;
}
.auth-help-actions .link-right {
  border: none;
  font-size: 11px;
}
.seg > button,
.auth-content .seg button,
.seg > button.brk {
  border: 1px solid var(--line);
  border-image: none;
  background: rgba(0, 0, 0, 0.35);
  min-height: 46px;
  font-size: 13px;
}
.seg > button.on,
.auth-content .seg button.on {
  border-color: transparent;
  background: var(--plate) center / 100% 100% no-repeat;
}
.auth-content .seg {
  gap: 6px;
  margin-bottom: 4px;
}

/* Terminal- und Warnstreifen bündig, kein Überlaufen */
.header {
  overflow: hidden;
}
.header > .terminal-strip,
.header > .hazard-strip {
  margin-left: 0;
  margin-right: 0;
}


/* ═══ Plattenoptik: dunkel verkratzt, Olive nur für aktiv und primär ═══ */
#app .btn.ghost,
#app .btn.quiet,
#app .login-shell .btn.ghost,
#app .login-shell .btn.quiet,
#app .seg > button,
#app .auth-content .seg button,
#app .tabs .tab,
#app .rankrow,
#app .login-shell .rankrow,
#app .week-row,
#app .task,
#app .proof-row,
#app .fld .box,
#app .login-shell .box,
#app .inp,
#app .chip,
#app .drawer button,
#app .history.card,
#app .msg,
#app .coach-eintrag,
#app .button.secondary,
#app .link-right {
  border-style: solid;
  border-color: transparent;
  border-width: 13px 15px;
  border-image: url("/ui/plate-dark.png") 130 170 fill / 13px 15px stretch;
  background: none;
  box-shadow: none;
  color: var(--text);
  text-shadow: none;
  min-height: 52px;
  padding: 0 6px;
}
#app .btn,
#app .login-shell .btn,
#app .seg > button.on,
#app .auth-content .seg button.on,
#app .tabs .tab.on,
#app .chip.on,
#app .drawer button.on {
  border-style: solid;
  border-color: transparent;
  border-width: 13px 15px;
  border-image: url("/ui/plate-a.png") 130 170 fill / 13px 15px stretch;
  background: none;
  box-shadow: none;
  min-height: 52px;
  padding: 0 6px;
  color: var(--text);
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.7);
}
#app .btn.quiet,
#app .login-shell .btn.quiet {
  color: var(--gold-text, var(--gold));
}
#app .link-right {
  min-height: 44px;
  color: var(--gold-text, var(--gold));
}
#app .fld .box,
#app .login-shell .box {
  min-height: 52px;
}
#app .fld input,
#app .login-shell .box input {
  min-height: 24px;
  padding: 0 4px;
}
#app .inp {
  padding: 0 6px;
}
#app textarea.inp {
  padding: 6px;
  min-height: 96px;
}
#app .eye {
  width: 36px;
}
#app .rankrow,
#app .week-row,
#app .task,
#app .proof-row {
  padding: 4px 6px;
  margin-bottom: 4px;
}
#app .rankrow:has(.m1),
#app .rankrow:has(.m2),
#app .rankrow:has(.m3) {
  background: none;
}
#app .tabs .tab {
  min-height: 46px;
  flex-basis: 104px;
  border-width: 11px 12px;
  border-image-width: 11px 12px;
}
#app .tabs {
  overflow-y: hidden;
}
#app .seg > button,
#app .auth-content .seg button {
  min-height: 56px;
}

/* ═══ Anmeldeseite: Anordnung wie in der App, eine Spalte ═══ */
#app .login-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
}
#app .login-shell .elite-card {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding: 6px;
}
#app .login-shell .elite-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  margin: 0;
}
#app .login-shell .elite-head > svg {
  display: none;
}
#app .login-shell .elite-head strong {
  font-size: 15px;
  white-space: nowrap;
}
#app .login-shell .elite-head button {
  width: auto;
  border: none;
  background: none;
  min-height: 44px;
  font-size: 11px;
  padding: 0;
}
#app .login-shell .rankrow {
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 4px 6px;
  min-height: 0;
  margin: 0;
  padding: 4px 2px;
  border-width: 10px 12px;
  border-image-width: 10px 12px;
}
#app .login-shell .rankrow .medal {
  width: 24px;
  height: 27px;
  font-size: 12px;
}
#app .login-shell .rankrow .who {
  font-size: 13px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
#app .login-shell .rankrow .val {
  grid-column: 1 / -1;
  font-size: 13px;
  text-align: right;
}
#app .login-shell .rankrow .val small {
  display: block;
  font-size: 10px;
}
#app .login-shell .panel,
#app .login-shell .regel {
  margin: 0;
}
#app .login-shell > .regel {
  grid-column: auto;
}


/* ═══ Zurück zu grün/schwarz: Platten nur für Überschriften und Haupt-Button ═══ */
#app .panel,
#app .card,
#app .roundcard,
#app .elite-card,
#app .regel,
#app .sperre,
#app .me-card,
#app .coach-panel,
#app .coach-status,
#app .coach-auftrag,
#app .coach-phase,
#app .cropper-box,
#app .claim-result,
#app .login-shell .panel,
#app .login-shell .elite-card,
#app .login-shell .regel {
  border: 1px solid var(--line);
  border-image: none;
  background: var(--s-0, #0a0c08);
  box-shadow: inset 1px 1px 0 #3c4232, inset -1px -1px 0 #05070a;
  padding: 12px;
  margin-bottom: 6px;
}
#app .panel .card,
#app .card .card {
  background: var(--s-0, #0f120b);
  box-shadow: none;
}
#app .regel,
#app .sperre {
  border-left: 3px solid var(--gold-dim);
}
#app .login-shell .elite-card {
  padding: 8px;
}

/* Flache Flächen: dunkles Olivgrün */
#app .btn.ghost,
#app .btn.quiet,
#app .login-shell .btn.ghost,
#app .login-shell .btn.quiet,
#app .button.secondary,
#app .coach-eintrag,
#app .chip,
#app .drawer button,
#app .link-right {
  border: 1px solid var(--line);
  border-image: none;
  background: var(--s-0, #0f120b);
  box-shadow: none;
  padding: 0 12px;
  min-height: 46px;
}
#app .link-right {
  background: none;
  border: none;
  min-height: 44px;
  padding: 0;
}
#app .seg > button,
#app .auth-content .seg button,
#app .tabs .tab {
  border: 1px solid var(--line);
  border-image: none;
  background: var(--s-0, #0f120b);
  box-shadow: none;
  color: var(--text-dim);
  padding: 0 6px;
  min-height: 46px;
}
#app .seg > button.on,
#app .auth-content .seg button.on,
#app .tabs .tab.on,
#app .chip.on,
#app .drawer button.on {
  border: 1px solid var(--gold-dim);
  border-image: none;
  background: linear-gradient(180deg, #62683a, #545a2c);
  box-shadow: inset 1px 1px 0 #7c8050;
  color: var(--text);
  text-shadow: none;
}
#app .fld .box,
#app .login-shell .box,
#app .inp {
  border: 1px solid var(--line);
  border-left: 3px solid var(--olive);
  border-image: none;
  background: var(--s-0, #080a07);
  box-shadow: none;
  min-height: 46px;
  padding: 0;
}
#app .inp {
  padding: 0 10px;
}
#app textarea.inp {
  padding: 10px;
  min-height: 96px;
}
#app .fld input,
#app .login-shell .box input {
  min-height: 44px;
  padding: 0 10px;
}
#app .eye {
  width: 44px;
}
#app .rankrow,
#app .week-row,
#app .task,
#app .proof-row,
#app .history.card,
#app .msg {
  border: 1px solid var(--line);
  border-image: none;
  border-left: 3px solid var(--line);
  background: var(--s-0, #0a0c08);
  box-shadow: none;
  padding: 4px 10px;
  margin-bottom: 4px;
  min-height: 48px;
}
#app .rankrow:has(.m1) {
  border-left-color: #f2a900;
  background: var(--s-0, #0f120b);
}
#app .rankrow:has(.m2) {
  border-left-color: #d8dbd6;
}
#app .rankrow:has(.m3) {
  border-left-color: #cf9968;
}
#app .task.on {
  background: var(--s-0, #0f120b);
  border-color: var(--gold);
  border-left-color: var(--gold);
}
#app .proof-row {
  border-style: dashed;
  border-left-style: dashed;
}
#app .login-shell .rankrow {
  border-width: 1px;
  border-left-width: 3px;
  padding: 4px 4px;
  min-height: 0;
}
#app .login-shell .rankrow:has(.m1),
#app .login-shell .rankrow:has(.m2),
#app .login-shell .rankrow:has(.m3) {
  background: var(--s-0, #0f120b);
}

/* Reiterleiste flach */
#app .tabs {
  border: none;
  border-image: none;
  border-top: 1px solid var(--gold-dim);
  background: var(--s-0, #0a0c07);
  margin: 0;
  padding: 6px;
}
#app .tabs .tab {
  flex: 0 0 96px;
  min-height: 42px;
  height: 42px;
}

/* Olive Platte nur noch für den Haupt-Button (Anmelden, Coins tracken) */
#app .btn,
#app .login-shell .btn {
  border-style: solid;
  border-color: transparent;
  border-width: 13px 15px;
  border-image: url("/ui/plate-a.png") 130 170 fill / 13px 15px stretch;
  background: none;
  box-shadow: none;
  min-height: 52px;
  padding: 0 6px;
  color: var(--text);
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.7);
}
#app .btn.ghost,
#app .btn.quiet,
#app .login-shell .btn.ghost,
#app .login-shell .btn.quiet {
  border: 1px solid var(--line);
  border-image: none;
  background: var(--s-0, #0f120b);
  text-shadow: none;
  padding: 0 12px;
  min-height: 46px;
}
#app .btn.quiet,
#app .login-shell .btn.quiet {
  color: var(--gold-text, var(--gold));
}


/* ═══ Feinschliff ═══ */
#app .topbar {
  min-height: 84px;
}
#app .topbar + .content {
  padding-top: 20px;
}
#app .login-shell .rankrow {
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-image: none;
}
#app .login-shell .rankrow:has(.m1) {
  border-left-color: #f2a900;
}
#app .login-shell .rankrow:has(.m2) {
  border-left-color: #d8dbd6;
}
#app .login-shell .rankrow:has(.m3) {
  border-left-color: #cf9968;
}
#app .tabs .tab {
  border-image-width: 1;
}


/* Symbole in Buttons immer sichtbar (auch auf schmalen Geräten) */
#app .btn svg,
#app .login-shell .btn svg {
  display: inline-block !important;
  flex: none;
  width: 20px;
  height: 20px;
}


/* ═══ Endgültig: Anmeldeseite exakt wie im Entwurf (DFQ Auth) ═══ */
html body #app .login-shell .panel,
html body #app .login-shell .elite-card,
html body #app .login-shell .regel,
html body #app .auth-help-panel {
  border: 16px solid transparent;
  border-image: var(--frame) 150 fill / 16px stretch;
  background: none;
  box-shadow: none;
  padding: 6px;
  margin: 0;
}
html body #app .login-shell .regel { border-left: 16px solid transparent; }
html body #app .login-shell .panel { display: grid; gap: 8px; }
html body #app .login-shell .elite-card { display: block; }
html body #app .login-shell .elite-head { display: flex; align-items: center; justify-content: space-between; padding: 0 0 6px; min-height: 0; }
html body #app .login-shell .elite-head > svg { display: inline-block; }
html body #app .login-shell .elite-head strong { font-size: 16px; white-space: nowrap; }
html body #app .login-shell .rankrow {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 48px;
  margin: 0 0 4px;
  padding: 4px 10px;
  background: var(--s-0, #070905);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-image: none;
  box-shadow: none;
}
html body #app .login-shell .rankrow:has(.m1) { border-left-color: #f2a900; }
html body #app .login-shell .rankrow:has(.m2) { border-left-color: #d8dbd6; }
html body #app .login-shell .rankrow:has(.m3) { border-left-color: #cf9968; }
html body #app .login-shell .rankrow .val { grid-column: auto; text-align: right; font-size: 15px; }
html body #app .login-shell .rankrow .val small { display: block; font-size: 11px; }
html body #app .login-shell .rankrow .who { font-size: 15px; }
html body #app .login-shell .rankrow .medal { width: 26px; height: 29px; font-size: 13px; }

/* Felder flach */
html body #app .fld .box,
html body #app .login-shell .box {
  min-height: 44px;
  padding: 0;
  background: var(--s-0, #000);
  border: 1px solid var(--line);
  border-left: 3px solid var(--olive);
  border-image: none;
  box-shadow: none;
}
html body #app .fld input,
html body #app .login-shell .box input { min-height: 44px; padding: 0 10px; font-size: 14px; }

/* Haupt-Button: Goldplatte */
html body #app .login-shell .btn:not(.ghost):not(.quiet) {
  border: none;
  border-image: none;
  background: var(--goldbtn) center / 100% 100% no-repeat;
  min-height: 48px;
  padding: 0 14px;
  margin-bottom: 0;
  font-family: Gunplay, Oswald, sans-serif;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #1c1608;
  text-shadow: 0 1px 0 rgba(255, 235, 170, 0.5);
}
/* Google: flach, olive Kontur */
html body #app .login-shell .btn.ghost {
  border: 1px solid var(--olive);
  border-image: none;
  background: var(--s-0, #0c0e09);
  min-height: 46px;
  padding: 0 12px;
  margin-bottom: 0;
  font-family: Oswald, sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--text);
  text-shadow: none;
}
/* Registrieren: flach, dunkel */
html body #app .login-shell .btn.quiet {
  border: 1px solid var(--line);
  border-image: none;
  background: var(--s-0, #070905);
  min-height: 46px;
  padding: 0 12px;
  margin-bottom: 0;
  font-family: Oswald, sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--text-dim);
  text-shadow: none;
}
/* Links unten: nur Text */
html body #app .auth-help-actions { display: flex; justify-content: space-between; gap: 4px; }
html body #app .auth-help-actions .link-right,
html body #app .login-shell .link-right {
  border: none;
  border-image: none;
  background: none;
  padding: 0;
  min-height: 44px;
  width: auto;
  font-size: 11px;
  text-align: left;
  color: var(--gold-text, var(--gold));
}
/* Überschriftenbalken der Regeln */
html body #app .login-shell .regel h2 {
  display: flex;
  align-items: center;
  min-height: 28px;
  margin: 0 0 6px;
  padding: 0 12px;
  background: linear-gradient(180deg, #4a4f27, #545a2c);
  border: 1px solid var(--b-1, #05070a);
  box-shadow: inset 1px 1px 0 #7c8050;
  font-family: Gunplay, Oswald, sans-serif;
  font-size: 16px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
/* Reiter oben: inaktiv flach, aktiv olive Platte */
html body #app .auth-content .seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0 0 4px; }
html body #app .auth-content .seg button {
  border: 1px solid var(--line);
  border-image: none;
  background: rgba(0, 0, 0, 0.35);
  min-height: 46px;
  padding: 0 6px;
  box-shadow: none;
  font-size: 13px;
  text-transform: uppercase;
  color: var(--text-dim);
}
html body #app .auth-content .seg button.on {
  border: 13px solid transparent;
  border-image: var(--plate) 130 170 fill / 13px 15px stretch;
  background: none;
  min-height: 46px;
  padding: 0;
  color: var(--text);
}


/* ═══ Logo: gleiche Größe und Lage in allen Tabs, überlappt die erste Karte ═══ */
html body #app .topbar {
  height: 84px;
  min-height: 84px;
  box-sizing: border-box;
  overflow: visible;
}
html body #app .topbar::after {
  top: 4px;
  width: 156px;
  height: 89px;
  background: url("/ui/dfq-logo-dl.png") center / contain no-repeat;
  z-index: 7;
}
html body #app .topbar + .content { padding-top: 20px; }
html body #app .header .logo { content: url("/ui/dfq-logo-dl.png"); }


/* ═══ Alle Schaltflächen: olivgrüne Platte ═══ */
html body #app .btn,
html body #app .btn.ghost,
html body #app .btn.quiet,
html body #app .button,
html body #app .button.secondary,
html body #app .login-shell .btn,
html body #app .login-shell .btn.ghost,
html body #app .login-shell .btn.quiet,
html body #app .login-shell .btn:not(.ghost):not(.quiet),
html body #app .seg > button,
html body #app .auth-content .seg button,
html body #app .auth-content .seg button.on,
html body #app .tabs .tab,
html body #app .chip,
html body #app .drawer button,
html body #app .coach-eintrag,
html body #app .coach-seg button {
  border: 13px solid transparent;
  border-image: var(--plate) 130 170 fill / 13px 15px stretch;
  background: none;
  box-shadow: none;
  min-height: 52px;
  padding: 0 6px;
  margin-bottom: 0;
  color: var(--text);
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.7);
}
html body #app .auth-content .seg button,
html body #app .auth-content .seg button.on,
html body #app .seg > button,
html body #app .coach-seg button { min-height: 46px; padding: 0; }
html body #app .tabs .tab { flex: 0 0 104px; height: auto; min-height: 46px; border-width: 11px 12px; border-image-width: 11px 12px; }
html body #app .btn.quiet,
html body #app .login-shell .btn.quiet { color: var(--text); }
html body #app .btn.ghost,
html body #app .login-shell .btn.ghost,
html body #app .btn.quiet,
html body #app .login-shell .btn.quiet,
html body #app .login-shell .btn:not(.ghost):not(.quiet) {
  font-family: Gunplay, Oswald, sans-serif;
  font-weight: 400;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}


/* ═══ Final: verkratzte Platten nur für Überschriften, Dashboard, Post, Elite Coins. Alles andere flach navy-grün ═══ */
html body #app .panel,
html body #app .card,
html body #app .roundcard,
html body #app .regel,
html body #app .sperre,
html body #app .me-card,
html body #app .coach-panel,
html body #app .coach-status,
html body #app .coach-auftrag,
html body #app .coach-phase,
html body #app .cropper-box,
html body #app .claim-result,
html body #app .auth-help-panel,
html body #app .login-shell .panel,
html body #app .login-shell .regel {
  border: 1px solid var(--line);
  border-image: none;
  background: var(--s-0, #0a0c08);
  box-shadow: inset 1px 1px 0 #3c4232, inset -1px -1px 0 #05070a;
  padding: 12px;
  margin: 0 0 6px;
}
html body #app .regel, html body #app .sperre, html body #app .login-shell .regel { border-left: 3px solid var(--gold-dim); }
html body #app .login-shell { gap: 6px; }
html body #app .panel .card, html body #app .card .card { background: var(--s-0, #0f120b); box-shadow: none; }

/* Elite Coins behält die Platte */
html body #app .elite-card,
html body #app .login-shell .elite-card {
  border: 16px solid transparent;
  border-image: var(--frame) 150 fill / 16px stretch;
  background: none;
  box-shadow: none;
  padding: 6px;
}

/* Schaltflächen: flach, olivgrün */
html body #app .btn,
html body #app .btn.ghost,
html body #app .btn.quiet,
html body #app .button,
html body #app .button.secondary,
html body #app .login-shell .btn,
html body #app .login-shell .btn.ghost,
html body #app .login-shell .btn.quiet,
html body #app .login-shell .btn:not(.ghost):not(.quiet),
html body #app .seg > button.on,
html body #app .auth-content .seg button.on,
html body #app .tabs .tab.on,
html body #app .chip.on,
html body #app .drawer button.on,
html body #app .coach-seg button.on {
  border: 1px solid var(--gold-dim);
  border-image: none;
  background: linear-gradient(180deg, #62683a, #545a2c);
  box-shadow: inset 1px 1px 0 #7c8050, inset -1px -1px 0 #05070a;
  min-height: 48px;
  padding: 0 14px;
  color: var(--text);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
}
/* Inaktive Reiter und Chips: dunkles Navy-Grün */
html body #app .seg > button,
html body #app .auth-content .seg button,
html body #app .tabs .tab,
html body #app .chip,
html body #app .drawer button,
html body #app .coach-eintrag,
html body #app .coach-seg button {
  border: 1px solid var(--line);
  border-image: none;
  background: var(--s-0, #0f120b);
  box-shadow: none;
  min-height: 46px;
  padding: 0 6px;
  color: var(--text-dim);
  text-shadow: none;
}
html body #app .tabs .tab { flex: 0 0 96px; height: 42px; min-height: 42px; }
html body #app .btn.quiet, html body #app .login-shell .btn.quiet { background: var(--s-0, #0f120b); box-shadow: none; color: var(--gold-text, var(--gold)); border-color: var(--line); }
html body #app .btn.ghost, html body #app .login-shell .btn.ghost { background: var(--s-0, #0f120b); box-shadow: none; border-color: var(--olive); }
html body #app .btn, html body #app .login-shell .btn { font-family: Gunplay, Oswald, sans-serif; font-weight: 400; font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase; }
html body #app .btn.ghost, html body #app .btn.quiet { font-family: Oswald, sans-serif; font-weight: 500; font-size: 14px; text-transform: none; }
html body #app .login-shell .btn.ghost, html body #app .login-shell .btn.quiet { font-family: Oswald, sans-serif; font-weight: 500; font-size: 14px; text-transform: none; }


/* Elite-Coins-Karte ebenfalls flach navy-grün */
html body #app .elite-card,
html body #app .login-shell .elite-card {
  border: 1px solid var(--line);
  border-image: none;
  background: var(--s-0, #0a0c08);
  box-shadow: inset 1px 1px 0 #3c4232, inset -1px -1px 0 #05070a;
  padding: 12px;
}


/* Elite Coins: drei Zeilen nebeneinander (wie in der App) */
html body #app .login-shell .elite-card {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 8px;
}
html body #app .login-shell .elite-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding: 0;
}
html body #app .login-shell .elite-head > svg { display: none; }
html body #app .login-shell .elite-head strong { font-size: 15px; white-space: nowrap; }
html body #app .login-shell .rankrow {
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 4px 6px;
  min-height: 0;
  margin: 0;
  padding: 6px 4px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
}
html body #app .login-shell .rankrow:has(.m1) { border-left-color: #f2a900; }
html body #app .login-shell .rankrow:has(.m2) { border-left-color: #d8dbd6; }
html body #app .login-shell .rankrow:has(.m3) { border-left-color: #cf9968; }
html body #app .login-shell .rankrow .medal { width: 24px; height: 27px; font-size: 12px; }
html body #app .login-shell .rankrow .who { font-size: 13px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
html body #app .login-shell .rankrow .val { grid-column: 1 / -1; text-align: right; font-size: 13px; }
html body #app .login-shell .rankrow .val small { display: block; font-size: 10px; }
/* Google-Zeichen in Originalfarben */
html body #app .btn svg[viewBox="0 0 48 48"] { display: inline-block !important; width: 20px; height: 20px; flex: none; }


/* Verkratzte Platte: Haupt-Button, aktiver Reiter, Überschriftenbalken */
html body #app .btn:not(.ghost):not(.quiet),
html body #app .login-shell .btn:not(.ghost):not(.quiet),
html body #app .seg > button.on,
html body #app .auth-content .seg button.on,
html body #app .tabs .tab.on,
html body #app .chip.on,
html body #app .drawer button.on,
html body #app .coach-seg button.on {
  border: 13px solid transparent;
  border-image: var(--plate) 130 170 fill / 13px 15px stretch;
  background: none;
  box-shadow: none;
  min-height: 52px;
  padding: 0 6px;
  color: var(--text);
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.7);
}
html body #app .seg > button.on,
html body #app .auth-content .seg button.on,
html body #app .coach-seg button.on { min-height: 46px; padding: 0; }
html body #app .tabs .tab.on { border-width: 11px 12px; border-image-width: 11px 12px; }
html body #app .regel h2,
html body #app .sperre h2,
html body #app .cropper-box h2,
html body #app .login-shell .regel h2 {
  min-height: 40px;
  padding: 0 14px;
  border: none;
  background: var(--plate) center / 100% 100% no-repeat;
  box-shadow: none;
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.7);
}


/* Überschriftenbalken: Schrift wie die anderen Platten-Überschriften */
html body #app .regel h2,
html body #app .sperre h2,
html body #app .cropper-box h2,
html body #app .login-shell .regel h2 {
  font-family: Gunplay, Oswald, sans-serif;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
  padding: 0 18px;
}


/* ═══ Saftiges Orange für alles Gelbe ═══ */
:root { --gold: #f2a900; --gold-lit: #ffbc33; --gold-dim: #b87d05; }
html body #app .dash-gear-head .bar { height: 8px; background: var(--s-1, #1a1d14); border: 1px solid var(--b-1, #05070a); }
html body #app .dash-gear-head .bar i { background: linear-gradient(180deg, #ffbc33, #f2a900 55%, #d98a00); box-shadow: 0 0 6px rgba(242, 169, 0, 0.6); }
html body #app .goal-bar i.on { background: linear-gradient(180deg, #ffbc33, #f2a900 55%, #d98a00); box-shadow: 0 0 5px rgba(242, 169, 0, 0.6); }
html body #app .me-coins b { font-family: Gunplay, Oswald, sans-serif; font-size: 26px; letter-spacing: 0.04em; color: var(--gold-text, #ffbc33); text-shadow: 0 0 10px rgba(242, 169, 0, 0.55), 0 2px 0 #000; }
html body #app .goal-coins { color: var(--gold-text, #ffbc33); text-shadow: 0 0 8px rgba(242, 169, 0, 0.5); }
html body #app .dash-name span { font-size: 24px; letter-spacing: 0.06em; color: var(--text); text-shadow: 0 2px 0 #000; }
html body #app .auth-motto { color: var(--gold-text, #f2a900); text-shadow: 0 0 10px rgba(242, 169, 0, 0.35); }


/* Medaillen: Original-Grafiken Gold, Silber, Bronze */
html body #app .rankrow .medal.m1,
html body #app .rankrow .medal.m2,
html body #app .rankrow .medal.m3,
html body #app .login-shell .rankrow .medal.m1,
html body #app .login-shell .rankrow .medal.m2,
html body #app .login-shell .rankrow .medal.m3 {
  clip-path: none;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  color: #1a1405;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}
html body #app .rankrow .medal.m1 { background-image: url("/ui/dfq-rank-gold.webp"); }
html body #app .rankrow .medal.m2 { background-image: url("/ui/dfq-rank-silver.webp"); }
html body #app .rankrow .medal.m3 { background-image: url("/ui/dfq-rank-bronze.webp"); }
html body #app .rankrow .medal { width: 34px; height: 38px; }
html body #app .login-shell .rankrow .medal { width: 30px; height: 34px; }
html body #app .login-shell .rankrow { grid-template-columns: 30px minmax(0, 1fr); }


/* ═══ Schriftgrößen: Überschriften 13px, alle anderen Texte 8px ═══ */
html body #app :is(.btn,.button,.seg button,.tabs .tab,.chip,.drawer button,.coach-eintrag,.link-right,.eye,
  .fld label,.fld input,.inp,.coach-inp,.panel-kicker,.panel-sub,.notice,.coach-hinweis,.regel li,.regel p,.sperre p,.legal p,
  .rule,.divider,.eyebrow-rule,.head-row small,.elite-head button,.rankrow .who,.rankrow .who small,.rankrow .val,.rankrow .val small,
  .roundcard .eyebrow,.roundcard p,.countdown span,.track-claim p,.me-ident small,.me-coins span,.me-coins em,
  .task-text strong,.task-text small,.proof-text strong,.proof-text small,.task-coins,.msg-body,.msg-head small,
  .terminal-strip,.legal-bar,.legal-bar button,.auth-help-panel,.toast,.loading,.empty,.formerr,.secure,
  .dash-gear-head,.gear-name,.gear-img,.shop-soon,.coin-badge,.drawer h3,.coach-row > label,.coach-schalter .text) {
  font-size: 8px;
}
html body #app :is(.section-title,.panel-title,.panel h1,.regel h2,.sperre h2,.cropper-box h2,.elite-head strong,
  .auth-brand strong,.auth-motto,.dash-name span,.post-title,.post-line,.post-btn,.goal span,.goal-coins,
  .roundcard .kw,.track-claim h1,.me-ident strong,.msg-head strong,.countdown b,.me-coins b) {
  font-size: 13px;
}
html body #app .btn, html body #app .login-shell .btn { font-size: 13px; }
html body #app .btn.ghost, html body #app .btn.quiet, html body #app .login-shell .btn.ghost, html body #app .login-shell .btn.quiet { font-size: 8px; }
html body #app .seg button.on, html body #app .auth-content .seg button.on { font-size: 13px; }


/* Nachgezogen: diese Elemente ebenfalls 13px */
html body #app :is(.seg button,.auth-content .seg button,.tabs .tab,.btn,.btn.ghost,.btn.quiet,.login-shell .btn,.login-shell .btn.ghost,.login-shell .btn.quiet,
  .panel-title,.login-shell .panel-title,.panel h1,.track-claim h1,.track-claim h1 span,.post-title,.post-line,.post-btn,.section-title,.content .section-title) {
  font-size: 13px !important;
}


/* ═══ Header wie im Dashboard-Entwurf: kleineres Logo links, Glocke und Foto rechts, Logo überlappt die Titelplatte ═══ */
html body #app .topbar {
  grid-template-columns: 54px minmax(0, 1fr) auto;
  height: 84px;
  min-height: 84px;
  padding: 10px 12px 0;
  align-items: start;
}
html body #app .topbar::after {
  left: 66px;
  top: 14px;
  width: 128px;
  height: 73px;
  transform: none;
  background-position: left center;
  filter: drop-shadow(0 8px 6px #000) drop-shadow(0 0 10px rgba(0, 0, 0, 0.9));
}
html body #app .topbar-actions { align-items: center; gap: 10px; }
html body #app .topbar-icon { width: 40px; height: 52px; color: var(--gold-text, var(--gold)); }
html body #app .topbar-me {
  width: 56px;
  height: 56px;
  min-width: 56px;
  border: 3px solid var(--gold-dim);
  border-radius: 0;
}
html body #app .badge-dot { top: 8px; right: 4px; min-width: 10px; height: 10px; }


/* Logo wieder mittig, mit Schlagschatten, ragt in die Dashboard-Kachel */
html body #app .topbar::after {
  left: 50%;
  top: 6px;
  width: 170px;
  height: 97px;
  transform: translateX(-50%);
  background-position: center;
  filter: drop-shadow(0 10px 8px #000) drop-shadow(0 4px 3px #000) drop-shadow(0 0 12px rgba(0, 0, 0, 0.9));
  z-index: 8;
}
html body #app .topbar { z-index: 8; }
html body #app .topbar + .content { padding-top: 6px; }


/* Logo als eigenes Bild (frei verschiebbar), ragt nur minimal in die Kachel */
html body #app .topbar:has(.topbar-logo)::after { content: none; }
html body #app .topbar-logo {
  position: absolute;
  left: 50%;
  top: 0;
  width: 160px;
  height: 91px;
  transform: translateX(-50%);
  object-fit: contain;
  z-index: 8;
  filter: drop-shadow(0 10px 8px #000) drop-shadow(0 4px 3px #000) drop-shadow(0 0 12px rgba(0, 0, 0, 0.9));
}
html body #app .topbar::after { top: 0; width: 160px; height: 91px; }
html body #app .topbar + .content { padding-top: 2px; }


/* Tracking-Claim größer */
html body #app .track-claim h1,
html body #app .track-claim h1 span { font-size: 15px !important; line-height: 1.2; }


/* Header bleibt beim Scrollen stehen */
html body #app .topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--s-0, #000);
}
/* Tracking-Claim wie im Editor gesetzt */
html body #app .track-claim h1 { font-size: 26px !important; }
html body #app .track-claim h1 span { font-size: 20px !important; color: var(--gold-text, #ffb200); }


/* Ranglisten: Name und Wert gleich groß, Zusatz klein */
html body #app .rankrow .who,
html body #app .login-shell .rankrow .who { font-size: 13px !important; }
html body #app .rankrow .val,
html body #app .login-shell .rankrow .val { font-size: 13px !important; }
html body #app .rankrow .val small,
html body #app .login-shell .rankrow .val small { font-size: 8px !important; }
html body #app .rankrow .medal { font-size: 13px; }


/* ═══ Dashboard-Board: links Woche, rechts Elite Coins, je Top 3 ═══ */
html body #app .board { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; margin: 0 0 6px; }
html body #app .board-col {
  min-width: 0;
  padding: 8px;
  background: var(--s-0, #0a0c08);
  border: 1px solid var(--line);
  box-shadow: inset 1px 1px 0 #3c4232, inset -1px -1px 0 #05070a;
  display: grid;
  gap: 4px;
  align-content: start;
}
html body #app .board-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 44px;
  margin-bottom: 2px;
  padding: 0 4px;
  border: none;
  background: none;
  cursor: pointer;
  font-family: Gunplay, Oswald, sans-serif;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--gold-text, var(--gold));
  text-align: left;
}
html body #app .board-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 2px 6px;
  align-items: center;
  padding: 6px 6px 6px 8px;
  background: var(--s-0, #070905);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
}
html body #app .board-row:has(.m1) { border-left-color: #c9a84a; }
html body #app .board-row:has(.m2) { border-left-color: #d8dbd6; }
html body #app .board-row:has(.m3) { border-left-color: #cf9968; }
html body #app .board-row .medal { grid-row: 1 / span 2; width: 30px; height: 34px; display: grid; place-items: center; background-size: contain; background-repeat: no-repeat; background-position: center; font-family: Gunplay, Oswald, sans-serif; font-size: 13px; color: #1a1405; clip-path: none; }
html body #app .board-row .medal.m1 { background-image: url("/ui/dfq-rank-gold.webp"); }
html body #app .board-row .medal.m2 { background-image: url("/ui/dfq-rank-silver.webp"); }
html body #app .board-row .medal.m3 { background-image: url("/ui/dfq-rank-bronze.webp"); }
html body #app .board-row .who { font-family: Gunplay, Oswald, sans-serif; font-size: 13px; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body #app .board-row .val { font-family: "Share Tech Mono", monospace; font-size: 13px; color: var(--gold-text, var(--gold)); }
html body #app .board-row .val small { margin-left: 4px; font-size: 8px; letter-spacing: 0.12em; color: var(--c-sek, #9aa08a); }


/* ═══ Dunklere Flächen, Logo 10 % kleiner, schmalere Titelplatte ═══ */
:root { --panel: #0a0c08; --panel-2: #0f120b; --panel-deep: #070905; --ink: #000; }
html body #app .topbar-logo,
html body #app .topbar::after { width: 144px; height: 82px; }
html body #app .section-title,
html body #app .content .section-title { min-height: 48px; margin-bottom: 4px; }
html body #app .topbar { height: 78px; min-height: 78px; }


/* ═══ Schaltflächen wieder flach olivgrün (nicht verkratzt); nur Titelplatten bleiben verkratzt ═══ */
html body #app .btn:not(.ghost):not(.quiet),
html body #app .login-shell .btn:not(.ghost):not(.quiet),
html body #app .button:not(.secondary):not(.danger),
html body #app .seg > button.on,
html body #app .auth-content .seg button.on,
html body #app .tabs .tab.on,
html body #app .chip.on,
html body #app .drawer button.on,
html body #app .coach-seg button.on {
  border: 1px solid var(--gold-dim);
  border-image: none;
  background: linear-gradient(180deg, #62683a, #545a2c);
  box-shadow: inset 1px 1px 0 #7c8050, inset -1px -1px 0 #05070a;
  min-height: 48px;
  padding: 0 14px;
  color: var(--text);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
}
html body #app .tabs .tab.on { min-height: 42px; padding: 0 4px; }
html body #app .seg > button.on,
html body #app .auth-content .seg button.on,
html body #app .coach-seg button.on { min-height: 46px; padding: 0 6px; }

/* "So bleibst du dabei": ursprünglicher olivgrüner Balken */
html body #app .regel h2,
html body #app .sperre h2,
html body #app .cropper-box h2,
html body #app .login-shell .regel h2 {
  display: flex;
  align-items: center;
  min-height: 28px;
  margin: 0 0 6px;
  padding: 0 12px;
  background: linear-gradient(180deg, #4a4f27, #545a2c);
  border: 1px solid var(--b-1, #05070a);
  box-shadow: inset 1px 1px 0 #7c8050;
  font-family: Gunplay, Oswald, sans-serif;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
  text-shadow: none;
}


/* ═══ Zurück zu den Texturen von vorher: olivgrün (aktiv), dunkel (inaktiv), gold (Registrieren) ═══ */
html body #app .btn:not(.ghost):not(.quiet),
html body #app .login-shell .btn:not(.ghost):not(.quiet),
html body #app .button:not(.secondary):not(.danger),
html body #app .seg > button.on,
html body #app .auth-content .seg button.on,
html body #app .tabs .tab.on,
html body #app .chip.on,
html body #app .drawer button.on,
html body #app .coach-seg button.on { border-style: solid; border-color: transparent; background: none; box-shadow: none; margin-bottom: 0; color: var(--text); text-shadow: 0 2px 2px rgba(0,0,0,.7); font-family: Gunplay, Oswald, sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: .08em; font-size: 13px; border-width: 13px; border-image: url("/ui/dfq-button-olive.webp") 46 39 46 44 fill / 13px stretch; min-height: 52px; padding: 0 6px; }
html body #app .btn.ghost,
html body #app .login-shell .btn.ghost,
html body #app .seg > button,
html body #app .auth-content .seg button,
html body #app .tabs .tab,
html body #app .chip,
html body #app .drawer button,
html body #app .coach-eintrag,
html body #app .coach-seg button,
html body #app .button.secondary { border-style: solid; border-color: transparent; background: none; box-shadow: none; margin-bottom: 0; color: var(--text); text-shadow: 0 2px 2px rgba(0,0,0,.7); font-family: Gunplay, Oswald, sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: .08em; font-size: 13px; border-width: 13px; border-image: url("/ui/dfq-button-dark.webp") 46 39 44 44 fill / 13px stretch; min-height: 52px; padding: 0 6px; }
html body #app .btn.quiet,
html body #app .login-shell .btn.quiet { border-style: solid; border-color: transparent; background: none; box-shadow: none; margin-bottom: 0; color: var(--text); text-shadow: 0 2px 2px rgba(0,0,0,.7); font-family: Gunplay, Oswald, sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: .08em; font-size: 13px; border-width: 13px; border-image: url("/ui/dfq-button-dark.webp") 46 39 44 44 fill / 13px stretch; min-height: 52px; padding: 0 6px; color: var(--gold-text, var(--gold)); }
html body #app .seg > button, html body #app .auth-content .seg button, html body #app .coach-seg button,
html body #app .seg > button.on, html body #app .auth-content .seg button.on, html body #app .coach-seg button.on { border-width: 12px; border-image-width: 12px; min-height: 52px; padding: 0 6px; }
html body #app .tabs .tab, html body #app .tabs .tab.on { border-width: 11px; border-image-width: 11px; flex: 0 0 104px; height: auto; min-height: 46px; padding: 0 4px; font-size: 12px; }
html body #app .tabs .tab { color: var(--text-dim); }
html body #app .tabs { border: none; border-image: none; border-top: 1px solid var(--gold-dim); background: var(--s-0, #070905); margin: 0; padding: 6px; }


/* Instagram-Name am Dashboard-Namen, Jetzt-posten als Link */
html body #app .dash-name { flex-wrap: wrap; align-items: baseline; column-gap: 8px; }
html body #app .dash-insta { font-family: "Share Tech Mono", monospace; font-size: 13px; letter-spacing: 0.04em; color: var(--gold-text, var(--gold)); text-decoration: underline; text-underline-offset: 3px; }
html body #app .dash-insta:hover { color: var(--gold-text, #ffb200); }
html body #app a.post-btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }


/* Statue wieder an ihrem Platz */
html body #app .dash-name { flex-wrap: nowrap; align-items: flex-end; column-gap: 6px; }
html body #app .dash-name span { flex: 0 1 auto; min-width: 0; }
html body #app .dash-name .dash-insta { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; padding-bottom: 4px; }
html body #app .dash-name img { flex: none; margin-left: auto; height: 56px; }


/* Name und Instagram untereinander */
html body #app .dash-name { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: end; column-gap: 6px; row-gap: 0; height: auto; min-height: 56px; }
html body #app .dash-name span { grid-column: 1; grid-row: 1; align-self: end; }
html body #app .dash-name .dash-insta { grid-column: 1; grid-row: 2; align-self: start; padding: 0 0 4px; justify-self: start; max-width: 100%; }
html body #app .dash-name img { grid-column: 2; grid-row: 1 / span 2; align-self: end; margin-left: 0; }


/* Titelgrafik "DFQ SOLDAT" statt Textplatte */
html body #app .soldat-title { display: block; width: 100%; height: auto; margin: 0 0 4px; }

/* Member-Dashboard (.dash) nur im Member-Screen stylen – nicht im Coaching-Dashboard
   das dieselbe CSS-Klasse als Container nutzt */
html body #app[data-screen="coach-dashboard"] .dash,
html body #app[data-screen="coach-akte"] .dash {
  height: auto !important;
  border: none !important;
  border-image: none !important;
  background: transparent !important;
  display: block !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
}

/* ── Kompaktes Soldat-Dashboard: alles auf einen Bildschirm ─────────
   Ziel: .dash (260px) + .post-card (~90px) + .goal-row (52px)
         + .board (~190px) = ~592px < verfügbare ~618px          */

/* Profil-Kasten kürzen – Avatar + Gear-Grid bleiben sichtbar */
html body #app .dash { height: 260px !important; }

/* Post-Karte: normaler Fluss statt absoluter Positionierung,
   leeres Foto-Feld ausblenden */
html body #app .post-card {
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  padding-top: 8px !important;
  padding-bottom: 10px !important;
}
html body #app .post-photo,
html body #app .post-line {
  display: none !important;
}
html body #app .post-title,
html body #app .post-foot {
  position: static !important;
  left: auto !important; right: auto !important;
  top: auto !important; bottom: auto !important;
  width: auto !important;
  height: auto !important;
  margin-left: 5% !important;
  margin-right: 5% !important;
}
html body #app .post-title {
  padding-left: 4% !important;
  padding-bottom: 6px !important;
  min-height: 28px !important;
}
html body #app .post-foot {
  flex: 1 !important;
  min-height: 56px !important;
  padding: 0 !important;
  gap: 4px !important;
}

/* Ranking-Header kompakter */
html body #app .board-title { min-height: 36px !important; }

/* Admin · Mitglied bearbeiten
   Die globale Retro-Typografie reduzierte auch Formularinhalte auf 8 px.
   Bearbeitbare Werte bleiben im DFQ-Stil, folgen mit 16 px aber der
   gut lesbaren Apple-orientierten Eingabe-Hierarchie. */
html body #app[data-bereich="admin"] #admin-member-form .field label {
  font-size: 11px !important;
  line-height: 1.35;
  letter-spacing: .11em;
}
html body #app[data-bereich="admin"] #admin-member-form .inp {
  min-height: 48px;
  padding: 0 14px;
  font-family: Oswald, sans-serif;
  font-size: 16px !important;
  line-height: 1.35;
  letter-spacing: 0;
}
html body #app[data-bereich="admin"] #admin-member-form .inp::placeholder {
  font-size: 16px !important;
  opacity: .78;
}
html body #app[data-bereich="admin"] #admin-member-form > .button,
html body #app[data-bereich="admin"] .adm-mitglied .admin-grid .button {
  font-size: 14px !important;
  line-height: 1.2;
}

/* Postfach: Schrift nach DESIGN-PROMPT (Fließtext 14–15 px, Titel 17 px, Zeitangabe 11 px), gegen die 8-px-Regel oben. */
html body #app .msg .msg-head strong { font-size: 20px; line-height: 1.25; }
html body #app .msg .msg-head small { font-size: 11px; }
html body #app .msg .msg-body { font-size: 18px; line-height: 1.55; }
html body #app .msg .button { font-size: 12px; }

/* Postfach im Stil eines Insta-Posteingangs */
html body #app .ig-postfach { max-width: 640px; margin: 0 auto; padding: 0 0 24px; }
html body #app .ig-kopf { display: flex; align-items: center; gap: 12px; padding: 4px 4px 14px; }
html body #app .ig-kopf h1 { flex: 1; min-width: 0; margin: 0; font: 400 26px/1.2 Gunplay, Oswald, sans-serif; color: var(--gold-text, #f3f1e6); overflow-wrap: anywhere; }
html body #app .ig-alle { min-height: 44px; padding: 0 4px; background: none; border: 0; color: var(--gold, #f2a900); font: 500 15px Oswald, sans-serif; cursor: pointer; }
html body #app .ig-liste { list-style: none; margin: 0; padding: 0; }
html body #app .ig-zeile { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 84px; padding: 10px 4px; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--b-1, #1d2018); color: var(--c-prim, #cfd2c4); cursor: pointer; }
html body #app .ig-zeile:active { background: var(--s-1, #10130c); }
html body #app .ig-bild { flex: none; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--s-1, #14170f); border: 2px solid var(--b-1, #2b3025); color: var(--gold-text, #f3f1e6); font: 400 24px/1 Gunplay, Oswald, sans-serif; overflow: hidden; }
html body #app .ig-bild img { width: 70%; height: 70%; object-fit: contain; }
html body #app .ig-zeile.neu .ig-bild.ig-logo { border-color: var(--gold, #f2a900); }
html body #app .ig-bild.ig-warning { background: #3a2a05; border-color: #f2a900; color: var(--gold-text, #f2a900); }
html body #app .ig-bild.ig-rejection { background: #3a1410; border-color: #b33a2c; color: var(--c-rot, #ff8a78); }
html body #app .ig-bild.ig-coins { background: #1c2a10; border-color: #6c9a36; color: var(--c-gruen, #b7e07a); }
html body #app .ig-mitte { flex: 1; min-width: 0; display: grid; gap: 3px; }
html body #app .ig-mitte strong { font: 400 19px/1.25 Oswald, sans-serif; color: var(--c-prim, #cfd2c4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body #app .ig-zeile.neu .ig-mitte strong { color: #fff; font-weight: 700; }
html body #app .ig-vorschau { font: 400 17px/1.3 Oswald, sans-serif; color: #8e9282; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body #app .ig-zeile.neu .ig-vorschau { color: var(--c-prim, #d5d8cb); }
html body #app .ig-rechts { flex: none; display: grid; justify-items: end; gap: 8px; }
html body #app .ig-rechts time { font: 400 13px "Share Tech Mono", monospace; color: #8e9282; }
html body #app .ig-punkt { width: 10px; height: 10px; border-radius: 50%; background: var(--gold, #f2a900); }
html body #app .ig-detail .ig-kopf { position: sticky; top: 0; background: var(--s-0, #000); z-index: 2; }
html body #app .ig-detail .ig-bild { width: 40px; height: 40px; font-size: 18px; }
html body #app .ig-detail .ig-kopf h1 { font-size: 20px; }
html body #app .ig-zurueck { min-width: 44px; min-height: 44px; background: none; border: 0; color: var(--gold-text, #f3f1e6); font: 400 34px/1 Oswald, sans-serif; cursor: pointer; }
html body #app .ig-blase { max-width: 88%; margin: 8px 0 6px; padding: 14px 16px; background: var(--s-2, #1b1e15); border: 1px solid var(--b-1, #2b3025); border-radius: 20px 20px 20px 6px; color: var(--gold-text, #f3f1e6); font: 400 20px/1.5 Oswald, sans-serif; overflow-wrap: anywhere; }
html body #app .ig-blase.warning { border-color: #f2a900; }
html body #app .ig-blase.rejection { border-color: #b33a2c; }
html body #app .ig-datum { display: block; padding: 0 6px; font: 400 12px "Share Tech Mono", monospace; color: #8e9282; }
html body #app .ig-kopf .ig-alle + .ig-alle { margin-left: 4px; }
html body #app .ig-kreis { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 2px solid #5a604a; background: transparent; }
html body #app .ig-zeile.gewaehlt .ig-kreis { border-color: var(--gold, #f2a900); background: var(--gold, #f2a900); box-shadow: inset 0 0 0 5px #000; }
html body #app .ig-wahl { padding-bottom: 96px; }
html body #app .ig-leiste { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--s-0, #070905); border-top: 1px solid var(--b-1, #2b3025); }
html body #app .ig-lesen { display: block; width: 100%; max-width: 608px; margin: 0 auto; min-height: 50px; border: 0; border-radius: 25px; background: var(--gold, #f2a900); color: #1a1405; font: 600 17px Oswald, sans-serif; cursor: pointer; }
html body #app .ig-lesen:disabled { background: var(--s-3, #2b3025); color: #8e9282; cursor: default; }