:root {
  --bg: #f4f1ea;
  --card: #fffdf8;
  --ink: #1a1714;
  --ink-soft: #6b6258;
  --accent: #9c3b1b;
  --line: #d8d0c2;
  --panel: #e9e2d4;
  /* Hoehe der fixierten Schnellnavi. Steht hier und nicht bei
     .schnellnavi, weil das scroll-margin-top der Faecher und Gruppen
     daran haengt: Ohne diesen Abstand verschwindet die Ueberschrift
     nach einem Ankersprung hinter der Leiste. */
  --navi-hoehe: 48px;
}

* { box-sizing: border-box; }

html { background: var(--bg); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Newsreader', Georgia, serif;
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 880px;
  margin: 0 auto;
  padding: 64px 24px 96px;
}

header.masthead {
  padding-bottom: 48px;
  margin-bottom: 48px;
  border-bottom: 1px solid var(--line);
}

/* Bildmarke im Seitenkopf. Breite ueber die Schriftgroesse gekoppelt,
   damit sie auf schmalen Displays mitschrumpft. */
.marke {
  margin: 0 0 32px;
}

.marke img {
  display: block;
  width: clamp(200px, 30vw, 288px);
  height: auto;
}

.kicker {
  display: block;
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-variant: small-caps;
  letter-spacing: 0.04em;
  font-size: 13px;
  color: var(--accent);
  margin-bottom: 16px;
}

h1 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: clamp(2.5rem, 5vw, 4.75rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0 0 24px;
}

h1 em {
  display: block;
  font-style: italic;
  color: var(--accent);
}

.lead {
  font-size: 21px;
  color: var(--ink-soft);
  max-width: 60ch;
  margin: 0;
}

.lead strong {
  color: var(--ink);
  font-weight: 500;
}

section.fach {
  margin-top: 64px;
  /* Platz fuer die fixierte Schnellnavi, sonst liegt die Ueberschrift
     nach einem Ankersprung genau darunter. */
  scroll-margin-top: calc(var(--navi-hoehe) + 24px);
}

section.fach:first-of-type {
  margin-top: 0;
}

.fach-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--line);
}

/* Fachsymbol links vor der Ueberschrift. Der Wrapper ist noetig, weil
   .fach-head die beiden Aussenkanten (Titel / Zaehler) auseinanderzieht. */
.fach-titel {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.fach-symbol {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: block;
}

@media (max-width: 560px) {
  .fach-titel { gap: 12px; }
  .fach-symbol { width: 30px; height: 30px; }
}

h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 34px;
  letter-spacing: -0.01em;
  margin: 0;
}

.fach-count {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-size: 15px;
  color: var(--ink-soft);
  white-space: nowrap;
}

.fach-intro {
  color: var(--ink-soft);
  max-width: 66ch;
  margin: -16px 0 32px;
  font-size: 17px;
}

.gruppe {
  margin-top: 48px;
  scroll-margin-top: calc(var(--navi-hoehe) + 24px);
}

.gruppe:first-of-type {
  margin-top: 0;
}

.gruppe-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.gruppe-head h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.01em;
  margin: 0;
}

.gruppe-intro {
  color: var(--ink-soft);
  max-width: 66ch;
  margin: -12px 0 20px;
  font-size: 16px;
}

.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.card {
  background: var(--card);
  display: grid;
  grid-template-columns: 1fr;
}

/* Zwischenueberschrift einer Abteilung. Sie ist ein eigenes Kind des
   Kartenrasters. Weil das Raster seine Trennlinien ueber gap: 1px auf
   Linienfarbe erzeugt, braucht sie einen eigenen Hintergrund, sonst
   erscheint an ihrer Stelle ein Riss. */
.abteilung {
  background: var(--card);
  margin: 0;
  padding: 22px 28px 12px;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--ink-soft);
}

.abteilung[hidden] { display: none; }

.card-text {
  padding: 28px 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Die Bildflaeche traegt den Reihenton. Er kommt als --ton von der Karte
   (gesetzt aus _build/apps.json) und faellt ohne Angabe auf den alten
   Panelton zurueck. Die Motive selbst sind hintergrundlos: Ein per
   <img src> eingebundenes SVG sieht die Variablen der Seite nicht, ein
   eingebautes Rechteck wuerde den Ton also ueberdecken. */
.card-media {
  --motiv-oben: 24px;
  position: relative;
  margin: 0;
  order: -1;
  height: 176px;
  background: var(--ton, var(--panel));
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

.card-media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (min-width: 640px) {
  .card { grid-template-columns: 1fr 264px; }

  .card-media {
    order: 0;
    height: auto;
    border-bottom: 0;
    border-left: 1px solid var(--line);
  }

  /* Das Motiv sitzt nicht mehr mittig in der ganzen Karte, sondern auf
     Hoehe des Textblocks: Es haengt oben, die Farbflaeche bleibt voll.
     Sonst rutscht die Zeichnung durch den Aktionsblock nach unten und
     steht bei langen Karten deutlich unter der Ueberschrift.
     max-height ist die Reissleine fuer sehr kurze Karten. */
  .card-media img {
    inset: var(--motiv-oben) 0 auto 0;
    height: auto;
    max-height: calc(100% - var(--motiv-oben) * 2);
  }
}

/* Kopfzeile der Karte: Format/Station links, Vorwissens-Stufe rechts
   daneben. Umbricht auf schmalen Displays statt zu quetschen. */
.card .card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  flex-grow: 0;
}

.card .step {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--accent);
  text-transform: uppercase;
  font-variant: small-caps;
}

/* Vorwissens-Stufe. Die drei Stufen werden NICHT allein ueber Farbe
   unterschieden - das Wort steht immer da (WCAG 1.4.1). Die Farbe
   steigert sich nur zusaetzlich von umrissen zu gefuellt, damit man
   die Staffelung auch beim Ueberfliegen sieht. */
.card .niveau {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-variant: small-caps;
  letter-spacing: 0.04em;
  font-size: 12px;
  line-height: 1;
  padding: 4px 9px 3px;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  white-space: nowrap;
}

.card .niveau-aufbau {
  border-color: var(--accent);
  color: var(--accent);
}

.card .niveau-vertiefung {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--card);
}

/* Der Voraussetzungssatz - was man mitbringen sollte, damit die App
   aufgeht. Bewusst kleiner als der Beschreibungstext und nicht
   wachsend, damit der Start-Link unten buendig bleibt. */
.card .voraussetzung {
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-soft);
  flex-grow: 0;
  margin-top: 2px;
}

.card .voraussetzung .vor-label {
  font-variant: small-caps;
  letter-spacing: 0.04em;
  color: var(--ink);
}

.card h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 1.15;
  margin: 0;
}

.card p {
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.55;
  margin: 0;
  flex-grow: 1;
}

/* Aktionszone: alles, was man anklicken kann, sitzt unter einer eigenen
   Trennlinie am Fuss der Karte. Die negativen Seitenmargins ziehen die
   Linie ueber die volle Kartenbreite, das Padding stellt den Text
   wieder auf die Fluchtlinie der Beschreibung. */
.card .aktion {
  margin: 6px -28px 0;
  padding: 16px 28px 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

/* Der Start-Link ist die eine Hauptaktion der Karte und deshalb als
   Schalter gesetzt - Kontur statt Flaeche, scharfe Kanten, kein
   Schatten, damit der Akzent nicht flaechig wird. Der Rahmen macht ihn
   auch ohne Farbwahrnehmung als Schalter erkennbar (WCAG 1.4.1). */
.card a.start {
  align-self: flex-start;
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  text-decoration: none;
  font-size: 16px;
  line-height: 1.2;
  /* Tap-Flaeche fuer Finger: ~44px hoch, Rahmen eingerechnet */
  padding: 11px 17px 10px;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.card a.start:hover {
  background: var(--accent);
  color: var(--card);
}

/* Tastaturfokus in Tinte mit Abstand, damit der Ring auch dann steht,
   wenn der Schalter im Hover gefuellt ist. */
.card a.start:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.card .zusatz {
  margin-top: 6px;
  flex-grow: 0;
}

.card .zusatz .hinweis {
  color: var(--ink-soft);
  font-size: 14px;
}

/* Die Zusatzlinks stehen im Akzent, damit sie als Links lesbar sind.
   Der Unterstrich ist aufgehellt, damit sie dem Start-Schalter nicht
   den Rang ablaufen. */
.card .zusatz a {
  display: inline-block;
  color: var(--accent);
  font-size: 14px;
  text-decoration: underline;
  text-decoration-color: rgba(156, 59, 27, 0.4);
  text-underline-offset: 3px;
  /* Tap-Flaeche fuer Finger vergroessern; bewusst ohne negative
     Margins, damit sie nicht mit dem Start-Link ueberlappt */
  padding: 8px 6px 8px 0;
}

.card .zusatz a:hover {
  color: #7d2f16;
  text-decoration-color: var(--accent);
}

footer {
  margin-top: 80px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 15px;
}

footer .kicker {
  margin-bottom: 8px;
}

footer .rechtliches {
  margin-top: 20px;
  font-size: 14px;
}

footer .rechtliches a {
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}

footer .rechtliches a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

footer .rechtliches span {
  margin: 0 8px;
  color: var(--line);
}

footer .madewith {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: var(--ink-soft);
  opacity: .62;
}

footer .madewith img {
  height: 15px;
  width: auto;
  display: block;
}

/* Fusszeile zweispaltig: links der Text, rechts ein kleiner QR-Code auf
   diese Startseite. Gedacht fuer den Beamer, damit die Klasse die Seite
   ohne Abtippen aufs eigene Geraet holt. Bewusst gedaempft; beim
   Darueberfahren wird er voll sichtbar. Auf schmalen Displays rutscht er
   per flex-wrap unter den Text. */
.footer-inhalt {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px 40px;
  flex-wrap: wrap;
}

.footer-text {
  flex: 1 1 320px;
  min-width: 0;
}

.footer-qr {
  flex: 0 0 auto;
  text-align: center;
  opacity: .48;
  transition: opacity .2s ease;
}

.footer-qr:hover,
.footer-qr:focus-within {
  opacity: 1;
}

.footer-qr a {
  display: block;
  border-bottom: 0;
  cursor: zoom-in;
}

.footer-qr a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.footer-qr img {
  display: block;
  width: 92px;
  height: 92px;
}

/* Grossansicht des QR-Codes. Gedacht fuer den Beamer: gross genug, dass
   eine Klasse ihn aus der letzten Reihe abscannt, mit der Adresse als
   Text darunter fuer alle, bei denen die Kamera streikt.
   Ohne JavaScript wird der Dialog nie geoeffnet; dann fuehrt der Link
   auf die SVG-Datei, die der Browser von sich aus skaliert. */
.qr-dialog {
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--card);
  color: var(--ink);
  padding: 28px 28px 20px;
  max-width: 92vw;
  max-height: 92vh;
  box-shadow: 0 18px 60px rgba(26, 23, 20, .28);
}

.qr-dialog::backdrop {
  background: rgba(26, 23, 20, .72);
}

.qr-dialog img {
  display: block;
  width: min(66vmin, 460px);
  height: auto;
}

.qr-dialog-adresse {
  margin: 18px 0 0;
  text-align: center;
  font-family: 'Newsreader', Georgia, serif;
  font-size: 20px;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
}

.qr-dialog-zu {
  position: absolute;
  top: 6px;
  right: 10px;
  border: 0;
  background: none;
  padding: 4px 8px;
  font-size: 26px;
  line-height: 1;
  color: var(--ink-soft);
  cursor: pointer;
}

.qr-dialog-zu:hover {
  color: var(--accent);
}

.footer-qr span {
  display: block;
  margin-top: 7px;
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
}

/* ---------------------------------------------------------------
   Filterleiste, Suche, einklappbare Gruppen
   Die Leiste ist im Markup mit [hidden] versehen und wird erst von
   app.js sichtbar gemacht. Ohne JavaScript bleibt die Seite genau
   so nutzbar wie vorher, nur ohne Filter.
   --------------------------------------------------------------- */

/* ------------------------------------------------- Schnellnavi
   Duenne Leiste am oberen Rand, die erst auftaucht, wenn die Toolbar
   aus dem Blick gescrollt ist. Papierfarbe, eine 1px-Linie, sonst
   nichts: keine Schatten, keine Radien, keine Farbflaeche. Sie soll
   erreichbar sein, nicht auffallen.
   Der Wert --navi-hoehe haengt mit dem scroll-margin-top der Faecher
   und Gruppen zusammen. Wird die Leiste hoeher, muss er dort mit. */
.schnellnavi {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  transform: translateY(-101%);
  transition: transform 0.18s ease-out;
}

.schnellnavi[hidden] { display: none; }

.schnellnavi.sichtbar { transform: translateY(0); }

/* Wer Bewegung reduziert haben will, bekommt sie hart geschaltet. */
@media (prefers-reduced-motion: reduce) {
  .schnellnavi { transition: none; }
}

/* Innenmass wie .wrap, damit die Leiste mit dem Satzspiegel fluchtet. */
.schnellnavi-innen {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 24px;
}

.schnellnavi-leiste .schnellnavi-innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: var(--navi-hoehe);
}

/* Tap-Flaeche: volle Leistenhoehe, damit der Finger auf dem iPad
   nicht zielen muss. cursor:pointer ist auf iOS Bedingung dafuer,
   dass der Klick auf einem Nicht-Formularelement ueberhaupt zuendet. */
.schnellnavi-schalter {
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--navi-hoehe);
  padding: 0 12px 0 0;
  margin: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: 'Newsreader', Georgia, serif;
  font-size: 16px;
  color: var(--ink);
}

.schnellnavi-schalter:hover { color: var(--accent); }

.schnellnavi-schalter:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}

/* Drei Striche, rein aus Rahmen gebaut - kein Bild, keine Fremddatei.
   Beim Aufklappen bleiben sie stehen; das Panel darunter zeigt
   deutlich genug, dass etwas offen ist. */
.schnellnavi-striche {
  display: block;
  width: 18px;
  height: 12px;
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  position: relative;
}

.schnellnavi-striche::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 1px solid currentColor;
}

/* Anzeige des Fachs, in dem man gerade steht. Reine Orientierung,
   deshalb im Markup aria-hidden - Screenreader haben die Ueberschriften. */
.schnellnavi-ort {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-variant: small-caps;
  letter-spacing: 0.04em;
  font-size: 13px;
  color: var(--accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.schnellnavi-panel {
  border-top: 1px solid var(--line);
  max-height: calc(100vh - var(--navi-hoehe) - 1px);
  overflow-y: auto;
  /* Verhindert, dass ein Wisch am Listenende die Seite dahinter
     mitzieht. Sonst schliesst sich das Panel beim Scrollen darin. */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.schnellnavi-panel[hidden] { display: none; }

/* Je Fach eine Spalte, solange Platz ist. Darunter untereinander. */
.schnellnavi-spalten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 24px;
  padding-top: 20px;
  padding-bottom: 24px;
}

.navi-fach[hidden] { display: none; }

.navi-fach-link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-height: 38px;
  padding: 8px 0;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 19px;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}

.navi-fach-link:hover { color: var(--accent); }

.navi-gruppen {
  list-style: none;
  margin: 0;
  padding: 0;
}

.navi-gruppen li[hidden] { display: none; }

.navi-gruppen a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-height: 38px;
  padding: 8px 0;
  font-size: 16px;
  color: var(--ink-soft);
  text-decoration: none;
}

.navi-gruppen a:hover { color: var(--accent); }

.schnellnavi a:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}

/* Der Zaehler traegt nie allein - das Wort "Apps" steht immer dabei. */
.navi-count {
  flex: 0 0 auto;
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 400;
  font-size: 13px;
  font-style: italic;
  color: var(--ink-soft);
}

@media (max-width: 560px) {
  .schnellnavi-innen { padding: 0 16px; }
  .schnellnavi-spalten { gap: 16px; }
  /* Auf schmalen Displays wird die Merkzeile zugunsten des Schalters
     geopfert - der Fachname steht ja gleich darunter in der Ueberschrift. */
  .schnellnavi-ort { display: none; }
}

/* Sprungziele der Schnellnavi bekommen kurz den Fokus, damit die
   Tastatur an der richtigen Stelle weiterlaeuft. Ein Fokusring waere
   hier irrefuehrend: Man hat gerade selbst dorthin gesprungen. */
[tabindex="-1"]:focus { outline: none; }

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 10px;
  padding-bottom: 22px;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--line);
}

.toolbar[hidden] { display: none; }

.suche {
  position: relative;
  flex: 1 1 240px;
  min-width: 200px;
}

.suche input {
  width: 100%;
  font-family: 'Newsreader', Georgia, serif;
  font-size: 16px;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 11px 40px 11px 13px;
  -webkit-appearance: none;
  appearance: none;
}

.suche input:focus {
  outline: none;
  border-color: var(--accent);
}

.suche input::placeholder {
  color: var(--ink-soft);
  opacity: .75;
}

.suche-reset {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  line-height: 1;
  font-size: 17px;
  color: var(--ink-soft);
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}

.suche-reset:hover { color: var(--accent); }

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

.chip {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-variant: small-caps;
  letter-spacing: 0.04em;
  font-size: 15px;
  color: var(--ink-soft);
  background: none;
  border: 1px solid var(--line);
  /* Tap-Flaeche: mind. ~38px hoch fuer Finger auf dem iPad */
  padding: 9px 16px 8px;
  cursor: pointer;
}

.chip:hover { color: var(--accent); border-color: var(--accent); }

.chip[aria-pressed="true"] {
  color: var(--card);
  background: var(--accent);
  border-color: var(--accent);
}

/* Zweite Chip-Reihe (Vorwissen) etwas absetzen, damit die beiden
   Filterdimensionen nicht als eine lange Reihe gelesen werden. */
.chips-niveau {
  flex-basis: 100%;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.niveau-erklaerung {
  flex-basis: 100%;
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
}

.niveau-erklaerung strong {
  font-weight: 500;
  color: var(--ink);
}

.toolbar-meta {
  flex-basis: 100%;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-size: 14px;
  color: var(--ink-soft);
}

.toolbar-meta button {
  font: inherit;
  color: var(--ink-soft);
  background: none;
  border: 0;
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 3px;
  /* Tap-Flaeche fuer Finger vergroessern, optisch unveraendert */
  padding: 10px 0 10px 10px;
  margin: -10px 0;
  cursor: pointer;
}

.toolbar-meta button:hover { color: var(--accent); text-decoration-color: var(--accent); }

/* Gruppen als <details> --------------------------------------- */

summary.gruppe-head,
summary.fach-head {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding-right: 30px;
}

summary.gruppe-head::-webkit-details-marker,
summary.fach-head::-webkit-details-marker { display: none; }

summary.gruppe-head::after,
summary.fach-head::after {
  content: "";
  position: absolute;
  right: 4px;
  width: 8px;
  height: 8px;
  border-right: 1px solid var(--ink-soft);
  border-bottom: 1px solid var(--ink-soft);
  transform: rotate(45deg);
  transition: transform .15s ease;
}

summary.gruppe-head::after { top: 9px; }
summary.fach-head::after   { top: 16px; width: 10px; height: 10px; }

details[open] > summary.gruppe-head::after,
details[open] > summary.fach-head::after {
  transform: rotate(-135deg);
}

summary.gruppe-head:hover h3,
summary.fach-head:hover h2 { color: var(--accent); }

summary.gruppe-head:focus-visible,
summary.fach-head:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 4px;
}

/* zugeklappt: Vorspann und Abstände nicht mitschleppen */
details.gruppe:not([open]) { margin-bottom: 8px; }
details.gruppe:not([open]) > summary.gruppe-head { margin-bottom: 0; }
details.fach-body:not([open]) > summary.fach-head { margin-bottom: 0; }

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

/* Treffer / Nichttreffer -------------------------------------- */

.card[hidden],
section.fach[hidden],
details.gruppe[hidden] { display: none; }

.kein-treffer {
  margin: 0;
  padding: 40px 0 0;
  font-size: 17px;
  color: var(--ink-soft);
}

.kein-treffer[hidden] { display: none; }

mark {
  background: rgba(156, 59, 27, 0.16);
  color: inherit;
  padding: 0 1px;
}