/* ==========================================================================
   juscool-bruecke.css — ältere Seiten im neuen Design
   --------------------------------------------------------------------------
   Anmeldefenster (juscool-auth.css), Passseite und Konto sind mit den Tokens
   von juscool-ui.css gebaut. Ihre Logik hängt an Zahlung und Anmeldung; die
   Oberfläche neu zu schreiben hiesse, dort etwas zu riskieren, was mit dem
   Design nichts zu tun hat. Stattdessen zeigen die alten Namen hier auf die
   neuen Werte aus juscool-system.css.

   Wird NACH juscool-ui.css, juscool-themes.css und juscool-system.css
   geladen. Der Selektor `:root[data-theme]` ist Absicht: juscool-themes.css
   setzt seine Farbwelten mit genau dieser Spezifität, also gewinnt hier die
   spätere Regel.
   ========================================================================== */
:root, :root[data-theme] {
  --jc-paper: var(--grund);
  --jc-paper-2: var(--flaeche-2);
  --jc-panel: var(--flaeche);
  --jc-ink: var(--tinte);
  --jc-ink-2: color-mix(in srgb, var(--tinte) 86%, var(--grund));
  --jc-ink-3: var(--gedaempft);
  --jc-ink-4: var(--linie);
  --jc-line: var(--linie);
  --jc-line-2: var(--linie);
  --jc-accent: var(--akzent);
  --jc-accent-edge: var(--akzent-kante);
  --jc-accent-soft: var(--akzent-sanft);
  --jc-accent-ink: var(--akzent-text);
  --jc-teal: var(--gut);
  --jc-teal-edge: var(--gut-kante);
  --jc-teal-soft: var(--gut-sanft);
  --jc-red: var(--falsch);
  --jc-red-edge: var(--falsch);
  --jc-dark: var(--tinte);
  --jc-r-sm: var(--rund-s);
  --jc-r: var(--rund);
  --jc-r-lg: var(--rund-l);
  --jc-r-xl: 28px;
  --font-ui: var(--schrift);
  --font-display: var(--schrift-titel);
  /* Die drei Grade aus STYLEGUIDE.md, auf die Skala des Systems gelegt. */
  --text-xs: var(--t-1);
  --text-sm: var(--t-1);
  --text-base: var(--t-2);

  --bg: var(--grund);
  --bg2: var(--flaeche-2);
  --panel: var(--flaeche);
  --ink: var(--tinte);
  --muted: var(--gedaempft);
  --faint: var(--linie);
  --border: var(--linie);
  --border-strong: var(--linie);
  --accent: var(--akzent);
  --accent-edge: var(--akzent-kante);
  --accent-soft: var(--akzent-sanft);
  --accent-ink: var(--akzent-text);
}

/* Caprasimo hat nur einen Schnitt; die Variationsachsen von Fraunces
   (SOFT, WONK), die juscool-ui.css setzt, gibt es hier nicht. */
h1, h2, h3, .jc-h1, .jc-h2, .jc-auth-title { font-family: var(--schrift-titel); font-weight: 400; font-variation-settings: normal; }

/* Die Knöpfe der älteren Seiten: Pillen mit Kante wie im neuen System. */
.jc-btn { border-radius: 999px; font-family: var(--schrift); }
/* juscool-ui.css malt .jc-btn in den Kantenton, weil Weiss auf dem alten
   Pfirsich nicht trug. Terrakotta trägt Weiss (4,8:1), und im Dunkeln steht
   dunkle Schrift darauf. So sieht der Knopf auf Konto und Pässen aus wie
   .knopf-primaer auf der Startseite und nicht eine Stufe dunkler. */
.jc-btn:not(.ghost), .jc-btn:not(.ghost):hover { background: var(--c, var(--akzent)); color: var(--akzent-tinte); }
.jc-btn-primary, .jc-auth-submit { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-tinte); box-shadow: 0 4px 0 var(--akzent-kante); border-radius: 999px; }

/* Karten liegen flach wie .karte im System; die Kante nach unten war der
   Bauklotz der alten Oberfläche. Hier und nicht in juscool-ui.css, weil
   office.html dieselbe Datei ohne das neue System lädt. */
.jc-card { box-shadow: none; }

/* Das Anmeldefenster. */
.jc-auth-veil { background: rgb(30 27 23 / 55%); }
.jc-auth-card { background: var(--flaeche); color: var(--tinte); border: 1.5px solid var(--linie); border-radius: 28px; font-family: var(--schrift); }
.jc-field input, .jc-auth-card input { background: var(--grund); border: 1.5px solid var(--linie); border-radius: var(--rund); color: var(--tinte); }
.jc-field input:focus, .jc-auth-card input:focus { border-color: var(--akzent); outline: none; }