/* ============================================================
   MAGNUS ZIEGLER MOTORSPORT
   Stylesheet für alle Seiten. Eine Datei, kein Framework, kein JS.
   ============================================================ */

/* ---- Schriften -------------------------------------------------
   Lokal einbinden (wichtig für deine Datenschutzerklärung:
   keine Google-Fonts-Verbindung). Lege die Dateien in /fonts/ ab.
   Empfehlung: Archivo (Überschriften/UI), Source Serif 4 (Lesetext),
   JetBrains Mono (Zahlen). Alle drei sind kostenlos und frei nutzbar.
   Solange die Dateien fehlen, greifen die Fallbacks – sieht schon gut aus.
------------------------------------------------------------------ */
/*
@font-face { font-family:"Archivo"; src:url("fonts/Archivo-Regular.woff2") format("woff2");
             font-weight:400; font-display:swap; }
@font-face { font-family:"Archivo"; src:url("fonts/Archivo-SemiBold.woff2") format("woff2");
             font-weight:600; font-display:swap; }
@font-face { font-family:"Source Serif 4"; src:url("fonts/SourceSerif4-Regular.woff2") format("woff2");
             font-weight:400; font-display:swap; }
@font-face { font-family:"JetBrains Mono"; src:url("fonts/JetBrainsMono-Regular.woff2") format("woff2");
             font-weight:400; font-display:swap; }
*/

:root{
  --paper:      #eeefeb;
  --paper-2:    #e4e6e0;
  --card:       #f7f7f5;
  --ink:        #17191a;
  --ink-soft:   #5b6062;
  --rule:       #cdd0ca;
  --blue:       #1d4e7a;   /* Tuschierblau */
  --blue-dark:  #143855;

  --sans:  "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --mono:  "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --wrap: 1120px;
  --gap:  clamp(3rem, 7vw, 6rem);
}

/* ---- Dunkles Band ----------------------------------------------
   Kehrt die Farbtoken um. Alle Bausteine (Karten, Protokollzeilen,
   Buttons) funktionieren dadurch auf hell und dunkel gleichermaßen.
------------------------------------------------------------------ */
.band--dark{
  --paper:      #0f1113;
  --paper-2:    #191c1e;
  --card:       #191c1e;
  --ink:        #f1f2ee;
  --ink-soft:   #99a1a4;
  --rule:       #2c3134;
  --blue:       #58a6e0;
  --blue-dark:  #8ec6ef;
  background:var(--paper);
  color:var(--ink);
}
.band--dark .btn--solid{ color:#0f1113; }
.band--dark .btn:hover{ color:#0f1113; }

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ animation:none !important; transition:none !important; }
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:1.0625rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }

a{ color:var(--blue); text-decoration:none; }
a:hover{ color:var(--blue-dark); text-decoration:underline; text-underline-offset:3px; }

:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; }

.wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(1.25rem,4vw,2.5rem); }

/* ---- Kopfzeile ------------------------------------------------- */
.masthead{
  position:sticky; top:0; z-index:50;
  background:rgba(15,17,19,.94);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule);
}
.masthead__inner{ display:flex; align-items:center; gap:1.5rem; min-height:66px; }

.wordmark{ color:var(--ink); font-weight:600; letter-spacing:.11em;
           font-size:.78rem; text-transform:uppercase; white-space:nowrap; }
.wordmark:hover{ color:var(--ink); text-decoration:none; }
.wordmark span{ color:var(--ink-soft); font-weight:400; }

.nav{ margin-left:auto; display:flex; gap:1.6rem; overflow-x:auto;
      scrollbar-width:none; -ms-overflow-style:none; }
.nav::-webkit-scrollbar{ display:none; }
.nav a{
  color:var(--ink-soft); font-size:.82rem; letter-spacing:.05em;
  text-transform:uppercase; white-space:nowrap; padding-block:.4rem;
  border-bottom:2px solid transparent;
}
.nav a:hover{ color:var(--ink); text-decoration:none; }
.nav a[aria-current="page"]{ color:var(--ink); border-bottom-color:var(--blue); }

/* Schalter und Burger-Symbol: am Desktop unsichtbar */
.nav-toggle{ position:absolute; width:1px; height:1px; opacity:0; margin:0; }
.nav-burger{ display:none; }

/* Schmale Bildschirme: Menü hinter dem Burger-Symbol.
   Umgesetzt über eine Checkbox, damit die Seite ohne JavaScript auskommt. */
@media (max-width:760px){
  .masthead__inner{
    display:flex; flex-wrap:wrap; align-items:center;
    justify-content:space-between; min-height:58px; gap:0;
  }
  .wordmark{ padding-block:1rem; }

  .nav-burger{
    display:block; width:26px; height:18px; position:relative;
    cursor:pointer; margin-left:auto; flex:0 0 auto;
  }
  .nav-burger span{
    position:absolute; left:0; width:100%; height:2px;
    background:var(--ink); border-radius:1px;
    transition:transform .22s ease, opacity .15s ease;
  }
  .nav-burger span:nth-child(1){ top:0; }
  .nav-burger span:nth-child(2){ top:8px; }
  .nav-burger span:nth-child(3){ top:16px; }

  .nav-toggle:checked + .nav-burger span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
  .nav-toggle:checked + .nav-burger span:nth-child(2){ opacity:0; }
  .nav-toggle:checked + .nav-burger span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

  .nav-toggle:focus-visible + .nav-burger{ outline:2px solid var(--blue); outline-offset:6px; }

  .nav{
    display:none; order:3; flex:0 0 100%; margin:0;
    overflow:visible; border-top:1px solid var(--rule);
    max-height:calc(100vh - 58px); overflow-y:auto;
  }
  .nav-toggle:checked ~ .nav{ display:block; }
  .nav a{
    display:block; padding:1rem 0; font-size:.85rem;
    border-bottom:1px solid var(--rule); border-top:none;
  }
  .nav a:last-child{ border-bottom:none; }
  .nav a[aria-current="page"]{ color:var(--blue); }
}

@media (prefers-reduced-motion:reduce){
  .nav-burger span{ transition:none; }
}

/* ---- Seitenkopf ------------------------------------------------ */
.eyebrow{
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-soft); margin:0 0 1rem;
}
.eyebrow::before{
  content:""; display:inline-block; width:18px; height:2px;
  background:var(--blue); vertical-align:middle;
  margin-right:.7rem; translate:0 -2px;
}

.pagehead{ padding-top:clamp(3rem,7vw,5.5rem); padding-bottom:clamp(3rem,7vw,5rem); }
.pagehead h1{ margin:0; }
.pagehead p{ max-width:52ch; color:var(--ink-soft); margin:1.2rem 0 0;
             font-size:1.1rem; }

h1{ font-size:clamp(2.5rem,6.5vw,4.4rem); font-weight:600; line-height:1.02;
    letter-spacing:-.035em; }
h2{ font-size:clamp(1.4rem,2.6vw,1.9rem); font-weight:600; line-height:1.2;
    letter-spacing:-.015em; margin:0 0 1rem; }
h3{ font-size:1.05rem; font-weight:600; letter-spacing:-.005em; margin:0 0 .5rem; }

.section{ padding-block:var(--gap); border-top:1px solid var(--rule); }
.band--dark + .section{ border-top:none; }
.section--plain{ padding-block:var(--gap); }

/* ---- Startseite: Hero ------------------------------------------ */
.hero{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(2rem,5vw,4rem);
       align-items:center; padding-block:clamp(3rem,7vw,6rem); }
.hero h1{ font-size:clamp(2.7rem,7vw,5.2rem); }
.hero__text p{ max-width:46ch; color:var(--ink-soft); font-size:1.1rem;
               margin-top:1.5rem; }
.hero__media img{ width:100%; aspect-ratio:5/4; object-fit:cover;
                  border:none; filter:contrast(1.06) saturate(.92); }
@media (max-width:820px){
  .hero{ grid-template-columns:1fr; }
  .hero__media{ order:-1; }
  .hero__media img{ aspect-ratio:16/10; }
}

.actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2rem; }
.btn{
  display:inline-block; padding:.7rem 1.4rem; font-size:.84rem;
  letter-spacing:.06em; text-transform:uppercase; font-weight:600;
  border:1px solid var(--blue); color:var(--blue); background:transparent;
}
.btn:hover{ background:var(--blue); color:var(--paper); text-decoration:none; }
.btn--solid{ background:var(--blue); color:var(--paper); }
.btn--solid:hover{ background:var(--blue-dark); border-color:var(--blue-dark); color:var(--paper); }

/* ---- Kennwerte-Leiste ------------------------------------------ */
.facts{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
        background:var(--rule); border-top:1px solid var(--rule); }
.facts div{ background:var(--paper); padding:1.3rem 1.2rem; }
.facts dt{ font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
           color:var(--ink-soft); }
.facts dd{ margin:.4rem 0 0; font-family:var(--mono); font-size:1.02rem;
           color:var(--blue); }
@media (max-width:700px){ .facts{ grid-template-columns:repeat(2,1fr); } }

/* ---- Protokollzeile (Signatur der Seite) ----------------------- */
.protocol{ margin:0; }
.protocol__row{ display:flex; align-items:baseline; gap:.9rem;
                padding:.8rem 0; border-bottom:1px solid var(--rule); }
.protocol__row:first-child{ border-top:1px solid var(--rule); }
.protocol__name{ font-weight:600; }
.protocol__name small{ display:block; font-weight:400; font-size:.82rem;
                       color:var(--ink-soft); letter-spacing:0; }
.protocol__leader{ flex:1 1 auto; min-width:1.5rem;
                   border-bottom:1px dotted var(--rule); translate:0 -.28em; }
.protocol__value{ font-family:var(--mono); font-size:.95rem; color:var(--blue);
                  font-variant-numeric:tabular-nums; white-space:nowrap; }
.protocol--price .protocol__row{ padding:1.1rem 0; }
.protocol--price .protocol__name{ font-size:1.05rem; }
.protocol--price .protocol__value{ font-size:1.15rem; color:var(--ink); }
.note{ margin-top:1.1rem; font-size:.86rem; color:var(--ink-soft); max-width:60ch; }

/* ---- Karten / Raster ------------------------------------------- */
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
@media (max-width:820px){ .grid-2,.grid-3{ grid-template-columns:1fr; } }

.card{ background:var(--card); border:1px solid var(--rule); padding:1.6rem 1.5rem;
       border-top:3px solid var(--ink); transition:border-top-color .2s ease; }
.card:hover{ border-top-color:var(--blue); }
.card p{ color:var(--ink-soft); margin:0 0 1rem; }
.card ul{ margin:0; padding-left:1.1rem; font-size:.94rem; color:var(--ink-soft); }
.card li{ margin-bottom:.3rem; }

.tag{ display:inline-block; font-family:var(--mono); font-size:.72rem;
      letter-spacing:.06em; color:var(--ink-soft); border:1px solid var(--rule);
      padding:.15rem .5rem; margin:0 .3rem .4rem 0; }

.exclude{ background:var(--paper-2); border:1px solid var(--rule); padding:1.5rem; }
.exclude h3{ margin-bottom:.8rem; }
.exclude ul{ margin:0; padding-left:1.1rem; color:var(--ink-soft); font-size:.94rem; }

/* ---- Galerie ---------------------------------------------------- */
.gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
@media (max-width:820px){ .gallery{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .gallery{ grid-template-columns:1fr; } }
.gallery figure{ margin:0; }
.gallery img{ width:100%; aspect-ratio:4/3; object-fit:cover; border:none;
              filter:contrast(1.08) saturate(.85) brightness(.94);
              transition:filter .25s ease; }
.gallery figure:hover img{ filter:contrast(1.05) saturate(1) brightness(1); }
.gallery figcaption{ margin-top:.55rem; font-family:var(--mono); font-size:.76rem;
                     color:var(--ink-soft); }

/* ---- MX5 Bibel: Übersicht --------------------------------------- */
.post-list{ border-top:1px solid var(--rule); }
.post-item{ display:grid; grid-template-columns:9rem 1fr; gap:2rem;
            padding:2rem 0; border-bottom:1px solid var(--rule); }
.post-item__meta{ font-family:var(--mono); font-size:.76rem; color:var(--ink-soft);
                  line-height:1.7; }
.post-item__meta strong{ display:block; font-weight:400; font-size:1.9rem;
                         line-height:1; color:var(--blue); margin-bottom:.5rem; }
.post-item h2{ font-size:clamp(1.5rem,2.6vw,1.95rem); margin-bottom:.6rem;
               letter-spacing:-.02em; }
.post-item h2 a{ color:var(--ink); }
.post-item h2 a:hover{ color:var(--blue); text-decoration:none; }
.post-item p{ margin:0; color:var(--ink-soft); max-width:62ch; }
@media (max-width:700px){
  .post-item{ grid-template-columns:1fr; gap:.6rem; }
}

/* ---- MX5 Bibel: Artikel ----------------------------------------- */
.article-head{ max-width:48rem; margin-inline:auto;
               padding-block:clamp(2.5rem,6vw,4.5rem); }
.article-head h1{ font-size:clamp(2.1rem,4.8vw,3.4rem); margin:0 0 2rem; }

.article{ max-width:44rem; margin-inline:auto; padding-block:clamp(2.5rem,6vw,4rem); }
.article h1{ font-size:clamp(1.9rem,4.2vw,2.8rem); margin:0 0 1.5rem; }
.article__meta{ display:flex; flex-wrap:wrap; gap:1.6rem;
                font-family:var(--mono); font-size:.76rem; color:var(--ink-soft);
                border-top:1px solid var(--rule); padding-top:1rem; }
.article__body{ font-family:var(--serif); font-size:1.18rem; line-height:1.72; }
.article__body p{ margin:0 0 1.4rem; }
.article__body h2{ font-family:var(--sans); font-size:1.3rem; margin:2.8rem 0 .9rem; }
.article__body ul,.article__body ol{ margin:0 0 1.4rem; padding-left:1.4rem; }
.article__body li{ margin-bottom:.5rem; }
.article__body strong{ font-weight:600; }
.article__body blockquote{
  margin:2.4rem 0; padding:1.4rem 0 1.4rem 1.6rem;
  border-left:4px solid var(--blue);
  font-style:normal; color:var(--ink); font-size:1.32rem; line-height:1.5;
  letter-spacing:-.01em;
}
.article__body figure{ margin:2.2rem 0; }
.article__body figure img{ border:1px solid var(--rule); }
.article__body figcaption{ font-family:var(--mono); font-size:.75rem;
                           color:var(--ink-soft); margin-top:.5rem; }

/* Variantenkarten im Artikeltext.
   Die Karten teilen sich das Zeilenraster des Containers (subgrid),
   dadurch liegen gleiche Felder über alle Karten hinweg auf einer Höhe,
   egal wie lang der Text in einer Karte ist.
   Zeilenzahl im HTML setzen: <div class="spec-cards" style="--rows:9"> */
.article__body .spec-cards{
  display:grid; grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(var(--rows,8), auto);
  column-gap:1.2rem; row-gap:0;
  margin:2.4rem 0; font-family:var(--sans);
}
.spec-card{
  display:grid; grid-row:span var(--rows,8); grid-template-rows:subgrid;
  row-gap:0; align-content:start;
  background:var(--card); border:1px solid var(--rule);
  border-top:3px solid var(--ink); padding:1.4rem 1.3rem 1.6rem;
  transition:border-top-color .2s ease;
}
.spec-card:hover{ border-top-color:var(--blue); }
.spec-card__pos{ font-family:var(--mono); font-size:.68rem; letter-spacing:.12em;
                 text-transform:uppercase; color:var(--ink-soft); margin:0; }
.spec-card h3{ font-size:1.2rem; line-height:1.2; letter-spacing:-.015em;
               margin:.5rem 0 0; align-self:start; }
.spec-card__id{ margin:.7rem 0 0; align-self:start; }
.spec-card__id span{ display:inline-block; font-family:var(--mono); font-size:.8rem;
                     color:var(--blue); border:1px solid var(--rule);
                     padding:.2rem .55rem; }

.spec-row{ padding-top:1.1rem; }
.spec-row__k{ display:block; font-size:.66rem; letter-spacing:.12em;
              text-transform:uppercase; color:var(--ink-soft); }
.spec-row__v{ display:block; margin-top:.25rem; font-size:.95rem; line-height:1.45; }
.spec-row__v.mono{ font-family:var(--mono); font-size:.9rem; }
.spec-row--mark{ margin-top:.4rem; padding:.9rem 0 .2rem 1rem;
                 border-left:3px solid var(--blue); }

/* Gestapelt auf schmalen Bildschirmen: dort ist nichts auszurichten */
@media (max-width:760px){
  .article__body .spec-cards{
    grid-template-columns:1fr; grid-template-rows:none; row-gap:1.2rem;
  }
  .spec-card{ grid-row:auto; grid-template-rows:none; }
}

/* Vergleichstabelle im Artikeltext */
.article__body .compare{ display:block; overflow-x:auto; margin:2.2rem 0; }
.article__body table{ width:100%; border-collapse:collapse;
                      font-family:var(--sans); font-size:.95rem; min-width:34rem; }
.article__body th,.article__body td{ text-align:left; vertical-align:top;
                                     padding:.85rem 1rem .85rem 0;
                                     border-bottom:1px solid var(--rule); }
.article__body thead th{ font-size:.7rem; letter-spacing:.12em;
                         text-transform:uppercase; color:var(--ink-soft);
                         font-weight:600; border-bottom:2px solid var(--ink);
                         padding-bottom:.6rem; }
.article__body tbody th{ font-weight:600; white-space:nowrap; padding-right:2rem; }
.article__body td em{ font-style:normal; color:var(--blue);
                      font-family:var(--mono); font-size:.85rem; }
.article__back{ font-family:var(--mono); font-size:.78rem; display:inline-block;
                margin-bottom:1.8rem; }

.endnote{ margin-top:3rem; padding-top:1.5rem; border-top:1px solid var(--rule);
          font-family:var(--sans); font-size:.95rem; color:var(--ink-soft); }

/* ---- Kontakt ----------------------------------------------------- */
.contact-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem; }
@media (max-width:700px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-card{ border:1px solid var(--rule); background:var(--card);
               border-top:3px solid var(--blue); padding:1.7rem 1.6rem; }
.contact-card .eyebrow{ margin-bottom:.6rem; }
.contact-card a{ font-size:1.25rem; font-weight:600; letter-spacing:-.01em;
                 word-break:break-word; }

/* ---- Rechtstexte -------------------------------------------------- */
.legal{ max-width:44rem; padding-block:clamp(2.5rem,6vw,4rem); }
.legal h2{ font-size:1.15rem; margin:2.5rem 0 .7rem; }
.legal h3{ font-size:1rem; margin:1.8rem 0 .5rem; }
.legal p,.legal li{ color:var(--ink-soft); }
.legal ul{ padding-left:1.2rem; }

/* ---- Fußzeile ----------------------------------------------------- */
.footer{ border-top:none; background:var(--paper);
         padding-block:clamp(3rem,6vw,4.5rem); margin-top:var(--gap); }
.footer a{ color:var(--ink); }
.footer a:hover{ color:var(--blue); }
.footer__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2rem; }
@media (max-width:700px){ .footer__grid{ grid-template-columns:1fr; gap:1.6rem; } }
.footer h4{ font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
            color:var(--ink-soft); margin:0 0 .8rem; font-weight:600; }
.footer ul{ list-style:none; margin:0; padding:0; font-size:.92rem; }
.footer li{ margin-bottom:.35rem; }
.footer address{ font-style:normal; font-size:.92rem; color:var(--ink-soft); }
.footer__base{ margin-top:2.5rem; padding-top:1.2rem; border-top:1px solid var(--rule);
               font-family:var(--mono); font-size:.72rem; color:var(--ink-soft);
               display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; }