/* ============================================================
   SU-IT Responsive System
   One canonical responsive layer for all public pages
   Desktop: > 1320px
   Compact / Drawer: <= 1320px
   Mobile: <= 760px
   ============================================================ */


/* ============================================================
   GLOBAL SAFETY
   ============================================================ */

html,
body{
  max-width:100%;
}

img,
video,
svg{
  max-width:100%;
}

@media(max-width:1320px){

  html,
  body{
    overflow-x:hidden;
  }


  /* ==========================================================
     HEADER
     ========================================================== */

  .topbar{
    position:sticky !important;
    top:0 !important;
    z-index:5000 !important;

    background:rgba(255,255,255,.88) !important;

    -webkit-backdrop-filter:
      blur(18px) saturate(135%) !important;

    backdrop-filter:
      blur(18px) saturate(135%) !important;

    border-bottom:
      1px solid rgba(55,130,165,.12) !important;
  }

  .topbar .navrow{
    width:min(calc(100% - 32px),1240px) !important;

    height:76px !important;
    min-height:76px !important;

    margin:0 auto !important;
    padding:0 !important;

    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;

    align-items:center !important;

    gap:14px !important;

    overflow:visible !important;
  }

  .topbar .brand{
    display:flex !important;

    flex:0 0 auto !important;

    align-items:center !important;

    position:relative !important;

    z-index:5002 !important;
  }

  .topbar .brand img{
    display:block !important;

    width:150px !important;
    height:auto !important;

    max-height:58px !important;

    object-fit:contain !important;
  }


  /* Desktop navigation completely disabled here */

  .topbar .nav.primary,
  .topbar .nav.utility{
    display:none !important;
  }


  /* Hamburger */

  .topbar .mobileToggle{
    display:flex !important;

    width:46px !important;
    height:46px !important;

    min-width:46px !important;

    margin-left:auto !important;
    padding:0 !important;

    align-items:center !important;
    justify-content:center !important;

    border:0 !important;
    border-radius:14px !important;

    background:rgba(255,255,255,.42) !important;

    color:#234f68 !important;

    font-size:27px !important;
    line-height:1 !important;

    cursor:pointer !important;

    position:relative !important;

    z-index:6100 !important;

    -webkit-tap-highlight-color:transparent;
  }


  /* ==========================================================
     MOBILE / TABLET DRAWER
     ========================================================== */

  .topbar .navrow.mobile-open{
    height:76px !important;
    min-height:76px !important;

    position:relative !important;

    display:flex !important;
    flex-wrap:nowrap !important;

    overflow:visible !important;
  }


  /* Background dimmer */

  .topbar .navrow.mobile-open::before{
    content:"" !important;

    position:fixed !important;
    inset:0 !important;

    background:rgba(15,47,65,.12) !important;

    -webkit-backdrop-filter:blur(3px) !important;
    backdrop-filter:blur(3px) !important;

    z-index:5900 !important;
  }


  /* Main glass drawer */

  .topbar .navrow.mobile-open .nav.primary{
    display:flex !important;

    position:fixed !important;

    top:0 !important;
    right:0 !important;
    bottom:0 !important;

    width:min(84vw,390px) !important;
    height:100dvh !important;

    margin:0 !important;

    padding:
      max(92px,calc(env(safe-area-inset-top) + 76px))
      20px
      112px !important;

    flex-direction:column !important;
    flex-wrap:nowrap !important;

    align-items:stretch !important;
    justify-content:flex-start !important;

    gap:5px !important;

    overflow-x:hidden !important;
    overflow-y:auto !important;

    background:
      linear-gradient(
        150deg,
        rgba(245,252,255,.76) 0%,
        rgba(224,244,253,.66) 55%,
        rgba(242,250,254,.72) 100%
      ) !important;

    border-left:
      1px solid rgba(255,255,255,.78) !important;

    box-shadow:
      -20px 0 60px rgba(20,65,90,.16),
      inset 1px 0 0 rgba(255,255,255,.80) !important;

    -webkit-backdrop-filter:
      blur(25px) saturate(145%) !important;

    backdrop-filter:
      blur(25px) saturate(145%) !important;

    z-index:6000 !important;
  }


  .topbar .navrow.mobile-open
  .nav.primary > .navitem{
    display:block !important;

    width:100% !important;

    margin:0 !important;

    position:relative !important;
  }


  .topbar .navrow.mobile-open
  .nav.primary > .navitem > .navlink{
    display:flex !important;

    width:100% !important;
    min-height:50px !important;

    padding:12px 13px !important;

    align-items:center !important;
    justify-content:space-between !important;

    gap:10px !important;

    font-size:16px !important;
    font-weight:750 !important;
    line-height:1.25 !important;

    white-space:normal !important;

    color:#173f58 !important;

    background:rgba(255,255,255,.25) !important;

    border:
      1px solid rgba(255,255,255,.36) !important;

    border-radius:14px !important;

    box-shadow:none !important;
  }


  .topbar .navrow.mobile-open
  .nav.primary > .navitem.open > .navlink{
    background:rgba(255,255,255,.60) !important;

    border-color:
      rgba(255,255,255,.80) !important;

    box-shadow:
      0 8px 28px rgba(30,95,125,.08) !important;
  }


  /* Every submenu closed by default */

  .topbar .navrow.mobile-open
  .nav.primary .dropdown,

  .topbar .navrow.mobile-open
  .nav.primary .dropdown.mega{
    display:none !important;

    visibility:hidden !important;

    opacity:0 !important;
  }


  /* Only clicked menu opens */

  .topbar .navrow.mobile-open
  .nav.primary
  .navitem.open > .dropdown,

  .topbar .navrow.mobile-open
  .nav.primary
  .navitem.open > .dropdown.mega{
    display:block !important;

    position:static !important;

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

    margin:5px 0 8px !important;
    padding:7px !important;

    transform:none !important;

    visibility:visible !important;
    opacity:1 !important;

    pointer-events:auto !important;

    background:rgba(255,255,255,.28) !important;

    border:
      1px solid rgba(255,255,255,.52) !important;

    border-radius:15px !important;

    box-shadow:none !important;

    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
  }


  /* Hide giant desktop mega-menu intro inside drawer */

  .topbar .navrow.mobile-open
  .megaIntro{
    display:none !important;
  }


  .topbar .navrow.mobile-open
  .megaLinks{
    display:grid !important;

    width:100% !important;

    grid-template-columns:1fr !important;

    gap:2px !important;
  }


  .topbar .navrow.mobile-open
  .megaLinks a{
    display:block !important;

    width:100% !important;

    padding:10px 9px !important;

    border-radius:10px !important;

    background:transparent !important;

    color:#234f68 !important;
  }

  .topbar .navrow.mobile-open
  .megaLinks b{
    display:block !important;

    font-size:14px !important;
    line-height:1.25 !important;
  }

  .topbar .navrow.mobile-open
  .megaLinks small{
    display:block !important;

    margin-top:2px !important;

    font-size:11px !important;
    line-height:1.3 !important;

    color:#6c8999 !important;
  }


  /* Utility section at drawer bottom */

  .topbar .navrow.mobile-open
  .nav.utility{
    display:flex !important;

    position:fixed !important;

    right:0 !important;
    bottom:0 !important;

    width:min(84vw,390px) !important;

    margin:0 !important;

    padding:
      14px 20px
      calc(14px + env(safe-area-inset-bottom)) !important;

    flex-direction:row !important;
    flex-wrap:wrap !important;

    align-items:center !important;

    gap:8px !important;

    background:
      rgba(239,249,253,.76) !important;

    border-top:
      1px solid rgba(255,255,255,.78) !important;

    -webkit-backdrop-filter:
      blur(25px) saturate(145%) !important;

    backdrop-filter:
      blur(25px) saturate(145%) !important;

    z-index:6010 !important;
  }


  .topbar .navrow.mobile-open
  .nav.utility .navlink{
    display:flex !important;

    width:auto !important;

    min-height:42px !important;

    padding:0 10px !important;

    align-items:center !important;

    font-size:13px !important;
    font-weight:700 !important;

    color:#173f58 !important;
  }


  .topbar .navrow.mobile-open
  .nav.utility .iconAction{
    display:flex !important;

    width:42px !important;
    height:42px !important;

    align-items:center !important;
    justify-content:center !important;
  }


  /* Close hamburger above drawer */

  .topbar .navrow.mobile-open
  .mobileToggle{
    position:fixed !important;

    top:max(16px,env(safe-area-inset-top)) !important;
    right:18px !important;

    margin:0 !important;

    background:rgba(255,255,255,.62) !important;

    box-shadow:
      0 7px 24px rgba(30,90,120,.10) !important;

    z-index:6200 !important;
  }


  /* ==========================================================
     STANDARD PAGE HERO
     Used by Network, Cloud, Backup, Mobile, Voice, etc.
     ========================================================== */

  .pageHero{
    overflow:hidden !important;
  }

  .pageHero > .shell{
    width:min(calc(100% - 40px),1240px) !important;

    min-width:0 !important;

    margin:0 auto !important;
  }

  .pageHero h1{
    width:100% !important;
    max-width:900px !important;

    min-width:0 !important;

    overflow-wrap:normal !important;
    word-break:normal !important;
    hyphens:none !important;
  }

  .pageHero p,
  .pageHero .lead{
    max-width:760px !important;

    overflow-wrap:normal !important;
    word-break:normal !important;
  }


  /* ==========================================================
     SYSTEM HERO
     Infrastructure / Security / Workplace
     ========================================================== */

  .systemHero{
    overflow:hidden !important;
  }

  .systemHero .systemHeroShell{
    width:min(calc(100% - 40px),1240px) !important;

    grid-template-columns:minmax(0,1fr) !important;

    gap:24px !important;

    min-width:0 !important;
  }

  .systemHeroCopy,
  .systemHeroCopy > *{
    min-width:0 !important;

    max-width:100% !important;
  }

  .systemHeroCopy h1{
    width:100% !important;

    max-width:850px !important;

    overflow-wrap:normal !important;
    word-break:normal !important;
    hyphens:none !important;
  }

  .systemHeroGlass{
    width:100% !important;

    max-width:760px !important;
  }


  /* ==========================================================
     HOMEPAGE
     ========================================================== */

  body.homePage .hero.videoReady{
    overflow:hidden !important;
  }

  body.homePage .hero.videoReady .heroGrid{
    grid-template-columns:minmax(0,1fr) !important;

    gap:20px !important;

    min-height:0 !important;
  }

  body.homePage .hero.videoReady .heroCopy{
    min-width:0 !important;

    max-width:800px !important;
  }


  /* ==========================================================
     BUSINESS / SHOP
     ========================================================== */

  .shopHeroGrid,
  .cloudCommerce,
  .securityPreview,
  .businessSystemHeroShell{
    grid-template-columns:minmax(0,1fr) !important;
  }


  /* ==========================================================
     APPLE
     ========================================================== */

  .abHeroGrid{
    grid-template-columns:minmax(0,1fr) !important;
  }

}


/* ============================================================
   PHONE
   ============================================================ */

@media(max-width:760px){

  .shell{
    width:calc(100% - 28px) !important;
  }


  /* Header */

  .topbar .navrow{
    width:calc(100% - 28px) !important;

    height:72px !important;
    min-height:72px !important;
  }

  .topbar .brand img{
    width:142px !important;
  }

  .topbar .mobileToggle{
    width:44px !important;
    height:44px !important;
  }

  .topbar .navrow.mobile-open
  .nav.primary,

  .topbar .navrow.mobile-open
  .nav.utility{
    width:min(88vw,360px) !important;
  }


  /* Status notice */

  .sitePhaseNotice{
    padding:12px 0 !important;
  }

  .sitePhaseNotice .shell{
    width:calc(100% - 28px) !important;

    padding:15px 17px !important;

    border-radius:22px !important;
  }

  .sitePhaseNotice p{
    margin:0 !important;

    font-size:13px !important;
    line-height:1.45 !important;
  }


  /* ==========================================================
     HOMEPAGE HERO
     ========================================================== */

  body.homePage .hero.videoReady{
    padding:48px 0 55px !important;
  }

  body.homePage .hero.videoReady .heroGrid{
    width:calc(100% - 28px) !important;

    margin:0 auto !important;

    display:grid !important;

    grid-template-columns:minmax(0,1fr) !important;

    gap:24px !important;
  }

  body.homePage .hero.videoReady .heroCopy{
    width:100% !important;

    min-width:0 !important;

    padding:0 !important;
  }


  /* Homepage title ALWAYS visible */

  body.homePage .heroTitle{
    display:block !important;

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

    margin:8px 0 18px !important;

    font-size:clamp(42px,12vw,54px) !important;
    line-height:1.02 !important;

    letter-spacing:-.05em !important;

    opacity:1 !important;
    visibility:visible !important;

    transform:none !important;

    animation:none !important;
  }

  body.homePage .heroTitle .heroLine{
    display:block !important;

    width:100% !important;

    white-space:normal !important;

    font-size:inherit !important;
    line-height:inherit !important;

    opacity:1 !important;
    visibility:visible !important;

    transform:none !important;
  }

  body.homePage .heroTitle
  .heroWord{
    display:inline !important;

    white-space:normal !important;

    opacity:1 !important;
    visibility:visible !important;

    background:none !important;

    -webkit-background-clip:border-box !important;
    background-clip:border-box !important;
  }

  body.homePage .heroTitle
  .heroLetter{
    display:inline !important;

    opacity:1 !important;
    visibility:visible !important;

    transform:none !important;

    animation:none !important;

    background:none !important;

    -webkit-background-clip:border-box !important;
    background-clip:border-box !important;

    -webkit-text-fill-color:currentColor !important;
  }

  body.homePage .heroTitle
  .tone1 .heroLetter{
    color:#173f58 !important;
  }

  body.homePage .heroTitle
  .tone2 .heroLetter{
    color:#276f99 !important;
  }

  body.homePage .heroTitle
  .tone3 .heroLetter{
    color:#35a4d5 !important;
  }

  body.homePage .heroTitle
  .tone4 .heroLetter{
    color:#67cceb !important;
  }


  body.homePage .hero.videoReady
  .heroCopy .lead{
    width:100% !important;

    max-width:100% !important;

    font-size:17px !important;
    line-height:1.55 !important;
  }

  body.homePage .heroActions{
    display:grid !important;

    width:100% !important;

    grid-template-columns:1fr !important;

    gap:10px !important;
  }

  body.homePage .heroActions a{
    width:100% !important;

    min-height:48px !important;

    justify-content:center !important;
  }

  body.homePage .heroGlassNote{
    width:100% !important;

    max-width:100% !important;

    margin:0 !important;

    padding:20px !important;

    border-radius:24px !important;
  }


  /* ==========================================================
     STANDARD PRODUCT PAGE HERO
     ========================================================== */

  .pageHero{
    padding:44px 0 54px !important;
  }

  .pageHero > .shell{
    width:calc(100% - 28px) !important;

    min-width:0 !important;
  }

  .pageHero .crumbs{
    margin-bottom:22px !important;
  }

  .pageHero .k{
    max-width:100% !important;
  }

  .pageHero h1{
    display:block !important;

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

    margin:15px 0 18px !important;

    font-size:clamp(40px,11.5vw,52px) !important;
    line-height:1.02 !important;

    letter-spacing:-.045em !important;

    white-space:normal !important;

    overflow-wrap:normal !important;
    word-break:normal !important;
    hyphens:none !important;
  }

  .pageHero h1 *,
  .pageHero h1 span{
    white-space:normal !important;

    overflow-wrap:normal !important;
    word-break:normal !important;
  }

  .pageHero > .shell > p:not(.k){
    width:100% !important;

    max-width:100% !important;

    font-size:17px !important;
    line-height:1.55 !important;

    overflow-wrap:normal !important;
    word-break:normal !important;
  }


  /* ==========================================================
     SYSTEM OVERVIEW HERO
     ========================================================== */

  .systemHero{
    padding:30px 0 45px !important;
  }

  .systemHero .systemHeroShell{
    width:calc(100% - 28px) !important;

    padding:24px 0 !important;

    display:grid !important;

    grid-template-columns:minmax(0,1fr) !important;

    gap:22px !important;
  }

  .systemHeroCopy{
    width:100% !important;

    min-width:0 !important;
  }

  .systemHeroCopy h1{
    width:100% !important;
    max-width:100% !important;

    margin:14px 0 17px !important;

    font-size:clamp(40px,11vw,52px) !important;
    line-height:1.02 !important;

    letter-spacing:-.045em !important;

    white-space:normal !important;

    overflow-wrap:normal !important;
    word-break:normal !important;
    hyphens:none !important;
  }

  .systemHeroCopy .lead{
    width:100% !important;

    max-width:100% !important;

    font-size:16px !important;
    line-height:1.55 !important;

    word-break:normal !important;
  }

  .systemHeroGlass{
    width:100% !important;

    max-width:100% !important;

    padding:19px !important;

    border-radius:24px !important;
  }

  .systemGlassItems{
    grid-template-columns:1fr !important;
  }


  /* ==========================================================
     HERO BUTTONS ON ALL MOBILE PAGES
     ========================================================== */

  .pageHero .heroActions,
  .systemHero .heroActions,
  .shopHero .heroActions{
    display:grid !important;

    width:100% !important;

    grid-template-columns:1fr !important;

    gap:10px !important;
  }

  .pageHero .heroActions a,
  .systemHero .heroActions a,
  .shopHero .heroActions a{
    width:100% !important;

    min-height:48px !important;

    justify-content:center !important;
  }


  /* ==========================================================
     COMMON GRIDS
     ========================================================== */

  .worldGrid,
  .serviceGrid,
  .serviceGrid.two,
  .featureGrid,
  .formGrid,
  .loginGrid,
  .row,
  .packageGrid,
  .productGrid,
  .pricingGrid,
  .overviewGrid{
    grid-template-columns:minmax(0,1fr) !important;
  }

}


/* ============================================================
   DESKTOP RESET
   ============================================================ */

@media(min-width:1321px){

  .mobileToggle{
    display:none !important;
  }

  .nav.primary,
  .nav.utility{
    display:flex;
  }

}

/* ============================================================
   iOS / Mobile Safari Hero Title Fix
   ============================================================ */

@media(max-width:760px){

  body.homePage .hero.videoReady .heroTitle,
  body.homePage .hero.videoReady .heroTitle .heroLine,
  body.homePage .hero.videoReady .heroTitle .heroWord,
  body.homePage .hero.videoReady .heroTitle .heroLetter,
  body.homePage .hero.videoReady .heroTitle .tone1,
  body.homePage .hero.videoReady .heroTitle .tone2,
  body.homePage .hero.videoReady .heroTitle .tone3,
  body.homePage .hero.videoReady .heroTitle .tone4{

    background:none !important;
    background-image:none !important;

    -webkit-background-clip:border-box !important;
    background-clip:border-box !important;

    -webkit-text-fill-color:currentColor !important;

    opacity:1 !important;
    visibility:visible !important;

    filter:none !important;
    transform:none !important;

    animation:none !important;
  }

  body.homePage .hero.videoReady .heroTitle{
    display:block !important;

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

    margin:10px 0 18px !important;

    font-size:clamp(42px,12vw,54px) !important;
    line-height:1.02 !important;

    letter-spacing:-.045em !important;

    color:#173f58 !important;
  }

  body.homePage .hero.videoReady .heroTitle .heroLine{
    display:block !important;

    width:100% !important;

    white-space:normal !important;

    color:#173f58 !important;
  }

  body.homePage .hero.videoReady .heroTitle .heroWord{
    display:inline !important;

    white-space:normal !important;
  }

  body.homePage .hero.videoReady .heroTitle .heroLetter{
    display:inline !important;
  }

  /* Gleiche Farbabstufung wie Desktop, aber ohne Clip-Technik */

  body.homePage .hero.videoReady .heroTitle .tone1,
  body.homePage .hero.videoReady .heroTitle .tone1 .heroLetter{
    color:#244b67 !important;
    -webkit-text-fill-color:#244b67 !important;
  }

  body.homePage .hero.videoReady .heroTitle .tone2,
  body.homePage .hero.videoReady .heroTitle .tone2 .heroLetter{
    color:#2f78ad !important;
    -webkit-text-fill-color:#2f78ad !important;
  }

  body.homePage .hero.videoReady .heroTitle .tone3,
  body.homePage .hero.videoReady .heroTitle .tone3 .heroLetter{
    color:#3f9ed2 !important;
    -webkit-text-fill-color:#3f9ed2 !important;
  }

  body.homePage .hero.videoReady .heroTitle .tone4,
  body.homePage .hero.videoReady .heroTitle .tone4 .heroLetter{
    color:#6ccdf2 !important;
    -webkit-text-fill-color:#6ccdf2 !important;
  }

}

/* ============================================================
   Mobile Menu Glass Overlay
   ============================================================ */

@media (max-width: 1260px) {

  .topbar .navrow.mobile-open::before {
    background: rgba(32, 48, 58, 0.14) !important;

    backdrop-filter:
      blur(5px)
      saturate(115%) !important;

    -webkit-backdrop-filter:
      blur(5px)
      saturate(115%) !important;
  }

  .topbar .navrow.mobile-open .nav.primary {
    background:
      linear-gradient(
        145deg,
        rgba(255, 249, 236, 0.90) 0%,
        rgba(241, 249, 255, 0.86) 50%,
        rgba(255, 246, 221, 0.88) 100%
      ) !important;

    border-left:
      1px solid rgba(255, 255, 255, 0.82) !important;

    box-shadow:
      -18px 0 50px rgba(30, 70, 90, 0.16),
      inset 1px 0 0 rgba(255, 255, 255, 0.78) !important;

    backdrop-filter:
      blur(28px)
      saturate(145%) !important;

    -webkit-backdrop-filter:
      blur(28px)
      saturate(145%) !important;
  }

  .topbar .navrow.mobile-open .nav.utility {
    background:
      linear-gradient(
        145deg,
        rgba(255, 249, 236, 0.93),
        rgba(239, 248, 253, 0.90)
      ) !important;

    backdrop-filter:
      blur(28px)
      saturate(145%) !important;

    -webkit-backdrop-filter:
      blur(28px)
      saturate(145%) !important;
  }

  .topbar .navrow.mobile-open
  .nav.primary > .navitem > .navlink {
    background:
      rgba(255, 255, 255, 0.42) !important;

    border:
      1px solid rgba(255, 255, 255, 0.55) !important;
  }

  .topbar .navrow.mobile-open
  .nav.primary > .navitem.open > .navlink {
    background:
      rgba(255, 255, 255, 0.70) !important;
  }

}


/* ============================================================
   SU-IT iOS video + final frosted navigation
   ============================================================ */

/* Safari soll keinen grossen nativen Play-Button über dem Hero zeigen */
.heroMedia video::-webkit-media-controls,
.heroMedia video::-webkit-media-controls-panel,
.heroMedia video::-webkit-media-controls-play-button,
.heroMedia video::-webkit-media-controls-start-playback-button {
  display:none !important;
  -webkit-appearance:none !important;
}

body.homePage .heroMedia video {
  pointer-events:none !important;
}

/* Autoplay blockiert -> sauberes Poster statt Play-Symbol */
body.homePage .hero.videoReady.heroVideoFallback .heroMedia {
  background:
    url("hero-background-poster.jpg")
    center center / cover
    no-repeat !important;
}

body.homePage .hero.videoReady.heroVideoFallback .heroMedia video {
  opacity:0 !important;
  visibility:hidden !important;
}


/* ============================================================
   FROSTED MOBILE / TABLET MENU
   ============================================================ */

@media (max-width:1320px) {

  /* Hintergrund ausserhalb des Drawers stärker beruhigen */
  .topbar .navrow.mobile-open::before {
    background:
      rgba(24, 42, 52, .24) !important;

    -webkit-backdrop-filter:
      blur(7px)
      saturate(105%) !important;

    backdrop-filter:
      blur(7px)
      saturate(105%) !important;
  }


  /* Eigentliche Glasfläche */
  .topbar .navrow.mobile-open .nav.primary {
    background:
      linear-gradient(
        145deg,
        rgba(255, 249, 237, .965) 0%,
        rgba(244, 249, 248, .955) 42%,
        rgba(232, 246, 251, .955) 72%,
        rgba(255, 246, 224, .965) 100%
      ) !important;

    border-left:
      1px solid rgba(255,255,255,.92) !important;

    box-shadow:
      -24px 0 70px rgba(22,58,76,.22),
      inset 1px 0 0 rgba(255,255,255,.92) !important;

    -webkit-backdrop-filter:
      blur(36px)
      saturate(125%) !important;

    backdrop-filter:
      blur(36px)
      saturate(125%) !important;
  }


  /* Unterer Kontakt-/Login-Bereich */
  .topbar .navrow.mobile-open .nav.utility {
    background:
      linear-gradient(
        145deg,
        rgba(255,249,237,.975),
        rgba(237,248,251,.97)
      ) !important;

    border-top:
      1px solid rgba(255,255,255,.92) !important;

    -webkit-backdrop-filter:
      blur(36px)
      saturate(125%) !important;

    backdrop-filter:
      blur(36px)
      saturate(125%) !important;
  }


  /* Hauptpunkte wie echte Glaskarten */
  .topbar .navrow.mobile-open
  .nav.primary > .navitem > .navlink {

    background:
      rgba(255,255,255,.56) !important;

    border:
      1px solid rgba(255,255,255,.82) !important;

    box-shadow:
      0 6px 22px rgba(35,82,102,.055) !important;
  }


  .topbar .navrow.mobile-open
  .nav.primary > .navitem.open > .navlink {

    background:
      rgba(255,255,255,.82) !important;

    border-color:
      rgba(255,255,255,.96) !important;
  }


  /* Untermenüs ebenfalls lesbar */
  .topbar .navrow.mobile-open
  .nav.primary
  .navitem.open > .dropdown,

  .topbar .navrow.mobile-open
  .nav.primary
  .navitem.open > .dropdown.mega {

    background:
      rgba(250,252,250,.80) !important;

    border:
      1px solid rgba(255,255,255,.90) !important;

    -webkit-backdrop-filter:
      blur(18px) !important;

    backdrop-filter:
      blur(18px) !important;
  }

}


/* Beim offenen Drawer Seite nicht mitscrollen */
body.mobile-nav-open {
  overflow:hidden !important;
}


/* ============================================================
   SU-IT FINAL IOS + MENU FIX
   ============================================================ */

@media (max-width: 1260px) {

  .topbar .navrow.mobile-open::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(240, 246, 250, 0.82) !important;
    backdrop-filter: blur(18px) saturate(118%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(118%) !important;
    z-index: 1190;
  }

  .topbar .navrow.mobile-open .nav.primary,
  .topbar .navrow.mobile-open .nav.utility {
    position: relative;
    z-index: 1200;
    background:
      linear-gradient(
        145deg,
        rgba(255, 250, 241, 0.97) 0%,
        rgba(243, 248, 252, 0.97) 50%,
        rgba(250, 247, 234, 0.97) 100%
      ) !important;
    border: 1px solid rgba(255,255,255,0.92) !important;
    box-shadow: 0 18px 50px rgba(22,58,76,0.16) !important;
    backdrop-filter: blur(30px) saturate(130%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(130%) !important;
  }

  .topbar .navrow.mobile-open .nav.primary a,
  .topbar .navrow.mobile-open .nav.utility a {
    background: rgba(255,255,255,0.78) !important;
    border: 1px solid rgba(255,255,255,0.88) !important;
    color: #173f58 !important;
  }

  .topbar .navrow.mobile-open .nav.primary a:hover,
  .topbar .navrow.mobile-open .nav.utility a:hover,
  .topbar .navrow.mobile-open .nav.primary a:focus,
  .topbar .navrow.mobile-open .nav.utility a:focus {
    background: rgba(255,255,255,0.90) !important;
  }

  .topbar .navrow.mobile-open .dropdown,
  .topbar .navrow.mobile-open .dropdown.mega {
    background: rgba(248, 251, 253, 0.93) !important;
    border: 1px solid rgba(255,255,255,0.88) !important;
    backdrop-filter: blur(22px) !important;
    -webkit-backdrop-filter: blur(22px) !important;
  }

  /* Safari Play-Overlay möglichst unterdrücken */
  .heroMedia video::-webkit-media-controls,
  .heroMedia video::-webkit-media-controls-panel,
  .heroMedia video::-webkit-media-controls-play-button,
  .heroMedia video::-webkit-media-controls-start-playback-button {
    display: none !important;
    -webkit-appearance: none !important;
  }
}

/* Wenn Video-Fallback aktiv ist -> Standbild statt Play-Button */
body.homePage .hero.videoFallback .heroMedia {
  background:
    url("./hero-background-poster.jpg")
    center center / cover
    no-repeat !important;
}

body.homePage .hero.videoFallback .heroMedia video {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.mobile-nav-open {
  overflow: hidden !important;
}


/* ============================================================
   SU-IT MOBILE SUBPAGE HERO NORMALIZATION
   Infrastructure / Security / Workplace / Network / Cloud etc.
   ============================================================ */

@media (max-width: 760px) {

  /* ----------------------------------------------------------
     GENERELL: keine schmalen inneren Spalten mehr
     ---------------------------------------------------------- */

  .pageHero,
  .systemHero,
  .infraSystemHero,
  .securitySystemHero,
  .workplaceSystemHero {
    width: 100% !important;
    max-width: none !important;
    overflow: hidden !important;
  }

  .pageHero > .shell,
  .systemHero > .shell,
  .systemHeroShell,
  .businessSystemHeroShell {
    width: calc(100% - 28px) !important;
    max-width: none !important;
    min-width: 0 !important;

    margin-left: auto !important;
    margin-right: auto !important;
  }


  /* ----------------------------------------------------------
     SYSTEM-SEITEN:
     IT & Infrastruktur / Security / Workplace
     ---------------------------------------------------------- */

  .systemHeroShell,
  .businessSystemHeroShell {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;

    gap: 26px !important;

    padding: 34px 0 26px !important;

    /* diesen riesigen Karten-Look entfernen */
    background: transparent !important;
    background-image: none !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .systemHeroCopy {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    padding: 0 !important;
    margin: 0 !important;
  }

  .systemHeroCopy .crumbs,
  .systemHeroCopy .k {
    width: 100% !important;
    max-width: none !important;
  }


  /* TITEL: keine braun/orange Mobile-Farbe */

  .systemHeroCopy h1,
  .systemHeroCopy h1 span,
  .pageHero h1,
  .pageHero h1 span {
    background: none !important;
    background-image: none !important;

    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;

    color: #173f58 !important;
    -webkit-text-fill-color: #173f58 !important;

    opacity: 1 !important;
    visibility: visible !important;

    filter: none !important;
  }

  .systemHeroCopy h1,
  .pageHero h1 {
    display: block !important;

    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    margin: 18px 0 20px !important;

    font-size: clamp(42px, 11.5vw, 56px) !important;
    line-height: 1.01 !important;

    letter-spacing: -0.05em !important;

    white-space: normal !important;

    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }


  /* Beschreibung ebenfalls volle Breite */

  .systemHeroCopy .lead,
  .pageHero .lead,
  .pageHero p {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    font-size: 17px !important;
    line-height: 1.55 !important;

    word-break: normal !important;
    overflow-wrap: normal !important;
  }


  /* ----------------------------------------------------------
     BUTTONS
     ---------------------------------------------------------- */

  .systemHeroLinkRow,
  .systemHero .heroActions,
  .pageHero .heroActions {
    display: grid !important;

    width: 100% !important;

    grid-template-columns: minmax(0, 1fr) !important;

    gap: 10px !important;

    margin-top: 26px !important;
  }

  .systemHeroLinkRow a,
  .systemHero .heroActions a,
  .pageHero .heroActions a {
    width: 100% !important;
    max-width: none !important;

    min-height: 48px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }


  /* ----------------------------------------------------------
     DIE SCHÖNE GLAS-KARTE DARUNTER BEHALTEN
     ---------------------------------------------------------- */

  .systemHeroGlass {
    width: 100% !important;
    max-width: none !important;

    margin: 4px 0 0 !important;

    padding: 22px !important;

    border-radius: 26px !important;

    background:
      linear-gradient(
        145deg,
        rgba(255,255,255,.78),
        rgba(235,248,253,.68)
      ) !important;

    border:
      1px solid rgba(255,255,255,.86) !important;

    box-shadow:
      0 18px 50px rgba(35,85,110,.10) !important;

    backdrop-filter:
      blur(22px) saturate(125%) !important;

    -webkit-backdrop-filter:
      blur(22px) saturate(125%) !important;
  }

  .systemGlassItems {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;

    gap: 10px !important;
  }


  /* ----------------------------------------------------------
     NORMALE PRODUKTSEITEN:
     Network / Cloud / Backup / Azure / Mobile ...
     ---------------------------------------------------------- */

  .pageHero {
    padding: 42px 0 54px !important;
  }

  .pageHero > .shell {
    display: block !important;
  }

  .pageHero .crumbs {
    margin-bottom: 22px !important;
  }

}


/* ============================================================
   TABLET / HALF WINDOW
   ============================================================ */

@media (min-width: 761px) and (max-width: 1320px) {

  .pageHero > .shell,
  .systemHeroShell,
  .businessSystemHeroShell {
    width: min(calc(100% - 48px), 1100px) !important;
    max-width: none !important;

    margin-left: auto !important;
    margin-right: auto !important;
  }

  .systemHeroShell,
  .businessSystemHeroShell {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .systemHeroCopy,
  .pageHero > .shell > * {
    min-width: 0 !important;
  }

  .systemHeroCopy h1,
  .pageHero h1 {
    width: 100% !important;
    max-width: 900px !important;

    word-break: normal !important;
    overflow-wrap: normal !important;
  }

}


/* ============================================================
   SU-IT TABLET / HALF-WINDOW + SERVICE IMAGE NORMALIZATION
   ============================================================ */


/* ------------------------------------------------------------
   1. TABLET / HALBES LAPTOPFENSTER
   ------------------------------------------------------------ */

@media (min-width:761px) and (max-width:1320px){

  /* Alle normalen Leistungs-Heroes auf volle nutzbare Breite */
  .pageHero,
  .pageHero > .shell,
  .systemHero,
  .systemHeroShell,
  .businessSystemHeroShell,
  .shopHero,
  .shopHeroGrid{
    max-width:none !important;
    min-width:0 !important;
  }

  .pageHero > .shell,
  .systemHeroShell,
  .businessSystemHeroShell,
  .shopHeroGrid{
    width:min(calc(100% - 48px),1100px) !important;

    margin-left:auto !important;
    margin-right:auto !important;
  }

  /* Alte Zweispalten-Layouts abschalten */
  .pageHero > .shell,
  .systemHeroShell,
  .businessSystemHeroShell,
  .shopHeroGrid{
    grid-template-columns:minmax(0,1fr) !important;
  }

  /* Textbereiche dürfen nicht auf 300px zusammengedrückt werden */
  .pageHero .heroCopy,
  .pageHero .shopHeroCopy,
  .systemHeroCopy,
  .shopHeroCopy{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
  }

  .pageHero h1,
  .systemHeroCopy h1,
  .shopHero h1{
    width:100% !important;
    max-width:900px !important;

    white-space:normal !important;

    word-break:normal !important;
    overflow-wrap:normal !important;
    hyphens:none !important;
  }

  .pageHero p,
  .pageHero .lead,
  .systemHeroCopy .lead,
  .shopHero .lead{
    width:100% !important;
    max-width:760px !important;
  }

  /* Buttons nicht als schmale 300px-Spalte */
  .pageHero .heroActions,
  .systemHeroLinkRow,
  .shopHero .heroActions{
    width:100% !important;
    max-width:760px !important;
  }

}


/* ------------------------------------------------------------
   2. ALLE SERVICE-KARTENBILDER EINHEITLICH FÜLLEN
   ------------------------------------------------------------ */

.serviceCard{
  overflow:hidden !important;
}

.serviceCard > img{
  display:block !important;

  width:100% !important;
  max-width:none !important;

  height:280px !important;

  object-fit:cover !important;
  object-position:center center !important;

  margin:0 !important;
  padding:0 !important;

  border:0 !important;
}


/* Etwas stärkerer Crop für Bilder mit viel leerer Randfläche */
.serviceCard[href*="access"] > img{
  object-position:68% center !important;
  transform:scale(1.06);
}


/* ------------------------------------------------------------
   TABLET
   ------------------------------------------------------------ */

@media (max-width:1100px){

  .serviceCard > img{
    height:250px !important;
  }

}


/* ------------------------------------------------------------
   HANDY
   ------------------------------------------------------------ */

@media (max-width:760px){

  .serviceCard > img{
    width:100% !important;
    height:220px !important;

    object-fit:cover !important;
  }

  .serviceCard[href*="access"] > img{
    object-position:68% center !important;
    transform:scale(1.05);
  }

}

/* ============================================================
   SU-IT CANONICAL SERVICE PAGE RESPONSIVE FIX
   Fixes ALL standard service pages at tablet / half-window size
   ============================================================ */

@media (min-width:761px) and (max-width:1320px){

  /*
   * styles.css uses a high-specificity two-column rule:
   * body.servicePage ... .pageHero .shell
   *
   * Override that exact structure here.
   */

  body.servicePage:not(.microsoftSolutionsPage):not(.appleBusinessPage)
  .pageHero .shell{

    display:grid !important;

    grid-template-columns:minmax(0,1fr) !important;

    width:min(calc(100% - 48px),1100px) !important;
    max-width:none !important;
    min-width:0 !important;

    margin-left:auto !important;
    margin-right:auto !important;

    gap:28px !important;

    align-items:start !important;
  }


  /* Every actual text element uses the full column */
  body.servicePage:not(.microsoftSolutionsPage):not(.appleBusinessPage)
  .pageHero .crumbs,

  body.servicePage:not(.microsoftSolutionsPage):not(.appleBusinessPage)
  .pageHero .k,

  body.servicePage:not(.microsoftSolutionsPage):not(.appleBusinessPage)
  .pageHero h1,

  body.servicePage:not(.microsoftSolutionsPage):not(.appleBusinessPage)
  .pageHero p,

  body.servicePage:not(.microsoftSolutionsPage):not(.appleBusinessPage)
  .pageHero .heroActions{

    grid-column:1 !important;

    width:100% !important;

    min-width:0 !important;
  }


  body.servicePage:not(.microsoftSolutionsPage):not(.appleBusinessPage)
  .pageHero h1{

    max-width:850px !important;

    font-size:clamp(48px,7vw,70px) !important;

    line-height:1.01 !important;

    word-break:normal !important;
    overflow-wrap:normal !important;
    hyphens:none !important;
  }


  body.servicePage:not(.microsoftSolutionsPage):not(.appleBusinessPage)
  .pageHero p{

    max-width:760px !important;

    font-size:18px !important;
    line-height:1.6 !important;
  }


  body.servicePage:not(.microsoftSolutionsPage):not(.appleBusinessPage)
  .pageHero .heroActions{

    max-width:760px !important;
  }


  /*
   * The old pseudo image is the second grid column that causes
   * the narrow text. Keep the image, but move it below the copy.
   */

  body.servicePage:not(.microsoftSolutionsPage):not(.appleBusinessPage)
  .pageHero .shell::after{

    grid-column:1 !important;
    grid-row:auto !important;

    display:block !important;

    position:relative !important;

    width:100% !important;
    max-width:760px !important;

    height:300px !important;
    min-height:300px !important;
    max-height:300px !important;

    margin-top:6px !important;

    align-self:auto !important;

    border-radius:26px !important;

    background-size:cover !important;
    background-position:center center !important;

    animation:none !important;
  }

}


/* ============================================================
   Business overview cards
   ============================================================ */

body.overviewPage .serviceCard{
  overflow:hidden !important;
}

body.overviewPage .serviceCard img{
  display:block !important;

  width:100% !important;

  height:240px !important;
  min-height:240px !important;

  object-fit:cover !important;
  object-position:center center !important;
}


/*
 * Access currently uses hero-thun.jpg.
 * Crop it slightly harder because the source has too much empty area.
 */
body.businessPage
.serviceCard[href="leistungen/access.html"] img{

  width:108% !important;
  max-width:none !important;

  margin-left:-4% !important;

  object-fit:cover !important;
  object-position:68% center !important;

  transform:none !important;
}

/* ============================================================
   REMOVE LEGACY SERVICE HERO PSEUDO IMAGE
   The old ::after creates the empty/narrow right column.
   ============================================================ */

@media (min-width:761px) and (max-width:1320px){

  body.servicePage:not(.microsoftSolutionsPage):not(.appleBusinessPage)
  .pageHero .shell{

    display:block !important;

    width:min(calc(100% - 48px),1100px) !important;
    max-width:none !important;
    min-width:0 !important;

    margin-left:auto !important;
    margin-right:auto !important;
  }

  /* Der problematische künstliche Bildblock verschwindet */
  body.servicePage:not(.microsoftSolutionsPage):not(.appleBusinessPage)
  .pageHero .shell::after{

    content:none !important;
    display:none !important;

    width:0 !important;
    height:0 !important;
    min-height:0 !important;

    margin:0 !important;
    padding:0 !important;
  }

  body.servicePage:not(.microsoftSolutionsPage):not(.appleBusinessPage)
  .pageHero h1{

    width:100% !important;
    max-width:860px !important;

    font-size:clamp(48px,7vw,70px) !important;
    line-height:1.01 !important;

    word-break:normal !important;
    overflow-wrap:normal !important;
  }

  body.servicePage:not(.microsoftSolutionsPage):not(.appleBusinessPage)
  .pageHero p:not(.k){

    width:100% !important;
    max-width:760px !important;
  }

  body.servicePage:not(.microsoftSolutionsPage):not(.appleBusinessPage)
  .pageHero .heroActions{

    width:100% !important;
    max-width:760px !important;
  }

}




/* =========================================================
   V222 — Apple zero-touch flowing ticker only
   Nur für den Bereich unter:
   "Auspacken. Einschalten. Arbeiten."
   ========================================================= */

.appleZeroTouchEnhanced .appleZTLegacyFlow{
  display:none !important;
}

.appleZeroTouchTicker{
  position:relative;
  width:100%;
  margin-top:28px;
  overflow:hidden;
  padding:12px 0;
}

.appleZeroTouchTicker::before,
.appleZeroTouchTicker::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:72px;
  z-index:2;
  pointer-events:none;
}

.appleZeroTouchTicker::before{
  left:0;
  background:linear-gradient(90deg, rgba(245,249,252,1) 0%, rgba(245,249,252,0) 100%);
}

.appleZeroTouchTicker::after{
  right:0;
  background:linear-gradient(270deg, rgba(245,249,252,1) 0%, rgba(245,249,252,0) 100%);
}

.appleZeroTouchTickerViewport{
  width:100%;
  overflow:hidden;
}

.appleZeroTouchTickerTrack{
  display:flex;
  align-items:center;
  width:max-content;
  white-space:nowrap;
  will-change:transform;
  animation:appleZeroTouchTickerMove 30s linear infinite;
}

.appleZeroTouchTickerGroup{
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
}

.appleZeroTouchTickerItem{
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
  font-weight:700;
  font-size:clamp(17px,1.15vw,24px);
  line-height:1.2;
  color:#36526c;
}

.appleZeroTouchTickerArrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin:0 14px;
  font-size:clamp(15px,1vw,21px);
  line-height:1;
  color:#8aa9c0;
  font-weight:700;
}

@keyframes appleZeroTouchTickerMove{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}

.appleZeroTouchTicker:hover .appleZeroTouchTickerTrack{
  animation-play-state:paused;
}

@media (max-width:1180px){
  .appleZeroTouchTicker{
    margin-top:22px;
  }
  .appleZeroTouchTicker::before,
  .appleZeroTouchTicker::after{
    width:48px;
  }
  .appleZeroTouchTickerItem{
    font-size:clamp(15px,2.6vw,18px);
  }
  .appleZeroTouchTickerArrow{
    margin:0 10px;
    font-size:15px;
  }
}

@media (max-width:760px){
  .appleZeroTouchTicker{
    margin-top:18px;
    padding:8px 0;
  }
  .appleZeroTouchTicker::before,
  .appleZeroTouchTicker::after{
    width:28px;
  }
  .appleZeroTouchTickerItem{
    font-size:15px;
  }
  .appleZeroTouchTickerArrow{
    margin:0 8px;
    font-size:14px;
  }
}









/* V230_APPLE_FLOW_CSS_START */

/* Nur Apple Zero-Touch Lauftext */
body.appleBusinessPage .appleFlowV230Host{
  position:relative !important;
  width:100% !important;
  display:block !important;
  overflow:hidden !important;
  padding:18px 26px !important;
  border-radius:40px !important;
  border:1px solid rgba(184,205,220,.30) !important;
  background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(250,253,255,.78)) !important;
  box-shadow:0 18px 44px rgba(70,112,145,.08) !important;
}

body.appleBusinessPage .appleFlowV230Host *{
  box-sizing:border-box !important;
}

body.appleBusinessPage .appleFlowV230Viewport{
  position:relative !important;
  width:100% !important;
  overflow:hidden !important;
}

body.appleBusinessPage .appleFlowV230Viewport::before,
body.appleBusinessPage .appleFlowV230Viewport::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:34px;
  z-index:2;
  pointer-events:none;
}

body.appleBusinessPage .appleFlowV230Viewport::before{
  left:0;
  background:linear-gradient(90deg,rgba(251,253,255,1),rgba(251,253,255,0));
}

body.appleBusinessPage .appleFlowV230Viewport::after{
  right:0;
  background:linear-gradient(270deg,rgba(251,253,255,1),rgba(251,253,255,0));
}

body.appleBusinessPage .appleFlowV230Track{
  display:flex !important;
  align-items:center !important;
  width:max-content !important;
  white-space:nowrap !important;
  will-change:transform !important;
  animation:appleFlowV230Move 32s linear infinite !important;
}

body.appleBusinessPage .appleFlowV230Host:hover .appleFlowV230Track{
  animation-play-state:paused !important;
}

body.appleBusinessPage .appleFlowV230Group{
  display:inline-flex !important;
  align-items:center !important;
  flex:0 0 auto !important;
  white-space:nowrap !important;
}

body.appleBusinessPage .appleFlowV230Group + .appleFlowV230Group{
  margin-left:110px !important;
}

body.appleBusinessPage .appleFlowV230Item{
  display:inline-block !important;
  margin:0 !important;
  padding:0 !important;
  width:auto !important;
  min-width:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:none !important;
  box-shadow:none !important;
  font-size:clamp(22px,1.45vw,34px) !important;
  font-weight:800 !important;
  line-height:1.15 !important;
  letter-spacing:-.025em !important;
  white-space:nowrap !important;
  -webkit-text-fill-color:transparent !important;
  color:transparent !important;
}

body.appleBusinessPage .appleFlowV230Item::before,
body.appleBusinessPage .appleFlowV230Item::after{
  content:none !important;
  display:none !important;
}

body.appleBusinessPage .appleFlowV230Item.tone1{
  background:linear-gradient(100deg,#234f71 0%,#49b9e3 100%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
}
body.appleBusinessPage .appleFlowV230Item.tone2{
  background:linear-gradient(100deg,#3e7a8f 0%,#67d0c2 100%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
}
body.appleBusinessPage .appleFlowV230Item.tone3{
  background:linear-gradient(100deg,#625a9a 0%,#9e73db 100%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
}
body.appleBusinessPage .appleFlowV230Item.tone4{
  background:linear-gradient(100deg,#2f6f95 0%,#6fb8e8 100%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
}
body.appleBusinessPage .appleFlowV230Item.tone5{
  background:linear-gradient(100deg,#327e80 0%,#5bcabc 100%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
}
body.appleBusinessPage .appleFlowV230Item.tone6{
  background:linear-gradient(100deg,#4b865f 0%,#74c895 100%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
}

body.appleBusinessPage .appleFlowV230Arrow{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin:0 18px !important;
  padding:0 !important;
  border:0 !important;
  background:none !important;
  box-shadow:none !important;
  color:#91aebf !important;
  -webkit-text-fill-color:#91aebf !important;
  font-size:21px !important;
  font-weight:700 !important;
  line-height:1 !important;
}

body.appleBusinessPage .appleFlowV230Arrow::before,
body.appleBusinessPage .appleFlowV230Arrow::after{
  content:none !important;
  display:none !important;
}

@keyframes appleFlowV230Move{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

@media(max-width:1100px){
  body.appleBusinessPage .appleFlowV230Item{
    font-size:24px !important;
  }
}

@media(max-width:760px){
  body.appleBusinessPage .appleFlowV230Host{
    padding:14px 18px !important;
    border-radius:28px !important;
  }

  body.appleBusinessPage .appleFlowV230Track{
    animation-duration:24s !important;
  }

  body.appleBusinessPage .appleFlowV230Item{
    font-size:18px !important;
    line-height:1.18 !important;
  }

  body.appleBusinessPage .appleFlowV230Arrow{
    margin:0 10px !important;
    font-size:16px !important;
  }

  body.appleBusinessPage .appleFlowV230Group + .appleFlowV230Group{
    margin-left:70px !important;
  }
}

/* ganz alte Pill-/Capsule-Optik im Apple-Bereich neutralisieren */
body.appleBusinessPage .appleFlowV230Host .pill,
body.appleBusinessPage .appleFlowV230Host [class*="capsule"],
body.appleBusinessPage .appleFlowV230Host [class*="badge"]{
  display:none !important;
}

/* V230_APPLE_FLOW_CSS_END */

/* V231_APPLE_ZERO_TOUCH_FINAL_START */

/*
   NUR:
   Apple Business -> Zero-Touch Deployment
   "Auspacken. Einschalten. Arbeiten."
*/

body.appleBusinessPage .appleFlowV230Host{
  position:relative !important;
  display:block !important;

  width:100% !important;
  max-width:none !important;

  overflow:hidden !important;

  padding:19px 28px !important;

  border-radius:36px !important;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.86),
      rgba(250,253,255,.72)
    ) !important;

  border:
    1px solid rgba(181,204,220,.28) !important;

  box-shadow:
    0 18px 46px rgba(69,110,143,.07) !important;
}


/* alter Pill-Look darf hier NICHT mehr greifen */

body.appleBusinessPage .appleFlowV230Host span{
  min-width:0 !important;
  max-width:none !important;

  height:auto !important;
  min-height:0 !important;

  border:0 !important;
  outline:0 !important;
  border-radius:0 !important;

  box-shadow:none !important;
}


/* Laufbahn */

body.appleBusinessPage .appleFlowV230Viewport{
  position:relative !important;

  width:100% !important;

  overflow:hidden !important;
}


body.appleBusinessPage .appleFlowV230Track{
  display:flex !important;

  align-items:center !important;

  width:max-content !important;

  white-space:nowrap !important;

  flex-wrap:nowrap !important;

  animation:
    appleFlowV231Move 28s linear infinite !important;

  will-change:transform !important;
}


/* NICHT bei Hover stoppen */
body.appleBusinessPage
.appleFlowV230Host:hover
.appleFlowV230Track{
  animation-play-state:running !important;
}


/* zwei identische Durchläufe */

body.appleBusinessPage .appleFlowV230Group{
  display:inline-flex !important;

  flex:0 0 auto !important;

  align-items:center !important;

  white-space:nowrap !important;
}


/*
   Großer Abstand:
   Einsatzbereit ........ Bestellung
*/

body.appleBusinessPage
.appleFlowV230Group +
.appleFlowV230Group{
  margin-left:180px !important;
}


/* Text – KEINE Kapseln */

body.appleBusinessPage .appleFlowV230Item{
  display:inline-block !important;

  flex:0 0 auto !important;

  width:auto !important;
  min-width:max-content !important;
  max-width:none !important;

  margin:0 !important;
  padding:0 !important;

  background-color:transparent !important;

  border:0 !important;
  border-radius:0 !important;

  box-shadow:none !important;

  white-space:nowrap !important;

  word-break:normal !important;
  overflow-wrap:normal !important;

  font-size:
    clamp(21px,1.45vw,32px) !important;

  font-weight:800 !important;

  line-height:1.15 !important;

  letter-spacing:-.025em !important;

  text-shadow:none !important;
}


/* Farbverlauf NUR in den Buchstaben */

body.appleBusinessPage
.appleFlowV230Item.tone1{
  background:
    linear-gradient(
      100deg,
      #17496a,
      #46bce5
    ) !important;

  -webkit-background-clip:text !important;
  background-clip:text !important;

  color:transparent !important;
  -webkit-text-fill-color:transparent !important;
}


body.appleBusinessPage
.appleFlowV230Item.tone2{
  background:
    linear-gradient(
      100deg,
      #337b8c,
      #58cfc0
    ) !important;

  -webkit-background-clip:text !important;
  background-clip:text !important;

  color:transparent !important;
  -webkit-text-fill-color:transparent !important;
}


body.appleBusinessPage
.appleFlowV230Item.tone3{
  background:
    linear-gradient(
      100deg,
      #665a99,
      #a575dd
    ) !important;

  -webkit-background-clip:text !important;
  background-clip:text !important;

  color:transparent !important;
  -webkit-text-fill-color:transparent !important;
}


body.appleBusinessPage
.appleFlowV230Item.tone4{
  background:
    linear-gradient(
      100deg,
      #286993,
      #67b9e8
    ) !important;

  -webkit-background-clip:text !important;
  background-clip:text !important;

  color:transparent !important;
  -webkit-text-fill-color:transparent !important;
}


body.appleBusinessPage
.appleFlowV230Item.tone5{
  background:
    linear-gradient(
      100deg,
      #277d7e,
      #5bcbbd
    ) !important;

  -webkit-background-clip:text !important;
  background-clip:text !important;

  color:transparent !important;
  -webkit-text-fill-color:transparent !important;
}


body.appleBusinessPage
.appleFlowV230Item.tone6{
  background:
    linear-gradient(
      100deg,
      #45815d,
      #75c995
    ) !important;

  -webkit-background-clip:text !important;
  background-clip:text !important;

  color:transparent !important;
  -webkit-text-fill-color:transparent !important;
}


/* Pfeile – normale Zeichen, keine Buttons */

body.appleBusinessPage .appleFlowV230Arrow{
  display:inline-flex !important;

  flex:0 0 auto !important;

  align-items:center !important;
  justify-content:center !important;

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

  margin:0 18px !important;
  padding:0 !important;

  background:none !important;

  border:0 !important;
  border-radius:0 !important;

  box-shadow:none !important;

  color:#91aabd !important;
  -webkit-text-fill-color:#91aabd !important;

  font-size:20px !important;

  line-height:1 !important;
}


/* sauberes kontinuierliches Rechts -> Links */

@keyframes appleFlowV231Move{

  from{
    transform:translateX(0);
  }

  to{
    transform:translateX(-50%);
  }

}


/* kleiner Tab */

@media(max-width:1100px){

  body.appleBusinessPage .appleFlowV230Track{
    animation-duration:25s !important;
  }

  body.appleBusinessPage .appleFlowV230Item{
    font-size:20px !important;

    min-width:max-content !important;

    white-space:nowrap !important;
  }

}


/* Smartphone */

@media(max-width:760px){

  body.appleBusinessPage .appleFlowV230Host{
    padding:15px 18px !important;

    border-radius:28px !important;
  }


  body.appleBusinessPage .appleFlowV230Track{
    animation-duration:22s !important;
  }


  body.appleBusinessPage .appleFlowV230Item{
    font-size:17px !important;

    width:auto !important;
    min-width:max-content !important;

    white-space:nowrap !important;
  }


  body.appleBusinessPage .appleFlowV230Arrow{
    margin:0 11px !important;

    font-size:15px !important;
  }


  body.appleBusinessPage
  .appleFlowV230Group +
  .appleFlowV230Group{
    margin-left:90px !important;
  }

}

/* V231_APPLE_ZERO_TOUCH_FINAL_END */

/* V232_APPLE_FULLSCREEN_START */

/*
   NUR große Desktop-/Vollbildschirme.
   Kleiner Desktop, Tablet und Smartphone bleiben unverändert.
*/

@media (min-width:1600px){

  body.appleBusinessPage .appleFlowV230Host{
    width:min(1180px, calc(100% - 120px)) !important;
    max-width:1180px !important;

    margin-left:auto !important;
    margin-right:auto !important;

    padding:17px 26px !important;

    border-radius:34px !important;
  }

  body.appleBusinessPage .appleFlowV230Item{
    font-size:26px !important;
    line-height:1.15 !important;
  }

  body.appleBusinessPage .appleFlowV230Arrow{
    margin-left:15px !important;
    margin-right:15px !important;

    font-size:18px !important;
  }

  body.appleBusinessPage .appleFlowV230Group +
  .appleFlowV230Group{
    margin-left:165px !important;
  }

}


/* Sehr breite / 49-Zoll-Ansichten */
@media (min-width:2200px){

  body.appleBusinessPage .appleFlowV230Host{
    width:1240px !important;
    max-width:1240px !important;
  }

  body.appleBusinessPage .appleFlowV230Item{
    font-size:27px !important;
  }

}

/* V232_APPLE_FULLSCREEN_END */

/* SUIT_LOGO_FINAL_START */

/*
   Finale SU-IT Logo-Darstellung.
   Die PNG-Datei bleibt hochauflösend.
   Nur die sichtbare Größe wird reduziert.
*/

.topbar .brand img,
header .brand img{
  width:158px !important;
  height:auto !important;
  max-width:158px !important;
  max-height:58px !important;

  object-fit:contain !important;
  object-position:left center !important;
}

/* Footer darf etwas größer bleiben */
.footer .footLogo{
  width:175px !important;
  height:auto !important;
  max-width:175px !important;
}

/* Tablet / kleiner Desktop */
@media (max-width:1320px){

  .topbar .brand img,
  header .brand img{
    width:150px !important;
    max-width:150px !important;
    max-height:55px !important;
  }

}

/* Smartphone */
@media (max-width:760px){

  .topbar .brand img,
  header .brand img{
    width:138px !important;
    max-width:138px !important;
    max-height:51px !important;
  }

  .footer .footLogo{
    width:160px !important;
    max-width:160px !important;
  }

}

/* SUIT_LOGO_FINAL_END */



/* GLOBAL_SERVICE_HERO_ACTIONS_V1_START */


/* ==========================================================
   EINHEITLICHE HERO-ACTIONS FÜR ALLE LEISTUNGSSEITEN
   ========================================================== */

body.servicePage
.pageHero
.heroActions,

body.servicePage
.detailHero
.heroActions{

  display:flex !important;

  flex-wrap:wrap !important;

  gap:12px !important;

  margin-top:27px !important;
}


/* Grundform für BEIDE Buttons */
body.servicePage
.pageHero
.heroActions a,

body.servicePage
.detailHero
.heroActions a{

  position:relative !important;

  min-width:176px !important;

  min-height:48px !important;

  display:inline-flex !important;

  align-items:center !important;

  justify-content:center !important;

  gap:8px !important;

  padding:0 20px !important;

  border-radius:15px !important;

  font-size:13px !important;

  font-weight:800 !important;

  line-height:1 !important;

  text-decoration:none !important;

  transform:translateY(0);

  transition:
    transform .22s ease,
    background .22s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    color .22s ease !important;
}


/* ==========================================================
   ERSTER BUTTON – HELLES ORANGE
   ========================================================== */

body.servicePage
.pageHero
.heroActions a:first-child,

body.servicePage
.detailHero
.heroActions a:first-child{

  color:#8a5426 !important;

  background:
    linear-gradient(
      135deg,
      rgba(255,232,202,.96),
      rgba(255,218,174,.92)
    ) !important;

  border:
    1px solid rgba(232,164,95,.26) !important;

  box-shadow:
    0 11px 26px rgba(207,142,76,.09),
    inset 0 1px 0 rgba(255,255,255,.88) !important;

  backdrop-filter:
    blur(14px)
    saturate(125%) !important;

  -webkit-backdrop-filter:
    blur(14px)
    saturate(125%) !important;
}


/* ==========================================================
   ZWEITER BUTTON – WEISS / GLAS MIT ORANGE
   ========================================================== */

body.servicePage
.pageHero
.heroActions a:nth-child(2),

body.servicePage
.detailHero
.heroActions a:nth-child(2){

  color:#76583d !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.78),
      rgba(253,248,242,.72)
    ) !important;

  border:
    1px solid rgba(226,177,126,.28) !important;

  box-shadow:
    0 10px 24px rgba(126,100,73,.05),
    inset 0 1px 0 rgba(255,255,255,.95) !important;

  backdrop-filter:
    blur(16px)
    saturate(120%) !important;

  -webkit-backdrop-filter:
    blur(16px)
    saturate(120%) !important;
}


/* ==========================================================
   HOVER – EINHEITLICH HELL ORANGE LEUCHTEND
   ========================================================== */

body.servicePage
.pageHero
.heroActions a:hover,

body.servicePage
.detailHero
.heroActions a:hover{

  color:#754414 !important;

  background:
    linear-gradient(
      135deg,
      rgba(255,226,188,.98),
      rgba(255,207,151,.96)
    ) !important;

  border-color:
    rgba(226,151,78,.38) !important;

  transform:
    translateY(-2px) !important;

  box-shadow:
    0 16px 34px rgba(214,145,77,.14),
    0 0 24px rgba(255,191,125,.18),
    inset 0 1px 0 rgba(255,255,255,.92) !important;
}


/* leichter Lichtreflex */
body.servicePage
.pageHero
.heroActions a::before,

body.servicePage
.detailHero
.heroActions a::before{

  content:"";

  position:absolute;

  left:10%;
  right:10%;

  top:3px;

  height:11px;

  border-radius:999px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.46),
      transparent
    );

  opacity:.50;

  pointer-events:none;
}


/* ==========================================================
   ACTIVE
   ========================================================== */

body.servicePage
.pageHero
.heroActions a:active,

body.servicePage
.detailHero
.heroActions a:active{

  transform:
    translateY(0) !important;

  box-shadow:
    0 8px 18px rgba(190,129,69,.10),
    inset 0 1px 0 rgba(255,255,255,.76) !important;
}


/* ==========================================================
   FOCUS
   ========================================================== */

body.servicePage
.pageHero
.heroActions a:focus-visible,

body.servicePage
.detailHero
.heroActions a:focus-visible{

  outline:
    3px solid rgba(238,169,101,.24) !important;

  outline-offset:
    3px !important;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media(max-width:600px){

  body.servicePage
  .pageHero
  .heroActions,

  body.servicePage
  .detailHero
  .heroActions{

    display:grid !important;

    grid-template-columns:1fr !important;

    width:100% !important;
  }


  body.servicePage
  .pageHero
  .heroActions a,

  body.servicePage
  .detailHero
  .heroActions a{

    width:100% !important;

    min-width:0 !important;
  }

}


/* GLOBAL_SERVICE_HERO_ACTIONS_V1_END */


/* SHOP_NETWORK_RESPONSIVE_V1_START */

@media(max-width:1050px){
  .shopWorldHeroGrid,
  .networkShopHeroGrid,
  .networkCompatibilityGrid{
    grid-template-columns:1fr;
  }

  .shopWorldVisual,
  .networkShopVisual{
    min-height:390px;
  }

  .shopCategoryGrid{
    grid-template-columns:1fr;
  }
}

@media(max-width:760px){
  .shopWorldHero,
  .networkShopHero{
    padding:52px 0 62px;
  }

  .shopWorldCopy h1,
  .networkShopCopy h1{
    font-size:clamp(46px,13vw,62px);
  }

  .shopWorldVisual,
  .networkShopVisual{
    min-height:340px;
    border-radius:27px;
  }

  .shopWorldNode{
    min-width:145px;
    padding:11px 12px;
  }

  .nodeRouter{left:3%;top:11%}
  .nodeFirewall{right:3%;top:16%}
  .nodeFiber{left:8%;bottom:8%}

  .shopWorldCore{
    width:118px;
    height:118px;
    border-radius:28px;
  }

  .shopWorldCore strong{
    font-size:23px;
  }

  .shopCategoryHead,
  .networkProductHead{
    align-items:flex-start;
    flex-direction:column;
  }

  .shopCategorySection,
  .networkProductSection,
  .networkCompatibilitySection{
    padding:64px 0;
  }

  .shopCategoryCard{
    min-height:290px;
    padding:25px;
  }

  .networkDevice{
    width:78%;
    padding:20px;
  }

  .networkFiberChip{
    right:4%;
    top:8%;
  }

  .networkStatusChip{
    left:4%;
    bottom:8%;
  }

  .compatibilityFlow{
    align-items:stretch;
    flex-direction:column;
  }

  .compatibilityFlow>i{
    transform:rotate(90deg);
    align-self:center;
  }

  .networkProductCard{
    flex-basis:84vw;
  }
}

@media(prefers-reduced-motion:reduce){
  .shopWorldNode,
  .networkVisualPulse{
    animation:none !important;
  }
}

/* SHOP_NETWORK_RESPONSIVE_V1_END */

/* NETWORK_GLASS_SIMULATION_RESPONSIVE_V2_START */

@media(max-width:900px){

  body.shopNetworkPage .networkShopVisual.networkGlassSimulation{
    min-height:410px;
  }

  .networkSimNode{
    min-width:135px;
    padding:12px;
  }

  .networkSimIcon{
    width:36px;
    height:36px;
  }

  .simProvider{
    left:5%;
    top:9%;
  }

  .simFiber{
    left:42%;
    top:18%;
  }

  .simGateway{
    left:28%;
    bottom:22%;
  }

  .simSite{
    right:4%;
    bottom:8%;
  }

  .networkSimModule{
    right:5%;
    top:8%;
  }
}

@media(max-width:620px){

  body.shopNetworkPage .networkShopVisual.networkGlassSimulation{
    min-height:520px;
  }

  .networkSimNode{
    position:relative;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
    width:calc(100% - 42px);
    margin:18px auto 0;
  }

  .networkSimModule{
    position:relative;
    right:auto;
    top:auto;
    width:calc(100% - 42px);
    margin:12px auto 0;
  }

  .networkSimPath{
    display:none;
  }

  .networkSimStatus{
    left:21px;
    bottom:15px;
  }
}

@media(prefers-reduced-motion:reduce){
  .networkSimPath i{
    animation:none !important;
  }
}

/* NETWORK_GLASS_SIMULATION_RESPONSIVE_V2_END */

/* NETWORK_FLOW_CLEAN_RESPONSIVE_V3_START */

@media(max-width:1050px){

  .networkFlowTrack{
    grid-template-columns:
      minmax(78px,1fr)
      25px
      minmax(78px,1fr)
      25px
      minmax(70px,.9fr)
      25px
      minmax(88px,1.1fr)
      25px
      minmax(88px,1.05fr);

    gap:2px;
  }

  .networkFlowStep{
    padding-left:6px;
    padding-right:6px;
  }

}


@media(max-width:760px){

  body.shopNetworkPage
  .networkShopVisual.networkFlowV3{
    min-height:auto;
    padding:26px 22px;
  }

  .networkFlowHeader{
    margin-bottom:22px;
  }

  .networkFlowTrack{
    display:flex;
    flex-direction:column;

    align-items:stretch;

    gap:8px;
  }

  .networkFlowStep{
    width:100%;

    flex-direction:row;

    text-align:left;

    padding:13px 15px;
  }

  .networkFlowStep strong,
  .networkFlowStep small{
    white-space:normal;
  }

  .networkFlowLink{
    width:2px;
    height:24px;

    align-self:center;
  }

  .networkFlowLink::before{
    top:0;
    bottom:0;

    left:50%;
    right:auto;

    width:1px;
    height:auto;

    background:
      linear-gradient(
        180deg,
        rgba(174,129,91,.14),
        rgba(171,120,77,.48),
        rgba(174,129,91,.14)
      );
  }

  .networkFlowLink::after{
    display:none;
  }

  .networkFlowLink span{
    top:0;
    left:50%;

    margin-left:-3px;

    animation:
      networkFlowPacketMobile 3s linear infinite;
  }

  .networkFlowInfo{
    margin-top:22px;
    grid-template-columns:1fr;
  }

}


@keyframes networkFlowPacketMobile{

  0%{
    top:0;
    opacity:.2;
  }

  20%{
    opacity:1;
  }

  80%{
    opacity:1;
  }

  100%{
    top:calc(100% - 7px);
    opacity:.2;
  }

}


@media(prefers-reduced-motion:reduce){

  .networkFlowLink span{
    animation:none !important;
  }

}

/* NETWORK_FLOW_CLEAN_RESPONSIVE_V3_END */

/* NETWORK_ROUTE_RESPONSIVE_V5_START */

@media(max-width:1050px){

  .networkRouteV5Stage{
    height:275px;
  }

  .networkRouteV5Node{
    min-width:125px;

    padding:11px 12px;
  }

  .routeV5Provider{
    left:0;
  }

  .routeV5Access{
    left:34%;
  }

  .routeV5Handover{
    right:0;
  }

  .routeV5Router{
    right:3%;
  }

  .routeV5Site{
    left:4%;
  }

}


@media(max-width:760px){

  body.shopNetworkPage
  .networkShopVisual.networkFlowV5{
    min-height:auto;

    padding:24px 20px 22px;
  }


  .networkRouteV5Stage{
    height:auto;

    display:flex;
    flex-direction:column;

    gap:10px;

    margin:0;
  }


  .networkRouteV5Node{
    position:relative;

    left:auto !important;
    right:auto !important;

    top:auto !important;
    bottom:auto !important;

    width:100%;

    max-width:none;
    min-width:0;

    padding:13px 15px;
  }


  .networkRouteV5Line{
    position:relative;

    left:auto !important;
    right:auto !important;

    top:auto !important;
    bottom:auto !important;

    width:1px !important;
    height:22px !important;

    margin:0 auto;

    transform:none !important;

    background:
      linear-gradient(
        180deg,
        rgba(180,136,100,.15),
        rgba(170,119,77,.48),
        rgba(180,136,100,.15)
      );
  }


  .networkRouteV5Line::before{
    background:
      linear-gradient(
        180deg,
        rgba(180,136,100,.15),
        rgba(170,119,77,.48),
        rgba(180,136,100,.15)
      );
  }


  .networkRouteV5Line::after{
    display:none;
  }


  .networkRouteV5Line i{
    left:-3px !important;
    top:0 !important;

    animation:
      networkRouteV5PacketVertical
      3s linear infinite !important;
  }


  .networkRouteV5Legend{
    grid-template-columns:1fr 1fr;

    margin-top:20px;
  }

}


@media(max-width:480px){

  .networkRouteV5Legend{
    grid-template-columns:1fr;
  }

}


@media(prefers-reduced-motion:reduce){

  .networkRouteV5Line i{
    animation:none !important;
  }

}

/* NETWORK_ROUTE_RESPONSIVE_V5_END */

/* CONNECT_INTERNET_NETWORK_HERO_RESPONSIVE_V1_START */

@media(max-width:1100px){

  .internetHeroV1Shell{
    grid-template-columns:1fr;
  }

  .internetHeroNetwork{
    min-height:430px;
  }

}


@media(max-width:760px){

  body.servicePage.themeConnect
  .internetHeroV1{
    padding:52px 0 62px;
  }


  .internetHeroV1Copy h1{
    font-size:
      clamp(46px,13vw,62px);
  }


  .internetHeroNetwork{
    min-height:auto;

    padding:24px 20px 22px;
  }


  .internetHeroNetworkStage{
    height:auto;

    display:flex;
    flex-direction:column;

    gap:10px;

    margin:0;
  }


  .internetHeroNetworkNode{
    position:relative;

    left:auto !important;
    right:auto !important;

    top:auto !important;
    bottom:auto !important;

    width:100%;

    max-width:none;
    min-width:0;

    padding:13px 15px;
  }


  .internetHeroNetworkLine{
    position:relative;

    left:auto !important;
    right:auto !important;

    top:auto !important;
    bottom:auto !important;

    width:1px !important;
    height:22px !important;

    margin:0 auto;

    transform:none !important;
  }


  .internetHeroNetworkLine::before{
    background:
      linear-gradient(
        180deg,
        rgba(84,172,213,.14),
        rgba(54,155,202,.50),
        rgba(84,172,213,.14)
      );
  }


  .internetHeroNetworkLine::after{
    display:none;
  }


  .internetHeroNetworkLine i{
    left:-3px !important;
    top:0 !important;

    animation:
      internetHeroPacketVertical
      3s linear infinite !important;
  }


  .internetHeroNetworkLegend{
    grid-template-columns:1fr 1fr;

    margin-top:20px;
  }

}


@media(max-width:480px){

  .internetHeroNetworkLegend{
    grid-template-columns:1fr;
  }

}


@media(prefers-reduced-motion:reduce){

  .internetHeroNetworkLine i{
    animation:none !important;
  }

}

/* CONNECT_INTERNET_NETWORK_HERO_RESPONSIVE_V1_END */

/* CONNECT_INTERNET_HERO_POSITION_RESPONSIVE_V2_START */

@media(max-width:1100px){

  body.servicePage.themeConnect.internetPage
  .pageHero.internetHeroV1
  .internetHeroV1Shell{
    grid-template-columns:1fr !important;

    grid-template-rows:auto auto !important;

    gap:34px !important;
  }


  body.servicePage.themeConnect.internetPage
  .pageHero.internetHeroV1
  .internetHeroV1Copy{
    grid-column:1 !important;
    grid-row:1 !important;
  }


  body.servicePage.themeConnect.internetPage
  .pageHero.internetHeroV1
  .internetHeroNetwork{
    grid-column:1 !important;
    grid-row:2 !important;
  }

}

/* CONNECT_INTERNET_HERO_POSITION_RESPONSIVE_V2_END */

/* INTERNET_FINAL_STRUCTURE_RESPONSIVE_V3_START */

@media(max-width:1000px){

  .internetSpeedCheckBar{
    grid-template-columns:1fr;
  }


  .internetSpeedFields{
    grid-template-columns:
      1fr .45fr 1fr auto;
  }

}


@media(max-width:760px){

  .internetSpeedCheckV3{
    padding:26px 0 38px;
  }


  .internetSpeedCheckBar{
    padding:16px;
  }


  .internetSpeedFields{
    grid-template-columns:1fr 1fr;
  }


  .internetSpeedFields
  label:first-child{
    grid-column:1/-1;
  }


  .internetSpeedFields .glass{
    grid-column:1/-1;

    width:100%;
  }


  .internetDeviceBanner{
    grid-template-columns:
      74px minmax(0,1fr);

    gap:14px;

    padding:15px;
  }


  .internetDeviceMiniVisual,
  .internetTvMiniVisual{
    width:70px;
  }


  .internetDeviceBannerLink{
    grid-column:1/-1;

    justify-content:center;
  }


  .internetFaqV3{
    padding:50px 0 64px;
  }

}


@media(max-width:480px){

  .internetSpeedFields{
    grid-template-columns:1fr;
  }


  .internetSpeedFields
  label:first-child,
  .internetSpeedFields .glass{
    grid-column:auto;
  }


  .internetSpeedCheckIntro{
    align-items:flex-start;
  }

}

/* INTERNET_FINAL_STRUCTURE_RESPONSIVE_V3_END */

/* CONNECT_TV_FINAL_RESPONSIVE_START */

@media (max-width:1050px){

.tvHeroGrid{
grid-template-columns:1fr;
}

.tvPlanGrid{
grid-template-columns:1fr;
}

.tvPlanFeatured{
transform:none;
}

.tvChannelOverview{
grid-template-columns:1fr 1fr;
}

}

@media (max-width:700px){

.tvHeroV1{
padding:52px 0 62px;
}

.tvHeroCopy h1{
  font-size:
    clamp(44px,11vw,60px);

  line-height:.98;
}

.tvHeroVisual{
min-height:360px;
}

.tvPlansV1, .tvCompareV1, .tvChannelsV1, .tvLanguageV1, .tvFaqV1{
padding:54px 0;
}

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

.tvCompareTable{
overflow-x:auto;
}

.tvCompareRow{
min-width:620px;
}

.tvChannelOverview{
grid-template-columns:1fr 1fr;
}

.tvChannelSearch{
grid-template-columns:
      42px 1fr;
}

.tvChannelSearch a{
grid-column:1/-1;
}

.tvLanguageGrid{
grid-template-columns:1fr;
}

.tvLanguageItem{
grid-template-columns:
      40px minmax(0,1fr) auto;
}

.tvLanguageItem>em{
grid-column:3;
}

}

@media (max-width:460px){

.tvChannelOverview{
grid-template-columns:1fr;
}

}

@media (max-width:760px){



.tvAudienceSwitchV4{
width:100%;

    max-width:360px;

    margin-bottom:22px;
}

body.tvConnectPage .tvPlanGrid{
gap:16px;
}

body.tvConnectPage .tvPlanCard{
min-height:auto;

    padding:21px;
}

body.tvConnectPage .tvLanguageGrid{
grid-template-columns:1fr;
}

body.tvConnectPage .tvLanguageItem{
grid-template-columns:
      42px
      minmax(0,1fr)
      auto;

    gap:11px;
}

body.tvConnectPage .tvLanguageItem>em{
grid-column:3;

    margin-top:-8px;
}



body.tvConnectPage .tvSectionHead h2, body.tvConnectPage .tvFaqHead h2{
font-size:
      clamp(34px,9vw,48px) !important;
}

body.tvConnectPage .tvSectionHead{
gap:15px;
}

}

@media (max-width:500px){

body.tvConnectPage .tvLanguageItem{
padding:13px;
}

body.tvConnectPage .tvAudienceSwitchV4{
width:100%;
}

}

@media (max-width: 1200px){

.tvChannelPreviewGrid{
grid-template-columns:repeat(2,minmax(0,1fr));
}

}

@media (max-width: 900px){

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

.tvBoxMiniRight{
align-items:flex-start;
}

.tvBoxMiniRight small{
text-align:left;
}

}

@media (max-width: 680px){

.tvChannelPreviewSection{
padding:10px 0 18px;
}

.tvChannelPreviewGrid{
grid-template-columns:1fr;
    gap:14px;
}

.tvChannelCard{
padding:18px;
    border-radius:22px;
}

.tvChannelCard h3{
font-size:23px;
}

.tvLanguageList li{
flex-direction:column;
    gap:4px;
}

.tvLanguageList li span{
white-space:normal;
}

.tvBoxMiniCard{
padding:18px;
    border-radius:22px;
}

.tvBoxMiniLeft h3{
font-size:24px;
}

}

/* TV_HEAD_CENTER_RESP_START */

@media(max-width:900px){

  body.tvConnectPage .tvSectionHead,
  body.tvConnectPage .tvFaqHead{
    width:100%;

    max-width:none;

    display:flex;
    flex-direction:column;

    align-items:center;

    text-align:center;
  }


}

/* TV_HEAD_CENTER_RESP_END */


/* TV_CENTER_FIX_RESP_START */

@media (max-width:900px){

  body.tvConnectPage .tvCompareV1 .tvSectionHead,
  body.tvConnectPage .tvChannelsV1 .tvSectionHead,
  body.tvConnectPage .tvLanguageV1 .tvSectionHead,
  body.tvConnectPage .tvFaqV1 .tvFaqHead{
    align-items:center;
    text-align:center;
  }

  body.tvConnectPage .tvCompareV1 .tvSectionHead h2,
  body.tvConnectPage .tvChannelsV1 .tvSectionHead h2,
  body.tvConnectPage .tvLanguageV1 .tvSectionHead h2,
  body.tvConnectPage .tvFaqV1 .tvFaqHead h2{
    font-size:clamp(34px,9vw,48px);
    line-height:1.04;
    text-align:center;
    margin-left:auto;
    margin-right:auto;
  }

  body.tvConnectPage .tvCompareV1 .tvSectionHead p,
  body.tvConnectPage .tvChannelsV1 .tvSectionHead p,
  body.tvConnectPage .tvLanguageV1 .tvSectionHead p,
  body.tvConnectPage .tvFaqV1 .tvFaqHead p{
    text-align:center;
    margin-left:auto;
    margin-right:auto;
  }

  body.tvConnectPage .tvChannelOverview{
    grid-template-columns:1fr 1fr;
    justify-content:center;
  }

  body.tvConnectPage .tvChannelOverview > *{
    text-align:center;
  }

  body.tvConnectPage .tvChannelScroller{
    max-width:760px;
    margin-left:auto;
    margin-right:auto;
  }

  body.tvConnectPage .tvLanguageGrid{
    margin-left:auto;
    margin-right:auto;
  }


}

@media (max-width:560px){

  body.tvConnectPage .tvCompareV1 .tvSectionHead h2,
  body.tvConnectPage .tvChannelsV1 .tvSectionHead h2,
  body.tvConnectPage .tvLanguageV1 .tvSectionHead h2,
  body.tvConnectPage .tvFaqV1 .tvFaqHead h2{
    font-size:clamp(30px,10.5vw,40px);
    line-height:1.05;
  }

  body.tvConnectPage .tvChannelOverview{
    grid-template-columns:1fr;
  }
}

/* TV_CENTER_FIX_RESP_END */


/* TV_SCROLLER_NARROW_FIX_RESP_START */

@media (max-width:900px){
  body.tvConnectPage .tvChannelScroller{
    max-width:680px;
    margin-left:auto;
    margin-right:auto;
  }

  body.tvConnectPage .tvChannelScrollerNote{
    max-width:680px;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
  }
}

@media (max-width:560px){
  body.tvConnectPage .tvChannelScroller{
    max-width:100%;
  }

  body.tvConnectPage .tvChannelScrollerNote{
    max-width:100%;
  }
}

/* TV_SCROLLER_NARROW_FIX_RESP_END */


/* TV_TITLE_AXIS_FINAL_RESP_START */

@media(max-width:900px){

  body.tvConnectPage .tvPlansV1 .tvSectionHead,
  body.tvConnectPage .tvCompareV1 .tvSectionHead,
  body.tvConnectPage .tvChannelsV1 .tvSectionHead,
  body.tvConnectPage .tvLanguageV1 .tvSectionHead,
  body.tvConnectPage .tvFaqV1 .tvFaqHead{
    width:100%;
    max-width:none;

    margin-left:auto !important;
    margin-right:auto !important;

    align-items:center !important;
    justify-content:center !important;

    text-align:center !important;
  }

}

/* TV_TITLE_AXIS_FINAL_RESP_END */


/* TV_PLAN_COMPACT_RESP_START */

/* Halbfenster / Tablet */
@media (max-width:1100px){

  body.tvConnectPage .tvPlanGrid{
    gap:16px !important;
  }

  body.tvConnectPage .tvPlanCard{
    min-height:0 !important;
    height:auto !important;

    padding:24px 24px 20px !important;
  }

  body.tvConnectPage .tvPlanTop{
    margin-bottom:14px !important;
  }

  body.tvConnectPage .tvPlanCard h3{
    margin-bottom:10px !important;
  }

  body.tvConnectPage .tvPlanCard p{
    margin-bottom:14px !important;
  }

  body.tvConnectPage .tvPlanFeatures{
    margin-top:10px !important;
    margin-bottom:16px !important;
  }

  body.tvConnectPage .tvPlanFeatures li{
    margin-bottom:6px !important;
    line-height:1.45 !important;
  }

  body.tvConnectPage .tvPlanPrice{
    margin-top:18px !important;
    margin-bottom:8px !important;
  }

  body.tvConnectPage .tvPlanCard .glass.firstTalk{
    margin-top:12px !important;
    min-height:46px !important;
  }
}


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

  body.tvConnectPage .tvPlanGrid{
    grid-template-columns:1fr 1fr !important;
    gap:16px !important;
  }

  body.tvConnectPage .tvPlanCard{
    padding:22px 20px 18px !important;
  }

  body.tvConnectPage .tvPlanFeatures{
    margin-top:8px !important;
    margin-bottom:14px !important;
  }

  body.tvConnectPage .tvPlanPrice{
    margin-top:16px !important;
  }
}


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

  body.tvConnectPage .tvPlanGrid{
    grid-template-columns:1fr !important;
    gap:14px !important;
  }

  body.tvConnectPage .tvPlanCard{
    width:100% !important;

    min-height:0 !important;
    height:auto !important;

    padding:20px 18px 17px !important;
  }

  body.tvConnectPage .tvPlanCard h3{
    font-size:clamp(30px,8vw,40px) !important;
    line-height:1.05 !important;
  }

  body.tvConnectPage .tvPlanFeatures{
    margin-top:10px !important;
    margin-bottom:12px !important;
  }

  body.tvConnectPage .tvPlanFeatures li{
    margin-bottom:5px !important;
  }

  body.tvConnectPage .tvPlanPrice{
    margin-top:14px !important;
  }

  body.tvConnectPage .tvPlanCard .glass.firstTalk{
    margin-top:10px !important;
  }
}

/* TV_PLAN_COMPACT_RESP_END */


/* TV_HERO_REMOTE_RESP_START */


@media(max-width:1050px){

  body.tvConnectPage .tvHeroScreen{
    left:61%;

    width:63%;
    height:52%;
  }

  body.tvConnectPage .tvHeroRemote{
    left:6%;

    width:127px;

    padding:
      13px 10px 11px;
  }

  body.tvConnectPage
  .tvHeroRemoteAction{
    min-height:52px;
  }

}


@media(max-width:760px){

  body.tvConnectPage .tvHeroVisual{
    min-height:390px;
  }

  body.tvConnectPage .tvHeroScreen{
    left:58%;
    top:40%;

    width:73%;
    height:45%;
  }

  body.tvConnectPage
  .tvHeroScreenContent > strong{
    font-size:54px;
  }

  body.tvConnectPage .tvHeroRemote{
    left:6%;
    bottom:4%;

    width:115px;

    padding:
      11px 9px;

    border-radius:27px;

    gap:6px;

    transform:
      rotate(-3deg);
  }

  body.tvConnectPage
  .tvHeroRemoteAction{
    min-height:47px;

    padding:
      7px 6px;

    gap:6px;
  }

  body.tvConnectPage
  .tvHeroRemoteIcon{
    flex-basis:25px;

    width:25px;
    height:25px;

    font-size:11px;
  }

  body.tvConnectPage
  .tvHeroRemoteAction strong{
    font-size:8px;
  }

  body.tvConnectPage
  .tvHeroRemoteAction small{
    font-size:6px;
  }

}


@media(max-width:520px){

  body.tvConnectPage .tvHeroVisual{
    min-height:350px;
  }

  body.tvConnectPage .tvHeroScreen{
    left:60%;
    top:38%;

    width:70%;
    height:40%;
  }

  body.tvConnectPage
  .tvHeroScreenContent > strong{
    font-size:46px;
  }

  body.tvConnectPage .tvHeroRemote{
    left:4%;
    bottom:4%;

    width:103px;

    padding:
      9px 7px;

    gap:5px;
  }

  body.tvConnectPage
  .tvHeroRemotePower{
    width:25px;
    height:25px;

    font-size:12px;
  }

  body.tvConnectPage
  .tvHeroRemoteAction{
    min-height:41px;
  }

}


/* TV_HERO_REMOTE_RESP_END */


/* TV_FINAL_ALIGNMENT_CLEAN_RESP_V4_START */


@media(max-width:760px){

  body.tvConnectPage
  .tvLegalBottom{
    padding:
      38px 0 44px !important;
  }


  body.tvConnectPage
  .tvLegalBottom
  .container{
    width:
      calc(100% - 30px) !important;
  }


  body.tvConnectPage
  .tvLegalCard{
    width:100% !important;

    border-radius:
      21px !important;
  }


  body.tvConnectPage .tvLegalToggle{
    min-height:58px !important;

    padding:
      11px 13px !important;

    gap:10px !important;
  }


  body.tvConnectPage .tvLegalTitle{
    font-size:15px !important;
    white-space:normal !important;
  }


  body.tvConnectPage .tvLegalPlus{
    flex-basis:34px !important;

    width:34px !important;
    height:34px !important;

    min-width:34px !important;
    min-height:34px !important;

    font-size:16px !important;
  }


  body.tvConnectPage
  .tvLegalContent{
    padding:
      0 16px 19px !important;
  }


  body.tvConnectPage
  .tvLegalLinks{
    flex-direction:
      column !important;

    align-items:
      stretch !important;
  }


  body.tvConnectPage
  .tvLegalLinks a,
  body.tvConnectPage
  .tvLegalSoon{
    width:100% !important;

    justify-content:
      center !important;
  }


  /* Kleine Überschriften auch mobil exakt mittig */

  body.tvConnectPage
  .tvSectionHead .k,
  body.tvConnectPage
  .tvFaqHead .k,
  body.tvConnectPage
  .tvChannelEyebrow,
  body.tvConnectPage
  .tvBoxMiniLeft
  .tvChannelEyebrow{
    width:100% !important;

    margin-left:
      auto !important;

    margin-right:
      auto !important;

    text-align:
      center !important;
  }

}


/* TV_FINAL_ALIGNMENT_CLEAN_RESP_V4_END */


/* CONNECT_TV_FINAL_RESPONSIVE_END */


/* TV_GREEN_LEGAL_BROADCAST_RESPONSIVE_V1_START */

@media (max-width: 1050px){
  body.tvConnectPage .tvHeroBroadcast{
    inset:26% 14% 20% 14%;
  }
}

@media (max-width: 760px){

  body.tvConnectPage .tvHeroBroadcast{
    inset:29% 10% 20% 10%;
    border-radius:24px;
  }

  body.tvConnectPage .tvLegalBottom{
    padding:6px 0 28px;
  }

  body.tvConnectPage .tvLegalToggle{
    padding:18px 18px;
  }

  body.tvConnectPage .tvLegalToggle span{
    font-size:22px;
  }

  body.tvConnectPage .tvLegalToggle b{
    width:38px;
    height:38px;
    font-size:24px;
  }

  body.tvConnectPage .tvLegalContent{
    padding:0 18px 20px;
  }

  body.tvConnectPage .tvLegalLinks{
    flex-direction:column;
    align-items:stretch;
  }

  body.tvConnectPage .tvLegalLinks a,
  body.tvConnectPage .tvLegalSoon{
    justify-content:center;
    width:100%;
  }
}

@media (max-width: 520px){
  body.tvConnectPage .tvHeroBroadcast{
    inset:31% 8% 19% 8%;
  }
}



/* TV_GREEN_LEGAL_BROADCAST_RESPONSIVE_V1_END */


/* TV_CHANNEL_SCROLL_COMPACT_SHOP_RESP_START */

@media(max-width:760px){

  body.tvConnectPage .tvChannelTrack{
    gap:10px;

    padding:
      14px 18px;

    animation-duration:28s;
  }

  body.tvConnectPage .tvChannelLogoCard{
    min-width:110px;

    height:60px;

    padding:
      0 14px;

    font-size:15px;
  }

  body.tvConnectPage .tvBoxMiniCard{
    flex-direction:column;

    align-items:flex-start;

    padding:
      20px;
  }

  body.tvConnectPage .tvBoxMiniRight{
    width:100%;

    align-items:flex-start;
  }

  body.tvConnectPage .tvBoxMiniRight .glass.firstTalk{
    width:100%;
  }

}

@media(max-width:760px){

  body.tvConnectPage .tvChannelScroller,
  body.tvConnectPage .tvChannelScrollerNote{
    width:calc(100% - 28px);
  }

  body.tvConnectPage .tvBoxMiniStrip .container{
    width:calc(100% - 28px);
  }

  body.tvConnectPage .tvBoxMiniCard{
    padding:18px;
  }

  body.tvConnectPage .tvLegalBottom .container{
    width:calc(100% - 28px);
  }

}

/* TV_CHANNEL_SCROLL_COMPACT_SHOP_RESP_END */

/* VOICE_REDESIGN_RESP_V1_START */


@media(max-width:1100px){

  body.voicePage .voiceHeroV2Grid{
    grid-template-columns:
      minmax(0,1fr)
      minmax(360px,44%);
  }


  body.voicePage .voiceHeroCockpit{
    min-height:400px;
  }


  body.voicePage .voiceSolutionGrid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }


  body.voicePage .voiceSolutionGrid article:last-child{
    grid-column:
      1 / -1;

    max-width:560px;

    width:100%;

    margin:auto;
  }

}


@media(max-width:820px){

  body.voicePage .voiceHeroV2{
    padding:
      54px 0 64px;
  }


  body.voicePage .voiceHeroV2Grid{
    grid-template-columns:1fr;

    gap:34px;
  }


  body.voicePage .voiceHeroCockpit{
    min-height:390px;

    max-width:620px;

    width:100%;

    margin:auto;
  }


  body.voicePage .voiceSignalGrid{
    grid-template-columns:1fr;
  }


  body.voicePage .voiceMinuteGridV2{
    grid-template-columns:1fr;

    max-width:560px;
  }


  body.voicePage .voiceMinuteGridV2 article{
    min-height:auto;
  }


  body.voicePage .voiceSolutionGrid{
    grid-template-columns:1fr;

    max-width:590px;

    margin:auto;
  }


  body.voicePage .voiceSolutionGrid article:last-child{
    grid-column:auto;

    max-width:none;
  }


  body.voicePage .voiceSolutionCard{
    min-height:auto;
  }


  body.voicePage .voiceOptionGrid{
    grid-template-columns:1fr;

    max-width:620px;
  }


  body.voicePage .voicePortPanel{
    grid-template-columns:1fr;
  }


  body.voicePage .voiceDeviceStrip{
    flex-direction:column;

    align-items:flex-start;
  }


  body.voicePage .voiceDevicePills{
    max-width:none;

    justify-content:flex-start;
  }

}


@media(max-width:620px){

  body.voicePage .voiceHeroV2{
    padding:
      42px 0 52px;
  }


  body.voicePage .voiceHeroV2 h1{
    font-size:
      clamp(43px,12vw,58px);
  }


  body.voicePage .voiceHeroLead{
    font-size:15px;
  }


  body.voicePage .voiceHeroActions{
    flex-direction:column;
  }


  body.voicePage .voicePrimaryButton,
  body.voicePage .voiceSecondaryButton{
    width:100%;
  }


  body.voicePage .voiceHeroFacts{
    display:grid;

    grid-template-columns:1fr;
  }


  body.voicePage .voiceHeroFacts span{
    width:100%;
  }


  body.voicePage .voiceHeroCockpit{
    min-height:350px;

    border-radius:26px;
  }


  body.voicePage .voiceCallPanel{
    left:57%;

    width:69%;
    height:55%;
  }


  body.voicePage .voiceCallRing{
    width:125px;
    height:125px;
  }


  body.voicePage .voiceCallCore strong{
    font-size:27px;
  }


  body.voicePage .voiceFloatCard{
    min-width:135px;

    padding:
      9px 10px;
  }


  body.voicePage .voiceFloatSip{
    left:4%;
    top:15%;
  }


  body.voicePage .voiceFloatTeams{
    right:3%;
    top:17%;
  }


  body.voicePage .voiceFloatPort{
    right:5%;
    bottom:7%;
  }


  body.voicePage .voiceFloatIcon{
    flex-basis:29px;

    width:29px;
    height:29px;
  }


  body.voicePage .voiceSectionHead{
    margin-bottom:25px;
  }


  body.voicePage .voiceSectionHead h2{
    font-size:
      clamp(34px,9.5vw,46px);
  }


  body.voicePage .voicePlansSection,
  body.voicePage .voiceMinuteSectionV2,
  body.voicePage .voiceSolutionsSection,
  body.voicePage .voiceOptionsSection,
  body.voicePage .voicePortSection,
  body.voicePage .voiceFaqSection{
    padding:
      54px 0;
  }


  body.voicePage #voiceQuoteGrid{
    grid-template-columns:
      1fr !important;
  }


  body.voicePage .voiceOptionGrid article{
    grid-template-columns:
      39px minmax(0,1fr);

    align-items:start;
  }


  body.voicePage .voiceOptionGrid b{
    grid-column:
      2;

    white-space:normal;
  }


  body.voicePage .voicePortPanel{
    padding:21px;

    border-radius:22px;
  }


  body.voicePage .voiceFaqList summary{
    min-height:58px;

    padding-left:14px;

    font-size:11px;
  }


  body.voicePage .voiceFaqList details > div{
    padding:
      0 48px 16px 14px;
  }


  body.voicePage .voiceLegalCard{
    width:
      min(100%,520px);
  }


  body.voicePage .voiceLegalCard summary span{
    font-size:14px;

    white-space:normal;
  }

}


/* VOICE_REDESIGN_RESP_V1_END */


/* INTERNET_FIBER_REAL_RESP_V3_START */


@media(max-width:900px){

  body.internetPage
  .internetTvOptionsBanner{
    grid-template-columns:
      180px
      minmax(0,1fr) !important;

    gap:22px !important;
  }


  body.internetPage
  .internetTvOptionsActions{
    grid-column:
      1 / -1 !important;

    min-width:0 !important;

    flex-direction:row !important;

    justify-content:center !important;
  }

}


@media(max-width:680px){

  body.internetPage
  .internetTvOptionsV4{
    padding:
      25px 0 52px !important;
  }


  body.internetPage
  .internetTvOptionsBanner{
    grid-template-columns:
      1fr !important;

    padding:
      20px !important;

    gap:20px !important;

    border-radius:
      23px !important;
  }


  body.internetPage
  .internetTvOptionsVisual{
    width:190px !important;
    height:150px !important;

    margin:
      0 auto !important;
  }


  body.internetPage
  .internetTvOptionsCopy{
    text-align:center !important;
  }


  body.internetPage
  .internetTvOptionsCopy .k{
    text-align:center !important;
  }


  body.internetPage
  .internetTvOptionPills{
    justify-content:center !important;
  }


  body.internetPage
  .internetTvOptionsActions{
    flex-direction:column !important;
  }


  body.internetPage
  .internetTvPrimaryAction,
  body.internetPage
  .internetTvSecondaryAction{
    width:100% !important;
  }


  body.internetPage
  .internetFaqV3{
    padding:
      52px 0 62px !important;
  }


  body.internetPage
  .internetFaqV3List summary{
    min-height:58px !important;

    padding:
      0 13px 0 14px !important;
  }


  body.internetPage
  .internetFaqV3List details > p{
    padding:
      0 46px 15px 14px !important;
  }

}


/* INTERNET_FIBER_REAL_RESP_V3_END */

/* INTERNET_CENTER_LEGAL_RESP_V5_START */


@media(max-width:900px){

  body.internetPage .internetTvOptionsBanner{
    grid-template-columns:
      180px
      minmax(0,1fr) !important;

    gap:
      22px !important;
  }


  body.internetPage .internetTvOptionsActions{
    grid-column:
      1 / -1 !important;

    flex-direction:
      row !important;

    justify-content:
      center !important;
  }

}


@media(max-width:680px){

  body.internetPage .internetTvOptionsV4{
    padding:
      46px 0 54px !important;
  }


  body.internetPage .internetTvOptionsBanner{
    grid-template-columns:
      1fr !important;

    gap:
      18px !important;
  }


  body.internetPage .internetTvOptionsVisual{
    margin:
      0 auto !important;
  }


  body.internetPage .internetTvOptionsCopy{
    text-align:
      center !important;
  }


  body.internetPage .internetTvOptionsActions{
    grid-column:
      auto !important;

    flex-direction:
      column !important;
  }


  body.internetPage .internetTvPrimaryAction,
  body.internetPage .internetTvSecondaryAction{
    width:
      100% !important;
  }


  body.internetPage .internetLegalV5{
    padding:
      28px 0 32px !important;
  }


  body.internetPage .internetLegalV5 .shell{
    width:
      calc(100% - 28px) !important;
  }


  body.internetPage .internetLegalTitleV5{
    font-size:
      14px !important;

    white-space:
      normal !important;
  }


  body.internetPage .internetLegalActionsV5{
    flex-direction:
      column !important;
  }


  body.internetPage .internetLegalActionsV5 a,
  body.internetPage .internetLegalActionsV5 span{
    width:
      100% !important;

    justify-content:
      center !important;

    text-align:
      center !important;
  }

}


/* INTERNET_CENTER_LEGAL_RESP_V5_END */

/* INTERNET_TV_CENTER_RESP_V7_START */


@media(max-width:1050px){

  body.internetPage
  #tv-kombi
  #tvTariffGrid{
    width:min(
      100%,
      650px
    ) !important;

    grid-template-columns:
      repeat(
        2,
        minmax(0,300px)
      ) !important;

    justify-content:center !important;
  }

}


@media(max-width:700px){

  body.internetPage
  #tv-kombi{
    padding:
      52px 0 58px !important;
  }


  body.internetPage
  #tv-kombi
  > .shell{
    width:
      calc(100% - 28px) !important;
  }


  body.internetPage
  #tv-kombi
  #tvTariffGrid{
    width:100% !important;

    max-width:340px !important;

    grid-template-columns:
      minmax(0,1fr) !important;

    gap:
      14px !important;

    margin-left:auto !important;
    margin-right:auto !important;

    justify-content:center !important;
  }


  body.internetPage
  #tv-kombi
  #tvTariffGrid
  > *{
    max-width:330px !important;

    margin-left:auto !important;
    margin-right:auto !important;
  }

}


/* INTERNET_TV_CENTER_RESP_V7_END */

/* INTERNET_TV_SWITCH_CENTER_RESP_V8_START */

@media(max-width:700px){

  body.internetPage
  #tv-kombi
  > .shell
  > .audienceToggle{
    margin:
      0 auto 24px !important;

    align-self:center !important;
  }

}

/* INTERNET_TV_SWITCH_CENTER_RESP_V8_END */

/* INTERNET_AURORA_RESP_V10_START */


@media(max-width:700px){

  body.internetPage #tv-kombi::before{
    opacity:.65 !important;
  }


  body.internetPage
  #tv-kombi
  #tvTariffGrid
  .tariffCard:hover{
    transform:
      translateY(-4px) !important;
  }


  body.internetPage
  #internetTariffGrid
  .tariffCard:hover{
    transform:
      translateY(-4px) !important;
  }

}


@media(prefers-reduced-motion:reduce){

  body.internetPage .internetHeroV1::before,
  body.internetPage #tv-kombi::before{
    animation:none !important;
  }


  body.internetPage *,
  body.internetPage *::before,
  body.internetPage *::after{
    scroll-behavior:auto !important;
  }

}


/* INTERNET_AURORA_RESP_V10_END */

/* INTERNET_TV_VISUAL_MOTION_RESP_V11_START */


@media(max-width:760px){

  body.internetPage
  .internetTvStageV11{
    width:min(100%,390px) !important;

    height:175px !important;

    margin-bottom:
      22px !important;
  }


  body.internetPage
  .internetTvScreenStageV11{
    width:230px !important;
    height:132px !important;
  }


  body.internetPage
  .internetTvScreenLogoV11 strong{
    font-size:36px !important;
  }


  body.internetPage
  .internetTvStandV11{
    top:139px !important;
  }


  body.internetPage
  .internetTvFloatV11{
    min-width:108px !important;

    padding:
      7px 8px !important;
  }


  body.internetPage
  .internetTvFloatLiveV11{
    left:0 !important;
  }


  body.internetPage
  .internetTvFloatReplayV11{
    right:0 !important;
  }


  body.internetPage
  .internetTvFloatMobileV11{
    right:20px !important;
  }

}


@media(max-width:480px){

  body.internetPage
  .internetTvStageV11{
    height:155px !important;
  }


  body.internetPage
  .internetTvScreenStageV11{
    width:205px !important;
    height:118px !important;
  }


  body.internetPage
  .internetTvStandV11{
    top:124px !important;
  }


  body.internetPage
  .internetTvFloatV11{
    transform:
      scale(.88) !important;
  }


  body.internetPage
  .internetTvFloatLiveV11{
    left:-11px !important;
    top:24px !important;
  }


  body.internetPage
  .internetTvFloatReplayV11{
    right:-12px !important;
    top:27px !important;
  }


  body.internetPage
  .internetTvFloatMobileV11{
    display:none !important;
  }

}


@media(prefers-reduced-motion:reduce){

  body.internetPage #tv-kombi::before,
  body.internetPage #tv-kombi::after,
  body.internetPage .internetTvGlowV11,
  body.internetPage .internetTvScreenStageV11,
  body.internetPage .internetTvScreenReflectionV11,
  body.internetPage .internetTvLiveV11 i,
  body.internetPage .internetTvWaveV11,
  body.internetPage .internetTvFloatV11,
  body.internetPage .internetNetworkNode,
  body.internetPage .networkNode{
    animation:none !important;
  }

}


/* INTERNET_TV_VISUAL_MOTION_RESP_V11_END */

/* INTERNET_RESPONSIVE_NETWORK_FIX_V1_START */

/* --------------------------------------------------
   Internet-Seite:
   Halbbildschirm / Tablet / kleiner Desktop
   Ziel:
   - gleiches Desktop-Gefühl wie rechts
   - nur kleiner
   - kein hässliches frühes Umkippen
-------------------------------------------------- */

@media (max-width: 1180px) and (min-width: 981px){

  body.internetPage .heroActions{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:14px !important;
    justify-content:flex-start !important;
  }

  body.internetPage .heroActions .glass,
  body.internetPage .heroActions .ghost,
  body.internetPage .heroActions a{
    width:auto !important;
    min-width:210px !important;
    padding:16px 28px !important;
  }

  body.internetPage .internetHeroNetwork{
    max-width:100% !important;
    margin:26px auto 0 !important;
    padding:18px !important;
    border-radius:34px !important;
  }

  body.internetPage .internetHeroNetworkStage{
    position:relative !important;
    height:430px !important;
    width:122% !important;
    margin-left:-11% !important;
    margin-bottom:-74px !important;
    transform:scale(.82) !important;
    transform-origin:top center !important;
  }

  body.internetPage .internetHeroNetworkLegend{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:12px !important;
  }

  body.internetPage .internetHeroNetworkLegend > *{
    min-height:84px !important;
    padding:14px 14px !important;
  }

  body.internetPage .internetSpeedCheckBar{
    display:grid !important;
    grid-template-columns:minmax(240px,1.1fr) minmax(0,2fr) auto !important;
    align-items:end !important;
    gap:14px !important;
    padding:20px 22px !important;
  }

  body.internetPage .internetSpeedFields{
    display:grid !important;
    grid-template-columns:2fr .7fr 1fr !important;
    gap:12px !important;
    min-width:0 !important;
  }

  body.internetPage .internetSpeedFields label{
    min-width:0 !important;
  }

  body.internetPage .internetSpeedCheckBar .glass,
  body.internetPage .internetSpeedCheckBar a,
  body.internetPage .internetSpeedCheckBar button{
    width:auto !important;
    min-width:120px !important;
    align-self:end !important;
  }
}


/* --------------------------------------------------
   Tablet / halber Bildschirm
   Noch immer horizontales Layout
   Aber deutlich kleiner und kompakter
-------------------------------------------------- */

@media (max-width: 980px) and (min-width: 681px){

  body.internetPage .heroActions{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:12px !important;
    justify-content:flex-start !important;
  }

  body.internetPage .heroActions .glass,
  body.internetPage .heroActions .ghost,
  body.internetPage .heroActions a{
    width:auto !important;
    min-width:170px !important;
    padding:14px 22px !important;
  }

  body.internetPage .internetHeroNetwork{
    max-width:100% !important;
    margin:24px auto 0 !important;
    padding:16px !important;
    border-radius:28px !important;
  }

  body.internetPage .internetHeroNetworkHeader{
    margin-bottom:12px !important;
  }

  body.internetPage .internetHeroNetworkStage{
    position:relative !important;
    height:390px !important;
    width:136% !important;
    margin-left:-18% !important;
    margin-bottom:-108px !important;
    transform:scale(.72) !important;
    transform-origin:top center !important;
  }

  body.internetPage .internetHeroNetworkLegend{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:12px !important;
  }

  body.internetPage .internetHeroNetworkLegend > *{
    min-height:82px !important;
    padding:14px !important;
  }

  body.internetPage .internetSpeedCheckBar{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:14px !important;
    padding:18px !important;
  }

  body.internetPage .internetSpeedCheckIntro{
    max-width:none !important;
  }

  body.internetPage .internetSpeedFields{
    display:grid !important;
    grid-template-columns:1.7fr .7fr .9fr auto !important;
    gap:10px !important;
    align-items:end !important;
  }

  body.internetPage .internetSpeedFields label{
    min-width:0 !important;
  }

  body.internetPage .internetSpeedCheckBar .glass,
  body.internetPage .internetSpeedCheckBar a,
  body.internetPage .internetSpeedCheckBar button{
    width:auto !important;
    min-width:110px !important;
  }
}


/* --------------------------------------------------
   Echtes Mobile
   Hier darf sauber gestapelt werden
-------------------------------------------------- */

@media (max-width: 680px){

  body.internetPage .heroActions{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:12px !important;
  }

  body.internetPage .heroActions .glass,
  body.internetPage .heroActions .ghost,
  body.internetPage .heroActions a{
    width:100% !important;
    min-width:0 !important;
  }

  body.internetPage .internetHeroNetwork{
    padding:14px !important;
    border-radius:24px !important;
  }

  body.internetPage .internetHeroNetworkStage{
    transform:none !important;
    width:100% !important;
    height:auto !important;
    margin:0 !important;
    display:grid !important;
    gap:14px !important;
  }

  body.internetPage .internetHeroNetworkNode{
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    min-height:92px !important;
  }

  body.internetPage .internetHeroNetworkLine{
    display:none !important;
  }

  body.internetPage .internetHeroNetworkLegend{
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
    margin-top:14px !important;
  }

  body.internetPage .internetHeroNetworkLegend > *{
    min-height:auto !important;
    padding:12px !important;
  }

  body.internetPage .internetSpeedCheckBar{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:14px !important;
    padding:16px !important;
  }

  body.internetPage .internetSpeedFields{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
  }

  body.internetPage .internetSpeedCheckBar .glass,
  body.internetPage .internetSpeedCheckBar a,
  body.internetPage .internetSpeedCheckBar button{
    width:100% !important;
    min-width:0 !important;
  }
}

/* INTERNET_RESPONSIVE_NETWORK_FIX_V1_END */

/* INTERNET_NETWORK_TABLET_FIX_V2_START */


/* ======================================================
   681–1180 PX
   Desktop Network Path behalten – nur kompakter
   ====================================================== */

@media (min-width:681px) and (max-width:1180px){


  /* Network Container */

  body.internetPage
  .internetHeroNetwork{
    width:100% !important;

    max-width:920px !important;

    margin:
      24px auto 0 !important;

    padding:
      18px !important;

    overflow:hidden !important;

    border-radius:
      30px !important;
  }


  body.internetPage
  .internetHeroNetworkHeader{
    position:relative !important;

    display:flex !important;

    align-items:center !important;

    gap:10px !important;

    margin-bottom:
      8px !important;
  }


  /*
     Ganz wichtig:
     ältere Responsive-Regeln setzen diesen Bereich
     teilweise auf Grid/Auto.
     Hier wieder echte Desktop-Stage.
  */

  body.internetPage
  .internetHeroNetworkStage{
    position:relative !important;

    display:block !important;

    width:100% !important;

    max-width:820px !important;

    height:
      clamp(270px,34vw,330px) !important;

    margin:
      0 auto 12px !important;

    padding:0 !important;

    transform:none !important;

    overflow:visible !important;
  }


  /* ==================================================
     ALLE NODES WIEDER ABSOLUT
     ================================================== */

  body.internetPage
  .internetHeroNetworkNode{
    position:absolute !important;

    inset:auto !important;

    width:
      clamp(140px,18vw,178px) !important;

    min-width:0 !important;

    min-height:
      72px !important;

    padding:
      12px !important;

    display:flex !important;

    align-items:center !important;

    gap:10px !important;

    border-radius:
      17px !important;

    transform:none !important;
  }


  body.internetPage
  .internetHeroNetworkIcon{
    flex:
      0 0 36px !important;

    width:36px !important;
    height:36px !important;
  }


  body.internetPage
  .internetHeroNetworkNode strong{
    font-size:
      12px !important;
  }


  body.internetPage
  .internetHeroNetworkNode small{
    font-size:
      8px !important;
  }


  /* Provider oben links */

  body.internetPage
  .internetHeroNetworkNode.ihProvider{
    left:2% !important;
    top:15px !important;

    right:auto !important;
    bottom:auto !important;
  }


  /* FTTH / DSL oben Mitte */

  body.internetPage
  .internetHeroNetworkNode.ihAccess{
    left:50% !important;
    top:15px !important;

    right:auto !important;
    bottom:auto !important;

    translate:
      -50% 0 !important;
  }


  /* Übergabe oben rechts */

  body.internetPage
  .internetHeroNetworkNode.ihHandover{
    right:2% !important;
    top:15px !important;

    left:auto !important;
    bottom:auto !important;
  }


  /* Standort unten links */

  body.internetPage
  .internetHeroNetworkNode.ihSite{
    left:10% !important;
    bottom:18px !important;

    right:auto !important;
    top:auto !important;
  }


  /* Router unten rechts */

  body.internetPage
  .internetHeroNetworkNode.ihRouter{
    right:10% !important;
    bottom:18px !important;

    left:auto !important;
    top:auto !important;
  }


  /* ==================================================
     VERBINDUNGSLINIEN WIEDER AN
     ================================================== */

  body.internetPage
  .internetHeroNetworkLine{
    display:block !important;

    position:absolute !important;

    z-index:2 !important;
  }


  /* Provider -> FTTH */

  body.internetPage
  .ihLineProviderAccess{
    left:22% !important;
    top:51px !important;

    width:21% !important;
    height:1px !important;

    right:auto !important;
    bottom:auto !important;

    transform:none !important;
  }


  /* FTTH -> Übergabe */

  body.internetPage
  .ihLineAccessHandover{
    left:57% !important;
    top:51px !important;

    width:21% !important;
    height:1px !important;

    right:auto !important;
    bottom:auto !important;

    transform:none !important;
  }


  /* Übergabe nach unten */

  body.internetPage
  .ihLineHandoverDown{
    right:12.5% !important;
    top:87px !important;

    width:1px !important;
    height:78px !important;

    left:auto !important;
    bottom:auto !important;
  }


  /* Router -> Standort */

  body.internetPage
  .ihLineRouterSite{
    left:29% !important;
    bottom:53px !important;

    width:42% !important;
    height:1px !important;

    right:auto !important;
    top:auto !important;

    transform:
      scaleX(-1) !important;
  }


  /* ==================================================
     LEGEND UNTEN WIE DESKTOP – 4 IN EINER REIHE
     ================================================== */

  body.internetPage
  .internetHeroNetworkLegend{
    width:100% !important;

    display:grid !important;

    grid-template-columns:
      repeat(4,minmax(0,1fr)) !important;

    gap:
      9px !important;

    margin-top:
      4px !important;
  }


  body.internetPage
  .internetHeroNetworkLegend > *{
    min-width:0 !important;

    min-height:
      70px !important;

    padding:
      11px 12px !important;

    border-radius:
      15px !important;
  }


  body.internetPage
  .internetHeroNetworkLegend span{
    font-size:
      9px !important;
  }


  body.internetPage
  .internetHeroNetworkLegend strong{
    font-size:
      11px !important;
  }


  body.internetPage
  .internetHeroNetworkLegend small{
    font-size:
      7px !important;
  }

}


/* ======================================================
   ETWAS KLEINERER TABLET-BEREICH
   gleiche Grafik, noch kompakter
   ====================================================== */

@media (min-width:681px) and (max-width:820px){

  body.internetPage
  .internetHeroNetwork{
    padding:
      14px !important;

    border-radius:
      24px !important;
  }


  body.internetPage
  .internetHeroNetworkStage{
    height:
      265px !important;
  }


  body.internetPage
  .internetHeroNetworkNode{
    width:
      clamp(128px,20vw,150px) !important;

    min-height:
      66px !important;

    padding:
      9px 10px !important;
  }


  body.internetPage
  .internetHeroNetworkIcon{
    flex-basis:
      31px !important;

    width:31px !important;
    height:31px !important;
  }


  body.internetPage
  .internetHeroNetworkNode strong{
    font-size:
      10px !important;
  }


  body.internetPage
  .internetHeroNetworkNode small{
    font-size:
      7px !important;
  }


  body.internetPage
  .ihLineProviderAccess{
    left:21% !important;
    width:22% !important;
  }


  body.internetPage
  .ihLineAccessHandover{
    left:57% !important;
    width:22% !important;
  }


  body.internetPage
  .ihLineHandoverDown{
    right:12% !important;
  }


  body.internetPage
  .ihLineRouterSite{
    left:27% !important;
    width:46% !important;
  }


  body.internetPage
  .internetHeroNetworkLegend{
    gap:
      7px !important;
  }


  body.internetPage
  .internetHeroNetworkLegend > *{
    padding:
      9px !important;
  }

}


/* ======================================================
   ECHTES MOBILE
   Hier darf die Grafik vertikal werden
   ====================================================== */

@media (max-width:680px){

  body.internetPage
  .internetHeroNetworkStage{
    display:grid !important;

    grid-template-columns:
      1fr !important;

    width:100% !important;

    height:auto !important;

    transform:none !important;

    margin:
      0 !important;

    gap:
      12px !important;
  }


  body.internetPage
  .internetHeroNetworkNode{
    position:relative !important;

    inset:auto !important;

    translate:none !important;

    width:100% !important;

    max-width:none !important;

    min-height:
      78px !important;
  }


  body.internetPage
  .internetHeroNetworkLine{
    display:none !important;
  }


  body.internetPage
  .internetHeroNetworkLegend{
    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;
  }

}


/* INTERNET_NETWORK_TABLET_FIX_V2_END */

/* INTERNET_NETWORK_TABLET_FORCE_V3_START */


@media screen and (min-width:681px) and (max-width:1180px){


  /* ====================================================
     NETWORK BOX
     ==================================================== */

  body.internetPage
  .internetHeroV1
  .internetHeroNetwork{
    width:100% !important;
    max-width:900px !important;

    margin:
      24px auto 0 !important;

    padding:
      18px 18px 16px !important;

    border-radius:
      28px !important;

    overflow:hidden !important;
  }


  /* ====================================================
     STAGE – MOBILE GRID KOMPLETT AUFHEBEN
     ==================================================== */

  body.internetPage
  .internetHeroV1
  .internetHeroNetwork
  .internetHeroNetworkStage{
    position:relative !important;

    display:block !important;

    grid-template-columns:none !important;
    grid-template-rows:none !important;

    width:100% !important;
    max-width:820px !important;

    height:285px !important;

    min-height:285px !important;

    margin:
      0 auto 8px !important;

    padding:0 !important;

    gap:0 !important;

    overflow:visible !important;

    transform:none !important;

    scale:none !important;
  }


  /* ====================================================
     ALLE NODES
     ==================================================== */

  body.internetPage
  .internetHeroV1
  .internetHeroNetwork
  .internetHeroNetworkStage
  .internetHeroNetworkNode{
    position:absolute !important;

    display:flex !important;

    width:155px !important;
    max-width:155px !important;
    min-width:155px !important;

    height:auto !important;
    min-height:68px !important;

    margin:0 !important;

    padding:
      10px 11px !important;

    gap:
      9px !important;

    align-items:center !important;

    border-radius:
      16px !important;

    translate:none !important;
    transform:none !important;
  }


  body.internetPage
  .internetHeroV1
  .internetHeroNetwork
  .internetHeroNetworkNode
  .internetHeroNetworkIcon{
    flex:
      0 0 34px !important;

    width:34px !important;
    height:34px !important;

    min-width:34px !important;
  }


  body.internetPage
  .internetHeroV1
  .internetHeroNetwork
  .internetHeroNetworkNode strong{
    display:block !important;

    font-size:
      11px !important;

    line-height:
      1.15 !important;
  }


  body.internetPage
  .internetHeroV1
  .internetHeroNetwork
  .internetHeroNetworkNode small{
    display:block !important;

    margin-top:
      2px !important;

    font-size:
      7px !important;

    line-height:
      1.2 !important;
  }


  /* ====================================================
     PROVIDER – OBEN LINKS
     ==================================================== */

  body.internetPage
  .internetHeroV1
  .internetHeroNetwork
  .internetHeroNetworkStage
  .internetHeroNetworkNode.ihProvider{
    left:2% !important;
    right:auto !important;

    top:18px !important;
    bottom:auto !important;
  }


  /* ====================================================
     FTTH / DSL – OBEN MITTE
     ==================================================== */

  body.internetPage
  .internetHeroV1
  .internetHeroNetwork
  .internetHeroNetworkStage
  .internetHeroNetworkNode.ihAccess{
    left:50% !important;
    right:auto !important;

    top:18px !important;
    bottom:auto !important;

    transform:
      translateX(-50%) !important;
  }


  /* ====================================================
     ÜBERGABE – OBEN RECHTS
     ==================================================== */

  body.internetPage
  .internetHeroV1
  .internetHeroNetwork
  .internetHeroNetworkStage
  .internetHeroNetworkNode.ihHandover{
    left:auto !important;
    right:2% !important;

    top:18px !important;
    bottom:auto !important;
  }


  /* ====================================================
     STANDORT – UNTEN LINKS
     ==================================================== */

  body.internetPage
  .internetHeroV1
  .internetHeroNetwork
  .internetHeroNetworkStage
  .internetHeroNetworkNode.ihSite{
    left:10% !important;
    right:auto !important;

    top:auto !important;
    bottom:22px !important;
  }


  /* ====================================================
     ROUTER/FIREWALL – UNTEN RECHTS
     ==================================================== */

  body.internetPage
  .internetHeroV1
  .internetHeroNetwork
  .internetHeroNetworkStage
  .internetHeroNetworkNode.ihRouter{
    left:auto !important;
    right:10% !important;

    top:auto !important;
    bottom:22px !important;
  }


  /* ====================================================
     LINIEN
     ==================================================== */

  body.internetPage
  .internetHeroV1
  .internetHeroNetwork
  .internetHeroNetworkStage
  .internetHeroNetworkLine{
    display:block !important;

    position:absolute !important;

    min-width:0 !important;
    min-height:0 !important;

    margin:0 !important;

    z-index:1 !important;
  }


  /* Provider -> FTTH */

  body.internetPage
  .internetHeroV1
  .internetHeroNetwork
  .ihLineProviderAccess{
    left:22% !important;
    right:auto !important;

    top:52px !important;
    bottom:auto !important;

    width:20% !important;
    height:1px !important;

    transform:none !important;
  }


  /* FTTH -> Übergabe */

  body.internetPage
  .internetHeroV1
  .internetHeroNetwork
  .ihLineAccessHandover{
    left:58% !important;
    right:auto !important;

    top:52px !important;
    bottom:auto !important;

    width:20% !important;
    height:1px !important;

    transform:none !important;
  }


  /* Übergabe nach unten */

  body.internetPage
  .internetHeroV1
  .internetHeroNetwork
  .ihLineHandoverDown{
    left:auto !important;
    right:11.5% !important;

    top:86px !important;
    bottom:auto !important;

    width:1px !important;
    height:68px !important;

    transform:none !important;
  }


  /* Router -> Standort */

  body.internetPage
  .internetHeroV1
  .internetHeroNetwork
  .ihLineRouterSite{
    left:28% !important;
    right:auto !important;

    top:auto !important;
    bottom:55px !important;

    width:44% !important;
    height:1px !important;

    transform:
      scaleX(-1) !important;
  }


  /* ====================================================
     LEGENDE 01–04
     ==================================================== */

  body.internetPage
  .internetHeroV1
  .internetHeroNetwork
  .internetHeroNetworkLegend{
    display:grid !important;

    grid-template-columns:
      repeat(4,minmax(0,1fr)) !important;

    width:100% !important;

    margin:
      8px auto 0 !important;

    gap:
      8px !important;
  }


  body.internetPage
  .internetHeroV1
  .internetHeroNetwork
  .internetHeroNetworkLegend
  > *{
    width:auto !important;

    min-width:0 !important;
    min-height:66px !important;

    padding:
      10px 11px !important;

    border-radius:
      14px !important;
  }


  body.internetPage
  .internetHeroV1
  .internetHeroNetwork
  .internetHeroNetworkLegend span{
    font-size:
      8px !important;
  }


  body.internetPage
  .internetHeroV1
  .internetHeroNetwork
  .internetHeroNetworkLegend strong{
    font-size:
      10px !important;
  }


  body.internetPage
  .internetHeroV1
  .internetHeroNetwork
  .internetHeroNetworkLegend small{
    font-size:
      7px !important;
  }

}


/* ======================================================
   681–800 PX NOCH KLEINER
   DESKTOP-ANORDNUNG BLEIBT
   ====================================================== */

@media screen and (min-width:681px) and (max-width:800px){

  body.internetPage
  .internetHeroV1
  .internetHeroNetwork{
    padding:
      14px !important;
  }


  body.internetPage
  .internetHeroV1
  .internetHeroNetwork
  .internetHeroNetworkStage{
    height:
      250px !important;

    min-height:
      250px !important;
  }


  body.internetPage
  .internetHeroV1
  .internetHeroNetwork
  .internetHeroNetworkStage
  .internetHeroNetworkNode{
    width:
      132px !important;

    min-width:
      132px !important;

    max-width:
      132px !important;

    min-height:
      61px !important;

    padding:
      8px 9px !important;
  }


  body.internetPage
  .internetHeroV1
  .internetHeroNetwork
  .internetHeroNetworkIcon{
    flex-basis:
      29px !important;

    width:
      29px !important;

    min-width:
      29px !important;

    height:
      29px !important;
  }


  body.internetPage
  .internetHeroV1
  .internetHeroNetwork
  .internetHeroNetworkNode strong{
    font-size:
      9px !important;
  }


  body.internetPage
  .internetHeroV1
  .internetHeroNetwork
  .internetHeroNetworkNode small{
    font-size:
      6px !important;
  }


  body.internetPage
  .internetHeroV1
  .internetHeroNetwork
  .internetHeroNetworkLegend{
    gap:
      6px !important;
  }


  body.internetPage
  .internetHeroV1
  .internetHeroNetwork
  .internetHeroNetworkLegend
  > *{
    min-height:
      58px !important;

    padding:
      8px !important;
  }

}


/* ======================================================
   <=680 PX
   ERST HIER WIRKLICH MOBILE
   ====================================================== */

@media screen and (max-width:680px){

  body.internetPage
  .internetHeroV1
  .internetHeroNetwork
  .internetHeroNetworkStage{
    position:relative !important;

    display:grid !important;

    grid-template-columns:
      1fr !important;

    height:auto !important;
    min-height:0 !important;

    width:100% !important;

    gap:
      10px !important;

    margin:0 !important;
  }


  body.internetPage
  .internetHeroV1
  .internetHeroNetwork
  .internetHeroNetworkStage
  .internetHeroNetworkNode{
    position:relative !important;

    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;

    transform:none !important;
    translate:none !important;

    width:100% !important;
    min-width:0 !important;
    max-width:none !important;

    min-height:
      72px !important;
  }


  body.internetPage
  .internetHeroV1
  .internetHeroNetwork
  .internetHeroNetworkLine{
    display:none !important;
  }


  body.internetPage
  .internetHeroV1
  .internetHeroNetwork
  .internetHeroNetworkLegend{
    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;
  }

}


/* INTERNET_NETWORK_TABLET_FORCE_V3_END */

/* INTERNET_AVAILABILITY_FINAL_RESP_V6_START */

@media(max-width:720px){

  body.internetPage
  .internetAvailabilityFinalV6{
    padding:24px 12px 30px;
  }

  body.internetPage
  .internetAvailabilityFinalV6
  .internetSpeedCheckBar{
    padding:23px 15px 20px;
    border-radius:22px;
  }

  body.internetPage
  .internetAvailabilityFinalV6
  .internetAvailabilityModes{
    width:100%;
  }

  body.internetPage
  .internetAvailabilityFinalV6
  .internetAvailabilityMode{
    flex:1 1 50%;
    min-width:0;
  }

  body.internetPage
  .internetAvailabilityFinalV6
  #internetAddressFields,
  body.internetPage
  .internetAvailabilityFinalV6
  #internetOtoFields{
    grid-template-columns:1fr;
  }

  body.internetPage
  .internetAvailabilityFinalV6
  .internetAvailabilitySubmit{
    width:100%;
  }

  body.internetPage
  .internetAvailabilityFinalV6
  .internetAvailabilityTech{
    grid-template-columns:1fr;
  }

  body.internetPage
  .internetAvailabilityFinalV6
  .internetAvailabilityActions{
    flex-direction:column;
    align-items:stretch;
  }

}

/* INTERNET_AVAILABILITY_FINAL_RESP_V6_END */

/* INTERNET_AVAILABILITY_TOGGLE_FINAL_RESP_V8_START */

@media(max-width:720px){

  body.internetPage
  .internetAvailabilityFinalV6
  #internetAddressFields[hidden],

  body.internetPage
  .internetAvailabilityFinalV6
  #internetOtoFields[hidden]{
    display:none !important;
  }


  body.internetPage
  .internetAvailabilityFinalV6
  #internetAddressFields:not([hidden]){
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:11px !important;
  }


  body.internetPage
  .internetAvailabilityFinalV6
  #internetOtoFields:not([hidden]){
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:11px !important;
  }


  body.internetPage
  .internetAvailabilityFinalV6
  .internetAvailabilityModes{
    width:100%;
    max-width:360px;
  }


  body.internetPage
  .internetAvailabilityFinalV6
  .internetAvailabilityMode{
    min-width:0;
    flex:1 1 50%;
  }


  body.internetPage
  .internetAvailabilityFinalV6
  #internetAvailabilitySubmit,

  body.internetPage
  .internetAvailabilityFinalV6
  #internetOtoSubmit{
    width:100% !important;
    min-width:100% !important;
    height:56px !important;
  }

}

/* INTERNET_AVAILABILITY_TOGGLE_FINAL_RESP_V8_END */

/* INTERNET_AVAILABILITY_MID_V10_START */

/*
 * Finaler Schutz für den Zwischenbereich.
 *
 * Ältere Internet-Regeln verändern zwischen
 * 681–1180 px die generischen Klassen
 * .internetSpeedCheckBar und .internetSpeedFields.
 *
 * Dieser Block gilt NUR für FinalV6.
 */

@media screen and (min-width:721px) and (max-width:1180px){

  body.internetPage
  .internetAvailabilityFinalV6{
    padding:
      36px 18px 40px !important;
  }


  body.internetPage
  .internetAvailabilityFinalV6
  > .shell{
    width:
      min(100%,960px) !important;

    max-width:
      960px !important;

    margin:
      0 auto !important;

    padding:
      0 !important;
  }


  /*
   * Wichtig:
   * ältere Regeln dürfen diesen Bereich
   * NICHT wieder in ein horizontales Grid
   * verwandeln.
   */

  body.internetPage
  .internetAvailabilityFinalV6
  .internetSpeedCheckBar{
    width:
      100% !important;

    display:
      flex !important;

    flex-direction:
      column !important;

    align-items:
      center !important;

    justify-content:
      center !important;

    gap:
      0 !important;

    padding:
      30px 28px 28px !important;

    text-align:
      center !important;
  }


  body.internetPage
  .internetAvailabilityFinalV6
  .internetSpeedCheckIntro{
    width:
      100% !important;

    max-width:
      700px !important;

    display:
      flex !important;

    flex-direction:
      column !important;

    align-items:
      center !important;

    justify-content:
      center !important;

    margin:
      0 auto 22px !important;

    text-align:
      center !important;
  }


  body.internetPage
  .internetAvailabilityFinalV6
  .internetSpeedCheckIntro strong{
    width:
      100% !important;

    max-width:
      700px !important;

    text-align:
      center !important;

    font-size:
      clamp(27px,3.5vw,34px) !important;

    line-height:
      1.12 !important;
  }


  body.internetPage
  .internetAvailabilityFinalV6
  .internetSpeedCheckIntro small{
    width:
      100% !important;

    max-width:
      590px !important;

    margin:
      0 auto !important;

    text-align:
      center !important;
  }


  body.internetPage
  .internetAvailabilityFinalV6
  .internetAvailabilityModes{
    display:
      flex !important;

    width:
      max-content !important;

    max-width:
      100% !important;

    margin:
      0 auto 20px !important;

    padding:
      5px !important;
  }


  /*
   * ADDRESS
   *
   * In diesem Bereich Suchfeld + Button
   * sauber nebeneinander, nicht Intro,
   * Switch und Formular in einer Reihe.
   */

  body.internetPage
  .internetAvailabilityFinalV6
  #internetAddressFields:not([hidden]){
    width:
      100% !important;

    max-width:
      800px !important;

    display:
      grid !important;

    grid-template-columns:
      minmax(0,1fr)
      118px !important;

    align-items:
      end !important;

    gap:
      12px !important;

    margin:
      0 auto !important;
  }


  /*
   * OTO
   */

  body.internetPage
  .internetAvailabilityFinalV6
  #internetOtoFields:not([hidden]){
    width:
      100% !important;

    max-width:
      800px !important;

    display:
      grid !important;

    grid-template-columns:
      minmax(0,1fr)
      140px
      118px !important;

    align-items:
      end !important;

    gap:
      12px !important;

    margin:
      0 auto !important;
  }


  /*
   * Hidden bleibt Hidden.
   */

  body.internetPage
  .internetAvailabilityFinalV6
  #internetAddressFields[hidden],

  body.internetPage
  .internetAvailabilityFinalV6
  #internetOtoFields[hidden]{
    display:
      none !important;
  }


  body.internetPage
  .internetAvailabilityFinalV6
  .internetSpeedFields label{
    width:
      100% !important;

    min-width:
      0 !important;

    text-align:
      left !important;
  }


  body.internetPage
  .internetAvailabilityFinalV6
  .internetAddressLookupWrap{
    width:
      100% !important;
  }


  body.internetPage
  .internetAvailabilityFinalV6
  .internetSpeedFields input{
    width:
      100% !important;

    min-width:
      0 !important;
  }


  body.internetPage
  .internetAvailabilityFinalV6
  #internetAvailabilitySubmit,

  body.internetPage
  .internetAvailabilityFinalV6
  #internetOtoSubmit{
    width:
      118px !important;

    min-width:
      118px !important;

    height:
      52px !important;
  }


  body.internetPage
  .internetAvailabilityFinalV6
  .internetAvailabilityResult{
    width:
      100% !important;

    max-width:
      800px !important;

    margin:
      18px auto 0 !important;
  }


  body.internetPage
  .internetAvailabilityFinalV6
  .internetSpeedCheckHint{
    width:
      100% !important;

    max-width:
      800px !important;

    margin:
      12px auto 0 !important;

    text-align:
      center !important;
  }

}


/*
 * Auf schmaleren Tablets lieber Formular
 * untereinander, bevor es zusammengedrückt wird.
 */

@media screen and (min-width:721px) and (max-width:860px){

  body.internetPage
  .internetAvailabilityFinalV6
  #internetAddressFields:not([hidden]),

  body.internetPage
  .internetAvailabilityFinalV6
  #internetOtoFields:not([hidden]){
    grid-template-columns:
      1fr !important;
  }


  body.internetPage
  .internetAvailabilityFinalV6
  #internetAvailabilitySubmit,

  body.internetPage
  .internetAvailabilityFinalV6
  #internetOtoSubmit{
    width:
      100% !important;

    min-width:
      100% !important;

    height:
      54px !important;
  }

}

/* INTERNET_AVAILABILITY_MID_V10_END */