/**
 * Zugang — Kern-Stilblatt.
 *
 * Zwei Teile:
 *   1. Das Werkzeug selbst (Knopf, Feld, Stufen)
 *   2. Die Wirkung der Einstellungen auf die Seite
 *
 * Der zweite Teil ist der eigentliche Inhalt. Das Skript setzt nur Attribute
 * an <html>; was daraus wird, steht hier. Projekte, die etwas anders brauchen,
 * überschreiben es im Thema — ohne das Skript anzufassen.
 *
 * Die Farben des Werkzeugs stehen als Variablen oben und sind dafür gedacht,
 * im Thema ersetzt zu werden.
 */

.zugang {
  --zugang-flaeche:   #ffffff;
  --zugang-text:      #1c1b19;
  --zugang-linie:     #c9c6bd;
  --zugang-ruhig:     #f4f2ec;
  --zugang-akzent:    #b4231f;
  --zugang-aufakzent: #ffffff;
  --zugang-radius:    0;
  --zugang-zeit:      160ms;

  position: fixed;
  z-index: 2147483000;        /* über allem, auch über fremden Einblendungen */
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  color: var(--zugang-text);
}

.zugang[data-ecke='rechts-unten'] { right: 18px; bottom: 18px }
.zugang[data-ecke='links-unten']  { left: 18px;  bottom: 18px }
.zugang[data-ecke='rechts-oben']  { right: 18px; top: 18px }
.zugang[data-ecke='links-oben']   { left: 18px;  top: 18px }

/* ------------------------------------------------------------- Der Knopf */

.zugang-knopf {
  /* 48 px: über den 44 px, die als kleinste bequem treffbare Fläche gelten. */
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: var(--zugang-akzent); color: var(--zugang-aufakzent);
  border: 2px solid transparent; border-radius: var(--zugang-radius);
  cursor: pointer; padding: 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .28);
  transition: background var(--zugang-zeit) linear, transform var(--zugang-zeit) ease-out;
}
.zugang-knopf:hover { transform: scale(1.06) }
.zugang-knopf:focus-visible {
  outline: 3px solid var(--zugang-text);
  outline-offset: 3px;
}

/* ------------------------------------------------------------- Das Feld */

.zugang-feld {
  position: absolute;
  width: 320px; max-width: calc(100vw - 36px);
  max-height: calc(100vh - 110px);
  display: flex; flex-direction: column;
  background: var(--zugang-flaeche);
  border: 1px solid var(--zugang-linie);
  border-radius: var(--zugang-radius);
  box-shadow: 0 6px 28px rgba(0, 0, 0, .3);
}
.zugang[data-ecke$='-unten'] .zugang-feld { bottom: 60px }
.zugang[data-ecke$='-oben']  .zugang-feld { top: 60px }
.zugang[data-ecke^='rechts'] .zugang-feld { right: 0 }
.zugang[data-ecke^='links']  .zugang-feld { left: 0 }

.zugang-kopf {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 12px 10px 12px 16px;
  border-bottom: 1px solid var(--zugang-linie);
}
.zugang-kopf h2 { margin: 0; font-size: 17px; line-height: 1.2 }

.zugang-zu {
  flex: none; width: 44px; height: 44px;
  background: transparent; border: 1px solid transparent;
  font-size: 26px; line-height: 1; color: var(--zugang-text);
  cursor: pointer; border-radius: var(--zugang-radius);
}
.zugang-zu:hover { background: var(--zugang-ruhig) }
.zugang-zu:focus-visible { outline: 3px solid var(--zugang-akzent); outline-offset: -2px }

.zugang-rumpf {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 14px 16px;
}

.zugang-gruppe + .zugang-gruppe { margin-top: 16px }
.zugang-name { font-weight: 600; font-size: 13.5px; margin-bottom: 6px }

.zugang-reihe { display: flex; flex-wrap: wrap; gap: 6px }

.zugang-stufe {
  flex: 1 1 auto; min-width: 64px; min-height: 40px;
  padding: 8px 10px;
  background: var(--zugang-flaeche); color: var(--zugang-text);
  border: 1px solid var(--zugang-linie); border-radius: var(--zugang-radius);
  font: inherit; font-size: 13.5px; cursor: pointer;
  transition: background var(--zugang-zeit) linear, border-color var(--zugang-zeit) linear;
}
.zugang-stufe:hover { background: var(--zugang-ruhig) }
.zugang-stufe:focus-visible { outline: 3px solid var(--zugang-akzent); outline-offset: 2px }

/* Die gewählte Stufe ist nicht nur farbig markiert: Farbe allein reicht nicht,
   wenn jemand sie nicht unterscheiden kann. Darum zusätzlich fett und mit
   kräftigerem Rahmen. */
.zugang-stufe[aria-checked='true'] {
  background: var(--zugang-akzent); color: var(--zugang-aufakzent);
  border-color: var(--zugang-akzent); font-weight: 700;
}

.zugang-fuss {
  flex: none; display: flex; flex-direction: column; gap: 8px;
  padding: 12px 16px; border-top: 1px solid var(--zugang-linie);
  background: var(--zugang-ruhig);
}
.zugang-zurueck {
  min-height: 40px; padding: 8px 12px;
  background: transparent; color: var(--zugang-text);
  border: 1px solid var(--zugang-linie); border-radius: var(--zugang-radius);
  font: inherit; font-size: 13.5px; cursor: pointer;
}
.zugang-zurueck:hover { background: var(--zugang-flaeche) }
.zugang-zurueck:focus-visible { outline: 3px solid var(--zugang-akzent); outline-offset: 2px }

.zugang-erklaerung { font-size: 13px; color: var(--zugang-text); text-align: center }

/* Die Ansage ist für Vorleseprogramme da, nicht für das Auge. Sie darf nicht
   per display:none verschwinden — dann läse sie niemand vor. */
.zugang-ansage {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------------------------------------------------------- Lesehilfe */

.zugang-lesehilfe {
  position: fixed; left: 0; right: 0; top: 0;
  height: 2.6em; margin-top: -1.3em;
  pointer-events: none; z-index: 2147482999;
  border-top: 2px solid rgba(0, 0, 0, .55);
  border-bottom: 2px solid rgba(0, 0, 0, .55);
  background: rgba(255, 235, 120, .18);
}

/* ====================================================================
   Wirkung der Einstellungen
   ==================================================================== */

/* Schriftgröße. Über die Wurzelschriftgröße, damit alles mitwächst, was in
   rem oder em gerechnet ist. Seiten, die durchgehend in px arbeiten, müssen
   im Thema nachhelfen. */
html[data-zugang-schrift='115'] { font-size: 115% }
html[data-zugang-schrift='130'] { font-size: 130% }
html[data-zugang-schrift='150'] { font-size: 150% }

/* Zeilenabstand. !important, weil fast jede Website eigene Zeilenhöhen setzt
   und die Einstellung sonst wirkungslos bliebe — hier ist der Nachdruck
   begründet, denn der Besucher hat es ausdrücklich verlangt. */
html[data-zugang-zeilen='weit'] body,
html[data-zugang-zeilen='weit'] p,
html[data-zugang-zeilen='weit'] li,
html[data-zugang-zeilen='weit'] dd,
html[data-zugang-zeilen='weit'] figcaption {
  line-height: 1.9 !important;
  letter-spacing: .012em;
  word-spacing: .07em;
}

/* Bewegung. Nicht 0s: Eine Dauer von exakt null verschluckt bei manchen
   Browsern das transitionend-Ereignis, und Skripte, die darauf warten,
   bleiben hängen. 1ms ist unsichtbar und feuert zuverlässig. */
html[data-zugang-bewegung='reduziert'] *,
html[data-zugang-bewegung='reduziert'] *::before,
html[data-zugang-bewegung='reduziert'] *::after {
  animation-duration: 1ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 1ms !important;
  scroll-behavior: auto !important;
}

/* Verweise unterstreichen. Farbe allein unterscheidet einen Verweis nicht für
   jeden erkennbar vom Fließtext. Navigation und Schaltflächen bleiben außen
   vor — dort wäre der Strich nur Lärm. */
html[data-zugang-verweise='an'] a:not([class*='knopf']):not([class*='karte']) {
  text-decoration: underline !important;
  text-underline-offset: .18em;
}

/* Gut lesbare Schrift. Keine eigene Schriftdatei: Ein Nachladen kostet Zeit
   und verfehlt oft das Ziel. Die Schriften, die das Gerät mitbringt, sind
   geprüft und sofort da. Entscheidend sind ohnehin Buchstabenabstand und
   das Abschalten von Ligaturen, nicht die Schriftfamilie. */
html[data-zugang-schriftart='lesbar'] body,
html[data-zugang-schriftart='lesbar'] body * {
  font-family: 'Atkinson Hyperlegible', Verdana, 'DejaVu Sans', system-ui, sans-serif !important;
  font-variant-ligatures: none !important;
  letter-spacing: .02em;
}

/* Große Klickflächen. 44 px ist das Maß, unter dem Treffen mühsam wird. */
html[data-zugang-flaechen='an'] a,
html[data-zugang-flaechen='an'] button,
html[data-zugang-flaechen='an'] summary,
html[data-zugang-flaechen='an'] [role='button'],
html[data-zugang-flaechen='an'] input:not([type='hidden']),
html[data-zugang-flaechen='an'] select {
  min-height: 44px;
}
html[data-zugang-flaechen='an'] a,
html[data-zugang-flaechen='an'] button,
html[data-zugang-flaechen='an'] [role='button'] {
  display: inline-flex; align-items: center;
}
/* Verweise im Fließtext bleiben im Textfluss — inline-flex zerrisse den Satz. */
html[data-zugang-flaechen='an'] p a,
html[data-zugang-flaechen='an'] li a {
  display: inline; min-height: 0;
}

/* Hoher Kontrast. Bewusst grob: Wer ihn einschaltet, will Lesbarkeit, nicht
   Gestaltung. Der Entwurf des Hauses tritt dafür zurück.

   Jedes Projekt kann im Thema nachschärfen — etwa für Logos und Abzeichen,
   die hier sonst ihre Erkennbarkeit verlören. */
html[data-zugang-kontrast='hoch'] body,
html[data-zugang-kontrast='hoch'] body * {
  background-color: #ffffff !important;
  color: #000000 !important;
  border-color: #000000 !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
html[data-zugang-kontrast='hoch'] a {
  color: #00309e !important;
  text-decoration: underline !important;
}
html[data-zugang-kontrast='hoch'] button,
html[data-zugang-kontrast='hoch'] [role='button'],
html[data-zugang-kontrast='hoch'] input[type='submit'] {
  background-color: #000000 !important;
  color: #ffffff !important;
  border: 2px solid #000000 !important;
}
html[data-zugang-kontrast='hoch'] :focus-visible {
  outline: 3px solid #00309e !important;
  outline-offset: 2px !important;
}
/* Bilder bleiben, wie sie sind — ein Foto in Schwarzweiß hilft niemandem. */
html[data-zugang-kontrast='hoch'] img,
html[data-zugang-kontrast='hoch'] svg,
html[data-zugang-kontrast='hoch'] video {
  background-color: transparent !important;
}
/* Das Werkzeug selbst nimmt sich von der groben Regel aus, sonst wäre es im
   hohen Kontrast nicht mehr zu bedienen. */
html[data-zugang-kontrast='hoch'] .zugang,
html[data-zugang-kontrast='hoch'] .zugang * {
  background-color: revert !important;
  color: revert !important;
  border-color: revert !important;
}

/* Wer am Gerät weniger Bewegung verlangt hat, bekommt sie auch im Werkzeug. */
@media (prefers-reduced-motion: reduce) {
  .zugang-knopf, .zugang-stufe { transition: none }
  .zugang-knopf:hover { transform: none }
}

/* Auf dem Telefon nimmt das Feld die ganze Breite – der Knopf bleibt aber auf
   der Seite, die das Projekt eingestellt hat. Vorher schob ihn ein
   margin-left:auto immer nach rechts, auch bei „links-unten“. */
@media (max-width: 420px) {
  .zugang[data-ecke] { right: 12px; left: 12px }
  .zugang[data-ecke$='-unten'] { bottom: 12px; top: auto }
  .zugang[data-ecke$='-oben']  { top: 12px; bottom: auto }

  .zugang { display: flex }
  .zugang[data-ecke^='rechts'] { justify-content: flex-end }
  .zugang[data-ecke^='links']  { justify-content: flex-start }

  .zugang-feld { width: auto; left: 0; right: 0 }
}