/* Baustein kopfband: Kopfband (Bedienkonzept, Pilot Maschinen, Bauplan
   1.3). Besitzer: WP2. Angelegt von WP0a. Die Grundvorlage bindet die
   Datei nach dem globalen Stylesheet ein. Nur Regeln fuer eigene, neue
   Klassen; Farben als Token mit Rueckfall; eine Regel fuer die
   Telefonbreite (560px).

   Makros in templates/_bausteine/kopfband.html: kopfband, aktion_knopf,
   weitere_menue, kopfband_feld, kopf_menue. Die Knoepfe selbst tragen die
   globalen Klassen knopf-schlicht, knopf-klein, knopf-gefahr und (Gold)
   knopf-neu mit ohne-plus: das Plus steht im Text der Aktion. Gesperrte
   Knoepfe erkennt die Regel am Merkmal aria-disabled, nicht an einer
   eigenen Klasse. Kein Ocker in den Bausteinen (Korrektur B, K-a; den
   Farbwert nennt tests/test_kopfband.py, nicht diese Datei). */

/* --- Kopfband: oberste Karte der Seite ------------------------------- */
.kopfband { padding: 18px 22px; }
.kopfband-zeile { display: flex; align-items: flex-start;
  justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; }
.kopfband-kopf { display: flex; align-items: center; gap: 8px 14px;
  flex-wrap: wrap; flex: 1 1 320px; min-width: 0; }
.kopfband-titel { display: inline-flex; align-items: center; gap: 10px;
  margin: 0; font-size: 26px; line-height: 1.25; font-weight: 700;
  color: var(--navy, #1F4570); overflow-wrap: anywhere; }
.kopfband-titel .symbol { width: 26px; height: 26px;
  color: var(--navy-mid, #305186); }
.kopfband-status { display: inline-flex; align-items: center; gap: 6px;
  flex-wrap: wrap; }
.kopfband-unterzeile { display: flex; align-items: center; flex-wrap: wrap;
  gap: 4px 14px; margin: 8px 0 0; font-size: 0.92rem;
  color: var(--muted, #5f7183); }
.kopfband-rueckverweis { display: inline-flex; align-items: center;
  gap: 8px; flex-wrap: wrap; }
.kopfband-rueckverweis a { color: var(--navy-mid, #305186);
  font-weight: 600; }

/* Rechts in fester Folge: Zahnrad, schlichte Knoepfe, Weitere, Gold. */
.kopfband-werkzeuge { display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; justify-content: flex-end; }
.kopfband-zahnrad { display: inline-flex; align-items: center;
  justify-content: center; width: 40px; height: 40px; border-radius: 8px;
  color: var(--navy, #1F4570); background: var(--surface, #ffffff);
  border: 1px solid var(--border, #e2e7ee); text-decoration: none; }
.kopfband-zahnrad:hover { background: var(--grau-hell, #f4f6f9);
  border-color: var(--navy-mid, #305186); }
.kopfband-zahnrad .symbol { width: 20px; height: 20px; }

/* Ein POST-Knopf steht in seinem eigenen kleinen Formular. */
.aktion-formular { display: inline-flex; margin: 0; }
.aktion-gold { white-space: nowrap; }

/* Gesperrt: steht da, ist aber kein Knopf (Sprung zum Anker). */
.knopf-schlicht[aria-disabled="true"], .knopf-klein[aria-disabled="true"],
.knopf-neu[aria-disabled="true"], .weitere-eintrag[aria-disabled="true"] {
  opacity: 0.7; cursor: default; }
.aktion-gesperrt-satz { font-weight: 400; font-size: 0.85em;
  color: var(--muted, #5f7183); }

/* Marken am Knopf: "neu" und "Vorab". */
.aktion-marke { display: inline-block; padding: 1px 7px; border-radius: 999px;
  font-size: 0.72rem; font-weight: 700; line-height: 1.5;
  letter-spacing: 0.2px; }
.aktion-marke-neu { background: #eaf2fb; color: var(--navy, #1F4570); }
.aktion-marke-vorab { background: var(--navy, #1F4570); color: #ffffff; }

/* --- Weitere: ein details-Menue, ohne Skript bedienbar --------------- */
.weitere { position: relative; display: inline-block; }
.weitere > summary { list-style: none; }
.weitere > summary::-webkit-details-marker { display: none; }
.weitere-knopf { user-select: none; }
.weitere-pfeil { display: inline-block; transition: transform .15s; }
.weitere[open] > summary .weitere-pfeil { transform: rotate(180deg); }
.weitere-liste { position: absolute; right: 0; top: calc(100% + 6px);
  z-index: 40; min-width: 240px; display: flex; flex-direction: column;
  gap: 2px; padding: 6px; background: var(--surface, #ffffff);
  border: 1px solid var(--border, #e2e7ee); border-radius: 10px;
  box-shadow: var(--shadow-2, 0 6px 20px rgba(20, 40, 70, 0.12)); }
.weitere-liste .aktion-formular { display: flex; width: 100%; }
.weitere-eintrag { display: flex; align-items: center; gap: 10px;
  width: 100%; min-height: 44px; padding: 10px 12px; border: none;
  border-radius: 8px; background: none; color: var(--text, #1c2733);
  font: inherit; font-size: 0.94rem; text-align: left;
  text-decoration: none; cursor: pointer; }
.weitere-eintrag:hover { background: var(--grau-hell, #f4f6f9); }
.weitere-eintrag .symbol { color: var(--navy-mid, #305186); }
.weitere-gefahr, .weitere-gefahr .symbol { color: var(--rot, #b3261e); }
.weitere-gefahr:hover { background: #fdecec; }

/* --- Feld unter dem Kopfband (R11) ------------------------------------ */
.kopfband-feld[hidden] { display: none; }

/* --- PDF und Tabelle als Menue in der Kopfzeile (R38) ----------------- */
.kopf-menue { position: relative; display: inline-block; }
.kopf-menue > summary { list-style: none; }
.kopf-menue > summary::-webkit-details-marker { display: none; }
.kopf-menue-liste { position: absolute; right: 0; top: calc(100% + 6px);
  z-index: 40; min-width: 240px; display: flex; flex-direction: column;
  gap: 2px; padding: 6px; background: var(--surface, #ffffff);
  border: 1px solid var(--border, #e2e7ee); border-radius: 10px;
  box-shadow: var(--shadow-2, 0 6px 20px rgba(20, 40, 70, 0.12)); }
.kopf-menue-eintrag { display: flex; align-items: center; min-height: 44px;
  padding: 10px 12px; border-radius: 8px; color: var(--text, #1c2733);
  text-decoration: none; font-size: 0.94rem; }
.kopf-menue-eintrag:hover { background: var(--grau-hell, #f4f6f9); }

/* --- Telefon: gestapelt, Gold ueber die volle Breite (R45) ----------- */
@media (max-width: 560px) {
  .kopfband { padding: 14px 14px; }
  .kopfband-titel { font-size: 22px; }
  .kopfband-zeile { flex-direction: column; align-items: stretch; }
  .kopfband-kopf { flex: 0 1 auto; }
  .kopfband-werkzeuge { flex-direction: column; align-items: stretch;
    justify-content: flex-start; }
  .kopfband-werkzeuge > a, .kopfband-werkzeuge > button,
  .kopfband-werkzeuge > span, .kopfband-werkzeuge > form,
  .kopfband-werkzeuge > .weitere,
  .kopfband-werkzeuge > form > button,
  .kopfband-werkzeuge > .weitere > summary {
    width: 100%; justify-content: center; }
  /* Der naechste Schritt steht oben, ueber die volle Breite. */
  .kopfband-werkzeuge > .aktion-gold,
  .kopfband-werkzeuge > form:has(> .aktion-gold) { order: -1; }
  .kopfband-werkzeuge > .kopfband-zahnrad { width: 40px;
    align-self: flex-end; }
  /* Menues klappen im Fluss auf statt ueber den Rand hinaus. */
  .weitere-liste, .kopf-menue-liste { position: static; min-width: 0;
    margin-top: 6px; box-shadow: none; }
}