/* v1 hat keine Überschreibungen. Texte, Daten und Bilder bleiben gemeinsam. */
html:is([data-design="v2"], [data-design="v3"]) {
  --radius: 0px;
  --accent: #005da4;
  --bg-soft: #f3f6f8;
  --line: #c6d2dc;
}
html:is([data-design="v2"], [data-design="v3"]) :is(
  .header-phone, .btn, .card, .page-hero, .product, .chips li, .toc a,
  .filter label, .catalog h2 .count, .cta-band, .card-img,
  .gallery img, .gallery-big img, .timeline img, .footer-partner, figure img
) { border-radius: 0; box-shadow: none; }
html:is([data-design="v2"], [data-design="v3"]) .site-nav { box-shadow: none; }
html:is([data-design="v2"], [data-design="v3"]) .page-hero {
  background: #fff; border-top: 5px solid var(--brand);
  border-bottom: 1px solid var(--line); padding: 28px 0;
  margin-left: 0; margin-right: 0;
}
html:is([data-design="v2"], [data-design="v3"]) .product:hover {
  transform: none; box-shadow: none; border-color: var(--brand);
}
/* V2: Bildfläche weiß wie die Karte, damit Produktbilder ohne multiply nahtlos sitzen (sonst mit Dark Reader fast schwarz). */
html[data-design="v2"] .product-img { background: #fff; }
html[data-design="v2"] .product-img img { mix-blend-mode: normal; }
html:is([data-design="v2"], [data-design="v3"]) .jobs-banner {
  background: var(--brand-light); border-color: var(--line); border-left-color: var(--brand);
}
html:is([data-design="v2"], [data-design="v3"]) .cta-band {
  background: var(--brand-light); color: var(--text); border-top: 4px solid var(--brand);
}
html:is([data-design="v2"], [data-design="v3"]) .cta-band :is(h2, p) { color: var(--brand-dark); }
html:is([data-design="v2"], [data-design="v3"]) .cta-band .btn {
  background: var(--brand); color: #fff; border-color: var(--brand);
}
html:is([data-design="v2"], [data-design="v3"]) .cta-band .btn:hover { background: var(--brand-dark); }
html:is([data-design="v2"], [data-design="v3"]) .cta-band .btn-ghost {
  background: transparent; color: var(--brand-dark);
}
html:is([data-design="v2"], [data-design="v3"]) .cta-band .btn-ghost:hover { background: #fff; }
/* Das vorhandene Firmenfoto natürlich zeigen, ohne Farbüberlagerung oder Beschnitt. */
html:is([data-design="v2"], [data-design="v3"]) .hero-foto { height: auto; }
html:is([data-design="v2"], [data-design="v3"]) .hero-foto img {
  width: 100%; height: auto; max-height: none; mix-blend-mode: normal; border-radius: 0;
}
/* v2 Werkstatt: einheitliches Raster, klare Kanten, echte Betriebsfotos. */
html[data-design="v2"] { --wrap: 1160px; }
html[data-design="v2"] .page-hero { border-top: 0; }
html[data-design="v2"] h1 {
  font-size: clamp(1.9rem, 1.3rem + 2vw, 2.8rem);
  letter-spacing: -0.025em; line-height: 1.12;
}
html[data-design="v2"] .site-nav a[aria-current="page"] {
  box-shadow: inset 0 -3px 0 #fff;
}
html[data-design="v2"] .btn { min-height: 44px; }
html[data-design="v2"] .cards {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: 0; border-top: 1px solid var(--line);
}
html[data-design="v2"] .cards > li {
  display: flex; min-width: 0; border-bottom: 1px solid var(--line);
}
/* Kachel direkt am li (Unternehmen, Kontakt): Überschrift über dem Text, nicht daneben. */
html[data-design="v2"] .cards > li.card { display: block; }
html[data-design="v2"] .cards .card {
  width: 100%; min-width: 0; background: #fff;
  border: 0; border-left: 3px solid var(--brand);
  margin: 20px 0; padding: 8px 20px;
}
html[data-design="v2"] .cards .card:hover { background: var(--bg-soft); }
/* V2 hat weiße Flächen: Produktbilder (reinweißer Grund) brauchen kein multiply, Fotos werden davon nur dunkler
   (z. B. mit Dark Reader fast schwarz). */
html[data-design="v2"] :is(a.card .card-img, .page-hero .hero-visual img) { mix-blend-mode: normal; }
html[data-design="v2"] .cards .card h3 { line-height: 1.3; }
html[data-design="v2"] .cards .card p { line-height: 1.65; }
/* Startseite: Foto und Text gleichwertig, Werkstatt als eigener Abschnitt. */
html[data-design="v2"] .page-hero:has(.hero-foto) {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 40px; padding: 36px 0; align-items: center;
}
html[data-design="v2"] .hero-foto img { display: block; }
html[data-design="v2"] main:has(.hero-foto) > h2 {
  margin-top: 48px; margin-bottom: 20px;
}
html[data-design="v2"] main:has(.hero-foto) > .media {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: center; gap: 40px; margin: 48px 0;
  padding: 32px 0; border-block: 1px solid var(--line);
}
html[data-design="v2"] main:has(.hero-foto) > .media h2 { margin-top: 0; }
html[data-design="v2"] main:has(.hero-foto) > .media img {
  display: block; height: auto; border-left: 3px solid var(--brand);
  padding-left: 16px;
}
html[data-design="v2"] .jobs-banner {
  margin: 20px 0 36px; padding: 20px 24px;
  background: var(--brand-light); border: 1px solid #b6ccdd;
  gap: 12px 20px;
}
html[data-design="v2"] .jobs-banner strong { font-size: 1.1rem; }
html[data-design="v2"] .jobs-pfeil {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 8px 14px; border: 1px solid var(--brand);
  background: #fff; color: var(--brand-dark); white-space: normal;
}
html[data-design="v2"] .jobs-banner:hover { border-color: var(--brand); }
html[data-design="v2"] .jobs-banner:hover .jobs-pfeil {
  background: var(--brand); color: #fff;
}
/* Vier Angebote bilden auf breiten Bildschirmen eine vollständige Reihe. */
@media (min-width: 1100px) {
  html[data-design="v2"] main:has(.hero-foto) > .cards:has(.card-img) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (min-width: 761px) and (max-width: 1099px) {
  html[data-design="v2"] main:has(.hero-foto) > .cards:has(.card-img) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  html[data-design="v2"] .page-hero:has(.hero-foto) {
    grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 24px 0;
  }
  html[data-design="v2"] main:has(.hero-foto) > .media {
    grid-template-columns: minmax(0, 1fr); gap: 24px;
    margin: 32px 0; padding: 24px 0;
  }
  html[data-design="v2"] main:has(.hero-foto) > .media img {
    order: 0; padding-left: 0; border-left: 0;
  }
  html[data-design="v2"] main:has(.hero-foto) > h2 { margin-top: 32px; }
}
/* v3 Sachlich: große weiße Flächen, technische Rasterlinien, ruhige Typografie. */
html[data-design="v3"] { --brand-light: #edf3f7; --wrap: 1200px; }
html[data-design="v3"] .page-hero { border-top: 1px solid var(--line); gap: 40px; }
/* Grid streckt die Listenelemente; Flex streckt auch den anklickbaren Inhalt.
   So fluchten die Abschlusslinien je Zeile unabhängig von der Textlänge. */
html[data-design="v3"] .cards > li { display: flex; }
html[data-design="v3"] .cards > li > .card { width: 100%; }
html[data-design="v3"] .card { background: #fff; border: 0; border-bottom: 2px solid var(--brand); }
html[data-design="v3"] .product { border-width: 0 0 2px; border-bottom-color: var(--brand); }
html[data-design="v3"] .product-img { background: #fff; }
html[data-design="v3"] main > h2 { border-top: 1px solid var(--line); padding-top: 22px; }
html:is([data-design="v2"], [data-design="v3"]) :focus-visible {
  outline: 3px solid #005da4; outline-offset: 3px;
}
html:is([data-design="v2"], [data-design="v3"]) .site-nav a:focus-visible {
  outline-color: #fff; outline-offset: -3px;
}
@media (max-width: 760px) {
  html:is([data-design="v2"], [data-design="v3"]) .page-hero { padding: 20px 0; gap: 20px; }
}