:root{
  --black:#08090a;
  --ink:#111214;
  --anth:#181a1e;
  --anth2:#202328;
  --steel:#8e949b;
  --line:#30343a;
  --white:#f7f7f5;
  --paper:#eceeef;
  --red:#d6232a;
  --red-dark:#a7191f;
  --metal:#c4c7ca;
  --max:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:82px;background:var(--black)}
body{margin:0;background:var(--black);color:var(--white);font-size:16px;font-family:Arial,Helvetica,sans-serif;line-height:1.58;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;height:auto}
button{font:inherit}
.wrap{width:min(var(--max),calc(100% - 44px));margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:fixed;left:-999px;top:10px;z-index:999;background:#fff;color:#000;padding:10px 14px}.skip:focus{left:10px}

/* Progress / rails */
.scroll-progress{position:fixed;z-index:100;left:0;top:0;height:3px;width:0;background:var(--red);box-shadow:0 0 14px rgba(214,35,42,.55)}
.rail-decor{position:fixed;z-index:-1;right:-150px;top:28vh;width:480px;height:3px;background:linear-gradient(90deg,transparent,#2c2f34 25%,#2c2f34 75%,transparent);transform:rotate(-36deg);opacity:.28}
.rail-decor::after{content:"";position:absolute;inset:-16px 0;background:repeating-linear-gradient(90deg,transparent 0 28px,#272a2f 29px 33px,transparent 34px 58px)}

/* Header */
header{position:sticky;top:0;z-index:70;background:rgba(9,10,11,.91);border-bottom:1px solid rgba(255,255,255,.08);backdrop-filter:blur(18px)}
.head{height:78px;display:flex;align-items:center;gap:22px}
.brand{display:flex;align-items:center;gap:12px;min-width:max-content}
.brand-badge{display:grid;place-items:center;width:60px;height:44px;border:1px solid #4a4e54;border-radius:5px;background:linear-gradient(180deg,#22252a,#131518);color:#fff;font-weight:900;letter-spacing:-.05em;box-shadow:inset 0 1px rgba(255,255,255,.08)}
.brand-copy strong,.brand-copy small{display:block}
.brand-copy strong{font-size:16px}
.brand-copy small{font-size:10px;color:#a9afb6;text-transform:uppercase;letter-spacing:.10em;margin-top:2px}
nav{margin-left:auto;display:flex;align-items:center;gap:18px;font-size:13px}
nav a{color:#c0c4c9;transition:.2s}
nav a:hover,nav a:focus{color:#fff}
.navcta{border:1px solid #555b62;border-radius:999px;padding:9px 14px}

/* Hero */
.hero{position:relative;min-height:820px;overflow:hidden;display:flex;align-items:center;background:#000;border-bottom:1px solid #24272b}
.hero-image{position:absolute;inset:0;background:url("images/hero-br01.webp") center 48%/cover no-repeat fixed;will-change:auto}
.hero::before{content:"";position:absolute;z-index:1;inset:0;background:
 radial-gradient(circle at 64% 45%,transparent 0 25%,rgba(0,0,0,.08) 45%,rgba(0,0,0,.42) 72%),
 linear-gradient(90deg,#000 0%,rgba(0,0,0,.90) 31%,rgba(0,0,0,.36) 55%,rgba(0,0,0,.05) 77%),
 linear-gradient(0deg,#000 0%,transparent 38%)}
.hero-inner{position:relative;z-index:2;padding:120px 0 85px}
.eyebrow{margin:0 0 13px;color:#fff;font-size:11px;text-transform:uppercase;letter-spacing:.22em;font-weight:900}
.eyebrow::before{content:"";display:inline-block;width:30px;height:2px;background:var(--red);vertical-align:middle;margin-right:10px}
.hero h1{max-width:760px;font-size:clamp(48px,6.2vw,88px);line-height:.91;letter-spacing:-.055em;margin:0}
.hero h1 .red{color:var(--red)}
.hero-lead{max-width:650px;margin:26px 0 0;color:#c9cdd2;font-size:18px}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 20px;border-radius:4px;font-weight:900;transition:transform .2s,background .2s,border-color .2s}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--red);color:#fff}.btn-primary:hover{background:var(--red-dark)}
.btn-ghost{border:1px solid #5d6269;background:rgba(255,255,255,.035);color:#fff}.btn-ghost:hover{border-color:#a2a7ad}
.hero-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:30px}
.hero-meta span{font-size:12px;color:#c1c5ca;border:1px solid #383c42;background:rgba(15,16,18,.56);border-radius:999px;padding:7px 10px}
.hero-scroll{position:absolute;z-index:3;bottom:25px;left:50%;transform:translateX(-50%);display:grid;place-items:center;color:#8d9299;font-size:10px;text-transform:uppercase;letter-spacing:.16em}
.hero-scroll i{display:block;width:1px;height:36px;background:linear-gradient(var(--red),transparent);margin-top:8px}

/* Trust rail */
.trust{background:#0d0f11;border-bottom:1px solid #292c31}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.trust-grid>div{padding:23px;border-right:1px solid #2b2e33}
.trust-grid>div:last-child{border:0}
.trust strong,.trust span{display:block}.trust strong{font-size:21px}.trust span{font-size:12px;color:#838991;margin-top:2px}

/* Sections */
.section{padding:105px 0}
.section-head{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:start}
.section h2{font-size:50px;line-height:1;letter-spacing:-.04em;margin:0}
.section-copy{font-size:18px;color:#aeb3b9}
.section-copy p:first-child{margin-top:0}
.section.light{background:var(--paper);color:#111214}
.section.light .section-copy{color:#555b62}
.section.light .eyebrow{color:#111214}
.section.light .eyebrow::before{background:var(--red)}

/* Estate focus */
.estate-highlight{display:grid;grid-template-columns:1.2fr .8fr;gap:12px;margin-top:45px}
.photo-card{position:relative;overflow:hidden;border-radius:12px;min-height:430px;background:#222}
.photo-card img{height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.photo-card:hover img{transform:scale(1.035)}
.photo-card .overlay{position:absolute;inset:auto 0 0;background:linear-gradient(transparent,rgba(0,0,0,.9));padding:70px 22px 20px;color:#fff}
.photo-card .overlay strong{font-size:21px}.photo-card .overlay span{display:block;color:#c1c5ca;font-size:13px;margin-top:4px}

/* Cards */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:38px}
.card{background:#15171a;border:1px solid #30343a;border-radius:11px;overflow:hidden;transition:transform .3s,border-color .3s}
.card:hover{transform:translateY(-5px);border-color:#575d65}
.card img{height:195px;object-fit:cover}
.card-body{padding:21px}
.card small{color:var(--red);font-weight:900;letter-spacing:.12em}
.card h3{font-size:22px;margin:16px 0 8px}.card p{color:#aeb3b9;font-size:14px;margin:0}

/* Manufacturer block */
.brand-universe{width:min(var(--max),calc(100% - 44px));margin:65px auto 0;padding-top:55px;border-top:1px solid #30343a}
.brand-universe h2{max-width:830px}
.brand-universe>p{max-width:1000px;color:#aeb3b9;font-size:17px}
.brand-cloud{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.brand-cloud span{padding:8px 12px;border:1px solid #3a3f46;border-radius:999px;background:#181a1e;color:#d4d7da;font-size:12px;transition:.2s}
.brand-cloud span:hover{border-color:var(--red);color:#fff;transform:translateY(-1px)}

/* Cinematic parallax */
.parallax{position:relative;min-height:520px;display:flex;align-items:center;overflow:hidden;border-block:1px solid #24272b}
.parallax-bg{position:absolute;inset:0;background:var(--bg-image) center/cover no-repeat fixed;will-change:auto}
.parallax::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,6,7,.92),rgba(5,6,7,.50) 56%,rgba(5,6,7,.74))}
.parallax-inner{position:relative;z-index:2}
.parallax h2{max-width:820px;font-size:50px;line-height:.98;letter-spacing:-.04em;margin:0}
.parallax p{max-width:670px;color:#d0d3d7;font-size:18px}
.parallax-figure{position:absolute;right:5vw;bottom:-9%;width:min(42vw,650px);opacity:.5;filter:drop-shadow(0 25px 30px #000);pointer-events:none}

/* Process */
.steps{margin-top:38px;border-top:1px solid #30343a}
.step{display:grid;grid-template-columns:70px 1fr auto;gap:20px;align-items:center;padding:23px 0;border-bottom:1px solid #30343a}
.step b{font-size:35px;color:var(--red)}.step h3{margin:0 0 4px;font-size:20px}.step p{margin:0;color:#989ea5}.step em{font-style:normal;font-size:11px;color:#747a82;text-transform:uppercase;letter-spacing:.12em}
.payment-strip{display:grid;grid-template-columns:repeat(4,1fr);margin-top:38px;border:1px solid #30343a;border-radius:10px;overflow:hidden}
.payment-strip>div{padding:20px;background:#191b1f;border-right:1px solid #30343a}.payment-strip>div:last-child{border:0}
.payment-strip strong,.payment-strip span{display:block}.payment-strip span{color:#9298a0;font-size:12px;margin-top:4px}

/* Gallery */
.gallery{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:180px;gap:10px;margin-top:48px}
.gallery figure{position:relative;margin:0;overflow:hidden;border-radius:9px}
.gallery figure:nth-child(1){grid-column:span 6;grid-row:span 2}
.gallery figure:nth-child(2){grid-column:span 3;grid-row:span 2}
.gallery figure:nth-child(3){grid-column:span 3}
.gallery figure:nth-child(4){grid-column:span 3}
.gallery figure:nth-child(5){grid-column:span 4}
.gallery figure:nth-child(6){grid-column:span 4}
.gallery figure:nth-child(7){grid-column:span 4}
.gallery img{height:100%;object-fit:cover;transition:transform .8s}
.gallery figure:hover img{transform:scale(1.045)}

/* About */
.about{background:#121417}
.about-grid{display:grid;grid-template-columns:.66fr 1.34fr;gap:65px;align-items:start}
.portrait{position:sticky;top:105px;overflow:hidden;border-radius:12px;border:1px solid #30343a;background:#1b1d21}
.portrait img{aspect-ratio:4/5;object-fit:cover}
.about-year{font-size:105px;font-weight:900;line-height:.76;color:#2e3237;margin:0 0 28px}
.about-copy p{color:#adb2b8;font-size:17px}
.history-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:12px;margin-top:35px}.history-grid figure{margin:0;height:300px;overflow:hidden;border-radius:10px}.history-grid img{height:100%;object-fit:cover}

/* Family */
.family{background:#eceeef;color:#111214;position:relative;overflow:hidden}
.family::before{content:"RPG";position:absolute;right:-40px;top:20px;font-size:230px;font-weight:900;color:#dfe1e3;line-height:.8;letter-spacing:-.09em}
.family-grid{position:relative;z-index:1;display:grid;grid-template-columns:.65fr 1.35fr;gap:70px}
.family-mark{font-size:clamp(64px,8vw,116px);font-weight:900;line-height:.79;color:#cfd2d5;letter-spacing:-.06em}
.family-copy p{color:#565c63;font-size:18px}
.family-links{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:25px}
.family-links a{display:flex;flex-direction:column;min-height:180px;padding:22px;border-radius:9px;background:#17191c;color:#fff;border:1px solid #30343a;transition:.25s}
.family-links a:hover{transform:translateY(-4px);border-color:#646a72}
.family-links small{color:var(--red);text-transform:uppercase;letter-spacing:.12em;font-weight:900}
.family-links strong{font-size:28px;margin:18px 0 8px}.family-links span{margin-top:auto;color:#aeb3b9;font-size:13px}

/* Contact */
.contact{background:#08090a}
.contact-box{display:grid;grid-template-columns:1.1fr .9fr;gap:55px;padding:52px;border:1px solid #30343a;border-radius:13px;background:linear-gradient(145deg,#191b1f,#111316)}
.contact-box p{color:#aeb3b9}.contact-actions{display:flex;flex-direction:column;gap:10px;justify-content:center}
.contact-list{margin-top:12px;border-top:1px solid #34383e}.contact-list a,.contact-list div{display:flex;justify-content:space-between;gap:15px;padding:10px 0;border-bottom:1px solid #34383e;font-size:14px}.contact-list span{color:#878d94}

/* Footer / legal */
footer{background:#050607;border-top:1px solid #202328;padding:30px 0 100px}
.foot{display:grid;grid-template-columns:1fr auto;gap:22px;color:#8e949b;font-size:13px}.foot-links{display:flex;gap:16px;color:#c4c8cd}
.legal-modal{width:min(900px,calc(100% - 28px));max-height:86vh;padding:0;border:1px solid #454a51;border-radius:12px;background:#f4f4f5;color:#111214}
.legal-modal::backdrop{background:rgba(0,0,0,.82);backdrop-filter:blur(5px)}
.legal-modal-head{position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:#17191c;color:#fff;z-index:2}.legal-modal-head button{width:36px;height:36px;border:1px solid #535961;border-radius:50%;background:#24272c;color:#fff;font-size:22px;cursor:pointer}.legal-modal-body{padding:28px}.legal-modal-body p{color:#5f646a}.legal-modal-body a{text-decoration:underline}

/* Reveal effects */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .72s cubic-bezier(.2,.8,.2,1),transform .72s cubic-bezier(.2,.8,.2,1)}
.reveal.from-left{transform:translate(-32px,18px)}.reveal.from-right{transform:translate(32px,18px)}
.reveal.show{opacity:1;transform:none}
.stagger>*{opacity:0;transform:translateY(20px);transition:opacity .55s,transform .55s}.stagger.show>*{opacity:1;transform:none}
.stagger.show>*:nth-child(2){transition-delay:.07s}.stagger.show>*:nth-child(3){transition-delay:.14s}.stagger.show>*:nth-child(4){transition-delay:.21s}

/* Mobile sticky */
.mobilebar{display:none}

@media(max-width:1000px){
  nav{gap:11px}
  .section-head,.about-grid,.family-grid,.contact-box{grid-template-columns:1fr;gap:34px}
  .portrait{position:relative;top:auto;max-width:460px}
  .cards{grid-template-columns:1fr 1fr}
  .estate-highlight{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(6,1fr)}
  .gallery figure:nth-child(n){grid-column:span 3;grid-row:span 1}
  .gallery figure:first-child{grid-column:span 6;grid-row:span 2}
  .payment-strip{grid-template-columns:1fr 1fr}
}
@media(max-width:800px){
  nav a:not(.navcta){display:none}
  .trust-grid{grid-template-columns:1fr 1fr}
  .trust-grid>div:nth-child(2){border-right:0}.trust-grid>div:nth-child(-n+2){border-bottom:1px solid #2b2e33}
  .parallax-figure{display:none}
}
@media(max-width:620px){
  .wrap,.brand-universe{width:min(100% - 28px,var(--max))}
  .head{height:68px;gap:10px}
  .brand-badge{width:50px;height:40px;font-size:14px}.brand-copy strong{font-size:14px}.brand-copy small{font-size:8px}
  
  .navcta{padding:7px 10px}
  .hero{min-height:720px;align-items:flex-end}
  .hero-image{background-position:65% 46%}
  .hero::before{background:linear-gradient(0deg,#000 0%,rgba(0,0,0,.83) 49%,rgba(0,0,0,.08) 100%)}
  .hero-inner{padding:300px 0 48px}
  .hero h1{font-size:43px}
  .hero-lead{font-size:16px}
  .actions{display:grid}
  .trust-grid>div{padding:16px 12px}.trust strong{font-size:18px}
  .section{padding:72px 0}
  .section h2,.parallax h2{font-size:36px}
  .cards{grid-template-columns:1fr}
  .photo-card{min-height:310px}
  .parallax{min-height:390px}.parallax-bg{inset:0;transform:none!important}
  .step{grid-template-columns:42px 1fr}.step em{display:none}
  .payment-strip{grid-template-columns:1fr}.payment-strip>div{border-right:0;border-bottom:1px solid #30343a}.payment-strip>div:last-child{border-bottom:0}
  .gallery{grid-template-columns:1fr;grid-auto-rows:240px}.gallery figure:nth-child(n){grid-column:1!important;grid-row:auto!important}
  .history-grid,.family-links{grid-template-columns:1fr}
  .family::before{font-size:150px;right:-25px}
  .contact-box{padding:28px 18px}.contact-list a,.contact-list div{display:block}.contact-list span{display:block}
  .foot{grid-template-columns:1fr}.foot-links{flex-wrap:wrap}
  .mobilebar{position:fixed;z-index:80;display:grid;grid-template-columns:1fr 1fr;gap:7px;left:0;right:0;bottom:0;padding:8px;background:#050607;border-top:1px solid #25282d}
  .mobilebar a{text-align:center;padding:11px;background:#25282d;border-radius:4px;font-weight:900}.mobilebar a:last-child{background:var(--red)}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal,.stagger>*{opacity:1!important;transform:none!important;transition:none!important}
  .hero-image,.parallax-bg{transform:none!important}
  .card,.photo-card img,.gallery img,.family-links a,.btn{transition:none!important}
}

/* ---------- Navigation & motion refinement ---------- */
.burger{display:none;margin-left:auto;width:44px;height:44px;border:1px solid #454a51;border-radius:5px;background:#17191d;padding:10px;cursor:pointer;position:relative;z-index:92}
.burger span{display:block;height:2px;background:#fff;margin:5px 0;transition:transform .24s ease,opacity .24s ease,width .24s ease;transform-origin:center}
.burger span:nth-child(2){width:72%;margin-left:auto}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;width:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-backdrop{position:fixed;inset:68px 0 0;z-index:80;background:rgba(0,0,0,.66);backdrop-filter:blur(4px);opacity:0;transition:opacity .22s}
.nav-backdrop.show{opacity:1}
body.menu-open{overflow:hidden}
nav a{position:relative}
nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-8px;height:2px;background:var(--red);transition:right .22s ease}
nav a:hover::after,nav a.active::after{right:0}
nav .navcta::after{display:none}

/* fixed-background sections gain a subtle film layer */
.hero::after,.parallax::after{mix-blend-mode:normal}
.parallax::before{content:"";position:absolute;z-index:1;inset:0;background:
  radial-gradient(circle at 72% 30%,rgba(255,255,255,.04),transparent 34%),
  linear-gradient(180deg,rgba(255,255,255,.018),transparent 22%,transparent 75%,rgba(0,0,0,.18));
  pointer-events:none}
.parallax-inner{z-index:3}
.hero-image,.parallax-bg{transition:filter .45s ease}
.hero:hover .hero-image{filter:contrast(1.03) brightness(1.02)}
.parallax:hover .parallax-bg{filter:contrast(1.04) brightness(1.01)}

/* premium edge details */
.card,.photo-card,.family-links a,.contact-box{box-shadow:0 18px 48px rgba(0,0,0,.12)}
.card::before{content:"";display:block;height:2px;background:linear-gradient(90deg,var(--red),transparent);transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
.card:hover::before{transform:scaleX(1)}
.brand-cloud span{box-shadow:inset 0 1px rgba(255,255,255,.025)}
.payment-strip strong::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--red);margin-right:8px;box-shadow:0 0 0 4px rgba(214,35,42,.08)}
.section{position:relative}
.section.light::after{content:"";position:absolute;left:50%;bottom:0;width:min(760px,70vw);height:1px;background:linear-gradient(90deg,transparent,#c8cbce,transparent);transform:translateX(-50%)}

/* Smartphone navigation */
@media(max-width:800px){
  .burger{display:block}
  nav#mainnav{
    position:fixed;
    top:68px;
    right:0;
    z-index:90;
    width:min(86vw,360px);
    height:calc(100dvh - 68px);
    padding:24px 22px 32px;
    background:linear-gradient(180deg,#15171a,#0d0f11);
    border-left:1px solid #30343a;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    transform:translateX(102%);
    visibility:hidden;
    transition:transform .28s cubic-bezier(.2,.8,.2,1),visibility .28s;
    box-shadow:-25px 0 70px rgba(0,0,0,.38);
    overflow-y:auto;
  }
  nav#mainnav.open{transform:none;visibility:visible}
  nav#mainnav a{
    display:block!important;
    padding:17px 3px;
    border-bottom:1px solid #2d3035;
    color:#eceef0;
    font-size:16px;
    font-weight:800;
    letter-spacing:.01em;
  }
  nav#mainnav a::after{bottom:0}
  nav#mainnav .navcta{
    margin-top:18px;
    text-align:center;
    background:var(--red);
    border:0;
    padding:14px;
    border-radius:5px;
  }
}

/* Fixed backgrounds are the premium effect; reduce only where mobile browsers are known to struggle */
@supports (-webkit-touch-callout:none){
  @media(max-width:800px){
    .hero-image,.parallax-bg{background-attachment:scroll}
  }
}


/* =====================================================================
   MASTER RESTORED — recovered content + ultrawide-safe presentation
   ===================================================================== */
body{background:#000}
.site-shell{
  width:100%;
  max-width:1920px;
  margin-inline:auto;
  background:var(--black,#08090a);
  position:relative;
  box-shadow:0 0 90px rgba(0,0,0,.72);
}
@media(min-width:1921px){
  .site-shell{border-inline:1px solid #202328}
  .rail-decor{display:none}
}

/* H2 remains intentionally limited */
.section h2,.parallax h2{font-size:50px}
@media(max-width:620px){.section h2,.parallax h2{font-size:36px}}

/* Recovered ankauf copy */
.restored-ankauf-copy{
  margin-top:42px;
  padding:28px 30px;
  border-left:3px solid var(--red,#d6232a);
  background:rgba(17,18,20,.055);
  color:#4e545b;
}
.restored-ankauf-copy h3{font-size:25px;margin:0 0 14px;color:#111214}
.restored-ankauf-copy p{margin:9px 0}

/* Spurgrößen */
.tracks-section{background:#0e1012}
.track-grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:10px;
  margin-top:42px;
}
.track-grid article{
  min-height:150px;
  border:1px solid #30343a;
  border-radius:10px;
  padding:20px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  background:linear-gradient(145deg,#1c1f23,#101215);
  position:relative;
  overflow:hidden;
}
.track-grid article::before{
  content:"";
  position:absolute;inset:0 0 auto;height:3px;
  background:linear-gradient(90deg,var(--red,#d6232a),transparent);
}
.track-grid article.featured{grid-column:span 2;background:linear-gradient(145deg,#24272c,#111316)}
.track-grid strong{font-size:42px;line-height:1;color:#fff}
.track-grid span{font-weight:800;margin-top:14px}
.track-grid small{color:#8f959d;margin-top:2px}
@media(max-width:1000px){.track-grid{grid-template-columns:repeat(4,1fr)}.track-grid article.featured{grid-column:span 1}}
@media(max-width:620px){.track-grid{grid-template-columns:repeat(2,1fr)}}

/* Manufacturer Bento / masonry — scoped, no global selectors */
.brand-cloud{
  display:grid !important;
  grid-template-columns:repeat(12,minmax(0,1fr));
  grid-auto-rows:54px;
  grid-auto-flow:dense;
  gap:10px;
  margin-top:28px;
}
.brand-cloud > span{
  grid-column:span 2;
  margin:0!important;
  padding:0 17px!important;
  border:1px solid #343941!important;
  border-radius:12px!important;
  background:linear-gradient(145deg,#191c20,#101215)!important;
  color:#f1f2f3!important;
  display:flex!important;
  align-items:center;
  justify-content:flex-start;
  min-width:0;
  font-size:13px;
  font-weight:700;
  position:relative;
  overflow:hidden;
  transition:transform .22s,border-color .22s,box-shadow .22s;
}
.brand-cloud > span::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--red,#d6232a);opacity:.72}
.brand-cloud > span:hover{transform:translateY(-3px);border-color:#5b626b!important;box-shadow:0 14px 30px rgba(0,0,0,.24)}
.brand-cloud > .brand-xl{grid-column:span 4;grid-row:span 2;font-size:19px;align-items:flex-end;padding-bottom:16px!important}
.brand-cloud > .brand-lg,.brand-cloud > .brand-wide{grid-column:span 3}
@media(max-width:1100px){
  .brand-cloud{grid-template-columns:repeat(8,minmax(0,1fr))}
  .brand-cloud > span{grid-column:span 2}
  .brand-cloud > .brand-xl{grid-column:span 4}
  .brand-cloud > .brand-lg,.brand-cloud > .brand-wide{grid-column:span 2}
}
@media(max-width:680px){
  .brand-cloud{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:48px;gap:8px}
  .brand-cloud > span,.brand-cloud > .brand-lg,.brand-cloud > .brand-wide{grid-column:span 1;padding-inline:12px!important;font-size:12px}
  .brand-cloud > .brand-xl{grid-column:span 2;grid-row:span 1;align-items:center;padding-bottom:0!important;font-size:14px}
}

/* FAQ restored */
.faq-section{background:#f3f4f5;color:#111214}
.faq-layout{display:grid;grid-template-columns:.72fr 1.28fr;gap:60px}
.faq-intro>p:last-child{color:#596068;font-size:17px}
.faq-grid{display:grid;gap:9px}
.faq-grid details{background:#fff;border:1px solid #d6dade;border-radius:9px;padding:0 18px}
.faq-grid summary{cursor:pointer;list-style:none;font-weight:800;padding:18px 30px 18px 0;position:relative}
.faq-grid summary::-webkit-details-marker{display:none}
.faq-grid summary::after{content:"+";position:absolute;right:0;color:#d6232a;font-size:24px}
.faq-grid details[open] summary::after{content:"–"}
.faq-grid details p{margin:0 0 18px;color:#5b6168}
@media(max-width:850px){.faq-layout{grid-template-columns:1fr;gap:28px}}

/* Börsen history */
.boerse-section{background:#111316}
.boerse-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:55px;align-items:center}
.boerse-copy p{color:#abb1b8;font-size:17px}
.boerse-photo{margin:0;overflow:hidden;border-radius:12px;border:1px solid #30343a;position:relative}
.boerse-photo img{width:100%;max-height:620px;object-fit:cover}
.boerse-photo figcaption{padding:13px 16px;background:#191b1f;color:#aeb3b9;font-size:12px}
@media(max-width:850px){.boerse-grid{grid-template-columns:1fr;gap:28px}}

/* Family note restored */
.family-note{margin-top:18px;padding-top:16px;border-top:1px solid #cdd0d3;font-size:14px!important}

/* Contact restored */
.contact-restored{padding-top:12px;border-top:1px solid #34383e}

/* Ultrawide: don't ever stretch the site beyond 1920 */
@media(min-width:1921px){
  .scroll-progress{max-width:1920px;left:50%;transform:translateX(-50%)}
}

/* Full-view cinematic background treatment.
   Fixed remains on desktop; image does not stretch beyond the 1920px site shell. */
.hero-image,.parallax-bg{
  background-size:cover!important;
  background-attachment:fixed!important;
}
.parallax::after{background:rgba(0,0,0,.50)!important}
@media(max-width:800px){
  .hero-image,.parallax-bg{background-attachment:scroll!important}
}

/* ====================================================================
   FINAL CONVERSION / UX LAYER — additive; existing content untouched
   ==================================================================== */
.reassurance-strip{background:#0b0d0f;border-block:1px solid #292d32;position:relative;z-index:5}
.reassurance-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.reassurance-grid>div{padding:24px 22px;border-right:1px solid #292d32;position:relative}
.reassurance-grid>div:last-child{border-right:0}
.reassurance-grid>div::before{content:"";position:absolute;left:22px;top:0;width:34px;height:2px;background:var(--red,#d6232a)}
.reassurance-grid strong{display:block;color:#fff;font-size:14px;margin-bottom:6px}
.reassurance-grid span{display:block;color:#959ca4;font-size:12px;line-height:1.5}

/* Collection area becomes controlled bento when the existing cards grid is present */
.collection-bento{display:grid!important;grid-template-columns:repeat(12,minmax(0,1fr))!important;grid-auto-flow:dense;gap:14px!important}
.collection-bento>.card{grid-column:span 4;min-height:230px}
.collection-bento>.card:nth-child(1){grid-column:span 7;min-height:280px}
.collection-bento>.card:nth-child(2){grid-column:span 5;min-height:280px}
.collection-bento>.card:nth-child(4){grid-column:span 5}
.collection-bento>.card:nth-child(5){grid-column:span 7}
.collection-bento>.card{transition:transform .28s cubic-bezier(.2,.8,.2,1),border-color .28s,box-shadow .28s}
.collection-bento>.card:hover{transform:translateY(-6px);border-color:#565d65;box-shadow:0 24px 55px rgba(0,0,0,.24)}

/* Journey: the existing three steps become one connected process */
.journey-steps{position:relative;isolation:isolate}
.journey-steps::before{content:"";position:absolute;left:9%;right:9%;top:34px;height:1px;background:linear-gradient(90deg,transparent,#d6232a 12%,#6a7077 50%,#d6232a 88%,transparent);z-index:-1;opacity:.7}
.journey-steps>div,.journey-steps>article{position:relative}

/* Trust anchor */
.trust-signature{display:inline-flex;align-items:center;gap:12px;margin-top:24px;padding:12px 16px;border:1px solid #3b4046;border-radius:8px;background:rgba(255,255,255,.025)}
.trust-signature strong,.trust-signature small{display:block}.trust-signature small{color:#9299a1;margin-top:2px}
.trust-dot{width:10px;height:10px;border-radius:50%;background:#d6232a;box-shadow:0 0 0 6px rgba(214,35,42,.11)}
.not-railway-kicker{margin-bottom:24px;padding:16px 18px;border-left:3px solid #d6232a;background:#eef0f2;display:flex;flex-direction:column;gap:3px}
.not-railway-kicker strong{color:#111214}.not-railway-kicker span{color:#5d636a;font-size:13px}

/* Cinematic separators: fixed on desktop, readable overlay, contained by 1920 shell */
.parallax{overflow:hidden}.parallax::after{background:rgba(0,0,0,.50)!important}
.parallax-bg,.hero-image{background-attachment:fixed!important}
.parallax-inner{transform:translateZ(0)}

/* Floating WhatsApp — visually belongs to the site rather than a green widget */
.floating-whatsapp{position:fixed;right:max(18px,calc((100vw - 1920px)/2 + 22px));bottom:22px;z-index:110;display:flex;align-items:center;gap:9px;padding:10px 14px 10px 10px;border:1px solid #42474e;border-radius:999px;background:rgba(13,15,17,.94);backdrop-filter:blur(12px);color:#fff;text-decoration:none;box-shadow:0 16px 45px rgba(0,0,0,.38);transition:transform .2s,border-color .2s}
.floating-whatsapp:hover{transform:translateY(-3px);border-color:#d6232a}
.floating-whatsapp span{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#d6232a;font-size:10px;font-weight:900;letter-spacing:.04em}
.floating-whatsapp b{font-size:12px}

/* subtle signal / rail language */
.section-head{position:relative}.section-head::before{content:"";position:absolute;left:-18px;top:8px;width:5px;height:5px;border-radius:50%;background:#d6232a;box-shadow:0 0 0 5px rgba(214,35,42,.09)}

@media(max-width:1000px){
 .reassurance-grid{grid-template-columns:repeat(2,1fr)}
 .reassurance-grid>div:nth-child(2){border-right:0}.reassurance-grid>div:nth-child(-n+2){border-bottom:1px solid #292d32}
 .collection-bento>.card,.collection-bento>.card:nth-child(n){grid-column:span 6;min-height:220px}
}
@media(max-width:800px){
 .parallax-bg,.hero-image{background-attachment:scroll!important}
 .journey-steps::before{display:none}
 .floating-whatsapp{right:14px;bottom:14px}
}
@media(max-width:620px){
 .reassurance-grid{grid-template-columns:1fr}
 .reassurance-grid>div{border-right:0;border-bottom:1px solid #292d32;padding:20px 18px}
 .reassurance-grid>div:last-child{border-bottom:0}.reassurance-grid>div::before{left:18px}
 .collection-bento{grid-template-columns:1fr!important}.collection-bento>.card,.collection-bento>.card:nth-child(n){grid-column:1!important;min-height:0}
 .floating-whatsapp b{display:none}.floating-whatsapp{padding:8px}.floating-whatsapp span{width:36px;height:36px}
}
@media(prefers-reduced-motion:reduce){.collection-bento>.card,.floating-whatsapp{transition:none!important}.collection-bento>.card:hover,.floating-whatsapp:hover{transform:none!important}}

/* =====================================================================
   FINAL SQUARE GRIDS — Hersteller + Spurgrößen
   ===================================================================== */

/* Hersteller: echtes quadratisches Bento/Masonry */
.brand-cloud{
  grid-template-columns:repeat(8,minmax(0,1fr)) !important;
  grid-auto-rows:auto !important;
  gap:12px !important;
  align-items:stretch;
}
.brand-cloud > span{
  grid-column:span 1 !important;
  grid-row:span 1 !important;
  aspect-ratio:1 / 1;
  min-height:0 !important;
  padding:16px !important;
  justify-content:center !important;
  align-items:center !important;
  text-align:center;
  font-size:clamp(15px,1vw,18px) !important;
  line-height:1.15;
  font-weight:800 !important;
  letter-spacing:.01em;
  border-radius:10px !important;
}
.brand-cloud > span::before{
  top:auto !important;
  right:16px;
  bottom:10px !important;
  left:16px !important;
  width:auto !important;
  height:2px;
  transform:scaleX(.24);
  transform-origin:center;
  transition:transform .24s ease,opacity .24s ease;
}
.brand-cloud > span:hover::before{
  width:auto !important;
  transform:scaleX(1);
}
.brand-cloud > .brand-xl{
  grid-column:span 2 !important;
  grid-row:span 2 !important;
  aspect-ratio:1 / 1;
  font-size:clamp(22px,1.55vw,30px) !important;
  padding:22px !important;
}
.brand-cloud > .brand-lg,
.brand-cloud > .brand-wide{
  grid-column:span 1 !important;
  grid-row:span 1 !important;
}

/* Spurgrößen: gleiche quadratische Designsprache */
.track-grid{
  display:grid !important;
  grid-template-columns:repeat(7,minmax(0,1fr)) !important;
  gap:12px !important;
  align-items:stretch;
}
.track-grid article,
.track-grid article.featured{
  grid-column:span 1 !important;
  aspect-ratio:1 / 1;
  min-height:0 !important;
  padding:18px !important;
  justify-content:center !important;
  align-items:center;
  text-align:center;
  border-radius:10px;
}
.track-grid article.featured{
  background:linear-gradient(145deg,#292d32,#111316);
  border-color:#555b63;
  box-shadow:0 16px 38px rgba(0,0,0,.22);
}
.track-grid strong{
  font-size:clamp(42px,3.2vw,64px) !important;
  line-height:.95;
}
.track-grid span{
  font-size:clamp(15px,1.05vw,18px);
  margin-top:14px !important;
}
.track-grid small{
  font-size:13px;
  margin-top:5px !important;
}
.track-grid article{
  transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease;
}
.track-grid article:hover{
  transform:translateY(-5px);
  border-color:#5d646d;
  box-shadow:0 18px 38px rgba(0,0,0,.24);
}

/* Responsive: Quadrate bleiben Quadrate */
@media(max-width:1250px){
  .brand-cloud{grid-template-columns:repeat(6,minmax(0,1fr)) !important}
  .track-grid{grid-template-columns:repeat(4,minmax(0,1fr)) !important}
}
@media(max-width:850px){
  .brand-cloud{grid-template-columns:repeat(4,minmax(0,1fr)) !important}
  .brand-cloud > span{font-size:15px !important;padding:12px !important}
  .brand-cloud > .brand-xl{font-size:23px !important}
  .track-grid{grid-template-columns:repeat(4,minmax(0,1fr)) !important}
}
@media(max-width:620px){
  .brand-cloud{grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:8px !important}
  .brand-cloud > span{font-size:12px !important;padding:8px !important;border-radius:8px !important}
  .brand-cloud > .brand-xl{
    grid-column:span 2 !important;
    grid-row:span 2 !important;
    font-size:20px !important;
  }
  .track-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:9px !important}
  .track-grid article,.track-grid article.featured{padding:14px !important}
  .track-grid strong{font-size:46px !important}
  .track-grid span{font-size:15px}
}

/* FINAL: ruhigere, stärker abgedunkelte Hintergrundbilder */
.hero::before{
  background:
    linear-gradient(90deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.70) 38%,rgba(0,0,0,.58) 68%,rgba(0,0,0,.66) 100%) !important;
}
.hero::after{
  background:linear-gradient(180deg,rgba(0,0,0,.16),rgba(0,0,0,.38)) !important;
}
.parallax::after{
  background:rgba(0,0,0,.66) !important;
}
.parallax::before{
  background:
    linear-gradient(90deg,rgba(0,0,0,.22),transparent 45%,rgba(0,0,0,.20)),
    linear-gradient(180deg,rgba(0,0,0,.14),transparent 28%,rgba(0,0,0,.18)) !important;
}
.hero-image,.parallax-bg{
  filter:saturate(.72) contrast(.96) brightness(.88);
}
.hero:hover .hero-image,.parallax:hover .parallax-bg{
  filter:saturate(.76) contrast(.98) brightness(.90) !important;
}
@media(max-width:800px){
  .parallax::after{background:rgba(0,0,0,.70) !important}
  .hero::before{
    background:linear-gradient(180deg,rgba(0,0,0,.62),rgba(0,0,0,.78)) !important;
  }
}


/* =====================================================================
   FINAL CONVERSION: mobile hero + persistent contact/share drawer
   ===================================================================== */

/* Mobile hero: locomotive starts at the top and remains visible above copy */
@media(max-width:800px){
  .hero-image{
    background-position:center top !important;
  }
  .hero{
    min-height:760px;
    align-items:flex-end;
  }
  .hero-inner{
    padding-top:330px !important;
  }
  .hero::before{
    background:
      linear-gradient(180deg,
        rgba(0,0,0,.12) 0%,
        rgba(0,0,0,.18) 26%,
        rgba(0,0,0,.62) 52%,
        rgba(0,0,0,.90) 73%,
        rgba(0,0,0,.98) 100%) !important;
  }
}
@media(max-width:520px){
  .hero-image{
    background-position:58% top !important;
    background-size:auto 52% !important;
    background-repeat:no-repeat !important;
    background-color:#000 !important;
  }
  .hero-inner{
    padding-top:320px !important;
  }
}

/* Persistent right-side conversion rail */
.contact-rail{
  position:fixed;
  z-index:140;
  right:max(0px,calc((100vw - 1920px)/2));
  top:50%;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  gap:7px;
  align-items:flex-end;
}
.contact-rail-tab{
  width:54px;
  min-height:150px;
  border:1px solid #454a51;
  border-right:0;
  border-radius:10px 0 0 10px;
  background:linear-gradient(180deg,#17191c,#0d0f11);
  color:#fff;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  box-shadow:-14px 14px 38px rgba(0,0,0,.32);
  transition:width .22s ease,background .22s ease,border-color .22s ease;
}
.contact-rail-tab:hover,.contact-rail-tab:focus-visible{
  width:62px;
  background:linear-gradient(180deg,#202328,#111316);
  border-color:#686e76;
  outline:none;
}
.contact-rail-icon{
  display:grid;
  place-items:center;
  width:32px;height:32px;
  border-radius:50%;
  background:#d6232a;
  font-size:10px;
  font-weight:900;
}
.contact-rail-label{
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:10px;
  font-weight:900;
}
.share-rail-button{
  width:48px;height:48px;
  border:1px solid #454a51;
  border-right:0;
  border-radius:9px 0 0 9px;
  background:#17191c;
  color:#fff;
  cursor:pointer;
  font-size:22px;
  transition:.2s;
}
.share-rail-button:hover,.share-rail-button:focus-visible{
  width:56px;background:#22252a;border-color:#686e76;outline:none
}

.contact-drawer-backdrop{
  position:fixed;
  z-index:145;
  inset:0;
  background:rgba(0,0,0,.58);
  backdrop-filter:blur(3px);
  opacity:0;
  transition:opacity .22s ease;
}
.contact-drawer-backdrop.show{opacity:1}

.contact-drawer{
  position:fixed;
  z-index:150;
  top:0;
  right:max(0px,calc((100vw - 1920px)/2));
  width:min(440px,calc(100vw - 24px));
  height:100dvh;
  padding:28px;
  background:linear-gradient(180deg,#181a1e,#0d0f11);
  border-left:1px solid #3a3f45;
  color:#fff;
  box-shadow:-30px 0 80px rgba(0,0,0,.45);
  transform:translateX(105%);
  visibility:hidden;
  transition:transform .3s cubic-bezier(.2,.8,.2,1),visibility .3s;
  overflow-y:auto;
}
.contact-drawer.open{transform:none;visibility:visible}
.drawer-open{overflow:hidden}
.contact-drawer-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;padding-bottom:20px;border-bottom:1px solid #34383e}
.contact-drawer-head small{color:#d6232a;text-transform:uppercase;letter-spacing:.13em;font-weight:900}
.contact-drawer-head h2{font-size:34px!important;margin:5px 0 0!important;line-height:1}
.contact-drawer-close{width:40px;height:40px;border:1px solid #4b5057;border-radius:50%;background:#22252a;color:#fff;font-size:25px;cursor:pointer}
.contact-drawer-intro{color:#b5bac0;margin:22px 0}
.drawer-actions{display:grid;gap:8px}
.drawer-action{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:center;
  min-height:64px;
  padding:12px 15px;
  border:1px solid #34383e;
  border-radius:8px;
  background:#17191d;
  color:#fff;
  transition:transform .2s,border-color .2s,background .2s;
}
.drawer-action:hover{transform:translateX(-4px);border-color:#5d646c;background:#202328}
.drawer-action.primary{border-color:#7c2429;background:linear-gradient(135deg,#71181d,#311315)}
.drawer-action span{color:#9fa5ac;font-size:12px}
.drawer-action strong{font-size:14px;text-align:right}
.drawer-share{
  width:100%;
  margin-top:16px;
  display:flex;
  gap:13px;
  align-items:center;
  text-align:left;
  padding:14px 15px;
  border:1px solid #41464d;
  border-radius:8px;
  background:#202328;
  color:#fff;
  cursor:pointer;
}
.drawer-share>span:first-child{font-size:23px}
.drawer-share strong,.drawer-share small{display:block}
.drawer-share small{color:#9ba1a8;margin-top:2px}
.share-status{min-height:20px;color:#9ea4ab;font-size:12px;margin:6px 0 0}
.drawer-note{margin-top:20px;padding:16px;border-left:3px solid #d6232a;background:#131518}
.drawer-note strong,.drawer-note span{display:block}.drawer-note span{color:#aeb4bb;font-size:13px;margin-top:4px}

/* Keep mobile bottom bar but remove duplicate right rail label clutter */
@media(max-width:700px){
  .contact-rail{
    top:auto;
    bottom:76px;
    right:0;
    transform:none;
  }
  .contact-rail-tab{
    width:48px;
    min-height:116px;
  }
  .contact-rail-tab:hover{width:48px}
  .share-rail-button{width:44px;height:44px}
  .share-rail-button:hover{width:44px}
  .contact-drawer{
    right:0;
    width:min(94vw,420px);
    padding:22px 18px;
  }
}

/* Search/indexability has no visual effect; ensure hidden drawer is not display:none,
   so its text remains accessible to assistive technology only when opened via aria. */

/* =====================================================================
   Section scroll cues + mobile brand progressive disclosure
   ===================================================================== */
section{position:relative}
.section-scroll-cue{
  position:absolute;
  left:50%;
  bottom:16px;
  transform:translateX(-50%);
  z-index:8;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  color:rgba(255,255,255,.62);
  text-decoration:none;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.16em;
  transition:color .2s ease,transform .2s ease;
}
.section.light .section-scroll-cue,
.family .section-scroll-cue,
.faq-section .section-scroll-cue{
  color:rgba(17,18,20,.48);
}
.section-scroll-cue:hover{
  color:#fff;
  transform:translateX(-50%) translateY(2px);
}
.section.light .section-scroll-cue:hover,
.family .section-scroll-cue:hover,
.faq-section .section-scroll-cue:hover{
  color:#111214;
}
.scroll-cue-arrows{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0;
}
.scroll-cue-arrows i{
  width:11px;
  height:11px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);
  animation:scrollCue 1.6s infinite;
  opacity:.35;
}
.scroll-cue-arrows i:nth-child(2){
  margin-top:-4px;
  animation-delay:.22s;
}
@keyframes scrollCue{
  0%{transform:translateY(-2px) rotate(45deg);opacity:.18}
  45%{opacity:.9}
  100%{transform:translateY(7px) rotate(45deg);opacity:0}
}

/* Brand toggle only matters on compact/mobile */
.brand-toggle{
  display:none;
  margin:14px auto 0;
  min-height:44px;
  padding:0 16px;
  border:1px solid #454b52;
  border-radius:7px;
  background:#17191c;
  color:#fff;
  font-weight:800;
  cursor:pointer;
}
.brand-toggle:hover,.brand-toggle:focus-visible{
  border-color:#69717a;
  background:#202328;
  outline:none;
}

@media(max-width:680px){
  .brand-cloud{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    grid-auto-rows:56px !important;
  }
  .brand-cloud > span{
    aspect-ratio:auto !important;
    min-height:56px !important;
    font-size:13px !important;
  }
  .brand-cloud > .brand-xl{
    grid-column:span 2 !important;
    grid-row:span 1 !important;
    min-height:68px !important;
    font-size:17px !important;
  }
  .brand-cloud > .brand-extra{
    display:none !important;
  }
  .brand-cloud.brands-expanded > .brand-extra{
    display:flex !important;
  }
  .brand-toggle{display:flex;align-items:center;justify-content:center}
  .section-scroll-cue{bottom:10px}
  .scroll-cue-label{display:none}
}

/* Hide cues if user requests reduced motion */
@media(prefers-reduced-motion:reduce){
  .scroll-cue-arrows i{animation:none}
}

/* =====================================================================
   FINAL FLOATING ACTION BAR — no horizontal overflow
   ===================================================================== */
html,body{max-width:100%;overflow-x:clip}

.floating-action-bar{
  position:fixed;
  z-index:142;
  left:50%;
  bottom:max(12px,env(safe-area-inset-bottom));
  width:min(calc(100vw - 24px),720px);
  max-width:calc(100vw - 24px);
  min-width:0;
  transform:translate(-50%,calc(100% + 42px));
  opacity:0;
  pointer-events:none;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  padding:6px;
  gap:4px;
  border:1px solid rgba(91,97,105,.75);
  border-radius:15px;
  background:rgba(13,15,17,.92);
  backdrop-filter:blur(16px) saturate(115%);
  -webkit-backdrop-filter:blur(16px) saturate(115%);
  box-shadow:0 20px 55px rgba(0,0,0,.42);
  transition:transform .42s cubic-bezier(.2,.8,.2,1),opacity .28s ease;
}
.floating-action-bar.is-visible{
  transform:translate(-50%,0);
  opacity:1;
  pointer-events:auto;
}
.fab-action{
  appearance:none;
  min-width:0;
  min-height:54px;
  padding:6px 8px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:#f6f6f5;
  text-decoration:none;
  font:inherit;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  white-space:nowrap;
  overflow:hidden;
  transition:background .2s ease,transform .2s ease,color .2s ease;
}
.fab-action:hover,.fab-action:focus-visible{
  background:#24272b;
  transform:translateY(-2px);
  outline:none;
}
.fab-whatsapp{background:rgba(214,35,42,.12)}
.fab-whatsapp:hover,.fab-whatsapp:focus-visible{background:rgba(214,35,42,.24)}
.fab-icon{
  flex:0 0 28px;
  width:28px;height:28px;
  display:grid;place-items:center;
  border-radius:50%;
  background:#272a2f;
  color:#fff;
  font-size:13px;
  line-height:1;
}
.fab-wa{background:#d6232a;font-size:9px;font-weight:900}
.fab-share-icon{font-size:18px}
.fab-action>span:last-child{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:12px;
  font-weight:800;
}

/* Contact drawer now opens from the bottom bar; no right-side tab required */
.contact-drawer{
  right:max(0px,calc((100vw - 1920px)/2)) !important;
}

/* Make sure content can never be hidden by the floating controls near page end */
footer{padding-bottom:96px}

@media(max-width:620px){
  .floating-action-bar{
    width:calc(100vw - 16px);
    max-width:calc(100vw - 16px);
    bottom:max(8px,env(safe-area-inset-bottom));
    padding:5px;
    gap:2px;
    border-radius:13px;
  }
  .fab-action{
    min-height:52px;
    padding:5px 2px;
    gap:3px;
    flex-direction:column;
  }
  .fab-icon{
    width:25px;height:25px;
    flex-basis:25px;
    font-size:12px;
  }
  .fab-wa{font-size:8px}
  .fab-action>span:last-child{
    width:100%;
    text-align:center;
    font-size:10px;
    line-height:1.1;
  }
  footer{padding-bottom:88px}
}

@media(max-width:360px){
  .floating-action-bar{width:calc(100vw - 10px);max-width:calc(100vw - 10px)}
  .fab-action>span:last-child{font-size:9px}
}

@media(prefers-reduced-motion:reduce){
  .floating-action-bar{transition:opacity .01s linear;transform:none;bottom:-100px}
  .floating-action-bar.is-visible{bottom:max(8px,env(safe-area-inset-bottom))}
}

/* Floating Bar: Kontakt | WhatsApp | Anrufen | Teilen */
.floating-action-bar{
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
}
.floating-action-bar .fab-action{
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  justify-content:center !important;
  text-align:center;
}
.floating-action-bar .fab-action > span:last-child{
  flex:0 1 auto;
  min-width:0;
  text-align:center;
}
@media(max-width:620px){
  .floating-action-bar .fab-action{
    justify-content:center !important;
  }
}

/* =====================================================================
   ABSOLUTE FINAL OVERRIDES — MOBILE HERO + FLOATING BAR
   Must remain last in stylesheet.
   ===================================================================== */

/* 1) Floating bar — exact equal 4-column order, no legacy widths */
.floating-action-bar{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  grid-template-areas:"contact whatsapp call share" !important;
  left:50% !important;
  right:auto !important;
  width:min(720px,calc(100vw - 24px)) !important;
  max-width:calc(100vw - 24px) !important;
  min-width:0 !important;
  transform:translate(-50%,calc(100% + 42px)) !important;
  overflow:hidden !important;
}
.floating-action-bar.is-visible{
  transform:translate(-50%,0) !important;
}
.floating-action-bar .fab-contact{grid-area:contact !important}
.floating-action-bar .fab-whatsapp{grid-area:whatsapp !important}
.floating-action-bar .fab-call{grid-area:call !important}
.floating-action-bar .fab-share{grid-area:share !important}
.floating-action-bar > .fab-action{
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  margin:0 !important;
  box-sizing:border-box !important;
  justify-content:center !important;
}

/* 2) Hero on mobile: image MUST start at top, locomotive remains above text */
@media(max-width:800px){
  .hero{
    min-height:760px !important;
    align-items:flex-end !important;
    background:#000 !important;
  }

  /* Current implementation uses .hero-image as CSS background */
  .hero-image{
    inset:0 !important;
    top:0 !important;
    bottom:auto !important;
    height:58% !important;
    background-position:center top !important;
    background-size:cover !important;
    background-repeat:no-repeat !important;
    background-attachment:scroll !important;
    transform:none !important;
  }

  /* If a future build uses .hero-media img, this also stays top-aligned */
  .hero-media{
    position:absolute !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    bottom:auto !important;
    height:58% !important;
    display:block !important;
    overflow:hidden !important;
    background:#000 !important;
  }
  .hero-media img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center top !important;
    transform:none !important;
  }

  .hero-inner{
    position:relative !important;
    z-index:3 !important;
    padding-top:390px !important;
    padding-bottom:54px !important;
  }

  .hero::before{
    z-index:2 !important;
    background:
      linear-gradient(180deg,
        rgba(0,0,0,.02) 0%,
        rgba(0,0,0,.06) 27%,
        rgba(0,0,0,.34) 46%,
        rgba(0,0,0,.80) 62%,
        rgba(0,0,0,.97) 78%,
        #000 100%) !important;
  }
}

@media(max-width:520px){
  .hero-image{
    height:54% !important;
    background-position:56% top !important;
    background-size:cover !important;
  }
  .hero-media{height:54% !important}
  .hero-media img{object-position:56% top !important}
  .hero-inner{
    padding-top:365px !important;
  }

  .floating-action-bar{
    width:calc(100vw - 12px) !important;
    max-width:calc(100vw - 12px) !important;
    bottom:max(6px,env(safe-area-inset-bottom)) !important;
    padding:5px !important;
    gap:2px !important;
  }
  .floating-action-bar > .fab-action{
    min-height:54px !important;
    padding:5px 1px !important;
    flex-direction:column !important;
    gap:3px !important;
  }
  .floating-action-bar .fab-icon{
    width:25px !important;
    height:25px !important;
    flex:0 0 25px !important;
  }
  .floating-action-bar .fab-action > span:last-child{
    display:block !important;
    width:100% !important;
    font-size:10px !important;
    line-height:1.05 !important;
    text-align:center !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
}

/* Prevent any old bottom bars/side rails from showing */
.mobilebar,.mobile-bar,.bottom-bar,.sticky-contact-bar,.contact-rail{
  display:none !important;
}

/* =====================================================================
   MOBILE ROBUST MODE — separate image zone + separate action bar
   ===================================================================== */

.hero-mobile-media{display:none}

/* Desktop unchanged */
@media(min-width:801px){
  .hero-mobile-media{display:none!important}
}

/* Mobile hero is split into two independent zones */
@media(max-width:800px){
  .hero{
    display:block!important;
    position:relative!important;
    min-height:0!important;
    padding:0!important;
    background:#000!important;
    overflow:hidden!important;
  }

  /* Hide the desktop background entirely on mobile */
  .hero-image{
    display:none!important;
  }

  .hero-mobile-media{
    display:block!important;
    position:relative!important;
    width:100%!important;
    height:auto!important;
    aspect-ratio:16 / 9!important;
    overflow:hidden!important;
    background:#000!important;
    z-index:1!important;
  }

  .hero-mobile-media img{
    display:block!important;
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:center top!important;
    transform:none!important;
    filter:saturate(.78) contrast(.98) brightness(.9)!important;
  }

  /* dark fade belongs only to bottom of image, not over the whole hero */
  .hero-mobile-media::after{
    content:""!important;
    position:absolute!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    height:34%!important;
    background:linear-gradient(180deg,transparent,rgba(0,0,0,.72) 76%,#000)!important;
    pointer-events:none!important;
  }

  /* kill old overlay layers that previously covered the locomotive */
  .hero::before,
  .hero::after{
    display:none!important;
    content:none!important;
  }

  .hero-inner{
    position:relative!important;
    z-index:2!important;
    width:min(100% - 28px,var(--max))!important;
    margin:-2px auto 0!important;
    padding:30px 0 48px!important;
    background:#000!important;
  }

  .hero h1{
    margin-top:0!important;
  }

  .hero-scroll{
    display:none!important;
  }
}

/* Slightly taller image zone on narrow phones so locomotive stays prominent */
@media(max-width:520px){
  .hero-mobile-media{
    aspect-ratio:4 / 3!important;
  }
  .hero-mobile-media img{
    object-position:56% top!important;
  }
  .hero-inner{
    padding-top:26px!important;
  }
}

/* MOBILE ACTION BAR — completely self-contained */
@media(max-width:800px){
  html,body{
    width:100%!important;
    max-width:100%!important;
    overflow-x:hidden!important;
  }

  .floating-action-bar{
    position:fixed!important;
    z-index:999!important;
    left:8px!important;
    right:8px!important;
    bottom:max(8px,env(safe-area-inset-bottom))!important;
    width:auto!important;
    max-width:none!important;
    min-width:0!important;

    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    grid-template-areas:"contact whatsapp call share"!important;
    gap:2px!important;

    padding:5px!important;
    border:1px solid rgba(91,97,105,.78)!important;
    border-radius:14px!important;
    background:rgba(13,15,17,.96)!important;

    transform:translateY(calc(100% + 30px))!important;
    opacity:0!important;
    pointer-events:none!important;
    box-sizing:border-box!important;
  }

  .floating-action-bar.is-visible{
    transform:translateY(0)!important;
    opacity:1!important;
    pointer-events:auto!important;
  }

  .floating-action-bar .fab-contact{grid-area:contact!important}
  .floating-action-bar .fab-whatsapp{grid-area:whatsapp!important}
  .floating-action-bar .fab-call{grid-area:call!important}
  .floating-action-bar .fab-share{grid-area:share!important}

  .floating-action-bar > .fab-action{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    min-height:56px!important;
    margin:0!important;
    padding:5px 1px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:4px!important;
    overflow:hidden!important;
    border-radius:10px!important;
    box-sizing:border-box!important;
  }

  .floating-action-bar .fab-icon{
    flex:0 0 26px!important;
    width:26px!important;
    height:26px!important;
    margin:0!important;
  }

  .floating-action-bar .fab-action > span:last-child{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    padding:0!important;
    margin:0!important;
    text-align:center!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    font-size:10px!important;
    line-height:1.05!important;
  }

  /* absolutely remove all obsolete mobile contact controls */
  .mobilebar,.mobile-bar,.bottom-bar,.sticky-contact-bar,.contact-rail{
    display:none!important;
  }

  footer{
    padding-bottom:92px!important;
  }
}

/* Extra-small phones */
@media(max-width:360px){
  .floating-action-bar{
    left:5px!important;
    right:5px!important;
  }
  .floating-action-bar .fab-action > span:last-child{
    font-size:9px!important;
  }
}

/* Anschrift im Schnellkontakt */
.drawer-address{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid #34383e;
}
.drawer-address small{
  display:block;
  margin-bottom:5px;
  color:#8f969e;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:10px;
  font-weight:800;
}
.drawer-address address{
  margin:0;
  color:#f1f1ef;
  font-style:normal;
  font-size:13px;
  line-height:1.55;
}

/* =====================================================================
   Hersteller-Marquee + Spurgrößen-Fächer + bessere Produktfotos
   ===================================================================== */

/* Hersteller: ruhiges kontinuierliches Laufband */
.brand-marquee{
  position:relative;
  margin-top:30px;
  overflow:hidden;
  mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
}
.brand-marquee::before,
.brand-marquee::after{
  content:"";
  position:absolute;
  top:0;bottom:0;
  width:70px;
  z-index:2;
  pointer-events:none;
}
.brand-marquee::before{left:0;background:linear-gradient(90deg,#08090a,transparent)}
.brand-marquee::after{right:0;background:linear-gradient(270deg,#08090a,transparent)}
.brand-marquee-track{
  display:flex;
  width:max-content;
  animation:brandMarquee 34s linear infinite;
}
.brand-marquee:hover .brand-marquee-track{animation-play-state:paused}
.brand-marquee-group{
  display:flex;
  gap:12px;
  align-items:center;
  padding-right:12px;
}
.brand-marquee-group span{
  min-width:max-content;
  padding:14px 19px;
  border:1px solid #383d43;
  border-radius:8px;
  background:linear-gradient(145deg,#181b1f,#101215);
  color:#f4f4f2;
  font-size:17px;
  font-weight:800;
  letter-spacing:.01em;
  box-shadow:inset 0 1px rgba(255,255,255,.025);
}
.brand-marquee-group span::before{
  content:"";
  display:inline-block;
  width:6px;height:6px;
  border-radius:50%;
  background:#d6232a;
  margin-right:9px;
  vertical-align:1px;
}
@keyframes brandMarquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* Spurgrößen: gefächerte Karten zum Klicken/Swipen */
.track-fan-wrap{
  margin-top:40px;
  padding:8px 0 4px;
}
.track-fan{
  position:relative;
  height:330px;
  display:flex;
  align-items:center;
  justify-content:center;
  perspective:1100px;
  overflow:hidden;
  touch-action:pan-y;
  outline:none;
}
.track-fan-card{
  position:absolute!important;
  width:min(220px,27vw)!important;
  aspect-ratio:1 / 1!important;
  min-height:0!important;
  margin:0!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:center!important;
  text-align:center!important;
  border:1px solid #3b4046!important;
  border-radius:14px!important;
  background:linear-gradient(145deg,#202328,#101215)!important;
  box-shadow:0 24px 50px rgba(0,0,0,.30)!important;
  cursor:pointer;
  z-index:var(--fan-z);
  transform:
    translateX(var(--fan-x))
    rotate(var(--fan-r))
    scale(var(--fan-s));
  transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .28s,border-color .28s,box-shadow .28s;
  opacity:.64;
}
.track-fan-card.is-active{
  opacity:1;
  border-color:#666d76!important;
  box-shadow:0 30px 65px rgba(0,0,0,.42),0 0 0 1px rgba(214,35,42,.15)!important;
}
.track-fan-card strong{
  font-size:64px!important;
  line-height:.9!important;
}
.track-fan-card span{
  font-size:18px!important;
  font-weight:800!important;
  margin-top:16px!important;
}
.track-fan-card small{
  margin-top:4px!important;
  font-size:13px!important;
  color:#9aa0a7!important;
}
.track-fan-card::after{
  content:"";
  position:absolute;
  left:25%;right:25%;bottom:14px;
  height:2px;
  background:#d6232a;
  opacity:.72;
}
.track-fan-controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  margin-top:10px;
}
.track-fan-prev,.track-fan-next{
  width:42px;height:42px;
  border:1px solid #454b52;
  border-radius:50%;
  background:#17191c;
  color:#fff;
  font-size:28px;
  cursor:pointer;
}
.track-fan-prev:hover,.track-fan-next:hover{background:#23262b;border-color:#676e76}
.track-fan-status{
  min-width:170px;
  text-align:center;
  color:#a8aeb5;
  font-size:12px;
  font-weight:700;
}

/* 01-04: no more awkward crop. Image gets its own framed stage. */
#sammlungen .card.card-image-contained{
  display:flex;
  flex-direction:column;
}
#sammlungen .card.card-image-contained > img{
  width:100%!important;
  height:230px!important;
  object-fit:contain!important;
  object-position:center!important;
  background:
    radial-gradient(circle at center,#25282d 0,#17191c 62%,#111316 100%)!important;
  padding:14px!important;
  border-bottom:1px solid #30343a;
}
#sammlungen .card.card-image-contained:hover > img{
  transform:scale(1.02)!important;
}

@media(max-width:900px){
  .brand-marquee-group span{font-size:15px;padding:12px 16px}
  .track-fan{height:290px}
  .track-fan-card{width:min(190px,38vw)!important}
  .track-fan-card strong{font-size:54px!important}
}

@media(max-width:620px){
  .brand-marquee{
    margin-inline:-14px;
    mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);
  }
  .brand-marquee-track{animation-duration:28s}
  .brand-marquee-group{gap:8px;padding-right:8px}
  .brand-marquee-group span{
    font-size:14px;
    padding:11px 14px;
    border-radius:7px;
  }
  .track-fan{
    height:265px;
  }
  .track-fan-card{
    width:165px!important;
  }
  .track-fan-card strong{font-size:48px!important}
  .track-fan-card span{font-size:15px!important}
  .track-fan-controls{margin-top:2px}
  #sammlungen .card.card-image-contained > img{
    height:210px!important;
    padding:10px!important;
  }
}
@media(prefers-reduced-motion:reduce){
  .brand-marquee-track{animation:none!important}
  .track-fan-card{transition:none!important}
}

/* =====================================================================
   FINAL 01-04 CARD GRID — clean equal 2x2 layout
   ===================================================================== */
#sammlungen .collection-bento,
#sammlungen .cards{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  grid-auto-flow:row !important;
  gap:16px !important;
  align-items:stretch !important;
}

#sammlungen .collection-bento > .card,
#sammlungen .cards > .card,
#sammlungen .collection-bento > .card:nth-child(n),
#sammlungen .cards > .card:nth-child(n){
  grid-column:span 1 !important;
  grid-row:span 1 !important;
  min-height:0 !important;
  height:100% !important;
  margin:0 !important;
  display:flex !important;
  flex-direction:column !important;
}

/* identical image stage for all four cards */
#sammlungen .card.card-image-contained > img,
#sammlungen .card > img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  aspect-ratio:16 / 9 !important;
  object-fit:contain !important;
  object-position:center !important;
  padding:12px !important;
  background:
    radial-gradient(circle at 50% 45%,#272b30 0%,#191c20 60%,#111316 100%) !important;
  border-bottom:1px solid #30343a !important;
  box-sizing:border-box !important;
  transform:none !important;
}

/* same text area height behavior */
#sammlungen .card-body{
  flex:1 1 auto !important;
  display:flex !important;
  flex-direction:column !important;
  padding:22px !important;
}
#sammlungen .card-body p{
  margin-top:auto !important;
}

/* subtle, consistent hover without changing image crop */
#sammlungen .card:hover{
  transform:translateY(-5px) !important;
}
#sammlungen .card:hover > img{
  transform:scale(1.012) !important;
}

/* Tablet remains 2 columns where practical */
@media(max-width:820px){
  #sammlungen .collection-bento,
  #sammlungen .cards{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:12px !important;
  }
  #sammlungen .card-body{padding:18px !important}
}

/* Smartphone: one card per row */
@media(max-width:620px){
  #sammlungen .collection-bento,
  #sammlungen .cards{
    grid-template-columns:1fr !important;
    gap:12px !important;
  }
  #sammlungen .card.card-image-contained > img,
  #sammlungen .card > img{
    aspect-ratio:16 / 9 !important;
    padding:8px !important;
  }
}

/* =====================================================================
   FINAL: 01–04 identical image containers, full bleed, equal size
   ===================================================================== */
#sammlungen .card > img,
#sammlungen .card.card-image-contained > img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  aspect-ratio:16 / 9 !important;
  object-fit:cover !important;
  background:#17191c !important;
  padding:0 !important;
  border-bottom:1px solid #30343a !important;
  box-sizing:border-box !important;
}

/* Focal points tuned individually so cover looks intentional */
#sammlungen .card-01 > img{ object-position:center 46% !important; }
#sammlungen .card-02 > img{ object-position:center 48% !important; }
#sammlungen .card-03 > img{ object-position:center 50% !important; }
#sammlungen .card-04 > img{ object-position:center 48% !important; }

/* All four cards remain visually identical */
#sammlungen .card-01,
#sammlungen .card-02,
#sammlungen .card-03,
#sammlungen .card-04{
  overflow:hidden !important;
}
#sammlungen .card-01 .card-body,
#sammlungen .card-02 .card-body,
#sammlungen .card-03 .card-body,
#sammlungen .card-04 .card-body{
  min-height:180px !important;
}

/* Mobile keeps same proportion and full-bleed look */
@media(max-width:620px){
  #sammlungen .card > img,
  #sammlungen .card.card-image-contained > img{
    aspect-ratio:16 / 9 !important;
    object-fit:cover !important;
    padding:0 !important;
  }
}