/* Höger: Dropdown "Anhänger kaufen" (Wörmann/Stema erst bei Hover) + Stema-Karten */
@media (min-width:1024px) and (any-hover:hover){
  .dd-kaufen{width:17rem !important}
  .dd-kaufen > div,.dd-kaufen > div > ul{overflow:visible !important;max-height:none !important}
  .dd-flyout{position:relative}
  .dd-flyout > a{position:relative}
  .dd-flyout > a::after{content:"";position:absolute;top:0;right:-1rem;width:1rem;height:100%}
  .dd-flyout > .dd-flyout-list{
    position:absolute !important;left:100%;top:-.5rem;margin:0 0 0 .5rem !important;width:24rem;
    padding:.6rem .6rem .6rem .9rem !important;background:#fff;border:1px solid #e3e5e8;
    border-left:3px solid #3d4550;border-radius:.375rem;z-index:60;
    box-shadow:0 20px 25px -5px rgb(0 0 0 / .1),0 8px 10px -6px rgb(0 0 0 / .1);
    opacity:0;visibility:hidden;pointer-events:none;transform:translateX(-.25rem);
    transition:opacity .15s,transform .15s,visibility .15s}
  .dd-flyout:hover > .dd-flyout-list,.dd-flyout:focus-within > .dd-flyout-list{opacity:1;visibility:visible;pointer-events:auto;transform:none}
  .dd-flyout:hover > a{background:#f5f6f7}
}
@media (min-width:1024px) and (max-width:1279.98px) and (any-hover:hover){
  .dd-flyout > .dd-flyout-list{width:21.5rem}
}

.stema-ph{display:grid;place-items:center;color:#fff;
  background:radial-gradient(120% 90% at 85% 10%,rgb(61 69 80 / .55) 0%,transparent 60%),linear-gradient(160deg,#16243a 0%,#1d2125 100%)}
.stema-ph::before{content:"";position:absolute;inset:0;opacity:.09;
  background-image:linear-gradient(#fff 1px,transparent 1px),linear-gradient(90deg,#fff 1px,transparent 1px);background-size:28px 28px}
.stema-ph-icon{position:relative;width:46%;max-width:180px;opacity:.9;transition:transform .5s}
.group:hover .stema-ph-icon{transform:translateX(4%)}
.stema-ph-name{position:absolute;left:.75rem;right:.75rem;bottom:.6rem;font-family:"Barlow Condensed","Barlow",sans-serif;
  font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:clamp(.7rem,1.6vw,.95rem);opacity:.75;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Zweites Produktbild: Überblendung beim Hover */
.stema-img-hover{opacity:0;transition:opacity .45s ease,transform .5s}
@media (any-hover:hover){.group:hover .stema-img-hover{opacity:1;transform:scale(1.03)}}

/* Hersteller-Logo oben mittig in der Hover-Liste */
.dd-logo{display:none}
@media (min-width:1024px) and (any-hover:hover){
  .dd-flyout > .dd-flyout-list > .dd-logo{display:flex;justify-content:center;align-items:center;grid-column:1 / -1;
    padding:.35rem 0 .7rem;margin:0 .25rem .45rem;border-bottom:1px solid #e3e5e8}
  .dd-logo img{display:block;width:auto;height:34px}
  #stema-dd .dd-logo img{height:48px}
}

/* Startseite: "Sofort verfügbar" im Marineblau-Design der Seite */
.nx-sofort{
  background:
    radial-gradient(60rem 30rem at 100% 0%, rgb(61 69 80 / .45), transparent 70%),
    radial-gradient(40rem 24rem at 0% 100%, rgb(61 69 80 / .18), transparent 70%),
    linear-gradient(135deg,#1d2125 0%,#2b3036 100%);
}
.nx-sofort-dots{position:absolute;inset:0 0 0 auto;width:40%;pointer-events:none;
  background-image:radial-gradient(#ffffff1f 1px,transparent 1.5px);background-size:18px 18px;
  -webkit-mask-image:linear-gradient(to left,#000,transparent);mask-image:linear-gradient(to left,#000,transparent)}
.nx-sofort .eyebrow{background:#ffffff14;border:1px solid #ffffff26;border-radius:999px;
  padding:.3rem .9rem .3rem .75rem;color:#fff;font-size:.85rem}
.nx-sofort .eyebrow::before{width:.5rem;height:.5rem;border-radius:999px;background:#d6dbe1}
.nx-sofort article{border-color:transparent;border-radius:.6rem;box-shadow:0 18px 40px -18px rgb(0 0 0 / .55)}
.nx-sofort article:hover{box-shadow:0 24px 50px -16px rgb(0 0 0 / .6)}
.nx-sofort .btn-outline-light{border-radius:999px}

/* Hauptmenü: keine Zeilenumbrüche (längerer Menüpunkt "Vertriebspartner") */
nav[aria-label="Hauptnavigation"] > ul > li > div > a,
nav[aria-label="Hauptnavigation"] > ul > li > a{white-space:nowrap}
@media (min-width:1024px) and (max-width:1279.98px){
  nav[aria-label="Hauptnavigation"] > ul{gap:0}
  nav[aria-label="Hauptnavigation"] > ul > li > div > a{padding-left:.55rem;padding-right:.55rem;font-size:.93rem}
}
@media (min-width:1024px) and (max-width:1199.98px){
  nav[aria-label="Hauptnavigation"] > ul > li > div > a{padding-left:.42rem;padding-right:.42rem;font-size:.9rem}
  nav[aria-label="Hauptnavigation"] [data-dropdown-toggle]{margin-left:-.35rem;padding:.15rem}
  #site-header a[href*="wa.me"][aria-label^="Per WhatsApp"]{display:none!important}
  #site-header .btn-primary.btn-sm{padding-left:.9rem;padding-right:.9rem}
}
@media (min-width:1024px) and (max-width:1099.98px){
  #site-header .text-\[0\.7rem\].tracking-\[0\.16em\]{display:none}
}

/* Auswahlhilfe: einheitliche Link-Boxen */
.aw-link{display:flex;align-items:center;justify-content:space-between;gap:.6rem;min-height:4.4rem;
  padding:.55rem .85rem;border-radius:.3rem;border-left:3px solid transparent;
  font-size:.9rem;line-height:1.25;transition:background-color .15s,border-color .15s}
.aw-txt{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.aw-tag{font-family:"Barlow Condensed","Barlow",sans-serif;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.aw-val{font-weight:600;color:#111315}
.aw-link svg{flex-shrink:0}
.aw-miete{background:#dbe9f8;border-left-color:#3d4550}
.aw-miete .aw-tag{color:#2b3036}
.aw-miete:hover{background:#c6dcf3}
.aw-woermann{background:#fbecec;border-left-color:#d4232b}
.aw-woermann .aw-tag{color:#b41c23}
.aw-woermann:hover{background:#f6dcdc}
.aw-stema{background:#f5f6f7;border-left-color:#5b636b}
.aw-stema .aw-tag{color:#5b636b}
.aw-stema:hover{background:#e3e5e8}
.aw-dark{background:#111315;color:#fff}
.aw-dark .aw-val{color:#fff}
.aw-dark:hover{background:#2b3036}
.aw-empty{visibility:hidden;pointer-events:none}
@media (max-width:639.98px){.aw-empty{display:none}}
.aw-whatsapp{background:#18763f;color:#fff}
.aw-whatsapp .aw-val{color:#fff}
.aw-whatsapp:hover{background:#13612f}
.aw-wa-val{display:inline-flex;align-items:center;gap:.5rem}

/* Unterseiten Kaufen/Mieten: Foto im Hintergrund wie auf der Startseite */
.nx-subhero-media{position:absolute;inset:0;overflow:hidden;background:#1d2125}
.nx-subhero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.nx-subhero-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,#1d2125f7 0%,#1d2125e0 38%,#1d21258c 62%,#1d212533 100%),linear-gradient(0deg,#1d2125cc 0%,transparent 45%)}
.nx-subhero-inner{padding-top:3.5rem;padding-bottom:4rem}
.nx-subhero-content{max-width:44rem}
@media (min-width:1024px){.nx-subhero-inner{padding-top:5.5rem;padding-bottom:6rem}}
@media (max-width:639.98px){.nx-subhero-media::after{background:linear-gradient(180deg,#1d2125d9 0%,#1d2125f2 100%)}}
.nx-subhero-media--mieten img{object-position:62% 55%}

:root{--color-accent:#3d4550;--color-accent-bright:#d6dbe1;--color-accent-dark:#2b3036;--nx-navy:#1d2125;--nx-navy-2:#2b3036}
.aw-miete{background:color-mix(in srgb,#3d4550 14%,#fff)}.aw-miete:hover{background:color-mix(in srgb,#3d4550 24%,#fff)}
.nx-choice--primary{background:#fff!important}.nx-choice--primary,.nx-choice--primary *{color:#111315!important}.nx-choice--primary .nx-choice-arrow{background:#1113151a!important}.aw-miete{background:#e4e7eb;border-left-color:#1d2125}.aw-miete:hover{background:#d6dbe1}.aw-miete .aw-tag{color:#1d2125!important}