/* Blog-Bilder (Roland 24.10.2026): Bildformate für Blogbeiträge. Geladen von Base.astro auf allen /blog/-Seiten.
   Markup erzeugen stabando-automatik/blog_vorschau.py (Markdown-Blöcke) und blog_bilder.py (Einbau) über
   blog_bild_html.py. Eigene Klassen (bb-…), damit ältere Beiträge mit eigenem Seiten-CSS nicht kollidieren.
   Bildunterschriften #b7b0a6 auf #0b0a0f = 8,9:1 (WCAG AA ≥ 4,5:1). */
.bb-fig{margin:30px auto;max-width:680px;}
.bb-fig picture,.bb-fig img{display:block;}
figure.bb-fig img{width:100%;height:auto;margin:0;border-radius:12px;background:#141118;}
.bb-fig figcaption,.bb-cap{margin:9px 2px 0;font-size:13px;line-height:1.5;color:#b7b0a6;}
.bb-fig.bb-hoch{max-width:440px;}

/* Einzelbild im Text: halbe Spaltenbreite rechts, Text fließt daneben (Roland 24.10.2026); am Handy volle Breite */
.bb-fig.bb-float{float:right;clear:right;width:48%;max-width:none;margin:6px 0 18px 26px;}
.art.body h2,.art.body hr,.art.body .box,.art.body .zitat,.art.body .cta,.art.body .metabar,
.bb-breit,.bb-paar,.bb-bildtext,.bb-galerie{clear:both;}
.art.body::after{content:"";display:table;clear:both;}
/* Ausgleich (blog_bild_html.float_ausgleich): zu wenig Text daneben → Querformat 4:3, Gesicht im oberen Drittel;
   gar kein passender Abschnitt → mittig und schmaler ohne Text daneben */
.bb-fig.bb-float.bb-quer img{aspect-ratio:4/3;object-fit:cover;object-position:50% 28%;}
.bb-fig.bb-float.bb-mitte{float:none;width:auto;max-width:440px;margin:30px auto;}
@media (max-width:640px){.bb-fig.bb-float{float:none;width:auto;margin:26px 0;}}

/* Hero: volle Inhaltsbreite, 16:9 */
figure.bb-hero{margin:22px 0 0;border-radius:12px;overflow:hidden;aspect-ratio:16/9;background:#141118;
  border:1px solid rgba(255,255,255,.1);box-shadow:0 30px 70px rgba(0,0,0,.5);}
figure.bb-hero picture,figure.bb-hero img{display:block;width:100%;height:100%;}
figure.bb-hero img{object-fit:cover;margin:0;border-radius:0;}
.bb-hero + .bb-cap{margin:9px 2px 0;}

/* Breakout: über die Textspalte hinaus (Desktop bis in den Seitenrand, Handy randlos) */
.bb-breit{max-width:none;width:calc(100% + 48px);margin:36px -24px;}
figure.bb-breit img{border-radius:14px;}
.bb-breit figcaption{padding:0 24px;}
@media (max-width:960px){
  .bb-breit{width:calc(100% + 32px);margin:32px -16px;}
  figure.bb-breit img{border-radius:0;}
  .bb-breit figcaption{padding:0 16px;}
}

/* Zwei Bilder nebeneinander */
.bb-paar{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:30px 0;}
.bb-paar .bb-fig{margin:0;max-width:none;}
.bb-paar figure img{aspect-ratio:4/5;object-fit:cover;}
@media (max-width:640px){.bb-paar{grid-template-columns:1fr;gap:22px;}.bb-paar figure img{aspect-ratio:auto;}}

/* Bild neben Text (40 %) */
.bb-bildtext{display:grid;grid-template-columns:40% minmax(0,1fr);gap:24px;align-items:start;margin:30px 0;}
.bb-bildtext.bb-rechts{grid-template-columns:minmax(0,1fr) 40%;}
.bb-bildtext.bb-rechts .bb-fig{order:2;}
.bb-bildtext .bb-fig{margin:0;max-width:none;}
.bb-bildtext .bb-text > :first-child{margin-top:0;}
.bb-bildtext .bb-text > :last-child{margin-bottom:0;}
@media (max-width:640px){
  .bb-bildtext,.bb-bildtext.bb-rechts{grid-template-columns:1fr;gap:16px;}
  .bb-bildtext.bb-rechts .bb-fig{order:0;}
}

/* Galerie mit Lightbox (lightbox.js, Gruppe je Galerie) */
.bb-galerie{margin:32px 0;}
.bb-galerie .bb-gal-t{margin:0 0 12px;font-size:12.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#b7b0a6;}
div.bb-galerie ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
div.bb-galerie li{margin:0;}
.bb-galerie figure{margin:0;}
.bb-galerie figure img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:10px;margin:0;
  background:#141118;}
.bb-galerie figcaption{margin:6px 2px 0;font-size:12.5px;line-height:1.45;color:#b7b0a6;}
@media (max-width:640px){div.bb-galerie ul{grid-template-columns:repeat(2,minmax(0,1fr));}}

/* Zitat mit rundem Porträt neben dem Namen */
.zitat figcaption.bb-mit-bild{display:flex;align-items:center;gap:12px;}
.zitat .bb-portraet,.zitat .bb-portraet img{display:block;width:64px;height:64px;flex:none;}
.zitat .bb-portraet img{border-radius:50%;object-fit:cover;margin:0;border:2px solid rgba(245,166,35,.55);}

/* Screenshot im Browser-Rahmen */
.bb-shot img{border:1px solid rgba(255,255,255,.14);box-shadow:0 18px 50px rgba(0,0,0,.45);}

/* Dezentes Einblenden beim Scrollen (nur mit JS; aus bei reduzierter Bewegung) */
.bb-js .bb-reveal{opacity:0;transform:translateY(14px);transition:opacity .3s ease,transform .3s ease;}
.bb-js .bb-reveal.bb-da{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){.bb-js .bb-reveal{opacity:1;transform:none;transition:none;}}
@media print{.bb-js .bb-reveal{opacity:1;transform:none;}}

/* Links im Fließtext nicht nur über Farbe erkennbar (axe link-in-text-block, WCAG 1.4.1) — gilt für alle Blogbeiträge */
.art.body p a,.art.body li a,.art.body dd a,.art.body blockquote a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;}

/* Blog-Sidebar (aus blog_sync.py erzeugt, Fehlerregister #80): Zähler, Neueste Beiträge, Schlagwörter in Übersicht UND Artikeln gleich */
.sidebar,.layout>*{min-width:0;}
.widget{max-width:100%;}
.wlist a{align-items:center;min-height:44px;padding-top:0;padding-bottom:0;}
.wlist .n{color:#b7b0a6;font-size:12.5px;font-weight:700;}
.tagcloud .chip{display:inline-flex;align-items:center;min-height:32px;}
.recent{display:flex;gap:12px;align-items:center;min-height:44px;margin-top:10px;}
.recent img{width:66px;height:44px;object-fit:cover;border-radius:7px;flex:0 0 66px;margin:0;}
.recent .t{font-size:13.5px;font-weight:700;color:#f5efe4;line-height:1.28;}
.recent .d{font-size:11.5px;color:#b7b0a6;margin-top:3px;}
.wcta{width:100%;}
/* Tippflächen ≥ 24 px (Ziel 44 px): „Zurück zum Blog“ und Download-Links im Beitrag */
.art>a[href="/blog/"],.bb-touch{display:inline-flex;align-items:center;min-height:44px;}

/* Tabellen im Beitrag (Markdown-Tabellen als echte <table>): eigener Scroll-Container mit Fokus, am Handy lesbar */
.bb-table{margin:0 0 22px;overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch;border:1px solid rgba(255,255,255,.12);border-radius:10px;}
.bb-table:focus-visible{outline:2px solid #f5a623;outline-offset:2px;}
.bb-table table{border-collapse:collapse;width:100%;min-width:280px;font-size:15px;line-height:1.5;}
.bb-table caption{caption-side:top;text-align:left;padding:12px 14px 4px;font-weight:800;color:#f5efe4;}
.bb-table th,.bb-table td{padding:10px 14px;text-align:left;border-top:1px solid rgba(255,255,255,.08);vertical-align:top;}
.bb-table thead th{border-top:0;color:#f5efe4;background:rgba(255,255,255,.04);}
.bb-table tbody th{font-weight:600;color:#e7e0d4;}