/* Klartext & Kontext · Gestaltungsgrundlagen (Farben, Schrift, Radien, Schatten, Farbthemen).
   Gemeinsam für Webseite und Studio. Farbthema über <html data-thema="…">:
   auto (folgt dem System), hell, dunkel; Plus: papier, mitternacht, salbei, bordeaux. */
@font-face { font-family: "Inter Display"; src: url("schriften/interdisplay-900.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("schriften/instrument-serif-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("schriften/instrument-serif-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter"; src: url("schriften/inter-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("schriften/inter-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("schriften/inter-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

/* Stil: klar, weiß, große Rundungen, Glas, ruhige Bewegung (Apple-Anmutung).
   Interaktion in Blau, Marke (Bernstein) nur für Logo, Plus und kleine Hinweise. */
:root {
  /* Schrift */
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", system-ui, sans-serif;
  --schwer: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", system-ui, sans-serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", system-ui, sans-serif;
  --titel: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* Form */
  --radius-s: 12px; --radius: 28px; --radius-l: 36px;
  --kurve: cubic-bezier(.25, .1, .25, 1); --feder: cubic-bezier(.2, .8, .2, 1);
  /* Marke (in allen Themen gleich) */
  --bernstein: #c2611f; --bernstein-hell: #f0a35e;
  --plus-verlauf: linear-gradient(120deg, #f0a35e 0%, #e0602a 55%, #c2397a 100%);
  --buehne: #000000; --buehne-text: #f5f5f7;
}

/* Hell (Standard) */
:root, :root[data-thema="hell"] {
  --grund: #ffffff; --band: #f5f5f7; --flaeche: #ffffff; --flaeche-2: #fbfbfd; --feld: #ffffff;
  --linie: rgba(0, 0, 0, .08); --linie-2: #d2d2d7;
  --text: #1d1d1f; --text-2: #424245; --leise: #6e6e73;
  --akzent: #0066cc; --akzent-hell: #2997ff; --akzent-grund: rgba(0, 113, 227, .08); --fokus: rgba(0, 113, 227, .45);
  --hervor: #bf4800;
  --knopf: #0071e3; --knopf-text: #ffffff; --knopf-hover: #0077ed; --zart: rgba(0, 0, 0, .05); --zart-hover: rgba(0, 0, 0, .08);
  --glas: rgba(255, 255, 255, .72); --glas-linie: rgba(0, 0, 0, .06);
  --gut: #1d8a47; --gut-grund: #e7f6ec; --fehler: #d70015; --fehler-grund: #fdecee;
  --hinweis-grund: #f5f5f7; --hinweis-text: #424245;
  --schatten-1: 0 2px 8px rgba(0, 0, 0, .04);
  --schatten: 0 4px 12px rgba(0, 0, 0, .04), 0 24px 48px -16px rgba(0, 0, 0, .14);
  --schatten-gross: 0 8px 24px rgba(0, 0, 0, .05), 0 60px 120px -40px rgba(0, 0, 0, .3);
  color-scheme: light;
}

/* Dunkel: für data-thema="dunkel" und für "auto", wenn das System dunkel ist */
:root[data-thema="dunkel"] {
  --grund: #000000; --band: #161617; --flaeche: #1d1d1f; --flaeche-2: #161617; --feld: #1d1d1f;
  --linie: rgba(255, 255, 255, .1); --linie-2: #424245;
  --text: #f5f5f7; --text-2: #d2d2d7; --leise: #86868b;
  --akzent: #2997ff; --akzent-hell: #6bb5ff; --akzent-grund: rgba(41, 151, 255, .14); --fokus: rgba(41, 151, 255, .5);
  --hervor: #ff8a3d;
  --knopf: #0071e3; --knopf-text: #ffffff; --knopf-hover: #0077ed; --zart: rgba(255, 255, 255, .08); --zart-hover: rgba(255, 255, 255, .13);
  --glas: rgba(22, 22, 23, .72); --glas-linie: rgba(255, 255, 255, .08);
  --gut: #30d158; --gut-grund: rgba(48, 209, 88, .14); --fehler: #ff453a; --fehler-grund: rgba(255, 69, 58, .14);
  --hinweis-grund: #1d1d1f; --hinweis-text: #d2d2d7;
  --schatten-1: 0 1px 2px rgba(0, 0, 0, .5); --schatten: 0 24px 48px -16px rgba(0, 0, 0, .8); --schatten-gross: 0 60px 120px -40px rgba(0, 0, 0, .9);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root[data-thema="auto"] {
    --grund: #000000; --band: #161617; --flaeche: #1d1d1f; --flaeche-2: #161617; --feld: #1d1d1f;
    --linie: rgba(255, 255, 255, .1); --linie-2: #424245;
    --text: #f5f5f7; --text-2: #d2d2d7; --leise: #86868b;
    --akzent: #2997ff; --akzent-hell: #6bb5ff; --akzent-grund: rgba(41, 151, 255, .14); --fokus: rgba(41, 151, 255, .5);
    --hervor: #ff8a3d;
    --knopf: #0071e3; --knopf-text: #ffffff; --knopf-hover: #0077ed; --zart: rgba(255, 255, 255, .08); --zart-hover: rgba(255, 255, 255, .13);
    --glas: rgba(22, 22, 23, .72); --glas-linie: rgba(255, 255, 255, .08);
    --gut: #30d158; --gut-grund: rgba(48, 209, 88, .14); --fehler: #ff453a; --fehler-grund: rgba(255, 69, 58, .14);
    --hinweis-grund: #1d1d1f; --hinweis-text: #d2d2d7;
    --schatten-1: 0 1px 2px rgba(0, 0, 0, .5); --schatten: 0 24px 48px -16px rgba(0, 0, 0, .8); --schatten-gross: 0 60px 120px -40px rgba(0, 0, 0, .9);
    color-scheme: dark;
  }
}

/* Plus: Papier (warm, wie Zeitungspapier) */
:root[data-thema="papier"] {
  --hervor: #9c4f1f;
  --grund: #f7f2e8; --band: #efe7d7; --flaeche: #fcf9f2; --flaeche-2: #f9f4ea; --feld: #fffdf8;
  --linie: rgba(70, 45, 20, .12); --linie-2: #d8ccb6;
  --text: #2b2219; --text-2: #4a3d30; --leise: #7d6c59;
  --akzent: #9c4f1f; --akzent-hell: #c98a4a; --akzent-grund: rgba(156, 79, 31, .1); --fokus: rgba(156, 79, 31, .35);
  --knopf: #2b2219; --knopf-text: #f7f2e8; --knopf-hover: #160f09; --zart: rgba(70, 45, 20, .07); --zart-hover: rgba(70, 45, 20, .12);
  --glas: rgba(247, 242, 232, .78); --glas-linie: rgba(70, 45, 20, .1);
  --gut: #3d7a3f; --gut-grund: #e5eedb; --fehler: #b03a1a; --fehler-grund: #f6e0d6;
  --hinweis-grund: #f1e2cb; --hinweis-text: #6d3a12;
  --schatten-1: 0 1px 2px rgba(60, 40, 20, .06); --schatten: 0 18px 40px -18px rgba(60, 40, 20, .25); --schatten-gross: 0 50px 100px -40px rgba(60, 40, 20, .45);
  color-scheme: light;
}
/* Plus: Mitternacht (tiefes Blau) */
:root[data-thema="mitternacht"] {
  --hervor: #c0d1ff;
  --grund: #070b18; --band: #0d1326; --flaeche: #141b33; --flaeche-2: #10172c; --feld: #141b33;
  --linie: rgba(160, 180, 255, .12); --linie-2: #2c3658;
  --text: #e9edfa; --text-2: #c3cae2; --leise: #8892b3;
  --akzent: #8fb0ff; --akzent-hell: #c0d1ff; --akzent-grund: rgba(143, 176, 255, .14); --fokus: rgba(143, 176, 255, .45);
  --knopf: #e9edfa; --knopf-text: #070b18; --knopf-hover: #ffffff; --zart: rgba(160, 180, 255, .09); --zart-hover: rgba(160, 180, 255, .16);
  --glas: rgba(7, 11, 24, .74); --glas-linie: rgba(160, 180, 255, .12);
  --gut: #5fd39a; --gut-grund: rgba(95, 211, 154, .14); --fehler: #ff8a7a; --fehler-grund: rgba(255, 138, 122, .14);
  --hinweis-grund: rgba(143, 176, 255, .14); --hinweis-text: #c0d1ff;
  --schatten-1: 0 1px 2px rgba(0, 0, 0, .5); --schatten: 0 18px 40px -18px rgba(0, 0, 0, .85); --schatten-gross: 0 50px 100px -40px rgba(0, 0, 0, .9);
  --buehne: #0a1024;
  color-scheme: dark;
}
/* Plus: Salbei (ruhiges Grün) */
:root[data-thema="salbei"] {
  --hervor: #3c7657;
  --grund: #f3f6f1; --band: #e7ede3; --flaeche: #fbfcfa; --flaeche-2: #f6f8f4; --feld: #ffffff;
  --linie: rgba(30, 60, 40, .1); --linie-2: #c9d4c6;
  --text: #1c2a21; --text-2: #3a4a3f; --leise: #66766b;
  --akzent: #3c7657; --akzent-hell: #7fb394; --akzent-grund: rgba(60, 118, 87, .1); --fokus: rgba(60, 118, 87, .35);
  --knopf: #1c2a21; --knopf-text: #f3f6f1; --knopf-hover: #0c1510; --zart: rgba(30, 60, 40, .06); --zart-hover: rgba(30, 60, 40, .11);
  --glas: rgba(243, 246, 241, .78); --glas-linie: rgba(30, 60, 40, .1);
  --gut: #2f7d4a; --gut-grund: #dcecdf; --fehler: #b13c22; --fehler-grund: #f5e2dc;
  --hinweis-grund: #e2ecd9; --hinweis-text: #2c5136;
  --schatten-1: 0 1px 2px rgba(20, 50, 30, .06); --schatten: 0 18px 40px -18px rgba(20, 50, 30, .22); --schatten-gross: 0 50px 100px -40px rgba(20, 50, 30, .4);
  color-scheme: light;
}
/* Plus: Bordeaux (dunkel, rotweinfarben) */
:root[data-thema="bordeaux"] {
  --hervor: #f5bcc7;
  --grund: #160b0f; --band: #201015; --flaeche: #2a161c; --flaeche-2: #23121a; --feld: #2a161c;
  --linie: rgba(255, 190, 205, .11); --linie-2: #4a2b34;
  --text: #f7eef0; --text-2: #e0ccd1; --leise: #ad939b;
  --akzent: #ec8a9d; --akzent-hell: #f5bcc7; --akzent-grund: rgba(236, 138, 157, .14); --fokus: rgba(236, 138, 157, .45);
  --knopf: #f7eef0; --knopf-text: #160b0f; --knopf-hover: #ffffff; --zart: rgba(255, 190, 205, .08); --zart-hover: rgba(255, 190, 205, .14);
  --glas: rgba(22, 11, 15, .74); --glas-linie: rgba(255, 190, 205, .1);
  --gut: #6bd09a; --gut-grund: rgba(107, 208, 154, .14); --fehler: #ff8f7a; --fehler-grund: rgba(255, 143, 122, .14);
  --hinweis-grund: rgba(236, 138, 157, .14); --hinweis-text: #f5bcc7;
  --schatten-1: 0 1px 2px rgba(0, 0, 0, .5); --schatten: 0 18px 40px -18px rgba(0, 0, 0, .85); --schatten-gross: 0 50px 100px -40px rgba(0, 0, 0, .9);
  --buehne: #1e0d13;
  color-scheme: dark;
}