/* WoW Forever - Layout: Header, Navigation, Hero, Sections, Footer. */

/* ============ Header ============ */
.wf-header {
  background: var(--wf-bg-header);
  border-bottom: 1px solid var(--wf-border);
  position: sticky;
  top: 0;
  z-index: 100;
  transition: transform 0.2s ease;
}

/* nav.js schiebt die Kopfzeile beim Scrollen nach unten hinaus und beim
   Scrollen nach oben zurueck. Die zusaetzlichen 40px nehmen den Schatten
   (theme.css) mit, der sonst als dunkler Streifen oben stehen bliebe. */
.wf-header--versteckt { transform: translateY(calc(-100% - 40px)); }

/* Sprungmarken (Inhaltsverzeichnis, #wf-main): ohne JS steht die sticky
   Kopfzeile immer da, das Ziel braucht dann Platz darunter - sonst landet
   die angesprungene Ueberschrift unsichtbar hinter ihr. Mit JS faehrt sie
   nach dem Sprung hinaus, ein kleiner Luftabstand genuegt. */
html { scroll-padding-top: 9rem; }
html.wf-js-header { scroll-padding-top: var(--wf-sp-4); }

@media (prefers-reduced-motion: reduce) {
  .wf-header { transition: none; }
}

.wf-header__bar {
  display: flex;
  align-items: center;
  gap: var(--wf-sp-4);
  /* Nur senkrechten Abstand setzen - .wf-container liefert bereits den
     seitlichen Rand (padding-left/right), ein Kurzschreibweise-"padding"
     hier wuerde ihn auf 0 ueberschreiben (Logo klebt am Rand). */
  padding-top: var(--wf-sp-3);
  padding-bottom: var(--wf-sp-3);
  flex-wrap: wrap;
  /* Handy: Wortmarke und Menue-Knopf teilen sich die erste Zeile, die Suche
     bekommt die volle zweite. */
  row-gap: var(--wf-sp-2);
}

.wf-logo {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  margin-right: auto;
  justify-content: center;
  min-height: 44px;
}

.wf-logo__word {
  font-family: var(--wf-font-display);
  font-weight: 700;
  font-size: var(--wf-fs-500);
  color: var(--wf-heading);
  letter-spacing: 0.02em;
}

.wf-logo__word span {
  background: var(--wf-accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.wf-logo__sub {
  font-size: var(--wf-fs-100);
  color: var(--wf-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.wf-search {
  flex: 1 1 220px;
  max-width: 380px;
  position: relative;
}

.wf-search__input {
  width: 100%;
  background: var(--wf-control-bg);
  border: 1px solid var(--wf-control-border);
  color: var(--wf-text);
  padding: var(--wf-sp-2) var(--wf-sp-3);
  border-radius: 999px;
  /* 16px auf dem Handy: kleinere Schrift laesst iOS beim Antippen zoomen. */
  font-size: var(--wf-fs-300);
  font-family: var(--wf-font-body);
  min-height: 44px;
}

/* Platz rechts fuer die Lupe (44px breit, 4px vom Rand): das native
   Loeschkreuz des Suchfelds (type=search) sitzt dann links daneben statt
   darunter. Der Selektor ist absichtlich so lang: die gemeinsame
   Formularregel in base.css (input:not(...) x4) hat sonst Vorrang. */
form.wf-search input.wf-search__input[type="search"][id] { padding-right: 3rem; }

@media (min-width: 768px) { .wf-search__input { font-size: var(--wf-fs-200); } }

.wf-search__input::placeholder { color: var(--wf-text-dim); }
.wf-search__input:focus { outline: 3px solid var(--wf-focus-ring); outline-offset: 1px; }

/* Tastenkuerzel-Hinweis ("Strg K"): nur, wo eine echte Tastatur zu erwarten
   ist und genug Platz neben dem Eingabefeld bleibt. */
.wf-search__shortcut {
  display: none;
  position: absolute;
  right: 40px;
  top: 50%;
  transform: translateY(-50%);
  align-items: center;
  gap: 2px;
  pointer-events: none;
}

@media (min-width: 1024px) {
  .wf-search__shortcut { display: inline-flex; }
  form.wf-search input.wf-search__input[type="search"][id] { padding-right: 5.6rem; }
  /* Wer schon im Feld ist oder tippt, braucht den Kuerzel-Hinweis nicht -
     er lag sonst ueber dem Loeschen-Kreuz des Suchfelds. */
  .wf-search__input:focus ~ .wf-search__shortcut,
  .wf-search__input:not(:placeholder-shown) ~ .wf-search__shortcut { display: none; }
  form.wf-search input.wf-search__input[type="search"][id]:focus,
  form.wf-search input.wf-search__input[type="search"][id]:not(:placeholder-shown) { padding-right: 3rem; }
}

.wf-search__shortcut kbd {
  font-family: var(--wf-font-body);
  font-size: var(--wf-fs-100);
  line-height: 1.4;
  color: var(--wf-text-dim);
  background: var(--wf-bg-card);
  border: 1px solid var(--wf-border);
  border-radius: var(--wf-radius-sm);
  padding: 1px 5px;
}

.wf-search__btn {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 0;
  color: var(--wf-text-dim);
  cursor: pointer;
  padding: var(--wf-sp-2);
  font-size: var(--wf-fs-400);
  min-width: 44px;
  min-height: 44px;
}

.wf-search__results {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  background: var(--wf-bg-card);
  border: 1px solid var(--wf-border);
  border-radius: var(--wf-radius-md);
  box-shadow: var(--wf-shadow-pop);
  max-height: 60vh;
  overflow-y: auto;
  z-index: 200;
  display: none;
}

/* Die Liste darf breiter sein als das Feld: lange Titel brauchen Platz.
   Handy: ab Feldanfang bis zum rechten Seitenrand (das Feld sitzt links,
   der Menue-Knopf daneben); Desktop: rechtsbuendig, das Feld sitzt rechts. */
@media (max-width: 999px) {
  .wf-search__results { right: auto; width: min(32rem, calc(100vw - 2rem)); }
}
@media (min-width: 1000px) {
  .wf-search__results { left: auto; width: max(100%, min(30rem, calc(100vw - 2rem))); }
}

.wf-search__results.is-open { display: block; }

.wf-search__result {
  display: flex;
  align-items: center;
  gap: var(--wf-sp-2);
  padding: var(--wf-sp-2) var(--wf-sp-3);
  color: var(--wf-text);
}

.wf-search__result:hover,
.wf-search__result:focus-visible,
.wf-search__result[aria-selected="true"] {
  background: var(--wf-bg-table-row-alt);
  color: var(--wf-heading);
  text-decoration: none;
  /* Hintergrundwechsel allein (~1,05:1) war zu schwach als Umriss. Der
     goldene Balken links liegt gemessen bei ueber 8:1 gegen die Kartenfarbe
     der Liste (siehe Bericht) - deutlich ueber der geforderten 3:1-Grenze. */
  box-shadow: inset 3px 0 0 var(--wf-accent-gold);
}

.wf-search__result--empty { color: var(--wf-text-dim); font-style: italic; }

.wf-search__icon {
  width: 32px;
  height: 32px;
  border-radius: var(--wf-radius-sm);
  border: 1px solid var(--wf-border);
  flex-shrink: 0;
}

.wf-search__result-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
  gap: 2px;
}

.wf-search__result-name {
  font-weight: 600;
  font-size: var(--wf-fs-200);
  line-height: 1.3;
  /* Bis zu zwei Zeilen, erst danach Auslassungspunkte; sehr lange Woerter
     brechen um statt die Liste zu sprengen. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
}

/* Typ-Kennzeichen und (bei Items) Qualitaetsname stehen hier immer als
   Text - die Qualitaetsfarbe am Namen daneben ist nur eine Zugabe. */
.wf-search__result-meta {
  font-size: var(--wf-fs-100);
  color: var(--wf-text-dim);
}

/* Burger-Toggle (nur mobil sichtbar) */
.wf-nav__toggle {
  display: none;
  align-items: center;
  gap: var(--wf-sp-2);
  background: transparent;
  border: 1px solid var(--wf-gold-edge);
  color: var(--wf-heading);
  padding: var(--wf-sp-2) var(--wf-sp-3);
  border-radius: 999px;
  font-size: var(--wf-fs-200);
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
}

.wf-nav__toggle:hover,
.wf-nav__toggle[aria-expanded="true"] { border-color: var(--wf-gold); background: rgba(227, 195, 122, 0.1); }

.wf-nav__toggle-icon {
  display: inline-block;
  width: 18px;
  height: 2px;
  background: currentColor;
  position: relative;
}

.wf-nav__toggle-icon::before,
.wf-nav__toggle-icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: currentColor;
}

.wf-nav__toggle-icon::before { top: -6px; }
.wf-nav__toggle-icon::after { top: 6px; }

.wf-nav {
  background: var(--wf-bg-body);
  border-bottom: 1px solid var(--wf-border);
}

.wf-nav__list {
  list-style: none;
  display: flex;
  gap: var(--wf-sp-1);
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.wf-nav__link {
  display: block;
  /* Waagrechte Leiste ab 1000px (darunter Burger-Menue): acht Eintraege in
     Cinzel brauchen bis ~1280px den engeren Abstand, sonst bricht die Leiste
     in zwei Zeilen um. */
  padding: var(--wf-sp-3) var(--wf-sp-3);
  color: var(--wf-text);
  font-weight: 600;
  font-size: var(--wf-fs-200);
  border-bottom: 3px solid transparent;
  min-height: 44px;
}

/* Datenbank/Tools: Label und Aufklapp-Pfeil ruecken als optische Einheit
   zusammen, statt wie zwei getrennte Punkte zu wirken - der Pfeil bleibt ein
   eigener Button (Klick-/Tastaturziel), nur der Abstand davor schrumpft. */
.wf-nav__item--panel .wf-nav__link { padding-right: var(--wf-sp-2); }

.wf-nav__link:hover { color: var(--wf-heading); text-decoration: none; border-bottom-color: var(--wf-border); background-color: rgba(255, 255, 255, 0.04); }
.wf-nav__link--active { color: var(--wf-heading); border-bottom-color: var(--wf-accent); }

@media (min-width: 1280px) { .wf-nav__link { padding-left: var(--wf-sp-4); padding-right: var(--wf-sp-4); } }

/* Aufklapp-Panels (Datenbank, Tools): der Hauptlink bleibt normal, ein
   zusaetzlicher Button (von nav.js eingefuegt) klappt die Unterliste auf.
   Ohne JS (kein ".wf-nav--js" am <nav>) bleibt die Unterliste eine ganz
   normale, sichtbare Liste im Fluss - die Hauptlinks (Unterpunkte) sind
   dann weiterhin ohne jede Interaktion erreichbar. */
.wf-nav__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.wf-nav__item--panel { position: relative; }

.wf-nav__caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  background: transparent;
  border: 0;
  color: var(--wf-text-dim);
  cursor: pointer;
}

/* Ab Tablet-Breite gibt es keine Touch-Zielgroesse mehr vorzuhalten (Maus/
   Tastatur) - kleiner (aber weiterhin >= 24x24px), damit der Pfeil optisch
   nah am Label sitzt statt in einer 44px-Flaeche verloren zu wirken. Unter
   1000px (Burger-Menue, Touch) bleibt es bei 44px. */
@media (min-width: 1000px) {
  .wf-nav__caret { width: 28px; height: 28px; }
}

.wf-nav__caret:hover, .wf-nav__caret:focus-visible { color: var(--wf-heading); }

.wf-nav__caret-icon {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid currentColor;
  transition: transform 0.15s ease;
}

.wf-nav__caret[aria-expanded="true"] .wf-nav__caret-icon { transform: rotate(180deg); }

.wf-nav__panel {
  list-style: none;
  flex: 1 1 100%;
  margin: 0 0 var(--wf-sp-2) var(--wf-sp-4);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--wf-sp-1);
}

.wf-nav__panel[hidden] { display: none; }

.wf-nav__panel a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: var(--wf-sp-2) var(--wf-sp-3);
  color: var(--wf-text);
  font-size: var(--wf-fs-200);
  border-radius: var(--wf-radius-sm);
}

.wf-nav__panel a:hover, .wf-nav__panel a:focus-visible {
  background: var(--wf-bg-table-head);
  color: var(--wf-heading);
  text-decoration: none;
}

@media (min-width: 1000px) {
  /* Erst wenn nav.js lief (Klasse "wf-nav--js"), wird die Liste zum
     freischwebenden Flyout - sonst wuerde sie ohne Moeglichkeit zum
     Schliessen dauerhaft ueber der Seite stehen. */
  .wf-nav--js .wf-nav__panel:not([hidden]) {
    position: absolute;
    top: 100%;
    left: 0;
    margin: var(--wf-sp-1) 0 0;
    min-width: 220px;
    background: var(--wf-bg-card);
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-radius-md);
    box-shadow: var(--wf-shadow-pop);
    padding: var(--wf-sp-2);
    z-index: 250;
  }

  /* Ohne JS gibt es weder den Aufklapp-Button noch eine Moeglichkeit, die
     Unterliste wieder zu schliessen (siehe Kommentar bei .wf-nav__item
     oben) - ab Tablet-Breite wuerde sie dann als normale, immer offene
     Liste mitten in der waagrechten Hauptnavigation stehen und die Leiste
     auf ein Vielfaches ihrer Hoehe aufblasen. Der Hauptlink (/datenbank,
     /tools) fuehrt ohnehin auf eine Uebersichtsseite mit allen
     Unterpunkten, deshalb bleibt das Panel hier schlicht unsichtbar.
     Unter 1000px (Burger-Menue) bleibt es unveraendert sichtbar. */
  .wf-nav:not(.wf-nav--js) .wf-nav__panel { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .wf-nav__caret-icon { transition: none; }
}

/* Handy-Kopfzeile kompakt: zwei Zeilen (Wortmarke / Suche + Menue) wie
   bisher, aber mit knapperem Abstand - rund 20px weniger Hoehe. Die
   Touchziele bleiben bei 44px, nur die Luft dazwischen schrumpft. */
@media (max-width: 599px) {
  .wf-header__bar { padding-top: var(--wf-sp-1); padding-bottom: var(--wf-sp-2); row-gap: 0; }
  .wf-logo { min-height: 44px; flex-direction: row; align-items: center; justify-content: flex-start; gap: var(--wf-sp-2); }
  .wf-logo__word { font-size: var(--wf-fs-500); }
  /* Schmale Handys (320px): Suche und Menue-Knopf teilen sich die Zeile. */
  .wf-search { flex-basis: 150px; min-width: 0; }
}

@media (max-width: 999px) {
  .wf-nav__toggle { display: inline-flex; }
  .wf-nav { display: none; }
  .wf-nav.wf-nav--open { display: block; }
  .wf-nav__list { flex-direction: column; gap: 0; }
  .wf-nav__link { flex: 1 1 auto; border-bottom: 1px solid var(--wf-border); border-left: 3px solid transparent; }
  .wf-nav__link--active { border-left-color: var(--wf-accent); border-bottom-color: var(--wf-border); }
  .wf-nav__panel { margin-left: var(--wf-sp-3); }
}

/* ============ Hero: dezenter Sternenhimmel per CSS ============ */
.wf-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--wf-border);
  padding: var(--wf-sp-6) 0 var(--wf-sp-6);
  background-color: var(--wf-bg-body);
  background-image:
    radial-gradient(1px 1px at 8% 22%, rgba(255,255,255,.55) 0, transparent 60%),
    radial-gradient(1px 1px at 22% 68%, rgba(255,255,255,.4) 0, transparent 60%),
    radial-gradient(1.5px 1.5px at 38% 15%, rgba(255,255,255,.5) 0, transparent 60%),
    radial-gradient(1px 1px at 54% 45%, rgba(255,255,255,.35) 0, transparent 60%),
    radial-gradient(1px 1px at 68% 78%, rgba(255,255,255,.45) 0, transparent 60%),
    radial-gradient(1.5px 1.5px at 82% 30%, rgba(255,255,255,.4) 0, transparent 60%),
    radial-gradient(1px 1px at 92% 60%, rgba(255,255,255,.5) 0, transparent 60%),
    linear-gradient(180deg, #1a2a45 0%, var(--wf-bg-body) 75%);
}

.wf-hero__title { font-size: clamp(1.875rem, 1.1rem + 2.7vw, 3rem); margin-bottom: var(--wf-sp-2); }
.wf-hero__lead { color: var(--wf-text); max-width: 62ch; margin-bottom: var(--wf-sp-5); font-size: var(--wf-fs-400); }

@media (min-width: 768px) {
  .wf-hero { padding-top: var(--wf-sp-7); }
}

.wf-countdowns { display: grid; grid-template-columns: 1fr; gap: var(--wf-sp-4); }
@media (min-width: 640px) { .wf-countdowns { grid-template-columns: 1fr 1fr; } }

/* ============ Sections ============ */
/* Nur oben/unten: die Kurzschreibweise "padding: x 0" loeschte auf
   ".wf-container.wf-section" den seitlichen Rand des Containers, der Inhalt
   klebte dann bis 1312px Breite am Fensterrand. */
.wf-section { padding-top: var(--wf-section-gap); padding-bottom: var(--wf-section-gap); }
.wf-section--alt { background: var(--wf-bg-content); }

.wf-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--wf-sp-5);
  gap: 0 var(--wf-sp-3);
  flex-wrap: wrap;
}

.wf-section__head h2 { margin: 0; padding-top: var(--wf-sp-2); }

/* Mehrere Gruppen untereinander (Guides nach Kategorie): der naechste
   Abschnittskopf klebte sonst 14px unter der letzten Kartenreihe und las
   sich wie deren Fusszeile. */
.wf-guidegrid + .wf-section__head,
.wf-cardgrid + .wf-section__head { margin-top: var(--wf-sp-7); }
/* Als Knopf-grosse Flaeche (44px hoch), nicht nur als Textzeile. */
.wf-section__more {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--wf-fs-200);
  font-weight: 600;
  white-space: nowrap;
}

.wf-cardgrid { display: grid; grid-template-columns: 1fr; gap: var(--wf-sp-4); }
@media (min-width: 640px) { .wf-cardgrid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .wf-cardgrid { grid-template-columns: repeat(3, 1fr); } }

.wf-guidegrid { display: grid; grid-template-columns: 1fr; gap: var(--wf-sp-4); }
@media (min-width: 640px) { .wf-guidegrid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .wf-guidegrid { grid-template-columns: repeat(4, 1fr); } }

.wf-icongrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--wf-sp-3); }
@media (min-width: 640px) { .wf-icongrid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .wf-icongrid { grid-template-columns: repeat(6, 1fr); } }

/* Zweispaltiges Layout fuer Detailseiten (Guide-Inhalt + Info-Kasten).
   min-width: 0 auf den Spalten: der Grid-Standard min-width: auto liess
   eine breite Tabelle die ganze Spalte ueber den Bildschirmrand ziehen -
   Titel, Bild und Text liefen auf 375px mit hinaus. */
.wf-layout-2col { display: grid; grid-template-columns: 1fr; gap: var(--wf-sp-6); }
.wf-layout-2col > * { min-width: 0; }
@media (min-width: 960px) { .wf-layout-2col { grid-template-columns: 2fr 1fr; } }

/* ============ Footer ============ */
.wf-footer {
  background: var(--wf-bg-header);
  border-top: 1px solid var(--wf-border);
  padding: var(--wf-sp-6) 0 var(--wf-sp-5);
  margin-top: var(--wf-section-gap);
}

.wf-footer__intro { max-width: 62ch; margin-bottom: var(--wf-sp-5); }

/* Vollstaendige Seitenuebersicht in vier Spalten (Inhalte, Datenbank,
   Werkzeuge, Rechtliches/Feed) - auf 375px eine Spalte, sauber gestapelt. */
.wf-footer__grid { display: grid; grid-template-columns: 1fr; gap: var(--wf-sp-5); }
@media (min-width: 480px) { .wf-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .wf-footer__grid { grid-template-columns: repeat(4, 1fr); } }

.wf-footer__brand {
  font-family: var(--wf-font-display);
  font-weight: 700;
  color: var(--wf-heading);
  font-size: var(--wf-fs-500);
  margin-bottom: var(--wf-sp-2);
}

.wf-footer__note { font-size: var(--wf-fs-200); color: var(--wf-text-dim); max-width: 60ch; }

.wf-footer .wf-footer__heading {
  font-size: var(--wf-fs-200);
  color: var(--wf-heading);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--wf-sp-3);
}

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

/* Linkzeilen als 44px-Ziele (Handy); ab Maus-Breite etwas kompakter. */
.wf-footer ul a { display: flex; align-items: center; min-height: 44px; color: var(--wf-text); font-size: 0.9375rem; line-height: 1.3; }
.wf-footer ul a:hover { color: var(--wf-heading); }
/* Unter 480px zwei Spalten je Liste: 44px-Zeilen, aber keine endlose Seite. */
@media (max-width: 479px) { .wf-footer ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--wf-sp-3); } }
@media (min-width: 960px) { .wf-footer ul a { min-height: 32px; } }

.wf-footer__legal {
  margin-top: var(--wf-sp-5);
  padding-top: var(--wf-sp-4);
  border-top: 1px solid var(--wf-border);
  font-size: var(--wf-fs-100);
  color: var(--wf-text-dim);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--wf-sp-2);
}

.wf-breadcrumb { font-size: var(--wf-fs-100); color: var(--wf-text-dim); margin-bottom: var(--wf-sp-4); }
.wf-breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; margin: 0; padding: 0; gap: var(--wf-sp-1); }
.wf-breadcrumb li:not(:last-child)::after { content: "\203A"; margin-left: var(--wf-sp-1); color: var(--wf-text-dim); }
.wf-breadcrumb a { color: var(--wf-text-dim); position: relative; }
.wf-breadcrumb ol { gap: var(--wf-sp-1) var(--wf-sp-1); }
/* Unsichtbare Trefferflaeche: der Brotkrumen-Link ist nur 16px hoch, die
   Zeile soll aber nicht auf 44px wachsen. */
.wf-breadcrumb a::after { content: ""; position: absolute; inset: -14px -8px; }

/* Brotkrumen der Datenbank-Seiten (partials/database/breadcrumb.php) stehen
   vor dem Abschnitt: oben der Abstand, den sonst .wf-section liefert, und
   der Abschnitt danach rueckt heran - wie auf News- und Guide-Seiten. */
.wf-db-crumbs { padding-top: var(--wf-sp-6); }
.wf-db-crumbs .wf-breadcrumb { margin-bottom: 0; }
.wf-db-crumbs + .wf-section,
.wf-db-crumbs + .wf-container.wf-section { padding-top: var(--wf-sp-4); }


/* Schalter fuer das Einzeltasten-Kuerzel "/" (WCAG 2.1.4), von search.js in
   die Fusszeile gesetzt. Sieht wie ein Textlink aus, ist aber ein Knopf; der
   Zustand steht in aria-pressed und wird zusaetzlich als Haken gezeigt. */
.wf-footer__kuerzel {
  display: inline-flex;
  align-items: center;
  gap: var(--wf-sp-2);
  min-height: 44px;
  padding: 0 var(--wf-sp-2);
  background: none;
  border: 0;
  color: var(--wf-text-dim);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.wf-footer__kuerzel::before { content: "\2610"; content: "\2610" / ""; text-decoration: none; }
.wf-footer__kuerzel[aria-pressed="true"]::before { content: "\2611"; content: "\2611" / ""; }
.wf-footer__kuerzel:hover { color: var(--wf-heading); }