/* ══════════════════════════════════════════════════════════════════════
   MEDIAFELD — Startseite (index.php)
   Leistungs-Bento · Themenblöcke · Website-Zusammenbau
   · Systeme (dunkel) · Kennzahlen (blau). Hintergründe: --bg-blue / --bg-dark.
   ══════════════════════════════════════════════════════════════════════ */

@keyframes hmFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }

/* ── Gemeinsame Kopfzeile der Abschnitte ── */
.hm-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: end; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.hm-head .h2 { margin-bottom: 0; }
.hm-head__side .lead { margin: 0 0 1.2rem; }
.hm-pill { display: inline-flex; align-items: center; gap: .55rem; padding: .7rem .8rem .7rem 1.2rem; border-radius: 999px; font-size: .95rem; color: #0E2A40; background: #fff; box-shadow: inset 0 0 0 1px rgba(14,42,64,.1), 0 14px 30px -20px rgba(10,24,36,.5); transition: transform .3s, box-shadow .3s; }
.hm-pill b { color: #0B5F8E; }
.hm-pill i { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; color: #fff; background: linear-gradient(135deg, #22B8E8, #0B5F8E); font-size: .85rem; }
.hm-pill:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(27,146,209,.4), 0 18px 34px -20px rgba(14,110,163,.7); }

/* ── Leistungen: Bento ── */
.hm-svc { position: relative; overflow: hidden; padding-block: clamp(5rem, 9vw, 8rem); background: linear-gradient(180deg, #fff 0%, #F4F7F9 100%); }
.hm-svc > .wrap { position: relative; z-index: 1; }
.hm-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(200px, auto); gap: 1.1rem; }
.hm-tile { position: relative; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; isolation: isolate; border-radius: 28px; color: #fff; background: #0E2A40; box-shadow: 0 40px 70px -45px rgba(10,24,36,.7); text-decoration: none; transition: transform .5s var(--ease, ease), box-shadow .5s; }
.hm-tile--xl { grid-column: span 2; grid-row: span 2; min-height: 520px; }
.hm-tile--wide { grid-column: span 2; min-height: 250px; }
.hm-tile__img { position: absolute; inset: -8% 0; z-index: -2; width: 100%; height: 116%; object-fit: cover; transition: transform 1.2s var(--ease, ease); }
.hm-tile__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(5,14,22,.05) 20%, rgba(5,14,22,.88) 100%); }
.hm-tile:hover { transform: translateY(-6px); box-shadow: 0 50px 80px -45px rgba(14,110,163,.8); }
.hm-tile:hover .hm-tile__img { transform: scale(1.06); }
.hm-tile__body { display: grid; gap: .45rem; padding: 1.6rem 1.7rem; max-width: 34rem; }
.hm-tile__t { font-size: clamp(1.5rem, 2.4vw, 2.2rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
.hm-tile__body > span { color: rgba(255,255,255,.85); line-height: 1.5; }
.hm-tile__tag { position: absolute; left: 1.6rem; top: 1.4rem; padding: .45rem .9rem; border-radius: 999px; font-size: .88rem; font-weight: 800; color: #fff; background: linear-gradient(120deg, #22B8E8, #1B92D1); box-shadow: 0 10px 20px -10px rgba(27,146,209,.9); }
.hm-tile__go { position: absolute; right: 1.2rem; top: 1.2rem; display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: 50%; color: #0E2A40; background: rgba(255,255,255,.92); transition: transform .4s; }
.hm-tile:hover .hm-tile__go { transform: rotate(-45deg); }
.hm-tile__phone { position: absolute; right: 7%; top: 12%; width: 26%; min-width: 120px; filter: drop-shadow(0 30px 40px rgba(5,14,22,.6)); animation: hmFloat 7s ease-in-out infinite; }
/* kleine Kacheln */
.hm-card { position: relative; display: flex; flex-direction: column; gap: .45rem; padding: 1.4rem 1.4rem 1.3rem; border-radius: 24px; color: var(--text, #0E2A40); background: #fff; text-decoration: none; box-shadow: inset 0 0 0 1px rgba(14,42,64,.08), 0 26px 44px -36px rgba(10,24,36,.5); transition: transform .4s var(--ease, ease), box-shadow .4s; }
.hm-card__ic { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; margin-bottom: .5rem; border-radius: 16px; font-size: 1.35rem; color: #1B92D1; background: #E8F6FD; transition: background .35s, color .35s; }
.hm-card b { font-size: 1.12rem; font-weight: 800; letter-spacing: -.02em; color: #0E2A40; }
.hm-card span:not(.hm-card__ic):not(.hm-card__go) { font-size: .93rem; line-height: 1.45; color: #5B6B78; }
.hm-card__go { position: absolute; right: 1.1rem; top: 1.1rem; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; font-size: .8rem; color: #0E2A40; box-shadow: inset 0 0 0 1px rgba(14,42,64,.12); transition: transform .35s, background .35s, color .35s; }
.hm-card:hover { transform: translateY(-5px); box-shadow: inset 0 0 0 1px rgba(27,146,209,.3), 0 30px 50px -30px rgba(14,110,163,.55); }
.hm-card:hover .hm-card__ic { color: #fff; background: linear-gradient(135deg, #22B8E8, #0B5F8E); }
.hm-card:hover .hm-card__go { transform: rotate(-45deg); color: #fff; background: #1B92D1; box-shadow: none; }

/* ── Themenblöcke (nutzen .lz-tb aus lp.css) ── */
.hm-topics { margin-top: clamp(5rem, 9vw, 8rem); }
.hm-topics .lz-tb .h2 { margin-bottom: 1.4rem; }
.hm-topics .lz-tb__visual .hm-float { position: absolute; z-index: 2; width: 30%; min-width: 120px; right: -5%; bottom: -10%; filter: drop-shadow(0 30px 40px rgba(5,14,22,.45)); animation: hmFloat 8s ease-in-out infinite; }
.hm-topics .lz-tb--rev .lz-tb__visual .hm-float { right: auto; left: -6%; }
.hm-topics .lz-tb__visual .lz-sk { position: absolute; z-index: -1; width: 70%; left: -14%; bottom: -14%; }
.hm-link { display: inline-flex; align-items: center; gap: .4rem; margin-left: .4rem; font-weight: 700; color: #0B5F8E; }
.hm-link i { transition: transform .3s; }
.hm-link:hover i { transform: translateX(4px); }

/* Skizzen im Hintergrund */
.hm-svc .lz-sk--a { left: 2%; top: 4%; width: clamp(220px, 20vw, 320px); }
.hm-svc .lz-sk--b { right: 3%; top: 38%; width: clamp(110px, 9vw, 150px); }

/* ── Website-Zusammenbau beim Scrollen ── */
.hm-build { position: relative; height: 360vh; color: #fff; }
.hm-build__stick { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; align-items: center; padding-top: 72px; }
.hm-build .h2 { font-size: clamp(2.3rem, 3.8vw, 3.8rem); }
.hm-topics .lz-tb .h2 { font-size: clamp(2.3rem, 3.6vw, 3.7rem); }
.hm-build__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; width: 100%; }
.hm-build .eyebrow { color: #9FE3FA; }
.hm-build .h2 { color: #fff; }
.hm-build .h2 strong { color: #22B8E8; }
.hm-steps { list-style: none; margin: 1.8rem 0 0; padding: 0; display: grid; gap: .5rem; counter-reset: s; }
.hm-steps li { display: grid; grid-template-columns: auto 1fr; gap: .2rem 1rem; padding: .9rem 1.1rem; border-radius: 18px; opacity: .42; transition: opacity .45s, background .45s, transform .45s; }
.hm-steps li.is-on { opacity: 1; background: rgba(255,255,255,.07); transform: translateX(8px); box-shadow: inset 3px 0 0 #22B8E8; }
.hm-steps i { grid-row: span 2; display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: 14px; color: #22B8E8; background: rgba(34,184,232,.14); font-size: 1.15rem; }
.hm-steps li.is-on i { color: #fff; background: linear-gradient(135deg, #22B8E8, #0B5F8E); }
.hm-steps b { font-size: 1.12rem; }
.hm-steps span { font-size: .95rem; line-height: 1.5; color: rgba(255,255,255,.75); }
.hm-build__stage { position: relative; }
.hm-build__bar { position: relative; height: 4px; margin-top: 1.4rem; border-radius: 4px; background: rgba(255,255,255,.12); overflow: hidden; }
.hm-build__bar::after { content: ""; position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, #22B8E8, #1B92D1); }
/* Browser */
.hmb { position: relative; border-radius: 18px; background: #0B1D2C; box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 60px 120px -50px rgba(0,0,0,.8), 0 0 90px -30px rgba(34,184,232,.4); }
.hmb__chrome { display: flex; align-items: center; gap: .5rem; padding: .7rem .9rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.hmb__chrome i { width: .7rem; height: .7rem; border-radius: 50%; background: #FF5F57; }
.hmb__chrome i:nth-child(2) { background: #FEBC2E; } .hmb__chrome i:nth-child(3) { background: #28C840; }
.hmb__url { flex: 1; display: flex; align-items: center; gap: .45rem; margin-left: .6rem; padding: .35rem .8rem; border-radius: 8px; font-size: .82rem; color: rgba(255,255,255,.55); background: rgba(255,255,255,.06); }
.hmb__url b { font-weight: 600; color: #fff; opacity: var(--t, 0); transition: opacity .3s; }
.hmb__url .fa-lock { color: #28C840; opacity: var(--t, 0); }
.hmb__site { position: relative; aspect-ratio: 16 / 10.4; margin: .7rem; border-radius: 10px; overflow: hidden;
  background: #fff linear-gradient(rgba(14,42,64,.06) 1px, transparent 1px) 0 0 / 22px 22px, linear-gradient(90deg, rgba(14,42,64,.06) 1px, transparent 1px) 0 0 / 22px 22px; }
.hmb__site::before { content: "Ihre Website entsteht …"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: .95rem; font-weight: 600; color: rgba(14,42,64,.3); opacity: calc(1 - var(--p, 0) * 6); }
/* bewegliche Bauteile: --t (0…1) setzt index.js */
.hmb-p { position: absolute; opacity: var(--t, 0); transform: translate(calc(var(--fx, 0px) * (1 - var(--t, 0))), calc(var(--fy, 0px) * (1 - var(--t, 0)))) rotate(calc(var(--fr, 0deg) * (1 - var(--t, 0)))) scale(calc(1 - (1 - var(--t, 0)) * .25)); will-change: transform, opacity; }
.hmb-nav { left: 0; right: 0; top: 0; height: 12%; display: flex; align-items: center; gap: 4%; padding: 0 4%; background: #fff; box-shadow: 0 1px 0 #EEF2F5; }
.hmb-logo { display: flex; align-items: center; gap: .4rem; font-weight: 800; font-size: clamp(.7rem, 1.1vw, .95rem); color: #0E2A40; white-space: nowrap; }
.hmb-logo i { color: #1B92D1; }
.hmb-links { display: flex; gap: 6%; margin-left: auto; flex: 0 0 34%; }
.hmb-links i { flex: 1; height: 6px; border-radius: 9px; background: #D5DEE5; }
.hmb-btn { padding: .35rem .8rem; border-radius: 99px; font-size: clamp(.55rem, .8vw, .72rem); font-weight: 700; color: #fff; background: #1B92D1; white-space: nowrap; }
.hmb-hero { left: 0; right: 0; top: 12%; height: 50%; background: url("../img/lp/px-7166979.webp") center / cover; }
.hmb-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,14,22,.82), rgba(5,14,22,.1) 75%); }
.hmb-h { left: 5%; top: 22%; z-index: 2; max-width: 46%; margin: 0; font-size: clamp(1rem, 2.1vw, 1.9rem); font-weight: 800; line-height: 1.05; letter-spacing: -.02em; color: #fff; }
.hmb-l1, .hmb-l2 { left: 5%; z-index: 2; height: 7px; border-radius: 9px; background: rgba(255,255,255,.55); }
.hmb-l1 { top: 41%; width: 34%; } .hmb-l2 { top: 45.5%; width: 25%; }
.hmb-cta { left: 5%; top: 51%; z-index: 2; padding: .45rem 1rem; border-radius: 99px; font-size: clamp(.55rem, .85vw, .78rem); font-weight: 700; color: #fff; background: #1B92D1; box-shadow: 0 8px 18px -8px rgba(27,146,209,.9); }
.hmb-card { top: 67%; width: 27.5%; height: 23%; display: grid; align-content: start; gap: 8%; padding: 2.5%; border-radius: 10px; background: #F2F6F9; }
.hmb-card i { font-size: clamp(.7rem, 1.1vw, 1rem); color: #1B92D1; }
.hmb-card b { height: 6px; border-radius: 9px; background: #D5DEE5; } .hmb-card b + b { width: 65%; }
.hmb-card--1 { left: 4%; } .hmb-card--2 { left: 36%; } .hmb-card--3 { left: 68%; }
.hmb-foot { left: 0; right: 0; bottom: 0; height: 5%; background: #0E2A40; }
.hmb-wa { right: 3%; bottom: 9%; z-index: 3; display: grid; place-items: center; width: clamp(28px, 3.4vw, 44px); aspect-ratio: 1; border-radius: 50%; color: #fff; font-size: clamp(.9rem, 1.6vw, 1.4rem); background: #25D366; box-shadow: 0 8px 18px -6px rgba(0,0,0,.35); }
/* außerhalb des Browsers */
.hmb-phone { position: absolute; right: -6%; bottom: -10%; z-index: 4; width: 24%; min-width: 110px; filter: drop-shadow(0 40px 50px rgba(0,0,0,.55)); }
.hmb-google { position: absolute; left: 3%; bottom: -12%; z-index: 4; width: min(62%, 360px); padding: .9rem 1.1rem; border-radius: 16px; color: #202124; background: #fff; box-shadow: 0 30px 60px -30px rgba(0,0,0,.7); font-family: Arial, sans-serif; }
.hmb-google small { display: block; font-size: .72rem; color: #4d5156; }
.hmb-google b { display: block; margin: .15rem 0; font-size: .98rem; font-weight: 400; color: #1a0dab; }
.hmb-google span { font-size: .78rem; color: #4d5156; line-height: 1.35; }
.hmb-google em { font-style: normal; color: #E8A33D; letter-spacing: .05em; }
.hmb-live { position: absolute; right: 4%; top: -5%; z-index: 4; display: inline-flex; align-items: center; gap: .5rem; padding: .55rem 1rem; border-radius: 999px; font-weight: 800; color: #fff; background: linear-gradient(120deg, #2BD96F, #12A94F); box-shadow: 0 16px 30px -12px rgba(18,169,79,.8); }

/* ── Systeme (dunkel) ── */
.hm-sys { position: relative; overflow: hidden; padding-block: clamp(5rem, 9vw, 8rem); color: #fff; }
.hm-sys > .wrap { position: relative; z-index: 1; }
.hm-sys .h2 { color: #fff; } .hm-sys .h2 strong { color: #22B8E8; }
.hm-sys .eyebrow { color: #9FE3FA; }
.hm-sys .lead { color: rgba(255,255,255,.78); }
.hm-sys__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; }
.hm-sys__grid a, .hm-sys__grid div { height: 100%; display: flex; flex-direction: column; gap: .3rem; padding: 1.3rem 1.2rem; border-radius: 20px; color: #fff; text-decoration: none; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); transition: transform .4s, background .4s, box-shadow .4s; }
.hm-sys__grid a:hover { transform: translateY(-5px); background: rgba(34,184,232,.12); box-shadow: inset 0 0 0 1px rgba(34,184,232,.5); }
.hm-sys__ic { display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: .6rem; border-radius: 14px; font-size: 1.35rem; color: #22B8E8; background: rgba(34,184,232,.14); }
.hm-sys__grid b { font-size: 1.08rem; }
.hm-sys__grid span:not(.hm-sys__ic) { font-size: .86rem; line-height: 1.4; color: rgba(255,255,255,.65); }
.hm-sys__more { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 1.2rem; padding: 1.1rem 1.4rem; border-radius: 20px; border: 1px dashed rgba(255,255,255,.25); color: rgba(255,255,255,.85); }
.hm-sys__more b { color: #fff; }
.hm-care { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; margin-top: clamp(4rem, 7vw, 6rem); padding-top: clamp(3rem, 5vw, 4rem); border-top: 1px solid rgba(255,255,255,.1); }
.hm-care h3 { margin: 0 0 1rem; font-size: clamp(2rem, 3.2vw, 3rem); line-height: 1.05; font-weight: 300; letter-spacing: -.035em; color: #fff; }
.hm-care h3 strong { font-weight: 800; color: #22B8E8; }
.hm-care p { color: rgba(255,255,255,.78); line-height: 1.7; }
.hm-care p strong { color: #fff; }
.hm-care__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.3rem 1.6rem; }
.hm-care__list li { display: flex; gap: .9rem; align-items: flex-start; }
.hm-care__list i { flex: none; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 15px; font-size: 1.25rem; color: #fff; background: linear-gradient(135deg, #22B8E8, #0B5F8E); box-shadow: 0 12px 22px -12px rgba(34,184,232,.8); }
.hm-care__list b { display: block; margin: .1rem 0 .2rem; color: #fff; }
.hm-care__list span { display: block; font-size: .92rem; line-height: 1.5; color: rgba(255,255,255,.7); }

/* ── Kennzahlen (blau) ── */
.hm-kpi { position: relative; overflow: hidden; padding-block: clamp(3rem, 5vw, 4.5rem); color: #fff; }
.hm-kpi__row { display: grid; grid-template-columns: auto repeat(4, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); align-items: center; }
.hm-kpi__logo { width: 150px; height: auto; padding-right: clamp(1rem, 2vw, 2rem); border-right: 1px solid rgba(255,255,255,.3); }
.hm-kpi__i { text-align: center; align-self: start; }
.hm-kpi__logo { align-self: center; }
.hm-kpi__i b { display: block; font-size: clamp(2.2rem, 4vw, 3.4rem); font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.hm-kpi__i > span { display: block; margin-top: .5rem; font-size: .92rem; font-weight: 600; color: rgba(255,255,255,.85); }

/* ── Mehr Bewegung in bestehenden Bildbereichen ── */
.section .lz-sk { z-index: 0; }
.section .lz-sk--a { left: 2%; top: 6%; width: clamp(200px, 18vw, 300px); }
.section .lz-sk--b { right: 3%; bottom: 8%; width: clamp(110px, 9vw, 150px); }
.section--dark .lz-sk path, .section--dark .lz-sk rect { stroke: rgba(255,255,255,.14); }

/* ── Responsiv ── */
@media (max-width: 1100px) {
  .hm-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-tile--xl { min-height: 440px; }
  .hm-sys__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hm-care, .hm-head { grid-template-columns: 1fr; align-items: start; }
  .hm-build__grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .hm-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .4rem; }
  .hm-steps li { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: .6rem .4rem; }
  .hm-steps li.is-on { transform: none; }
  .hm-steps i { grid-row: auto; }
  .hm-steps span { display: none; }
  .hm-steps b { font-size: .85rem; }
  .hm-kpi__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-kpi__logo { grid-column: 1 / -1; justify-self: center; border: 0; padding: 0; }
}
@media (max-width: 760px) {
  .hm-bento { grid-template-columns: 1fr; }
  .hm-tile--xl, .hm-tile--wide { grid-column: auto; grid-row: auto; min-height: 340px; }
  .hm-sys__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-care__list { grid-template-columns: 1fr; }
  .hm-build { height: 300vh; }
  .hm-build__stick { align-items: flex-start; padding-top: 84px; }
  .hm-build .h2 { font-size: 2rem; }
  .hm-build .eyebrow { display: none; }
  .hm-steps { margin-top: .8rem; }
  .hm-steps i { width: 2.2rem; height: 2.2rem; font-size: .9rem; }
  .hm-steps b { font-size: .72rem; }
  .hmb-google { left: -2%; bottom: -16%; width: 78%; padding: .6rem .8rem; }
  .hmb-google b { font-size: .85rem; } .hmb-google span { font-size: .7rem; }
  .hmb-phone { right: -3%; width: 26%; min-width: 80px; }
  .hmb-live { right: 2%; top: -9%; font-size: .85rem; padding: .4rem .8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hm-tile__phone, .hm-topics .hm-float { animation: none; }
  .hm-build { height: auto; } .hm-build__stick { position: relative; height: auto; padding-block: 5rem; }
  .hmb-p { opacity: 1; transform: none; }
}

.hm-topics .lz-tb__fakt { top: 1.5rem; }

/* Parallax in bestehenden Bildbereichen: Bilder etwas größer, damit beim Verschieben keine Kante sichtbar wird */
.life__item img[data-par] { height: 124%; margin-top: -12%; }
.section__photo[data-par], .cta__photo[data-par], .call__photo[data-par] { height: 136% !important; top: -18% !important; }
.way__figure img[data-par] { height: 118%; margin-top: -9%; object-fit: cover; }
@media (max-width: 760px) {
  .hm-tile__phone { width: 22%; min-width: 74px; top: 6%; right: 5%; }
}

/* Hero-Zeile über der Überschrift: Punkt bleibt beim Umbruch vor dem Text */
@media (max-width: 760px) { .hero .eyebrow { display: block; text-align: center; } .hero .eyebrow .pulse-dot { display: inline-block; vertical-align: middle; margin: -.15em .5rem 0 0; } }