/* app.css — Marken-Tokens über Pico-Variablen (FE-04). Rot bleibt Gefahr-reserviert. */
:root {
  --pico-primary: #2c5aa0;            /* Primärfarbe: Links, Fokus, Standard-Buttons */
  --kopfzeile-bg: #1c2b45;            /* Kopfzeilenfarbe (dunkel) */
  --akzent: #d98012;                  /* Akzentfarbe (warm): genau EINE Aktion pro Seite */
}
header.kopfzeile {
  background: var(--kopfzeile-bg);
  color: #fff;
  padding: .5rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
header.kopfzeile a { color: #fff; }
.version { font-size: .8rem; opacity: .7; }
button.akzent { --pico-background-color: var(--akzent); --pico-border-color: var(--akzent); }
main.inhalt { padding: 1rem; max-width: 60rem; margin: 0 auto; }
.degradiert { color: var(--akzent); font-weight: bold; }
/* Kopfzeile rechts: Nutzer + Abmelden + Version (Best Practice: Logout oben rechts) */
.kopf-rechts { display: flex; align-items: center; gap: 1rem; }
.kopf-rechts form { margin-bottom: 0; }
.kopf-nutzer { font-size: .85rem; opacity: .85; }
.abmelden {
  width: auto;
  padding: .2rem .7rem;
  font-size: .8rem;
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .5);
}
.abmelden:hover, .abmelden:focus { background: rgba(255, 255, 255, .15); color: #fff; }
/* Hinweistext unter dem Antwort-Schalter etwas ruhiger */
#modus-hilfe { display: block; margin: -.25rem 0 1rem; color: var(--pico-muted-color); }
/* KI-Disclaimer (Antwort + Trefferliste): dezent, aber lesbar */
.ki-hinweis {
  display: block;
  margin-top: .5rem;
  font-size: .8rem;
  font-style: italic;
  color: var(--pico-muted-color);
}
/* Datenschutz-Hinweis auf der Suchseite: klein, sachlich, gedämpft */
.datenschutz-hinweis {
  font-size: .85rem;
  color: var(--pico-muted-color);
  margin: -.25rem 0 1.25rem;
}
/* Beim Anspringen eines Treffers über [N] kurz hervorheben */
ol li[id^="treffer-"]:target { background: rgba(217, 128, 18, .15); }
/* Sekundärer, eingeklappter Block „Weitere möglicherweise relevante Seiten".
   Trigger als klar klickbare Fläche mit führendem, rotierendem Chevron (Best Practice:
   Chevron links, Box/Hover-Affordanz, Anzahl als Kontext). */
.weitere { margin-top: 1.5rem; }
.weitere > summary {
  list-style: none;                 /* Firefox-Standarddreieck entfernen */
  display: flex;
  align-items: center;
  gap: .6rem;
  cursor: pointer;
  padding: .65rem .9rem;
  font-weight: bold;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: 6px;
  background: var(--pico-card-sectioning-background-color, #f5f6f8);
  transition: border-color .15s ease, background .15s ease;
}
.weitere > summary::-webkit-details-marker { display: none; }   /* Chrome/Safari-Dreieck weg */
.weitere > summary::after { display: none !important; }          /* Picos eigenen Chevron rechts entfernen */
.weitere > summary:hover,
.weitere > summary:focus-visible { border-color: var(--pico-primary); background: var(--pico-card-background-color); }
.weitere-chevron {
  flex: 0 0 auto;
  width: .5rem; height: .5rem;
  margin-left: .15rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);        /* zeigt nach rechts = zugeklappt */
  transition: transform .15s ease;
}
.weitere[open] > summary .weitere-chevron { transform: rotate(45deg); }  /* nach unten = offen */
.weitere-anzahl { font-weight: normal; color: var(--pico-muted-color); }
.weitere h3 { font-size: .95rem; margin: 1rem 0 .25rem; }
.weitere-hinweis { font-size: .8rem; color: var(--pico-muted-color); margin: 0 0 .5rem; }
/* Fehler-Panel (BE-10): farbcodiert nach Zuständigkeit, Badge sagt klar, wer hilft */
.fehler-box {
  border: 1px solid var(--pico-muted-border-color);
  border-left-width: 4px;
  border-radius: 6px;
  padding: 1rem 1.25rem;
  margin: 1rem 0;
}
.fehler-box h2 { margin: .4rem 0 .5rem; }
.fehler-box p { margin: .25rem 0; }
.fehler-badge {
  display: inline-block;
  font-size: .75rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: .15rem .55rem;
  border-radius: 999px;
  color: #fff;
}
.fehler-hinweis { font-weight: bold; }
.fehler-aktionen { margin-top: .9rem; display: flex; gap: 1rem; align-items: center; }
.fehler-aktionen a[role="button"] { --pico-background-color: var(--akzent);
  --pico-border-color: var(--akzent); width: auto; }
/* Nutzer = selbst behebbar (ruhiges Blau), Technik/KI = Hinweis (warmes Orange) */
.fehler-nutzer { border-left-color: var(--pico-primary); }
.fehler-nutzer .fehler-badge { background: var(--pico-primary); }
.fehler-technik, .fehler-ki { border-left-color: var(--akzent); }
.fehler-technik .fehler-badge, .fehler-ki .fehler-badge { background: var(--akzent); }