@import "tokens.css";

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

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--schrift-text);
  font-size: 1.0625rem;
  line-height: var(--zeilenhoehe);
}

/*
 * Textgroesse fuer Inhaltstexte, ueber den Knopf im Kopf einstellbar
 * (drei Stufen). Wirkt bewusst nur auf ererbte Schriftgroesse: Elemente mit
 * eigener rem-Groesse (Ueberschriften, Knoepfe, Pillen, Abstaende) bleiben
 * unveraendert, weil rem immer gegen die Wurzel-Schriftgroesse rechnet.
 * Nur echter Fliesstext ohne eigene Groessenangabe skaliert mit.
 */
html[data-textgroesse="mittel"] body {
  font-size: 1.22rem;
}

html[data-textgroesse="gross"] body {
  font-size: 1.38rem;
}

h1,
h2,
h3,
h4 {
  font-family: var(--schrift-display);
  line-height: var(--zeilenhoehe-eng);
  font-weight: 700;
  margin: 0 0 var(--raum-4);
  text-wrap: balance;
}

h1 {
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
}
h2 {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
}
h3 {
  font-size: 1.3rem;
}

p,
ul,
ol {
  margin: 0 0 var(--raum-4);
}

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

a:hover {
  text-decoration-thickness: 2px;
}

/* Sichtbarer Fokus, ueberall gleich. Nie entfernen. */
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-radius: var(--rund-klein);
}

img,
svg {
  max-width: 100%;
  height: auto;
}

/* Klassenregeln wie ".js .nur-mit-js { display: block }" sind spezifischer
   als das hidden-Attribut und wuerden ausgeblendete Bereiche wieder
   sichtbar machen. Deshalb hier ausnahmsweise !important. */
[hidden] {
  display: none !important;
}

.nur-fuer-screenreader {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.sprungmarke {
  position: absolute;
  left: var(--raum-4);
  top: -4rem;
  z-index: 10;
  background: var(--ink);
  color: var(--paper);
  padding: var(--raum-3) var(--raum-4);
  border-radius: var(--rund-klein);
  transition: top var(--regung) var(--regung-kurve);
}

.sprungmarke:focus {
  top: var(--raum-4);
}

.bahn {
  width: min(100% - 2rem, var(--breite-seite));
  margin-inline: auto;
}

/* ---------- Kopf ---------- */

.kopf {
  border-bottom: 1px solid var(--linie);
  background: var(--paper);
}

.kopf__bahn {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--raum-2) var(--raum-8);
  padding-block: var(--raum-3);
}

.kopf__marke {
  display: flex;
  align-items: center;
}

.kopf__marke img {
  height: 3.25rem;
  width: auto;
}

/*
 * Auf schmalen Geraeten klappt die Navigation ueber eine Checkbox auf - kein
 * details-Element, denn ein geschlossenes details wird in manchen Browsern
 * als Flex-Item nur anhand der (hier ausgeblendeten) Zusammenfassung bemessen
 * und bekommt dadurch Breite 0, egal welches display der Inhalt bekommt. Die
 * Checkbox selbst ist unsichtbar, das Label daneben ist der sichtbare Knopf -
 * ein Klick oder Enter/Leertaste darauf schaltet die Checkbox nativ um, ganz
 * ohne JavaScript. Ab 48rem ist genug Platz fuer eine normale Zeile, dort
 * bleibt die Navigation immer sichtbar und der Menueknopf verschwindet.
 */
.kopf__menueknopf {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--rund-mittel);
  cursor: pointer;
}

.kopf__menue-schalter:focus-visible ~ .kopf__menueknopf {
  outline: 2px solid var(--ink);
  outline-offset: -2px;
}

.kopf__menueicon,
.kopf__menueicon::before,
.kopf__menueicon::after {
  display: block;
  width: 1.4rem;
  height: 2px;
  border-radius: 1px;
  background: var(--ink);
  transition:
    transform var(--regung) var(--regung-kurve),
    top var(--regung) var(--regung-kurve),
    background var(--regung) var(--regung-kurve);
}

.kopf__menueicon {
  position: relative;
}

.kopf__menueicon::before,
.kopf__menueicon::after {
  content: "";
  position: absolute;
  left: 0;
}

.kopf__menueicon::before {
  top: -6px;
}

.kopf__menueicon::after {
  top: 6px;
}

/* Aus den drei Strichen wird ein Kreuz, wenn das Menue offen ist. */
.kopf__menue-schalter:checked ~ .kopf__menueknopf .kopf__menueicon {
  background: transparent;
}

.kopf__menue-schalter:checked ~ .kopf__menueknopf .kopf__menueicon::before {
  top: 0;
  transform: rotate(45deg);
}

.kopf__menue-schalter:checked ~ .kopf__menueknopf .kopf__menueicon::after {
  top: 0;
  transform: rotate(-45deg);
}

.kopf__navigation {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + var(--raum-2));
  z-index: 20;
  min-width: 12rem;
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: var(--rund-mittel);
  box-shadow: 0 4px 20px rgb(29 29 27 / 0.12);
  padding: var(--raum-2);
}

.kopf__menue-schalter:checked ~ .kopf__navigation {
  display: block;
}

.kopf__navigation ul {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kopf__navigation a {
  display: block;
  padding: var(--raum-3) var(--raum-4);
  border-radius: var(--rund-klein);
  color: var(--ink);
  text-decoration: none;
  font-size: 1.1rem;
}

.kopf__navigation a:hover {
  background: var(--soft);
}

.kopf__navigation a[aria-current="page"] {
  font-weight: 600;
  color: var(--magenta);
}

@media (min-width: 48rem) {
  .kopf__menueknopf {
    display: none;
  }

  /* Ab hier ist die Navigation immer da, unabhaengig vom Schalter-Zustand. */
  .kopf__navigation {
    display: block;
    position: static;
    margin-left: auto;
    min-width: 0;
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
  }

  .kopf__navigation ul {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--raum-2) var(--raum-6);
  }

  .kopf__navigation a {
    display: inline;
    padding: var(--raum-1) 0;
    border-bottom: 2px solid transparent;
  }

  .kopf__navigation a:hover {
    background: none;
    border-bottom-color: var(--linie);
  }

  .kopf__navigation a[aria-current="page"] {
    border-bottom-color: var(--magenta);
  }
}

/* ---------- Werkzeuge im Kopf: Textgroesse, Popup erneut anzeigen ---------- */

.kopf__werkzeuge {
  display: flex;
  align-items: center;
  gap: var(--raum-2);
}

.kopf__werkzeug {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--linie);
  border-radius: var(--rund-mittel);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
}

.kopf__werkzeug:hover {
  background: var(--soft);
}

.kopf__schriftgroesse {
  font-family: var(--schrift-display);
  font-weight: 700;
  font-size: 0.9rem;
  transition: font-size var(--regung) var(--regung-kurve);
}

html[data-textgroesse="mittel"] .kopf__schriftgroesse {
  font-size: 1.05rem;
}

html[data-textgroesse="gross"] .kopf__schriftgroesse {
  font-size: 1.2rem;
}

.kopf__popup-knopf {
  font-family: var(--schrift-display);
  font-weight: 700;
  font-style: italic;
  font-size: 1.1rem;
  border-color: var(--magenta);
  color: var(--magenta);
}

/* ---------- Startseite: Suche und Filter ---------- */

/*
 * Mobil zuerst: eine Spalte, die Steuerung ist eine schmale Zeile aus
 * Ueberschrift, Suchfeld und zugeklapptem Filterbereich. Die Karten
 * beginnen unmittelbar darunter.
 * Ab 64rem wandert die Steuerung als mitlaufende Spalte an den Rand.
 */
.startseite {
  display: grid;
  gap: var(--raum-4);
  padding-block: var(--raum-4) var(--raum-12);
}

.steuerung__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--raum-2) var(--raum-4);
}

.steuerung__titel {
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--gruen);
  margin: 0;
}

.steuerung__titel--violett {
  color: var(--magenta);
}

/* Auf schmalen Geraeten ist die Beschriftung nur fuer Screenreader da -
   sichtbar bliebe sie eine ganze Zeile, die die Karten nach unten drueckt.
   Der Platzhalter im Feld sagt sehenden Nutzenden dasselbe. */
.suchfeld label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.steuerung__hinweis {
  margin: var(--raum-4) 0 var(--raum-2);
  font-weight: 600;
}

/*
 * Auf schmalen Geraeten steht das Suchfeld ueber dem Filterknopf, und der
 * Filterbereich klappt darueber auf. Die ueberlagernde Darstellung gilt nur
 * mit JavaScript - ohne bleibt alles im Textfluss und damit vollstaendig
 * sichtbar.
 */
.steuerung form {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--raum-2);
  margin-top: var(--raum-3);
  position: relative;
}

.js .filterbereich__inhalt {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + var(--raum-2));
  z-index: 5;
  max-height: 60vh;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: var(--rund-mittel);
  box-shadow: 0 4px 20px rgb(29 29 27 / 0.12);
  padding: var(--raum-4);
}

.einstieg {
  padding-block: var(--raum-12) var(--raum-8);
}

.einstieg p {
  max-width: var(--breite-text);
  font-size: 1.15rem;
  color: var(--gedaempft);
}

/* ---------- Ausklappbarer Filterbereich ---------- */

.filterbereich {
  border: 1px solid var(--linie);
  border-radius: var(--rund-mittel);
  background: #fff;
  /* Damit sich der aufklappende Bereich an der Form ausrichtet und nicht
     an diesem schmalen Knopf. */
  position: static;
}

.filterbereich > summary {
  display: flex;
  align-items: center;
  gap: var(--raum-2);
  /* 44px Mindesthoehe: mit dem Finger sicher treffbar. */
  min-height: 2.75rem;
  padding: var(--raum-2) var(--raum-4);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  border-radius: var(--rund-mittel);
}

.filterbereich > summary::-webkit-details-marker {
  display: none;
}

/* Der Pfeil zeigt den Zustand zusaetzlich zur Farbe an. */
.filterbereich > summary::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: rotate(-45deg);
  transition: transform var(--regung) var(--regung-kurve);
  flex: none;
}

.filterbereich[open] > summary::before {
  transform: rotate(45deg);
}

.filterbereich > summary:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: -2px;
}

.filterbereich__zahl {
  margin-left: auto;
  padding: 0 var(--raum-2);
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.8rem;
  line-height: 1.6;
}

.filterbereich__inhalt {
  display: grid;
  gap: var(--raum-4);
  padding: var(--raum-2) var(--raum-4) var(--raum-4);
  border-top: 1px solid var(--linie);
}

.suchfeld {
  display: flex;
  flex-direction: column;
  gap: var(--raum-2);
}

.suchfeld label {
  font-weight: 600;
}

.suchfeld input,
.sortierung select,
.knopf,
.filterpille span {
  /* Mindestens 44px hoch: sicher mit dem Finger treffbar.
     Mindestens 16px Schrift: iOS zoomt sonst beim Antippen hinein. */
  min-height: 2.75rem;
  font-size: 1rem;
}

.suchfeld input {
  font: inherit;
  padding: var(--raum-3) var(--raum-4);
  border: 1px solid var(--linie);
  border-radius: var(--rund-mittel);
  background: #fff;
  color: inherit;
  width: 100%;
}

.filtergruppe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-2);
  margin: 0;
  padding: 0;
  border: 0;
}

.filtergruppe legend {
  float: left;
  width: 100%;
  font-weight: 600;
  padding: 0 0 var(--raum-2);
}

/* Filter sind echte Checkboxen: mit Tastatur bedienbar, von Screenreadern
   als Auswahl angesagt. Sichtbar ist die Pille daneben. */
.filterpille input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.filterpille span {
  display: inline-flex;
  align-items: center;
  gap: var(--raum-2);
  padding: var(--raum-2) var(--raum-4);
  border: 1px solid var(--linie);
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
  transition: background var(--regung) var(--regung-kurve);
}

.filterpille span::before {
  content: "";
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 2px;
  border: 1px solid var(--kat-akzent, var(--gedaempft));
  background: var(--kat-pille, transparent);
  flex: none;
}

.filterpille input:checked + span {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* Ausgewaehlt wird nicht nur ueber Farbe angezeigt, sondern zusaetzlich
   ueber ein Haekchen im Kaestchen. */
.filterpille input:checked + span::before {
  content: "✓";
  display: grid;
  place-items: center;
  font-size: 0.7rem;
  line-height: 1;
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}

.filterpille input:focus-visible + span {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.mehr-schlagworte {
  background: none;
  border: 0;
  padding: var(--raum-2) 0;
  font: inherit;
  color: var(--magenta);
  text-decoration: underline;
  cursor: pointer;
}

.sortierung {
  display: flex;
  flex-direction: column;
  gap: var(--raum-2);
}

.sortierung label {
  font-weight: 600;
}

.sortierung select {
  font: inherit;
  padding: var(--raum-2) var(--raum-3);
  border: 1px solid var(--linie);
  border-radius: var(--rund-mittel);
  background: #fff;
  color: inherit;
}

.knopf {
  font: inherit;
  padding: var(--raum-2) var(--raum-4);
  border: 1px solid var(--linie);
  border-radius: var(--rund-mittel);
  background: #fff;
  color: inherit;
  cursor: pointer;
}

.knopf:hover {
  background: var(--soft);
}

.knopf--haupt {
  background: var(--magenta);
  border-color: var(--magenta);
  color: var(--paper);
}

.knopf--haupt:hover {
  background: #9c0a6c;
}

.trefferzahl {
  margin: 0;
  font-size: 0.85rem;
  color: var(--gedaempft);
}

/* ---------- Kartenraster ---------- */

.kartenraster {
  display: grid;
  /* min() verhindert, dass die Spalte auf schmalen Geraeten breiter wird
     als der Bildschirm - sonst scrollt die Seite seitlich. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr));
  gap: var(--raum-4);
  padding: 0;
  margin: 0;
  list-style: none;
}

@media (min-width: 40rem) {
  .kartenraster {
    gap: var(--raum-6);
  }
}

/* ---------- Ab hier wird die Steuerung zu einer schmalen, klebenden Leiste ---------- */

/*
 * Statt einer dauerhaften Randspalte bleibt die Steuerung eine kompakte
 * Zeile ueber den Karten - Titel, Suche und ein Filterknopf. Der
 * Filterbereich bleibt ein- und ausklappbar und nimmt damit nur Platz ein,
 * wenn er wirklich gebraucht wird.
 */
@media (min-width: 64rem) {
  .startseite {
    padding-block: var(--raum-6) var(--raum-16);
  }

  .suchfeld label {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip-path: none;
    font-weight: 600;
  }

  .steuerung {
    position: sticky;
    top: var(--raum-4);
    z-index: 6;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--raum-3) var(--raum-6);
    padding: var(--raum-3) var(--raum-4);
    background: rgb(251 248 243 / 0.92);
    backdrop-filter: blur(8px);
    border: 1px solid var(--linie);
    border-radius: var(--rund-gross);
    box-shadow: 0 2px 16px rgb(29 29 27 / 0.06);
  }

  .steuerung__kopf {
    margin-right: auto;
  }

  .steuerung__titel {
    font-size: 1.75rem;
  }

  .steuerung form {
    display: flex;
    align-items: center;
    gap: var(--raum-3);
    margin-top: 0;
  }

  .suchfeld {
    flex-direction: row;
    align-items: center;
    gap: var(--raum-2);
  }

  .suchfeld input {
    width: 16rem;
  }

  /* Der Filterbereich haengt jetzt am Knopf, nicht mehr an der ganzen
     Zeile - sonst waere das Dropdown auf breiten Bildschirmen riesig. */
  .filterbereich {
    position: relative;
  }

  .js .filterbereich__inhalt {
    left: auto;
    right: 0;
    width: min(26rem, 90vw);
  }
}

.karte {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--raum-3);
  padding: var(--raum-6);
  background: var(--kat-flaeche, var(--paper));
  border: 2px solid var(--kat-akzent, var(--gedaempft));
  border-radius: var(--rund-mittel);
  transition:
    transform var(--regung) var(--regung-kurve),
    box-shadow var(--regung) var(--regung-kurve);
}

.karte:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 12px rgb(29 29 27 / 0.08);
}

.karte:focus-within {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.karte h2,
.karte h3 {
  margin: 0;
  font-size: 1.35rem;
}

/* Feste einzeilige Hoehe, damit die Ueberschrift darunter bei jeder Karte
   auf derselben Hoehe beginnt - unabhaengig von der Laenge des Kategorienamens. */
.karte__kategorie {
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--kat-akzent, var(--gedaempft));
}

.karte__schlagworte {
  margin-top: auto;
  padding-top: var(--raum-2);
}

.karte__schlagworte .pille {
  padding: 0.15rem var(--raum-2);
  font-size: 0.75rem;
}

/* Die ganze Karte ist anklickbar, aber im Markup ist es ein normaler Link
   in der Ueberschrift - so bleibt sie mit Tastatur und Screenreader
   eindeutig bedienbar. */
.karte__link {
  color: inherit;
  text-decoration: none;
}

.karte__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.karte__link:hover {
  text-decoration: underline;
}

.karte__link:focus-visible {
  outline: none;
}

/* Faengt Zusammenfassungen ab, die auf schmalen Karten nicht in vier Zeilen
   passen - laesst die Karten in einer Reihe optisch gleich hoch. */
.karte__kurz {
  margin: 0;
  color: var(--gedaempft);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pillen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pille {
  display: inline-block;
  padding: var(--raum-1) var(--raum-3);
  border-radius: 999px;
  font-size: 0.85rem;
  line-height: 1.4;
  background: var(--kat-pille, var(--soft));
  border: 1px solid transparent;
  color: var(--ink);
}

.pille--kategorie {
  font-weight: 600;
  border-color: var(--kat-akzent, var(--gedaempft));
}

.pille--schlagwort {
  background: transparent;
  border-color: var(--linie);
  color: var(--gedaempft);
}

.leer {
  padding: var(--raum-12) 0 var(--raum-16);
  max-width: var(--breite-text);
}

/* ---------- Kartendetailseite ---------- */

.kartenseite {
  padding-block: var(--raum-8) var(--raum-16);
}

.kartenseite__kopf {
  padding: var(--raum-8);
  padding-left: calc(var(--raum-8) + 4px);
  background: var(--kat-flaeche, var(--soft));
  border: 1px solid var(--linie);
  border-left: 4px solid var(--kat-akzent, var(--gedaempft));
  border-radius: var(--rund-mittel);
  margin-bottom: var(--raum-8);
}

.kartenseite__kopf h1 {
  margin-bottom: var(--raum-4);
}

.kartenseite__kurz {
  font-size: 1.15rem;
  margin-bottom: var(--raum-4);
}

.kartentext {
  max-width: var(--breite-text);
}

.kartentext h2 {
  margin-top: var(--raum-8);
}

.kartentext blockquote {
  margin: var(--raum-6) 0;
  padding: var(--raum-4) var(--raum-6);
  border-left: 4px solid var(--kat-akzent, var(--linie));
  background: var(--soft);
  border-radius: 0 var(--rund-mittel) var(--rund-mittel) 0;
}

.verweise {
  margin-top: var(--raum-12);
  padding-top: var(--raum-8);
  border-top: 1px solid var(--linie);
}

.verweise h2 {
  font-size: 1.3rem;
}

.verweise + .verweise {
  border-top: 0;
  margin-top: var(--raum-8);
  padding-top: 0;
}

.stand {
  margin-top: var(--raum-8);
  color: var(--gedaempft);
  font-size: 0.9rem;
}

.zurueck {
  display: inline-block;
  margin-bottom: var(--raum-6);
}

/* ---------- Lernstrecken ---------- */

.knopf--link {
  display: inline-flex;
  align-items: center;
  gap: var(--raum-2);
  text-decoration: none;
  padding-inline: var(--raum-4);
}

.karte--strecke {
  border-color: var(--magenta);
}

.karte--strecke .karte__kategorie {
  color: var(--magenta);
}

.schrittliste {
  display: grid;
  gap: var(--raum-3);
  padding-left: var(--raum-6);
  margin: 0;
}

.schrittliste li {
  padding-left: var(--raum-1);
}

.schrittliste__kurz {
  display: block;
  color: var(--gedaempft);
  font-size: 0.95rem;
}

.strecke__kopf {
  display: grid;
  gap: var(--raum-2);
  margin-bottom: var(--raum-6);
}

.strecke__stand {
  margin: 0;
  font-weight: 600;
}

.strecke__balken {
  height: 6px;
  border-radius: 999px;
  background: var(--soft);
  border: 1px solid var(--linie);
  overflow: hidden;
}

.strecke__balken span {
  display: block;
  height: 100%;
  background: var(--kat-akzent, var(--ink));
}

.kontrollfrage {
  margin-top: var(--raum-12);
  padding: var(--raum-6);
  border: 1px solid var(--linie);
  border-radius: var(--rund-mittel);
  background: var(--soft);
}

.kontrollfrage h2 {
  margin-top: 0;
  font-size: 1.3rem;
}

.strecke__weiter {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--raum-4);
  margin-top: var(--raum-12);
  padding-top: var(--raum-6);
  border-top: 1px solid var(--linie);
}

/* ---------- Einfache Textseiten ---------- */

.textseite {
  padding-block: var(--raum-12) var(--raum-16);
  max-width: var(--breite-text);
}

/* Textabschnitte im Kartendesign - derselbe 2px-Rahmen und dieselbe
   Flaechenfarbe wie bei den Infokarten, nur je Abschnitt eigens gesetzt
   statt aus der Kategorie abgeleitet. */
.info-box {
  margin: var(--raum-6) 0;
  padding: var(--raum-6);
  background: var(--box-flaeche, var(--soft));
  border: 2px solid var(--box-akzent, var(--linie));
  border-radius: var(--rund-mittel);
}

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

.info-box h2 {
  margin-top: 0;
  font-size: 1.4rem;
  color: var(--box-akzent, inherit);
}

.info-box h3 {
  font-size: 1.1rem;
}

.info-box > :last-child {
  margin-bottom: 0;
}

/* Einheitliches Titelbild ueber die Seiten hinweg: gleiche Groesse und
   Schnitt wie die Infokarten-Ueberschrift, je Bereich eine eigene Farbe. */
.seitentitel--orange {
  color: var(--orange);
}

.seitentitel--violett {
  color: var(--magenta);
}

.team {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-8);
  margin: 0 0 var(--raum-8);
  padding: 0;
  list-style: none;
}

.team__person {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--raum-3);
  width: 8rem;
  text-align: center;
}

.team__person img {
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  object-fit: cover;
}

.team__person span {
  font-weight: 600;
}

.partner-liste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-6);
  margin: var(--raum-4) 0;
  padding: 0;
  list-style: none;
}

.partner-liste li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--raum-2);
  max-width: 11rem;
}

.partner-liste img {
  height: 2.75rem;
  width: auto;
}

.partner-liste span {
  font-size: 0.85rem;
  color: var(--gedaempft);
}


/* ---------- Fuss ---------- */

.fuss {
  background: var(--soft);
  border-top: 1px solid var(--linie);
  padding-block: var(--raum-12);
  font-size: 0.95rem;
}

.fuss__spalten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--raum-8);
}

.fuss h2 {
  font-size: 1.1rem;
}

.fuss ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.fuss a {
  color: var(--ink);
}

.foerderung {
  margin-top: var(--raum-12);
  padding-top: var(--raum-8);
  border-top: 1px solid var(--linie);
}

.foerderung p {
  max-width: var(--breite-text);
}

.partnerlogos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--raum-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.partnerlogos img {
  height: 3rem;
  width: auto;
}

/* ---------- Ohne JavaScript ---------- */

/*
 * Die Seite wird vollstaendig ohne JavaScript ausgeliefert. Das Skript
 * blendet die statische Fassung aus und uebernimmt - schlaegt es fehl,
 * bleibt alles lesbar und ueber die Kategorieseiten filterbar.
 *
 * Beide Regeln blenden nur aus und schreiben nie vor, WIE ein Element
 * angezeigt wird. Eine Regel wie ".js .nur-mit-js { display: block }" wuerde
 * jedes eigene Layout dieser Elemente ueberstimmen - genau daran ist das
 * Nebeneinander von Suchfeld und Filterknopf zuerst gescheitert.
 */
.js .nur-ohne-js {
  display: none;
}

html:not(.js) .nur-mit-js {
  display: none;
}

/* ---------- Popup ---------- */

/*
 * Erscheint beim ersten Besuch der jeweiligen Seite ueber dem Inhalt. Ohne
 * JavaScript bleibt es verborgen (siehe popup.js) - kein kaputter Zustand,
 * nur ein Hinweis, der ausbleibt.
 */
.popup {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--raum-4);
  background: rgb(29 29 27 / 0.55);
}

.popup__karte {
  position: relative;
  width: min(28rem, 100%);
  max-height: calc(100vh - 2 * var(--raum-4));
  overflow-y: auto;
  background: var(--popup-flaeche, var(--paper));
  border-top: 4px solid var(--popup-akzent, var(--magenta));
  border-radius: var(--rund-gross);
  box-shadow: 0 20px 60px rgb(29 29 27 / 0.35);
  padding: var(--raum-8) var(--raum-6) var(--raum-6);
}

.popup__schliessen {
  position: absolute;
  top: var(--raum-3);
  right: var(--raum-3);
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: var(--soft);
  color: var(--ink);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.popup__schliessen:hover {
  background: var(--linie);
}

.popup__titel {
  margin: 0 var(--raum-8) var(--raum-4) 0;
  font-size: 1.5rem;
  color: var(--popup-akzent, var(--magenta));
}

.popup__inhalt {
  margin-bottom: var(--raum-6);
}

.popup__inhalt > :last-child {
  margin-bottom: 0;
}

.popup__inhalt li + li {
  margin-top: var(--raum-2);
}

.popup__nichtmehr {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--raum-2);
  font-size: 0.9rem;
  color: var(--gedaempft);
  cursor: pointer;
}

.popup__nichtmehr input {
  width: 1.1rem;
  height: 1.1rem;
}

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

@media print {
  .kopf__navigation,
  .werkzeugleiste,
  .sprungmarke,
  .zurueck,
  .partnerlogos,
  .popup {
    display: none;
  }

  body {
    background: #fff;
    font-size: 11pt;
  }

  .karte,
  .kartenseite__kopf {
    break-inside: avoid;
    background: #fff;
  }

  a[href^="/"]::after {
    content: " (wirksamwerden.at" attr(href) ")";
    font-size: 0.85em;
    color: #444;
  }
}