/* Gerald H. Beirer — Cinematic Site Design System */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&family=Noto+Sans+JP:wght@700&display=swap');

:root{
  --bg:#ffffff;
  --card:#F5F8FB;
  --text:#0B1420;
  --muted:#4F5B67;
  --navy:#0B2C4A;
  --midblue:#2C5E8B;
  --ice:#74A9D8;
  --ice-8:rgba(116,169,216,.08);
  --cta:#000000;
  --border:#E1E7EE;
  --ease:cubic-bezier(.16,1,.3,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--text);
  font-family:'Inter',sans-serif;font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,h4{font-family:'Outfit',sans-serif;color:var(--navy);letter-spacing:-.02em}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:1180px;margin:0 auto;padding:0 32px}

/* noise texture */
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.025;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Nav ---- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 32px;transition:all .4s var(--ease);
}
.nav.solid{background:rgba(11,44,74,.94);backdrop-filter:blur(10px);padding:14px 32px;border-bottom:1px solid rgba(255,255,255,.1)}
.nav.on-dark:not(.solid) .nav-link,
.nav.on-dark:not(.solid) .logo{color:#fff}
.nav.solid .nav-link,
.nav.solid .logo{color:#fff}
.nav.solid .nav-cta{background:#fff;color:var(--navy)!important}
.logo{font-family:'Noto Sans JP',sans-serif;font-weight:700;font-size:15px;letter-spacing:.04em;color:var(--navy)}
.nav-links{display:flex;gap:32px;align-items:center}
.nav-link{position:relative;font-size:14px;font-weight:500;color:var(--navy);transition:color .3s var(--ease)}
.nav-link:hover{color:var(--ice)}
.nav-link:not(.nav-cta)::after{content:'';position:absolute;left:0;right:0;bottom:-5px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.nav-link:not(.nav-cta):hover::after{transform:scaleX(1);transform-origin:left}
.nav-cta{background:var(--cta);color:#fff!important;padding:9px 20px;border-radius:100px;font-size:13px;font-weight:600;transition:background .4s var(--ease),color .4s var(--ease)}
.nav-toggle{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:6px;z-index:1001}
.nav-toggle span{width:22px;height:2px;background:var(--navy);transition:.3s}
.nav.on-dark:not(.solid) .nav-toggle span{background:#fff}
.nav.solid .nav-toggle span{background:#fff}

@media(max-width:860px){
  .nav .nav-links{
    position:fixed;top:0;right:0;height:100dvh;width:min(320px,80vw);
    background:#fff;flex-direction:column;justify-content:center;gap:28px;
    transform:translateX(100%);transition:transform .4s var(--ease);
    box-shadow:-10px 0 40px rgba(0,0,0,.08);z-index:1002;
  }
  .nav .nav-links.open{transform:translateX(0)}
  .nav-toggle{display:flex}
  /* Panel ist weiss -> Links immer dunkel, egal ob Nav transparent oder solid */
  .nav .nav-links .nav-link{color:var(--navy)!important;font-size:16px}
  .nav .nav-links .nav-cta{background:var(--cta);color:#fff!important}
  /* Hamburger bleibt ueber dem Panel bedienbar */
  .nav-toggle{z-index:1003;position:relative}
}

/* ---- Buttons ---- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 28px;border-radius:100px;font-size:14px;font-weight:600;
  transition:all .4s var(--ease);cursor:pointer;border:none;
}
.btn-primary{background:var(--cta);color:#fff}
.btn-primary:hover{background:var(--navy)}
.btn-outline{background:transparent;color:var(--navy);border:1px solid var(--border)}
.btn-outline:hover{background:#fff;border-color:var(--navy);color:var(--navy);box-shadow:0 8px 24px rgba(11,44,74,.14)}

/* ---- Cinematic Hero (index only) ---- */
.hero{height:100vh;min-height:560px;position:relative;padding:0;overflow:hidden;background:#050a10}
.hero-image{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:1;
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,rgba(5,10,16,.35) 0%,rgba(5,10,16,.5) 50%,rgba(5,10,16,.35) 100%);
}
.hero-content{
  position:relative;z-index:3;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:0;padding:0 24px;
}
.hero-content .eyebrow{
  color:#fff;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  background:rgba(10,16,24,.7);padding:4px 14px;display:inline-block;backdrop-filter:blur(4px);margin-bottom:6px;
}
.hero-content h1{
  color:#fff;font-size:clamp(36px,6.5vw,84px);font-weight:600;line-height:1.05;max-width:16ch;
  text-shadow:0 4px 30px rgba(0,0,0,.9),0 2px 10px rgba(0,0,0,.7),0 0 60px rgba(0,0,0,.5);
  margin-bottom:6px;
}
.hero-content .subtitle{
  color:#fff;font-size:16px;font-weight:400;max-width:44ch;
  background:rgba(10,16,24,.7);padding:4px 14px;display:inline-block;backdrop-filter:blur(4px);
}
@media(max-width:760px){
  .hero-image{object-position:28% center}
  .hero-content{justify-content:flex-end;padding-bottom:12vh}
  .hero::after{background:linear-gradient(180deg,rgba(5,10,16,.45) 0%,rgba(5,10,16,.15) 35%,rgba(5,10,16,.85) 100%)}
}

/* ---- Static subpage hero ---- */
.page-head{
  background:var(--navy);color:#fff;padding:160px 0 80px;position:relative;overflow:hidden;
}
.page-head::after{
  content:'';position:absolute;right:-10%;top:0;bottom:0;width:60%;
  background:linear-gradient(120deg,transparent,var(--ice-8));pointer-events:none;
}
.page-head .eyebrow{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ice);margin-bottom:14px}
.page-head h1{color:#fff;font-size:clamp(32px,5vw,56px);font-weight:600;max-width:20ch;margin-bottom:16px}
.page-head p{color:rgba(255,255,255,.78);font-size:17px;max-width:56ch}

/* ---- Content sections ---- */
section{padding:100px 0}
.section-label{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--midblue);margin-bottom:16px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.split img{border-radius:12px;object-fit:cover;width:100%;height:100%}
.split.reverse{direction:rtl}
.split.reverse>*{direction:ltr}
.prose p{color:var(--muted);font-size:17px;margin-bottom:18px;max-width:56ch}
.prose strong{color:var(--navy);font-weight:600}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:32px}.split.reverse{direction:ltr}}

.quote{
  background:var(--navy);color:#fff;padding:100px 0;text-align:center;
}
.quote blockquote{font-family:'Outfit',sans-serif;font-size:clamp(24px,3.2vw,42px);font-weight:500;max-width:18ch;margin:0 auto;line-height:1.3}
.quote cite{display:block;margin-top:24px;font-size:14px;color:var(--ice);font-style:normal;letter-spacing:.04em}

/* ---- Kinetic Marquee (adapted) ---- */
.marquee-band{background:var(--navy);padding:22px 0;overflow:hidden}
.marquee-row{display:flex;white-space:nowrap;will-change:transform}
.marquee-item{display:inline-flex;align-items:center;font-family:'Outfit',sans-serif;font-size:clamp(18px,2.6vw,30px);font-weight:600;color:#fff;padding:0 28px;flex-shrink:0}
.marquee-item .sep{display:inline-block;width:6px;height:6px;background:var(--ice);border-radius:1px;transform:rotate(45deg);margin:0 22px}

/* ---- Odometer stats ---- */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;background:var(--border);border-radius:16px;overflow:hidden}
.stat-item{background:var(--card);padding:44px 24px;text-align:center}
.odometer{font-family:'JetBrains Mono',monospace;font-size:clamp(34px,5vw,52px);font-weight:700;color:var(--navy);letter-spacing:-.02em;overflow:hidden;height:1.15em;display:flex;justify-content:center}
.odo-digit{display:inline-block;overflow:hidden;height:1.15em;position:relative}
.odo-strip{display:flex;flex-direction:column;transition:transform 1.5s var(--ease)}
.odo-strip span{display:block;height:1.15em;line-height:1.15}
.stat-suffix{font-family:'JetBrains Mono',monospace;font-size:clamp(24px,3.5vw,36px);font-weight:700;color:var(--navy)}
.stat-label{font-size:13px;color:var(--muted);margin-top:10px;letter-spacing:.02em}

/* ---- Spotlight cards (roles hub) ---- */
.spot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;background:var(--border);border-radius:16px;overflow:hidden}
.spot-card{
  background:var(--bg);padding:40px 32px;position:relative;overflow:hidden;
  transition:transform .5s var(--ease);will-change:transform;
}
.spot-card::before{content:'';position:absolute;inset:0;background:radial-gradient(circle 220px at var(--mx,50%) var(--my,50%),var(--ice-8),transparent);opacity:0;transition:opacity .3s;pointer-events:none}
.spot-card:hover::before{opacity:1}
.spot-card .num{font-family:'JetBrains Mono',monospace;font-size:28px;font-weight:700;color:var(--border);margin-bottom:18px}
.spot-card h3{font-size:19px;font-weight:600;margin-bottom:10px}
.spot-card p{font-size:14px;color:var(--muted);line-height:1.55;margin-bottom:18px}
.spot-card .more{font-size:13px;font-weight:600;color:var(--midblue);display:inline-flex;align-items:center;gap:6px}
.spot-card .more svg{transition:transform .3s var(--ease)}
.spot-card:hover .more svg{transform:translateX(4px)}

/* ---- Racing years marquee ---- */
.years-band{background:var(--card);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:26px 0;overflow:hidden}
.years-row{display:flex;white-space:nowrap}
.year-item{font-family:'JetBrains Mono',monospace;font-size:16px;font-weight:600;color:var(--midblue);padding:0 22px;border-right:1px solid var(--border);flex-shrink:0}

/* ---- Gallery ---- */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.gallery img{aspect-ratio:4/5;border-radius:10px;object-fit:cover;width:100%}
@media(max-width:700px){.gallery{grid-template-columns:1fr 1fr}}

/* ---- Contact ---- */
.contact{background:var(--card);text-align:center;padding:60px 0}
.contact h2{font-size:clamp(22px,2.8vw,30px);margin-bottom:8px}
.contact p{color:var(--muted);font-size:15px;margin-bottom:18px}
.contact .email{font-family:'JetBrains Mono',monospace;font-size:16px;color:var(--navy);font-weight:600}

/* ---- Footer ---- */
footer{background:#fff;border-top:1px solid var(--border);padding:40px 0}
.footer-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
.footer-links{display:flex;gap:24px;flex-wrap:wrap}
.footer-links a{font-size:13px;color:var(--muted)}
.footer-links a:hover{color:var(--midblue)}
.footer-copy{font-size:13px;color:var(--muted)}
.footer-social{display:flex;gap:14px}
.footer-social a{color:var(--muted);transition:color .3s}
.footer-social a:hover{color:var(--midblue)}

/* ---- Legal pages ---- */
.legal .prose{max-width:760px;margin:0 auto}
.legal h2{font-size:20px;margin:36px 0 12px}
.legal p{color:var(--muted);font-size:15px;margin-bottom:14px;max-width:none}

/* ---- Scroll fade-up utility ---- */
.fade-up{opacity:0;transform:translateY(40px)}

/* Font contrast/label rule */
.eyebrow, .section-label{font-weight:600}

/* ---- Startseite: Scrollbar ausblenden (Scrollen bleibt aktiv) ---- */
html:has(body.home){scrollbar-width:none;-ms-overflow-style:none}
html:has(body.home)::-webkit-scrollbar,body.home::-webkit-scrollbar{width:0;height:0;display:none}
body.home{scrollbar-width:none;-ms-overflow-style:none}

/* ---- Über mich: kompakterer Header ---- */
.page-head.compact{padding:120px 0 56px}
.page-head.compact h1{font-size:clamp(28px,3.8vw,42px);margin-bottom:12px}
.page-head.compact .eyebrow{margin-bottom:10px}
.page-head.compact p{font-size:16px}