/* Basis: Ebenen, Tokens, Schrift und Grundelemente.
   Farbwerte stehen nur im :root dieser Datei; die Farben der Agentur liefert /marke.css. */

@layer basis, bauteile, rahmen, 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 {
  /* Hell oder dunkel: Ohne Wahl entscheidet das Gerät; data-thema am html (js/kern/thema.js) legt eine Darstellung fest */
  :root {
    color-scheme: light dark;
    &[data-thema="hell"] { color-scheme: light; }
    &[data-thema="dunkel"] { color-scheme: dark; }

    /* Agentur: Vorgabe, überschrieben von /marke.css */
    --marke: #1c1c1e;
    --marke-hell: #c6c7c8;

    /* Grund und Wolken dahinter: Verlauf aus den Farben der Agentur, hell fast weiß mit deutlichen Wolken */
    --grund: light-dark(#f7f9fc, #0f1116);
    --wolke-1: light-dark(#ffffff, color-mix(in oklab, var(--marke-hell) 14%, #13151b));
    --wolke-2: light-dark(color-mix(in oklab, var(--marke-hell) 85%, #ffffff), color-mix(in oklab, var(--marke) 45%, #0f1116));
    --wolke-3: light-dark(color-mix(in oklab, var(--marke) 30%, #ffffff), color-mix(in oklab, var(--marke) 25%, #12141a));

    /* Flächen, Glas, Linien */
    --flaeche: light-dark(#ffffff, #1e1f23);
    --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(36 37 42 / 96%));
    /* Seitenleiste: hebt sich ab, hell einen Tick dunkler als der Kopf, dunkel einen Tick heller */
    /* Kopfleiste: im Hellen einen Ton dunkler als der Inhalt, damit sie sich abhebt, heller als die Seitenleiste */
    --glas-kopf: light-dark(color-mix(in oklab, var(--marke) 4%, rgb(238 240 246 / 84%)), rgb(32 33 38 / 66%));
    --glas-leiste: light-dark(color-mix(in oklab, var(--marke) 7%, rgb(234 236 242 / 80%)), color-mix(in oklab, var(--marke) 12%, rgb(46 48 56 / 82%)));
    --glas-dunkel: light-dark(rgb(26 26 30 / 90%), rgb(48 49 56 / 94%)); /* Toasts, in beiden Modi dunkel */
    --glas-dunkel-rand: rgb(255 255 255 / 12%);
    --galerie-grund: rgb(12 12 14 / 94%); /* Galerie: in beiden Modi dunkel, damit Bilder und Seiten leuchten */
    --galerie-text: #f6f6f8;
    --galerie-knopf: rgb(255 255 255 / 12%);
    --auf-dunkel: #f4f4f6; /* Schrift auf dunklem Glas, in beiden Modi */
    /* Der Himmel hinter allem */
    --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)));
    --karte-grund: light-dark(rgb(255 255 255 / 84%), rgb(30 32 38 / 84%)); /* Karten heben sich vom Verlauf ab */
    --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%));
    --logo-grund: light-dark(transparent, #f2f3f6);

    /* Text in drei Stufen; kräftig, weil Abel dünn ist (im Dunklen entsprechend heller) */
    --text: light-dark(#0b0b0d, #fafafc);
    --text-2: light-dark(#222127, #e6e6ea);
    --text-leise: light-dark(#46444c, #bfbdc4);

    /* Akzent: die Farbe der Agentur, im Dunklen ihre helle Fassung */
    --akzent: light-dark(var(--marke), var(--marke-hell));
    --akzent-text: light-dark(#ffffff, #111215);
    --fokus-schein: color-mix(in oklab, var(--akzent) 22%, transparent);
    /* Verlauf und Leuchten für Hauptknöpfe, aktive Menüpunkte und Filter */
    --verlauf-akzent: linear-gradient(135deg, var(--akzent), color-mix(in oklab, var(--akzent) 70%, var(--marke-hell)));
    --leuchten: 0 8px 20px -8px color-mix(in oklab, var(--akzent) 60%, 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); /* Schrift auf roten Knöpfen */
    --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 24 40 / 5%), rgb(0 0 0 / 35%)), 0 24px 56px -24px light-dark(rgb(20 40 90 / 26%), rgb(0 0 0 / 65%));
    --schatten-innen: inset 0 1px 3px light-dark(rgb(28 28 30 / 10%), rgb(0 0 0 / 50%));

    /* Schrift: Abel für Text (nur ein Schnitt, nie fett setzen), Outfit für Titel, Knöpfe und Zahlen */
    --schrift-text: "Abel", system-ui, sans-serif;
    --schrift-titel: "Outfit", "Abel", system-ui, sans-serif;
    --gewicht-text: 400;
    --gr-11: 0.6875rem;
    --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, Maße */
    --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;
    --leiste-breite: 16rem;
    --kopf-hoehe: 6rem;
    --kopfleiste-hoehe: 4rem;
    /* Schublade: wächst mit dem Bildschirm; Dokumente (data-breit) bekommen die breite Fassung, weil man sie liest */
    --schublade-breite: clamp(40rem, 33vw, 48rem);
    --schublade-breit: clamp(40rem, 50vw, 72rem);

    /* 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; }
  /* Hilfen für den Fall ohne Skript; sofort.js setzt data-skript */
  :root[data-skript] .nur-ohne-skript { display: none !important; }

  html {
    font: var(--gewicht-text) 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; }
  /* Titel eines Abschnitts: h2 auf der Seite, h3 in der Schublade (unter ihrem Titel), gleich aussehend */
  .abschnitt-titel { display: flex; align-items: center; gap: 0.45rem; margin-bottom: var(--a2); font-size: var(--gr-15); font-weight: 600; }
  .abschnitt-titel .icon { width: 1.05rem; height: 1.05rem; color: var(--akzent); }
  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: das Rezept steht genau einmal. Weichzeichner nur an Leisten und Schwebendem (.glas);
     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 {
    background: var(--karte-grund);
    border: 1px solid var(--rand);
    box-shadow: inset 0 1px 0 var(--kante), var(--schatten-karte);
  }

  /* Laden: Wo etwas nachlädt (aria-busy), wird der Inhalt blass und nach kurzer Zeit dreht sich ein Kreisel.
     Knöpfe zeigen ihn statt ihres Icons, bis die nächste Seite da ist (js/kern/laden.js). */
  [aria-busy="true"]:not(.knopf) {
    position: relative;
    min-height: 4rem;
    & > * { opacity: 0.45; transition: opacity var(--dauer-kurz); }
    &::after {
      content: "";
      position: absolute;
      top: min(40%, 6rem);
      left: calc(50% - 0.875rem);
      width: 1.75rem;
      height: 1.75rem;
      border: 2.5px solid var(--linie-stark);
      border-top-color: var(--akzent);
      border-radius: 50%;
      opacity: 0;
      animation: drehen 0.7s linear infinite, erscheinen var(--dauer-kurz) 150ms forwards;
    }
  }
  .knopf[aria-busy="true"] {
    pointer-events: none;
    & > .icon:first-child { display: none; }
    &::before {
      content: "";
      flex: none;
      width: 1em;
      height: 1em;
      border: 2px solid currentColor;
      border-right-color: transparent;
      border-radius: 50%;
      animation: drehen 0.7s linear infinite;
    }
  }
  @keyframes drehen { to { rotate: 360deg; } }
  @keyframes erscheinen { to { opacity: 1; } }

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