/* Bildband (PLAN.md 15.4, A-621 abgewandelt; Entwurf 06 „bildband“, bestanden in Prüfrunde 2 am 03.10.2026).
   Startseite unter der Einleitung und /leistungen vor dem Abschluss. Karten baut {{BILDBAND}} in zusammenbauen.mjs,
   den Lauf site/js/bildband.js. Farben nur über die Farbrollen aus stil.css (PLAN.md 16.1 und 16.2): Rahmen und Knopf
   Schwarz, Leiste, Hover und Fokus Kobalt, Adressfeld Silber hell, Bildzeile Grau. Nie Schwarz als Schrift auf Kobalt.
   Ohne JavaScript, in der ruhigen Fassung und bei 1 bis 3 Arbeiten: wischbare Reihe ohne Lauf.
   Befund Runde 2 behoben (Einbau 16d): die Bildzeile hat keine Mindesthöhe mehr, die Karten stehen oben bündig in
   der Reihe. Der Fokusrahmen umschließt so nur Fenster und Text, mit gleichem Abstand rundum. */
.bildband {
  --band-karte: clamp(240px, 22vw, 320px);
  --band-luecke: 20px;
  --band-rand: var(--rand);
  position: relative; padding: 16px 0;
}
@media (max-width: 599px) { .bildband { --band-karte: 240px; } }
/* am Handy Name und Branche · Ort mit 16 px (Fließtext am Handy ab 16 px), KI-Hinweis bleibt 13 px in einer Zeile (L-037) */
@media (max-width: 599px) { .bildband .bildband__name, .bildband .bildband__art { font-size: 16px; } }

/* kleiner Kopf (nur /leistungen): Etikett und h2 über dem Band, im Seitenrand */
.bildband__kopf { padding: 0 var(--band-rand) 24px; }
.bildband__kopf .oberzeile { margin-bottom: 12px; }

.bildband__fenster { position: relative; width: 100%; overflow-x: clip; overflow-y: visible; }
.bildband__spur { display: flex; align-items: flex-start; gap: var(--band-luecke); margin: 0; padding: 4px 0 8px; list-style: none;
  width: max-content; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.bildband.laeuft .bildband__spur { will-change: transform; }
.bildband.zieht .bildband__spur { cursor: grabbing; }
.bildband__karte { flex: 0 0 var(--band-karte); width: var(--band-karte); }
.bildband__link { display: block; padding-bottom: 4px; color: inherit; text-decoration: none; border-radius: 16px; -webkit-user-drag: none; }
/* Fokus nach PLAN.md 16.1 wie stil.css: Umriss Schwarz 2 px plus Ring Kobalt 2 px, hier mit dem Radius der Karte */
.bildband__link:focus-visible { outline: 2px solid var(--sekundaer); outline-offset: 2px; box-shadow: 0 0 0 2px var(--akzent); border-radius: 16px; }

/* Markenfenster: Rahmen Schwarz 2 px, Radius 14 px, Leiste Kobalt 30 px mit Auge und Adressfeld, Bild 16 : 10 */
.bildband__rahmen { display: block; border: 2px solid var(--sekundaer); border-radius: 14px; overflow: hidden; background: var(--dominant-hell); }
.bildband__leiste { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; background: var(--akzent); }
.bildband__auge { flex: none; width: 18px; height: 12px; }
.bildband__adresse { flex: 1; min-width: 0; height: 18px; padding: 0 8px; border-radius: 9px; background: var(--dominant-hell);
  color: var(--sekundaer); font-size: 12px; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bildband__bild { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; -webkit-user-drag: none; }

/* Bildzeile: Name, Branche · Ort, KI-Hinweis je als eigene Zeile, ohne Mindesthöhe (Befund Runde 2).
   Der KI-Hinweis bricht nie in sich um (bei 240 px Karte 236 px Platz, „KI-bearbeitetes Foto“ braucht rund 120 px). */
.bildband__zeile { display: block; margin: 10px 2px 0; font-size: 14px; line-height: 1.4; color: var(--leise); }
.bildband__name { display: block; color: var(--sekundaer); font-size: 15px; font-weight: 600; }
.bildband__art { display: block; }
.bildband__ki { display: block; font-size: 13px; white-space: nowrap; }

/* Bedienung rechts unter dem Band: Pausenknopf (D-490), in der ruhigen Fassung Zurück und Weiter */
.bildband__bedienung { display: flex; justify-content: flex-end; gap: 12px; margin: 8px 0 0; padding: 0 var(--band-rand); }
.bildband__knopf { display: inline-flex; align-items: center; gap: 10px; padding: 0; border: 0; background: none;
  color: var(--sekundaer); font: 600 15px/1 var(--schrift-text); cursor: pointer; }
.bildband__kreis { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--sekundaer); color: var(--dominant); transition: background-color .15s linear; }
.bildband__knopf:hover .bildband__kreis { background: var(--akzent); }
.bildband__knopf:focus-visible { outline: none; box-shadow: none; }
.bildband__knopf:focus-visible .bildband__kreis { outline: 2px solid var(--sekundaer); outline-offset: 2px; box-shadow: 0 0 0 2px var(--akzent); }
.bildband__knopf svg { width: 16px; height: 16px; fill: currentColor; }
.bildband__symbol-weiter { display: none; }
.bildband__knopf[data-zustand="halt"] .bildband__symbol-halt { display: none; }
.bildband__knopf[data-zustand="halt"] .bildband__symbol-weiter { display: block; }
.bildband__knopf--nur-kreis { gap: 0; }
.bildband [hidden] { display: none !important; }

/* Ruhige Fassung, ohne JavaScript und bei 1 bis 3 Arbeiten: wischbare Reihe mit Einrasten */
.bildband:is(.ruhig, :not(.bereit)) .bildband__fenster {
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--sekundaer) transparent;
  scroll-padding-inline: var(--band-rand); }
.bildband:is(.ruhig, :not(.bereit)) .bildband__spur { padding-inline: var(--band-rand); touch-action: auto; user-select: auto; }
.bildband:is(.ruhig, :not(.bereit)) .bildband__karte { scroll-snap-align: start; }
.bildband.ruhig .bildband__fenster:focus-visible { outline: 2px solid var(--sekundaer); outline-offset: -4px;
  box-shadow: inset 0 0 0 2px var(--akzent); border-radius: 0; }
/* Abnahme Runde 5: passt auch die Kurzform nicht, keine Pille statt eines leeren Balkens (seite.js, adresse--punkt) */
.bildband__adresse.adresse--punkt { background: transparent; border-color: transparent; }