/* ============================================================
   GIBSON tyretech – Rebuild (Frontpage DE)
   ============================================================ */

/* ---------- Marken-Schriften (lokal) ---------- */
@font-face{
  font-family:'Veneer';
  src:url('../assets/fonts/veneer-clean-regular-italic.woff2') format('woff2');
  font-style:italic;font-weight:400;font-display:swap;
}
@font-face{
  font-family:'Veneer';
  src:url('../assets/fonts/veneer-clean-regular.woff2') format('woff2');
  font-style:normal;font-weight:400;font-display:swap;
}
@font-face{
  font-family:'Korb';
  src:url('../assets/fonts/korb-bold.woff2') format('woff2');
  font-style:normal;font-weight:700;font-display:swap;
}
@font-face{
  font-family:'Korb';
  src:url('../assets/fonts/korb-bold-italic.woff2') format('woff2');
  font-style:italic;font-weight:700;font-display:swap;
}

*{font-synthesis-weight:none;}
:root{
  --yellow:#FECB00;
  --yellow-bright:#FED317;
  --black:#000;
  --dark:#1a1a1a;
  --panel:#0d0d0d;
  --footer:#262626;
  --text:#e9e9e9;
  --text-muted:#9a9a9a;
  --white:#fff;
  --maxw:1310px;
  --grunge:url('../assets/img/cross_title_3.jpg');
  --font-display:'Veneer','Arial Narrow','Helvetica Neue',Helvetica,Arial,sans-serif;
  --font-body:'Helvetica Neue',Helvetica,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:110px;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--text);
  background:var(--black);
  line-height:1.7;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--yellow);text-decoration:none;}

/* ---------- Header ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:var(--black);
  height:96px;
  display:flex;align-items:center;
  transition:background .3s;
}
.site-header__inner{
  width:100%;max-width:var(--maxw);margin:0 auto;
  padding:0 28px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.site-header__logo img{height:52px;width:auto;}
.header-right{display:flex;align-items:center;gap:26px;}
.social{display:flex;align-items:center;gap:16px;}
.social a{color:#cfcfcf;display:inline-flex;transition:color .2s;}
.social a:hover{color:var(--yellow);}
.social svg{width:19px;height:19px;fill:currentColor;}

/* Sprachwahl: Flaggen – monochrom, Originalfarben bei Hover */
.lang-switch{display:inline-flex;align-items:center;gap:10px;margin-right:6px;}
.lang-switch a{display:inline-flex;line-height:0;filter:grayscale(1) brightness(1.25);opacity:.55;transition:filter .2s,opacity .2s;border-radius:2px;box-shadow:0 0 0 1px rgba(255,255,255,.28);overflow:hidden;}
.lang-switch a:hover,.lang-switch a:focus-visible{filter:none;opacity:1;}
.lang-switch a.is-active{opacity:.95;}
.lang-switch svg{width:21px;height:14px;display:block;}


/* burger */
.nav-toggle{
  background:none;border:0;cursor:pointer;padding:6px;
  display:flex;flex-direction:column;gap:6px;width:38px;
}
.nav-toggle span{display:block;height:2px;width:32px;background:var(--white);transition:.3s;}
.nav-toggle.is-open span:nth-child(1){transform:translateY(8px) rotate(45deg);}
.nav-toggle.is-open span:nth-child(2){opacity:0;}
.nav-toggle.is-open span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

/* slide-in nav */
.main-nav{
  position:fixed;top:0;right:0;height:100vh;width:min(420px,86vw);
  background:rgba(10,10,10,.98);
  padding:120px 48px 48px;
  transform:translateX(100%);transition:transform .35s ease;
  z-index:99;overflow-y:auto;
}
.main-nav.is-open{transform:translateX(0);}
.main-nav ul{list-style:none;margin:0;padding:0;}
.main-nav li{border-bottom:1px solid rgba(255,255,255,.08);}
.main-nav a{
  display:block;padding:15px 0;
  font-family:var(--font-display);font-style:italic;font-weight:400;
  text-transform:uppercase;letter-spacing:.5px;font-size:24px;
  color:var(--white);transition:color .2s,padding-left .2s;
}
.main-nav a:hover{color:var(--yellow);padding-left:8px;}
.nav-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.55);
  opacity:0;visibility:hidden;transition:.3s;z-index:98;
}
.nav-backdrop.is-open{opacity:1;visibility:visible;}

/* ---------- Hero ---------- */
.hero{
  position:relative;margin-top:96px;
  padding:50px 20px 56px;
  background:#000 var(--grunge) fixed center center / cover no-repeat;
  overflow:hidden;
}
/* Der Export hat feste 1280×700 px. Der Wrapper gibt die Breite vor,
   js/main.js skaliert das Iframe passend – so wird nichts abgeschnitten. */
.hero__banner{
  position:relative;width:100%;max-width:1180px;margin:0 auto;
  aspect-ratio:1280/700;overflow:hidden;background:#000;
}
.hero__banner iframe{
  position:absolute;top:0;left:0;
  width:1280px;height:700px;border:0;
  transform-origin:top left;
}
.hero__banner img{
  position:absolute;top:0;left:0;
  width:100%;height:100%;object-fit:cover;object-position:center;
}

/* ---------- Hero-Teaser (1:1 nach Original) – schwarz, kein Hintergrundbild ---------- */
.teasers{background:#000;padding:60px 20px 90px;}
.teasers__row{
  max-width:var(--maxw);margin:0 auto;
  display:flex;justify-content:center;align-items:flex-start;
}
.teaser{
  flex:0 0 393px;max-width:393px;min-height:416px;box-sizing:border-box;
  padding:59px;margin-top:127px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
}
.teaser--yellow{background:var(--yellow-bright);}
.teaser--dark{background:#1c1c1c;}
.teaser--raised{
  flex:0 0 433px;max-width:433px;min-height:458px;padding:59px;
  margin:0 -20px;position:relative;z-index:2;
}
.teaser__title{
  font-family:var(--font-display);font-weight:400;font-style:italic;
  text-transform:none;letter-spacing:normal;
  font-size:30px;line-height:33px;margin:0 0 24px;
}
.teaser--yellow .teaser__title{color:#000;}
.teaser--dark .teaser__title{color:#999;}
.teaser__text{font-size:20px;line-height:33px;color:#737373;margin:0 0 34px;}

/* ---------- Sections ---------- */
.sec{background:var(--black);}

/* Titelband: schmales Band mit Grunge-Parallax, Titel im dunklen Balken */
.sec__head{
  position:relative;
  min-height:128px;
  display:flex;align-items:center;justify-content:center;
  padding:20px 20px;
  background:#000 var(--grunge) fixed center center / cover no-repeat;
}
.sec__title{
  position:relative;z-index:1;
  width:100%;max-width:1180px;
  box-sizing:border-box;
  background:rgba(0,0,0,.8);
  margin:0;padding:0 24px;
  font-family:var(--font-display);font-style:italic;font-weight:400;
  text-transform:uppercase;letter-spacing:2px;
  color:var(--yellow-bright);
  font-size:clamp(34px,8.4vw,80px);line-height:1.1;
  text-align:center;
}
.sec__body{
  max-width:var(--maxw);margin:0 auto;
  padding:56px 28px 90px;
}

/* two-column grid */
.grid{
  display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;
}
.grid__media img{width:100%;box-shadow:0 18px 40px rgba(0,0,0,.5);}
.grid__text p{
  margin:17px 0;
  font-size:20px;line-height:33px;color:#d6d6d6;
}
.grid__text p:first-child{margin-top:0;}
.grid__text p:last-child{margin-bottom:0;}
.grid__text strong{color:var(--white);font-weight:700;}
.grid--img-right .grid__text{order:1;}
.grid--img-right .grid__media{order:2;}

/* Kicker: rotierende Hashtags (wie Enfold-Rotator, 3s, letzter Begriff gelb) */
.kicker{
  display:grid;width:100%;
  font-family:var(--font-display);font-style:italic;font-weight:400;
  text-transform:none;letter-spacing:2px;text-align:center;
  font-size:clamp(22px,3vw,60px);line-height:1.1;
  margin:0 0 24px;
}
.kicker__word{
  grid-area:1/1;justify-self:center;white-space:nowrap;
  color:var(--white);
  opacity:0;visibility:hidden;
  transition:opacity .4s cubic-bezier(.55,.085,.68,.53), visibility .4s;
}
.kicker__word.is-active{opacity:1;visibility:visible;}
.kicker__word--accent{color:var(--yellow-bright);}
@media (prefers-reduced-motion:reduce){
  .kicker__word{transition:none;}
}

/* ---------- Buttons (1:1 nach Original) ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-body);font-weight:400;font-size:20px;line-height:1;
  letter-spacing:normal;text-decoration:none;cursor:pointer;border:0;
  transition:background .2s,color .2s,transform .1s;
}
.btn__arrow{font-size:18px;line-height:1;}
.btn--sm{font-size:16px;}
/* Sektions-CTA: gelb, schwarzer Text, Radius 5px */
.btn--solid{background:var(--yellow);color:#000;border-radius:5px;padding:12px 16px 10px;}
.btn--solid:hover{background:#ffd633;}
/* Teaser dunkel */
.btn--dark{background:#2c2c2c;color:#fed217;border-radius:4px;padding:15px 30px 13px;}
.btn--dark:hover{background:#000;}
/* Teaser grau */
.btn--grey{background:#555;color:#d6d6d6;border-radius:4px;padding:15px 30px 13px;}
.btn--grey:hover{background:#666;color:#fff;}
.btn:active{transform:translateY(1px);}

/* ---------- Unterseiten ---------- */
.subpage{padding-top:96px;}              /* Platz für den fixierten Header */
.grunge-strip{
  height:42px;
  background:#000 var(--grunge) fixed center center / cover no-repeat;
}
.page-intro{max-width:900px;margin:0 auto 48px;text-align:center;}
.page-intro p{font-size:20px;line-height:33px;color:#d6d6d6;margin:17px 0;}
.page-figure{margin:0 0 56px;}
.page-figure img{width:100%;aspect-ratio:1185/960;object-fit:cover;}

/* Produkt-Kategorien + Kacheln (1:1 nach Original) */
.cat{margin:0 0 56px;scroll-margin-top:116px;}
.cat__title{
  font-family:var(--font-display);font-style:italic;font-weight:400;
  letter-spacing:2px;color:var(--yellow-bright);text-align:left;
  font-size:clamp(28px,2.6vw,40px);line-height:1.1;margin:0 0 26px;
}
.prod-grid{
  display:grid;gap:30px;
  grid-template-columns:repeat(auto-fill,minmax(164px,1fr));
}
.prod-tile{display:block;background:#111;overflow:hidden;}
.prod-tile img{width:100%;aspect-ratio:1/1;object-fit:cover;transition:transform .3s,opacity .3s;}
.prod-tile:hover img{transform:scale(1.05);opacity:.85;}
.prod-tile__name{
  display:block;padding:10px 8px;text-align:center;
  font-size:14px;letter-spacing:.5px;color:#d6d6d6;
}
.prod-tile:hover .prod-tile__name{color:var(--yellow-bright);}

/* Produktdetail: zwei gleich breite Spalten, Bild quadratisch rechts */
.prod-cols{display:grid;grid-template-columns:1fr 1fr;gap:63px;align-items:start;}
.prod-media img{width:100%;aspect-ratio:1/1;object-fit:cover;}
.prod-title{
  font-family:var(--font-display);font-style:italic;font-weight:400;
  letter-spacing:2px;color:var(--yellow-bright);text-align:left;
  font-size:clamp(28px,2.6vw,40px);line-height:1.1;margin:0 0 6px;
}
.prod-lead{
  font-family:var(--font-body);font-weight:400;font-style:normal;
  color:var(--yellow-bright);font-size:20px;line-height:26px;
  margin:0 0 26px;
}
.prod-cols p{font-size:20px;line-height:33px;color:#d6d6d6;margin:0 0 17px;}
.prod-list{margin:0 0 24px;padding-left:20px;list-style:disc;}
.prod-list li{font-size:20px;line-height:33px;color:#d6d6d6;}

/* Teams */
.team{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin:0 0 80px;}
.team:nth-child(even) .team__media{order:2;}
.team__logo{max-width:260px;margin:0 0 20px;}
.team__title{font-family:var(--font-display);font-style:italic;text-transform:uppercase;
  letter-spacing:1px;color:var(--yellow-bright);font-size:clamp(20px,2vw,28px);line-height:1.15;margin:0 0 16px;}
.team__quote{font-size:20px;line-height:33px;color:var(--white);font-style:italic;margin:0 0 17px;}
.team p{font-size:20px;line-height:33px;color:#d6d6d6;margin:17px 0;}

/* Downloads */
.dl-group{margin:0 0 64px;}
.dl-group__title{font-family:var(--font-display);font-style:italic;text-transform:uppercase;
  letter-spacing:2px;color:var(--yellow-bright);font-size:clamp(24px,2.6vw,36px);margin:0 0 24px;}
.dl-cards{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
.dl-card{background:#1c1c1c;padding:20px;text-align:center;display:flex;flex-direction:column;}
.dl-card img{width:100%;height:220px;object-fit:contain;margin:0 0 16px;}
.dl-card img.dl-card__pdf{padding:10px 0;box-sizing:border-box;}
.dl-card__meta{color:#737373;font-size:15px;margin:0 0 16px;line-height:1.4;flex:1;}
.dl-card .btn{align-self:center;}

/* Rechtstexte */
.legal{max-width:900px;margin:0 auto;}
.legal p{font-size:18px;line-height:30px;color:#d6d6d6;margin:0 0 18px;}
.legal h3{font-family:var(--font-display);font-style:italic;text-transform:uppercase;
  letter-spacing:1px;color:var(--yellow-bright);font-size:24px;margin:36px 0 14px;}
.legal a{color:var(--yellow);text-decoration:underline;}
.legal em{color:#b8b8b8;}

@media (max-width:860px){
  .team{grid-template-columns:1fr;gap:26px;margin-bottom:56px;}
  .team:nth-child(even) .team__media{order:0;}
  .prod-cols{grid-template-columns:1fr;gap:30px;}
  .prod-media{order:-1;}
  .grunge-strip{background-attachment:scroll;}
}
@media (max-width:520px){
  .subpage{padding-top:78px;}
}

/* ---------- Contact ---------- */
.sec--contact .sec__body{max-width:820px;text-align:center;}
.contact__sub{
  font-family:var(--font-display);font-style:italic;font-weight:400;
  text-transform:uppercase;color:#d6d6d6;
  font-size:clamp(24px,3vw,34px);line-height:1.15;margin:0 0 34px;
}
.contact-form{display:flex;flex-direction:column;gap:16px;text-align:left;}
.contact-form input,
.contact-form textarea{
  width:100%;border:0;background:#f4f4f4;color:#222;
  font-family:var(--font-body);font-size:16px;
  padding:15px 16px;border-radius:2px;
}
.contact-form textarea{resize:vertical;min-height:150px;}
.contact-form input::placeholder,
.contact-form textarea::placeholder{color:#8a8a8a;}
.captcha{display:block;}
.captcha__q{display:block;font-size:14px;color:var(--text-muted);margin:0 0 6px;}
.btn--submit{align-self:flex-start;border:0;color:var(--black);}
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}
.form-status{margin:4px 0 0;font-size:15px;min-height:1.2em;}
.form-status.ok{color:var(--yellow);}
.form-status.err{color:#ff6b6b;}

/* ---------- Footer ---------- */
.site-footer{
  background:var(--footer);
  border-top:6px solid var(--black);
  padding:56px 0 40px;
}
.site-footer__inner{
  max-width:var(--maxw);margin:0 auto;padding:0 28px;
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:32px;
  color:var(--text-muted);font-size:15px;
}
.site-footer a{color:#d0d0d0;text-decoration:underline;}
.site-footer a:hover{color:var(--yellow);}
.footer-links{display:flex;flex-direction:column;gap:14px;}
.footer-address strong{color:#e9e9e9;display:block;margin-bottom:6px;}
.footer-address span{display:block;}

/* back-to-top */
.to-top{
  position:fixed;right:20px;bottom:20px;z-index:90;
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  background:rgba(38,38,38,.9);color:var(--white);font-size:20px;
  border:1px solid rgba(255,255,255,.15);
  opacity:0;visibility:hidden;transition:.3s;
}
.to-top.is-visible{opacity:1;visibility:visible;}
.to-top:hover{background:var(--yellow);color:var(--black);}

/* ---------- Reveal animation ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease;}
.reveal.is-in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  html{scroll-behavior:auto;}
}

/* ---------- Responsive ---------- */
@media (max-width:860px){
  .grid{grid-template-columns:1fr;gap:30px;}
  .grid--img-right .grid__text{order:2;}
  .grid--img-right .grid__media{order:1;}
  .hero{padding:24px 12px 30px;background-attachment:scroll;}
  .sec__head{background-attachment:scroll;}
  .teasers__row{flex-direction:column;align-items:center;gap:20px;}
  .teaser,.teaser--raised{max-width:460px;width:100%;min-height:0;margin:0;padding:42px 32px;}
  .sec__body{padding-bottom:64px;}
  .site-footer__inner{grid-template-columns:1fr;gap:26px;}
}
@media (max-width:520px){
  .site-header{height:78px;}
  .site-header__logo img{height:42px;}
  .hero{margin-top:78px;}
  body{font-size:16px;}
}

/* Nur für Screenreader/Suchmaschinen sichtbar (h1 der Startseite) */
.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;}
h1.sec__title{margin:0;}