/* Startseiten-Hero „Fokus" (Entwurf 09/2026) — nutzt Gradient, Ringe (.hero-waves aus hero.css) und Gebäudefoto des bisherigen Heros */
.hero--fokus .section-inner { max-width: 100%; padding: 0; }
.hf-intro { position: relative; width: 100%; padding: 100px 40px 36px; }
.hf-columns { display: flex; align-items: center; gap: 0; max-width: 1520px; margin: 0 auto; }
.hf-col-content { flex: 0 0 50%; position: relative; z-index: 2; padding-right: 10px; }
.hf-col-visual { flex: 0 0 50%; display: flex; justify-content: center; align-items: center; padding: 0 20px; }
.hf-headline { font-weight: 400; color: #fdfeff; margin: 0 0 16px; text-align: left; font-size: 3.6rem; line-height: 1.08; -webkit-hyphens: manual; hyphens: manual; }
.hf-headline span { color: var(--secondary-1000); }
/* Headline darf optisch in die Bildspalte ragen (wie im alten Hero mit negativem Rand), damit „IT-Systemhaus für den" auf eine Zeile passt */
.hf-headline { margin-right: -30px; }
.hf-text { font-size: 22px; line-height: 1.4; color: #fdfeff; margin: 0 0 22px; max-width: 680px; -webkit-hyphens: manual; hyphens: manual; }
.hf-btns { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.hf-btns .btn-xl-primary { margin-top: 0; text-transform: none; }
.hf-btns .hf-btn-primary { color: #fdfeff; }
.hf-btns .hf-btn-primary:hover { color: var(--secondary-1000); }
.hf-note { margin: 12px 0 0; font-size: 15px; color: rgba(253, 254, 255, .8); }
/* Bild + Ringe exakt wie .lp-intro-visual der Leistungsseiten: Ringe 100 % (max 800), Bild absolut 100 % (max 755), 20 px nach rechts, vertikal mittig */
.hf-visual { position: relative; display: flex; flex-direction: column; align-items: flex-start; width: 100%; max-width: 800px; margin-left: -110px; }
.hf-waves { position: static; width: 100%; max-width: 800px; opacity: 1; pointer-events: none; }
.hf-waves .hero-waves-svg { display: block; width: 100%; height: auto; }
/* Bildmitte exakt auf Ringmitte: der Blob im Foto sitzt 1,3 % rechts der Canvas-Mitte, die Ringe sind im SVG zentriert (gemessen 09/2026) */
.hf-image { position: absolute; display: block; width: 100%; max-width: 755px; height: auto; top: 49.9%; left: -1.3%; transform: translateY(-50%); margin: 0; }

.hf-einstiege { max-width: 1520px; margin: 12px auto 0; }
.hf-einstiege-head { color: #fdfeff; font-size: 19px; margin: 0 0 10px; }
.hf-einstiege-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.hf-einstieg { display: flex; flex-direction: column; gap: 6px; padding: 20px 20px 18px; border-radius: 14px; background: rgba(0, 41, 70, .42); border: 1px solid rgba(253, 254, 255, .18); color: #fdfeff; text-decoration: none; font-family: "Open Sans", sans-serif; font-weight: 400; backdrop-filter: blur(6px); transition: background .2s, transform .2s, border-color .2s; }
.hf-einstieg:hover, .hf-einstieg:focus-visible { background: rgba(0, 41, 70, .58); border-color: rgba(253, 254, 255, .5); transform: translateY(-3px); color: #fdfeff; }
.hf-einstieg-kicker { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: rgba(253, 254, 255, .72); font-weight: 600; }
.hf-einstieg-title { font-size: 20px; line-height: 1.25; }
.hf-einstieg-text { font-size: 15px; line-height: 1.45; color: rgba(253, 254, 255, .9); font-weight: 400; -webkit-hyphens: manual; hyphens: manual; }
.hf-einstieg-link { margin-top: auto; padding-top: 6px; font-size: 15px; color: #fdfeff; }
.hf-einstieg-title { -webkit-hyphens: manual; hyphens: manual; }

@media (min-width: 1600px) {
  .hf-headline { font-size: 4rem; margin-right: -60px; }
}
@media (min-width: 1920px) {
  .hf-headline { font-size: 4.2rem; margin-right: -80px; }
  .hf-visual { max-width: 800px; }
}
@media (max-width: 1399px) {
  .hf-intro { padding: 100px 40px 36px; }
  .hf-headline { font-size: 3.3rem; }
  .hf-text { font-size: 20px; }
}
@media (max-width: 1024px) {
  .hf-headline { margin-right: 0; }
  .hf-einstiege-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hf-columns { gap: 24px; }
}
@media (max-width: 767px) {
  .hf-intro { padding: 100px 20px 30px; }
  .hf-columns { flex-direction: column-reverse; gap: 8px; }
  .hf-col-content { padding-right: 0; }
  .hf-col-visual { padding: 0; }
  .hf-col-content, .hf-col-visual { flex: 0 0 auto; width: 100%; }
  .hf-visual { max-width: 280px; margin: 0 auto 18px; }
  .hf-image { left: -1.3%; }
  .hf-headline { font-size: 31px; line-height: 1.12; margin-top: 4px; }
  .hf-text { font-size: 17px; margin-bottom: 18px; }
  .hf-btns { flex-direction: column; align-items: stretch; }
  .hf-btns .btn-xl-primary { width: 100%; text-align: center; }
  .hf-einstiege { margin-top: 34px; }
  .hf-einstiege-grid { grid-template-columns: 1fr; gap: 12px; }
  .hf-einstieg { padding: 16px; }
}

/* Flache Fenster (Laptops) — steht bewusst am Ende, damit es die Breiten-Regeln überschreibt: Bild etwas kleiner, damit die Problemeinstiege ohne Scrollen sichtbar bleiben */
@media (min-width: 1025px) and (max-height: 820px) {
  .hf-intro { padding-top: 96px; padding-bottom: 18px; }
  .hf-visual { max-width: 560px; margin-left: -80px; }
  .hf-headline { font-size: 3.2rem; margin-bottom: 12px; }
  .hf-text { font-size: 18px; margin-bottom: 14px; }
  .hf-note { margin-top: 8px; font-size: 14px; }
  /* Kacheln flacher, damit Titelzeile ohne Scrollen sichtbar bleibt */
  .hf-einstiege { margin-top: 2px; }
  .hf-einstiege-head { font-size: 16px; margin-bottom: 4px; }
  .hf-einstiege-grid { gap: 10px; }
  .hf-einstieg { padding: 8px 12px 8px; gap: 2px; }
  .hf-einstieg-kicker { font-size: 10px; }
  .hf-einstieg-title { font-size: 16px; }
  .hf-einstieg-text { font-size: 13px; line-height: 1.35; }
  .hf-einstieg-link { font-size: 13px; padding-top: 2px; }
}