:root{
  --blue:#0b57d0;
  --blue-dark:#0846aa;
  --black:#08090b;
  --text:#15171b;
  --muted:#5e6269;
  --paper:#f6f3ee;
  --white:#fff;
  --line:#ddd8d0;
  --soft:#ece8e0;
  --shadow:0 12px 32px rgba(0,0,0,.07);
  --max:1480px;
  --pad:44px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--text);
  font-family:Arial,Helvetica,sans-serif;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
.container{width:min(100%,var(--max));margin-inline:auto}

/* Header */
.header{position:sticky;top:0;z-index:100;background:var(--black);color:#fff}
.header-inner{
  min-height:78px;padding:0 var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:28px;
}
.brand{display:flex;align-items:center;gap:22px;min-width:0}
.brand img{width:248px;height:52px;object-fit:contain;object-position:left center}
.years{color:#b9b9bb;font-size:18px;white-space:nowrap}
.nav{display:flex;align-items:center;gap:24px;white-space:nowrap;font-weight:700}
.nav a{color:#f3f3f3;text-decoration:none;padding:27px 0 22px;border-bottom:3px solid transparent}
.nav a:hover,.nav a:focus,.nav a[aria-current="page"]{color:var(--blue);border-bottom-color:var(--blue)}

/* Buttons */
.button{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:46px;padding:13px 20px;background:var(--blue);
  color:#fff!important;border-radius:3px;border:0;font-size:16px!important;
  font-weight:800!important;line-height:1!important;text-decoration:none!important;
  visibility:visible!important;opacity:1!important;text-indent:0!important;
  box-shadow:0 8px 20px rgba(11,87,208,.18);
}
.button:visited{color:#fff!important}
.button:hover,.button:focus{background:var(--blue-dark);color:#fff!important}
.button-dark{background:#17191c}.button-dark:hover{background:#000}

/* Home */
.home-hero{background:#fff;border-bottom:1px solid var(--line)}
.home-grid{display:grid;grid-template-columns:36% 64%;min-height:520px}
.home-copy{
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  padding:66px 36px 66px var(--pad)
}
.home-logo{width:440px;max-width:100%;height:auto}
.home-years{margin-top:22px;color:var(--blue);font-size:30px;font-weight:800}
.rule{width:60px;height:3px;margin:18px 0 24px;background:var(--blue)}
.home-lead{max-width:420px;margin:0 0 30px;font-size:23px;line-height:1.45;font-weight:700}
.home-media{min-height:520px;overflow:hidden;background:#f1f1f1}
.home-media img{width:100%;height:100%;object-fit:cover;object-position:center}
.statement{background:var(--paper);border-bottom:1px solid var(--line)}
.statement-inner{padding:36px var(--pad) 38px}
.statement p{max-width:1080px;margin:0;font-size:clamp(21px,2vw,30px);line-height:1.45;color:#26292e}
.statement strong{color:var(--blue)}

/* Cards */
.cards-wrap{padding:44px var(--pad) 56px}
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px}
.card{display:flex;flex-direction:column;min-width:0;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}
.card-media{height:230px;overflow:hidden;display:grid;place-items:center;background:#faf8f4;border-bottom:1px solid var(--line)}
.card-media img{width:100%;height:100%;object-fit:cover}
.card-media.contain img{object-fit:contain;padding:12px}
.card-body{display:flex;flex-direction:column;flex:1;padding:22px}
.card h2{margin:0 0 10px;font-size:19px;line-height:1.15;text-transform:uppercase}
.card p{margin:0 0 20px;min-height:50px;color:#373a40}
.card-actions{margin-top:auto}

/* Page hero */
.page-hero{background:#fff;border-bottom:1px solid var(--line)}
.page-grid{display:grid;grid-template-columns:40% 60%;min-height:420px}
.page-copy{display:flex;flex-direction:column;justify-content:center;padding:66px 40px 66px var(--pad)}
.eyebrow{color:var(--blue);font-size:14px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.page-copy h1{margin:10px 0 16px;font-size:clamp(52px,5.2vw,76px);line-height:.96;letter-spacing:-.04em}
.page-lead{max-width:580px;margin:0;font-size:22px;font-weight:700}
.page-image{min-height:420px;overflow:hidden;background:#eee}
.page-image img{width:100%;height:100%;object-fit:cover;object-position:center}
.logo-panel{min-height:420px;display:flex;align-items:center;justify-content:center;padding:64px;background:#fff;overflow:hidden}
.logo-panel img{width:360px!important;max-width:72%!important;height:auto!important;max-height:120px!important;object-fit:contain!important}

/* Facts and text */
.facts{background:var(--black);color:#fff}
.facts-grid{display:grid;grid-template-columns:repeat(3,1fr);padding:24px var(--pad)}
.fact{padding:10px 26px;border-right:1px solid rgba(255,255,255,.18)}
.fact:first-child{padding-left:0}.fact:last-child{border-right:0}
.fact strong{display:block;color:var(--blue);font-size:32px;line-height:1.1}
.fact span{display:block;margin-top:5px;color:#d6d6d8}
.content{padding:68px var(--pad) 82px}
.story{max-width:920px;margin:0 auto}
.story-section{position:relative;padding:0 0 52px 46px;border-left:2px solid var(--line)}
.story-section:last-child{padding-bottom:0}
.story-section:before{
  content:"";position:absolute;left:-8px;top:5px;width:14px;height:14px;
  border-radius:50%;background:var(--blue);box-shadow:0 0 0 5px var(--paper)
}
.story-section h2{margin:0 0 14px;font-size:35px;line-height:1.15}
.story-section p{margin:0 0 18px;font-size:17px}
.quote{margin:28px 0 0;padding:22px 24px;border-left:5px solid var(--blue);background:var(--soft);font-size:17px;font-weight:700}
.photo{margin:34px 0 0}
.photo-frame{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}
.photo-frame img{width:100%}
.caption{padding:14px 16px 16px;font-size:15px;color:#45484d}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.closing{margin-top:70px;padding:40px;background:#fff;border:1px solid var(--line)}

/* Personal story */
.story-intro{max-width:980px;margin:0 auto;padding:70px var(--pad) 20px}
.story-intro p{margin:0 0 20px;font-size:18px}
.story-gallery{max-width:1180px;margin:0 auto;padding:20px var(--pad) 80px;display:grid;gap:34px}
.story-image{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}
.story-image img{width:100%;height:auto}
.story-image figcaption{padding:18px 20px 20px;font-size:15px;color:#42464c}
.copyright-note{margin-top:10px;padding:14px 16px;background:#f0f4ff;border-left:4px solid var(--blue);color:#25282d;font-weight:700}

/* Contact */
.notice-wrap{padding:34px var(--pad) 0}
.notice{max-width:var(--max);margin:0 auto;padding:24px 26px;border-left:6px solid var(--blue);background:#eaf1ff;box-shadow:0 8px 22px rgba(11,87,208,.08)}
.notice strong{display:block;margin-bottom:6px;color:var(--blue-dark);font-size:17px}
.contact-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-bottom:62px}
.contact-card,.panel{padding:30px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}
.contact-card h2,.panel h2{margin:0 0 14px}
.contact-card a,.panel a{color:var(--blue);font-weight:700}
.contact-card .button,.panel .button{color:#fff!important}
.legal{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.panel-wide{grid-column:1/-1}
.data-list{display:grid;grid-template-columns:180px 1fr;gap:8px 18px}
.data-list dt{font-weight:700}.data-list dd{margin:0}
.invite{margin-top:34px;padding:32px;background:var(--soft);border-left:5px solid var(--blue)}

/* Topic pages */
.topic-grid{max-width:1180px;margin:0 auto;padding:64px var(--pad) 84px;display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:start}
.topic-copy,.topic-image{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}
.topic-copy{padding:34px}.topic-copy h2{margin-top:0;font-size:32px}
.topic-image img{width:100%}.topic-image figcaption{padding:14px 16px;color:#4c5057;font-size:15px}
.placeholder{max-width:980px;margin:0 auto;padding:72px var(--pad) 84px}
.placeholder-card{padding:38px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}
.placeholder-card h2{margin-top:0;font-size:32px}.placeholder-card p{font-size:17px}

/* Rights notice on every page */
.rights-band{background:#101215;color:#c9cbd0;border-top:1px solid #282b30}
.rights-inner{padding:22px var(--pad);font-size:14px;line-height:1.55}
.rights-inner strong{color:#fff}
.footer{padding:18px 28px;background:var(--black);color:#92959b;text-align:center;font-size:14px}

/* Responsive */
@media(max-width:1250px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:1050px){
  :root{--pad:32px}
  .header-inner{flex-direction:column;align-items:flex-start;padding-top:14px;padding-bottom:14px}
  .nav{width:100%;overflow-x:auto}.nav a{padding:10px 0 7px}
  .home-grid,.page-grid{grid-template-columns:1fr}
  .home-copy,.page-copy{padding:54px var(--pad)}
  .home-media,.page-image,.logo-panel{min-height:350px}
  .legal,.topic-grid{grid-template-columns:1fr}.panel-wide{grid-column:auto}
}
@media(max-width:720px){
  :root{--pad:20px}
  .brand img{width:186px;height:42px}.brand{gap:13px}.years{font-size:16px}
  .cards{grid-template-columns:1fr}.card-media{height:260px}
  .facts-grid{grid-template-columns:1fr}
  .fact{padding:15px 0;border-right:0;border-bottom:1px solid rgba(255,255,255,.18)}
  .fact:last-child{border-bottom:0}
  .story-section{padding-left:28px}
  .contact-grid{grid-template-columns:1fr}
  .data-list{grid-template-columns:1fr}.data-list dd{margin-bottom:10px}
  .logo-panel img{width:280px!important;max-height:96px!important}
}


/* =========================================================
   Reifenbert 4.1 – verbindliche Smartphone-Optimierung
   ========================================================= */
html,body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}
body{
  -webkit-text-size-adjust:100%;
}
img,video,iframe{
  max-width:100%;
  height:auto;
}
.container,
.header-inner,
.home-grid,
.page-grid,
.cards,
.facts-grid,
.story,
.topic-grid,
.contact-grid,
.legal,
.timeline-list,
.motorsport-grid,
.archive-grid,
.rb4-ad-grid{
  min-width:0;
}
figure{
  max-width:100%;
}
figcaption{
  overflow-wrap:anywhere;
}

@media(max-width:900px){
  :root{--pad:22px}

  /* Kopfbereich */
  .header{
    position:static;
  }
  .header-inner{
    display:block;
    min-height:0;
    padding:14px var(--pad) 10px;
  }
  .brand{
    display:flex;
    justify-content:space-between;
    gap:12px;
    width:100%;
  }
  .brand img{
    width:190px;
    height:44px;
    flex:0 1 auto;
  }
  .years{
    font-size:15px;
  }
  .nav{
    display:flex;
    gap:18px;
    width:100%;
    margin-top:10px;
    overflow-x:auto;
    overflow-y:hidden;
    padding-bottom:5px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
  }
  .nav a{
    flex:0 0 auto;
    padding:8px 0 6px;
    font-size:15px;
  }

  /* Startseite und Unterseiten */
  .home-grid,
  .page-grid,
  .rb4-ad-hero-grid{
    display:block!important;
    min-height:0!important;
  }
  .home-copy,
  .page-copy,
  .rb4-ad-copy{
    width:100%;
    padding:40px var(--pad) 30px!important;
  }
  .home-copy{
    align-items:flex-start;
  }
  .home-logo{
    width:min(100%,360px);
  }
  .home-years{
    font-size:25px;
  }
  .home-lead,
  .page-lead{
    font-size:20px;
  }
  .page-copy h1,
  .rb4-ad-copy h1{
    font-size:clamp(44px,13vw,60px)!important;
    word-break:normal;
  }

  .home-media,
  .page-image,
  .logo-panel,
  .rb4-ad-image{
    width:100%;
    min-height:0!important;
    height:auto!important;
    overflow:visible!important;
  }
  .home-media img,
  .page-image img,
  .rb4-ad-image img{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    object-fit:contain!important;
  }
  .logo-panel{
    padding:28px 20px!important;
  }
  .logo-panel img{
    width:min(100%,310px)!important;
    max-width:100%!important;
    max-height:none!important;
  }

  /* Karten */
  .cards{
    grid-template-columns:1fr!important;
    gap:20px;
  }
  .cards-wrap{
    padding:30px var(--pad) 42px;
  }
  .card-media{
    height:auto!important;
    min-height:0!important;
  }
  .card-media img,
  .card-media.contain img{
    width:100%;
    height:auto!important;
    object-fit:contain!important;
    padding:0;
  }
  .card p{
    min-height:0;
  }

  /* Inhalte, Galerien und Zeitleisten */
  .content{
    padding:44px var(--pad) 58px;
  }
  .story-section{
    padding-left:24px;
  }
  .story-section h2{
    font-size:29px;
  }
  .facts-grid,
  .contact-grid,
  .legal,
  .topic-grid,
  .timeline-list,
  .motorsport-grid,
  .archive-grid,
  .rb4-ad-grid{
    grid-template-columns:1fr!important;
  }
  .fact{
    border-right:0;
    border-bottom:1px solid rgba(255,255,255,.18);
    padding:14px 0;
  }
  .fact:last-child{
    border-bottom:0;
  }
  .topic-grid,
  .placeholder,
  .story-gallery,
  .motorsport-gallery,
  .motorsport-timeline,
  .archive-section,
  .rb4-ad-intro,
  .rb4-ad-section{
    width:100%;
    max-width:100%;
    padding-left:var(--pad)!important;
    padding-right:var(--pad)!important;
  }
  .topic-image,
  .story-image,
  .motorsport-photo,
  .archive-card,
  .rb4-ad-card{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    grid-column:auto!important;
    overflow:hidden!important;
  }
  .topic-image img,
  .story-image img,
  .motorsport-photo img,
  .archive-card img,
  .rb4-ad-card img{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    object-fit:contain!important;
  }
  .data-list{
    grid-template-columns:1fr!important;
  }
  .data-list dd{
    margin:0 0 12px;
  }

  /* Buttons */
  .button{
    max-width:100%;
    white-space:normal;
    text-align:center;
  }

  /* Fußbereich */
  .rights-inner,
  .footer{
    padding-left:var(--pad);
    padding-right:var(--pad);
  }
}

@media(max-width:480px){
  :root{--pad:16px}
  .brand img{
    width:165px;
    height:38px;
  }
  .years{
    font-size:14px;
  }
  .nav{
    gap:15px;
  }
  .nav a{
    font-size:14px;
  }
  .home-copy,
  .page-copy,
  .rb4-ad-copy{
    padding-top:34px!important;
  }
  .home-lead,
  .page-lead{
    font-size:18px;
  }
  .statement p{
    font-size:20px;
  }
}


/* =========================================================
   Reifenbert 5.0 – Blog, Mobilität und neue Archivbilder
   ========================================================= */
.rb50-section{
  width:min(100%,1180px);
  margin:0 auto;
  padding:58px var(--pad) 72px;
}
.rb50-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:24px;
}
.rb50-card{
  min-width:0;
  margin:0;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.rb50-card img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  object-fit:contain;
}
.rb50-card figcaption{
  padding:16px 18px 19px;
  color:#44484f;
  overflow-wrap:anywhere;
}
.rb50-card.wide{
  grid-column:1/-1;
}
.rb50-counter{
  margin:30px 0;
  padding:30px 24px;
  background:#0b57d0;
  color:#fff;
  border-radius:4px;
  text-align:center;
}
.rb50-counter strong{
  display:block;
  font-size:clamp(44px,8vw,82px);
  line-height:1;
  margin-bottom:10px;
}
.rb50-counter span{
  display:block;
  font-size:18px;
}
.rb50-note{
  margin:24px 0;
  padding:20px 22px;
  background:#f0f4ff;
  border-left:5px solid var(--blue);
}
.rb50-hero-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  padding:34px;
  background:#fff;
}
.rb50-hero-icon img{
  display:block;
  width:100%;
  max-width:680px;
  height:auto;
  object-fit:contain;
}
@media(max-width:900px){
  .rb50-grid{
    grid-template-columns:1fr;
  }
  .rb50-card.wide{
    grid-column:auto;
  }
  .rb50-section{
    padding-left:var(--pad);
    padding-right:var(--pad);
    overflow-x:hidden;
  }
  .rb50-hero-icon{
    padding:20px;
  }
}