/* ux.css - Orientierung und Bedienung (Besitzer: Funktionalitaets-Agent). Wird nach theme.css geladen.
   Nur Komponenten, die base/layout/components/theme nicht kennen; Farben, Abstaende und Radien
   kommen ausschliesslich aus den Tokens in base.css. Keine Inline-Styles im Markup (CSP). */

/* ============ Allgemein ============ */

/* [hidden] muss immer ausblenden: Klassen mit eigenem display (z. B. .wf-btn mit
   inline-flex) schlagen sonst die Browser-Voreinstellung - der JS-only-Knopf
   "Kopieren" stand deshalb auch ohne JavaScript sichtbar (und wirkungslos) da,
   der "Uebernehmen"-Knopf trotz JavaScript. */
[hidden] { display: none !important; }

/* Inhalte, die auf dem Handy entfallen, um die Startseite kurz zu halten
   (auf breiten Schirmen erscheinen sie; der "Alle ansehen"-Link bleibt). */
@media (max-width: 767.98px) {
  .wf-nur-breit { display: none !important; }
}

/* ============ Hauptnavigation ============ */

/* "Neu hier?" ist der Einstieg fuer Neulinge: in Gold, ohne die Leiste zu verdoppeln. */
.wf-nav__link--hervor { color: var(--wf-accent-gold); }
.wf-nav__link--hervor:hover,
.wf-nav__link--hervor:focus-visible,
.wf-nav__link--hervor.wf-nav__link--active { color: var(--wf-gold-bright); }

/* ============ Startseite ============ */

.wf-hero__release {
  margin: 0 0 var(--wf-sp-5);
  max-width: 44rem;
  font-size: var(--wf-fs-400);
  color: var(--wf-heading);
}
.wf-hero__release strong { color: var(--wf-gold-bright); }

.wf-start { padding-top: var(--wf-sp-6); padding-bottom: var(--wf-sp-5); }
.wf-start h2 { margin-bottom: var(--wf-sp-4); }

.wf-start__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--wf-sp-3);
}
/* Handy: zwei Spalten, Symbol ueber dem Text - die Texte sind kurz genug
   (<= 4 Zeilen bei 375px). Unter 340px bleibt es bei einer Spalte. */
@media (min-width: 340px) and (max-width: 559px) {
  .wf-start__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wf-sp-2); }
  .wf-start__card { flex-direction: column; gap: var(--wf-sp-2); padding: var(--wf-sp-3); }
  .wf-start__title { font-size: var(--wf-fs-300); hyphens: auto; overflow-wrap: break-word; }
  .wf-start__text { font-size: var(--wf-fs-100); hyphens: auto; overflow-wrap: break-word; }
}
@media (min-width: 560px) { .wf-start__list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .wf-start__list { grid-template-columns: repeat(3, 1fr); } }

.wf-start__card {
  display: flex;
  align-items: flex-start;
  gap: var(--wf-sp-3);
  height: 100%;
  min-height: 44px;
  padding: var(--wf-sp-3) var(--wf-sp-4);
  border: 1px solid var(--wf-border);
  border-radius: var(--wf-radius-md);
  background: var(--wf-bg-card);
  color: var(--wf-text);
}
.wf-start__card:hover,
.wf-start__card:focus-visible {
  border-color: var(--wf-gold);
  color: var(--wf-heading);
  text-decoration: none;
  box-shadow: 0 0 14px var(--wf-gold-glow);
}
.wf-start__icon { width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--wf-radius-sm); }
.wf-start__body { display: block; min-width: 0; }
.wf-start__title { display: block; font-size: var(--wf-fs-400); font-weight: 700; color: var(--wf-gold-bright); }
.wf-start__text { display: block; margin-top: var(--wf-sp-1); font-size: var(--wf-fs-200); color: var(--wf-text-dim); }

/* ============ Werkzeug-Seiten: "Wofuer ist das? So geht's" ============ */

.wf-toolintro {
  max-width: 48rem;
  margin: var(--wf-sp-4) 0 var(--wf-sp-5);
  padding: var(--wf-sp-4);
  border: 1px solid var(--wf-border);
  border-left: 4px solid var(--wf-accent-gold);
  border-radius: var(--wf-radius-md);
  background: var(--wf-bg-card);
}
.wf-toolintro__purpose { margin: 0 0 var(--wf-sp-3); }
.wf-toolintro__title { margin: 0 0 var(--wf-sp-2); font-size: var(--wf-fs-300); }
.wf-toolintro ol { margin: 0; padding-left: var(--wf-sp-5); }
.wf-toolintro li { margin-bottom: var(--wf-sp-1); }
.wf-toolintro__more { margin: var(--wf-sp-3) 0 0; font-size: var(--wf-fs-200); color: var(--wf-text-dim); }

.wf-toolgroup { margin-top: var(--wf-sp-6); }
.wf-toolgroup:first-of-type { margin-top: var(--wf-sp-5); }
.wf-toolgroup__lead { margin: 0 0 var(--wf-sp-3); color: var(--wf-text-dim); }
.wf-toollegend__title { font-size: var(--wf-fs-300); margin: 0 0 var(--wf-sp-2); }
.wf-toollegend { margin-top: var(--wf-sp-6); padding-top: var(--wf-sp-4); border-top: 1px solid var(--wf-border); font-size: var(--wf-fs-200); color: var(--wf-text-dim); }
.wf-toollegend dl { margin: 0; }
.wf-toollegend dt { margin-top: var(--wf-sp-2); font-weight: 700; color: var(--wf-text); }
.wf-toollegend dd { margin: 0; }

/* ============ Glossar-Links und Einstiegsseite ============ */

a.wf-gloss { text-decoration: underline dotted; text-underline-offset: 3px; }

.wf-steps {
  list-style: none;
  counter-reset: schritt;
  margin: var(--wf-sp-5) 0;
  padding: 0;
  display: grid;
  gap: var(--wf-sp-4);
  max-width: 48rem;
}
.wf-steps > li {
  counter-increment: schritt;
  position: relative;
  padding: var(--wf-sp-4) var(--wf-sp-4) var(--wf-sp-4) 4rem;
  border: 1px solid var(--wf-border);
  border-radius: var(--wf-radius-md);
  background: var(--wf-bg-card);
}
.wf-steps > li::before {
  content: counter(schritt);
  position: absolute;
  left: var(--wf-sp-4);
  top: var(--wf-sp-4);
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--wf-accent-gradient);
  color: var(--wf-accent-text);
  font-weight: 700;
}
.wf-steps h2 { margin: 0 0 var(--wf-sp-2); font-size: var(--wf-fs-500); }
.wf-steps p { margin: 0 0 var(--wf-sp-2); }
.wf-steps__links { list-style: none; display: flex; flex-wrap: wrap; gap: var(--wf-sp-2) var(--wf-sp-4); margin: var(--wf-sp-2) 0 0; padding: 0; }

/* ============ Rueckfrage ("Wirklich zuruecksetzen?") ============ */

.wf-confirm {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wf-sp-2) var(--wf-sp-3);
  padding: var(--wf-sp-2) var(--wf-sp-3);
  border: 1px solid var(--wf-gold-line);
  border-radius: var(--wf-radius-md);
  background: var(--wf-bg-card);
}
.wf-confirm__text { font-weight: 600; color: var(--wf-heading); }

/* ============ Nach oben ============ */

.wf-totop {
  position: fixed;
  right: var(--wf-sp-4);
  bottom: var(--wf-sp-4);
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--wf-gold-line);
  border-radius: 999px;
  background: var(--wf-bg-card);
  color: var(--wf-gold-bright);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}
.wf-totop:hover,
.wf-totop:focus-visible { border-color: var(--wf-gold); color: var(--wf-heading); text-decoration: none; }

/* ============ Footer als Seitenuebersicht ============ */

.wf-footer__meta ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wf-sp-1) var(--wf-sp-5);
  list-style: none;
  margin: var(--wf-sp-5) 0 0;
  padding: var(--wf-sp-3) 0 0;
  border-top: 1px solid var(--wf-border);
}
.wf-footer__meta a { display: inline-block; padding: var(--wf-sp-2) 0; }

/* ============ Suche ============ */

.wf-search__result--alle { font-weight: 600; }
.wf-suchhilfe { max-width: 40rem; margin: var(--wf-sp-5) 0; }
.wf-suchhilfe h2 { font-size: var(--wf-fs-400); margin-bottom: var(--wf-sp-2); }
.wf-suchzahl { margin: var(--wf-sp-4) 0; color: var(--wf-text-dim); }
.wf-suchsprung { display: flex; flex-wrap: wrap; gap: var(--wf-sp-2); list-style: none; margin: 0 0 var(--wf-sp-5); padding: 0; }

/* ============ Fehler-/Wartungsseiten ============ */

.wf-notfall { max-width: 44rem; }
.wf-notfall__aktionen { display: flex; flex-wrap: wrap; gap: var(--wf-sp-3); margin: var(--wf-sp-4) 0; }

/* ============ Inhaltsverzeichnis auf langen Textseiten (Glossar, Ueber) ============ */

.wf-toc--kompakt { max-width: 48rem; margin: var(--wf-sp-4) 0 var(--wf-sp-5); }
@media (min-width: 640px) {
  .wf-toc--kompakt ol { columns: 2; column-gap: var(--wf-sp-5); }
  .wf-toc--kompakt li { break-inside: avoid; }
}

.wf-notfall .wf-search { margin-top: var(--wf-sp-5); }