/*
 * Der Kundenbereich — im Design von Osiris.
 *
 * Dieselben Gestaltungswerte wie Panel, App und Website: Korall als Akzent,
 * Serife für Überschriften, flache Flächen mit Rändern statt Schatten, dunkel
 * als Vorgabe. Die Tokens sind bewusst dieselben Zahlen wie in panel/css und
 * web/css — jede Seite läuft für sich, darum stehen sie hier noch einmal.
 */

:root {
  --accent: #d97757;
  --accent-strong: #c2603f;
  --accent-08: color-mix(in oklab, var(--accent) 8%, transparent);

  --r-sm: 6px; --r: 8px; --r-md: 12px; --r-lg: 16px; --r-pill: 999px;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px;

  --font-ui: 'Styrene B', ui-sans-serif, -apple-system, 'Segoe UI', Inter, system-ui, sans-serif;
  --font-serif: Copernicus, 'Tiempos Headline', ui-serif, 'Iowan Old Style', Georgia, serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --ease: cubic-bezier(0.32, 0.72, 0, 1);
}

:root, :root[data-theme='dark'] {
  color-scheme: dark;
  --bg: #151515; --bg-sunken: #111111;
  --surface: #1f1f1f; --surface-2: #2d2d2d; --surface-3: #363636;
  --fg: #f0efec; --fg-2: #c4c4c0; --fg-3: #8a8a88; --fg-4: #4a4a48;
  --line: #232323; --line-mid: #363636; --line-strong: #4b4b4b;
  --ok: #9bb377; --warn: #d9a441; --err: #d96a5a;
}
:root[data-theme='light'] {
  color-scheme: light;
  --bg: #faf9f5; --bg-sunken: #f5f4ed;
  --surface: #ffffff; --surface-2: #f0eee6; --surface-3: #e8e5da;
  --fg: #141413; --fg-2: #5c5a54; --fg-3: #85827a; --fg-4: #b0ada3;
  --line: #e8e5da; --line-mid: #ddd9cc; --line-strong: #d6d2c4;
  --ok: #788c5d; --warn: #b8842a; --err: #bc4a3c;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: var(--font-ui); font-size: 15px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  /* Kopf, Inhalt, Fuss untereinander: So steht die Fusszeile auch dann unten,
     wenn der Inhalt den Schirm nicht fuellt — und sie steht auf der
     Anmeldeseite genauso wie drinnen. Das Impressum muss von hier aus
     erreichbar sein, bevor sich jemand anmeldet. */
  min-height: 100dvh; display: flex; flex-direction: column;
}
.tor, #bereich { flex: 1 0 auto; }
h1, h2, h3 { font-family: var(--font-serif); font-weight: 500; line-height: 1.15; margin: 0; text-wrap: balance; }
a { color: var(--accent); text-decoration: none; }
code, .mono { font-family: var(--font-mono); }
small { font-size: 0.8rem; }

.mark path { fill: none; stroke: var(--accent); stroke-linecap: round; }

/* ================================================================ Knopf */
.knopf {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  padding: 9px 16px; border-radius: var(--r-sm);
  border: 1px solid var(--line-mid); background: var(--surface-2); color: var(--fg);
  font: 500 0.92rem/1 var(--font-ui); cursor: pointer; white-space: nowrap;
  transition: background 0.12s var(--ease), border-color 0.12s var(--ease), transform 0.1s var(--ease);
}
.knopf:hover { background: var(--surface-3); border-color: var(--line-strong); }
.knopf:active { transform: translateY(1px); }
.knopf:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.knopf.haupt { background: var(--accent); border-color: var(--accent); color: #1a1008; }
.knopf.haupt:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.knopf.still { background: transparent; }
.knopf.klein { padding: 5px 10px; font-size: 0.82rem; }
.knopf.symbol { padding: 8px; background: transparent; border-color: transparent; color: var(--fg-3); }
.knopf.symbol:hover { background: var(--surface-2); color: var(--fg); }

/* ================================================================ Felder */
label { display: block; font-size: 0.82rem; color: var(--fg-3); margin-bottom: 6px; }
input {
  width: 100%; padding: 9px 12px; border-radius: var(--r-sm);
  border: 1px solid var(--line-mid); background: var(--bg); color: var(--fg);
  font: inherit; font-size: 0.92rem;
}
input:focus { outline: none; border-color: var(--accent); }
.feld { margin-bottom: var(--s-4); text-align: left; }
.hinweis { display: block; color: var(--fg-3); margin-top: 6px; }
.fehler { color: var(--err); font-size: 0.85rem; min-height: 1.2em; margin-top: var(--s-2); }
.gut { color: var(--ok); font-size: 0.88rem; margin-top: var(--s-3); }

/* ================================================================ Tor (An-/Abmeldung) */
/* Kein `min-height: 100vh` mehr: Der Koerper ist eine Spalte, und `flex: 1`
   weiter oben gibt dieser Flaeche ohnehin allen Platz, der uebrig ist. Mit
   beidem zusammen stand die Fusszeile — und damit das Impressum — unter dem
   sichtbaren Rand. */
.tor { display: grid; place-items: center; padding: 24px; }
.tor-karte {
  width: min(400px, 100%); padding: var(--s-8);
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface);
  text-align: center;
}
.tor-karte .zeichen {
  width: 72px; height: 72px; margin: 0 auto var(--s-5); display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--accent-08);
}
.tor-karte h1 { font-size: clamp(1.5rem, 5vw, 1.9rem); margin-bottom: var(--s-2); }
.tor-karte #tor-unter { color: var(--fg-3); font-size: 0.9rem; margin: 0 0 var(--s-6); }

.reiter {
  display: flex; gap: var(--s-1); padding: var(--s-1); margin-bottom: var(--s-6);
  background: var(--bg-sunken); border: 1px solid var(--line); border-radius: var(--r-md);
}
.reiter-knopf {
  flex: 1; padding: 8px 12px; border: 0; border-radius: var(--r-sm); cursor: pointer;
  background: transparent; color: var(--fg-3); font: 500 0.88rem/1 var(--font-ui);
  transition: background 0.12s var(--ease), color 0.12s var(--ease);
}
.reiter-knopf[aria-selected='true'] { background: var(--surface-2); color: var(--fg); }
.reiter-knopf:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ================================================================ Kopf */
:root { --steuer-h: 36px; }
@media (max-width: 560px) { :root { --steuer-h: 32px; } }

.kopf {
  display: flex; align-items: center; gap: var(--s-4);
  height: 60px; padding-inline: max(20px, calc((100vw - 1000px) / 2));
  background: color-mix(in oklab, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 10;
}
.marke { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.marke b { font-family: var(--font-serif); font-size: 1.12rem; font-weight: 500; letter-spacing: 0.01em; }
.marke span { color: var(--fg-3); font-size: 0.9rem; }
.kopf .rechts { margin-left: auto; display: flex; align-items: center; gap: var(--s-2); }
/* Eine Zeile, eine Hoehe — dieselbe Regel wie im Kopf der Website. */
.kopf .rechts > .knopf { height: var(--steuer-h); padding-block: 0; }
.kopf .rechts > .knopf.symbol { width: var(--steuer-h); padding: 0; }
.wer { color: var(--fg-3); font-size: 0.85rem; max-width: 34vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Auf dem Handy tritt der Zusatz „Mein Konto" zurueck und die Anschrift des
   Angemeldeten verschwindet — sie steht ohnehin in den Einstellungen. */
@media (max-width: 560px) {
  .kopf { padding-inline: 20px; gap: var(--s-3); }
  .marke span { display: none; }
  .wer { display: none; }
}

/* ================================================================ Fläche */
.flaeche { max-width: 1000px; margin: 0 auto; padding: var(--s-8) max(20px, 4vw) var(--s-12); }
.abschnitt { margin-bottom: var(--s-10); }
.ueber {
  font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent); display: block; margin-bottom: var(--s-2);
}
.abschnitt > h2 { font-size: clamp(1.35rem, 3.4vw, 1.7rem); margin-bottom: var(--s-5); }

.karte { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); padding: var(--s-6); }
.karte-text { margin: 0 0 var(--s-4); color: var(--fg-2); font-size: 0.9rem; }

/* Der Weg fuer die, die noch keine Nummer haben. Er steht unter dem Feld,
   nicht darueber: Wer eine Lizenz hat, soll sie eintragen koennen, ohne erst
   an einer Einladung vorbeizulesen. */
.anfrage { margin: var(--s-4) 0 0; color: var(--fg-3); font-size: 0.88rem; }
.anfrage b { color: var(--fg-2); font-family: var(--font-mono); font-weight: 500; }

.liz-zeile { display: flex; gap: var(--s-3); }
.liz-zeile input { font-family: var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; }
@media (max-width: 520px) { .liz-zeile { flex-direction: column; } }

/* ================================================================ Lizenz-Karten */
.liz-liste { display: grid; gap: var(--s-3); }
.liz {
  display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface);
  padding: var(--s-4) var(--s-5);
}
.liz .nummer { font-family: var(--font-mono); font-size: 0.92rem; font-weight: 500; }
.liz .zeug { color: var(--fg-3); font-size: 0.82rem; margin-top: 3px; }
.liz .rechts { margin-left: auto; display: flex; align-items: center; gap: var(--s-3); }

.plakette {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: var(--r-pill); font-size: 0.78rem; font-weight: 500;
  border: 1px solid var(--line-mid);
}
.plakette .punkt { width: 6px; height: 6px; border-radius: 50%; }
.plakette.aktiv { color: var(--ok); } .plakette.aktiv .punkt { background: var(--ok); }
.plakette.gesperrt { color: var(--err); } .plakette.gesperrt .punkt { background: var(--err); }
.plakette.abgelaufen { color: var(--warn); } .plakette.abgelaufen .punkt { background: var(--warn); }

.leer { color: var(--fg-3); font-size: 0.9rem; padding: var(--s-6); text-align: center;
  border: 1px dashed var(--line-mid); border-radius: var(--r-md); }

/* ================================================================ Fuss */
.fuss {
  flex: none;
  display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap;
  padding: var(--s-5) max(20px, calc((100vw - 1000px) / 2));
  border-top: 1px solid var(--line);
  color: var(--fg-3); font-size: 0.84rem;
}
.fuss-nav { display: flex; gap: var(--s-5); flex-wrap: wrap; margin-left: auto; }
.fuss-nav a { color: var(--fg-3); }
.fuss-nav a:hover { color: var(--fg); }
@media (max-width: 560px) {
  .fuss { padding-inline: 20px; gap: var(--s-3); }
  .fuss-nav { gap: var(--s-4); margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }