/* =============================================================
   ra-la.net – Design-Fundament

   Die Bildsprache folgt inklufusion.de, damit Verein und Person
   als eine Familie erkennbar sind:

     · durchgehend farbige Bänder über die volle Breite
     · harte Umrisslinien in Tinte, keine weichen Schatten
     · drei runde Ecken, eine harte oben links
     · Buttons in Tinte, unterstrichen

   Ergänzt um zwei Dinge, die der Verein nicht hat und die auf
   dieser Seite dazugehören: eine dunkle Darstellung und der
   Doppelstrich als Zeichen für RA / LA.
   ============================================================= */

/* ---------- Schriften (selbst gehostet, kein Google-Request) ---------- */

@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/atkinson-400-latin.woff2") format("woff2");
  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: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/atkinson-400-latin-ext.woff2") format("woff2");
  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: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/atkinson-700-latin.woff2") format("woff2");
  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: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/atkinson-700-latin-ext.woff2") format("woff2");
  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;
}

/* ---------- Farben ---------- */

:root {
  /* Die Palette des Vereins */
  --ink: #1e1e1e;
  --paper: #ffffff;
  --lavendel: #cdc8f3;
  --gelb: #f6e9a4;
  --gruen: #dff2ce;
  --grau: #ebebeb;

  /* Rollen */
  --text: var(--ink);
  --muted: #4a4a4a;
  --surface: var(--paper);
  --line: var(--ink);

  --on-ink: #ffffff;
  --mark-bg: var(--ink);
  --mark-fg: var(--gelb);

  /* Links: kräftig genug für Kontrast auf allen Bändern */
  --link: #1b3fb0;
  --link-hover: #122c80;

  /* Der Doppelstrich: RA / LA */
  --stroke-strong: var(--ink);
  --stroke-weak: #b28a1c;

  --focus: #1e1e1e;
  --focus-ring: #f6e9a4;

  /* Maße */
  --border-w: 2px;
  --radius: 14px;
  --radius-s: 8px;
  --max-width: 1180px;
  --max-width-narrow: 640px;

  color-scheme: light;
}

/* Die dunkle Darstellung hat der Verein nicht. Auf einer Seite über
   Sehbehinderung gehört sie dazu – deshalb dieselben Bänder, nur in
   tiefen Tönen, mit hellen Umrisslinien. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #f2f0ea;
    --paper: #141414;
    --lavendel: #2b2547;
    --gelb: #3b3320;
    --gruen: #23301e;
    --grau: #1f1f1f;

    --text: var(--ink);
    --muted: #bdb9b1;
    --surface: #1a1a1a;
    --line: #f2f0ea;

    --on-ink: #141414;
    --mark-bg: #f6e9a4;
    --mark-fg: #1e1e1e;

    --link: #a9c0ff;
    --link-hover: #cddaff;

    --stroke-strong: #f2f0ea;
    --stroke-weak: #efc75a;

    --focus: #f6e9a4;
    --focus-ring: #1e1e1e;

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --ink: #f2f0ea;
  --paper: #141414;
  --lavendel: #2b2547;
  --gelb: #3b3320;
  --gruen: #23301e;
  --grau: #1f1f1f;

  --text: var(--ink);
  --muted: #bdb9b1;
  --surface: #1a1a1a;
  --line: #f2f0ea;

  --on-ink: #141414;
  --mark-bg: #f6e9a4;
  --mark-fg: #1e1e1e;

  --link: #a9c0ff;
  --link-hover: #cddaff;

  --stroke-strong: #f2f0ea;
  --stroke-weak: #efc75a;

  --focus: #f6e9a4;
  --focus-ring: #1e1e1e;

  color-scheme: dark;
}

/* ---------- Grundlagen ---------- */

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Atkinson Hyperlegible", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.7;
  color: var(--text);
  background: var(--paper);
  -webkit-text-size-adjust: 100%;
}

/* height:auto ist Pflicht, sobald Bilder width/height-Attribute tragen.
   Ohne die Zeile gewinnt der Attributwert und das Bild wird verzerrt. */
img {
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3 {
  font-weight: 700;
  letter-spacing: -0.01em;
}

a {
  color: var(--link);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--link-hover);
}

/* Ein Fokus-Ring für alles. Zweifarbig, damit er auf jedem
   der sechs Bänder sichtbar bleibt. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--focus-ring);
  border-radius: var(--radius-s);
}

/* ---------- Hilfsklassen ---------- */

.wrap {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: 20px;
}

.wrap--narrow {
  max-width: var(--max-width-narrow);
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
}

.skip-link:focus {
  left: 20px;
  top: 20px;
  z-index: 9999;
  padding: 12px 20px;
  background: var(--ink);
  color: var(--on-ink);
  font-weight: 700;
  border-radius: 0 var(--radius) var(--radius) var(--radius);
}

/* ---------- Die farbigen Bänder ---------- */

/* Statt Karten auf einer Fläche: ganze Abschnitte in Farbe,
   über die volle Breite. Das gibt der Seite ihren Takt. */
.band {
  padding-block: clamp(48px, 7vw, 80px);
}

.band--paper {
  background: var(--paper);
}

.band--lavendel {
  background: var(--lavendel);
}

.band--gelb {
  background: var(--gelb);
}

.band--gruen {
  background: var(--gruen);
}

.band--grau {
  background: var(--grau);
}

.band--ink {
  background: var(--ink);
  color: var(--on-ink);
}

.band--ink a {
  color: inherit;
}

/* ---------- Das Umriss-Motiv ---------- */

/* Drei runde Ecken, eine harte oben links – wie beim Verein.
   Auf dieser Seite hat es zusätzlich eine Bedeutung: zwei Seiten,
   die nicht gleich sind. RA / LA. */
.outline {
  background: var(--surface);
  border: var(--border-w) solid var(--line);
  border-radius: 0 var(--radius) var(--radius) var(--radius);
}

/* ---------- Der Doppelstrich: RA / LA ---------- */

.rule {
  display: flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  margin: 16px 0;
}

.rule::before,
.rule::after {
  content: "";
  height: 6px;
  border-radius: 3px;
}

.rule::before {
  width: 76px;
  background: var(--stroke-strong);
}

.rule::after {
  width: 26px;
  background: var(--stroke-weak);
}

/* ---------- Hervorgehobenes Wort ---------- */

/* Wie „alle!" auf der Vereinsseite: dunkler Kasten, heller Text. */
.mark {
  display: inline-block;
  padding: 0 0.3em;
  background: var(--mark-bg);
  color: var(--mark-fg);
  border-radius: var(--radius);
  line-height: 1.25;
}

/* ---------- Buttons ---------- */

.button-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 48px;
  padding: 12px 24px;
  font: inherit;
  font-weight: 700;
  color: var(--on-ink);
  background: var(--ink);
  border: var(--border-w) solid var(--ink);
  border-radius: var(--radius-s);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.button-primary:hover {
  color: var(--ink);
  background: transparent;
}

.copy-status {
  min-height: 1.6em;
  margin: 0.6rem 0 0 0;
  font-size: 0.95rem;
  font-weight: 700;
}

/* ---------- Der Theme-Umschalter ---------- */

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 48px;
  padding: 0 0.9rem;
  font: inherit;
  font-size: 1.1rem;
  color: var(--ink);
  background: transparent;
  border: var(--border-w) solid var(--line);
  border-radius: 0 var(--radius) var(--radius) var(--radius);
  cursor: pointer;
}

.theme-toggle:hover {
  color: var(--on-ink);
  background: var(--ink);
}

/* ---------- Die Wortmarke ---------- */

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
  font-size: 1.05rem;
}

.brand__mark {
  flex: none;
  width: 30px;
  height: 30px;
}

/* Das Auge, das sieht. */
.brand__mark .eye-l {
  fill: var(--ink);
}

/* Das Auge, das nur hell und dunkel erkennt. */
.brand__mark .eye-r {
  fill: none;
  stroke: var(--ink);
  stroke-width: 3;
}

/* ---------- Bewegung nur, wenn gewünscht ---------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Druck ---------- */

@media print {
  body {
    background: #fff;
    color: #000;
  }

  .site-header,
  .theme-toggle,
  .scroll-progress,
  .skip-link,
  .section-nav {
    display: none !important;
  }

  .band {
    background: #fff !important;
    padding-block: 1rem;
  }

  .outline {
    break-inside: avoid;
  }
}