/* Kopfband dezenter (Claude, 30.09.2026). Alex: „oben bitte die ganzen Badges und so was … ein bisschen kleiner machen,
   bisschen dezenter“. Lädt nach styles.css, tauchgang.css und orden.css und ändert nur Größe, Rahmen, Schatten und
   Deckkraft der Anzeigen (Sammelbuch, gesammelt, Perlen, Aufträge, Spielart, Ruhe, Tiefe, Luft). Aufbau und
   Handy-Zeilen bleiben, die Aufgabe in der Mitte (Schild) bleibt groß. Alle Regeln mit .kopfband davor, damit sie die
   Handy-Regeln aus tauchgang.css (ebenfalls .kopfband …) schlagen. */

.kopfband .anzeige,
.kopfband .modus-schalter {
  border: 1.5px solid rgba(28, 34, 48, .2);
  background: rgba(255, 255, 255, .68);
  box-shadow: 0 2px 10px -6px rgba(6, 28, 48, .45);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.kopfband .anzeige { gap: 6px; padding: 3px 9px; border-radius: 12px; }
.kopfband .kopf-links,
.kopfband .kopf-rechts,
.kopfband .kopf-sammeln { gap: 4px; }

/* Sammelbuch und „gesammelt“ */
.kopfband .buch-knopf { gap: 5px; padding: 3px 10px 3px 6px; }
.kopfband .buch-knopf:hover { background: rgba(230, 248, 251, .95); }
.kopfband .buch-knopf svg { width: 21px; height: 21px; }
.kopfband .buch-name,
.kopfband .buch-zahl { padding-top: 2px; font-size: clamp(13px, 1.1vw, 15px); }
.kopfband .anzeige-fang b { padding-top: 2px; font-size: clamp(15px, 1.35vw, 18px); }
.kopfband .anzeige-fang span { font-size: 11px; }

/* Perlenbeutel und Tagesaufträge */
.kopfband .beutel,
.kopfband .auftrag-knopf {
  min-height: 24px;
  margin-left: 2px;
  padding: 1px 6px 0 3px;
  border: 1.5px solid rgba(28, 34, 48, .25);
  border-radius: 9px;
  background: rgba(255, 255, 255, .85);
}
.kopfband .beutel > svg,
.kopfband .auftrag-knopf svg { width: 15px; height: 15px; }
.kopfband .beutel b,
.kopfband .auftrag-knopf b { font-size: 13px; }
.kopfband .auftrag-knopf.is-fertig { border-color: var(--ok); }

/* Spielart */
.kopfband .modus-schalter { padding: 2px; }
.kopfband .modus-schalter button { min-height: 24px; padding: 0 10px; font-size: 12px; }

/* Ruhe */
.kopfband .anzeige-ruhe { gap: 2px; padding-top: 3px; }
.kopfband .ruhe-titel { font-size: 9.5px; }
.kopfband .ruhe-blasen { gap: 2px; padding-top: 6px; }
.kopfband .ruhe-blasen i { width: clamp(9px, .85vw, 12px); height: clamp(9px, .85vw, 12px); border-width: 1.5px; }
.kopfband .ruhe-blasen .marke { top: -9px; width: 8px; height: 8px; }

/* Tiefe mit Tauchabzeichen */
.kopfband .anzeige-tiefe { gap: 6px; padding: 3px 8px 3px 6px; }
.kopfband .tiefe-skala { width: 7px; height: 26px; border-width: 1.5px; }
.kopfband .tiefe-skala i { right: -4px; left: -4px; height: 4px; margin-top: -2px; border-width: 1px; }
.kopfband .tiefe-werte b { padding-top: 2px; font-size: clamp(14px, 1.25vw, 17px); }
.kopfband .tiefe-werte span { font-size: 10px; }
.kopfband .orden { width: 17px; height: 21px; }
.kopfband .orden b { font-size: 10px; }

/* Luftvorrat */
.kopfband .anzeige-luft { gap: 5px; padding: 3px 8px 3px 6px; }
.kopfband .luft-flasche { width: 10px; height: 22px; border-width: 1.5px; }
.kopfband .anzeige-luft b { padding-top: 2px; font-size: clamp(14px, 1.25vw, 17px); }

@media (max-width: 700px) {
  .kopfband .anzeige { padding: 2px 7px; }
  .kopfband .buch-knopf svg { width: 18px; height: 18px; }
}