/* utility.css – frank-hillmann.de
   Ersetzt alle inline style="..."-Attribute im HTML.
   Wird von allen Seiten eingebunden, damit unsafe-inline aus style-src entfernt werden kann.
*/

/* ─── Hero ─── */
.hero-photo-wrap { text-decoration: none; }
.hero-photo { transition: filter 0.2s, opacity 0.2s; }

/* ─── About-Strip-Wrapper (index.html) ─── */
.about-wrap  { border-top: 1px solid var(--border); padding: 0 48px; }
.about-inner { max-width: 1100px; margin: 0 auto; padding: 40px 0; }

/* ─── About-Cell Pfeil ─── */
.cell-arrow { font-size: 12px; color: var(--accent); }

/* ─── Blog-Abschnitt-Header (index.html) ─── */
.section-header--blog {
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.section-header-inner { display: flex; align-items: baseline; gap: 16px; }

/* ─── Kleiner Ghost-Button ─── */
.btn-ghost--sm { font-size: 13px; padding: 8px 18px; }

/* ─── Leistungsrechner-Karte (featured tech-item) ─── */
.tech-item--featured {
  border-color: rgba(62,207,142,0.25) !important;
  background:   rgba(62,207,142,0.04) !important;
}
.tech-item--featured .tech-item-name { color: var(--accent); }

/* ─── Contact-Sektion: Extra Padding ─── */
#contact.section { padding-bottom: 80px; }

/* ─── Versteckte Platzhalter (img-fallback etc.) ─── */
.u-hidden { display: none; }

/* ─── Flex-20 (Footer-Links, Kontakt-Links) ─── */
.u-flex-20 { display: flex; gap: 20px; }

/* ─── Heute-Punkte (ueber-mich.html) ─── */
.heute-dot--green  { background: #3ecf8e; }
.heute-dot--blue   { background: #3b82f6; }
.heute-dot--yellow { background: #f59e0b; }
.heute-dot--purple { background: #a78bfa; }

/* ─── Floating Bilder (Blog-Artikel) ─── */
.img-float-right {
  float: right;
  border-radius: 12px;
  margin: 0 0 16px 24px;
  display: block;
}
.img-float-left-fig { float: left; margin: 0 24px 16px 0; }
.img-w-240 { width: 240px; }
.img-w-260 { width: 260px; }
.img-w-280 { width: 280px; }
.img-full  { width: 100%; border-radius: 12px; display: block; }
.figcaption-sm { font-size: 12px; color: var(--text-dim); margin-top: 8px; }

/* ─── Artikel-Hauptbild ─── */
.article-img-full { width: 100%; border-radius: 16px; margin: 40px 0; display: block; }