/* =============================================================================
   Zappfix — Kundenbereich und Admin (13.11.2026)

   BRIEF
   Zweck: Kunden verwalten Lizenz und Geraete, koppeln den Fernseher per Code;
   der Betreiber sieht Kunden, Kaeufe, Stoerungen.
   Zielgruppe: Endkunden (meist am Handy, waehrend der Fernseher den Code zeigt)
   und ein Betreiber am PC.
   Hauptaktion: Geraet koppeln (Code eingeben, bestaetigen).
   Tonalitaet: klar, zuegig, verlaesslich.
   Marke: Zappfix (neu). Zeichen = Blitz in abgerundetem Quadrat; Akzent Lime
   („Zapp") auf getoenter Tinte/Papier. Keine Fremdschriften: Dashboards
   laufen auf der Systemschrift (schnell, DSGVO-neutral).

   RICHTUNG: Tech/Praezision. Dichte Information, grosse Zahlen fuer das,
   was zaehlt (der Koppelcode, der Lizenzstand), Linien statt Schatten,
   ein Akzent nur fuer Aktion und Blickfang.
   SIGNATURE: der Koppelcode als uebergrosse, gesperrte Ziffern in einer
   „Ticket"-Flaeche mit Perforationskante — das Ding, das man vom Fernseher
   abliest und am Handy eintippt.
   Skala 1.2 (UI), Radien 6/10/14, Motion 150–250 ms, Kurve (.2,.7,.2,1).
   ========================================================================== */

@layer reset, tokens, basis, bausteine, seiten, hilfen;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; }
  body { min-height: 100svh; line-height: 1.5; -webkit-font-smoothing: antialiased; }
  img, svg { display: block; max-width: 100%; }
  input, button, select, textarea { font: inherit; color: inherit; min-width: 0; }
  /* Grid- und Flex-Kinder duerfen schrumpfen: ohne das drueckt die
     Eigenbreite eines Code-Feldes (gesperrte Ziffern) die Seite ueber den
     Rand – gemessen bei 390 px am 13.11.2026 (+97 px). */
  .raster > *, .formular > *, .feld > *, .eintrag > *, .lizenz > *, .einstieg > *, .kopf-innen > * { min-width: 0; }
  button { cursor: pointer; }
  h1, h2, h3 { line-height: 1.15; text-wrap: balance; overflow-wrap: anywhere; }
  p { text-wrap: pretty; }
  table { border-collapse: collapse; }
}

@layer tokens {
  :root {
    --hue: 122;                                   /* Lime — der „Zapp" (108 wirkte senfgelb, gemessen 13.11.2026) */
    --hue-tinte: 250;                             /* kuehle Tinte fuer Text */
    --bg:          oklch(98% .007 var(--hue));
    --surface:     oklch(100% 0 0);
    --surface-2:   oklch(96% .012 var(--hue));
    --line:        oklch(88% .015 var(--hue));
    --line-stark:  oklch(78% .02 var(--hue));
    --text:        oklch(24% .02 var(--hue-tinte));
    --text-muted:  oklch(48% .02 var(--hue-tinte));
    --accent:      oklch(84% .21 var(--hue));       /* Flaeche: Lime */
    --accent-text: oklch(46% .15 135);              /* Text/Links: tiefes Gruen, 4.5:1 auf Weiss */
    --on-accent:   oklch(20% .03 var(--hue-tinte));
    --focus:       oklch(60% .18 135);
    --success:     oklch(52% .15 145);
    --success-bg:  oklch(95% .05 145);
    --danger:      oklch(52% .19 25);
    --danger-bg:   oklch(95% .04 25);
    --warn:        oklch(60% .15 70);
    --warn-bg:     oklch(96% .05 80);

    --schrift: ui-sans-serif, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, "Roboto Mono", monospace;

    --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem;
    --r-1: 6px; --r-2: 10px; --r-3: 14px;
    --t-100: .8rem; --t-200: .9rem; --t-300: 1rem; --t-400: 1.2rem; --t-500: 1.44rem; --t-600: clamp(1.7rem, 1.3rem + 1.6vw, 2.2rem);
    --dauer: 180ms; --kurve: cubic-bezier(.2, .7, .2, 1);
    --breite: 1120px; --gutter: clamp(1rem, .5rem + 2.5vw, 2.5rem);
    color-scheme: light dark;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --bg:          oklch(16% .012 var(--hue-tinte));
      --surface:     oklch(20% .014 var(--hue-tinte));
      --surface-2:   oklch(24% .016 var(--hue-tinte));
      --line:        oklch(100% 0 0 / .1);
      --line-stark:  oklch(100% 0 0 / .22);
      --text:        oklch(95% .01 var(--hue));
      --text-muted:  oklch(74% .02 var(--hue));
      --accent:      oklch(82% .19 var(--hue));
      --accent-text: oklch(84% .17 115);
      --on-accent:   oklch(18% .03 var(--hue-tinte));
      --focus:       oklch(86% .16 115);
      --success:     oklch(78% .15 145);
      --success-bg:  oklch(26% .05 145);
      --danger:      oklch(76% .15 25);
      --danger-bg:   oklch(27% .06 25);
      --warn:        oklch(80% .14 80);
      --warn-bg:     oklch(27% .05 80);
    }
  }
}

@layer basis {
  html { font-family: var(--schrift); color: var(--text); background: var(--bg); hyphens: auto; }
  /* minmax(0, 1fr) statt der impliziten auto-Spalte: sonst waechst die
     Spalte auf die Eigenbreite des breitesten Inhalts (Reiterleiste,
     Tabellen) und die ganze Seite scrollt waagerecht. Gemessen 13.11.2026. */
  body { display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: minmax(0, 1fr); }
  a { color: var(--accent-text); text-underline-offset: .15em; }
  a:hover { text-decoration-thickness: 2px; }
  :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--r-1); }
  .skip { position: absolute; left: -999px; top: var(--s-2); background: var(--surface); padding: var(--s-2) var(--s-4); border-radius: var(--r-1); z-index: 100; }
  .skip:focus { left: var(--s-2); }
  code, .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
  @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition-duration: 0ms !important; } }
}

@layer bausteine {
  /* ---- Kopf ---- */
  .kopf { border-bottom: 1px solid var(--line); background: var(--surface); position: sticky; top: 0; z-index: 10; }
  .kopf-innen { max-width: var(--breite); margin-inline: auto; padding: var(--s-3) var(--gutter); display: flex; align-items: center; gap: var(--s-4); min-height: 60px; }
  .marke { display: flex; align-items: center; gap: var(--s-3); text-decoration: none; color: inherit; font-weight: 650; letter-spacing: -.01em; font-size: var(--t-400); min-height: 44px; }
  .marke svg { inline-size: 32px; block-size: 32px; }
  .marke small { font-weight: 500; color: var(--text-muted); font-size: var(--t-100); letter-spacing: .08em; text-transform: uppercase; margin-left: var(--s-2); }
  .kopf-rechts { margin-left: auto; display: flex; align-items: center; gap: var(--s-3); color: var(--text-muted); font-size: var(--t-200); min-width: 0; }
  .kopf-rechts .mail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40vw; }

  /* ---- Rumpf ---- */
  main { max-width: var(--breite); width: 100%; margin-inline: auto; padding: var(--s-6) var(--gutter) var(--s-8); }
  .fuss { border-top: 1px solid var(--line); color: var(--text-muted); font-size: var(--t-100); }
  .fuss-innen { max-width: var(--breite); margin-inline: auto; padding: var(--s-5) var(--gutter); display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); }
  .fuss a { color: inherit; display: inline-block; padding-block: .85rem; margin-block: -.85rem; }

  /* ---- Abschnitte ---- */
  .abschnitt { padding-block: var(--s-6); border-top: 1px solid var(--line); }
  .abschnitt:first-child { border-top: 0; padding-top: 0; }
  .abschnitt-kopf { display: flex; align-items: baseline; gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-4); }
  .abschnitt-kopf h2 { font-size: var(--t-500); letter-spacing: -.015em; }
  .abschnitt-kopf p { color: var(--text-muted); max-width: 60ch; }
  .label { font-size: var(--t-100); letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--text-muted); }
  h1 { font-size: var(--t-600); letter-spacing: -.02em; }
  .einleitung { color: var(--text-muted); max-width: 60ch; margin-top: var(--s-2); font-size: var(--t-300); }

  /* ---- Flaechen ---- */
  .flaeche { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-3); padding: var(--s-5); }
  .flaeche-2 { background: var(--surface-2); border-radius: var(--r-2); padding: var(--s-4); }
  .raster { display: grid; gap: var(--s-4); }
  .raster-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
  .raster-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }

  /* ---- Kennzahl ---- */
  .kennzahl { border: 1px solid var(--line); border-radius: var(--r-2); padding: var(--s-4) var(--s-5); background: var(--surface); }
  .kennzahl .wert { font-size: var(--t-600); font-weight: 650; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1; margin-top: var(--s-2); }
  .kennzahl.hervor { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }

  /* ---- Formulare ---- */
  .feld { display: grid; gap: var(--s-2); }
  .feld label { font-weight: 600; font-size: var(--t-200); }
  .feld .hinweis { color: var(--text-muted); font-size: var(--t-100); }
  .eingabe { width: 100%; min-height: 48px; padding: var(--s-3) var(--s-4); border: 1px solid var(--line-stark); border-radius: var(--r-2); background: var(--surface); transition: border-color var(--dauer) var(--kurve); }
  .eingabe:focus { border-color: var(--focus); outline: none; box-shadow: 0 0 0 3px color-mix(in oklch, var(--focus) 30%, transparent); }
  .eingabe[aria-invalid="true"] { border-color: var(--danger); }
  .eingabe-code { font-family: var(--mono); font-size: var(--t-500); letter-spacing: .25em; text-align: center; text-transform: uppercase; }
  .formular { display: grid; gap: var(--s-4); max-width: 440px; }
  .zeile { display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: center; }

  /* ---- Knoepfe ---- */
  .knopf { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: 48px; padding: var(--s-3) var(--s-5); border-radius: var(--r-2); border: 1px solid transparent; font-weight: 600; text-decoration: none; transition: transform var(--dauer) var(--kurve), background var(--dauer) var(--kurve), border-color var(--dauer) var(--kurve); }
  .knopf:active { transform: scale(.98); }
  .knopf:disabled { opacity: .55; cursor: wait; }
  .knopf-primaer { background: var(--accent); color: var(--on-accent); }
  .knopf-primaer:hover { background: color-mix(in oklch, var(--accent) 88%, white); }
  .knopf-sekundaer { background: var(--surface); border-color: var(--line-stark); }
  .knopf-sekundaer:hover { border-color: var(--text-muted); }
  .knopf-leise { background: transparent; color: var(--accent-text); padding-inline: var(--s-3); min-height: 40px; }
  .knopf-gefahr { background: var(--surface); color: var(--danger); border-color: color-mix(in oklch, var(--danger) 40%, var(--line)); }
  .knopf-gefahr:hover { background: var(--danger-bg); }
  .knopf-klein { min-height: 44px; padding: var(--s-2) var(--s-3); font-size: var(--t-200); }
  @media (pointer: fine) { .knopf-klein { min-height: 36px; } }

  /* ---- Meldungen ---- */
  .meldung { border-radius: var(--r-2); padding: var(--s-3) var(--s-4); border: 1px solid; font-size: var(--t-200); }
  .meldung-ok { background: var(--success-bg); border-color: color-mix(in oklch, var(--success) 40%, transparent); color: var(--text); }
  .meldung-fehler { background: var(--danger-bg); border-color: color-mix(in oklch, var(--danger) 40%, transparent); }
  .meldung-hinweis { background: var(--warn-bg); border-color: color-mix(in oklch, var(--warn) 40%, transparent); }
  .meldung:empty { display: none; }

  /* ---- Status ---- */
  .pille { display: inline-flex; align-items: center; gap: .4em; padding: .2em .7em; border-radius: 999px; font-size: var(--t-100); font-weight: 600; letter-spacing: .04em; border: 1px solid var(--line); }
  .pille::before { content: ""; inline-size: .55em; block-size: .55em; border-radius: 50%; background: currentColor; }
  .pille-ok { color: var(--success); background: var(--success-bg); border-color: transparent; }
  .pille-aus { color: var(--text-muted); background: var(--surface-2); }
  .pille-fehler { color: var(--danger); background: var(--danger-bg); border-color: transparent; }
  .pille-warn { color: var(--warn); background: var(--warn-bg); border-color: transparent; }

  /* ---- Listen & Tabellen ---- */
  .liste { display: grid; gap: var(--s-2); }
  .eintrag { display: grid; grid-template-columns: 1fr; gap: var(--s-2) var(--s-4); align-items: center; padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--r-2); background: var(--surface); }
  @media (min-width: 560px) { .eintrag { grid-template-columns: 1fr auto; } }
  .eintrag .aktionen { justify-content: flex-start; }
  @media (min-width: 560px) { .eintrag .aktionen { justify-content: flex-end; } }
  .eintrag .titel { font-weight: 600; }
  .eintrag .unter { color: var(--text-muted); font-size: var(--t-100); }
  .eintrag .aktionen { display: flex; gap: var(--s-2); flex-wrap: wrap; justify-content: flex-end; }
  .leer { color: var(--text-muted); padding: var(--s-5); text-align: center; border: 1px dashed var(--line-stark); border-radius: var(--r-2); }
  .tabelle-huelle { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--surface); }
  table.tabelle { width: 100%; font-size: var(--t-200); }
  .tabelle th, .tabelle td { text-align: left; padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); vertical-align: top; }
  .tabelle th { font-size: var(--t-100); letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; white-space: nowrap; }
  .tabelle tbody tr:last-child td { border-bottom: 0; }
  .tabelle tbody tr:hover { background: var(--surface-2); }
  .tabelle .num { font-variant-numeric: tabular-nums; }
  .tabelle a.zeile-link { color: inherit; text-decoration: none; font-weight: 600; }
  .tabelle a.zeile-link:hover { color: var(--accent-text); }

  /* ---- Signature: der Koppelcode als Ticket ---- */
  .ticket { position: relative; background: var(--surface); border: 1px solid var(--line-stark); border-radius: var(--r-3); padding: var(--s-5) var(--s-6); overflow: hidden; }
  .ticket::before { content: ""; position: absolute; inset-inline: 0; top: 0; block-size: 6px; background: var(--accent); }
  .ticket .code { font-family: var(--mono); font-size: clamp(2.4rem, 1.6rem + 4vw, 4rem); letter-spacing: .22em; font-weight: 700; line-height: 1; margin-top: var(--s-3); word-break: break-all; }
  .ticket .perforation { border-top: 2px dashed var(--line-stark); margin: var(--s-4) calc(var(--s-6) * -1); }
  .ticket .geraet { display: grid; gap: var(--s-1); }

  /* ---- Lizenzstand ---- */
  .lizenz { display: grid; grid-template-columns: auto 1fr; gap: var(--s-4); align-items: center; }
  .lizenz .symbol { inline-size: 56px; block-size: 56px; border-radius: var(--r-2); display: grid; place-items: center; background: var(--surface-2); }
  .lizenz.aktiv .symbol { background: var(--accent); color: var(--on-accent); }
  .lizenz .stand { font-size: var(--t-500); font-weight: 650; letter-spacing: -.015em; }

  /* ---- Navigation im Admin ---- */
  .reiter { display: flex; gap: var(--s-1); border-bottom: 1px solid var(--line); margin-bottom: var(--s-5); overflow-x: auto; }
  .reiter button { background: none; border: 0; border-bottom: 2px solid transparent; padding: var(--s-3) var(--s-4); color: var(--text-muted); font-weight: 600; white-space: nowrap; min-height: 44px; }
  .reiter button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); }
  .reiter button:hover { color: var(--text); }

  /* ---- Schublade (Kundendetail) ---- */
  .schublade { display: grid; gap: var(--s-5); }
  .paar { display: grid; grid-template-columns: minmax(120px, max-content) 1fr; gap: var(--s-1) var(--s-4); font-size: var(--t-200); }
  .paar dt { color: var(--text-muted); }
  .paar dd { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

  /* ---- Lade- und Leerzustand ---- */
  .lade { opacity: .6; pointer-events: none; }
  [hidden] { display: none !important; }
  .versteckt-visuell { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

@layer seiten {
  .login { max-width: 440px; margin-inline: auto; padding-block: var(--s-6); }
  .login .flaeche { margin-top: var(--s-5); }
  .einstieg { display: grid; gap: var(--s-5); grid-template-columns: 1fr; margin-bottom: var(--s-6); }
  @media (min-width: 760px) { .einstieg { grid-template-columns: 1.2fr .8fr; align-items: start; } }
  .rechtstext { max-width: 70ch; }
  .rechtstext h2 { margin-top: var(--s-6); font-size: var(--t-400); }
  .rechtstext p, .rechtstext li { margin-top: var(--s-3); }
  .startseite { text-align: left; max-width: 640px; padding-block: var(--s-8); }
  .startseite .marke-gross { inline-size: 72px; block-size: 72px; margin-bottom: var(--s-5); }
}

@layer hilfen {
  .mt-2 { margin-top: var(--s-2); } .mt-4 { margin-top: var(--s-4); } .mt-5 { margin-top: var(--s-5); }
  .muted { color: var(--text-muted); }
  .klein { font-size: var(--t-100); }
  .rechts { text-align: right; }
  .umbruch { overflow-wrap: anywhere; }
}