/* Fehlerseiten der Vorschläge (401, 404). Eigene Datei, weil die CSP der Websites Inline-Styles verbietet. */

:root {
  color-scheme: light dark;

  /* Grundwerte */
  --grau-0: oklch(99% 0.004 250);
  --grau-1: oklch(95% 0.008 250);
  --grau-3: oklch(82% 0.012 250);
  --grau-7: oklch(42% 0.02 250);
  --grau-9: oklch(22% 0.02 250);
  --grau-10: oklch(16% 0.018 250);
  --blau-5: oklch(52% 0.15 255);
  --blau-3: oklch(76% 0.1 255);

  /* Rollen */
  --farbe-grund: var(--grau-0);
  --farbe-flaeche: var(--grau-1);
  --farbe-text: var(--grau-9);
  --farbe-text-leise: var(--grau-7);
  --farbe-rand: var(--grau-3);
  --farbe-akzent: var(--blau-5);
  --farbe-auf-akzent: var(--grau-0);

  --schrift: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --abstand-s: 0.5rem;
  --abstand-m: 1rem;
  --abstand-l: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  --radius: 0.5rem;
  --breite: 36rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --farbe-grund: var(--grau-10);
    --farbe-flaeche: var(--grau-9);
    --farbe-text: var(--grau-1);
    --farbe-text-leise: var(--grau-3);
    --farbe-rand: var(--grau-7);
    --farbe-akzent: var(--blau-3);
    --farbe-auf-akzent: var(--grau-10);
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-block-size: 100svh;
  display: grid;
  place-items: center;
  padding: var(--abstand-l) var(--abstand-m);
  background: var(--farbe-grund);
  color: var(--farbe-text);
  font-family: var(--schrift);
  font-size: 1.0625rem;
  line-height: 1.6;
}

main {
  inline-size: min(100%, var(--breite));
  display: grid;
  gap: var(--abstand-l);
}

h1,
h2 {
  line-height: 1.2;
  text-wrap: balance;
  margin: 0;
}

h1 {
  font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.25rem);
}

h2 {
  font-size: 1.125rem;
}

p,
ul {
  margin: 0;
}

section {
  display: grid;
  gap: var(--abstand-m);
}

ul {
  padding-inline-start: 1.25rem;
  display: grid;
  gap: var(--abstand-s);
}

.marke {
  margin: 0;
  color: var(--farbe-text-leise);
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.95em;
  padding: 0.05em 0.3em;
  border-radius: 0.25rem;
  background: var(--farbe-flaeche);
}

a {
  color: var(--farbe-akzent);
  text-underline-offset: 0.2em;
}

a:focus-visible {
  outline: 3px solid var(--farbe-akzent);
  outline-offset: 3px;
  border-radius: 0.125rem;
}

.handlungen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-m);
  align-items: center;
}

.knopf {
  display: inline-block;
  padding: 0.6em 1.1em;
  border-radius: var(--radius);
  background: var(--farbe-akzent);
  color: var(--farbe-auf-akzent);
  font-weight: 600;
  text-decoration: none;
}

.knopf:hover {
  background: color-mix(in oklch, var(--farbe-akzent), var(--farbe-text) 15%);
}

.angebot {
  padding: var(--abstand-l);
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius);
  background: var(--farbe-flaeche);
}

footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-s) var(--abstand-m);
  color: var(--farbe-text-leise);
  font-size: 0.875rem;
}

footer a {
  color: inherit;
}