:root {
  --clr-bg: #f6f7f9;
  --clr-surface: #ffffff;
  --clr-border: #dde3ea;
  --clr-text: #1a1a1a;
  --clr-text-muted: #5b6673;
  --clr-accent: #1b3a5c;
  --clr-accent-hover: #264d7a;
  --clr-accent-light: #e8eef5;
  --quote-yellow: rgba(255, 221, 0, 0.25);
  --radius: 12px;
  --shadow: 0 1px 3px rgba(27, 58, 92, 0.08);
  --shadow-hover: 0 6px 18px rgba(27, 58, 92, 0.12);
  --max-width: 1120px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--clr-text);
  background: var(--clr-bg);
}

/* ---------- Skip-Link & Fokus ---------- */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--clr-accent);
  color: #fff;
  padding: 0.6rem 1rem;
  border-radius: 0 0 var(--radius) 0;
  z-index: 100;
}
.skip-link:focus { left: 0; }

main[tabindex="-1"]:focus { outline: none; }

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--clr-accent-hover);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Überschrift-Ebene 4 ---------- */
h4 {
  font-size: 1.05rem;
  line-height: 1.35;
  color: var(--clr-text);
  margin: 1.5rem 0 0.5rem;
}

/* Nur für Screenreader sichtbar (z. B. Seitenüberschrift) */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Header ---------- */
.site-header {
  background: var(--clr-surface);
  border-bottom: 1px solid var(--clr-border);
}
.site-header__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  /* senkrecht 1,65 rem: die Kubus-Andeutung der Wortmarke ragt gut 15 px
     über die Textzeile hinaus und behält so ~11 px Luft zu den Rändern */
  padding: 1.65rem 1.5rem;
  display: flex;
  align-items: baseline;
  /* Waagerecht (Wortmarke neben Claim) genügen 0,9 rem. Senkrecht – also
     nur, wenn der Claim auf schmalen Bildschirmen unter die Wortmarke
     rutscht – braucht es mehr: Die Kubus-Andeutung ist absolut
     positioniert und beansprucht keinen Platz im Layout, ragt aber gut
     16 px unter den Zeilenkasten der Wortmarke. Ohne eigenen row-gap
     berührte ihre untere Kante den Claim. 1,4 rem lassen die Andeutung
     samt rund 13 px Luft über dem Claim stehen – vergleichbar mit dem
     Abstand nach oben zum Header-Rand. */
  column-gap: 0.9rem;
  row-gap: 1.4rem;
  flex-wrap: wrap;
}
/* Wortmarke mit Kubus-Andeutung.
   Der Schriftzug bleibt echter Text; die Kubus-Andeutung ist ein
   dekoratives Inline-SVG (aria-hidden), das absolut positioniert hinter
   dem Text liegt und keine Zeigereignisse annimmt. Damit ändert sich am
   Linknamen für Screenreader nichts.
   Maßstab: 100 SVG-Einheiten (= vordere Kantenlänge) entsprechen 1,68 em,
   eine Einheit also 0,0168 em. Alle Maße unten folgen daraus, sodass die
   Andeutung mit der Schriftgröße mitwächst.
   Senkrechter Bezugspunkt ist die Schriftgrundlinie, nicht die Oberkante
   der Textzeile: Wo die Zeilenoberkante liegt, hängt an Ascent und
   Half-Leading der Schrift, und die setzen Safari und Chromium
   unterschiedlich an – die Grundlinie liegt dagegen überall gleich zu den
   Buchstaben. */
.wordmark {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  line-height: 1;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--clr-accent);
  text-decoration: none;
  letter-spacing: 0.01em;
}
.wordmark:hover { color: var(--clr-accent-hover); }
/* positioniert, damit der Schriftzug über dem SVG liegt */
.wordmark__text { position: relative; }
/* Leeres Flex-Element ohne Ausdehnung: Da es keine eigene Grundlinie hat,
   richtet align-items: baseline seine Unterkante auf der Grundlinie des
   Schriftzugs aus. Seine Oberkante – und damit top: 0 des SVG – liegt
   folglich genau auf der Grundlinie. */
.wordmark__grundlinie {
  position: relative;
  width: 0;
  height: 0;
}
.wordmark__kubus {
  position: absolute;
  /* senkrecht ab der Grundlinie: die gesamte Andeutung (2,4864 em hoch)
     mittig zur Versalhöhe (rund 0,71 em) -> 0,355 + 1,2432 em nach oben */
  top: -1.598em;
  /* waagerecht: Mitte der vorderen Fläche (60 Einheiten = 1,008 em vom
     linken SVG-Rand) auf die Mitte des „d“ bei 0,95 em */
  left: -0.058em;
  width: 2.7048em; /* 161 Einheiten */
  height: 2.4864em; /* 148 Einheiten */
  overflow: visible;
  pointer-events: none;
}
.wordmark__kubus path {
  fill: none;
  stroke: currentColor;
  stroke-width: 3.5;
  stroke-linecap: round;
}
/* Farbabstufung allein über die Deckkraft, die Farbe stammt per
   currentColor aus dem Schriftzug (und wechselt mit ihm beim Hover):
   vordere Kreuze 80 %, hintere Kreuze und Kanten 60 %. */
.wordmark__kubus-vorn { opacity: 0.8; }
.wordmark__kubus-hinten,
.wordmark__kubus-kanten { opacity: 0.6; }
.site-header__tag {
  color: var(--clr-text-muted);
  font-size: 0.95rem;
}
/* Die 1,65 rem Innenabstand des Kopfbereichs sind nach unten auf den
   Überhang der Kubus-Andeutung gerechnet (rund 15 px unter dem
   Zeilenkasten der Wortmarke). Rutscht der Claim darunter, ist nicht mehr
   die Andeutung das unterste Element, sondern Text – der volle Abstand
   plus der Durchschuss des Claims wirkt dann deutlich zu luftig
   (gemessen 31 px unter der letzten Zeile gegenüber 12 px über der
   Andeutung). Der negative Außenabstand nimmt genau diesen Überschuss
   zurück: rund 15 px bleiben stehen.
   Der Umbruch tritt (je nach Systemschrift) unterhalb von etwa 550 px
   ein; die Schwelle liegt bewusst darüber, damit die Korrektur auf
   keinem Gerät ausbleibt. Greift sie doch einmal im einzeiligen
   Zustand, schadet das nichts: Dort bestimmt die Wortmarke die
   Zeilenunterkante, der Kopf wird lediglich 4 px flacher und die
   Andeutung behält ihre rund 12 px Luft zum Rand. */
@media (max-width: 600px) {
  .site-header__tag {
    margin-bottom: -1rem;
  }
}

/* ---------- Intro ---------- */
.intro {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 3rem 1.5rem 1rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem 2.5rem;
  flex-wrap: wrap;
}
.intro h1 {
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  line-height: 1.25;
  margin: 0 0 0.6rem;
  color: var(--clr-accent);
}
.intro p {
  max-width: 46rem;
  margin: 0;
  color: var(--clr-text-muted);
  font-size: 1.125rem;
}

/* ---------- Schlagwortsuche ---------- */
/* Suchfeld rechts oben neben der Überschrift; der optische Abstand
   zum rechten Bildschirmrand entsteht durch das Intro-Padding
   (1.5rem) innerhalb der zentrierten max-width-Spalte. */
.suche {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  /* optisch auf die erste Zeile der h1 ausgerichtet */
  margin-top: 0.45rem;
}
.suche__input {
  width: min(320px, 100%);
  min-height: 56px;
  padding: 0.55rem 2.9rem 0.55rem 2.75rem;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 0.95rem;
  background: var(--clr-surface);
  color: var(--clr-text);
  box-shadow: var(--shadow);
  transition: border-color 0.2s ease;
  -webkit-appearance: none;
          appearance: none;
}
.suche__input::-webkit-search-decoration,
.suche__input::-webkit-search-cancel-button,
.suche__input::-webkit-search-results-button,
.suche__input::-webkit-search-results-decoration {
  -webkit-appearance: none;
}
.suche__input:focus {
  outline: none;
  border-color: var(--clr-accent);
}
.suche__input:focus-visible {
  outline: 3px solid var(--clr-accent-hover);
  outline-offset: 2px;
}
.suche__icon {
  position: absolute;
  left: 0.95rem;
  top: 50%;
  transform: translateY(-50%);
  width: 21px;
  height: 21px;
  color: var(--clr-text-muted);
  pointer-events: none;
}
.suche__clear {
  position: absolute;
  right: 0.4rem;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 6px;
  border: 1px solid var(--clr-border);
  background: var(--clr-surface);
  color: var(--clr-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  line-height: 1.2;
  padding: 0;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  touch-action: manipulation;
}
.suche__clear:hover,
.suche__clear:focus-visible {
  background: var(--clr-accent);
  color: #fff;
  border-color: var(--clr-accent);
}
.suche__clear.is-hidden { display: none; }

/* Sichtbare Trefferanzeige (zugleich Live-Region für Screen-Reader) */
.suche-status {
  margin: 0.5rem 0 0;
  font-size: 0.95rem;
  color: var(--clr-text-muted);
}
.suche-status:empty { display: none; }

/* Kleine Bildschirme: Suchfeld rückt unter die Überschrift */
@media (max-width: 720px) {
  .suche {
    flex: 1 1 100%;
    margin-top: 0.25rem;
  }
  .suche__input { width: 100%; }
}

/* ---------- Content-Grid ---------- */
.grid-bereich {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1rem 1.5rem 4rem;
}
.kategorie { margin-top: 2.5rem; }
.kategorie h2 {
  font-size: 1.35rem;
  margin: 0 0 0.25rem;
}
.kategorie__beschreibung {
  margin: 0 0 1.25rem;
  color: var(--clr-text-muted);
}
.kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(21.0rem, 1fr));
  gap: 1.25rem;
}
/* Sehr schmale Geräte (unter 360 px): Die Mindestbreite von 21 rem (336 px)
   plus das Padding des Grid-Bereichs (2 × 1,5 rem) passt hier nicht mehr in
   den Viewport – die Seite ließe sich waagerecht scrollen. Deshalb unterhalb
   dieser Schwelle genau eine Spalte, die sich der verfügbaren Breite anpasst.
   minmax(0, …) statt 1fr, damit auch ein langes Wort in einer Kachel die
   Spalte nicht über den Bildschirmrand hinaus aufziehen kann.
   Ab 360 px bleibt das Raster unverändert. */
@media (max-width: 359.98px) {
  .kacheln {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* Von der Schlagwortsuche ausgeblendete Kacheln/Kategorien: das
   hidden-Attribut muss sich gegen display:flex durchsetzen. */
.kachel[hidden],
.kategorie[hidden] { display: none; }

.kachel {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.4rem 1.4rem 1.2rem;
  transition: box-shadow 0.2s ease, transform 0.2s ease,
    border-color 0.2s ease;
}
/* „Stretched-Link": der Kacheltitel-Link überlagert per ::after die
   gesamte Kachel, damit die Kachel wie zuvor komplett klickbar ist,
   ohne ein interaktives Element (QR-Button) in einen Link zu verschachteln. */
.kachel__link {
  text-decoration: none;
  color: inherit;
}
.kachel__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.kachel:has(.kachel__link:hover),
.kachel:has(.kachel__link:focus-visible) {
  box-shadow: var(--shadow-hover);
  border-color: var(--clr-accent);
  transform: translateY(-2px);
}
.kachel__symbol { display: none; }
.kachel h3 {
  margin: 0 0 0.45rem;
  font-size: 1.15rem;
  line-height: 1.35;
  color: var(--clr-accent);
}
.kachel p {
  margin: 0 0 1rem;
  font-size: 0.97rem;
  color: var(--clr-text-muted);
  flex-grow: 1;
}
.kachel__fuss {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  border-top: 1px solid var(--clr-border);
  padding-top: 0.8rem;
}
.kachel__meta {
  font-size: 0.85rem;
  color: var(--clr-text-muted);
}
.kachel__lizenz {
  display: block;
  margin: 0 0 0.8rem;
  font-size: 0.85rem;
  color: var(--clr-text-muted);
}
.kachel__aktionen {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.kachel__pfeil {
  color: var(--clr-accent);
  font-size: 1.2rem;
  line-height: 1;
  transition: transform 0.2s ease;
}
.kachel:has(.kachel__link:hover) .kachel__pfeil,
.kachel:has(.kachel__link:focus-visible) .kachel__pfeil {
  transform: translateX(4px);
}

/* Quadratischer QR-Button (44×44 px Touch-Ziel), links neben dem
   Pfeil. Höherer z-index als der Stretched-Link, damit er
   eigenständig klickbar bleibt statt die Kartennavigation
   auszulösen. */
.kachel__qr-btn {
  position: relative;
  z-index: 2;
  width: 44px;
  height: 44px;
  min-width: 44px;
  flex-shrink: 0;
  border-radius: 6px;
  border: 1px solid var(--clr-border);
  background: var(--clr-surface);
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.kachel__qr-btn:hover,
.kachel__qr-btn:focus-visible {
  border-color: var(--clr-accent);
  box-shadow: var(--shadow);
}
.kachel__qr-thumb {
  width: 32px;
  height: 32px;
  object-fit: contain;
  pointer-events: none;
}

.qr-dialog {
  position: fixed;
  inset: 0;
  margin: auto;
  width: fit-content;
  height: fit-content;
  max-height: 92vh;
  overflow: auto;
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--shadow-hover);
  padding: 4rem 4rem 1.75rem;
  max-width: min(92vw, calc(512px + 8rem));
  background: var(--clr-surface);
  color: var(--clr-text);
}
.qr-dialog::backdrop {
  background: rgba(20, 28, 42, 0.6);
}
.qr-dialog__close {
  position: absolute;
  top: 1.0rem;
  right: 1.0rem;
  width: 44px;
  height: 44px;
  border-radius: 6px;
  border: 1px solid var(--clr-border);
  background: var(--clr-surface);
  color: var(--clr-accent);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.qr-dialog__close:hover,
.qr-dialog__close:focus-visible {
  background: var(--clr-accent-light);
  border-color: var(--clr-accent);
}
.qr-dialog__image-wrapper {
  display: flex;
  justify-content: center;
}
.qr-dialog__image {
  display: block;
  width: clamp(256px, 80vw, 512px);
  max-width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--clr-border);
  border-radius: 8px;
  background: #fff;
}
.qr-dialog__caption {
  margin: 1rem 0 0;
  text-align: center;
  font-size: 0.95rem;
  color: var(--clr-text-muted);
}
.qr-dialog__aktionen {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
  margin-top: 1.25rem;
}
.qr-dialog__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.65rem 1.2rem;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: inherit;
  border-radius: 8px;
  border: 1px solid var(--clr-border);
  background: var(--clr-accent-light);
  color: var(--clr-accent);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.qr-dialog__btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.qr-dialog__btn:hover:not(:disabled),
.qr-dialog__btn:focus-visible:not(:disabled) {
  background: var(--clr-accent);
  color: #fff;
  border-color: var(--clr-accent);
}
.qr-dialog__btn:disabled {
  background: var(--clr-bg);
  color: var(--clr-text-muted);
  border-color: var(--clr-border);
  cursor: not-allowed;
  opacity: 0.55;
}

/* ---------- Toast (Statusmeldungen, z. B. Speicherfehler) ---------- */
.toast {
  position: fixed;
  top: 1rem;
  right: 1rem;
  transform: translateY(-12px);
  background: var(--clr-accent);
  color: #fff;
  padding: 10px 22px;
  border-radius: 8px;
  font-size: 14px;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
  z-index: 200;
}
.toast.show {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Unterseiten ---------- */
.seite {
  max-width: 46rem;
  margin: 0 auto;
  padding: 3rem 1.5rem 4rem;
}
.seite h1 {
  font-size: clamp(1.6rem, 4vw, 2.1rem);
  color: var(--clr-accent);
  margin: 0 0 1.2rem;
}
.seite h2 {
  font-size: 1.25rem;
  margin: 2rem 0 0.5rem;
}
.seite h3 {
  font-size: 1.1rem;
  margin: 1.5rem 0 0.5rem;
}
.seite p {
  margin: 0 0 1rem;
  font-size: 1.0625rem;
  color: var(--clr-text-muted);
}
.seite li {
  font-size: 1.0625rem;
  color: var(--clr-text-muted);
}
.hervorhebung {
  font-weight: bold;
  color: var(--clr-accent);
}
.seite a { color: var(--clr-accent); }
.seite a:hover { color: var(--clr-accent-hover); }
.hinweis-box {
  background: var(--clr-accent-light);
  border-left: 4px solid var(--clr-accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 0.9rem 1.1rem;
  margin: 1.5rem 0;
  font-size: 0.95rem;
}
.zitat {
  background-color: var(--quote-yellow);
  border-left: 4px solid rgba(255, 200, 0, 0.6);
  padding: 0.75em 1em;
  margin: 1em 0;
  border-radius: 0 4px 4px 0;
  font-style: italic;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--clr-surface);
  border-top: 1px solid var(--clr-border);
  margin-top: auto;
}
.site-footer__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1.6rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.site-footer nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.site-footer a {
  color: var(--clr-text-muted);
  text-decoration: none;
  font-size: 0.85rem;
  padding: 0.7rem 0;
  display: inline-block;
}
.site-footer a:hover,
.site-footer a:focus-visible { color: var(--clr-accent); }

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex-grow: 1; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .kachel, .kachel__pfeil,
  .kachel__qr-btn, .qr-dialog__btn, .qr-dialog__close, .toast,
  .suche__input, .suche__clear {
    transition: none;
  }
}