/* Living Room Barcamp — Design-Tokens
   Direkt übernehmbar. Keine Abhängigkeiten, kein Build-Step. */

:root {
  /* --- Fläche & Text --- */
  --paper:        #FBF8F3;  /* App-Hintergrund, warm */
  --paper-raised: #F3EDE4;  /* Karte, Feld, Gruppe */
  --paper-stage:  #EFE7DA;  /* nur Beamer, entblendet */
  --ink:          #1A1614;  /* Text, Überschrift */
  --ink-soft:     #4A423E;  /* Fließtext, Sekundär */
  --ink-mute:     #7A706A;  /* Meta, Platzhalter */

  /* --- Linien --- */
  --line:         #E0D6C8;  /* 1px, Handy/Desktop */
  --line-strong:  #C9BCA9;  /* Feldrahmen */
  --line-stage:   #1A1614;  /* Beamer: nur Tinte, 3px */

  /* --- Akzent Rot (Marke, Stehlampe) --- */
  --red:          #C0392B;
  --red-hover:    #A32F22;
  --red-press:    #8A2519;
  --red-tint:     #F7E7E3;

  /* --- Akzent Messing (sekundär, "jetzt dran", Fokus) --- */
  --brass:        #A67C2E;
  --brass-ink:    #8A6420;  /* Text auf brass-tint */
  --brass-tint:   #F5EBD6;

  /* --- Zustände --- */
  --selected-bg:  #C0392B;
  --selected-ink: #FBF8F3;
  --disabled-bg:  #EDE7DE;
  --disabled-ink: #A9A09A;
  --error:        #97231A;
  --error-tint:   #FBEAE7;
  --success:      #3E6B4F;
  --success-tint: #E7F0E9;
  --focus:        #A67C2E;

  /* --- Typo --- */
  --font-display: 'EB Garamond', Georgia, serif;
  --font-ui:      -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Handy / Desktop: Größe / Zeilenhöhe */
  --t-hero-size: 40px;   --t-hero-lh: 1.08;
  --t-h1-size:   32px;   --t-h1-lh:   1.15;
  --t-h2-size:   24px;   --t-h2-lh:   1.25;
  --t-h3-size:   20px;   --t-h3-lh:   1.3;
  --t-body-size: 18px;   --t-body-lh: 1.5;   /* mobile Untergrenze */
  --t-small-size:16px;   --t-small-lh:1.45;
  --t-label-size:13px;   --t-label-lh:1.3;   /* --font-ui, .16em, uppercase */
  --t-num-size:  15px;                       /* --font-ui, tabular-nums */

  /* Beamer, relativ zur Projektionsfläche */
  --p-hero:  7.5vw;   /* Eventname */
  --p-h1:    4.4vw;
  --p-h2:    2.6vw;
  --p-body:  1.7vw;   /* = 32px @1920, Untergrenze */
  --p-label: 1.05vw;  /* = 20px @1920 */

  /* --- Abstände (4er-Basis) --- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
  --tap: 56px;  /* Mindesthöhe Touch-Ziel, nie unter 44px */

  /* --- Radien --- */
  --r-sm: 3px;  --r-md: 8px;  --r-lg: 14px;  --r-pill: 999px;

  /* --- Schatten (warm getönt) --- */
  --sh-1: 0 1px 2px rgba(26,22,20,.06);
  --sh-2: 0 2px 8px rgba(26,22,20,.09);
  --sh-3: 0 10px 28px rgba(26,22,20,.14);

  /* --- Rahmenstärken --- */
  --bw-1: 1px; --bw-2: 2px; --bw-3: 3px;  /* 3px = beamertauglich */
}

/* Schrift: eine Google-Familie, drei Schnitte
   <link href="https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&display=swap" rel="stylesheet"> */

/* Basis */
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--t-body-size);
  line-height: var(--t-body-lh);
  text-wrap: pretty;
}

/* Fokus – überall gleich, nie Browser-Default */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* Labels, Zahlen, Tabellen: System-Sans */
.label {
  font-family: var(--font-ui);
  font-size: var(--t-label-size);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.num { font-family: var(--font-ui); font-variant-numeric: tabular-nums; }

/* Buttons */
.btn {
  min-height: var(--tap);
  border: 0;
  border-radius: var(--r-md);
  font-family: var(--font-display);
  font-size: 20px;
  padding: 0 var(--s-5);
  cursor: pointer;
}
.btn-primary { background: var(--red); color: var(--selected-ink); box-shadow: var(--sh-1); }
.btn-primary:hover { background: var(--red-hover); }
.btn-primary:active { background: var(--red-press); box-shadow: inset 0 2px 4px rgba(0,0,0,.25); }
.btn-primary:disabled { background: var(--disabled-bg); color: var(--disabled-ink); box-shadow: none; cursor: default; }

.btn-secondary { background: transparent; color: var(--ink); border: var(--bw-2) solid var(--line-strong); }
.btn-secondary:hover { border-color: var(--ink); background: var(--paper-raised); }

.btn-ghost { min-height: 44px; background: transparent; color: var(--red-press);
  text-decoration: underline; text-underline-offset: 3px; padding: 0; }

/* Eingabefeld */
.input {
  min-height: var(--tap);
  background: var(--paper);
  border: var(--bw-1) solid var(--line-strong);
  border-radius: var(--r-md);
  font-family: var(--font-display);
  font-size: 20px;
  padding: 0 var(--s-4);
  color: var(--ink);
}
.input:focus { border: var(--bw-2) solid var(--ink); outline: none; }
.input[aria-invalid="true"] { border: var(--bw-2) solid var(--error); background: var(--error-tint); }
.input-error { font-family: var(--font-ui); font-size: var(--t-label-size); color: var(--error); }

/* Karte */
.card {
  background: var(--paper);
  border: var(--bw-1) solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-4) 18px;
  box-shadow: var(--sh-1);
}
.card-now { background: var(--brass-tint); border: var(--bw-2) solid var(--brass); }

/* Auswahlknopf */
.choice {
  min-height: var(--tap);
  background: var(--paper);
  border: var(--bw-2) solid var(--line-strong);
  border-radius: var(--r-md);
  font-family: var(--font-display);
  font-size: 19px;
  text-align: left;
  padding: 0 18px;
  cursor: pointer;
}
.choice:hover { border-color: var(--ink); background: var(--paper-raised); }
.choice[aria-pressed="true"] { background: var(--selected-bg); color: var(--selected-ink); border-color: var(--selected-bg); }
.choice-none { min-height: 48px; border: var(--bw-1) dashed var(--line-strong); background: transparent; color: var(--ink-soft); font-size: 17px; }

/* Badge */
.badge { font-family: var(--font-ui); font-size: var(--t-label-size); letter-spacing: .06em;
  border-radius: var(--r-pill); padding: 6px 14px; background: var(--paper-raised); color: var(--ink-soft); }
.badge-red { background: var(--red-tint); color: var(--red-press); }
.badge-brass { background: var(--brass-tint); color: var(--brass-ink); }
.badge-success { background: var(--success-tint); color: var(--success); }

/* Fortschritt */
.bar { height: 10px; background: var(--disabled-bg); border-radius: var(--r-pill); overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--red); }
.bar-stage { height: 34px; background: var(--paper-stage); border: var(--bw-3) solid var(--line-stage); border-radius: 0; }

/* Statuspunkt "Aufnahme läuft" – Text steht immer daneben */
.dot { width: 14px; height: 14px; border-radius: var(--r-pill); background: var(--red); flex: none; }
.dot-idle { background: transparent; border: var(--bw-2) solid var(--red); }
@media (prefers-reduced-motion: no-preference) {
  .dot-live { animation: lr-pulse 1.6s ease-in-out infinite; }
}
@keyframes lr-pulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.45; transform:scale(.82); } }