/* Design 1.3 — clear architecture photo, aligned status rail, visible payment brands. */
body.design11-true .showcase-hero.v2-cockpit{
  grid-template-columns:minmax(0,1fr) 252px!important;
  gap:20px!important;
  overflow:hidden!important;
  background:#f9fcfd!important;
}
body.design11-true .showcase-hero.v2-cockpit:before{
  inset:0!important;
  background-image:url('assets/design13-hero.webp')!important;
  background-repeat:no-repeat!important;
  background-position:right center!important;
  background-size:auto 100%!important;
  filter:none!important;
  -webkit-mask-image:linear-gradient(to right,transparent 11%,rgba(0,0,0,.3) 38%,#000 69%)!important;
  mask-image:linear-gradient(to right,transparent 11%,rgba(0,0,0,.3) 38%,#000 69%)!important;
}
body.design11-true .showcase-hero.v2-cockpit:after{
  background:linear-gradient(90deg,#f9fcfd 0%,rgba(249,252,253,.98) 29%,rgba(249,252,253,.68) 48%,rgba(249,252,253,.05) 76%,transparent 100%)!important;
}
body.design11-true .v2-hero-side{
  position:relative;z-index:3;grid-column:2;grid-row:1;
  display:grid;align-content:start;gap:10px;min-width:0;width:100%;
}
body.design11-true .v2-hero-side>.v2-live-pill{
  position:static!important;display:flex!important;align-items:center!important;
  width:100%!important;max-width:none!important;box-sizing:border-box!important;
  margin:0!important;padding:10px 12px!important;
  border-radius:14px!important;background:#fff!important;
  border:1px solid #dce7ed!important;box-shadow:0 8px 22px rgba(11,34,56,.10)!important;
}
body.design11-true .v2-hero-side>.v2-live-pill strong{color:#10243d!important}
body.design11-true .v2-hero-side>.v2-account-panel{
  position:relative!important;display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  grid-template-areas:"head" "meta" "action"!important;
  width:100%!important;max-width:none!important;min-width:0!important;
  margin:0!important;padding:12px!important;gap:8px!important;
  align-self:start!important;justify-self:stretch!important;
  background:#fff!important;border:1px solid #dce7ed!important;
  box-shadow:0 10px 24px rgba(11,34,56,.12)!important;
}
body.design11-true .v2-hero-side .v2-account-head,
body.design11-true .v2-hero-side .v2-account-head strong,
body.design11-true .v2-hero-side .v2-account-meta strong{color:#10243d!important}
body.design11-true .v2-hero-side .v2-account-head small,
body.design11-true .v2-hero-side .v2-account-head span,
body.design11-true .v2-hero-side .v2-account-meta small{color:#566b7e!important}
body.design11-true .v2-hero-side .v2-account-head i{color:#087e73!important}
body.design11-true .v2-hero-side .v2-account-meta{margin:0!important;padding-top:5px!important}

body.design11-true .d11-pricing-approved .d11-payment-row{
  display:grid!important;justify-items:start!important;gap:8px!important;
  width:max-content!important;max-width:100%!important;
  margin-top:14px!important;padding:11px 14px 8px!important;
  border:1px solid #dce7ed!important;border-radius:14px!important;
  background:#fff!important;box-shadow:0 5px 19px rgba(11,34,56,.07)!important;
}
body.design11-true .d11-pricing-approved .d11-payment-label{
  display:block!important;color:#596f83!important;font-size:11px!important;
  font-weight:800!important;letter-spacing:.055em!important;text-transform:uppercase!important;
}
body.design11-true .d11-pricing-approved .d11-payment-row img{
  display:block!important;width:min(100%,505px)!important;height:auto!important;
  max-height:none!important;object-fit:contain!important;object-position:left center!important;
}

/* Render the actual image at its intrinsic aspect ratio. Mask its own left
   edge, so the fade stays seamless at every hero width and the right edge
   always reaches the rounded card border. */
@media(min-width:861px){
  body.design11-true .showcase-hero.v2-cockpit{
    background:#f9fcfd!important;
  }
  body.design11-true .showcase-hero.v2-cockpit:before,
  body.design11-true .showcase-hero.v2-cockpit:after{display:none!important;content:none!important}
  body.design11-true .showcase-hero.v2-cockpit>.v2-hero-photo{
    display:block!important;position:absolute!important;z-index:0!important;
    top:0!important;right:0!important;bottom:auto!important;left:auto!important;
    width:auto!important;height:100%!important;max-width:none!important;
    object-fit:contain!important;pointer-events:none!important;
    -webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.28) 20%,rgba(0,0,0,.75) 42%,#000 65%)!important;
    mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.28) 20%,rgba(0,0,0,.75) 42%,#000 65%)!important;
  }
}
@media(max-width:860px){body.design11-true .showcase-hero.v2-cockpit>.v2-hero-photo{display:none!important}}

@media(max-width:1180px){
  body.design11-true .showcase-hero.v2-cockpit{grid-template-columns:minmax(0,1fr) 235px!important}
}
@media(max-width:860px){
  body.design11-true .showcase-hero.v2-cockpit{grid-template-columns:minmax(0,1fr)!important}
  body.design11-true .showcase-hero.v2-cockpit:before{
    height:160px!important;background-position:right center!important;background-size:auto 100%!important;
    -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 53%,transparent 100%)!important;
    mask-image:linear-gradient(to bottom,#000 0%,#000 53%,transparent 100%)!important;
  }
  body.design11-true .showcase-hero.v2-cockpit:after{background:linear-gradient(to bottom,rgba(249,252,253,.08),#f9fcfd 145px)!important}
  body.design11-true .v2-hero-side{grid-column:1;grid-row:auto;gap:9px}
  body.design11-true .v2-hero-side>.v2-account-panel{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;grid-template-areas:"head meta" "action action"!important}
}
@media(max-width:640px){
  body.design11-true .showcase-hero.v2-cockpit:before{height:130px!important}
  body.design11-true .showcase-hero.v2-cockpit:after{background:linear-gradient(to bottom,rgba(249,252,253,.08),#f9fcfd 113px)!important}
  body.design11-true .v2-hero-side>.v2-account-panel{grid-template-columns:minmax(0,1fr)!important;grid-template-areas:"head" "meta" "action"!important}
  body.design11-true .d11-pricing-approved .d11-payment-row{width:100%!important;box-sizing:border-box!important}
}

/* Paint the photograph on the tile itself so it always spans its full height.
   The first background layer fades softly into the white left column. */
@media(min-width:861px){
  body.design11-true .d11-pricing-approved{
    background-image:linear-gradient(to right,#fff 0%,#fff 47%,rgba(255,255,255,.96) 55%,rgba(255,255,255,.56) 68%,rgba(255,255,255,.08) 82%,transparent 90%),url('assets/design11-payment-v2.webp')!important;
    background-size:100% 100%,auto 100%!important;
    background-position:center,right center!important;
    background-repeat:no-repeat!important;
  }
  body.design11-true .d11-pricing-approved .d11-pro-visual{
    background:none!important;min-height:0!important;align-self:stretch!important;
  }
  body.design11-true .d11-pricing-approved .d11-pro-visual:before{content:none!important;display:none!important}
}

/* Phone and small-tablet layout: let the page scroll as one column and keep
   the Pro photograph unobstructed. Desktop presentation is unaffected. */
@media(max-width:860px){
  body.design11-true .main.premium-home{max-width:100%!important;overflow-x:clip!important}
  body.design11-true .showcase-hero.v2-cockpit{min-width:0!important}
  body.design11-true .v2-cockpit h1{max-width:100%!important;text-wrap:balance!important;overflow-wrap:break-word!important}
  body.design11-true .v2-command-search .hero-search-field{min-width:0!important}
  body.design11-true .v2-command-search input,
  body.design11-true .v2-command-search select{min-width:0!important;width:100%!important}
  body.design11-true .v2-hero-side{min-width:0!important;width:100%!important}
  body.design11-true .v2-hero-side>.v2-account-panel{box-sizing:border-box!important;width:100%!important;max-width:100%!important}
  body.design11-true #ergebnisse.v21-results-card #results.results{max-height:none!important;overflow:visible!important}
  body.design11-true .d11-pricing-approved .d11-pro-visual{min-height:205px!important;background-position:73% center!important}
  body.design11-true .d11-pricing-approved .d11-pro-offer{
    position:static!important;top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;
    width:auto!important;max-width:none!important;margin:0 18px 18px!important;
    padding:14px!important;transform:none!important;
  }
}
@media(max-width:640px){
  body.design11-true .main.premium-home{padding:12px 10px 28px!important}
  body.design11-true .showcase-hero.v2-cockpit{padding:110px 14px 15px!important;gap:12px!important}
  body.design11-true .showcase-hero.v2-cockpit:before{height:130px!important}
  body.design11-true .v2-cockpit h1{font-size:clamp(26px,7.4vw,32px)!important;line-height:1.12!important}
  body.design11-true .v2-welcome-row{margin-bottom:8px!important}
  body.design11-true .hero-search.v2-command-search{margin-top:12px!important;padding:7px!important;gap:6px!important}
  body.design11-true .v2-command-search .hero-search-field{min-height:54px!important;padding:7px 9px!important}
  body.design11-true .v2-search-actions{grid-template-columns:minmax(0,1fr) 48px!important;gap:6px!important}
  body.design11-true .v2-primary-action,body.design11-true .v2-filter-action{min-width:0!important;min-height:46px!important}
  body.design11-true .v2-filter-action{width:48px!important}
  body.design11-true .v2-hero-side>.v2-live-pill{padding:8px 10px!important}
  body.design11-true .v2-hero-side>.v2-account-panel{padding:10px!important;gap:6px!important}
  body.design11-true .v2-hero-side .v2-account-meta>div{padding:6px!important}
  body.design11-true .d11-pricing-approved .d11-pro-visual{min-height:165px!important}
  body.design11-true .d11-pricing-approved .d11-pro-offer{margin:0 14px 14px!important}
  body.design11-true .v21-map-card .map,body.design11-true .v21-map-card .map-fallback{height:310px!important;min-height:310px!important}
}

/* Screenshot review: keep one useful search field above the fold. The other
   filters remain available in the existing "Weitere Filter" drawer. */
@media(max-width:640px){
  body.design11-true .showcase-hero.v2-cockpit{padding-top:94px!important}
  body.design11-true .showcase-hero.v2-cockpit:before{height:113px!important}
  body.design11-true .showcase-hero.v2-cockpit:after{
    background:linear-gradient(to bottom,rgba(249,252,253,.04),#f9fcfd 100px)!important;
  }
  body.design11-true .v2-cockpit h1{font-size:clamp(25px,7vw,29px)!important;line-height:1.11!important}
  body.design11-true .hero-search.v2-command-search{grid-template-columns:minmax(0,1fr)!important}
  body.design11-true .hero-search.v2-command-search .hero-search-field:not(.hero-q){display:none!important}
  body.design11-true .hero-search.v2-command-search .hero-q{grid-column:1/-1!important}
  body.design11-true .hero-search.v2-command-search .v2-search-actions{grid-column:1/-1!important}
  body.design11-true #quickSearchHelp{display:none!important}
  body.design11-true .d11-pricing-approved .d11-pro-content{padding:20px 18px!important}
  body.design11-true .d11-pricing-approved h3{font-size:27px!important}
  body.design11-true .d11-pricing-approved .v22-pro-list{gap:5px!important}
  body.design11-true .d11-pricing-approved .d11-payment-row{margin-top:9px!important;padding:9px 11px 6px!important}
  body.design11-true .d11-pricing-approved .d11-pro-visual{min-height:135px!important}
  body.design11-true .d11-pricing-approved .d11-pro-offer{
    display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)!important;
    align-items:center!important;gap:8px!important;margin:0 14px 14px!important;padding:11px!important;
  }
  body.design11-true .d11-pricing-approved .v22-pro-chip{
    grid-column:1!important;font-size:clamp(15px,4.4vw,18px)!important;white-space:normal!important;
  }
  body.design11-true .d11-pricing-approved .v22-pro-button{
    grid-column:2!important;min-height:46px!important;font-size:13px!important;padding:8px!important;
  }
}

/* Use the actual sharp hero image on narrow screens too. The old pseudo
   background left a pale horizontal strip above the mobile headline. */
@media(max-width:860px){
  body.design11-true .showcase-hero.v2-cockpit:before,
  body.design11-true .showcase-hero.v2-cockpit:after{display:none!important;content:none!important}
  body.design11-true .showcase-hero.v2-cockpit>.v2-hero-photo{
    display:block!important;position:absolute!important;z-index:0!important;
    top:0!important;left:0!important;right:auto!important;bottom:auto!important;
    width:100%!important;height:150px!important;max-width:none!important;
    object-fit:cover!important;object-position:70% 43%!important;
    pointer-events:none!important;
    -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 48%,rgba(0,0,0,.6) 72%,transparent 100%)!important;
    mask-image:linear-gradient(to bottom,#000 0%,#000 48%,rgba(0,0,0,.6) 72%,transparent 100%)!important;
  }
}
@media(max-width:640px){
  body.design11-true .showcase-hero.v2-cockpit>.v2-hero-photo{height:120px!important;object-position:72% 40%!important}
}

/* Make the mobile Pro offer one rounded tile. The photo tapers into the
   price row instead of ending in a hard horizontal seam above a second card. */
@media(max-width:640px){
  body.design11-true .d11-pricing-approved{background:#fff!important;border-radius:22px!important;overflow:hidden!important}
  body.design11-true .d11-pricing-approved .d11-pro-visual:after{
    content:""!important;display:block!important;position:absolute!important;
    inset:auto 0 0!important;height:32px!important;
    background:linear-gradient(to bottom,transparent,#fff)!important;
    pointer-events:none!important;
  }
  body.design11-true .d11-pricing-approved .d11-pro-offer{
    margin:0!important;padding:7px 14px 15px!important;
    border:0!important;border-radius:0 0 20px 20px!important;
    background:#fff!important;box-shadow:none!important;backdrop-filter:none!important;
  }
}

/* The mobile filter drawer must sit above its dimming/blur backdrop. The
   original overlay layer was covering the opened search panel on Safari. */
@media(max-width:860px){
  body.design11-true .mobile-filter-backdrop{
    position:fixed!important;inset:0!important;z-index:10010!important;
  }
  body.design11-true .sidebar.filter-drawer{
    position:fixed!important;z-index:10020!important;
    background:#fff!important;filter:none!important;backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
}