/*
  bento-kopf.css — Aussehen des Bausteins „Kopfzeile oben rechts“ (Verhalten: bento-kopf.js).

  Kurzbeschreibung (für Laien): Ralph, 29.10.2026 — runde Knöpfe, Suchfeld, Zähler, Trennstrich und Handy-Verhalten sehen auf jedem
  Server gleich aus. Hier steht bewusst KEINE Farbe: jede Seite bildet die Variablen --bt-… auf ihre Markenwerte ab
  (gebraucht: --bt-karte, --bt-weich, --bt-text, --bt-leise, --bt-dunkel, --bt-auf-dunkel, --bt-rot, --bt-grund, --bt-linie-stark,
  --bt-fokus-ring, --bt-schrift). Dunkelmodus liefern diese Werte selbst.
  Die Knöpfe stehen direkt in der Flex-Zeile der Seite (die beiden Gruppen sind unsichtbare Hüllen); die Seite entscheidet über
  Logo, Reiter und Lücke davor.
  marke-ausnahme: Bento-Kopfzeile (Ralph 23./24.10.2026) – runde 44-px-Knöpfe und Pillen-Suche sind dort festgelegt
*/
.bt-kopf-gruppe { display: contents; }

.bt-kopf-rund { position: relative; flex: none; width: 44px; height: 44px; margin: 0; padding: 0; box-sizing: border-box; border: 0; border-radius: 50%;
  background: var(--bt-karte); color: var(--bt-text); display: flex; align-items: center; justify-content: center; cursor: pointer;
  font-family: var(--bt-schrift); transition: background .2s; touch-action: manipulation; }
.bt-kopf-rund:hover { background: var(--bt-weich); }
.bt-kopf-rund[hidden] { display: none; }
.bt-kopf-rund svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bt-kopf-rund.an, .bt-kopf-rund.an:hover, .bt-kopf-rund[aria-pressed="true"], .bt-kopf-rund[aria-expanded="true"] { background: var(--bt-dunkel); color: var(--bt-auf-dunkel); }
.bt-kopf-rund:focus-visible, .bt-kopf-suche input:focus-visible { outline: 2px solid var(--bt-fokus-ring); outline-offset: 2px; }

.bt-kopf-zaehler { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 999px;
  background: var(--bt-rot); color: var(--bt-auf-dunkel); font: 700 11px/18px var(--bt-schrift); text-align: center; font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px var(--bt-grund); }
.bt-kopf-zaehler[hidden] { display: none; }

/* Hell/Dunkel: Sonne im Hellen, Mond im Dunkeln (Zustand setzt der Baustein: data-dunkel) */
.bt-kopf-hell[data-dunkel="ja"] .bt-sonne, .bt-kopf-hell[data-dunkel="nein"] .bt-mond { display: none; }

/* Mikrofon: Pegel erst, wenn die Seite ihn braucht (innen: <span class="pegel">) */
.bt-kopf-mikro .pegel { display: none; align-items: flex-end; gap: 2px; height: 16px; }

.bt-kopf-trenn { flex: none; align-self: center; height: 20px; margin: 0 3px; border-left: 1.5px solid var(--bt-linie-stark); }
.bt-kopf-trenn[hidden] { display: none; }

.bt-kopf-suche { position: relative; flex: none; display: flex; align-items: center; gap: 8px; width: 280px; height: 44px; padding: 0 16px; box-sizing: border-box;
  background: var(--bt-karte); border-radius: 999px; color: var(--bt-leise); }
.bt-kopf-suche svg { flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bt-kopf-suche input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; box-shadow: none; padding: 0; font: 400 13px var(--bt-schrift); color: var(--bt-text); }

/* Desktop: die Suche gibt zuerst Platz ab – bis auf die Lupe; ist sie zu schmal für Text, verschwindet der Platzhalter */
@media (min-width: 901px) {
  .bt-kopf-suche { flex: 0 100 280px; min-width: 44px; padding: 0 14px; container-type: inline-size; }
  .bt-kopf-suche:focus-within { min-width: 200px; }
}
@container (max-width: 50px) { .bt-kopf-suche input::placeholder { color: transparent; } }
@media (max-width: 1100px) { .bt-kopf-suche { width: 200px; } }
@media (max-width: 900px) { .bt-kopf-suche { width: auto; flex: 1; min-width: 120px; } }

/* Handy (< 700 px): Zeile 1 Logo und alle runden Knöpfe (36 px), darunter die Suche allein in voller Breite; kein Trennstrich.
   Die Seite setzt Logo (Reihenfolge 0), Lücke (1), Umbruch-Marke (3) und Reiter (5) selbst. */
@media (max-width: 699px) {
  .bt-kopf-rund { order: 2; width: 36px; height: 36px; }
  .bt-kopf-trenn { display: none; }
  .bt-kopf-suche { order: 7; flex: 0 0 100%; width: auto; min-width: 0; height: 40px; container-type: normal; }
}
/* Sehr schmale Handys (≤ 440 px): auch mit allen neun Knöpfen kein Überlauf in Zeile 1 */
@media (max-width: 440px) {
  .bt-kopf-rund { width: 32px; height: 32px; }
  .bt-kopf-rund svg { width: 17px; height: 17px; }
}
@media (prefers-reduced-motion: reduce) { .bt-kopf-rund { transition: none; } }