/* ============================================================
   Spedition Minor GmbH - Designsystem 2026
   Paket 1: Tokens, Typografie, Komponenten, Fixes
   AWARE7 27.09.2026
   ============================================================ */


/* ============================================================
   1. TOKENS
   ============================================================ */

:root {
  /* Markenfarben */
  --spm-navy:       #19284A;
  --spm-red:        #D43033;
  --spm-red-hover:  #B3262A;
  --spm-steel:      #E4E8EC;
  --spm-ink:        #212838;
  --spm-orange:     #EE7F00; /* nur .spm-plates */
  --spm-white:      #FFFFFF;

  /* Grau-Abstufungen */
  --spm-gray-100:   #F7F8FA;
  --spm-gray-200:   #E4E8EC;
  --spm-gray-300:   #CDD2DC;
  --spm-gray-500:   #768197;
  --spm-gray-700:   #384769;

  /* Fokus-Farbe (WCAG 2.4.11) */
  --spm-focus:      #005FCC;

  /* Typografie */
  --spm-font-text: 'Barlow', system-ui, sans-serif;
  --spm-font-head: 'Barlow Semi Condensed', system-ui, sans-serif;

  /* Skala */
  --spm-text-sm:   0.875rem;  /* 14px */
  --spm-text-base: 1.0625rem; /* 17px mobil */
  --spm-text-lg:   1.125rem;  /* 18px Desktop */
  --spm-h6:        1.0rem;
  --spm-h5:        1.125rem;
  --spm-h4:        1.2rem;
  --spm-h3:        1.375rem;  /* 22px */
  --spm-h2-mob:    1.75rem;   /* 28px */
  --spm-h2:        2.25rem;   /* 36px */
  --spm-h1:        clamp(2rem, 1.2rem + 3.6vw, 3.5rem);

  /* Layout: --spm-frame = Inhaltsbreite plus Seitenrand, gilt für Header, GP-Container und .spm-wrap */
  --spm-max-w:     1200px;
  --spm-gutter:    16px;
  --spm-frame:     calc(var(--spm-max-w) + 2 * var(--spm-gutter));

  /* Header-Hoehe (dynamisch per JS; Fallback 72px) */
  --spm-header-height: 72px;

  /* Transitions */
  --spm-ease: 0.18s ease;
}

@media (min-width: 768px) {
  :root {
    --spm-gutter:    24px;
    --spm-text-base: 1.125rem; /* 18px */
  }
}


/* ============================================================
   2. GP-VARIABLEN-MAPPING
   GP Premium druckt ':root { --accent: #ff4d50 }' nach generate-style
   via wp_add_inline_style. design.css laeuft mit dep 'generate-style'
   und wird NACH dem Inline-Block eingebunden -> ueberschreibt sicher.
   ============================================================ */

:root {
  /* Primaerakzent -> Signalrot */
  --accent:        var(--spm-red);
  --accent-2:      var(--spm-red-hover);

  /* Kontrast-Palette -> Nachtblau/Tinte */
  --contrast:      var(--spm-ink);
  --contrast-2:    var(--spm-navy);
  --contrast-3:    var(--spm-gray-700);
  /* contrast-4: aktiver Nav-Eintrag Hintergrund + Hover-Farbe; muss >= 4.5:1 auf Weiss haben
     Berechnet: #5a6880 auf Weiss = 5.59:1 (AA), identisch mit WCAG-AA-Schwelle White-Text auf BG. */
  --contrast-4:    #5a6880;
  --contrast-5:    var(--spm-gray-700); /* GP Hover-Farbe, zuvor gray-500 (3,92:1 - WCAG-Fehler) */

  /* Basis-Palette -> Edelstahl/Weiss */
  --base:          var(--spm-steel);
  --base-2:        var(--spm-gray-100);
  --base-3:        var(--spm-white);
}


/* ============================================================
   3. FONT-FACE
   font-display:swap, Subset latin (enthaelt ae/oe/ue/ss/Umlaute)
   ============================================================ */

@font-face {
  font-family: 'Barlow';
  font-style:  normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/barlow-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Barlow';
  font-style:  normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/barlow-latin-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style:  normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/barlow-semi-condensed-latin-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style:  normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/barlow-semi-condensed-latin-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ============================================================
   4. BASIS-RESET UND TYPOGRAFIE
   ============================================================ */

html {
  scroll-padding-top: var(--spm-header-height, 72px);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family:  var(--spm-font-text);
  font-size:    var(--spm-text-base);
  line-height:  1.6;
  color:        var(--spm-ink);
  background:   var(--spm-white);
  /* clip statt hidden: hidden würde position:sticky des Headers aufheben */
  overflow-x:   clip;
}

@media (max-width: 768px) {
  body {
    padding-bottom: 72px; /* Ausgleich .spm-phone-mobile-cta (REPORT-UIUX MOB-03) */
  }
}

/* Navigationsschrift */
.main-navigation a,
.main-navigation .menu-toggle,
.main-navigation .menu-bar-items {
  font-family:    var(--spm-font-text);
  font-weight:    600;
  /* Satzschreibweise statt Versalien (war text-transform:uppercase) */
  text-transform: none;
  font-size:      15px;
  letter-spacing: 0;
}

/* Überschriften-Familie */
h1, h2, h3, h4, h5, h6,
.spm-hero__title,
.gb-text-d89d702b,
.gb-text-885095c8 {
  font-family:  var(--spm-font-head);
  font-weight:  600;
  color:        var(--spm-navy);
  hyphens:      auto;
  overflow-wrap: break-word;
}

/* Überschriften-Skala */
h1,
.gb-text-885095c8,   /* Startseiten-H1 */
.gb-text-d89d702b {  /* Unterseiten-Hero-H1 */
  font-size:   var(--spm-h1);
  line-height: 1.1;
  font-weight: 700;
}

h2 { font-size: var(--spm-h2-mob); line-height: 1.2; }
@media (min-width: 768px) { h2 { font-size: var(--spm-h2); } }

h3 { font-size: var(--spm-h3); line-height: 1.25; }
h4 { font-size: var(--spm-h4); line-height: 1.3; }

/* Text-Zeilenlaenge */
p, li {
  max-width: 70ch;
}

/* Links im Fließtext unterstrichen (WCAG 1.4.1). :where() hält die Spezifität niedrig,
   damit Komponenten (Tafeln, Karten, Buttons) eigene Linkstile setzen können. */
.entry-content :where(p, li, td, dd, figcaption) a:where(:not(.wp-block-button__link, .button, [class*="gb-"])),
.site-footer :where(p) a {
  color:                 var(--spm-navy);
  text-decoration:       underline;
  text-underline-offset: 3px;
}
.entry-content :where(p, li, td, dd, figcaption) a:where(:not(.wp-block-button__link, .button, [class*="gb-"])):hover {
  color: var(--spm-red);
}

/* GP a:hover Korrektur (--contrast-5 hat nur 3,92:1; REPORT VIS-01 Codex) */
a:hover, a:focus, a:active {
  color: var(--spm-navy);
}


/* ============================================================
   5. FOKUS-INDIKATOR
   WCAG 2.4.11 - mind. 3 px, erkennbar (A11Y-09)
   ============================================================ */

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

/* Buttons brauchen keinen Outline-Doppelrahmen */
.wp-block-button__link:focus-visible,
.spm-btn--primary:focus-visible,
.spm-btn--secondary:focus-visible,
button:focus-visible {
  outline:        3px solid var(--spm-focus);
  outline-offset: 3px;
}


/* ============================================================
   6. HEADER, TOP-BAR UND RASTER
   Element 41 (Header merge) wird deaktiviert: der Header steht im
   normalen Fluss und klebt per position:sticky (kein JS, kein GP-Modul).
   Header, Top-Bar, GP-Container und .spm-wrap nutzen denselben Rahmen,
   damit alle linken Kanten übereinander liegen.
   ============================================================ */

.inside-top-bar,
.inside-header,
.site.grid-container,
.inside-site-info {
  max-width: var(--spm-frame);
}

.inside-top-bar,
.inside-header {
  padding-left:  var(--spm-gutter);
  padding-right: var(--spm-gutter);
}

.one-container .site-content {
  padding: clamp(40px, 6vw, 80px) var(--spm-gutter);
}

/* Seiten aus .spm-section-Bändern laufen randlos; die Bänder bringen ihren Rahmen selbst mit */
.site.grid-container:has(.entry-content > .spm-section) {
  max-width: none;
}
.one-container .site-content:has(.entry-content > .spm-section) {
  padding: 0;
}
.entry-content > .spm-section:first-child { margin-top: 0; }

.site-header {
  position:         sticky;
  top:              0;
  z-index:          1000;
  background-color: var(--spm-white);
  color:            var(--spm-navy);
  box-shadow:       0 1px 0 var(--spm-steel);
}
.admin-bar .site-header { top: var(--wp-admin--admin-bar--height, 32px); }

.inside-header {
  padding-top:    10px;
  padding-bottom: 10px;
}

.site-header .header-image {
  width:  128px;
  height: auto;
}
@media (min-width: 1025px) {
  .site-header .header-image { width: 156px; }
}

/* Navigation: GP setzt einen halbtransparenten Grauton (rgba 31,32,34,.7) - entfernen */
.main-navigation,
.main-navigation .inside-navigation,
.mobile-menu-control-wrapper,
.main-navigation .menu-toggle,
.main-navigation .menu-bar-items,
.main-navigation .menu-bar-item > a {
  background-color: transparent;
}

.main-navigation .main-nav ul li a,
.main-navigation .menu-bar-items a:not(.spm-header-cta),
.main-navigation .menu-toggle,
.mobile-menu-control-wrapper .menu-toggle {
  color: var(--spm-navy);
}

.main-navigation .main-nav > ul > li > a {
  padding-left:  14px;
  padding-right: 14px;
}

.main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a,
.main-navigation .main-nav ul li:not([class*="current-menu-"]):focus-within > a,
.main-navigation .main-nav ul li.sfHover:not([class*="current-menu-"]) > a,
.main-navigation .menu-bar-item:hover > a {
  color:            var(--spm-red);
  background-color: transparent;
}

/* Aktive Seite: Rot plus Unterstrich (nicht nur Farbe, WCAG 1.4.1) */
.main-navigation .main-nav ul li[class*="current-menu-"] > a {
  color:            var(--spm-red);
  background-color: transparent;
  box-shadow:       inset 0 -3px 0 var(--spm-red);
}

.main-navigation .dropdown-menu-toggle {
  padding-left: 6px;
}

/* Untermenü */
.main-navigation ul ul {
  background-color: var(--spm-white);
  border:           1px solid var(--spm-steel);
  box-shadow:       0 8px 24px rgba(25, 40, 74, 0.12);
  width:            280px;
}
.main-navigation .main-nav ul ul li a {
  color:       var(--spm-navy);
  line-height: 1.4;
  padding:     12px 18px;
}
.main-navigation .main-nav ul ul li:hover > a,
.main-navigation .main-nav ul ul li:focus-within > a {
  background-color: var(--spm-steel);
  color:            var(--spm-navy);
}

/* Header-Button "Transport anfragen" (Elemente 308 und 1112) */
.spm-header-cta,
.main-navigation .menu-bar-items .spm-header-cta {
  display:          inline-flex;
  align-items:      center;
  min-height:       44px;
  margin-left:      12px;
  padding:          10px 18px;
  border-radius:    4px;
  background-color: var(--spm-red);
  color:            var(--spm-white);
  font-weight:      600;
  line-height:      1.2;
  text-decoration:  none;
  white-space:      nowrap;
}
.spm-header-cta:hover,
.spm-header-cta:focus,
.main-navigation .menu-bar-items .spm-header-cta:hover {
  background-color: var(--spm-red-hover);
  color:            var(--spm-white);
}
.spm-header-cta--slideout {
  display:         flex;
  justify-content: center;
  margin:          24px 20px;
}

/* Mobile Bedienelemente: Suche und Menü als 44-px-Flächen */
.mobile-menu-control-wrapper .menu-toggle,
.mobile-menu-control-wrapper .search-item a {
  min-width:  44px;
  min-height: 44px;
  display:    inline-flex;
  align-items: center;
  justify-content: center;
  padding:    0 10px;
}

/* Slideout-Menü */
.slideout-navigation.main-navigation,
.slideout-navigation.main-navigation ul ul {
  background-color: var(--spm-navy);
}
.slideout-navigation.main-navigation .main-nav ul li a {
  color:       var(--spm-white);
  line-height: 1.4;
  padding:     14px 20px;
}
.slideout-navigation.main-navigation .main-nav ul li[class*="current-menu-"] > a {
  color:      var(--spm-white);
  box-shadow: inset 3px 0 0 var(--spm-red);
}
.slideout-navigation .slideout-exit {
  color: var(--spm-white);
}

/* Top-Bar */
.top-bar {
  background-color: var(--spm-navy);
  color:            var(--spm-white);
  font-size:        0.875rem;
}
.top-bar a {
  color:           var(--spm-white);
  text-decoration: none;
}
.top-bar a:hover,
.top-bar a:focus {
  color:           var(--spm-white);
  text-decoration: underline;
}


/* ============================================================
   7. BUTTONS - ALLE VARIANTEN
   ============================================================ */

/* Buttons: className sitzt beim core/button am Wrapper (.wp-block-button.spm-btn--*),
   gestylt wird der Link darin. a.spm-btn--* deckt Links ohne Button-Block ab. */
.spm-btn--primary > .wp-block-button__link,
a.spm-btn--primary,
.spm-btn--secondary > .wp-block-button__link,
a.spm-btn--secondary {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  min-height:      48px;
  padding:         12px 26px;
  border:          2px solid transparent;
  border-radius:   4px;
  font-family:     var(--spm-font-text);
  font-size:       1.0625rem;
  font-weight:     600;
  line-height:     1.2;
  text-decoration: none;
  text-transform:  none;
  transition:      background-color var(--spm-ease), color var(--spm-ease), border-color var(--spm-ease);
}

.spm-btn--primary > .wp-block-button__link,
a.spm-btn--primary {
  background-color: var(--spm-red);
  border-color:     var(--spm-red);
  color:            var(--spm-white);
}
.spm-btn--primary > .wp-block-button__link:hover,
.spm-btn--primary > .wp-block-button__link:focus,
a.spm-btn--primary:hover,
a.spm-btn--primary:focus {
  background-color: var(--spm-red-hover);
  border-color:     var(--spm-red-hover);
  color:            var(--spm-white);
}

.spm-btn--secondary > .wp-block-button__link,
a.spm-btn--secondary {
  background-color: transparent;
  border-color:     var(--spm-navy);
  color:            var(--spm-navy);
}
.spm-btn--secondary > .wp-block-button__link:hover,
.spm-btn--secondary > .wp-block-button__link:focus,
a.spm-btn--secondary:hover,
a.spm-btn--secondary:focus {
  background-color: var(--spm-navy);
  color:            var(--spm-white);
}

/* Globale GP/GB-Buttons auf Rot korrigieren (ersetzt altes #ff4d50) */
button:not(.menu-toggle):not(.spm-btn--secondary):not([class*="cmplz"]),
html input[type="button"],
input[type="reset"],
input[type="submit"],
.button,
a.button,
:where(.wp-block-button:not(.spm-btn--primary, .spm-btn--secondary)) > .wp-block-button__link:not(.has-background),
.gb-button {
  background-color: var(--spm-red);
  color:            var(--spm-white) !important;
  text-transform:   none;
  border-radius:    4px;
  transition:       background-color var(--spm-ease);
}

button:not(.menu-toggle):not([class*="cmplz"]):hover,
input[type="submit"]:hover,
input[type="submit"]:focus,
:where(.wp-block-button:not(.spm-btn--primary, .spm-btn--secondary)) > .wp-block-button__link:not(.has-background):hover,
:where(.wp-block-button:not(.spm-btn--primary, .spm-btn--secondary)) > .wp-block-button__link:not(.has-background):focus {
  background-color: var(--spm-red-hover) !important;
  color:            var(--spm-white) !important;
}

/* WPForms Submit */
.wpforms-submit,
#wpforms-form-19 .wpforms-submit {
  background-color: var(--spm-red) !important;
  color:            var(--spm-white) !important;
  border:           none;
  padding:          14px 28px;
  font-weight:      600;
  min-height:       44px;
}
.wpforms-submit:hover { background-color: var(--spm-red-hover) !important; }

/* Job-Postings Bewerben-Buttons (VIS-03 - Cyan-Override) */
.apply-btn,
.jp-apply-button,
.job-postings .apply-btn,
.job-postings .jp-apply-button {
  background-color: var(--spm-red) !important;
  color:            var(--spm-white) !important;
  border-color:     var(--spm-red) !important;
  border-radius:    4px !important;
  text-transform:   none !important;
}
.apply-btn:hover,
.jp-apply-button:hover {
  background-color: var(--spm-red-hover) !important;
}

/* Stellen-Seiten Bewerbungs-Button */
.spm-section .jp-apply-button {
  display:   inline-block;
  min-height: 44px;
}


/* ============================================================
   8. LAYOUT-GRUNDBAUSTEINE
   ============================================================ */

/* Innenbreite */
.spm-wrap {
  width:       100%;
  max-width:   var(--spm-frame);
  margin-left:  auto;
  margin-right: auto;
  padding-left:  var(--spm-gutter);
  padding-right: var(--spm-gutter);
}

/* Abschnitt */
.spm-section {
  padding-top:    clamp(48px, 6vw, 96px);
  padding-bottom: clamp(48px, 6vw, 96px);
  background:     var(--spm-white);
}

/* Edelstahl-Fläche */
.spm-section--steel {
  background: var(--spm-steel);
}

/* Dunkle Fläche */
.spm-section--navy {
  background: var(--spm-navy);
  color:      var(--spm-white);
}
.spm-section--navy h1,
.spm-section--navy h2,
.spm-section--navy h3,
.spm-section--navy h4 {
  color: var(--spm-white);
}

/* Links auf dunkler Fläche: Edelstahl statt Signalrot (2.96:1 auf Navy - WCAG-Fehler) */
.spm-section--navy a:not(.wp-block-button__link):not(.spm-btn--primary):not(.spm-btn--secondary):not(.spm-social a) {
  color: var(--spm-steel) !important;
  text-decoration: none;
}
.spm-section--navy a:not(.wp-block-button__link):not(.spm-btn--primary):not(.spm-btn--secondary):hover {
  color:           var(--spm-white) !important;
  text-decoration: underline;
}


/* ============================================================
   8b. INNERE GRUPPEN-CONTAINER NEUTRALISIEREN
   Klassische Themes (GeneratePress) bekommen in jeder core/group einen
   .wp-block-group__inner-container, den GP mobil mit 40px/30px polstert.
   In den eigenen Bausteinen ist er layoutneutral: seine Kinder gehören
   direkt zum Raster/Flex des Bausteins.
   ============================================================ */

:is(.spm-section, .spm-wrap, .spm-hero, .spm-hero__text, .spm-actions, .spm-services, .spm-service,
    .spm-team, .spm-person, .spm-duo, .spm-duo__text, .spm-docs, .spm-gallery, .spm-note, .spm-pagehead,
    .spm-cta-band, .spm-footer) > .wp-block-group__inner-container {
  display: contents;
}


/* ============================================================
   9. HERO-KOMPONENTE
   Desktop: Text links, Foto rechts. Mobil: Text zuerst (Anfrage im
   ersten Bildschirm), Foto danach.
   ============================================================ */

.spm-hero {
  width:         100%;
  max-width:     var(--spm-frame);
  margin-left:   auto;
  margin-right:  auto;
  padding:       clamp(28px, 5vw, 72px) var(--spm-gutter);
  display:       grid;
  gap:           clamp(28px, 4vw, 64px);
  align-items:   center;
}
/* Spalten dürfen schrumpfen, sonst zieht die wischbare Tafelreihe die Spalte auf (Kinder liegen
   wegen des neutralisierten Inner-Containers eine DOM-Ebene tiefer, daher explizite Spalten). */
.spm-hero { grid-template-columns: minmax(0, 1fr); }
.spm-hero__text,
.spm-hero__media { min-width: 0; }
@media (min-width: 900px) {
  .spm-hero { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
}

.spm-hero__title {
  margin: 0 0 0.4em;
}

.spm-hero__lead {
  font-size:     clamp(1.125rem, 1rem + 0.4vw, 1.3125rem);
  line-height:   1.55;
  color:         var(--spm-gray-700);
  margin:        0 0 1.5em;
  max-width:     46ch;
}

.spm-hero__media {
  margin: 0;
}
.spm-hero__media img {
  display:       block;
  width:         100%;
  height:        auto;
  aspect-ratio:  4 / 3;
  object-fit:    cover;
  border-radius: 6px;
}

.spm-actions {
  display:     flex;
  flex-wrap:   wrap;
  gap:         12px 24px;
  align-items: center;
  margin:      0;
}
.spm-actions .wp-block-buttons { margin: 0; }

/* Telefon neben dem Button: Absatz mit Link */
.spm-tel {
  margin:      0;
  font-size:   1.125rem;
  font-weight: 600;
  white-space: nowrap;
}
.spm-tel a,
a.spm-tel {
  color:                 var(--spm-navy);
  text-decoration:       underline;
  text-underline-offset: 4px;
}
.spm-tel a:hover,
a.spm-tel:hover { color: var(--spm-red); }

@media (max-width: 599px) {
  .spm-actions .wp-block-buttons,
  .spm-actions .wp-block-button,
  .spm-actions .wp-block-button__link { width: 100%; text-align: center; }
}


/* ============================================================
   10. NACHWEIS-TAFELN
   Format der orangen Warntafel: zwei Felder, schwarzer Rand,
   schwarze Trennlinie. Oben der Nachweis, unten der Umfang.
   Einziger Einsatzort von Orange auf der Website.
   ============================================================ */

.spm-plates {
  display:     flex;
  flex-wrap:   wrap;
  gap:         10px;
  list-style:  none;
  margin:      2rem 0 0;
  padding:     0;
}

.spm-plates li {
  margin:    0;
  max-width: none;
}

.spm-plates a {
  display:         flex;
  flex-direction:  column;
  min-width:       104px;
  background:      var(--spm-orange);
  border:          3px solid #000;
  border-radius:   3px;
  color:           #000;
  text-align:      center;
  text-decoration: none;
  font-family:     var(--spm-font-head);
  line-height:     1.1;
}

.spm-plates strong {
  display:        block;
  padding:        8px 10px 6px;
  border-bottom:  3px solid #000;
  font-size:      1.25rem;
  font-weight:    700;
  letter-spacing: 0.02em;
}

.spm-plates span {
  display:     block;
  padding:     6px 10px 8px;
  font-size:   0.9375rem;
  font-weight: 600;
  white-space: nowrap;
}

.spm-plates a:hover,
.spm-plates a:focus-visible {
  color:      #000;
  box-shadow: 0 0 0 3px var(--spm-white), 0 0 0 6px #000;
}

@media (max-width: 599px) {
  .spm-plates {
    flex-wrap:      nowrap;
    overflow-x:     auto;
    padding-bottom: 6px;
    scroll-snap-type: x proximity;
  }
  .spm-plates li { flex: 0 0 auto; scroll-snap-align: start; }
}


/* ============================================================
   11. LEISTUNGS-RASTER
   ============================================================ */

.spm-services {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   24px;
  margin-top:            2rem;
}
@media (min-width: 640px)  { .spm-services { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .spm-services { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.spm-service {
  background:    var(--spm-white);
  border:        1px solid var(--spm-steel);
  border-radius: 6px;
  overflow:      hidden;
  display:       flex;
  flex-direction: column;
}

.spm-service figure { margin: 0; }
.spm-service img {
  width:        100%;
  height:       auto;
  aspect-ratio: 4 / 3; /* schneidet die Randbalken der 1280x768-Fotos (1650, 1653) sauber ab */
  object-fit:   cover;
  display:      block;
}

.spm-service h3 {
  padding:       20px 20px 8px;
  margin:        0;
  font-size:     var(--spm-h3);
}

.spm-service p {
  padding:       0 20px;
  margin:        0 0 12px;
  color:         var(--spm-gray-700);
  font-size:     var(--spm-text-sm);
}

.spm-service a:not(.wp-block-button__link) {
  margin:           auto 20px 20px;
  color:            var(--spm-red) !important;
  font-weight:      600;
  /* Unterstreichung dauerhaft sichtbar (WCAG 1.4.1 link-in-text-block) */
  text-decoration:  underline;
  text-underline-offset: 3px;
  font-size:        var(--spm-text-sm);
}
.spm-service a:not(.wp-block-button__link):hover {
  text-decoration-thickness: 2px;
}


/* ============================================================
   12. SPLIT (Foto + Text nebeneinander)
   ============================================================ */

.spm-split {
  /* Breiten-Einschränkung (greift wenn kein spm-wrap-Eltern-Element) */
  width:         100%;
  max-width:     var(--spm-frame);
  margin-left:   auto;
  margin-right:  auto;
  padding-left:  var(--spm-gutter);
  padding-right: var(--spm-gutter);
  /* Layout: wp-block-media-text nutzt grid - flex ueberschreibt und vereinfacht */
  display:       flex;
  gap:           clamp(32px, 4vw, 64px);
  align-items:   center;
}
/* Desktop: Foto oben ausrichten und beim Scrollen neben langem Text (z.B. Formular) mitlaufen lassen */
@media (min-width: 768px) {
  .spm-split { align-items: flex-start; }
  .spm-split .wp-block-media-text__media,
  .spm-split .wp-block-media-text__content {
    align-self: flex-start; /* WP-Blockstil setzt align-self: center */
  }
  .spm-split .wp-block-media-text__media {
    position: sticky;
    top:      calc(var(--spm-header-height, 72px) + 24px);
  }
}
@media (max-width: 767px) {
  /* stretch + volle Breite: sonst hat das Bild vor dem Laden die Breite 0 und schiebt beim Laden (CLS) */
  .spm-split { flex-direction: column; align-items: stretch; }
  .spm-split .wp-block-media-text__media { flex: none; width: 100%; }
}
/* Innerhalb von .spm-wrap bringt der Rahmen den Seitenrand schon mit */
.spm-wrap .spm-split {
  max-width:     none;
  padding-left:  0;
  padding-right: 0;
}
.spm-split .wp-block-media-text__media,
.spm-split figure.wp-block-media-text__media {
  flex:          0 0 48%;
  min-width:     0;
}
.spm-split .wp-block-media-text__content {
  flex:          1 1 0;
  min-width:     0;
  padding:       0; /* WP setzt intern padding, hier nullen */
}
.spm-split .wp-block-media-text__media img {
  border-radius: 6px;
  width:         100%;
  height:        auto;
  aspect-ratio:  3 / 2; /* Platz reservieren: WebP-Dateien bekommen von WordPress kein width/height (CLS) */
  object-fit:    cover;
  display:       block;
}


/* ============================================================
   12b. ZWEISPALTER, DOKUMENTE, VIDEO, RATGEBER-KARTEN
   ============================================================ */

.spm-duo {
  display: grid;
  gap:     clamp(28px, 4vw, 56px);
  align-items: start;
}
@media (min-width: 900px) {
  .spm-duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
}
.spm-duo > * { min-width: 0; }

.spm-docs {
  display:               grid;
  grid-template-columns: repeat(2, minmax(0, 180px));
  gap:                   16px;
  margin-top:            1.5rem;
}
.spm-docs figure { margin: 0; }
.spm-docs img {
  display:       block;
  width:         100%;
  height:        auto;
  border:        1px solid var(--spm-gray-300);
  border-radius: 4px;
}

/* Video-Einbettungen und Complianz-Platzhalter im 16:9-Format */
.wp-block-embed.is-type-video { margin: 0; }
.wp-block-embed.is-type-video .wp-block-embed__wrapper,
.wp-block-embed.is-type-video .cmplz-placeholder-element {
  position:     relative;
  aspect-ratio: 16 / 9;
  height:       auto !important;
  min-height:   0 !important;
  border-radius: 6px;
  overflow:     hidden;
  background:   var(--spm-navy);
}
.wp-block-embed.is-type-video iframe {
  position: absolute;
  inset:    0;
  width:    100%;
  height:   100%;
}
.wp-block-embed.is-type-video .wp-block-embed__wrapper::before { content: none; padding: 0; }

/* Neueste Ratgeber-Beiträge (core/latest-posts, className spm-latest) */
.spm-latest.wp-block-latest-posts {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   24px;
  margin:                2rem 0 0;
  padding:               0;
  list-style:            none;
}
@media (min-width: 900px) {
  .spm-latest.wp-block-latest-posts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.spm-latest.wp-block-latest-posts li {
  margin:        0;
  max-width:     none;
  padding:       24px;
  border:        1px solid var(--spm-steel);
  border-radius: 6px;
  background:    var(--spm-white);
}
.spm-latest .wp-block-latest-posts__post-title {
  display:               block;
  font-family:           var(--spm-font-head);
  font-size:             var(--spm-h3);
  font-weight:           600;
  line-height:           1.25;
  color:                 var(--spm-navy);
  text-decoration:       underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
}
.spm-latest .wp-block-latest-posts__post-title:hover,
.spm-latest .wp-block-latest-posts__post-title:focus {
  text-decoration-color: currentColor;
}
.spm-latest .wp-block-latest-posts__post-excerpt {
  margin-top: 0.75rem;
  color:      var(--spm-gray-700);
  font-size:  1rem;
}
.spm-more { margin-top: 1.5rem; }


/* Bildergalerie (Karriere "So arbeiten wir"): echte Arbeitsszenen im Hochformat */
.spm-gallery {
  display:               grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:                   16px;
  margin-top:            2rem;
}
@media (min-width: 900px) {
  .spm-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
}
.spm-gallery figure { margin: 0; }
.spm-gallery img {
  display:       block;
  width:         100%;
  height:        auto;
  aspect-ratio:  4 / 5;
  object-fit:    cover;
  border-radius: 6px;
}
.spm-gallery .spm-focus-left img { object-position: 0 50%; }
.spm-gallery figcaption {
  margin-top:  0.5rem;
  font-size:   1rem;
  font-weight: 600;
  color:       var(--spm-navy);
  text-align:  left;
}

/* Zweispalter mit Foto (Karriere-Teaser Startseite) */
.spm-duo__media { margin: 0; }
.spm-duo__media img {
  display:       block;
  width:         100%;
  height:        auto;
  aspect-ratio:  3 / 2;
  object-fit:    cover;
  border-radius: 6px;
}
.spm-duo { align-items: center; }


/* ============================================================
   13. CHECKLIST
   ============================================================ */

.spm-checklist {
  list-style: none;
  padding:    0;
  margin:     0;
}

.spm-checklist li {
  padding-left: 1.75em;
  position:     relative;
  margin-bottom: 0.5em;
}

.spm-checklist li::before {
  content:    '✓';
  position:   absolute;
  left:       0;
  top:        0;
  color:      var(--spm-red);
  font-weight: 700;
}


/* ============================================================
   14. TEAM-RASTER
   ============================================================ */

.spm-team {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap:                   24px;
  align-items:           start;
}

.spm-person {
  text-align: center;
}

.spm-person img {
  width:         100%;
  max-width:     200px;
  aspect-ratio:  1;
  object-fit:    cover;
  border-radius: 50%;
  display:       block;
  margin:        0 auto 12px;
}

.spm-person h3 {
  font-size:     1.0rem;
  margin:        0 0 4px;
  font-weight:   700;
}

.spm-person p {
  font-size:     0.875rem;
  color:         var(--spm-gray-700);
  margin:        0;
}

/* Team auf dunkler Flaeche: Rolle in lesbarem Hellgrau (--spm-gray-700 auf Navy hat ~2.5:1 Kontrast) */
.spm-section--navy .spm-person p {
  color: var(--spm-steel);
}


/* ============================================================
   15. NOTE (Hervorgehobener Hinweis)
   ============================================================ */

.spm-note {
  background:    var(--spm-gray-100);
  border-left:   4px solid var(--spm-navy);
  padding:       20px 24px;
  border-radius: 0 6px 6px 0;
}

.spm-note p:last-child { margin-bottom: 0; }


/* ============================================================
   16. KONTAKTZEILE
   ============================================================ */

.spm-contactline {
  font-size:   1.0625rem;
  line-height: 1.7;
}

.spm-contactline a {
  color:           var(--spm-navy) !important;
  text-decoration: none !important;
}
.spm-contactline a:hover {
  color:           var(--spm-red) !important;
  text-decoration: underline !important;
}


/* ============================================================
   17. SEITENKOPF (GP-Element 617) UND CTA-BAND (Element 615)
   ============================================================ */

.spm-pagehead {
  background: var(--spm-navy);
  color:      var(--spm-white);
  padding:    clamp(28px, 5vw, 56px) 0;
}

.spm-pagehead h1,
.spm-pagehead__title {
  text-align:  left;
  color:       var(--spm-white);
  font-size:   var(--spm-h1);
  line-height: 1.1;
  font-weight: 700;
  margin:      0;
}

/* Breadcrumbs im Seitenkopf: helle Schrift auf Nachtblau */
.spm-pagehead .rank-math-breadcrumb {
  margin-top: 12px;
  padding:    0;
  color:      var(--spm-steel);
  font-size:  0.9375rem;
}
.spm-pagehead .rank-math-breadcrumb p { margin: 0; max-width: none; }
.spm-pagehead .rank-math-breadcrumb a {
  color:                 var(--spm-white) !important;
  text-decoration:       underline;
  text-underline-offset: 3px;
}
.spm-pagehead .rank-math-breadcrumb .separator,
.spm-pagehead .rank-math-breadcrumb .last {
  color: var(--spm-steel);
}

/* CTA-Band (Element 615, vor dem Footer auf allen Seiten) */
.spm-cta-band {
  background: var(--spm-navy);
  color:      var(--spm-white);
  padding:    clamp(40px, 6vw, 72px) 0;
}
.spm-cta-band h2 {
  color:  var(--spm-white);
  margin: 0 0 0.4em;
}
.spm-cta-band p {
  color:     var(--spm-steel);
  max-width: 64ch;
  margin:    0 0 1.5em;
}
.spm-cta-band p a,
.spm-cta-band .spm-tel a {
  color:                 var(--spm-white);
  text-decoration:       underline;
  text-underline-offset: 3px;
}
.spm-cta-band .spm-actions p { margin: 0; }

/* Auf dunklen Flächen ist der primäre Button weiß (Rot auf Nachtblau hätte nur 2,96:1) */
.spm-cta-band .spm-btn--primary .wp-block-button__link,
.spm-section--navy .spm-btn--primary .wp-block-button__link {
  background-color: var(--spm-white);
  border-color:     var(--spm-white);
  color:            var(--spm-navy) !important;
}
.spm-cta-band .spm-btn--primary .wp-block-button__link:hover,
.spm-section--navy .spm-btn--primary .wp-block-button__link:hover {
  background-color: var(--spm-steel) !important;
  border-color:     var(--spm-steel) !important;
  color:            var(--spm-navy) !important;
}


/* ============================================================
   18. STELLEN-LISTE
   ============================================================ */

.spm-jobs .job-postings-list {
  list-style: none;
  padding:    0;
  margin:     0;
}

.spm-jobs .job-postings-item,
.spm-jobs article {
  background:    var(--spm-white);
  border:        1px solid var(--spm-steel);
  border-radius: 6px;
  padding:       20px 24px;
  margin-bottom: 16px;
  display:       flex;
  justify-content: space-between;
  align-items:   center;
  flex-wrap:     wrap;
  gap:           12px;
}

/* Englische Feldbezeichner anpassen (wo CSS greifen kann) */
.spm-jobs .job-date::before { content: 'Datum: '; font-weight: 600; }


/* ============================================================
   19. 360-PX-ÜBERLAUF BEHEBEN
   gb-element-370419e8 und Geschwister: kein overflow:hidden,
   stattdessen hyphens + overflow-wrap (MOB-01, GAP-S-01/03)
   ============================================================ */

.gb-element-370419e8,
.gb-element-370419e8 *,
.gb-element-370419e8 + * {
  overflow-x:   clip; /* clip statt hidden: kein Scroll-Container */
  overflow-wrap: break-word;
  hyphens:       auto;
  max-width:     100%;
}

/* GB-Hero-H1-Klassen mit clamp (Ursache: GB-Inline-Size-Werte ueberschreiben globale h1) */
.gb-text-885095c8,
.gb-text-d89d702b {
  font-size:     var(--spm-h1) !important;
  line-height:   1.1 !important;
  overflow-wrap: break-word;
  hyphens:       auto;
  max-width:     100%;
}


/* ============================================================
   20. TABELLEN IN BEITRAEGEN
   Scrollcontainer (tabindex und role werden per JS gesetzt)
   ============================================================ */

.entry-content table,
.spm-section table {
  min-width:        500px;
  width:            100%;
  border-collapse:  collapse;
  font-size:        0.9375rem;
  background:       var(--spm-white);
}

.entry-content table th,
.spm-section table th {
  background:  var(--spm-navy);
  color:       var(--spm-white);
  padding:     10px 14px;
  font-weight: 600;
  text-align:  left;
}

.entry-content table td,
.spm-section table td {
  padding:      10px 14px;
  border-bottom: 1px solid var(--spm-steel);
}

.entry-content table tr:nth-child(even) td,
.spm-section table tr:nth-child(even) td {
  background: var(--spm-gray-100);
}

/* Scroll-Wrapper (per JS .spm-table-scroll-wrap gesetzt) */
.spm-table-scroll-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin:     1.5em 0;
}

/* .table-scroll in vorhandenem Seiteninhalt (Leistungsseiten, Zertifikate) */
.table-scroll {
  overflow-x:               auto;
  -webkit-overflow-scrolling: touch;
  display:                  block;
}

/* Kleintext auf dunklen Flächen */
.site-footer .spm-footnote,
.spm-section--navy .spm-footnote,
.spm-cta-band .spm-footnote { color: var(--spm-steel); }
.site-footer p a,
.spm-cta-band p a { color: var(--spm-white); }

/* Kleintext: Datenschutzhinweis unter Formular, Footer-Kurztext */
.spm-footnote {
  font-size:   0.8125rem; /* 13px */
  line-height: 1.5;
  /* gray-700 (#384769) auf Weiss = 9,24:1; ersetzt gray-500 (3,92:1, WCAG-Fehler) */
  color:       var(--spm-gray-700);
}


/* ============================================================
   21. FOOTER
   ============================================================ */

.site-footer {
  background-color: var(--spm-navy);
  color:            var(--spm-white);
}

.site-info {
  background-color: var(--spm-ink);
  color:            rgba(255,255,255,0.65);
}

/* Footer-Tap-Targets: min. 44 px (MOB WCAG) */
.footer-widgets a,
.site-info a {
  display:       inline-flex;
  align-items:   center;
  min-height:    44px;
  padding-top:   4px;
  padding-bottom: 4px;
  color:         var(--spm-steel) !important;
  text-decoration: none;
}

.footer-widgets a:hover,
.site-info a:hover {
  color:           var(--spm-white) !important;
  text-decoration: underline;
}

/* Footer-Spalten: eigenes Raster statt WP-Columns-Flex (Blockstyles werden im Element spät geladen) */
.spm-footer-cols.wp-block-columns {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   32px;
  margin:                0;
}
@media (min-width: 640px)  { .spm-footer-cols.wp-block-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .spm-footer-cols.wp-block-columns { grid-template-columns: 1.4fr 1fr 1.2fr 1fr; } }
.spm-footer-cols .wp-block-column { min-width: 0; }
.spm-footer a { color: var(--spm-steel); }
.spm-footer a:hover,
.spm-footer a:focus { color: var(--spm-white); text-decoration: underline; }
.spm-footer .spm-footnote { max-width: none; }
.spm-footer .wp-block-separator {
  margin:           2.5rem 0 1.5rem;
  border:           0;
  border-top:       1px solid rgba(255, 255, 255, 0.2);
  background:       none;
  opacity:          1;
}
.spm-footer li a {
  display:     inline-flex;
  align-items: center;
  min-height:  36px;
}

.spm-footer-col h3,
.spm-footer-cols h3 {
  color:          var(--spm-white) !important;
  font-family:    var(--spm-font-head);
  font-size:      1.125rem;
  font-weight:    600;
  margin-bottom:  0.5em;
  margin-top:     0;
}

.spm-footer-col ul,
.spm-footer-cols ul {
  list-style: none;
  padding:    0;
  margin:     0;
}

.spm-footer-col li,
.spm-footer-cols li {
  margin-bottom: 0.4em;
  max-width:     none;
}

/* Social Icons ohne Outline-Rahmen (VIS-13) */
.footer-widgets .social-icons a,
.footer-widgets a[class*="social"],
.footer-widgets a[href*="facebook"],
.footer-widgets a[href*="instagram"],
.footer-widgets a[href*="linkedin"],
.footer-widgets a[href*="xing"] {
  background: transparent !important;
  border:     none !important;
  padding:    8px;
  min-height: 44px;
  min-width:  44px;
  display:    inline-flex;
  align-items: center;
  justify-content: center;
}


/* ============================================================
   23. COMPLIANZ-BANNER (Markenfarben, Kontrast)
   ============================================================ */

/* Banner-Container */
#cmplz-cookiebanner-container .cmplz-cookiebanner,
.cmplz-cookiebanner {
  font-family:      var(--spm-font-text) !important;
  background-color: var(--spm-navy) !important;
  color:            var(--spm-white) !important;
  border-top:       3px solid var(--spm-red);
}

/* Kind-Elemente explizit weiss (Complianz setzt .cmplz-title auf #222222 mit hoeherer Spezifitaet) */
.cmplz-cookiebanner .cmplz-title,
.cmplz-cookiebanner [id^="cmplz-header"],
.cmplz-cookiebanner [id^="cmplz-message"],
.cmplz-cookiebanner p,
.cmplz-cookiebanner span:not(.cmplz-icon) {
  color: var(--spm-white) !important;
}

/* Dismissed: DOM ausblenden damit axe kein Kontrast-Check auf nicht-sichtbarem Banner macht */
.cmplz-cookiebanner.cmplz-dismissed {
  display:    none !important;
  visibility: hidden !important;
}

.cmplz-cookiebanner a,
.cmplz-cookiebanner .cmplz-link {
  color: var(--spm-steel) !important;
}

/* Platzhalter für blockierte Inhalte (Vimeo vor Einwilligung) */
.cmplz-blocked-content-notice {
  background-color: var(--spm-navy) !important;
  color:            var(--spm-white) !important;
}
.cmplz-blocked-content-notice a,
.cmplz-blocked-content-notice .cmplz-links a {
  color:           var(--spm-white) !important;
  text-decoration: underline;
}

/* Accept-Button: Rot */
.cmplz-cookiebanner .cmplz-btn.cmplz-accept,
.cmplz-accept {
  background-color: var(--spm-red) !important;
  color:            var(--spm-white) !important;
  border-color:     var(--spm-red) !important;
}

/* Ablehnen: Sekundaer */
.cmplz-cookiebanner .cmplz-btn.cmplz-deny,
.cmplz-deny {
  background-color: transparent !important;
  border:           2px solid var(--spm-white) !important;
  color:            var(--spm-white) !important;
}

.cmplz-cookiebanner .cmplz-header,
.cmplz-cookiebanner h2,
.cmplz-cookiebanner h3 {
  color: var(--spm-white) !important;
}


/* ============================================================
   24. BLOG-STYLING (aus wp-custom-css.css, modernisiert)
   Nur auf .single-post - nicht auf Stellenanzeigen-Einzelseiten
   ============================================================ */

.single-post .entry-content,
.single-post .entry-content p {
  font-size:   var(--spm-text-base);
  line-height: 1.7;
}

@media (max-width: 480px) {
  .single-post .entry-content,
  .single-post .entry-content p {
    font-size:   0.9375rem;
    line-height: 1.65;
  }
}

.single-post .entry-content h2 {
  font-size:   1.6em;
  line-height: 1.25;
  margin:      2.4em 0 0.8em;
  padding-top: 1em;
  border-top:  1px solid var(--spm-steel);
}

.single-post .entry-content h3 {
  font-size:   1.2em;
  line-height: 1.3;
  margin:      1.8em 0 0.6em;
}

.single-post .entry-content h4 {
  font-size:   1.05em;
  line-height: 1.35;
  margin:      1.4em 0 0.4em;
  color:       var(--spm-navy);
}

/* Erste Absatz: Kurzantwort-Box */
.single-post .entry-content > p:first-of-type {
  background:    var(--spm-gray-100);
  border-left:   4px solid var(--spm-navy);
  padding:       18px 22px;
  border-radius: 4px;
  font-size:     1.02em;
  line-height:   1.65;
  margin-bottom: 1.6em;
}

.single-post .entry-content > p:first-of-type strong:first-child {
  color:       var(--spm-navy);
  font-weight: 700;
}

/* Zweiter Absatz mit Anker-Links: Jump-Navigation */
.single-post .entry-content > p:nth-of-type(2):has(a[href^="#"]) {
  background:    var(--spm-gray-100);
  border:        1px solid var(--spm-steel);
  border-radius: 6px;
  padding:       14px 18px;
  font-size:     0.95em;
  color:         var(--spm-gray-700);
  margin-bottom: 2em;
}

/* Blockquote */
.single-post .entry-content blockquote {
  background:   var(--spm-gray-100);
  border-left:  4px solid var(--spm-gray-700);
  padding:      16px 20px;
  margin:       1.8em 0;
  color:        var(--spm-ink);
  font-style:   normal;
}

.single-post .entry-content > blockquote:last-of-type {
  background:  var(--spm-steel);
  border-color: var(--spm-navy);
  color:       var(--spm-ink);
}

/* Tabellen im Blog */
@media (max-width: 768px) {
  .single-post .entry-content table {
    display:    block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
}

/* Links im Blog */
.single-post .entry-content a:not(.button):not(.wp-block-button__link) {
  color:              var(--spm-navy);
  text-decoration:    underline;
  text-underline-offset: 3px;
}
.single-post .entry-content a:not(.button):not(.wp-block-button__link):hover {
  color: var(--spm-red);
}

/* Jump-Anker-Pills */
.single-post .entry-content > p:nth-of-type(2) a[href^="#"] {
  display:         inline-block;
  background:      var(--spm-white);
  border:          1px solid var(--spm-gray-300);
  color:           var(--spm-navy) !important;
  padding:         4px 12px;
  border-radius:   999px;
  text-decoration: none !important;
  font-size:       0.92em;
  font-weight:     500;
  margin:          2px 4px 2px 0;
  transition:      all 0.15s ease;
}
.single-post .entry-content > p:nth-of-type(2) a[href^="#"]:hover {
  background:   var(--spm-navy);
  color:        var(--spm-white) !important;
  border-color: var(--spm-navy);
}

/* CTA-Box im Blog */
.single-post .entry-content .cta-box {
  background:    var(--spm-navy);
  color:         var(--spm-white);
  padding:       24px 28px;
  border-radius: 8px;
  margin:        2em 0;
}
.single-post .entry-content .cta-box h4,
.single-post .entry-content .cta-box strong:first-child {
  color:     var(--spm-white);
  margin-top: 0;
}
.single-post .entry-content .cta-box p { color: var(--spm-steel); }
.single-post .entry-content .cta-box a {
  display:         inline-block;
  background:      var(--spm-white);
  color:           var(--spm-navy) !important;
  padding:         10px 20px;
  border-radius:   4px;
  font-weight:     600;
  text-decoration: none !important;
  transition:      background 0.2s ease;
}
.single-post .entry-content .cta-box a:hover { background: var(--spm-steel); }

/* FAQ-Fragen */
.single-post .entry-content h2[id="faq"] ~ h3 {
  background:    var(--spm-gray-100);
  padding:       12px 16px;
  border-radius: 4px;
  border-left:   3px solid var(--spm-navy);
  font-size:     1.1em;
}

/* Blog-Featured-Image begrenzen */
.single-post .featured-image img,
.single-post .post-thumbnail img,
.single-post .wp-post-image {
  max-height:    380px;
  width:         100%;
  object-fit:    cover;
  border-radius: 6px;
}
@media (max-width: 768px) {
  .single-post .featured-image img,
  .single-post .post-thumbnail img,
  .single-post .wp-post-image { max-height: 240px; }
}

/* Beiträge: weniger Leerraum unter dem Seitenkopf */
.single-post.one-container .site-content { padding-top: clamp(24px, 4vw, 48px); }
.spm-post-hero {
  display:       block;
  width:         100%;
  height:        auto;
  aspect-ratio:  16 / 9;
  object-fit:    cover;
  border-radius: 6px;
  margin:        0 0 2rem;
}

/* Doppel-H1 auf Beiträgen: Titel kommt aus dem Seitenkopf (Element 617) */
.single-post .inside-article > .entry-header {
  display: none;
}
.single-post .featured-image {
  margin: 0 0 2rem;
}
.single-post .featured-image img {
  aspect-ratio: 16 / 9;
  max-height:   none;
}

/* Hero-Background-Bild auf Posts */
.single-post .gb-element-0a35a33a {
  background-size:     cover !important;
  background-position: center center !important;
  background-repeat:   no-repeat !important;
}


/* ============================================================
   25. KONTAKT-SEITE: CONTACT-BAR AUSBLENDEN (VIS-14)
   Kontakt-Seite ID 37 (aus REST-Dump pages.json bestätigt)
   ============================================================ */

.page-id-37 .contact-bar,
.page-id-37 .spm-phone-bar {
  display: none !important;
}

/* Transport-anfragen-Button im CTA-Band auf Kontakt-Seite ausblenden
   (Formular ist bereits oben - Redundanz vermeiden; Nachweis-Tafeln bleiben sichtbar) */
.page-id-37 .spm-cta-band-btn {
  display: none !important;
}


/* ============================================================
   26. DRUCKSTIL (MINIMAL)
   ============================================================ */

@media print {
  .spm-phone-mobile-cta,
  .spm-phone-bar,
  .site-header,
  .site-footer,
  .spm-cta-band,
  #cmplz-cookiebanner-container,
  .wp-block-buttons { display: none !important; }

  body {
    font-size:   11pt;
    color:       #000;
    background:  #fff;
    padding-bottom: 0 !important;
  }

  a::after {
    content:   " (" attr(href) ")";
    font-size: 0.8em;
    color:     #555;
  }

  .spm-wrap { max-width: 100%; padding: 0; }
}


/* ============================================================
   27. REDUZIERTE-BEWEGUNG
   ============================================================ */

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


/* ============================================================
   28. FORMULAR-STYLING (WPForms)
   ============================================================ */

.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container input[type="tel"],
.wpforms-container input[type="url"],
.wpforms-container textarea,
.wpforms-container select {
  border:        1px solid var(--spm-gray-300);
  border-radius: 4px;
  padding:       10px 14px;
  font-family:   var(--spm-font-text);
  font-size:     var(--spm-text-base);
  color:         var(--spm-ink);
  background:    var(--spm-white);
  width:         100%;
}

.wpforms-container input:focus,
.wpforms-container textarea:focus,
.wpforms-container select:focus {
  outline:      3px solid var(--spm-focus);
  border-color: var(--spm-navy);
}

.wpforms-container .wpforms-error-container,
.wpforms-container .wpforms-field-error {
  color:     var(--spm-red);
  font-size: 0.875rem;
}


/* ============================================================
   29. DIVERSES / KLEINREPARATUREN
   ============================================================ */

/* H2-Versalien auf Startseite und Ueber-uns entfernen (VIS-07) */
.home h2,
.page-id-2 h2 {
  text-transform: none;
}

/* ISO-Bild im Footer (laut REPORT leeres div) */
.site-footer .gb-element:empty { display: none; }

/* Instagram aria-label-Bugfix: wird per PHP korrigiert */

/* Breadcrumb-Styling wenn Rank Math aktiv */
.rank-math-breadcrumb {
  font-size:   0.875rem;
  /* gray-700 (#384769) auf Weiss = 9,24:1; ersetzt gray-500 (3,92:1, WCAG-Fehler) */
  color:       var(--spm-gray-700);
  padding:     8px 0;
}

.rank-math-breadcrumb a {
  color:            var(--spm-navy) !important;
  /* Unterstreichung: WCAG link-in-text-block (Separator-Zeichen umgibt den Link) */
  text-decoration:  underline;
  text-underline-offset: 2px;
}
.rank-math-breadcrumb a:hover {
  text-decoration-thickness: 2px;
}

/* Click-to-Call mobil: Abstand beachtet padding-bottom auf body */
@media (max-width: 768px) {
  .spm-phone-mobile-cta {
    bottom: 16px;
    /* Mit sichtbarem Complianz-Banner wird bottom per JS angepasst */
  }
}

/* Anruf-Button weicht dem Cookie-Banner per transform aus (design.js) */
.spm-phone-mobile-cta { transition: transform 0.2s ease; }