/* Erzeugt von build/build.mjs — nicht hier ändern. */

/* ---- aus style-hover / style-focus des Entwurfs erzeugt ---- */
.h1:hover, .h1:focus-visible{color: #E0220F; border-bottom-color: #E0220F;}
.h2:hover, .h2:focus-visible{color: #E0220F;}
.h3:hover, .h3:focus-visible{background: #B01A0B; transform: translateY(-2px);}
.h4:hover, .h4:focus-visible{border-color: #E0220F;}
.h5:hover, .h5:focus-visible{background: #B01A0B;}
.h6:hover, .h6:focus-visible{border-color: #E0220F; transform: translateY(-3px); color: #1C2024;}
.h7:hover, .h7:focus-visible{color: #FFFFFF;}
.h8:hover, .h8:focus-visible{background: #B01A0B; transform: translateY(-2px); color: #FFFFFF;}
.h9:hover, .h9:focus-visible{border-color: #E0220F; transform: translateY(-2px); color: #1C2024;}
.ha:focus{left: 12px; top: 12px;}
.hb:hover, .hb:focus-visible{transform: translateY(-3px); border-color: #E0220F;}
.hc:hover, .hc:focus-visible{border-color: #FFFFFF; transform: translateY(-2px); color: #FFFFFF;}
.hd:focus{border-color: #E0220F;}
.he:hover, .he:focus-visible{color: #B01A0B; border-bottom-color: #B01A0B;}
.hf:hover, .hf:focus-visible{transform: translateY(-3px);}

/* ---- Navigation: welche Fassung erscheint, entscheidet die Breite ---- */
/* Das hidden-Attribut allein reicht nicht: der Entwurf setzt display:flex
   direkt am Element, und ein Inline-Stil schlägt die Regel des Browsers. */
.nav-mobil[hidden] { display: none !important; }
@media (max-width: 1080px) {
  .nav-breit { display: none !important; }
}
@media (min-width: 1081px) {
  .nav-knopf { display: none !important; }
  .nav-mobil { display: none !important; }
}

/* ---- Menüpunkte: Unterlinie wächst bei Hover aus der Mitte ---- */
a[data-nav]:hover [data-nav-line],
a[data-nav]:focus-visible [data-nav-line] {
  transform-origin: center;
  transform: scaleX(1) !important;
}

/* ---- Laufband der Herstellerlogos ---- */
@keyframes zt-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---- Antwortkarten der Schnell-Anfrage ---- */
label[data-option]:has(input:checked) { border-color: #E0220F !important; }

/* ---- Sprungmarke: unsichtbar, bis sie den Fokus bekommt ---- */
.sprungmarke {
  position: absolute; left: -9999px; top: 0; z-index: 500;
  background: #1C2024; color: #fff; font-weight: 700;
  padding: 12px 20px; border-radius: 0 0 10px 0; text-decoration: none;
}
.sprungmarke:focus { left: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ---- Einwilligungsbanner ---- */
#cookie-banner {
  position: fixed; inset: auto 0 0 0; z-index: 450;
  padding: 16px; display: flex; justify-content: center;
}
#cookie-banner[hidden] { display: none; }
.cookie-karte {
  max-width: 560px; background: #FFFFFF; color: #1C2024;
  border: 1px solid #E3E6E9; border-radius: 14px;
  box-shadow: 0 18px 50px rgba(28,32,36,.22); padding: 24px;
}
.cookie-karte h2 { margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -0.01em; }
.cookie-karte p { margin: 12px 0 0; font-size: 16px; line-height: 1.65; color: #5A626B; }
.cookie-knoepfe { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 12px; }
.cookie-knoepfe button {
  flex: 1 1 160px; min-height: 46px; border-radius: 8px;
  font: inherit; font-weight: 700; font-size: 16px; cursor: pointer; padding: 13px 22px;
}
.cookie-ja { background: #E0220F; color: #FFFFFF; border: 1.5px solid #E0220F; }
.cookie-ja:hover { background: #B01A0B; border-color: #B01A0B; }
.cookie-nein { background: #FFFFFF; color: #1C2024; border: 1.5px solid #1C2024; }
.cookie-nein:hover { background: #F5F6F7; }
.cookie-fuss { font-size: 14px; }
.cookie-fuss a { color: #E0220F; }