/* Einsatzbibliothek ARD Grenchen — gemeinsame Grundlage fuer App und Redaktion.
   Formsprache des Verwaltungsportals (info.ardgrenchen.ch), die ihrerseits
   von ardgrenchen.ch stammt: weisse Buehnen auf hellgrauem Grund, grosse
   weiche Radien, Haarlinien statt Kaesten, Archivo fuer Text und Azeret Mono
   fuer Nummern und Etiketten. Blau ist die eine Farbe fuer alles Farbige;
   Gelb heisst wie im Portal «hier steht etwas aus».
   Die Kennfarben der Flowcharts (blau, gelb, gruen, rot) bleiben, weil sie
   aus den Originalen stammen. Die dunkle Fassung ist fuer Nachteinsaetze:
   ruhige Flaechen, kein grelles Weiss, die Kennfarben bleiben unterscheidbar. */

@font-face {
  font-family: "Archivo"; src: url("schrift/archivo-latin.woff2") format("woff2");
  font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo"; src: url("schrift/archivo-latin-ext.woff2") format("woff2");
  font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Azeret Mono"; src: url("schrift/azeret-latin.woff2") format("woff2");
  font-weight: 300 700; font-display: swap;
}

:root {
  color-scheme: light;
  --schrift: "Archivo", -apple-system, "Segoe UI", sans-serif;
  --schmal: "Archivo", -apple-system, "Segoe UI", sans-serif;
  --mono: "Azeret Mono", ui-monospace, "Cascadia Mono", monospace;

  --papier: #F1F1EF;
  --flaeche: #FFFFFF;
  --flaeche-2: #F6F6F3;
  --linie: #E6E6E1;
  --linie-2: #ECECE8;
  --linie-stark: #D8D8D3;
  --tinte: #16181A;
  --tinte-2: #3C4147;
  --grau: #5A5F66;
  --grau-hell: #8C8F94;

  --marine: #2C529D;
  --marine-dunkel: #1F3D73;
  --marine-flaeche: #EDF1F9;
  --marine-linie: #C9D5EC;
  --braun: #6E5A2E;
  --braun-flaeche: #F3F0E6;
  --braun-linie: #DED6C0;
  --rot: #B03A2B;
  --violett: #5B4A8A;
  --auf-farbe: #FFFFFF;

  --gelb-flaeche: #FBF8CF;
  --gelb-linie: #D9D27A;
  --gruen-flaeche: #EEF5F0;
  --gruen-linie: #CFE3D6;
  --gruen-tinte: #3F7A55;
  --orange-flaeche: #FBEBDC;
  --orange-linie: #EDCDAA;
  --grau-flaeche: #EEEEEA;
  --grau-linie: #DADAD3;

  --ki-flaeche: #FBEFED;
  --ki-linie: #EBC2BC;
  --ki-tinte: #8E2A1E;

  /* Gelb des Portals: eine Handlung steht aus. */
  --warn-flaeche: #EFEA62;
  --warn-linie: #EFEA62;
  --warn-tinte: #34341F;

  --hero: #16181A;
  --hero-tinte: #FFFFFF;
  --hero-grau: #B3B7BC;
  --hero-linie: #34383D;
  --hero-warn: #FF8A80;

  --schatten: 0 1px 2px rgba(22, 24, 26, .05);
  --schatten-hoch: 0 6px 24px -12px rgba(22, 24, 26, .3), 0 2px 6px rgba(22, 24, 26, .06);
  --fokus: #2C529D;
  --auswahl: rgba(44, 82, 157, .16);
  --radius: 18px;
  --r-buehne: 28px;
  --r-pille: 999px;
}

/* Die dunkle Fassung steht zweimal: einmal fuer «Automatisch» bei dunklem
   Geraet, einmal fuer die ausdrueckliche Wahl. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --papier: #0F1113; --flaeche: #1A1D20; --flaeche-2: #202327;
    --linie: #2A2E33; --linie-2: #24282C; --linie-stark: #3A3F45;
    --tinte: #ECECE8; --tinte-2: #C9CCC8; --grau: #9AA0A7; --grau-hell: #767B81;
    --marine: #8FB0EE; --marine-dunkel: #B9CDF5; --marine-flaeche: #1C2638; --marine-linie: #2D3F5F;
    --braun: #D9BE84; --braun-flaeche: #29241A; --braun-linie: #463D29;
    --rot: #E8786A; --violett: #BBA8EE; --auf-farbe: #0F1113;
    --gelb-flaeche: #2C2A14; --gelb-linie: #5A5520;
    --gruen-flaeche: #17281E; --gruen-linie: #2A4534; --gruen-tinte: #8CC9A2;
    --orange-flaeche: #33230F; --orange-linie: #563B18;
    --grau-flaeche: #22252A; --grau-linie: #33373C;
    --ki-flaeche: #2B1513; --ki-linie: #5A2A25; --ki-tinte: #FFA59C;
    --warn-flaeche: #2C2A14; --warn-linie: #5A5520; --warn-tinte: #E4DF5A;
    --hero: #ECECE8; --hero-tinte: #16181A; --hero-grau: #5A5F66; --hero-linie: #C9CCC8; --hero-warn: #B03A2B;
    --schatten: 0 1px 2px rgba(0, 0, 0, .4);
    --schatten-hoch: 0 10px 34px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .4);
    --fokus: #8FB0EE; --auswahl: rgba(143, 176, 238, .28);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --papier: #0F1113; --flaeche: #1A1D20; --flaeche-2: #202327;
  --linie: #2A2E33; --linie-2: #24282C; --linie-stark: #3A3F45;
  --tinte: #ECECE8; --tinte-2: #C9CCC8; --grau: #9AA0A7; --grau-hell: #767B81;
  --marine: #8FB0EE; --marine-dunkel: #B9CDF5; --marine-flaeche: #1C2638; --marine-linie: #2D3F5F;
  --braun: #D9BE84; --braun-flaeche: #29241A; --braun-linie: #463D29;
  --rot: #E8786A; --violett: #BBA8EE; --auf-farbe: #0F1113;
  --gelb-flaeche: #2C2A14; --gelb-linie: #5A5520;
  --gruen-flaeche: #17281E; --gruen-linie: #2A4534; --gruen-tinte: #8CC9A2;
  --orange-flaeche: #33230F; --orange-linie: #563B18;
  --grau-flaeche: #22252A; --grau-linie: #33373C;
  --ki-flaeche: #2B1513; --ki-linie: #5A2A25; --ki-tinte: #FFA59C;
  --warn-flaeche: #2C2A14; --warn-linie: #5A5520; --warn-tinte: #E4DF5A;
  --hero: #ECECE8; --hero-tinte: #16181A; --hero-grau: #5A5F66; --hero-linie: #C9CCC8; --hero-warn: #B03A2B;
  --schatten: 0 1px 2px rgba(0, 0, 0, .4);
  --schatten-hoch: 0 10px 34px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .4);
  --fokus: #8FB0EE; --auswahl: rgba(143, 176, 238, .28);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  background: var(--papier);
  scrollbar-color: var(--linie-stark) var(--papier);
}
body {
  margin: 0;
  font-family: var(--schrift);
  font-size: 15px;
  line-height: 1.45;
  color: var(--tinte);
  background: var(--papier);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
::selection { background: var(--auswahl); color: inherit; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
a { color: var(--marine); text-decoration: none; }
a:hover { color: var(--marine-dunkel); }
:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; border-radius: 6px; }
input { caret-color: var(--marine); }
h1, h2, h3 { text-wrap: balance; }
ul { margin: 0; padding: 0; list-style: none; }
mark { background: var(--gelb-flaeche); color: inherit; border-radius: 3px; padding: 0 1px; box-shadow: 0 0 0 1px var(--gelb-linie); }

.nur-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

* { scrollbar-width: thin; }
body * { scrollbar-color: var(--linie-stark) transparent; }

.mono { font-family: var(--mono); }

/* Nummernschild: die Kennung eines Blattes. */
.schild {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-weight: 600; font-size: 12.5px; line-height: 1;
  color: var(--marine-dunkel); background: var(--marine-flaeche);
  border-radius: 9px; padding: 8px 8px; min-width: 50px; flex-shrink: 0;
  letter-spacing: 0;
}
.schild.medi { background: var(--grau-flaeche); color: var(--tinte); }
.schild.kinder { background: color-mix(in srgb, var(--violett) 13%, var(--flaeche)); color: var(--violett); }
/* Nicht freigegeben: zurueckgenommen, aber lesbar (Weiss auf Hellgrau
   erreichte nur 3.4:1). */
.schild.aus { background: var(--grau-flaeche); color: var(--grau); box-shadow: inset 0 0 0 1px var(--grau-linie); }

/* Kompetenzstufe */
.stufe {
  display: inline-flex; align-items: center; font-family: var(--mono); font-size: 12px; font-weight: 600;
  color: var(--marine-dunkel); background: var(--marine-flaeche); border-radius: var(--r-pille); padding: 7px 11px; line-height: 1;
}

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border-radius: var(--r-pille);
  border: 1px solid var(--linie-stark); background: var(--flaeche); color: var(--tinte);
  font-weight: 500; font-size: 14px; text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, transform .1s ease;
}
.knopf:hover { background: var(--flaeche-2); color: var(--tinte); }
.knopf:active { transform: translateY(1px); }
.knopf.haupt { background: var(--marine); border-color: var(--marine); color: var(--auf-farbe); }
.knopf.haupt:hover { background: var(--marine-dunkel); border-color: var(--marine-dunkel); color: var(--auf-farbe); }
.knopf.gefahr { color: var(--rot); border-color: var(--ki-linie); }
.knopf.gefahr:hover { background: var(--ki-flaeche); }
.knopf:disabled { opacity: .5; transform: none; }
/* Kleiner runder Knopf im Blattkopf («Verknuepfungen»). */
.knopf.pille { padding: 0 14px; font-size: 13.5px; color: var(--marine); gap: 7px; }
.knopf svg { flex-shrink: 0; }
.knopf svg:not([stroke]), .zurueck svg:not([stroke]) { stroke: currentColor; }

.ikon-knopf {
  width: 44px; height: 44px; border: 0; background: transparent; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; color: var(--grau);
  transition: background-color .15s ease;
}
.ikon-knopf:hover { background: var(--flaeche-2); }
.ikon-knopf svg { stroke: currentColor; }
.ikon-knopf.an { color: var(--marine); }
.ikon-knopf.an svg { fill: currentColor; }

.etikett {
  font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--grau);
}

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

/* Die Vorfuehrung sagt auf jeder Seite, was sie ist. Gelb wie im Portal: Es
   steht etwas an, das man wissen muss, bevor man weiterliest. */
.vorfuehrung {
  display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
  margin: 0; padding: 10px max(16px, env(safe-area-inset-left)) 10px max(16px, env(safe-area-inset-right));
  background: var(--warn-flaeche); color: var(--warn-tinte);
  font-size: 13px; line-height: 1.45;
}
.vorfuehrung strong {
  font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
.vorfuehrung span { flex: 1 1 280px; max-width: 78ch; }
.vorfuehrung-kurz { display: none; }
.konto-seite .vorfuehrung { max-width: 400px; border-radius: var(--radius); padding: 12px 16px; }
/* Auf dem Handy die kurze Fassung, ausser bei der Anmeldung: Dort liest
   man sie zuerst und hat den Platz. */
@media (max-width: 599px) {
  body:not(:has(.konto-seite)) .vorfuehrung-lang { display: none; }
  body:not(:has(.konto-seite)) .vorfuehrung-kurz { display: inline; }
  .vorfuehrung { padding-top: 8px; padding-bottom: 8px; font-size: 12.5px; }
}