/* ==========================================================================
   s14 — Basis-Styles (Schema B, CD-Output 1:1)
   Farbwerte kommen aus theme.json (CSS-Variablen --wp--preset--color--*)
   ========================================================================== */

:root {
  --s14-radius-tile: var(--wp--custom--radius--tile, 8px);
  --s14-radius-card: var(--wp--custom--radius--card, 6px);
  --s14-grid-gap: var(--wp--custom--grid--gap, 9px);
}

body { overflow-x: hidden; }

/* --------------------------------------------------------------------------
   Header — fixiert, Glass-Effekt beim Scrollen (CD-Logik)
   -------------------------------------------------------------------------- */

.s14-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
/* Admin-Bar: 32 px ab 783 px Breite, 46 px darunter, ab 600 px nicht mehr fixiert */
.admin-bar .s14-header { top: 32px; }
@media screen and (max-width: 782px) { .admin-bar .s14-header { top: 46px; } }
@media screen and (max-width: 600px) { .admin-bar .s14-header { top: 0; } }

.s14-header-row {
  max-width: 1320px;
  margin: 0 auto;
  min-height: 80px;
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 34px;
  overflow: visible;
  transition: min-height 0.32s ease;
}
/* jedes Kind exakt auf der Mittelachse der Zeile — auch die Navigation */
.s14-header-row > * { align-self: center; }
/* Navigation und Login bilden eine rechte Gruppe. Im CD-Original ist der
   Login-Pill der letzte Eintrag der Navigation; ohne diese Regel schiebt
   space-between die Navigation in die Mitte der Zeile — am deutlichsten
   sichtbar zwischen 1080 und 1440 px, wo am meisten freier Raum bleibt. */
.s14-nav { margin-left: auto; }

.s14-header.is-scrolled {
  background: rgba(12, 18, 25, 0.74);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.32);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
}
.s14-header.is-scrolled .s14-header-row { min-height: 64px; }

/* Seiten ohne dunkle Kopffläche (z. B. Kontakt): Header startet solid statt
   transparent — sonst steht die weiße Navigation auf hellem Grund.
   Werte wie im CD-Prototyp der Kontaktseite. Der gescrollte Zustand bleibt
   unverändert und übernimmt weiter das Glass aus .is-scrolled. */
.s14-page-light .s14-header:not(.is-scrolled) {
  background: rgba(12, 18, 25, 0.9);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
}

/* Logo 120 % → 100 %: echte Größenumschaltung statt scale(), damit die
   Wortmarke Layoutplatz belegt und nicht in die Navigation hineinwächst. */
.s14-logo {
  display: flex;
  align-items: center;
  gap: 17px;
  flex: 0 0 auto;
  text-decoration: none;
  transition: gap 0.32s ease;
}
.s14-logo > svg,
.s14-logo img.s14-signet {
  width: 53px; height: 53px;
  display: block;
  flex: 0 0 auto;
  transition: width 0.32s ease, height 0.32s ease;
}
.s14-header.is-scrolled .s14-logo { gap: 14px; }
.s14-header.is-scrolled .s14-logo > svg,
.s14-header.is-scrolled .s14-logo img.s14-signet { width: 44px; height: 44px; }

.s14-header .s14-wordmark { font-size: 34px; white-space: nowrap; transition: font-size 0.32s ease; }
.s14-header.is-scrolled .s14-wordmark { font-size: 28px; }
.s14-header .s14-tagline-sep { height: 36px; transition: height 0.32s ease; }
.s14-header.is-scrolled .s14-tagline-sep { height: 30px; }

.s14-wordmark {
  font-family: var(--wp--preset--font-family--kanit, Kanit, sans-serif);
  font-style: italic;
  font-weight: 800;
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: #f6f7f8;
}
.s14-wordmark .s14-dot {
  display: inline-block;
  width: 0.21em; height: 0.21em;
  border-radius: 1px;
  background: var(--wp--preset--color--signalrot, #e0241b);
  margin: 0 0.06em;
  vertical-align: 0.04em;
}
.s14-wordmark .s14-tld { font-size: 0.78em; margin-left: -1px; }

.s14-tagline-sep { width: 1px; height: 30px; background: rgba(255, 255, 255, 0.28); }
.s14-tagline {
  font-family: var(--wp--preset--font-family--inter, Inter, sans-serif);
  font-size: 11px; font-weight: 400;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: #aebfcd; line-height: 1.35;
  white-space: nowrap;
}

/* Navigation (weiße Links, dunkle Glass-Flyouts) */
.s14-nav { font-size: 15px; font-weight: 600; }
.s14-nav,
.s14-nav .wp-block-navigation__container { align-items: center; }
.s14-nav .wp-block-navigation-item__content { display: inline-flex; align-items: center; line-height: 1; }
/* Nav-Einträge nie umbrechen — „Über uns" brach zweizeilig und trieb damit die
   Header-Zeile über 80 px, wodurch das Logo überproportional wirkte. */
.s14-header-row { flex-wrap: nowrap; }
.s14-nav .wp-block-navigation-item__content,
.s14-nav .wp-block-pages-list__item__link { white-space: nowrap; }
.s14-login-btn { flex: 0 0 auto; }
.s14-nav .wp-block-pages-list__item__link,
.s14-nav .wp-block-navigation-item__content { color: #e6edf2 !important; text-decoration: none; }
.s14-nav .wp-block-pages-list__item__link:hover,
.s14-nav .wp-block-navigation-item__content:hover { color: #ffffff !important; }
.s14-nav .wp-block-navigation__submenu-container {
  background: rgba(12, 18, 25, 0.97) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 10px;
  padding: 8px !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
  min-width: 230px;
}
.s14-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  color: #e6edf2; border-radius: 7px; padding: 11px 14px;
}
.s14-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
  background: rgba(255, 255, 255, 0.08); color: #ffffff;
}
.s14-nav .wp-block-navigation__responsive-container.is-menu-open {
  background: rgba(12, 18, 25, 0.97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.s14-nav .wp-block-navigation__responsive-container-open,
.s14-nav .wp-block-navigation__responsive-container-close { color: #e6edf2; }

/* „bald“-Badge für den Marktplatz-Menüpunkt (CSS-Klasse am Menü-Eintrag) */
.s14-menu-bald > .wp-block-navigation-item__content::after {
  content: "bald";
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: #ff6a60;
  background: rgba(224, 36, 27, 0.16);
  border: 1px solid rgba(224, 36, 27, 0.3);
  border-radius: 999px;
  padding: 2px 7px;
  margin-left: 7px;
  vertical-align: 2px;
}

.s14-login-btn {
  display: inline-flex; align-items: center; gap: 8px;
  color: #e6edf2; text-decoration: none;
  font-size: 15px; font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px; padding: 8px 16px;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.s14-login-btn:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.55); color: #fff; }

/* --------------------------------------------------------------------------
   Hero — 2400×1000 (12:5), Text links auf der Wandfläche, nie über dem Auto
   -------------------------------------------------------------------------- */

.s14-hero { position: relative; background: #0c1219; overflow: hidden; padding: 0 !important; }
.s14-hero .wp-block-cover__image-background {
  filter: brightness(0.84) contrast(1.05) saturate(1.06);
  object-position: 74% center;
}
@media (min-width: 1181px) { .s14-hero { aspect-ratio: 12 / 5; min-height: 0; } }
@media (max-width: 1180px) { .s14-hero { min-height: 600px; } }

.s14-hero .wp-block-cover__background {
  opacity: 1 !important;
  background:
    linear-gradient(180deg, rgba(12,18,25,0.92) 0%, rgba(12,18,25,0.5) 13%, rgba(12,18,25,0) 34%),
    linear-gradient(90deg, #0c1219 0%, rgba(12,18,25,0.9) 27%, rgba(12,18,25,0.2) 53%, rgba(12,18,25,0) 67%),
    linear-gradient(0deg, rgba(12,18,25,0.6) 0%, transparent 26%) !important;
}

.s14-hero .wp-block-cover__inner-container {
  max-width: 1320px; margin: 0 auto; padding: 0 40px; width: 100%;
}
.s14-hero-text { max-width: min(540px, 44vw); }

.s14-hero-kicker {
  display: inline-flex; align-items: center; gap: 11px; margin-bottom: 24px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: #9fb2c2;
}
.s14-hero-kicker::before {
  content: ""; width: 26px; height: 2px;
  background: var(--wp--preset--color--signalrot, #e0241b); display: block;
}

.s14-hero-title {
  font-family: var(--wp--preset--font-family--kanit, Kanit, sans-serif) !important;
  font-style: italic !important;
  font-weight: 800 !important;
  font-size: var(--wp--preset--font-size--hero, clamp(37px, 4.7vw, 74px)) !important;
  line-height: var(--wp--custom--hero--line-height, 0.97) !important;
  letter-spacing: var(--wp--custom--hero--letter-spacing, -0.02em) !important;
  margin: 0 !important;
  color: #f6f7f8 !important;
}
.s14-hero-title .s14-rot { color: #ff3b30; }

.s14-hero-sub {
  margin: 26px 0 0; font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.6; color: #aebfcd; max-width: 520px; text-wrap: pretty;
}

.s14-hero-btns { display: flex; gap: 14px; margin-top: 30px; }

@media (max-width: 880px) {
  .s14-hero-text { max-width: 76%; padding-right: 16px; }
}
/* --- Staffelung für schmale Arbeitsbreiten -------------------------------
   Reihenfolge der Opfer (gegen echte Schriftmetriken gerechnet, je Stufe
   mindestens ~30 px Luft an der Unterkante): 1. Gaps 34 → 24 px,
   2. Logo auf die kompakte Stufe, Login nur Icon, bald-Badge weg,
   3. Gaps → 20 px und Trennstrich weg, 4. zuletzt die Tagline unter 940 px.
   Unter 940 px ist wieder Platz für Login-Label und Badge. */
@media (max-width: 1219px) {
  .s14-header-row { gap: 24px; }
  .s14-nav,
  .s14-nav .wp-block-navigation__container { gap: 24px !important; }
}
@media (max-width: 1139px) {
  .s14-logo { gap: 14px; }
  .s14-logo > svg, .s14-logo img.s14-signet { width: 44px; height: 44px; }
  .s14-header .s14-wordmark { font-size: 28px; }
  .s14-header .s14-tagline-sep { height: 30px; }
  .s14-login-label { display: none; }
  .s14-login-btn { padding: 8px 10px; }
  .s14-menu-bald > .wp-block-navigation-item__content::after { content: none; }
}
@media (max-width: 999px) {
  .s14-header-row { gap: 20px; }
  .s14-nav,
  .s14-nav .wp-block-navigation__container { gap: 20px !important; }
  .s14-tagline-sep { display: none; }
}
@media (max-width: 939px) {
  .s14-tagline, .s14-tagline-sep { display: none; }
  .s14-login-label { display: inline; }
  .s14-login-btn { padding: 8px 16px; }
  .s14-menu-bald > .wp-block-navigation-item__content::after { content: "bald"; }
}
@media (max-width: 560px) {
  .s14-hero-text { max-width: 100%; }
  .s14-hero-btns { flex-direction: column; align-items: stretch; }
}

/* Buttons (Signalrot-Verlauf als einziger Akzent) */
.s14-btn-rot .wp-block-button__link, .s14-btn-rot {
  background: linear-gradient(180deg, #ec3a30 0%, #d31d14 100%);
  color: #fff;
  border-radius: var(--wp--custom--radius--button, 5px);
  font-weight: 600;
  box-shadow: 0 0 18px rgba(224,36,27,0.26), 0 10px 24px rgba(211,29,20,0.3), inset 0 1px 0 rgba(255,255,255,0.2);
  transition: filter 0.2s ease, transform 0.2s ease;
}
.s14-btn-rot .wp-block-button__link:hover, a.s14-btn-rot:hover { filter: brightness(1.06); transform: translateY(-1px); }
.s14-btn-ghost .wp-block-button__link, .s14-btn-ghost {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.2);
  color: #f6f7f8;
  border-radius: var(--wp--custom--radius--button, 5px);
  font-weight: 600;
  backdrop-filter: blur(6px);
  transition: background 0.2s ease;
}
.s14-btn-ghost .wp-block-button__link:hover, a.s14-btn-ghost:hover { background: rgba(255,255,255,0.13); }

/* --------------------------------------------------------------------------
   Sektionen — luftig, Kicker in Signalrot, Kanit-Überschriften
   -------------------------------------------------------------------------- */

.s14-section { max-width: 1320px; margin: 0 auto; padding: 104px 40px 40px; }
.s14-kicker {
  font-size: 13px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wp--preset--color--signalrot, #e0241b);
  margin: 0 0 14px;
}

/* Scroll-Reveal */
.s14-reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.55s ease, transform 0.55s ease; }
.s14-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .s14-reveal { opacity: 1; transform: none; transition: none; } }
body.wp-admin .s14-reveal, .block-editor-iframe__body .s14-reveal { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   E-Modell-Schnellzugriff-Grid (Kachel-radius 8px, Grid-gap 9px — CD-Werte)
   -------------------------------------------------------------------------- */

.s14-model-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--s14-grid-gap, 9px);
}
.s14-tile {
  display: flex; flex-direction: column; gap: 5px;
  padding: 20px 18px 18px;
  background: #fff;
  border: 1px solid #e8eaec;
  border-radius: var(--s14-radius-tile, 8px);
  text-decoration: none;
  min-height: 116px;
  box-shadow: var(--wp--custom--shadow--card, 0 1px 2px rgba(16,23,31,0.03));
  transition: all 0.2s ease;
}
.s14-tile:hover {
  border-color: #d31d14;
  box-shadow: var(--wp--custom--shadow--card-hover, 0 14px 30px rgba(16,23,31,0.08));
  transform: translateY(-2px);
}
.s14-tile-code {
  font-family: var(--wp--preset--font-family--kanit, Kanit, sans-serif);
  font-style: italic; font-weight: 800;
  font-size: 34px; line-height: 1;
  color: var(--wp--preset--color--navy, #1d3247);
}
.s14-tile-name { margin-top: auto; font-size: 13px; font-weight: 600; color: var(--wp--preset--color--schiefer, #4a6178); }
.s14-tile-years { font-size: 12px; font-weight: 500; color: #9aa7b1; font-variant-numeric: tabular-nums; }
.s14-tile.is-bald { opacity: 0.55; pointer-events: none; }

/* --------------------------------------------------------------------------
   Ressorts-Grid (5 Felder, Rahmenlinien wie CD)
   -------------------------------------------------------------------------- */

.s14-ressorts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0;
  border-top: 1px solid #e2e5e8;
  border-left: 1px solid #e2e5e8;
}
.s14-ressort-cell {
  display: flex; flex-direction: column; gap: 16px;
  padding: 34px 26px 40px;
  border-right: 1px solid #e2e5e8;
  border-bottom: 1px solid #e2e5e8;
  transition: background 0.2s ease;
}
.s14-ressort-cell:hover { background: #fff; }
.s14-ressort-num {
  font-family: var(--wp--preset--font-family--kanit, Kanit, sans-serif);
  font-style: italic; font-weight: 800; font-size: 30px; color: #cdd6dd;
}
.s14-ressort-cell h3 { margin: 0; }
.s14-ressort-cell p { font-size: 14px; line-height: 1.55; color: var(--wp--preset--color--schiefer, #4a6178); margin: 0; }
.s14-ressort-link { margin-top: auto; padding-top: 14px; font-size: 13px; font-weight: 700; }
.s14-ressort-link a { color: var(--wp--preset--color--signalrot, #e0241b); text-decoration: none; }

/* --------------------------------------------------------------------------
   Artikel-Karten (Query-Loop + Feature)
   -------------------------------------------------------------------------- */

.s14-card-grid.wp-block-post-template { gap: 28px; }
.s14-card {
  border: 1px solid #e8eaec;
  border-radius: var(--s14-radius-card, 6px);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--wp--custom--shadow--card, 0 1px 2px rgba(16,23,31,0.03));
  transition: all 0.18s ease;
}
.s14-card:hover { box-shadow: 0 14px 32px rgba(16,23,31,0.1); transform: translateY(-2px); }
.s14-card .wp-block-post-featured-image { margin: 0; }
.s14-card .wp-block-post-featured-image img { display: block; width: 100%; height: 220px; object-fit: cover; }
.s14-card-body { padding: 18px 22px; display: flex; flex-direction: column; gap: 9px; }
.s14-card .wp-block-post-terms {
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
}
.s14-card .wp-block-post-terms a { color: var(--wp--preset--color--signalrot, #e0241b); text-decoration: none; }
.s14-card .wp-block-post-title { margin: 0; font-size: 19px; line-height: 1.18; font-weight: 600; }
.s14-card .wp-block-post-title a { color: var(--wp--preset--color--navy, #1d3247); text-decoration: none; }
.s14-card .wp-block-post-date { font-size: 13px; color: #9aa7b1; }
.s14-card .wp-block-post-excerpt { font-size: 14px; color: var(--wp--preset--color--schiefer, #4a6178); }

/* --------------------------------------------------------------------------
   Marktplatz-Teaser („in Vorbereitung“, pulsierendes Badge)
   -------------------------------------------------------------------------- */

@keyframes s14pulse {
  0%, 100% { opacity: 0.6; box-shadow: 0 0 0 rgba(224,36,27,0); }
  50% { opacity: 1; box-shadow: 0 0 11px rgba(224,36,27,0.45); }
}
.s14-badge-bald {
  display: inline-block; align-self: flex-start;
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: #ff6a60;
  background: rgba(224,36,27,0.16);
  border: 1px solid rgba(224,36,27,0.3);
  padding: 5px 11px; border-radius: 999px;
  animation: s14pulse 2.6s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   Newsletter (Freitags-Mail)
   -------------------------------------------------------------------------- */

.s14-nl-form {
  display: flex; gap: 10px; flex-wrap: wrap;
  background: #fff;
  border: 1px solid #e2e5e8;
  border-radius: 5px;
  padding: 8px;
  box-shadow: 0 14px 34px rgba(16,23,31,0.07);
}
.s14-nl-form input[type="email"] {
  flex: 1; min-width: 180px;
  border: none; outline: none; background: transparent;
  font-family: var(--wp--preset--font-family--inter, Inter, sans-serif);
  font-size: 16px; color: var(--wp--preset--color--navy, #1d3247);
  padding: 13px 14px;
}
.s14-nl-form button {
  border: none; cursor: pointer;
  padding: 14px 24px; border-radius: 8px;
  background: linear-gradient(180deg, #ec3a30 0%, #d31d14 100%);
  color: #fff;
  font-family: var(--wp--preset--font-family--inter, Inter, sans-serif);
  font-weight: 600; font-size: 15px;
  box-shadow: 0 8px 18px rgba(211,29,20,0.26), inset 0 1px 0 rgba(255,255,255,0.18);
}
.s14-nl-form button:hover { filter: brightness(1.05); }
.s14-nl-hint { margin-top: 12px; font-size: 13px; color: #9aa7b1; }

/* --------------------------------------------------------------------------
   Seiten-Kopfband (Nicht-Startseiten unter dem fixen Header)
   -------------------------------------------------------------------------- */

.s14-topband {
  background: linear-gradient(160deg, #1d3247 0%, #0c1219 100%);
  color: #f6f7f8;
  padding: 150px 40px 56px;
}
.s14-topband .s14-topband-inner { max-width: 1320px; margin: 0 auto; }
.s14-topband h1, .s14-topband .wp-block-post-title, .s14-topband .wp-block-query-title {
  color: #f6f7f8; margin: 0;
  font-size: var(--wp--preset--font-size--heading, clamp(32px, 3.6vw, 44px));
}
.s14-topband .wp-block-post-terms a { color: #ff6a60; text-decoration: none; }
.s14-topband .s14-meta { color: #aebfcd; font-size: 14px; }

/* Artikel-Inhalt */
.s14-article-content { padding-top: 40px; padding-bottom: 80px; }
.s14-article-content .wp-block-post-featured-image img { border-radius: var(--s14-radius-tile, 8px); }

/* --------------------------------------------------------------------------
   Footer — Verlauf Navy → Dunkel, roter Top-Border, Disclaimer
   -------------------------------------------------------------------------- */

.s14-footer {
  background: linear-gradient(180deg, #16273a 0%, #0c1219 100%);
  color: #c6d2dc;
  border-top: 3px solid var(--wp--preset--color--signalrot, #e0241b);
}
.s14-footer-inner { max-width: 1320px; margin: 0 auto; padding: 70px 40px 40px; text-align: center; }
.s14-footer .s14-signet-foot { width: 58px; height: 58px; margin: 0 auto 16px; display: block; }
.s14-footer .s14-wordmark { font-size: 40px; }
.s14-footer-claim {
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: #607b91; margin-top: 12px;
}
.s14-footer-nav {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 14px 28px; margin: 30px 0;
  font-size: 15px; font-weight: 600;
}
.s14-footer-nav a { color: #e6edf2; text-decoration: none; }
.s14-footer-nav a:hover { color: #fff; }
.s14-footer-models {
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 26px 0; margin: 8px 0;
}
.s14-footer-models-title {
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: #607b91; margin: 0 0 16px;
}
.s14-footer-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; }
.s14-footer-chips a {
  font-family: var(--wp--preset--font-family--kanit, Kanit, sans-serif);
  font-style: italic; font-weight: 800; font-size: 16px;
  color: var(--wp--preset--color--salbei, #cfe0d8);
  text-decoration: none;
  padding: 5px 10px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 4px;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.s14-footer-chips a:hover { border-color: var(--wp--preset--color--signalrot, #e0241b); color: #fff; }
.s14-footer-legal {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 6px 13px; margin-top: 26px;
  font-size: 14px; font-weight: 500;
}
.s14-footer-legal a { color: #c6d2dc; text-decoration: none; }
.s14-footer-legal a:hover { color: #fff; }
.s14-footer-legal .s14-sep { color: #41566a; }
.s14-footer-disclaimer { font-size: 13px; line-height: 1.7; color: #7c91a4; margin-top: 22px; }

@media (max-width: 880px) {
  .s14-section { padding-left: 24px; padding-right: 24px; }
  .s14-header-row { padding: 0 24px; min-height: 64px; }
  .s14-topband { padding-left: 24px; padding-right: 24px; }
  /* mobil bleibt das Logo durchgehend auf der kompakten Stufe */
  .s14-logo { gap: 14px; }
  .s14-logo > svg, .s14-logo img.s14-signet { width: 44px; height: 44px; }
  .s14-header .s14-wordmark { font-size: 28px; }
}

/* --------------------------------------------------------------------------
   Kontaktseite (Template page-kontakt, Pattern s14/kontakt) — CD-Werte 1:1
   -------------------------------------------------------------------------- */

.s14-kontakt { max-width: 1320px; margin: 0 auto; padding: 0 32px; }
.s14-kontakt-head { padding-top: 128px; }
.s14-kontakt-crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: 13.5px; color: #7c8b97; margin-bottom: 30px;
}
.s14-kontakt-crumbs a { color: #7c8b97; text-decoration: none; }
.s14-kontakt-crumbs a:hover { color: var(--wp--preset--color--signalrot, #e0241b); }
.s14-kontakt-crumbs .s14-crumb-sep { opacity: 0.5; }
.s14-kontakt-crumbs .s14-crumb-current { color: var(--wp--preset--color--schiefer, #4a6178); }
.s14-kontakt-kicker {
  font-size: 13px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--wp--preset--color--signalrot, #e0241b); margin: 0 0 16px;
}
.s14-kontakt-title {
  font-family: var(--wp--preset--font-family--kanit, Kanit, sans-serif);
  font-style: italic; font-weight: 800;
  font-size: clamp(38px, 5.6vw, 66px); line-height: 0.98; letter-spacing: -0.02em;
  color: var(--wp--preset--color--navy, #1d3247); margin: 0 0 22px;
}
.s14-kontakt-lead {
  font-size: 19px; line-height: 1.6; margin: 0; max-width: 600px; text-wrap: pretty;
  color: var(--wp--preset--color--schiefer, #4a6178);
}

.s14-kontakt-grid {
  display: grid; grid-template-columns: 1.45fr 0.85fr; gap: 28px;
  align-items: start; padding-top: 48px;
}
.s14-kontakt-form {
  background: #fff; border: 1px solid #e8eaec; border-radius: 16px;
  padding: 36px 34px; box-shadow: 0 1px 2px rgba(16, 23, 31, 0.03);
}
.s14-kontakt-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.s14-kontakt-block { margin-bottom: 18px; }
.s14-flabel { display: block; font-size: 13px; font-weight: 600; color: #4a6178; margin-bottom: 8px; }
.s14-field {
  width: 100%; box-sizing: border-box;
  font-family: var(--wp--preset--font-family--inter, Inter, sans-serif);
  font-size: 15.5px; color: #1d3247;
  background: #fff; border: 1px solid #d8dee2; border-radius: 9px;
  padding: 13px 14px; outline: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.s14-field::placeholder { color: #9aa7b1; }
.s14-field:focus { border-color: #e0241b; box-shadow: 0 0 0 3px rgba(224, 36, 27, 0.13); }
textarea.s14-field { resize: vertical; min-height: 140px; line-height: 1.6; }
select.s14-field {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%234a6178' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.s14-consent { display: flex; align-items: flex-start; gap: 12px; margin: 20px 0 22px; cursor: pointer; }
.s14-consent input { flex: 0 0 auto; width: 19px; height: 19px; margin-top: 1px; accent-color: #e0241b; cursor: pointer; }
.s14-consent span { font-size: 13.5px; line-height: 1.55; color: #4a6178; }
.s14-consent a { color: #e0241b; font-weight: 600; text-decoration: none; }
.s14-consent a:hover { text-decoration: underline; }
.s14-kontakt-submit {
  display: inline-flex; align-items: center; gap: 9px;
  border: none; cursor: pointer; padding: 15px 28px; border-radius: 9px;
  background: linear-gradient(180deg, #ec3a30 0%, #d31d14 100%);
  color: #fff; font-family: inherit; font-weight: 600; font-size: 15.5px;
  box-shadow: 0 8px 18px rgba(211, 29, 20, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.s14-kontakt-submit:hover { filter: brightness(1.05); }
.s14-kontakt-note { font-size: 12.5px; color: #9aa7b1; margin: 18px 0 0; }

.s14-kontakt-aside { display: flex; flex-direction: column; gap: 18px; }
.s14-kontakt-avail {
  background: linear-gradient(165deg, #1d3247 0%, #16273a 55%, #0c1219 100%);
  border-radius: 16px; padding: 32px 30px; color: #c6d2dc;
  box-shadow: 0 18px 44px rgba(16, 23, 31, 0.18);
}
.s14-kontakt-avail-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: #ff6a60; margin: 0 0 16px;
}
.s14-kontakt-avail-label .s14-dot-live {
  width: 7px; height: 7px; border-radius: 50%; background: #ff5a50;
  animation: s14ktpulse 2.6s ease-in-out infinite;
}
.s14-kontakt-avail h2 {
  font-family: var(--wp--preset--font-family--kanit, Kanit, sans-serif);
  font-style: normal; font-weight: 600; font-size: 19px; line-height: 1.4;
  color: #f6f7f8; margin: 0 0 10px;
}
.s14-kontakt-avail p { font-size: 14.5px; line-height: 1.6; color: #8fa3b5; margin: 0; }
@keyframes s14ktpulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }

/* --- Kontaktseite: Anliegen-Kacheln ------------------------------------
   Ersetzt die alte Linkliste „Vielleicht hilft das" und die beiden
   Mitmachen-Karten. Deren Text steht jetzt in den ausklappbaren
   Erklaerungen — die Seite wurde dadurch rund ein Drittel kuerzer. */
.s14-anliegen { padding-top: 44px; }
.s14-anliegen-titel {
  font-size: 12px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--wp--preset--color--schiefer, #4a6178); margin: 0 0 16px;
}
.s14-anl-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 14px; }
.s14-anl-kachel {
  display: block; width: 100%; text-align: left; cursor: pointer;
  font-family: inherit; color: inherit;
  background: #fff; border: 1px solid #e8eaec; border-radius: 14px; padding: 22px 22px 20px;
  box-shadow: 0 1px 2px rgba(16, 23, 31, 0.03);
  transition: border-color 0.18s ease, box-shadow 0.22s ease, transform 0.22s ease;
}
.s14-anl-kachel:hover { border-color: #cfd7dd; box-shadow: 0 14px 30px rgba(16, 23, 31, 0.08); transform: translateY(-2px); }
.s14-anl-kachel:focus-visible { outline: 2px solid var(--wp--preset--color--signalrot, #e0241b); outline-offset: 3px; }
.s14-anl-kachel.ist-aktiv { border-color: var(--wp--preset--color--signalrot, #e0241b); box-shadow: 0 14px 34px rgba(224, 36, 27, 0.14); }
.s14-anl-ico {
  width: 38px; height: 38px; border-radius: 10px; background: #fdeceb;
  color: var(--wp--preset--color--signalrot, #e0241b);
  display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px;
}
.s14-anl-kachel.ist-aktiv .s14-anl-ico { background: var(--wp--preset--color--signalrot, #e0241b); color: #fff; }
.s14-anl-kachel h3 {
  font-family: var(--wp--preset--font-family--kanit, Kanit, sans-serif);
  font-weight: 700; font-size: 17px; line-height: 1.2; color: var(--wp--preset--color--navy, #1d3247); margin: 0 0 6px;
}
.s14-anl-kurz { font-size: 13.5px; line-height: 1.55; color: #9aa7b1; margin: 0; }
.s14-anl-mehr {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
  font-size: 12.5px; font-weight: 600; color: var(--wp--preset--color--signalrot, #e0241b);
}
.s14-anl-mehr svg { transition: transform 0.34s cubic-bezier(0.4, 0, 0.2, 1); }
.s14-anl-kachel.ist-aktiv .s14-anl-mehr svg { transform: rotate(180deg); }

/* Huelle = das, was rollt. Hoehe setzt s14-kontakt.js INLINE; hier steht nur
   der Uebergang. display muss block bleiben — bei inline greifen overflow und
   max-height nicht und scrollHeight ist immer 0 (Fund 07.08.2026). */
.s14-anl-huelle { display: block; overflow: hidden; max-height: 0; transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.s14-anl-text[hidden] { display: none; }
.s14-anl-text {
  margin-top: 14px; background: #fff; border: 1px solid #e8eaec;
  border-left: 3px solid var(--wp--preset--color--signalrot, #e0241b);
  border-radius: 12px; padding: 26px 28px;
}
.s14-anl-text h3 {
  font-family: var(--wp--preset--font-family--kanit, Kanit, sans-serif);
  font-size: 19px; font-weight: 700; color: var(--wp--preset--color--navy, #1d3247); margin: 0 0 10px;
}
.s14-anl-text p { margin: 0 0 12px; font-size: 15px; line-height: 1.68; color: var(--wp--preset--color--schiefer, #4a6178); max-width: 74ch; }
.s14-anl-text ul { margin: 0 0 14px; padding-left: 20px; color: var(--wp--preset--color--schiefer, #4a6178); font-size: 14.5px; line-height: 1.7; }
.s14-anl-text li { margin-bottom: 5px; }
.s14-anl-sprung {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 4px;
  padding: 11px 20px; border-radius: 8px; border: 0; cursor: pointer;
  font-family: inherit; font-weight: 600; font-size: 14.5px; color: #fff; text-decoration: none;
  background: linear-gradient(180deg, #ec3a30 0%, #d31d14 100%);
  box-shadow: 0 8px 18px rgba(211, 29, 20, 0.22);
}
.s14-anl-sprung:hover { filter: brightness(1.05); }

/* --- Kontaktseite: Rechtliches in der Seitenspalte --------------------- */
.s14-recht-karte {
  background: #fff; border: 1px solid #e8eaec; border-radius: 16px;
  padding: 22px 24px; box-shadow: 0 1px 2px rgba(16, 23, 31, 0.03);
}
.s14-recht-titel {
  font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--wp--preset--color--schiefer, #4a6178); margin: 0 0 12px;
}
.s14-recht-liste { display: flex; flex-direction: column; gap: 2px; }
.s14-recht-liste a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 12px; margin: 0 -6px; border-radius: 8px;
  text-decoration: none; color: var(--wp--preset--color--navy, #1d3247);
  font-size: 14.5px; font-weight: 600;
}
.s14-recht-liste a:hover { background: #f4f6f5; color: var(--wp--preset--color--signalrot, #e0241b); }
.s14-recht-fuss { border-top: 1px solid #eef1f0; margin-top: 14px; padding-top: 14px; font-size: 12.5px; line-height: 1.6; color: #9aa7b1; }

/* --- Rechtsfenster (Overlay) ------------------------------------------ */
.s14-rechtsfenster {
  border: 0; padding: 0; background: transparent;
  max-width: 820px; width: calc(100% - 40px); max-height: min(84vh, 860px);
}
.s14-rechtsfenster::backdrop { background: rgba(12, 18, 25, 0.62); }
.s14-rf-karte {
  background: #fff; border-radius: 16px; overflow: hidden;
  box-shadow: 0 30px 70px rgba(16, 23, 31, 0.34);
  display: flex; flex-direction: column; max-height: min(84vh, 860px);
}
.s14-rf-kopf { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 26px; border-bottom: 1px solid #eef1f0; flex: 0 0 auto; }
.s14-rf-kopf h2 {
  font-family: var(--wp--preset--font-family--kanit, Kanit, sans-serif);
  font-size: 21px; font-weight: 700; color: var(--wp--preset--color--navy, #1d3247); margin: 0;
}
.s14-rf-zu {
  border: 1px solid #e8eaec; background: #fff; border-radius: 8px; cursor: pointer;
  width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--wp--preset--color--schiefer, #4a6178); flex: 0 0 auto;
}
.s14-rf-zu:hover { background: var(--wp--preset--color--basis, #f6f7f8); color: var(--wp--preset--color--signalrot, #e0241b); }
.s14-rf-koerper { padding: 26px; overflow: auto; font-size: 14.5px; line-height: 1.7; color: var(--wp--preset--color--schiefer, #4a6178); }
.s14-rf-koerper h1, .s14-rf-koerper h2, .s14-rf-koerper h3 { font-size: 16px; font-weight: 700; color: var(--wp--preset--color--navy, #1d3247); margin: 22px 0 8px; }
.s14-rf-koerper > *:first-child { margin-top: 0; }
.s14-rf-laedt { color: #9aa7b1; }
.s14-rf-fuss {
  padding: 16px 26px; border-top: 1px solid #eef1f0; background: var(--wp--preset--color--basis, #f6f7f8);
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
.s14-rf-fuss a { font-size: 13.5px; font-weight: 600; color: var(--wp--preset--color--signalrot, #e0241b); text-decoration: none; }
.s14-rf-fuss a:hover { text-decoration: underline; }
.s14-rf-fuss span { font-size: 12.5px; color: #9aa7b1; }

@media (prefers-reduced-motion: reduce) {
  .s14-anl-huelle, .s14-anl-mehr svg, .s14-anl-kachel { transition: none; }
}
.s14-kontakt-disclaimer {
  font-size: 13.5px; line-height: 1.6; color: #9aa7b1;
  margin: 26px 0 0; padding-bottom: 88px; text-align: center;
}

@media (max-width: 880px) {
  .s14-kontakt { padding: 0 24px; }
  .s14-kontakt-head { padding-top: 112px; }
  .s14-kontakt-grid { grid-template-columns: 1fr; }
  .s14-kontakt-row2 { grid-template-columns: 1fr; }
  .s14-anl-text { padding: 22px 20px; }
  .s14-rechtsfenster { width: calc(100% - 24px); }
}

/* Kein Block-Abstand über dem Seiteninhalt: WordPress' Standard-blockGap (24px)
   schob den Hero unter dem transparenten fixen Header nach unten — die helle
   Seitenfläche schien als weißer Streifen durch (Fund 2026-07-27, Daniel). */
body .wp-site-blocks > main { margin-block-start: 0; }

/* Kein Block-Abstand innerhalb der Header-Zeile: WordPress' blockGap gab
   Navigation und Login-Button margin-top 24px — sie hingen dadurch unter
   der Logo-Mitte (Desktop wie Mobil). */
body .s14-header-row > * { margin-block-start: 0; }

/* Dunkler Seiten-Canvas: iOS Safari färbt die Statusleisten-Zone nach dem
   html-Hintergrund — vorher schien dort Hellgrau durch. Auch Overscroll
   oben/unten ist damit dunkel (Footer ist ohnehin Navy). */
html { background-color: #10171f; }

/* --- Modell-Grid: Baureihen-Filter (CD-Baustein "Nach Baureihe gefiltert") --- */
.s14-mg-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 30px; flex-wrap: wrap; }
.s14-mg-h { font-family: Kanit, sans-serif; font-weight: 700; font-size: clamp(32px, 3.6vw, 44px); line-height: 1.04; margin: 0; color: #1d3247; }
.s14-alink { font-size: 15px; font-weight: 600; color: #4a6178; text-decoration: none; border-bottom: 1px solid rgba(74, 97, 120, 0.3); padding-bottom: 3px; }
#s14-modeltabs { display: flex; gap: 28px; align-items: center; border-bottom: 1px solid #e2e5e8; margin-bottom: 22px; overflow-x: auto; }
.s14-scroll { scrollbar-width: thin; scrollbar-color: rgba(74, 97, 120, 0.35) transparent; }
.s14-scroll::-webkit-scrollbar { height: 8px; }
.s14-scroll::-webkit-scrollbar-track { background: rgba(16, 23, 31, 0.04); }
.s14-scroll::-webkit-scrollbar-thumb { background: rgba(74, 97, 120, 0.3); border-radius: 99px; }
.s14-mcard:hover { border-color: #e0241b; box-shadow: 0 6px 18px rgba(224, 36, 27, 0.12); transform: translateY(-2px); }

/* --- Aus der Garage (CD-Slider "Was uns gerade beschäftigt") --- */
.s14-garage { margin-top: 90px; padding: 80px 0 90px; background: linear-gradient(180deg, #f1f3f4 0%, #e9edee 100%); border-top: 1px solid #e2e5e8; border-bottom: 1px solid #e2e5e8; }
.s14-garage-head { max-width: 1320px; margin: 0 auto; padding: 0 40px 36px; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.s14-garage-lead { max-width: 340px; font-size: 15px; line-height: 1.6; color: #4a6178; margin: 0; }
.s14-garage-rail { display: flex; gap: 24px; overflow-x: auto; padding: 8px 40px 16px max(40px, calc((100vw - 1320px) / 2 + 40px)); scroll-snap-type: x mandatory; }
.s14-garage-item { flex: 0 0 auto; width: 480px; max-width: 80vw; scroll-snap-align: start; }
.s14-garage-card { position: relative; aspect-ratio: 3 / 2; border-radius: 7px; overflow: hidden; background: #dfe3e6; box-shadow: 0 14px 36px rgba(16, 23, 31, 0.12); }
.s14-garage-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.s14-garage-badge { position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: baseline; gap: 9px; padding: 9px 14px; border-radius: 5px; background: rgba(12, 18, 25, 0.62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.s14-garage-code { font-family: Kanit, sans-serif; font-style: italic; font-weight: 800; font-size: 18px; color: #fff; }
.s14-garage-name { font-size: 13px; font-weight: 500; color: #cfe0d8; }
@media (max-width: 880px) {
  .s14-garage { margin-top: 60px; padding: 56px 0 64px; }
  .s14-garage-head { padding: 0 24px 26px; }
  .s14-garage-rail { padding-left: 24px; padding-right: 24px; gap: 16px; }
}

/* --- Hero-Parallax: Bild scrollt langsamer als der Text (Tiefenwirkung) --- */
.s14-hero .wp-block-cover__image-background,
.s14-hero img.wp-block-cover__image-background { will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  .s14-hero .wp-block-cover__image-background { transform: none !important; }
}

/* --- Aus der Redaktion: Feature + 3 Karten (CD-Layout) --- */
.s14-mag-head { margin-bottom: 36px; }
.s14-twocol { display: grid; grid-template-columns: 1.5fr 1fr; gap: 28px; align-items: stretch; }
.s14-feature { position: relative; display: block; border-radius: 8px; overflow: hidden; text-decoration: none; min-height: 460px; box-shadow: 0 16px 44px rgba(16, 23, 31, 0.12); transition: transform 0.2s ease; }
.s14-feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.s14-feature:hover { transform: translateY(-3px); }
.s14-feature-shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(8, 12, 17, 0.94) 0%, rgba(8, 12, 17, 0.4) 42%, rgba(8, 12, 17, 0) 72%); }
.s14-feature-text { position: absolute; left: 0; bottom: 0; padding: 34px 34px 32px; display: block; }
.s14-feature-cat { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #ff6a60; margin-bottom: 14px; }
.s14-feature-title { display: block; font-family: Kanit, sans-serif; font-weight: 700; font-size: clamp(26px, 3vw, 38px); line-height: 1.08; color: #fff; max-width: 560px; text-wrap: pretty; }
.s14-feature-meta { display: block; margin-top: 16px; font-size: 14px; font-weight: 500; color: #a9bccb; }
.s14-acards { display: flex; flex-direction: column; gap: 16px; }
.s14-acard { display: flex; border: 1px solid #e8eaec; border-radius: 6px; overflow: hidden; background: #fff; text-decoration: none; flex: 1; min-height: 0; box-shadow: 0 1px 2px rgba(16, 23, 31, 0.03); transition: all 0.18s ease; }
.s14-acard:hover { border-color: #e0241b; box-shadow: 0 6px 18px rgba(224, 36, 27, 0.12); }
.s14-acard-img { flex: 0 0 40%; align-self: stretch; overflow: hidden; background: #e8eaec; display: block; }
.s14-acard-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.s14-acard-body { padding: 18px 22px; display: flex; flex-direction: column; gap: 9px; justify-content: center; }
.s14-acard-cat { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #e0241b; }
.s14-acard-title { font-family: Kanit, sans-serif; font-weight: 600; font-size: 19px; line-height: 1.18; color: #1d3247; text-wrap: pretty; }
.s14-empty { color: #4a6178; }
@media (max-width: 880px) {
  .s14-twocol { grid-template-columns: 1fr; }
  .s14-feature { min-height: 320px; }
  .s14-feature-text { padding: 24px; }
}

/* ============================================================
   Feinschliff-Paket (Daniel-QA 2026-07-28)
   ============================================================ */

/* iOS-Statusleiste: Safari tastet die BODY-Farbe ab, nicht html.
   Der helle Basiston wandert deshalb eine Ebene tiefer. */
body { background-color: #10171f; }
.wp-site-blocks { background-color: var(--wp--preset--color--basis, #f6f7f8); }

/* --- Wissen-Raster: 5 nebeneinander → 3+2 → 1. Nie 4+1 oder 2+2+1. --- */
.s14-ressorts-grid { grid-template-columns: repeat(5, 1fr); transition: gap 0.35s ease; }
.s14-ressort-cell {
  padding: clamp(22px, 2.4vw, 34px) clamp(18px, 1.9vw, 26px) clamp(20px, 2.2vw, 30px);
  transition: background 0.3s ease, padding 0.35s ease, border-color 0.3s ease;
}
.s14-ressort-num { font-size: clamp(26px, 2.4vw, 34px); transition: font-size 0.35s ease; }
.s14-ressort-cell h3 { font-size: clamp(17px, 1.5vw, 21px); transition: font-size 0.35s ease; }
.s14-ressort-cell p { font-size: clamp(13px, 1.05vw, 14px); transition: font-size 0.35s ease; }
@media (max-width: 1180px) { .s14-ressorts-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .s14-ressorts-grid { grid-template-columns: 1fr; } }

/* --- Mobil: Abschnitte enger, weniger Leerlauf --- */
@media (max-width: 880px) {
  .s14-section { padding-top: 52px; padding-bottom: 24px; }
  .s14-mg-head, .s14-mag-head { margin-bottom: 22px; }
  .s14-magazin { padding-top: 44px; }
}

/* --- Reveal: erste Bildschirmseite sofort sichtbar, kein graues Feld --- */
.s14-reveal { transition: opacity 0.45s ease, transform 0.45s ease; }
@media (max-width: 880px) { .s14-reveal { transform: translateY(10px); } }

/* --- Modellkarten: roter Hover-Rahmen schlaegt die Inline-Styles aus dem JS,
       und die Scroll-Reihen bekommen oben Luft, damit der Hover-Versatz
       (translateY -2px) nicht abgeschnitten wird. --- */
.s14-mcard { transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; }
.s14-mcard:hover {
  border-color: #e0241b !important;
  box-shadow: 0 6px 18px rgba(224, 36, 27, 0.14) !important;
  transform: translateY(-2px);
}
#s14-modelgrid .s14-scroll { padding-top: 6px; }
#s14-modelgrid > div > .s14-scroll { padding-top: 6px; }

/* Hero-Headline: beide Zeilen bleiben je einzeilig — auf schmalen Displays
   skaliert stattdessen die Schriftgroesse mit (kein Umbruch nach "Von"). */
.s14-nowrap { white-space: nowrap; }
@media (max-width: 880px) {
  .s14-hero-title { font-size: clamp(26px, 7.6vw, 44px); }
}
@media (max-width: 420px) {
  .s14-hero-title { font-size: clamp(23px, 7.2vw, 30px); }
}

/* ============================================================
   Über uns (CD-Seite)
   ============================================================ */
.s14-ab { padding-top: 80px; }
.s14-ab h2 { font-family: Kanit, sans-serif; font-weight: 700; line-height: 1.06; color: #1d3247; margin: 0; }
.s14-ab-kopf { max-width: 820px; margin: 0 auto; padding: 48px 32px 0; }
.s14-ab-brotkrumen { font-size: 13.5px; color: #7c8b97; margin-bottom: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.s14-ab-brotkrumen a { color: #7c8b97; text-decoration: none; }
.s14-ab-brotkrumen a:hover { color: #e0241b; }
.s14-ab-hier { color: #4a6178; }
.s14-ab-h1 {
  font-family: Kanit, sans-serif; font-style: italic; font-weight: 800;
  font-size: clamp(30px, 5.6vw, 68px); line-height: 0.98; letter-spacing: -0.02em;
  margin: 0 0 24px; color: #1d3247;
}
.s14-ab-h1 .s14-rot { color: #e0241b; }
.s14-ab-lead { font-size: clamp(17px, 1.7vw, 20px); line-height: 1.6; color: #4a6178; margin: 0; max-width: 660px; text-wrap: pretty; }
.s14-ab-warum { max-width: 720px; margin: 0 auto; padding: 56px 32px 0; }
.s14-ab-warum h2 { font-size: clamp(26px, 3vw, 34px); line-height: 1.1; margin-bottom: 20px; }
.s14-ab-warum p { font-size: clamp(16px, 1.6vw, 18px); line-height: 1.75; color: #2c3e4f; margin: 0 0 20px; text-wrap: pretty; }
.s14-ab-warum p:last-child { margin-bottom: 0; }

.s14-ab-heritage { margin-top: 64px; background: linear-gradient(165deg, #1d3247 0%, #16273a 55%, #0c1219 100%); color: #c6d2dc; }
.s14-ab-heritage-inner { max-width: 820px; margin: 0 auto; padding: 52px 32px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.s14-ab-heritage-inner img { width: 56px; height: 56px; display: block; opacity: 0.92; flex: 0 0 auto; }
.s14-ab-heritage-inner > div { flex: 1; min-width: 260px; }
.s14-ab-heritage-kicker { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #6f8598; margin: 0 0 8px; }
.s14-ab-heritage-satz { font-family: Kanit, sans-serif; font-weight: 600; font-size: clamp(18px, 2.2vw, 23px); line-height: 1.4; color: #f6f7f8; margin: 0; }
.s14-ab-heritage-sub { font-size: 14.5px; line-height: 1.6; color: #8fa3b5; margin: 12px 0 0; }

.s14-ab-prinzipien, .s14-ab-team, .s14-ab-mitmachen { max-width: 1320px; margin: 0 auto; padding: 80px 32px 0; }
.s14-ab-zentriert { text-align: center; margin-bottom: 44px; }
.s14-ab-prinzipien h2, .s14-ab-team h2, .s14-ab-fuhrpark h2 { font-size: clamp(28px, 3.4vw, 40px); }
.s14-ab-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 22px; }
.s14-ab-karte { background: #fff; border: 1px solid #e8eaec; border-radius: 12px; padding: 32px 28px; box-shadow: 0 1px 2px rgba(16, 23, 31, 0.03); }
.s14-ab-karte h3 { font-family: Kanit, sans-serif; font-weight: 700; font-size: 20px; line-height: 1.15; margin: 0 0 10px; color: #1d3247; }
.s14-ab-karte p { font-size: 15.5px; line-height: 1.65; color: #4a6178; margin: 0; }
.s14-ab-icon {
  width: 46px; height: 46px; border-radius: 10px; background: #f4f6f5; border: 1px solid #e3e8e5;
  display: flex; align-items: center; justify-content: center; color: #e0241b; margin-bottom: 18px; font-size: 20px;
}
.s14-ab-teamkopf { margin-bottom: 38px; }
.s14-ab-teamkopf h2 { margin-bottom: 12px; }
.s14-ab-teamlead { font-size: 16px; line-height: 1.6; color: #4a6178; margin: 0; max-width: 620px; }
.s14-ab-avatar {
  width: 64px; height: 64px; border-radius: 50%;
  background: repeating-linear-gradient(135deg, #e7ebed 0 9px, #e1e6e8 9px 18px);
  display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
}
.s14-ab-avatar span { font-family: monospace; font-size: 9px; color: #9aa7b1; text-align: center; line-height: 1.3; }
.s14-ab-rolle { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #e0241b; margin: 0 0 6px; }
.s14-ab-name { font-family: Kanit, sans-serif; font-weight: 700; font-size: 18px; color: #1d3247; margin: 0; }
.s14-ab-vita { font-size: 14.5px; line-height: 1.6; color: #4a6178; margin: 8px 0 0; }

.s14-ab-fuhrpark { margin-top: 80px; background: linear-gradient(180deg, #f1f3f4 0%, #e9edee 100%); border-top: 1px solid #e2e5e8; border-bottom: 1px solid #e2e5e8; padding: 64px 0; }
.s14-ab-fuhrparkkopf { max-width: 1320px; margin: 0 auto 34px; padding: 0 32px; }
.s14-ab-fuhrparkkopf h2 { margin-bottom: 12px; }
.s14-ab-rail { display: flex; gap: 20px; overflow-x: auto; padding: 4px 32px 14px; scroll-snap-type: x mandatory; }
.s14-ab-fzg { flex: 0 0 auto; width: 320px; max-width: 76vw; scroll-snap-align: start; }
.s14-ab-fzg-bild { aspect-ratio: 3 / 2; border-radius: 8px; overflow: hidden; background: #e3e7e9; }
.s14-ab-fzg-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.s14-ab-fzg-bild.is-leer { background: repeating-linear-gradient(135deg, #e3e7e9 0 12px, #dde2e4 12px 24px); display: flex; align-items: center; justify-content: center; }
.s14-ab-fzg-bild.is-leer span { font-family: monospace; font-size: 11px; color: #9aa7b1; }
.s14-ab-fzg-text { display: flex; align-items: baseline; gap: 10px; margin: 13px 0 0; }
.s14-ab-fzg-code { font-family: Kanit, sans-serif; font-style: italic; font-weight: 800; font-size: 18px; color: #1d3247; }
.s14-ab-fzg-name { font-size: 14px; font-weight: 500; color: #4a6178; }

.s14-ab-mitmachen { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; padding-bottom: 20px; }
.s14-ab-mm { border-radius: 12px; padding: 34px 32px; }
.s14-ab-mm h3 { font-family: Kanit, sans-serif; font-weight: 700; font-size: 23px; line-height: 1.15; margin: 0 0 12px; }
.s14-ab-mm p { font-size: 15.5px; line-height: 1.65; margin: 0 0 20px; }
.s14-ab-mm-navy { background: #1d3247; color: #e6edf2; }
.s14-ab-mm-navy h3 { color: #fff; }
.s14-ab-mm-navy p { color: #aebfcd; }
.s14-ab-mm-hell { background: #fff; border: 1px solid #e8eaec; box-shadow: 0 1px 2px rgba(16, 23, 31, 0.03); }
.s14-ab-mm-hell h3 { color: #1d3247; }
.s14-ab-mm-hell p { color: #4a6178; }
.s14-ab-mm-kicker { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #ff6a60; margin: 0 0 12px; }
.s14-ab-mm-kicker-rot { color: #e0241b; }
.s14-ab-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 8px;
  background: linear-gradient(180deg, #ec3a30, #d31d14); color: #fff; font-weight: 600; font-size: 15px; text-decoration: none;
}
.s14-ab-btn-hell { background: #1d3247; }
@media (max-width: 880px) {
  .s14-ab-kopf, .s14-ab-warum { padding-left: 24px; padding-right: 24px; }
  .s14-ab-prinzipien, .s14-ab-team, .s14-ab-mitmachen { padding: 52px 24px 0; }
  .s14-ab-fuhrpark { margin-top: 52px; padding: 48px 0; }
  .s14-ab-fuhrparkkopf, .s14-ab-rail { padding-left: 24px; padding-right: 24px; }
}

/* --- Über uns: Rollen-Liste statt Personenkarten --- */
.s14-ab-rollen { display: grid; gap: 2px; background: #e2e5e8; border: 1px solid #e2e5e8; border-radius: 12px; overflow: hidden; }
.s14-ab-rolle-zeile { display: flex; gap: 22px; align-items: flex-start; padding: 26px 28px; background: #fff; }
.s14-ab-rolle-nr {
  flex: 0 0 auto; font-family: Kanit, sans-serif; font-style: italic; font-weight: 800;
  font-size: 26px; line-height: 1; color: #cdd6dd; min-width: 46px;
}
.s14-ab-rolle-zeile h3 { font-family: Kanit, sans-serif; font-weight: 700; font-size: 19px; line-height: 1.15; margin: 0 0 8px; color: #1d3247; }
.s14-ab-rolle-zeile p { font-size: 15.5px; line-height: 1.65; color: #4a6178; margin: 0; }
@media (max-width: 620px) {
  .s14-ab-rolle-zeile { gap: 14px; padding: 22px 20px; }
  .s14-ab-rolle-nr { font-size: 21px; min-width: 34px; }
}

/* --- Mobiles Menü: Overlay im Schema-B-Dunkel statt WP-Standardweiß --- */
@media (max-width: 880px) {
  .s14-nav .wp-block-navigation__responsive-container-open {
    color: #e6edf2; padding: 8px; border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.24);
  }
  .s14-page-light .s14-header:not(.is-scrolled) .wp-block-navigation__responsive-container-open { color: #e6edf2; }
}
.s14-nav .wp-block-navigation__responsive-container.is-menu-open {
  background: linear-gradient(165deg, #16202b 0%, #10171f 60%, #0c1219 100%) !important;
  padding: 26px 24px 40px !important;
}
.s14-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  padding-top: 18px;
}
.s14-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  color: #e6edf2 !important;
  font-family: Kanit, sans-serif; font-weight: 700; font-size: 26px; line-height: 1.25;
  padding: 9px 0;
}
.s14-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  font-family: Inter, sans-serif; font-weight: 600; font-size: 16px; color: #a9bccb !important;
}
.s14-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
  color: #e6edf2; top: 22px; right: 20px;
}
.s14-nav .wp-block-navigation__responsive-container.is-menu-open .s14-menu-bald > .wp-block-navigation-item__content::after {
  content: "bald"; margin-left: 10px; font-family: Inter, sans-serif; font-size: 11px;
  font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #ff6a60;
  border: 1px solid rgba(255, 106, 96, 0.5); border-radius: 999px; padding: 3px 9px; vertical-align: middle;
}

/* ==========================================================================
   MODELLSEITE — Baureihen-Vorlage (Beispiel E30)
   Struktur: Hero · Faktenleiste · klebriges Inhaltsverzeichnis · Artikel.
   Alle Werte 1:1 aus dem CD-Entwurf „BMW E30 Modellseite".
   ========================================================================== */

html { scroll-behavior: smooth; scroll-padding-top: 100px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body .s14-ms { margin-block-start: 0; }
.s14-ms { color: #1d3247; }

/* --- Kopf ----------------------------------------------------------------
   Bühne mit Versatz: Baureihen-Code als Schattenzeichen, Text links, Foto
   rechts über den Rand hinaus. Das Foto ist ein gewöhnliches Querformat und
   wird nie überschrieben — deshalb genügt jeder ordentliche 3:2-Aufnahme.
   -------------------------------------------------------------------------- */
.s14-ms-kopf { position: relative; background: #11202f; overflow: hidden; padding: 62px 0 76px; }
.s14-ms-schatten {
  position: absolute; left: -0.06em; top: 26px; z-index: 1; pointer-events: none;
  font-family: Kanit, sans-serif; font-style: italic; font-weight: 800;
  font-size: clamp(150px, 19vw, 268px); line-height: 0.78; letter-spacing: -0.04em;
  color: #fff; opacity: 0.045; white-space: nowrap;
}
.s14-ms-kopfgrid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 0 46px; align-items: end;
  padding-left: max(32px, calc((100% - 1320px) / 2 + 32px));
}
.s14-ms-kopftext { padding-bottom: 40px; }
.s14-ms-kicker {
  display: inline-flex; align-items: center; gap: 11px; margin: 0 0 20px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #9fb2c2;
}
.s14-ms-strich { width: 26px; height: 2px; background: #e0241b; display: block; flex: 0 0 auto; }
/* Lange Modellnamen (z. B. „BMW M3 E30 Europameister") kleiner setzen,
   damit der Titel nicht hinter das Kopfbild laeuft. Klasse kommt aus dem Pattern. */
.s14-ms-kopftext h1.s14-ms-h1-lang {
  font-size: clamp(30px, 3.4vw, 54px); line-height: 1.02;
}

.s14-ms-kopftext h1 {
  font-family: Kanit, sans-serif; font-style: italic; font-weight: 800;
  font-size: clamp(44px, 5.4vw, 84px); line-height: 0.95; letter-spacing: -0.02em;
  margin: 0; color: #f6f7f8;
}
.s14-ms-claim {
  margin: 20px 0 0; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.55;
  color: #aebfcd; max-width: 44ch; text-wrap: pretty;
}
.s14-ms-kopfbild .s14-figur { margin: 0; }
/* Eckig, nicht gerundet — die Kachelrundung aus dem Bildnachweis-Block gilt hier
   nicht: das Bild ist rechts angeschnitten, eine runde Ecke waere halbherzig. */
.s14-ms-kopfbild .s14-figur img {
  display: block; width: 100%; height: auto; border-radius: 0;
  box-shadow: 0 30px 62px -26px rgba(0, 0, 0, 0.8);
}

/* --- Faktenleiste (überlappt die Kante zwischen Bühne und hellem Bereich) -- */
.s14-ms-faktenwrap { max-width: 1320px; margin: 0 auto; padding: 0 32px; }
.s14-ms-fakten {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px;
  background: #e2e5e8; border: 1px solid #e2e5e8; border-radius: 8px; overflow: hidden;
  margin-top: -42px; position: relative; z-index: 5;
  box-shadow: 0 20px 50px rgba(16,23,31,0.14);
}
.s14-ms-fakten > div { background: #fff; padding: 20px 22px; }
.s14-ms-flabel { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #9aa7b1; margin: 0 0 8px; }
.s14-ms-fwert { font-family: Kanit, sans-serif; font-weight: 700; font-size: 22px; line-height: 1.15; color: #1d3247; margin: 0; }
.s14-ms-frot { font-style: italic; font-weight: 800; color: #e0241b; }
.s14-ms-fsub { font-size: 12px; color: #4a6178; margin: 4px 0 0; line-height: 1.4; }
.s14-ms-fsub.s14-ms-unbestaetigt { font-size: 11px; color: #9aa7b1; }

/* --- Layout: Inhaltsverzeichnis + Artikel -------------------------------- */
.s14-ms-layout {
  max-width: 1320px; margin: 34px auto 0; padding: 24px 32px 60px;
  display: grid; grid-template-columns: 244px 1fr; gap: 56px; align-items: start;
}
.s14-ms-toc { position: sticky; top: 88px; align-self: start; }
.s14-ms-toclabel {
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: #9aa7b1; margin: 0 0 12px; padding-left: 16px;
}
.s14-ms-tocbtn {
  display: none; width: 100%; align-items: center; justify-content: space-between;
  background: #fff; border: 1px solid #e8eaec; border-radius: 8px; padding: 14px 18px;
  font-family: Kanit, sans-serif; font-weight: 700; font-size: 15px; color: #1d3247;
  cursor: pointer; margin-bottom: 10px;
}
.s14-ms-tocbtn::after { content: "▾"; color: #e0241b; transition: transform 0.2s ease; }
.s14-ms-toc.is-open .s14-ms-tocbtn::after { transform: rotate(180deg); }
.s14-ms-toc nav { border-left: 1px solid #e2e5e8; display: flex; flex-direction: column; }
.s14-ms-toc nav a {
  display: block; padding: 8px 0 8px 16px; margin-left: -1px;
  border-left: 2px solid transparent; color: #7c8b97; font-size: 14px; font-weight: 500;
  text-decoration: none; line-height: 1.3; transition: border-color 0.15s ease, color 0.15s ease;
}
.s14-ms-toc nav a span { font-variant-numeric: tabular-nums; opacity: 0.6; font-size: 12px; margin-right: 9px; }
.s14-ms-toc nav a:hover { color: #1d3247; }
.s14-ms-toc nav a.is-active { border-left-color: #e0241b; color: #1d3247; font-weight: 700; }

/* --- Artikeltypografie --------------------------------------------------- */
.s14-ms-artikel { min-width: 0; }
.s14-ms-artikel > section { scroll-margin-top: 100px; }
.s14-ms-artikel > section + section { margin-top: 70px; }
.s14-ms-artikel h2 {
  font-family: Kanit, sans-serif; font-weight: 700; font-size: clamp(28px, 3vw, 36px);
  line-height: 1.08; margin: 0 0 22px; color: #1d3247; max-width: 740px;
}
.s14-ms-artikel > section:first-child h2 { font-size: clamp(30px, 3.4vw, 40px); }
.s14-ms-artikel p { font-size: 17px; line-height: 1.7; color: #2c3e4f; margin: 0 0 18px; max-width: 740px; text-wrap: pretty; }
.s14-ms-artikel a { color: #e0241b; font-weight: 600; text-decoration: none; }
.s14-ms-artikel a:hover { text-decoration: underline; }
.s14-ms-artikel figure { margin: 8px 0 0; }
.s14-ms-artikel figure img { width: 100%; height: auto; border-radius: 8px; display: block; }
.s14-ms-artikel figcaption { font-size: 13px; color: #9aa7b1; margin-top: 10px; }
.s14-ms-artikel blockquote {
  margin: 26px 0 0; padding: 4px 0 4px 22px; border-left: 3px solid #e0241b;
  font-family: Kanit, sans-serif; font-style: italic; font-weight: 600;
  font-size: 22px; line-height: 1.4; color: #1d3247; max-width: 700px;
}
.s14-ms-artikel .s14-ms-abschnitt {
  font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: #e0241b; margin: 0 0 12px;
}

/* --- Zeitstrahl ---------------------------------------------------------- */
.s14-ms-zeitstrahl { list-style: none; margin: 0; padding: 0; border-left: 2px solid #e2e5e8; }
.s14-ms-zeitstrahl li { position: relative; padding: 0 0 22px 28px; }
.s14-ms-zeitstrahl li::before {
  content: ""; position: absolute; left: -6px; top: 4px; width: 10px; height: 10px;
  border-radius: 50%; background: #e0241b; border: 2px solid #f6f7f8;
}
.s14-ms-jahr { display: block; font-family: Kanit, sans-serif; font-style: italic; font-weight: 800; font-size: 19px; color: #1d3247; }
.s14-ms-ereignis { display: block; font-size: 15.5px; line-height: 1.55; color: #4a6178; }

/* --- Quellen-Pille (Prüfstand) ------------------------------------------- */
.s14-ms-artikel .s14-ms-quelle {
  display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: #4a6178;
  background: #eef3f0; border: 1px solid #d8e6df; border-radius: 999px;
  padding: 4px 11px; margin: 0 0 16px;
}
.s14-ms-punkt { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.s14-ms-geprueft { background: #4a7a63; }

/* --- Aufklapp-Datenblätter ----------------------------------------------- */
.s14-ms-acc { background: #fff; border: 1px solid #e8eaec; border-radius: 8px; }
.s14-ms-artikel > section > .s14-ms-acc { margin-top: 16px; }
.s14-ms-acc > summary {
  cursor: pointer; padding: 14px 16px; font-family: Kanit, sans-serif; font-weight: 700;
  font-size: 15px; color: #1d3247; display: flex; align-items: center;
  justify-content: space-between; gap: 14px; list-style: none;
}
.s14-ms-acc > summary::-webkit-details-marker { display: none; }
.s14-ms-acc > summary::after { content: "▾"; color: #e0241b; transition: transform 0.2s ease; flex: 0 0 auto; }
.s14-ms-acc[open] > summary::after { transform: rotate(180deg); }

/* --- Tabellen ------------------------------------------------------------ */
.s14-ms-tabelle { padding: 4px 16px 14px; }
.s14-ms-tabelle table { width: 100%; border-collapse: collapse; font-size: 14px; }
.s14-ms-tabelle tbody tr { border-top: 1px solid #eceff1; }
.s14-ms-tabelle tbody td { padding: 9px 4px; color: #1d3247; }
.s14-ms-tabelle table > tbody:first-child td:first-child { color: #9aa7b1; width: 46%; }

/* --- Datenliste im Technik-Akkordeon ------------------------------------- */
.s14-ms-daten { margin: 0; display: grid; grid-template-columns: 46% 1fr; font-size: 14px; line-height: 1.55; }
.s14-ms-daten dt,
.s14-ms-daten dd { margin: 0; padding: 9px 4px; border-top: 1px solid #eceff1; }
.s14-ms-daten dt { color: #9aa7b1; font-weight: 600; }
.s14-ms-daten dd { color: #1d3247; }
.s14-ms-daten dt:first-of-type,
.s14-ms-daten dt:first-of-type + dd { border-top: 0; }
.s14-ms-datennote { margin: 14px 0 0; font-size: 13px; line-height: 1.65; color: #6b7a87; }
.s14-ms-datennote + .s14-ms-datennote { margin-top: 8px; }
@media (max-width: 640px) {
  .s14-ms-daten { grid-template-columns: 1fr; }
  .s14-ms-daten dt { padding: 10px 4px 0; }
  .s14-ms-daten dd { padding: 2px 4px 10px; border-top: 0; }
}
.s14-ms-artikel .s14-ms-tabelle p { font-size: 14px; line-height: 1.7; color: #4a6178; margin: 0; }
.s14-ms-artikel .s14-ms-tabfuss { font-size: 11px; color: #9aa7b1; margin: 8px 0 0; }
.s14-ms-tabelle-breit { padding: 0 10px 12px; }
.s14-ms-tabelle-breit .s14-ms-tabrahmen { overflow-x: auto; border: 1px solid #e2e5e8; border-radius: 8px; }
.s14-ms-tabelle-breit table { font-size: 14.5px; min-width: 560px; }
.s14-ms-tabelle-breit thead tr { background: #1d3247; color: #fff; text-align: left; }
.s14-ms-tabelle-breit thead th { padding: 12px 16px; font-weight: 600; white-space: nowrap; }
.s14-ms-tabelle-breit tbody td { padding: 11px 16px; color: #4a6178; font-variant-numeric: tabular-nums; }
.s14-ms-tabelle-breit tbody td:first-child { font-family: Kanit, sans-serif; font-weight: 700; color: #1d3247; }

/* --- Hinweiskasten (redaktionell, immer sichtbar) ------------------------ */
.s14-ms-hinweis {
  background: #fff; border: 1px solid #e8eaec; border-left: 3px solid #e0241b;
  border-radius: 8px; padding: 22px 24px; margin: 0 0 22px; max-width: 740px;
}
.s14-ms-hinweis h3 { font-family: Kanit, sans-serif; font-weight: 700; font-size: 16px; color: #1d3247; margin: 0 0 12px; }
.s14-ms-hinweis ul { margin: 0; padding-left: 18px; font-size: 15.5px; line-height: 1.7; color: #2c3e4f; }
.s14-ms-hinweis li { margin: 0 0 4px; }

/* --- Motor-Blöcke -------------------------------------------------------- */
.s14-ms-motor { scroll-margin-top: 100px; margin-bottom: 14px; }
.s14-ms-artikel .s14-ms-motorkopf {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 10px;
  font-family: Kanit, sans-serif; font-weight: 700; font-size: 17px; color: #1d3247;
}
.s14-ms-badge { font-family: Inter, sans-serif; font-size: 11px; font-weight: 600; border-radius: 999px; padding: 3px 9px; }
.s14-ms-badge-gruen { color: #4a6178; background: #eef3f0; border: 1px solid #d8e6df; }
.s14-ms-badge-gelb { color: #8a6d3b; background: #f7f1e3; border: 1px solid #ead9b8; }
.s14-ms-artikel .s14-ms-motor > p { font-size: 15.5px; margin: 0 0 10px; }

/* --- Karten-Raster ------------------------------------------------------- */
.s14-ms-raster2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.s14-ms-raster3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.s14-ms-karte { background: #fff; border: 1px solid #e8eaec; border-radius: 8px; padding: 20px 22px; }
.s14-ms-karte h3 { font-family: Kanit, sans-serif; font-weight: 700; font-size: 17px; color: #1d3247; margin: 0 0 8px; }
.s14-ms-artikel .s14-ms-karte p { font-size: 15px; line-height: 1.6; color: #4a6178; margin: 0; }
.s14-ms-topkarte { background: #fff; border: 1px solid #e8eaec; border-radius: 8px; padding: 22px; }
.s14-ms-artikel .s14-ms-topname { font-family: Kanit, sans-serif; font-style: italic; font-weight: 800; font-size: 26px; color: #1d3247; margin: 0 0 6px; }
.s14-ms-artikel .s14-ms-topkarte p { font-size: 14px; line-height: 1.55; color: #4a6178; margin: 0 0 14px; }
.s14-ms-artikel .s14-ms-topfolgt { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #9aa7b1; margin: 0; }

/* --- Kaufberatung: Rost-Checkliste --------------------------------------- */
.s14-ms-rost { background: #fff; border: 1px solid #e8eaec; border-radius: 8px; padding: 8px; max-width: 740px; margin-bottom: 20px; }
.s14-ms-artikel .s14-ms-rost p {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border-bottom: 1px solid #f0f2f4; margin: 0; font-size: 15.5px; color: #2c3e4f;
}
.s14-ms-rost p:last-child { border-bottom: 0; }
.s14-ms-warn { width: 17px; height: 17px; border-radius: 4px; background: transparent; border: 1.5px solid #cdd6dd; }

/* --- Platzhalter (keine erfundenen Zahlen) ------------------------------- */
.s14-ms-platzhalter { background: #fff; border: 1px solid #e8eaec; border-radius: 8px; padding: 28px; max-width: 740px; }
.s14-ms-artikel .s14-ms-platzlabel {
  aspect-ratio: 2 / 1; border-radius: 6px; margin: 0;
  background: repeating-linear-gradient(135deg, #eef1f2 0 14px, #e8ecee 14px 28px);
  display: flex; align-items: center; justify-content: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: #9aa7b1;
}
.s14-ms-artikel .s14-ms-platzhalter p + p { font-size: 14px; color: #9aa7b1; margin: 14px 0 0; }

/* --- Quellenliste -------------------------------------------------------- */
.s14-ms-quellenliste { margin: 0; padding-left: 18px; font-size: 15.5px; line-height: 1.9; color: #4a6178; max-width: 740px; }
.s14-ms-quellenliste em { font-style: normal; font-size: 13.5px; color: #9aa7b1; }

/* --- Galerie ------------------------------------------------------------
   Zwei Spalten auf breiten Schirmen, ab 700 px einspaltig. Bewusst grosszuegig:
   Bei einem Fotografen ist die Galerie Inhalt, nicht Dekoration. */
.s14-ms-galerie {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px 26px; margin-top: 26px;
}
.s14-galeriebild { margin: 0; }
.s14-galeriebild .s14-lupe { display: block; position: relative; cursor: zoom-in; }
.s14-galeriebild img {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 2;
  object-fit: cover; object-position: center; border-radius: 6px;
  transition: filter 0.25s ease;
}
.s14-galeriebild .s14-lupe:hover img { filter: brightness(1.06); }
.s14-galeriebild .s14-lupe:focus-visible { outline: 2px solid #e0241b; outline-offset: 3px; }
.s14-galeriebild .s14-credit { margin-top: 10px; padding-top: 8px; }
.s14-galeriebild .s14-bildtext { font-size: 13.5px; }
.s14-galeriebild .s14-nachweis { font-size: 10.5px; letter-spacing: 0.1em; }
@media (max-width: 700px) {
  .s14-ms-galerie { grid-template-columns: 1fr; gap: 26px; }
}

/* --- Leuchtkasten -------------------------------------------------------- */
.s14-lk {
  position: fixed; inset: 0; z-index: 9000; display: none;
  background: rgba(8, 12, 17, 0.94); padding: 40px;
  align-items: center; justify-content: center; flex-direction: column; gap: 18px;
}
.s14-lk.is-offen { display: flex; }
.s14-lk img { max-width: 100%; max-height: calc(100vh - 170px); width: auto; height: auto; border-radius: 4px; }
.s14-lk-text { max-width: 70ch; text-align: center; }
.s14-lk-bildtext { display: block; color: #dbe4ec; font-size: 14.5px; line-height: 1.45; }
.s14-lk-nachweis {
  display: block; margin-top: 5px; color: #8fa3b5;
  font-size: 11px; letter-spacing: 0.11em; text-transform: uppercase; font-weight: 600;
}
.s14-lk-zu, .s14-lk-vor, .s14-lk-zurueck {
  position: absolute; background: none; border: 0; color: #9aa7b1; cursor: pointer;
  font-size: 30px; line-height: 1; padding: 12px 18px;
}
.s14-lk-zu:hover, .s14-lk-vor:hover, .s14-lk-zurueck:hover { color: #f6f7f8; }
.s14-lk-zu { top: 14px; right: 18px; }
.s14-lk-zurueck { left: 8px; top: 50%; transform: translateY(-50%); }
.s14-lk-vor { right: 8px; top: 50%; transform: translateY(-50%); }
@media (max-width: 700px) {
  .s14-lk { padding: 20px 12px 28px; }
  .s14-lk-zurueck, .s14-lk-vor { font-size: 24px; padding: 10px 12px; }
}

/* --- Responsiv ----------------------------------------------------------- */
@media (max-width: 1240px) {
  .s14-ms-layout { grid-template-columns: 214px 1fr; gap: 38px; }
}
@media (max-width: 1180px) {
  .s14-ms-kopfgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.85fr); gap: 0 32px; }
  .s14-ms-schatten { font-size: 20vw; }
}
/* Erst unter 940px einspaltig — bei 1040px (typische Fensterbreite) bleibt das
   klebrige Inhaltsverzeichnis sichtbar, der Artikel hat dann noch ~700px. */
@media (max-width: 940px) {
  .s14-ms-layout { grid-template-columns: 1fr; gap: 0; }
  .s14-ms-toc { position: static; top: auto; margin-bottom: 30px; }
  .s14-ms-tocbtn { display: flex; }
  .s14-ms-toc nav { display: none; }
  .s14-ms-toc.is-open nav { display: flex; }
  .s14-ms-toclabel { display: none; }
}
@media (max-width: 880px) {
  .s14-ms-kopf { padding: 40px 0 70px; }
  .s14-ms-kopfgrid { grid-template-columns: 1fr; gap: 26px; padding-left: 0; }
  .s14-ms-kopftext { padding: 0 24px; order: 2; }
  .s14-ms-kopfbild { order: 1; }
  .s14-ms-kopfbild .s14-credit { margin-left: 24px; margin-right: 24px; }
  .s14-ms-schatten { top: auto; bottom: 96px; font-size: 34vw; opacity: 0.055; }
  .s14-ms-faktenwrap { padding: 0 24px; }
  .s14-ms-fakten { grid-template-columns: repeat(2, 1fr); }
  .s14-ms-layout { padding: 20px 24px 50px; margin-top: 26px; }
  .s14-ms-artikel > section + section { margin-top: 54px; }
  .s14-ms-hinweis { padding: 20px; }
}
@media (max-width: 520px) {
  .s14-ms-fakten { grid-template-columns: 1fr; }
  .s14-ms-fakten > div { padding: 16px 18px; }
  .s14-ms-artikel blockquote { font-size: 19px; }
}

/* ==========================================================================
   BILDNACHWEIS — Herkunft sichtbar unter jedem Bild
   Vier Typen, vier Farben, immer an derselben Stelle. Die Zeile wird aus den
   Metafeldern erzeugt (inc/bildimport.php), nicht von Hand getippt.
   ========================================================================== */
.s14-figur { margin: 8px 0 0; }
.s14-figur img { width: 100%; height: auto; display: block; border-radius: 8px; }

/* Zwei Ebenen: Bildtext in Lesegroesse, darunter die Herkunft als Mikrozeile.
   Die Haarlinie bindet beides ans Bild, ohne einen Kasten zu bauen. */
.s14-credit {
  display: block; margin-top: 12px; padding-top: 10px;
  border-top: 1px solid #dfe3e7;
  --s14-punkt: #7c8b97;
}
.s14-bildtext {
  display: block; font-size: 14.5px; line-height: 1.45; color: #1d3247;
}
.s14-nachweis {
  display: block; margin-top: 5px;
  font-size: 11px; line-height: 1.5; letter-spacing: 0.11em; text-transform: uppercase;
  font-weight: 600; color: #7c8b97;
}
.s14-nachweis::before {
  content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--s14-punkt); margin-right: 8px; vertical-align: 1px;
}
.s14-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.s14-credit a:hover { color: #1d3247; }

.s14-credit--eigen        { --s14-punkt: #4a7a63; }
.s14-credit--lizenziert   { --s14-punkt: #3c5a7a; }
.s14-credit--illustration { --s14-punkt: #8a6d3b; }
/* KI faellt bewusst auf — Art. 50 EU AI Act verlangt eine erkennbare Angabe. */
.s14-credit--ki           { --s14-punkt: #c33a2c; }
.s14-credit--ki .s14-nachweis { color: #c33a2c; }
.s14-bild-fehlt {
  background: #fdf0ef; border: 1px dashed #e0241b; border-radius: 8px;
  padding: 14px 16px; font-size: 14px; color: #8a2b23;
}
/* Dunkler Grund (Startseiten-Hero, Modellseiten-Kopf, Heritage-Band) */
.s14-hero .s14-credit, .s14-ms-kopf .s14-credit { border-top-color: rgba(255, 255, 255, 0.14); }
.s14-hero .s14-bildtext, .s14-ms-kopf .s14-bildtext { color: #dbe4ec; }
.s14-hero .s14-nachweis, .s14-ms-kopf .s14-nachweis { color: #8fa3b5; }
.s14-hero .s14-credit a:hover, .s14-ms-kopf .s14-credit a:hover { color: #f6f7f8; }
.s14-ms-kopf .s14-credit--ki .s14-nachweis { color: #ff6a60; }
.s14-ms-kopf .s14-credit--ki { --s14-punkt: #ff6a60; }

/* --- Titelbild der Modellseite: festes Seitenverhältnis -------------------
   Vorgabe ist ein gewöhnliches Querformat 3:2 mit 2560 px Kantenlänge; die
   Bühne beschneidet es mittig auf 16:9. Der Beschnitt geht ausschliesslich in
   die Höhe und kostet Himmel und Vordergrund — nie das Fahrzeug, weil Daniel
   die Autos mittig fotografiert. */
.s14-ms-kopfbild img { aspect-ratio: 16 / 9; object-fit: cover; object-position: center; }

/* =========================================================================
   Generationsmodul — Band im Kopf (Vorschlag A) + Schwesterkacheln (B).
   Tokens: navy #1d3247, schiefer #4a6178, signal #e0241b, basis #f6f7f8,
   linie #dfe3e7. Headlines Kanit, Text Inter.
   Der Punkt ist unter .s14-ms-glied gescopt — die globale .s14-ms-punkt
   (Rost/Quelle, 7px) bleibt unberührt.
   ====================================================================== */

/* --- Band ------------------------------------------------------------- */
/* Gleiche Bahn wie .s14-ms-faktenwrap und .s14-ms-layout — sonst laeuft das
   Band randlos ueber die volle Fensterbreite und die Hilfszeile wird rechts
   abgeschnitten (gesehen am E36 bei 984 px). */
.s14-ms-genband {
	max-width: 1320px;
	margin: 26px auto 4px;
	padding: 0 32px;
}
.s14-ms-genband-kopf { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px; }
.s14-ms-genband-titel {
	font-family: var(--wp--preset--font-family--kanit, Kanit, sans-serif);
	font-weight: 700; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase;
	color: var(--wp--preset--color--navy, #1d3247);
}
.s14-ms-genband-hilfe { font-size: 12px; color: #93a2b0; }

.s14-ms-kette { display: flex; overflow-x: auto; position: relative; }
.s14-ms-kette::before { content: ""; position: absolute; top: 29px; left: 0; right: 0; height: 2px; background: #dfe3e7; z-index: 0; }
.s14-ms-glied { flex: 1 1 0; min-width: 110px; text-align: center; z-index: 1; text-decoration: none; display: block; }
.s14-ms-glied .s14-ms-punkt {
	width: 13px; height: 13px; border-radius: 50%;
	background: var(--wp--preset--color--basis, #f6f7f8);
	border: 2px solid #dfe3e7; margin: 23px auto 12px;
	transition: border-color .18s;
}
.s14-ms-gcode {
	display: block;
	font-family: var(--wp--preset--font-family--kanit, Kanit, sans-serif);
	font-weight: 700; font-size: 20px; color: var(--wp--preset--color--schiefer, #4a6178);
	transition: color .18s;
}
.s14-ms-gjahre { display: block; font-size: 12px; color: #93a2b0; font-variant-numeric: tabular-nums; }
.s14-ms-glied:hover .s14-ms-gcode { color: var(--wp--preset--color--navy, #1d3247); }
.s14-ms-glied:hover .s14-ms-punkt { border-color: var(--wp--preset--color--schiefer, #4a6178); }
.s14-ms-glied-ist .s14-ms-punkt {
	background: var(--wp--preset--color--signalrot, #e0241b);
	border-color: var(--wp--preset--color--signalrot, #e0241b);
	width: 15px; height: 15px; margin-top: 22px;
}
.s14-ms-glied-ist .s14-ms-gcode { color: var(--wp--preset--color--signalrot, #e0241b); font-size: 23px; }
.s14-ms-glied-ist .s14-ms-gjahre { color: var(--wp--preset--color--schiefer, #4a6178); font-weight: 600; }
.s14-ms-glied-aus { opacity: .42; pointer-events: none; }
.s14-ms-genband-fuss { margin-top: 14px; padding-top: 10px; border-top: 1px solid #dfe3e7; font-size: 12.5px; color: #93a2b0; }

/* --- Schwesterkacheln ------------------------------------------------- */
.s14-ms-schwestern { border-top: 1px solid #dfe3e7; margin-top: 20px; padding-top: 38px; }
.s14-ms-schwestern h2 {
	font-family: var(--wp--preset--font-family--kanit, Kanit, sans-serif);
	font-weight: 700; font-size: 27px; color: var(--wp--preset--color--navy, #1d3247);
}
.s14-ms-schwestern > p { color: var(--wp--preset--color--schiefer, #4a6178); font-size: 14.5px; }
.s14-ms-kacheln { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.s14-ms-kachel {
	background: #fff; border: 1px solid #dfe3e7; border-radius: 8px; overflow: hidden;
	display: flex; flex-direction: column; text-decoration: none;
	transition: border-color .18s, transform .18s, box-shadow .18s;
}
.s14-ms-kachel:hover { border-color: var(--wp--preset--color--schiefer, #4a6178); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(16, 23, 31, .09); }
.s14-ms-kbild { aspect-ratio: 3 / 2; background: var(--wp--preset--color--navy, #1d3247); display: block; }
.s14-ms-kbild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.s14-ms-kbild-ersatz {
	width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
	background: var(--wp--preset--color--navy, #1d3247);
	font-family: var(--wp--preset--font-family--kanit, Kanit, sans-serif);
	font-weight: 800; font-style: italic; font-size: 58px; color: #fff; opacity: .10;
	letter-spacing: -.04em; user-select: none;
}
.s14-ms-ktext { padding: 13px 14px 15px; }
.s14-ms-kcode { display: block; font-family: var(--wp--preset--font-family--kanit, Kanit, sans-serif); font-weight: 700; font-size: 19px; color: var(--wp--preset--color--navy, #1d3247); }
.s14-ms-kjahre { display: block; font-size: 12px; color: #93a2b0; font-variant-numeric: tabular-nums; }
.s14-ms-kreihe { display: block; font-size: 13.5px; color: var(--wp--preset--color--schiefer, #4a6178); line-height: 1.42; }
.s14-ms-kachel-bald { opacity: .55; pointer-events: none; }
.s14-ms-kachel-bald .s14-ms-kbild { background: var(--wp--preset--color--schiefer, #4a6178); }
.s14-ms-kbald {
	display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
	color: var(--wp--preset--color--schiefer, #4a6178); border: 1px solid #dfe3e7; border-radius: 3px; padding: 2px 6px; margin-top: 8px;
}

/* --- Breakpoints: die Kette scrollt in sich, die Seite nie ------------ */
@media (max-width: 1040px) {
	.s14-ms-kacheln { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.s14-ms-kacheln { grid-template-columns: 1fr; }
	.s14-ms-glied { min-width: 92px; }
}

/* --- Fokus sichtbar (BFSG) + reduzierte Bewegung --------------------- */
.s14-ms-glied:focus-visible,
.s14-ms-kachel:focus-visible { outline: 2px solid #e0241b; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
	.s14-ms-glied .s14-ms-punkt,
	.s14-ms-gcode,
	.s14-ms-kachel { transition: none; }
	.s14-ms-kachel:hover { transform: none; }
}


/* ---------------------------------------------------------------------------
 * Einfache Aufzaehlung im Artikel (Abschnitt Ersatzteile).
 * Bewusst schlicht: gleiche Anmutung wie die Rostzonen-Liste, aber ohne Kacheln.
 * ------------------------------------------------------------------------- */
.s14-ms-liste {
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
}

.s14-ms-liste li {
	position: relative;
	padding: 7px 0 7px 20px;
	color: #4a6178;
	border-top: 1px solid #dfe3e7;
	line-height: 1.5;
}

.s14-ms-liste li:first-child {
	border-top: 0;
}

.s14-ms-liste li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 16px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #e0241b;
}

/* --------------------------------------------------------------------------
 * Modellfamilie — Listenblock unter dem Inhaltsverzeichnis (Variante 3).
 * Kommt aus s14_familienblock() in inc/familie.php.
 * ----------------------------------------------------------------------- */
.s14-fam { margin-top: 30px; padding-top: 22px; border-top: 1px solid #e3e7eb; font-size: 14px; }
.s14-fam-h {
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: #9aa7b1; margin: 0 0 10px; padding-left: 16px;
}
.s14-fam a.s14-fam-up {
  display: block; font-size: 12px; font-weight: 600; color: #4a6178;
  text-decoration: none; margin: -2px 0 10px; padding-left: 16px;
}
.s14-fam a.s14-fam-up:hover { color: #1d3247; }
.s14-fam a.s14-fam-up span { color: #8fb0a4; margin-right: 5px; }
.s14-fam a.s14-fam-m {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  color: #4a6178; text-decoration: none; padding: 5.5px 8px 5.5px 16px;
  border-left: 2px solid transparent; border-radius: 0 5px 5px 0;
}
.s14-fam a.s14-fam-m:hover { color: #1d3247; background: #eef1f4; }
.s14-fam a.s14-fam-m small { color: #9aa8b5; font-size: 11.5px; font-weight: 500; white-space: nowrap; }
.s14-fam a.s14-fam-m.is-on { color: #fff; background: #1d3247; border-left-color: #e0241b; font-weight: 600; }
.s14-fam a.s14-fam-m.is-on small { color: #8fb0a4; }
@media (max-width: 940px) {
  .s14-ms-toc .s14-fam { margin-top: 0; padding-top: 0; border-top: 0; margin-bottom: 26px; }
}

/* =========================================================================
   Technik — Randspalte mit Toggle (löst die Zweispalten-Kacheln ab).
   Gilt NUR für den Technik-Abschnitt; .s14-ms-raster2 (Karosserien,
   Konkurrenz) bleibt unberührt. Zwei Zeilen sichtbar, heller Ausblender auf
   Weiß, Klick klappt auf; nur Einträge, die länger als zwei Zeilen sind,
   bekommen den Toggle (setzt s14-technik.js). --zeilenhoehe muss mit der
   Zweizeilen-Grenze in s14-technik.js übereinstimmen (2 * 1.62 * 15.5).
   ====================================================================== */
.s14-ms-technikliste { --zeilenhoehe: 1.62; border-top: 1px solid #dfe3e7; }

.s14-ms-tz {
	display: grid; grid-template-columns: 172px 1fr; gap: 26px;
	padding: 20px 0; border-bottom: 1px solid #dfe3e7; align-items: start;
}
.s14-ms-tz h4 {
	font-family: var(--wp--preset--font-family--kanit, Kanit, sans-serif);
	font-weight: 700; font-size: 15px; margin: 0; line-height: 1.28; letter-spacing: .01em;
	color: var(--wp--preset--color--navy, #1d3247);
	padding: 2px 0 2px 12px; border-left: 2px solid var(--wp--preset--color--signalrot, #e0241b);
}

/* Auslöser: ganzer Textblock als echter Button ohne Button-Optik. */
.s14-ms-tt {
	appearance: none; -webkit-appearance: none; background: none; border: 0; padding: 0; margin: 0;
	width: 100%; font: inherit; color: inherit; text-align: left; display: block; cursor: default; position: relative;
}
.s14-ms-tz.s14-ist-klappbar .s14-ms-tt { cursor: pointer; }

/* display: block ist Pflicht, nicht Kosmetik. Der Auslöser ist ein <span> im
   Button; auf einem inline-Element greifen weder overflow noch max-height, und
   scrollHeight meldet immer 0 — die Messung hielt dann jeden Text für zweizeilig
   und es wurde nie ein Toggle gesetzt. Genau dieser Fehler war in 2.19.0 live. */
.s14-ms-tt-inner {
	display: block;
	position: relative; overflow: hidden; max-height: none;
	transition: max-height .42s cubic-bezier(.22, .61, .36, 1);
}
/* Höhe (ein-/ausgeklappt) setzt s14-technik.js INLINE auf .s14-ms-tt-inner —
   nicht über konkurrierende max-height-Regeln mit var(), die die Kaskade still
   verwerfen kann. Die Transition oben greift auf den Inline-Wert. */
.s14-ms-tt p { margin: 0; color: #2c3b4a; font-size: 15.5px; line-height: var(--zeilenhoehe); }

/* Ausblender am Fuß der zwei Zeilen. Endfarbe MUSS der Seitengrund sein
   (#f6f7f8, Token „Basis") — der Artikelbereich ist nicht weiß. Mit Weiß
   entsteht ein heller Fleck über dem grauen Grund. Wird der Seitengrund
   geändert, muss diese Farbe mitwandern. */
.s14-ms-tt-inner::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 16px; pointer-events: none;
	background: linear-gradient(to bottom, rgba(246, 247, 248, 0), #f6f7f8 92%);
	opacity: 0; transition: opacity .28s ease;
}
.s14-ms-tz.s14-ist-klappbar .s14-ms-tt-inner::after { opacity: 1; }
.s14-ms-tz.s14-ist-offen .s14-ms-tt-inner::after { opacity: 0; }

/* Kein „mehr / weniger" mehr — geöffnet und geschlossen wird allein per Klick
   auf den Text. Der Ausblender ist der einzige Hinweis; damit er nicht der
   einzige bleibt, hellt der Text beim Überfahren leicht auf. */
.s14-ms-tz.s14-ist-klappbar .s14-ms-tt:hover p { color: var(--wp--preset--color--navy, #1d3247); }
.s14-ms-tt p { transition: color .18s ease; }

.s14-ms-tt:focus-visible { outline: 2px solid var(--wp--preset--color--signalrot, #e0241b); outline-offset: 4px; border-radius: 2px; }

@media (prefers-reduced-motion: reduce) {
	.s14-ms-tt-inner, .s14-ms-tt-inner::after, .s14-ms-tt p { transition: none; }
}
@media (max-width: 760px) {
	.s14-ms-tz { grid-template-columns: 1fr; gap: 8px; }
	.s14-ms-tz h4 {
		border-left: 0; padding-left: 0;
		border-bottom: 2px solid var(--wp--preset--color--signalrot, #e0241b);
		padding-bottom: 5px; display: inline-block;
	}
}

/* =========================================================================
   Technische Daten — Drei-Zeilen-Toggle (wie der Technik-Text daneben).
   Kein <details> mehr: der Knopf liegt als Overlay über dem Block (ein
   <button> darf nur Phrasing-Inhalt enthalten, keine <dl>). Endfarbe des
   Ausblenders ist der Seitengrund #f6f7f8 (der Artikelbereich ist grau).
   Die Höhen --s14-datenhoehe / --s14-hoehe setzt s14-technik.js je Seite.
   ====================================================================== */

/* Visuell versteckt, für Screenreader lesbar (Theme hat kein screen-reader-text). */
.s14-vh {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.s14-ms-datenblock { position: relative; margin-top: 26px; }
.s14-ms-datenlabel {
	font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
	color: #93a2b0; margin: 0 0 10px;
}

.s14-ms-daten-inner {
	position: relative; overflow: hidden; max-height: none;
	transition: max-height .42s cubic-bezier(.22, .61, .36, 1);
}
/* Höhe (drei Zeilen / voll) setzt s14-technik.js INLINE auf .s14-ms-daten-inner.
   Über konkurrierende Regeln mit var() wurde die Offen-Höhe still verworfen
   (klappbar + offen gleichzeitig am Block) — Inline schlägt jede Kaskade. */

/* Heller Ausblender am Fuß der drei Zeilen — endet auf dem Seitengrund #f6f7f8. */
.s14-ms-daten-inner::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26px; pointer-events: none;
	background: linear-gradient(to bottom, rgba(246, 247, 248, 0), #f6f7f8 92%);
	opacity: 0; transition: opacity .28s ease;
}
.s14-ms-datenblock.s14-ist-klappbar .s14-ms-daten-inner::after { opacity: 1; }
.s14-ms-datenblock.s14-ist-klappbar.s14-ist-offen .s14-ms-daten-inner::after { opacity: 0; }

/* Sichtbarer Weiterlesen-Link (löst den unsichtbaren Overlay-Knopf ab). */
.s14-ms-datenmehr {
	appearance: none; -webkit-appearance: none; background: none; border: 0; padding: 10px 0 0; margin: 0;
	cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
	font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
	color: var(--wp--preset--color--signalrot, #e0241b); transition: color .18s ease;
}
.s14-ms-datenmehr:hover { color: var(--wp--preset--color--navy, #1d3247); }
.s14-ms-datenmehr-pfeil {
	width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: rotate(45deg); transition: transform .32s cubic-bezier(.22, .61, .36, 1);
}
.s14-ms-datenblock.s14-ist-offen .s14-ms-datenmehr-pfeil { transform: rotate(-135deg); }
.s14-ms-datenmehr:focus-visible { outline: 2px solid var(--wp--preset--color--signalrot, #e0241b); outline-offset: 3px; }
/* Nur zeigen, wenn geklappt werden kann (JS setzt s14-ist-klappbar) — ohne JS bleibt alles offen sichtbar. */
.s14-ms-datenblock:not(.s14-ist-klappbar) .s14-ms-datenmehr { display: none; }

@media (prefers-reduced-motion: reduce) {
	.s14-ms-daten-inner, .s14-ms-daten-inner::after, .s14-ms-datenmehr, .s14-ms-datenmehr-pfeil { transition: none; }
}


/* ---------------------------------------------------------------------------
 * Kontaktformular — Honigtopf und Statusmeldungen
 * ------------------------------------------------------------------------- */

/* Der Honigtopf muss für Menschen unsichtbar sein, aber im Formular stehen.
   display:none waere verraeterisch: Manche Roboter ueberspringen versteckte
   Felder gezielt. Deshalb aus dem Sichtfeld schieben statt ausblenden. */
.s14-honigtopf {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.s14-kontakt-meldung {
	margin: 0 0 18px;
	padding: 13px 16px;
	border-radius: 8px;
	font-size: 15px;
	line-height: 1.5;
}

.s14-kontakt-meldung-gut {
	background: #eef6f1;
	border-left: 3px solid #4a7a63;
	color: #24503c;
}

.s14-kontakt-meldung-schlecht {
	background: #fdeeed;
	border-left: 3px solid var(--wp--preset--color--signalrot, #e0241b);
	color: #8d201a;
}