:root{font-size:62.5%;--gold:#c2a348;--glass:rgba(255,255,255,.64)}
*{box-sizing:border-box}
html{margin:0;padding:0;background:url("../img/hintergrund.jpg") no-repeat center center fixed;background-size:cover}
body{margin:0;padding:0;min-height:100vh;font-family:Arial,Helvetica,sans-serif;color:var(--gold);overflow-x:hidden;display:flex;align-items:center;justify-content:center}

/* V3: Inhaltsrechteck nur so groß wie der tatsächliche Inhalt plus gleichmäßiger Außenabstand. */
.masters-home{width:min(90vw,1290px);height:760px;margin:0 auto;display:grid;grid-template-columns:minmax(500px,600px) minmax(300px,350px) 250px;gap:0;align-items:center;padding:20px;background:var(--glass);box-shadow:0 10px 30px rgba(0,0,0,.45)}
.home-left,.home-year-wheel{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.home-left{height:720px;display:flex;flex-direction:column;justify-content:center;align-items:center}

#masters-menu{width:100%;background:transparent;padding:28px 0 26px;margin-top:90px;position:relative;z-index:2}
#masters-menu ul{list-style:none;margin:0 auto;padding:0 40px;display:flex;justify-content:center;gap:30px}
#masters-menu li{padding:0}
#masters-menu a{position:relative;display:inline-block;padding:8px 10px;font-size:2rem;line-height:1.2;color:var(--gold);font-weight:700;text-transform:uppercase;text-decoration:none;white-space:nowrap;transition:color .18s ease,background-color .18s ease,transform .18s ease,box-shadow .18s ease}
#masters-menu a::after{content:"";position:absolute;left:10px;right:10px;bottom:2px;height:2px;background:currentColor;transform:scaleX(0);transform-origin:center;transition:transform .18s ease}
#masters-menu a:hover{color:#a88a2e;background:rgba(194,163,72,.20);box-shadow:0 5px 18px rgba(194,163,72,.32),0 2px 8px rgba(0,0,0,.20);transform:translateY(-2px) scale(1.05)}
#masters-menu a:hover::after{transform:scaleX(1)}

/* Das Logo selbst bleibt unverändert; nur der weiße Außenbereich ist transparent. */
.logo-panel{width:100%;background:transparent;display:flex;align-items:center;justify-content:center;padding:32px 0 42px;transform:translateY(38px)}
.masters-logo{display:block;width:min(48%,270px);height:auto;max-width:270px}

.quote-panel{width:100%;min-height:420px;background:transparent;display:flex;align-items:flex-start;padding:52px 52px}
.quote-panel h1{margin:0;color:var(--gold);font-size:2.6rem;line-height:1.9;text-transform:uppercase;font-weight:700;max-width:520px}

/* Filmstrip: vertikaler, kontinuierlicher Filmstreifen. Die Perforation gehört zum gesamten Strip
   und darf daher NICHT an den einzelnen Bildern neu beginnen. */
.filmstrip-panel{height:720px;display:flex;align-items:center;justify-content:center;background:transparent}
.filmstrip{width:100%;max-width:330px;height:720px;overflow:hidden;position:relative;background:#000}
.filmstrip-track{position:absolute;left:0;top:0;width:100%;will-change:transform}
.film-frame{position:relative;display:block;width:100%;padding:0 31px 10px;text-decoration:none;background:#000}
.film-image-wrap{display:block;width:100%;aspect-ratio:16 / 9;overflow:hidden;background:#222;border-radius:10px !important}
.film-image-wrap img{display:block;width:100%;height:100%;object-fit:cover;border-radius:0 !important}
/* Kontinuierliche Perforation: schwarzer Filmrand mit weißen Lochungen links/rechts.
   Lochabstand 64px; die Lochung läuft über den gesamten sichtbaren Filmstreifen,
   unabhängig von den Bildwechseln. */
.film-perf{position:absolute;top:-64px;bottom:-64px;width:31px;pointer-events:none;z-index:6;background:#000;overflow:visible;will-change:transform}
.film-perf-left{left:0}
.film-perf-right{right:0}
.film-perf-hole{position:absolute;left:5px;right:5px;top:8px;height:16px;background:#fff;border-radius:4px;box-shadow:0 41px 0 #fff,0 82px 0 #fff,0 123px 0 #fff,0 164px 0 #fff,0 205px 0 #fff,0 246px 0 #fff,0 287px 0 #fff,0 328px 0 #fff,0 369px 0 #fff,0 410px 0 #fff,0 451px 0 #fff,0 492px 0 #fff,0 533px 0 #fff,0 574px 0 #fff,0 615px 0 #fff,0 656px 0 #fff,0 697px 0 #fff,0 738px 0 #fff,0 779px 0 #fff,0 820px 0 #fff}
/* Weiße Trennlinie zwischen den einzelnen Bildern. */
.film-frame::after{content:none}

.home-year-wheel{height:720px;display:flex;align-items:center;justify-content:center}
.year-wheel-box{width:250px;text-align:center;font-family:Arial,Helvetica,sans-serif}
.mw-current{color:var(--gold);font-size:28px;font-weight:700;text-transform:uppercase;margin-bottom:8px}
.mw-wheel-wrap{width:250px;height:294px;position:relative}
.mw-wheel{height:294px;overflow:hidden;position:relative;touch-action:none;user-select:none;-webkit-user-select:none}
.mw-track{position:absolute;left:0;top:0;width:100%;will-change:transform}
.mw-item{height:42px;display:flex;align-items:center;justify-content:center;cursor:pointer;outline:none}.mw-item:focus-visible .mw-year{box-shadow:0 0 0 2px #fff inset}
.mw-year{width:calc(100% - 50px);height:42px;display:flex;align-items:center;justify-content:center;background:var(--gold);color:#fff;font-size:20px;font-weight:700;opacity:.2;text-decoration:none}
.mw-item.active .mw-year{width:100%;opacity:1}
.mw-item.near .mw-year{width:calc(100% - 20px);opacity:.5}

@media (max-width:1200px){
  .masters-home{width:96vw;height:auto;grid-template-columns:minmax(430px,1fr) 300px 220px}
  .home-left,.home-year-wheel{height:720px}
  .quote-panel{padding:45px 42px}.quote-panel h1{font-size:2.35rem}
  .filmstrip{max-width:300px}.film-frame{flex-basis:138px}
  .year-wheel-box,.mw-wheel-wrap{width:220px}.mw-wheel{height:294px}
}
@media (max-width:900px){
  html{background-attachment:scroll}
  body{display:block}
  .masters-home{width:100%;height:auto;display:flex;flex-direction:column;align-items:stretch;padding:16px}
  .home-left,.home-year-wheel{height:auto;min-height:auto}
  #masters-menu ul{gap:18px;padding:0 20px}
  #masters-menu a{font-size:1.6rem}
  .logo-panel{padding:25px 0 32px}.masters-logo{width:210px}
  .quote-panel{min-height:auto;padding:36px 30px}.quote-panel h1{font-size:2.1rem;line-height:1.7}
  .filmstrip-panel{height:420px;padding:20px 0}
  .filmstrip{height:220px;max-width:100%}
  .home-year-wheel{padding:28px 0 40px;background:transparent}
}
@media (max-width:520px){
  #masters-menu ul{justify-content:space-between;gap:8px}.masters-logo{width:190px}
  .quote-panel h1{font-size:1.8rem;line-height:1.55}
  .filmstrip{max-width:100%}
}