:root{--bg:#03070b;--panel:#0a131c;--text:#f7fbff;--muted:#aab7c4;--blue:#5eafe7;--red:#ef3e49;--line:rgba(255,255,255,.1);--shadow:0 28px 80px #0007}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 80% 5%,#0a2b421c,transparent 30%),linear-gradient(#03070b,#07111a 55%,#020509);color:var(--text);font:16px/1.58 Inter,system-ui,-apple-system,Segoe UI,sans-serif}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}.w{width:min(1220px,calc(100% - 40px));margin:auto}.topbar{height:34px;background:#010408;border-bottom:1px solid var(--line);color:#96a7b5;font-size:12px}.topbar .w{height:100%;display:flex;align-items:center;justify-content:space-between}nav{position:sticky;top:0;z-index:100;background:#02070cd9;backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}.nav{height:80px;display:flex;align-items:center;gap:28px}.logo{width:215px}.menu{margin-left:auto;display:flex;align-items:center;gap:21px;font-size:14px;color:#d0dae2}.dropdown{position:relative}.drop{display:none;position:absolute;top:29px;left:-15px;width:250px;padding:9px;background:#07111af7;border:1px solid var(--line);border-radius:17px;box-shadow:var(--shadow)}.drop a{display:block;padding:10px 12px;border-radius:10px}.drop a:hover{background:#ffffff0d}.btn{display:inline-flex;align-items:center;justify-content:center;padding:13px 19px;border:1px solid #62b7ee55;border-radius:999px;font-weight:800;transition:.2s;gap:8px}.btn:hover{transform:translateY(-2px)}.primary{background:linear-gradient(135deg,#0d7fcb,#61b7ed)}.ghost{background:#ffffff05;border-color:var(--line)}.red{background:linear-gradient(135deg,#c92531,#f04b56);border-color:#ef3e49}.mobile{display:none;margin-left:auto;width:44px;height:44px;border-radius:13px;border:1px solid var(--line);background:#ffffff08;color:#fff;font-size:22px}.kicker{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--blue);font-weight:800}.hero{min-height:700px;display:flex;align-items:center;position:relative;overflow:hidden}.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#02060af5 0%,#02070cdd 40%,#02070c50 69%,#02070c20),var(--hero) center/cover}.hero-home:before{background:linear-gradient(90deg,rgba(2,6,10,.94) 0%,rgba(2,7,12,.76) 30%,rgba(2,7,12,.34) 53%,rgba(2,7,12,.08) 75%,rgba(2,7,12,.02) 100%),url("home-website.webp") center center/cover no-repeat}.hero:after{content:"";position:absolute;inset:auto 0 0;height:145px;background:linear-gradient(transparent,#03070b)}.hero .w{position:relative;z-index:2}.hero-copy{max-width:800px;padding:95px 0 115px}.hero h1{font-size:clamp(50px,6vw,84px);line-height:.98;letter-spacing:-.055em;margin:16px 0 24px}.hero h1 span{color:var(--blue)}.hero p{font-size:20px;color:#d3dde5;max-width:690px}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}section{padding:100px 0}.section-head{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:42px}.section-head h2{font-size:clamp(38px,4.2vw,58px);line-height:1.04;letter-spacing:-.045em;margin:8px 0 0}.section-head p{max-width:590px;color:var(--muted);margin:0}.grid5{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.card{background:linear-gradient(155deg,#0f1a24,#071018);border:1px solid var(--line);border-radius:24px;overflow:hidden;box-shadow:0 18px 50px #0003}.card .photo{height:170px;background-size:cover;background-position:center}.card .body{padding:24px}.card h3{font-size:21px;margin:0 0 9px}.card p{color:var(--muted);font-size:14px;margin:0 0 15px}.link{font-size:13px;font-weight:800}.band{padding:0;background:linear-gradient(110deg,#06111b,#0c293f)}.band-in{display:grid;grid-template-columns:1fr 1fr;min-height:610px}.band-image{background:linear-gradient(90deg,transparent,#06111bd9),var(--band) center/cover}.band-copy{padding:78px 45px 78px 58px;align-self:center}.band h2{font-size:clamp(42px,4.8vw,64px);line-height:1;letter-spacing:-.045em;margin:10px 0 18px}.band h2 span{color:#ff5863}.band p{color:#c5d0d9}.benefits{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin:26px 0}.benefit{padding:17px;border:1px solid #ffffff20;border-radius:16px;background:#0003}.benefit strong{display:block;margin-bottom:4px}.benefit span{font-size:13px;color:var(--muted)}.content{max-width:890px}.content h2{font-size:38px;letter-spacing:-.04em;margin:44px 0 13px}.content h3{font-size:24px;margin:32px 0 8px}.content p,.content li{color:#bbc6cf}.legalnote{font-size:12px;color:#91a1ae}.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.step{padding:24px 18px;border-top:1px solid #5eafe744}.step small{color:var(--blue);letter-spacing:.14em}.step h4{font-size:20px;margin:28px 0 8px}.step p{color:var(--muted);font-size:14px}.cta-sec{padding:70px 0 110px}.cta-box{text-align:center;padding:68px 28px;border:1px solid #5eafe733;border-radius:32px;background:radial-gradient(circle at 50% 0,#2d93d326,transparent 43%),linear-gradient(#0a1721,#050b10);box-shadow:var(--shadow)}.cta-box h2{font-size:clamp(42px,5vw,66px);line-height:1;letter-spacing:-.05em;margin:10px 0 17px}.cta-box p{max-width:720px;margin:0 auto;color:var(--muted);font-size:18px}.socials{position:fixed;right:17px;top:39%;z-index:90;display:grid;gap:9px}.socials a{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;color:#fff;font-weight:900;box-shadow:0 12px 35px #0007}.ig{background:linear-gradient(135deg,#833ab4,#fd1d1d,#fcb045)}.fb{background:#1877f2}.wa{background:#25d366}.ph{background:#1587d2}.form{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:25px}.full{grid-column:1/-1}.form label{font-size:12px;color:#aab7c4;display:block;margin-bottom:6px}.form input,.form textarea,.form select{width:100%;padding:14px 15px;border:1px solid var(--line);border-radius:14px;background:#ffffff08;color:#fff;font:inherit}.form textarea{min-height:150px}footer{border-top:1px solid var(--line);padding:38px 0 45px;color:#94a4b1;font-size:13px}.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:32px}.footer-grid img{width:185px}.footer-title{font-weight:800;color:#fff;margin-bottom:9px}.footer-grid a{display:block;margin:5px 0}.copyright{margin-top:28px;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}@media(max-width:1120px){.grid5{grid-template-columns:repeat(3,1fr)}}@media(max-width:950px){.mobile{display:block}.menu{display:none;position:absolute;top:76px;left:13px;right:13px;margin:0;padding:14px;border:1px solid var(--line);border-radius:18px;background:#07111af8;flex-direction:column;align-items:stretch}.menu.open{display:flex}.band-in{grid-template-columns:1fr}.band-image{min-height:350px}.band-copy{padding:55px 22px 65px}.grid4,.steps{grid-template-columns:1fr 1fr}.footer-grid{grid-template-columns:1fr 1fr}}@media(max-width:650px){.w{width:min(100% - 26px,1220px)}.topbar{display:none}.nav{height:70px}.logo{width:176px}.grid5,.grid4,.grid3,.grid2,.steps,.benefits,.form,.footer-grid{grid-template-columns:1fr}.full{grid-column:auto}.section-head{display:block}.section-head p{margin-top:17px}.hero{min-height:630px}.hero h1{font-size:47px}.socials{top:auto;bottom:12px;right:10px;display:flex}}


/* =========================================================
   SITECS – NUR HELLE FARBVARIANTE
   Ausschließlich Farbflächen/Textfarben geändert.
   Layout, Bilder, Größen, Abstände und Positionen unverändert.
   ========================================================= */

:root{
  --bg:#f5f7f9;
  --panel:#ffffff;
  --text:#132735;
  --muted:#667987;
  --line:rgba(19,39,53,.12);
  --shadow:0 28px 80px rgba(25,54,73,.12);
}

body{
  background:#f5f7f9 !important;
  color:#132735 !important;
}

/* obere Informationsleiste */
.topbar{
  background:#eef2f5 !important;
  border-bottom-color:rgba(19,39,53,.10) !important;
  color:#657986 !important;
}

/* Navigation: nur Hintergrund/Textfarbe */
nav{
  background:rgba(255,255,255,.94) !important;
  border-bottom-color:rgba(19,39,53,.10) !important;
}
.menu{color:#334c5c !important}
.drop{
  background:#ffffff !important;
  border-color:rgba(19,39,53,.12) !important;
}
.drop a:hover{background:#eef4f7 !important}
.mobile{
  background:#ffffff !important;
  color:#132735 !important;
  border-color:rgba(19,39,53,.12) !important;
}

/* Hero-Bild, Größe und Position bleiben exakt original.
   Nur der bisher dunkle Lesbarkeitsverlauf wird hell. */
.hero:before{
  background:
    linear-gradient(
      90deg,
      rgba(245,247,249,.97) 0%,
      rgba(245,247,249,.88) 40%,
      rgba(245,247,249,.45) 69%,
      rgba(245,247,249,.12)
    ),
    var(--hero) center/cover !important;
}

.hero:after{
  background:linear-gradient(transparent,#f5f7f9) !important;
}

.hero h1{color:#132735 !important}
.hero h1 span{color:var(--blue) !important}
.hero p{color:#415a69 !important}

/* Buttons: Form/Größe unverändert */
.ghost{
  background:rgba(255,255,255,.82) !important;
  color:#132735 !important;
  border-color:rgba(19,39,53,.14) !important;
}

/* normale Seitenbereiche */
section{background-color:transparent}
.section-head h2,
.card h3,
.content h2,
.content h3,
.step h4,
.cta-box h2{
  color:#132735 !important;
}
.section-head p,
.card p,
.content p,
.content li,
.step p,
.cta-box p{
  color:#667987 !important;
}

/* Karten: nur dunkel -> weiß */
.card{
  background:#ffffff !important;
  border-color:rgba(19,39,53,.12) !important;
  box-shadow:0 18px 50px rgba(25,54,73,.08) !important;
}

/* Service-Center: Struktur/Bild bleiben original,
   nur dunkle Grundflächen werden hell */
.band{
  background:#eaf1f5 !important;
}
.band-image{
  background:
    linear-gradient(90deg,transparent,rgba(234,241,245,.82)),
    var(--band) center/cover !important;
}
.band h2{color:#132735 !important}
.band p{color:#566d7b !important}
.benefit{
  background:rgba(255,255,255,.70) !important;
  border-color:rgba(19,39,53,.12) !important;
}
.benefit strong{color:#132735 !important}
.benefit span{color:#667987 !important}

/* CTA: nur dunkle Fläche hell */
.cta-box{
  background:
    radial-gradient(circle at 50% 0,rgba(45,147,211,.12),transparent 43%),
    linear-gradient(#ffffff,#f1f5f7) !important;
  border-color:rgba(45,147,211,.18) !important;
}

/* Formulare */
.form label{color:#667987 !important}
.form input,
.form textarea,
.form select{
  background:#ffffff !important;
  color:#132735 !important;
  border-color:rgba(19,39,53,.12) !important;
}

/* Footer */
footer{
  background:#eef2f5 !important;
  color:#667987 !important;
  border-top-color:rgba(19,39,53,.10) !important;
}
.footer-title{color:#132735 !important}
.copy{border-top-color:rgba(19,39,53,.10) !important}

/* Mobiles Menü: nur Farbe */
@media(max-width:950px){
  .menu{
    background:#ffffff !important;
    border-color:rgba(19,39,53,.12) !important;
  }
  .dropdown .drop{
    background:#f4f7f9 !important;
  }
}


/* =========================================================
   STARTSEITE: TEXT LINKS – SMART-HOME-BILD RECHTS
   ========================================================= */
.hero-split::before,
.hero-split::after{
  display:none !important;
}

.hero-split{
  background:#f5f7f9 !important;
  min-height:690px;
}

.hero-split > .w{
  display:grid !important;
  grid-template-columns:minmax(0,44%) minmax(0,56%);
  align-items:center;
  gap:44px;
  position:relative;
  z-index:2;
}

.hero-split .hero-copy{
  max-width:680px !important;
  padding:92px 0 110px !important;
}

.hero-split .hero-copy h1{
  font-size:clamp(48px,5.2vw,74px) !important;
  line-height:.99 !important;
}

.hero-split .hero-copy p{
  max-width:620px !important;
}

.hero-picture{
  width:100%;
  height:610px;
  overflow:hidden;
  border-radius:28px;
  background:#dce6ec;
  border:1px solid rgba(19,39,53,.10);
  box-shadow:0 28px 80px rgba(21,57,82,.16);
}

.hero-picture img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  display:block;
}

@media(max-width:1050px){
  .hero-split > .w{
    grid-template-columns:minmax(0,47%) minmax(0,53%);
    gap:28px;
  }
  .hero-picture{height:540px}
  .hero-split .hero-copy h1{font-size:clamp(44px,5vw,64px) !important}
}

@media(max-width:820px){
  .hero-split{min-height:auto;padding-bottom:28px}
  .hero-split > .w{grid-template-columns:1fr !important;gap:0}
  .hero-split .hero-copy{padding:68px 0 34px !important;max-width:none !important}
  .hero-picture{height:440px;border-radius:22px}
}

@media(max-width:560px){
  .hero-picture{height:330px;border-radius:18px}
  .hero-split .hero-copy h1{font-size:46px !important}
}


/* =========================================================
   KORREKTUR: Startseitenbild auf Desktop wirklich RECHTS
   ========================================================= */
header.hero.hero-home.hero-split{
  background:#f5f7f9 !important;
  min-height:690px !important;
  display:flex !important;
  align-items:center !important;
}

header.hero.hero-home.hero-split::before,
header.hero.hero-home.hero-split::after{
  display:none !important;
  content:none !important;
}

header.hero.hero-home.hero-split > .w{
  width:min(1320px,calc(100% - 50px)) !important;
  display:grid !important;
  grid-template-columns:minmax(0,43%) minmax(0,57%) !important;
  align-items:center !important;
  gap:48px !important;
}

header.hero.hero-home.hero-split .hero-copy{
  max-width:none !important;
  width:100% !important;
  padding:78px 0 88px !important;
  margin:0 !important;
}

header.hero.hero-home.hero-split .hero-copy h1{
  font-size:clamp(46px,4.6vw,70px) !important;
  line-height:1.00 !important;
}

header.hero.hero-home.hero-split .hero-picture{
  display:block !important;
  width:100% !important;
  height:570px !important;
  margin:34px 0 !important;
  overflow:hidden !important;
  border-radius:28px !important;
  background:#dce6ec !important;
  border:1px solid rgba(19,39,53,.10) !important;
  box-shadow:0 28px 70px rgba(21,57,82,.16) !important;
}

header.hero.hero-home.hero-split .hero-picture img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
}

@media(max-width:900px){
  header.hero.hero-home.hero-split > .w{
    grid-template-columns:1fr !important;
    gap:0 !important;
  }

  header.hero.hero-home.hero-split .hero-copy{
    padding:60px 0 28px !important;
  }

  header.hero.hero-home.hero-split .hero-picture{
    height:420px !important;
    margin:0 0 34px !important;
  }
}

@media(max-width:560px){
  header.hero.hero-home.hero-split .hero-picture{
    height:310px !important;
    border-radius:20px !important;
  }
}


/* =========================================================
   FINAL: STARTSEITENBILD VISUELL INTEGRIERT
   Nur Darstellung des rechten Hausbildes geändert.
   Sonst bleibt die Website unverändert.
   ========================================================= */

header.hero.hero-home.hero-split > .w{
  width:min(1450px,calc(100% - 40px)) !important;
  grid-template-columns:minmax(0,42%) minmax(0,58%) !important;
  gap:20px !important;
}

header.hero.hero-home.hero-split .hero-picture{
  width:100% !important;
  height:620px !important;
  margin:24px 0 !important;

  background-image:url("home-website.webp") !important;
  background-size:contain !important;
  background-position:center right !important;
  background-repeat:no-repeat !important;
  background-color:transparent !important;

  border:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
}

@media(max-width:900px){
  header.hero.hero-home.hero-split > .w{
    grid-template-columns:1fr !important;
    gap:0 !important;
  }

  header.hero.hero-home.hero-split .hero-picture{
    height:430px !important;
    margin:0 0 28px !important;
    background-position:center center !important;
    background-size:contain !important;
  }
}

@media(max-width:560px){
  header.hero.hero-home.hero-split .hero-picture{
    height:310px !important;
  }
}
/* SERVICE CENTER – BILD LINKS */

.band-image {
    min-height: 0 !important;

    background-image: url("service-center-2.webp") !important;
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;

    aspect-ratio: 1 / 1 !important;
    border-radius: 24px !important;
}

.band-in {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 60px !important;
    align-items: center !important;
}

@media (max-width: 1000px) {

    .band-in {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }

    .band-image {
        width: 100% !important;
        min-height: 0 !important;
        aspect-ratio: 1 / 1 !important;
        background-size: contain !important;
        background-position: center !important;
    }
}
/* Service Center Button blau */
.band-copy .btn.red {
    background: #55afe8 !important;
    border-color: #55afe8 !important;
    color: #08263a !important;
}

/* Beim Darüberfahren mit der Maus */
.band-copy .btn.red:hover {
    background: #349ddd !important;
    border-color: #349ddd !important;
}
/* Hero-Bild wieder rechts neben dem Text */
header.hero.hero-home.hero-split .hero-picture {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 600px;
}

/* Klickflächen dürfen das Layout nicht verändern */
header.hero.hero-home.hero-split .hero-hotspot {
    position: absolute !important;
    display: block !important;
    z-index: 20;
}
/* Klickflächen auf den Icons im Startseitenbild */
.hero-hotspot {
    width: 9%;
    aspect-ratio: 1 / 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    cursor: pointer;
}

/* Alarm */
.hotspot-alarm {
    left: 22%;
    top: 16%;
}

/* Brand */
.hotspot-brand {
    left: 56%;
    top: 11%;
}

/* Video */
.hotspot-video {
    left: 11.5%;
    top: 47%;
}

/* Zutritt */
.hotspot-zutritt {
    left: 85%;
    top: 22%;
}

/* Automation */
.hotspot-automation {
    left: 84%;
    top: 82%;
}
/* Icons als klickbar erkennbar machen */
.hero-hotspot {
    cursor: pointer;
    border-radius: 50%;
    animation: hotspotPulse 2.5s ease-in-out infinite;
    transition:
        transform 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}

/* Dezentes Pulsieren */
@keyframes hotspotPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(41, 153, 230, 0);
    }

    50% {
        box-shadow: 0 0 0 10px rgba(41, 153, 230, 0.22);
    }
}

/* Reaktion beim Darüberfahren */
.hero-hotspot:hover {
  transform: translate(-50%, -50%) scale(1.10);
    background: rgba(41, 153, 230, 0.10);
    box-shadow: 0 0 0 8px rgba(41, 153, 230, 0.22);
    animation: none;
}
.hotspot-alarm {
    animation-delay: 0.3s;
}

.hotspot-brand {
    animation-delay: 0.6s;
}

.hotspot-video {
    animation-delay: 0s;
}

.hotspot-zutritt {
    animation-delay: 0.9s;
}

.hotspot-automation {
    animation-delay: 1.2s;
}
/* =========================================
   STARTSEITENBILD + HOTSPOTS RESPONSIV
   ========================================= */

header.hero.hero-home.hero-split .hero-picture {
    position: relative !important;

    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;

    background: none !important;
    border: none !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.hero-picture-img {
    display: block;
    width: 100%;
    height: auto;
}

/* Klickflächen relativ zum echten Bild */
.hero-hotspot {
    position: absolute !important;
    z-index: 20;

    width: 9%;
    aspect-ratio: 1 / 1;

    transform: translate(-50%, -50%);
    border-radius: 50%;
    cursor: pointer;
}

@media (max-width: 900px) {

    header.hero.hero-home.hero-split .hero-picture {
        height: auto !important;
        min-height: 0 !important;
    }

    .hero-picture-img {
        width: 100% !important;
        height: auto !important;
    }
}

@media (max-width: 560px) {

    header.hero.hero-home.hero-split .hero-picture {
        height: auto !important;
        min-height: 0 !important;
    }
}
/* Hero-Bild wieder sichtbar machen */
header.hero.hero-home.hero-split .hero-picture img.hero-picture-img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
}
/* HERO-BILD ZWINGEND SICHTBAR */
header.hero.hero-home.hero-split .hero-picture {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    background: none !important;
    overflow: visible !important;
}

header.hero.hero-home.hero-split .hero-picture .hero-picture-img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    position: relative !important;
    z-index: 1 !important;

    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;

    object-fit: contain !important;
}

/* =========================================
   LÖSUNGEN DROPDOWN – FINAL
   Klick auf „Lösungen“ öffnet/schließt das Menü.
   ========================================= */

.dropdown {
  position: relative !important;
}

.dropdown > .dropdown-toggle {
  cursor: pointer;
  white-space: nowrap;
}

/* Standard: geschlossen */
.dropdown .drop {
  display: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Desktop */
@media (min-width: 951px) {
  .dropdown .drop {
    position: absolute !important;
    top: 100% !important;
    left: -15px !important;
    margin-top: 0 !important;
    width: 250px !important;
    z-index: 99999 !important;
  }

  .dropdown.menu-open .drop {
    display: block !important;
  }
}

/* Handy / Hamburger */
@media (max-width: 950px) {
  .dropdown .drop {
    position: static !important;
    width: auto !important;
    margin-top: 7px !important;
    box-shadow: none !important;
  }

  .dropdown.menu-open .drop {
    display: block !important;
  }
}

/* Dropdown-Pfeil auf allen Seiten exakt gleich */
.dropdown-arrow {
    display: inline-block !important;

    width: 6px !important;
    height: 6px !important;

    border-right: 1.5px solid currentColor !important;
    border-bottom: 1.5px solid currentColor !important;

    font-size: 0 !important;

    margin-left: 6px !important;

    transform: rotate(45deg) translateY(-2px) !important;
    vertical-align: middle !important;
}
/* =========================================
   TIROLER FAMILIENBETRIEB – STARTSEITE
   ========================================= */

.family-intro {
    display: grid;
    grid-template-columns: minmax(280px, 0.9fr) minmax(320px, 1.1fr);
    gap: 48px;
    align-items: center;

    margin: 75px 0 90px;
}

.family-photo {
    overflow: hidden;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 18px 45px rgba(19, 39, 53, 0.10);

    max-width: 400px;
}

.family-photo img {
    display: block;
    width: 100%;
    height: 320px;
    object-fit: cover;
    object-position: center;
}

.family-copy .kicker {
    margin-bottom: 14px;
}

.family-copy h3 {
    margin: 0 0 18px;
    font-size: clamp(28px, 2.2vw, 40px);
    line-height: 1.08;
    color: #132735;
}

.family-copy strong {
    display: block;
    margin-bottom: 14px;

    font-size: 21px;
    color: #2d93e6;
}

.family-copy p {
    margin: 0;
    max-width: 620px;
    font-size: 17px;
    line-height: 1.7;
    color: #667987;
}


/* Tablet / Handy */
@media (max-width: 900px) {

    .family-intro {
        grid-template-columns: 1fr;
        gap: 26px;
        margin: 32px 0 38px;
    }

    .family-photo {
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
    }

    .family-photo img {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        object-fit: cover;
    }

    .family-copy h3 {
        font-size: 30px;
    }

    .family-copy strong {
        font-size: 19px;
    }
}

/* =========================================
   ALARMANLAGEN
   ========================================= */

.alarm-hero {
    background: #f5f7f9;
    padding: 25px 0 60px;
}

.alarm-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    align-items: center;
    gap: 45px;
}

.alarm-hero .hero-copy {
    padding: 40px 0 10px;
}

.alarm-hero .hero-copy h1 {
    margin: 10px 0 24px;
    font-size: clamp(50px, 4.2vw, 72px);
    line-height: 1.02;
}

.alarm-hero .hero-copy h1 span {
    color: #5fa8e8;
}

.alarm-hero .hero-copy p {
    max-width: 680px;
    font-size: 19px;
    line-height: 1.6;
}

.alarm-hero-visual {
    overflow: hidden;
}

.alarm-hero-visual img {
    display: block;
    width: 100%;
    max-width: 720px;
    height: auto;
    object-fit: contain;
    margin: 0 auto;
}


/* Schutzkarten */

.alarm-solutions {
    padding: 1px 0 60px;
}

.alarm-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 36px;
}

.alarm-card {
    background: #fff;
    border: 1px solid rgba(19, 39, 53, 0.08);
    border-radius: 24px;
    padding: 34px 28px;
    box-shadow: 0 18px 45px rgba(19, 39, 53, 0.08);
}

.alarm-card h3 {
    margin: 0 0 14px;
    font-size: 24px;
}

.alarm-card p {
    margin: 0;
    line-height: 1.6;
}


/* Planung und Integration */

.alarm-integration {
    padding: 60px 0 80px;
}

.alarm-integration-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: start;
}

.alarm-integration-copy h2 {
    margin: 10px 0 22px;
    font-size: clamp(34px, 3vw, 52px);
    line-height: 1.08;
}

.alarm-integration-copy p {
    max-width: 620px;
    line-height: 1.7;
}

.alarm-functions h3 {
    margin-top: 8px;
    font-size: 24px;
}

.alarm-functions ul {
    list-style: none;
    padding: 0;
    margin: 24px 0 0;
}

.alarm-functions li {
    position: relative;
    padding-left: 30px;
    margin: 14px 0;
    line-height: 1.5;
}

.alarm-functions li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: #2d93e6;
    font-weight: 800;
}


/* CTA */

.alarm-cta {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    align-items: center;

    margin-top: 70px;
    padding: 30px 34px;

    border: 1px solid rgba(45, 147, 230, 0.25);
    border-radius: 22px;
    background: rgba(45, 147, 230, 0.05);
}

.alarm-cta h3 {
    margin: 8px 0 8px;
    font-size: 28px;
}

.alarm-cta p {
    margin: 0;
    max-width: 650px;
}


/* Tablet / Handy */

@media (max-width: 900px) {

    .alarm-hero {
        padding-top: 30px;
    }

    .alarm-hero-grid {
        grid-template-columns: 1fr;
    }

    .alarm-hero .hero-copy {
        padding: 25px 0 20px;
    }

    .alarm-hero .hero-copy h1 {
        font-size: clamp(42px, 12vw, 62px);
    }

    .alarm-hero-visual {
        min-height: 0;
        border-radius: 20px;
        overflow: hidden;
    }

    .alarm-hero-visual img {
        height: auto;
        aspect-ratio: 16 / 10;
    }

    .alarm-cards {
        grid-template-columns: 1fr;
    }

    .alarm-integration-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .alarm-cta {
        flex-direction: column;
        align-items: flex-start;
    }

    .alarm-cta .actions {
        width: 100%;
    }
}
/* =========================================
   BRANDMELDEANLAGEN
   ========================================= */

.brand-hero {
  background: #f5f7f9;
  padding: 25px 0 20px;
}

.brand-hero-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.25fr;
  align-items: center;
  gap: 40px;
}

.brand-hero .hero-copy {
  padding: 40px 10px;
}

.brand-hero .hero-copy h1 {
  margin: 10px 0 24px;
  font-size: clamp(50px, 4.2vw, 72px);
  line-height: 1.02;
}

.brand-hero .hero-copy h1 span {
  display: block;
  color: #5fa8e8;
}

.brand-hero .hero-copy p {
  max-width: 680px;
  font-size: 19px;
  line-height: 1.6;
}

.brand-hero-visual {
  overflow: hidden;
}

.brand-hero-visual img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.brand-hero + section {
    padding-top: 45px !important;
    padding-bottom: 20px !important;
}
@media (max-width: 900px) {
  .brand-hero {
    padding: 20px 0 35px;
  }

  .brand-hero-grid {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .brand-hero .hero-copy {
    padding: 20px 10px 0;
  }

  .brand-hero .hero-copy h1 {
    font-size: clamp(42px, 11vw, 60px);
  }

  .brand-hero-visual img {
    width: 100%;
  }
}
/* ==========================================
   BRANDMELDEANLAGEN – BERATUNGSBOX
========================================== */

.brand-cta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;

    margin: 25px 0 35px;
    padding: 30px 34px;

    background: rgba(95, 168, 232, 0.07);
    border: 1px solid rgba(95, 168, 232, 0.35);
    border-radius: 22px;
}

.brand-cta-copy {
    flex: 1;
}

.brand-cta h3 {
    margin: 8px 0 8px;
    font-size: 28px;
    color: #092b40;
}

.brand-cta p {
    margin: 0;
    max-width: 650px;
    line-height: 1.6;
}

.brand-cta .actions {
    flex-shrink: 0;
}

@media (max-width: 900px) {
    .brand-cta {
        flex-direction: column;
        align-items: flex-start;
        gap: 22px;
    }

    .brand-cta .actions {
        width: 100%;
    }
}
/* =========================================
   VIDEOÜBERWACHUNG
   ========================================= */

.video-hero {
    background: #f5f7f9;
    padding: 25px 0 20px;
}

.video-hero-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.25fr;
    align-items: center;
    gap: 30px;
}

.video-hero .hero-copy {
    padding: 40px 10px;
}

.video-hero .hero-copy h1 {
    margin: 10px 0 24px;
    font-size: clamp(50px, 4.2vw, 72px);
    line-height: 1.02;
}

.video-hero .hero-copy h1 span {
    display: block;
    color: #5fa8e8;
}

.video-hero .hero-copy p {
    max-width: 680px;
    font-size: 19px;
    line-height: 1.6;
}

.video-hero-visual {
    overflow: hidden;
}

.video-hero-visual img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.video-hero + section {
    padding-top: 20px !important;
}

@media (max-width: 900px) {

    .video-hero {
        padding: 20px 0 35px;
    }

    .video-hero-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .video-hero .hero-copy {
        padding: 20px 10px 0;
    }

    .video-hero .hero-copy h1 {
        font-size: clamp(42px, 11vw, 60px);
    }

    .video-hero-visual img {
        width: 100%;
    }
}
/* NUR Gebäudeautomation */
.building-hero .brand-hero-grid {
    grid-template-columns: 0.68fr 1.32fr;
}
/* LOXONE – nur Gebäudeautomation */

.loxone-partner {
    display: block;
    margin: 45px 0 40px;
    padding: 28px 34px;

    background: #fff;
    border: 1px solid rgba(15, 45, 65, 0.10);
    border-radius: 20px;
}

.loxone-partner-text {
    width: 100%;
}

.loxone-partner-text .kicker {
    margin-bottom: 10px;
}

.loxone-heading {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;

    margin: 0 0 10px;
    font-size: 24px;
    line-height: 1.2;
}

.loxone-inline-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.loxone-inline-logo img {
    width: 100px;
    height: auto;
    display: block;
    transition: transform 0.2s ease;
}

.loxone-inline-logo:hover img {
    transform: scale(1.04);
}

.loxone-partner-text p {
    margin: 0;
    color: #60788a;
    line-height: 1.6;
}

@media (max-width: 700px) {
    .loxone-partner {
        margin: 35px 0;
        padding: 24px;
    }

    .loxone-heading {
        font-size: 21px;
        gap: 9px;
    }

    .loxone-inline-logo img {
        width: 100px;
    }
}
/* Gebäudeautomation – Symbole der vier Funktionskarten */
.building-features .feature-icon {
  width: 52px;
  height: 52px;
  margin-bottom: 18px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 14px;
  background: rgba(64, 166, 231, 0.10);
}

.building-features .feature-icon svg {
  width: 30px;
  height: 30px;

  fill: none;
  stroke: #40a6e7;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.building-features .card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.building-features .card:hover {
  transform: translateY(-4px);
}

.building-features .card:hover .feature-icon {
  background: rgba(64, 166, 231, 0.16);
}
/* =========================================
   SITECS SERVICE CENTER
   ========================================= */

.service-hero {
    background: #f5f7f9;
    padding: 25px 0 20px;
}

.service-hero-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.15fr;
    align-items: center;
    gap: 40px;
}

.service-hero .hero-copy {
    padding: 40px 10px;
}

.service-hero .hero-copy h1 {
    margin: 10px 0 24px;
    font-size: clamp(50px, 4.2vw, 72px);
    line-height: 1.02;
}

.service-hero .hero-copy h1 span {
    display: block;
    color: #5fa8e8;
}

.service-hero .hero-copy p {
    max-width: 680px;
    font-size: 19px;
    line-height: 1.6;
}

.service-hero-visual {
    overflow: hidden;
}

.service-hero-visual img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.service-hero + section {
    padding-top: 15px !important;
}

@media (max-width: 900px) {
    .service-hero {
        padding: 20px 0 35px;
    }

    .service-hero-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .service-hero .hero-copy {
        padding: 20px 10px 0;
    }

    .service-hero .hero-copy h1 {
        font-size: clamp(42px, 11vw, 60px);
    }

    .service-hero-visual img {
        width: 100%;
    }
}
.service-highlight {
  display: block;
  font-size: 0.65em;
  line-height: 1.08;
  margin-top: 15px;
}
/* =========================================
   SERVICE CENTER – ABLAUF
   ========================================= */

.service-process .kicker {
    color: #5fa8e8;
}

.service-process-grid .card {
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}

.service-process-grid .card:hover {
    transform: translateY(-4px);
    border-color: rgba(95, 168, 232, 0.28);
    box-shadow: 0 18px 38px rgba(15, 45, 65, 0.10);
}

.service-step-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.service-step-icon {
    width: 54px;
    height: 54px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 14px;
    background: rgba(95, 168, 232, 0.10);
}

.service-step-icon svg {
    width: 30px;
    height: 30px;

    fill: none;
    stroke: #5fa8e8;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.service-step-number {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: #5fa8e8;
}

.service-benefit {
    margin-top: 55px;
    max-width: 980px;
}

.service-benefit h2 {
    margin: 8px 0 18px;
    font-size: clamp(30px, 3vw, 42px);
    line-height: 1.08;
}

.service-benefit p {
    margin: 0;
    max-width: 900px;
    font-size: 17px;
    line-height: 1.7;
    color: #60788a;
}

@media (max-width: 900px) {
    .service-benefit {
        margin-top: 40px;
    }
}
.service-benefit-intro {
  max-width: 900px;
  margin: 0 0 32px;
  font-size: 17px;
  line-height: 1.7;
  color: #60788a;
}

.service-benefit-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 60px;
  row-gap: 42px;
  margin-top: 32px;
}

.service-benefit-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.benefit-check {
  width: 34px;
  height: 34px;
  flex-shrink: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;
  background: rgba(95, 168, 232, 0.12);

  color: #5fa8e8;
  font-weight: 800;
  font-size: 18px;
}

.service-benefit-item h3 {
  margin: 2px 0 6px;
  font-size: 20px;
}

.service-benefit-item p {
  margin: 0;
  line-height: 1.6;
  color: #60788a;
}

@media (max-width: 800px) {
  .service-benefit-list {
    grid-template-columns: 1fr;
  }
}
/* =========================================
   LED4MEDIA HERO
   ========================================= */

.led4media-hero {
  background: #f5f7f9;
  padding: 25px 0 20px;
}

.led4media-hero-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.15fr;
  gap: 40px;
  align-items: center;
}

.led4media-hero-copy {
  padding: 20px 10px;
}

.led4media-hero-copy h1 {
  margin: 10px 0 24px;
  font-size: clamp(50px, 4.2vw, 72px);
  line-height: 1.02;
}

.led4media-hero-copy h1 span {
  display: block;
  color: #5fa8e8;
}

.led4media-hero-copy p {
  max-width: 680px;
  font-size: 19px;
  line-height: 1.6;
}

.led4media-hero-visual {
  overflow: hidden;
  border-radius: 18px;
}

.led4media-hero-visual video {
  display: block;
  width: 100%;
  height: 440px;
  object-fit: cover;
  border-radius: 18px;
}

@media (max-width: 900px) {
  .led4media-hero-visual video {
    height: auto;
    aspect-ratio: 16 / 9;
  }
}
/* =========================================
   LED4MEDIA – LÖSUNGEN & CTA
   ========================================= */

.led-solutions .kicker,
.led4media-cta .kicker {
  color: #5fa8e8;
}

/* Drei Lösungskarten */
.led-solutions-grid .card {
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.led-solutions-grid .card:hover {
  transform: translateY(-4px);
  border-color: rgba(95, 168, 232, 0.28);
  box-shadow: 0 18px 38px rgba(15, 45, 65, 0.10);
}

/* Blaue Icons */
.led-feature-icon {
  width: 56px;
  height: 56px;
  margin-bottom: 20px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 14px;
  background: rgba(95, 168, 232, 0.10);
}

.led-feature-icon svg {
  width: 31px;
  height: 31px;

  fill: none;
  stroke: #5fa8e8;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Unterer LED4MEDIA CTA */
.led4media-cta {
  margin-top: 70px;
  padding: 48px 54px;

  text-align: center;

  background: linear-gradient(
    135deg,
    rgba(95, 168, 232, 0.08),
    rgba(255, 255, 255, 0.95)
  );

  border: 1px solid rgba(95, 168, 232, 0.25);
  border-radius: 22px;
}

.led4media-cta h2 {
  margin: 10px auto 18px;
  font-size: clamp(34px, 3.6vw, 52px);
  line-height: 1.05;
}

.led4media-cta p {
  max-width: 850px;
  margin: 0 auto 28px;

  font-size: 18px;
  line-height: 1.65;
  color: #60788a;
}

.led4media-cta .actions {
  justify-content: center;
}


/* Mobile */
@media (max-width: 900px) {

  .led4media-cta {
    margin-top: 45px;
    padding: 34px 24px;
    text-align: left;
  }

  .led4media-cta .actions {
    justify-content: flex-start;
  }
}
/* =========================================
   LED4MEDIA – EINSATZBEREICHE
   ========================================= */

.led-applications {
  margin-top: 80px;
}

.led-applications .kicker {
  color: #5fa8e8;
}

.led-applications-grid {
  margin-top: 34px;
}

.led-applications-grid .card {
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.led-applications-grid .card:hover {
  transform: translateY(-4px);
  border-color: rgba(95, 168, 232, 0.28);
  box-shadow: 0 18px 38px rgba(15, 45, 65, 0.10);
}

.led-app-icon {
  width: 54px;
  height: 54px;
  margin-bottom: 18px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 14px;
  background: rgba(95, 168, 232, 0.10);
}

.led-app-icon svg {
  width: 30px;
  height: 30px;

  fill: none;
  stroke: #5fa8e8;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Abstand zum CTA darunter */
.led-applications + .led4media-cta {
  margin-top: 70px;
}

@media (max-width: 900px) {
  .led-applications {
    margin-top: 55px;
  }

  .led-applications + .led4media-cta {
    margin-top: 50px;
  }
}
/* =========================================
   LED4MEDIA – Bilder Einsatzbereiche
   ========================================= */

.led-use-image {
  width: 100%;
  height: 150px;
  margin-bottom: 18px;
  overflow: hidden;
  border-radius: 14px;
}

.led-use-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.led-applications-grid .card h3 {
  min-height: 58px;
}

.led-applications-grid .card .body {
  height: 100%;
}
/* =========================================
   LED4MEDIA – VERKAUF / VERMIETUNG / CONTENT
   ========================================= */

.led-services {
  margin-top: 85px;
}

.led-services .kicker {
  color: #5fa8e8;
}

.led-services-grid {
  margin-top: 34px;
}

.led-services-grid .card {
  position: relative;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.led-services-grid .card:hover {
  transform: translateY(-4px);
  border-color: rgba(95, 168, 232, 0.28);
  box-shadow: 0 18px 38px rgba(15, 45, 65, 0.10);
}


.led-services-grid h3 {
  margin-bottom: 14px;
}

.led-services + .led4media-cta {
  margin-top: 75px;
}

@media (max-width: 900px) {
  .led-services {
    margin-top: 60px;
  }

  .led-services + .led4media-cta {
    margin-top: 50px;
  }
}
/* LED4MEDIA Leistungs-Icons */

.led-service-icon {
  width: 54px;
  height: 54px;
  margin-bottom: 22px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 14px;
  background: rgba(95, 168, 232, 0.10);
}

.led-service-icon svg {
  width: 29px;
  height: 29px;

  fill: none;
  stroke: #5fa8e8;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Großes LED4MEDIA Bild */
.led-wide-image {
  width: 100%;
  margin: 35px 0 70px;
  overflow: hidden;
  border-radius: 24px;
}

.led-wide-image img {
  display: block;
  width: 100%;
  height: 420px;
  object-fit: cover;
}

/* Tablet / Smartphone */
@media (max-width: 900px) {
  .led-wide-image {
    margin: 25px 0 45px;
    border-radius: 18px;
  }

  .led-wide-image img {
    height: 280px;
  }
}
/* ========================================
   KONTAKTSEITE – HERO FINAL
   ======================================== */

.kontakt-hero {
    min-height: 0 !important;
    height: auto !important;
    padding: 25px 0 0 !important;
    margin: 0 !important;
    display: block !important;
}

.kontakt-hero > .w {
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.kontakt-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center;
}

.kontakt-hero .hero-copy {
    max-width: 650px;
    padding: 0 !important;
    margin: 0 !important;
}

.kontakt-hero-image {
    width: 100%;
    margin: 0 !important;
}

.kontakt-hero-image img {
    display: block;
    width: 100%;
    height: 430px;
    object-fit: cover;
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(15, 40, 60, 0.10);
}

/* Bereich direkt unter dem Hero */
.kontakt-hero + #kontakt {
    padding-top: 35px !important;
    margin-top: 0 !important;
}

#kontakt {
    margin-top: 0 !important;
}


/* MOBILE */
@media (max-width: 900px) {

    .kontakt-hero {
        padding: 25px 0 0 !important;
    }

    .kontakt-hero-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .kontakt-hero-image img {
        height: 320px;
    }

    .kontakt-hero + #kontakt {
        padding-top: 35px !important;
    }
}

/* ========================================
   KONTAKTFORMULAR – LIVE-VORBEREITUNG
   ======================================== */
.form-hp{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.form-privacy{margin:12px 0 0;font-size:13px;color:#667987}
.form-privacy a{text-decoration:underline;text-underline-offset:2px}
.form-feedback{display:none;margin-top:14px;padding:12px 14px;border-radius:12px;font-size:14px}
.form-feedback.is-success{display:block;background:rgba(37,211,102,.10);border:1px solid rgba(37,160,90,.25);color:#245f3b}
.form-feedback.is-error{display:block;background:rgba(239,62,73,.08);border:1px solid rgba(200,55,65,.20);color:#8a2930}

/* =========================================
   MOBILE FINISH – FINAL
   ========================================= */
@media (max-width: 950px) {
  .menu {
    max-height: calc(100vh - 95px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .menu > a,
  .dropdown > .dropdown-toggle {
    width: 100%;
    padding: 11px 10px;
  }
  .dropdown .drop a {
    padding: 11px 14px;
  }
}

@media (max-width: 900px) {
  .led4media-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 25px;
  }
  .led4media-hero-copy {
    padding: 20px 0 5px;
  }
  .led4media-hero-copy h1 {
    font-size: clamp(42px, 11vw, 58px);
  }
}

@media (max-width: 650px) {
  section { padding: 70px 0; }
  .actions .btn { max-width: 100%; }
  .cta-box { padding: 50px 20px; }
  .socials { z-index: 95; }
}

@media (max-width: 430px) {
  .hero h1 { font-size: 43px; }
  .actions { gap: 10px; }
  .actions .btn { width: 100%; }
  .kontakt-hero-image img { height: 260px; }
}
.family-names {
  padding: 10px 15px;
  text-align: center;
}

.family-names strong {
  display: block;
  font-size: 12px;
  color: #132c3d;
  font-weight: 700;
}
.agb-download {
    margin-top: 28px;
}

.agb-download a {
    color: #299be6;
    font-weight: 700;
    text-decoration: none;
}

.agb-download a:hover {
    text-decoration: underline;
}