/* Basis: Ebenen, Tokens, Schrift und Grundelemente. Farbwerte stehen nur im :root dieser Datei, in den Farben von
   MP Media: Schwarz, Logo-Grau #706d72, helles Grau #c6c7c8, keine bunte Akzentfarbe. Grün, Rot und Gelb nur, wo sie
   etwas bedeuten (gut, aus, Warnung). Hell oder dunkel nach dem Gerät; das Gespräch ist immer dunkel (data-thema). */

@layer basis, bauteile, seiten;

@font-face {
  font-family: "Abel";
  src: url("../schrift/abel-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Outfit";
  src: url("../schrift/outfit-variabel.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

@layer basis {
  :root {
    color-scheme: light dark;
    &[data-thema="dunkel"] { color-scheme: dark; }

    --marke: #111214;
    --marke-grau: #706d72;
    --marke-hell: #c6c7c8;

    /* Grund und Wolken dahinter: fast weiß mit grauen Wolken, im Dunklen fast schwarz */
    --grund: light-dark(#f6f6f8, #0e0f12);
    --wolke-1: light-dark(#ffffff, #17181c);
    --wolke-2: light-dark(color-mix(in oklab, var(--marke-hell) 70%, #ffffff), color-mix(in oklab, var(--marke-grau) 30%, #0e0f12));
    --wolke-3: light-dark(color-mix(in oklab, var(--marke-grau) 28%, #ffffff), color-mix(in oklab, var(--marke-grau) 18%, #0e0f12));
    --himmel:
      radial-gradient(64rem 46rem at 4% -10%, var(--wolke-1) 0%, transparent 62%),
      radial-gradient(54rem 42rem at 104% -6%, var(--wolke-2) 0%, transparent 62%),
      radial-gradient(46rem 38rem at -6% 104%, var(--wolke-2) 0%, transparent 60%),
      radial-gradient(64rem 52rem at 96% 108%, var(--wolke-3) 0%, transparent 64%),
      linear-gradient(135deg, var(--grund) 30%, color-mix(in oklab, var(--wolke-3) 75%, var(--grund)));

    /* Flächen, Glas, Linien */
    --flaeche: light-dark(#ffffff, #1c1d21);
    --glas: light-dark(rgb(255 255 255 / 64%), rgb(32 33 38 / 66%));
    --glas-leicht: light-dark(rgb(255 255 255 / 45%), rgb(255 255 255 / 5%));
    --glas-stark: light-dark(rgb(255 255 255 / 94%), rgb(34 35 40 / 96%));
    --glas-dunkel: light-dark(rgb(22 22 26 / 90%), rgb(46 47 54 / 94%));
    --glas-dunkel-rand: rgb(255 255 255 / 12%);
    --karte-grund: light-dark(rgb(255 255 255 / 84%), rgb(30 31 36 / 86%));
    --tinte-flaeche: light-dark(rgb(28 28 30 / 6%), rgb(255 255 255 / 8%));
    --vorhang: light-dark(rgb(28 28 30 / 22%), rgb(0 0 0 / 55%));
    --rand: light-dark(rgb(255 255 255 / 85%), rgb(255 255 255 / 9%));
    --kante: light-dark(rgb(255 255 255 / 95%), rgb(255 255 255 / 7%));
    --linie: light-dark(rgb(28 28 30 / 12%), rgb(255 255 255 / 12%));
    --linie-stark: light-dark(rgb(28 28 30 / 26%), rgb(255 255 255 / 26%));
    --auf-dunkel: #f4f4f6;
    --gut-auf-dunkel: #7cc79a;
    --warnung-auf-dunkel: #f0b35a;
    --minus-auf-dunkel: #ef8a80;

    /* Text in drei Stufen; kräftig, weil Abel dünn ist */
    --text: light-dark(#0b0b0d, #fafafc);
    --text-2: light-dark(#222127, #e6e6ea);
    --text-leise: light-dark(#4a484f, #bdbbc2);

    /* Akzent: Schwarz, im Dunklen das helle Grau; Verlauf ins Logo-Grau */
    --akzent: light-dark(var(--marke), var(--marke-hell));
    --akzent-text: light-dark(#ffffff, #111214);
    --fokus-schein: color-mix(in oklab, var(--marke-grau) 30%, transparent);
    --verlauf-akzent: linear-gradient(135deg, var(--akzent), color-mix(in oklab, var(--akzent) 62%, var(--marke-grau)));
    --leuchten: 0 8px 20px -8px color-mix(in oklab, var(--akzent) 55%, transparent);

    /* Bedeutung: nur wo es etwas heißt */
    --plus: light-dark(#24663f, #7cc79a);
    --plus-flaeche: light-dark(rgb(36 102 63 / 10%), rgb(124 199 154 / 14%));
    --minus: light-dark(#a83434, #e8847a);
    --minus-flaeche: light-dark(rgb(168 52 52 / 9%), rgb(232 132 122 / 14%));
    --minus-text: light-dark(#ffffff, #1f0d0b);
    --warnung: light-dark(#9a4607, #f0b35a);
    --warnung-flaeche: light-dark(rgb(154 70 7 / 9%), rgb(240 179 90 / 14%));

    /* Schatten */
    --schatten-1: 0 1px 2px light-dark(rgb(20 20 22 / 4%), rgb(0 0 0 / 35%)), 0 12px 32px -12px light-dark(rgb(20 20 22 / 14%), rgb(0 0 0 / 55%));
    --schatten-2: 0 2px 6px light-dark(rgb(20 20 22 / 6%), rgb(0 0 0 / 40%)), 0 32px 80px -20px light-dark(rgb(20 20 22 / 28%), rgb(0 0 0 / 75%));
    --schatten-knopf: 0 1px 2px light-dark(rgb(20 20 22 / 14%), rgb(0 0 0 / 45%));
    --schatten-karte: 0 1px 2px light-dark(rgb(20 20 30 / 5%), rgb(0 0 0 / 35%)), 0 24px 56px -24px light-dark(rgb(20 20 40 / 24%), rgb(0 0 0 / 65%));

    /* Schrift: Abel für Text (nur ein Schnitt, nie fett), Outfit für Titel, Knöpfe und Zahlen */
    --schrift-text: "Abel", system-ui, sans-serif;
    --schrift-titel: "Outfit", "Abel", system-ui, sans-serif;
    --gr-12: 0.75rem;
    --gr-13: 0.8125rem;
    --gr-14: 0.875rem;
    --gr-15: 0.9375rem;
    --gr-16: 1rem;
    --gr-18: 1.125rem;
    --gr-24: 1.5rem;
    --gr-28: 1.75rem;
    --gr-34: 2.125rem;

    /* Abstände, Rundungen */
    --a2: 0.5rem;
    --a3: 0.75rem;
    --a4: 1rem;
    --a5: 1.5rem;
    --a6: 2rem;
    --a7: 3rem;
    --rund-s: 10px;
    --rund: 16px;
    --rund-l: 24px;
    --pille: 999px;

    /* Bewegung */
    --dauer-kurz: 160ms;
    --dauer: 260ms;
    --kurve: cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  *, ::before, ::after { box-sizing: border-box; }
  [hidden] { display: none !important; }

  html {
    font: 400 var(--gr-16) / 1.55 var(--schrift-text);
    font-variant-numeric: tabular-nums;
    -webkit-text-size-adjust: 100%;
  }

  body {
    margin: 0;
    min-height: 100dvh;
    color: var(--text);
    background: var(--grund);
    -webkit-font-smoothing: antialiased;

    /* Der Himmel liegt fest hinter allem; das Glas darüber zeigt ihn weich */
    &::before {
      content: "";
      position: fixed;
      inset: 0;
      z-index: -1;
      pointer-events: none;
      background: var(--himmel);
    }
  }

  h1, h2, h3 { margin: 0; font-family: var(--schrift-titel); line-height: 1.15; text-wrap: balance; }
  h1 { font-size: var(--gr-28); font-weight: 650; letter-spacing: -0.02em; }
  h2 { font-size: var(--gr-18); font-weight: 600; letter-spacing: -0.01em; }
  h3 { font-size: var(--gr-15); font-weight: 600; }
  p { margin: 0; }
  a { color: inherit; text-decoration-color: var(--linie-stark); text-underline-offset: 0.2em; }
  a:hover { text-decoration-color: currentColor; }
  button, input, select, textarea { font: inherit; color: inherit; }

  .icon { width: 1.25em; height: 1.25em; flex: none; display: inline-block; vertical-align: -0.3em; }
  :focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
  .leise { font-size: var(--gr-14); color: var(--text-leise); }
  .unsichtbar { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

  /* Glas: an Leisten und Schwebendem mit Weichzeichner; Karten scheinen ohne ihn durch, sonst stockt das Scrollen */
  .glas {
    background: var(--glas);
    border: 1px solid var(--rand);
    box-shadow: inset 0 1px 0 var(--kante), var(--schatten-1);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    backdrop-filter: blur(24px) saturate(150%);
  }
  .karte {
    display: grid;
    align-content: start;
    gap: var(--a4);
    padding: var(--a5);
    background: var(--karte-grund);
    border: 1px solid var(--rand);
    border-radius: var(--rund-l);
    box-shadow: inset 0 1px 0 var(--kante), var(--schatten-karte);
  }

  @keyframes drehen { to { rotate: 360deg; } }
  @keyframes hereinkommen { from { opacity: 0; translate: 0 0.8rem; } }

  @media (prefers-reduced-motion: reduce) {
    *, ::before, ::after { transition-duration: 0s !important; animation-duration: 0s !important; }
  }
}