/*
Theme Name: SI Pable
Theme URI: https://sobek-innovations.de
Author: Sobek-Innovations
Author URI: https://sobek-innovations.de
Description: Ein minimalistisches WordPress Theme für Pable - entwickelt von Sobek-Innovations. Unterstützt den Gutenberg Block-Editor und Full Site Editing.
Version: 1.0.16
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: si-pable
Domain Path: /languages
Tags: block-styles, wide-blocks, responsive-layout, custom-colors, custom-logo, editor-style
*/

/* ============================================================
   DESIGN TOKENS – WICHTIG: Diese Datei wird vom Editor geladen
   ============================================================ */

:root {
  /* Brand-Farben */
  --color-vivid-royal: #0b14b3;
  --color-vivid-royal-hover: #101ad9;
  --color-vivid-royal-active: #16108b;
  --color-white: #ffffff;
  --color-dust-grey: #d1d0c7;
  --color-dust-grey-dark: #979984;
  --color-divider: #b4b2a3;
  --color-white-transparent: #EFEEFE33;
  --color-pitch-black: #101208;

  /* Abstände */
  --spacing-service-item: 1.25rem; /* 20px */

  /* Schriftarten */
  --font-heading: "Inter", sans-serif;
  --font-body: "Manrope", sans-serif;

  /* Fluid Schriftgrößen – kein fixes Pixel-System (clamp für alle Viewports) */
  --font-size-eyebrow: 0.75rem;
  --font-size-h1: clamp(3rem, 8vw, 5.125rem); /* 48px → 82px  */
  --font-size-h2: clamp(2.25rem, 5vw, 3.1875rem); /* 36px → 51px  */
  --font-size-h3: clamp(1.75rem, 4vw, 2.5rem); /* 28px → 40px  */
  --font-size-h4: clamp(1.375rem, 3vw, 2rem); /* 22px → 32px  */
  --font-size-body: clamp(1rem, 2.5vw, 1.125rem); /* 16px → 18px  */
  --font-size-body-small: 1rem; /* 16px         */

  /* Zeilenhöhen */
  --line-height-eyebrow: 113%;
  --line-height-h1: 120%;
  --line-height-h2: 120%;
  --line-height-h3: 120%;
  --line-height-h4: 130%;
  --line-height-body: 150%;
  --line-height-body-small: 140%;

  /* Buchstabenabstände */
  --letter-spacing-eyebrow: -0.03em;
  --letter-spacing-h1: -0.03em;
  --letter-spacing-h2: -0.02em;
  --letter-spacing-h3: -0.01em;
  --letter-spacing-h4: -0.01em;
  --letter-spacing-body: 0.02em;
  --letter-spacing-body-small: 0em;

  /* Layout-Breiten */
  --content-width: 800px;
  --wide-width: 1400px;

  /* Nummerierte Service-Items */
  --numbered-item-number-font-family: "Inter", sans-serif;
  --numbered-item-number-font-weight: 700;
  --numbered-item-number-font-size: 173px;
  --numbered-item-number-line-height: 130%;
  --numbered-item-number-letter-spacing: -0.01em;
  --numbered-item-number-color: rgba(255, 255, 255, 0.4);
  --numbered-item-number-text-align: center;
  --numbered-section-left-width: 650px;
  --numbered-item-number-top-offset: calc(-0.15em - 2px);
  --numbered-item-padding-bottom: 3rem;
  --numbered-item-margin-bottom: 3rem;
}

/* ============================================
   AUTOMATISCHE SECTION-ABSTÄNDE (Editor + Frontend)
   Jede Gruppe/Cover bekommt automatisch Padding.
   Der Redakteur muss NICHTS einstellen.
   ============================================ */

/* Standard-Abstand für alle Gruppen */
.wp-block-group,
.wp-block-cover {
  padding-top: 6rem;
  padding-bottom: 6rem;
}

/* Kein Padding bei verschachtelten Gruppen */
.wp-block-group .wp-block-group,
.wp-block-group .wp-block-cover,
.wp-block-cover .wp-block-group,
.wp-block-cover .wp-block-cover {
  padding-top: 0;
  padding-bottom: 0;
}

/* Spezielle Section-Styles (Block-Styles im Editor wählbar) */
.is-style-hero-section {
  padding-top: 8rem;
  padding-bottom: 8rem;
  min-height: 80vh;
  display: flex;
  align-items: center;
}

.is-style-content-section {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

/* Startseite + Pages: volle Breite */
body.home .site-main,
body.page .site-main {
  max-width: 100% !important;
  padding: 0 !important;
}

.content-area--front-page {
  max-width: 100% !important;
  margin: 0;
  padding: 0;
}

.content-area--front-page .page-content--front-page {
  max-width: 100%;
}

.content-area--front-page .entry-content {
  max-width: 100%;
  margin-top: 0;
}

/* Kein Abstand zwischen Menü und Hero auf Startseite */
.content-area--front-page
  .entry-content
  > .wp-block-group.alignfull:first-child {
  padding-top: 0;
  padding-bottom: 0;
}

/* ============================================
   LAYOUT-HILFSKLASSEN (für Editor + Frontend)
   ============================================ */

/* Hintergrundfarben */
.bg-vivid-royal {
  background-color: var(--color-vivid-royal);
}

.bg-pitch-black {
  background-color: var(--color-pitch-black);
}

.bg-dust-grey {
  background-color: var(--color-dust-grey);
}

/* Textfarben */
.text-white {
  color: var(--color-white) !important;
}

.text-white h1,
.text-white h2,
.text-white h3,
.text-white h4,
.text-white p {
  color: var(--color-white);
}

.text-vivid-royal {
  color: var(--color-vivid-royal);
}

/* ============================================
   Buttons (für Editor Vorschau)
   Figma: Radius 6px, Padding 16px 32px
   ============================================ */

/* Primary */
.wp-block-button__link {
  background-color: var(--color-vivid-royal);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--font-size-body);
  padding: 16px 32px;
  border-radius: 6px;
  text-decoration: none;
  display: inline-block;
  border: none;
  cursor: pointer;
}

.wp-block-button__link:hover {
  background-color: var(--color-vivid-royal-hover);
}

/* Primary Outline */
.is-style-primary-outline .wp-block-button__link {
  background-color: transparent;
  color: var(--color-vivid-royal);
  border: 2px solid var(--color-vivid-royal);
  padding: 14px 30px;
}

/* Secondary */
.is-style-secondary .wp-block-button__link {
  background-color: var(--color-pitch-black);
  color: var(--color-white);
}

/* Secondary Outline */
.is-style-secondary-outline .wp-block-button__link {
  background-color: transparent;
  color: var(--color-pitch-black);
  border: 2px solid var(--color-pitch-black);
  padding: 14px 30px;
}

/* Text Label Dark */
.is-style-text-label-dark .wp-block-button__link {
  background-color: transparent;
  color: var(--color-pitch-black);
  font-weight: 500;
  padding: 0;
  border-radius: 0;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Text Label Light */
.is-style-text-label-light .wp-block-button__link {
  background-color: transparent;
  color: var(--color-white);
  font-weight: 500;
  padding: 0;
  border-radius: 0;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Icon Only */
.is-style-icon-only .wp-block-button__link {
  background-color: transparent;
  color: var(--color-pitch-black);
  padding: 8px;
  border-radius: 50%;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Outline (alt) */
.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link {
  background-color: transparent;
  color: var(--color-white);
  border: 2px solid var(--color-white);
  border-radius: 6px;
  padding: 14px 30px;
}

.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background-color: var(--color-white-transparent);
}

.is-style-outline .wp-block-button__link:active,
.wp-block-button.is-style-outline .wp-block-button__link:active {
  background-color: var(--color-white-transparent);
  border-color: var(--color-white-transparent);
}

/* Small (alt) */
.is-style-small .wp-block-button__link {
  font-weight: 500;
  padding: 12px 24px;
  border-radius: 6px;
}

/* --- Hero Unterseiten --- */
.hero-unterseiten {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  text-align: left;
  color: var(--color-white);
  padding-top: 0;
  padding-bottom: 3rem;
}

.hero-unterseiten .wp-block-cover__inner-container {
  width: 100%;
  flex: 1;
}

.hero-unterseiten .hero-unterseiten-content {
  position: relative;
  z-index: 2;
  max-width: var(--wide-width);
  margin: 0 auto;
  padding: 28rem 1.5rem 0 !important;
  width: 100%;
}

.hero-unterseiten .hero-unterseiten-title {
  color: var(--color-white);
  text-align: left;
  margin: 0;
  max-width: none;
  font-family: var(--font-heading);
  font-size: var(--font-size-h1);
  line-height: var(--line-height-h1);
  letter-spacing: var(--letter-spacing-h1);
  font-weight: 700;
  white-space: pre-wrap;
  background: transparent;
  overflow-wrap: break-word;
  word-wrap: break-word;
  overflow: visible;
  padding: 0;
  border: none;
}

/* Mobile */
@media (max-width: 767px) {
  .hero-unterseiten {
    min-height: 50vh;
    padding-bottom: 2rem;
  }

  .hero-unterseiten .hero-unterseiten-content {
    padding-top: 12rem;
  }

  .hero-unterseiten .hero-unterseiten-title {
    font-size: clamp(2rem, 7vw, 3rem);
  }
}

/* ============================================
    STARTSEITE – Sektions-Klassen
    ============================================ */

/* --- Hero Sektion --- */
.hero-section {
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  text-align: left;
  color: var(--color-white);
  padding-top: 0;
  padding-bottom: 6rem;
}

.hero-section .hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(16, 18, 8, 0.55) 0%,
    rgba(16, 18, 8, 0.75) 100%
  );
  z-index: 1;
}

.hero-section .wp-block-cover__inner-container {
  width: 100%;
  flex: 1;
}

.hero-section .hero-content {
  position: relative;
  z-index: 2;
  max-width: var(--wide-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

@media (min-width: 768px) {
  .hero-section .hero-content {
    padding-top: 15rem;
  }
}

.hero-section h1,
.hero-section p {
  color: var(--color-white);
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

.hero-section h1 {
  margin-bottom: 1.5rem;
  max-width: 900px;
}

.hero-section p {
  opacity: 0.9;
  margin-bottom: 2rem;
  max-width: 800px;
}

.hero-section .hero-buttons,
.hero-section .wp-block-buttons {
  display: flex;
  gap: 1rem;
  justify-content: flex-start !important;
  flex-wrap: wrap;
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* --- Feature Grid (2x2) --- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 16px !important;
  align-content: start !important;
  grid-auto-rows: 1fr;
}

.feature-grid > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

@media (max-width: 767px) {
  .feature-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (min-width: 992px) {
  .feature-grid {
    grid-template-columns: repeat(2, 315px) !important;
    gap: 16px !important;
    justify-content: flex-start;
  }

  body .wp-block-columns.features-4-grid-columns {
    /* kein Gap-Override – WordPress-Standard gilt */
  }
}

/* ============================================
    CYLINDER PROBLEM CTA – Zylinder-Diagnose (CSS only)
   ============================================ */

.cylinder-problem-cta-wrapper {
  background-color: var(--color-pitch-black);
  color: var(--color-white);
  padding: 0 !important;
}

body .wp-block-columns.cylinder-problem-cta {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch !important;
  min-height: 600px;
}

body .wp-block-columns.cylinder-problem-cta > .wp-block-column {
  flex-basis: auto !important;
  width: auto !important;
  margin-left: 0 !important;
  height: 100%;
}

/* Linke Spalte: Text-Inhalt */
.cylinder-problem-cta-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 6rem 4rem 6rem max(1.5rem, calc((100% - var(--wide-width)) / 2));
  gap: 2rem;
  height: 100%;
}

.cylinder-problem-cta-content h2 {
  color: var(--color-white);
  font-size: 3.5rem;
  line-height: 1.1;
  font-weight: 700;
  margin: 0;
  margin-bottom: auto;
}

.cylinder-problem-cta-content p {
  color: var(--color-dust-grey);
  font-size: 1.25rem;
  line-height: 1.6;
  margin: 0;
  max-width: 480px;
}

.cylinder-problem-cta-content p strong {
  color: var(--color-white);
  font-weight: 700;
}

.cylinder-problem-cta-content .wp-block-buttons {
  margin-top: 0.5rem;
}

/* Rechte Spalte: Bild – volle Höhe der Sektion */
.cylinder-problem-cta-image {
  position: relative;
  overflow: hidden;
  min-height: 500px;
  height: 100%;
}

.cylinder-problem-cta-image figure,
.cylinder-problem-cta-image .wp-block-image {
  margin: 0;
  height: 100%;
  width: 100%;
}

.cylinder-problem-cta-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Tablet */
@media (max-width: 991px) {
  .cylinder-problem-cta-content {
    padding: 4rem 3rem 4rem max(1.5rem, calc((100% - var(--wide-width)) / 2));
  }

  .cylinder-problem-cta-content h2 {
    font-size: 2.5rem;
  }
}

/* Mobile */
@media (max-width: 767px) {
  body .wp-block-columns.cylinder-problem-cta {
    grid-template-columns: 1fr !important;
  }

  .cylinder-problem-cta-content {
    padding: 3rem 1.5rem;
    order: 1;
  }

  .cylinder-problem-cta-image {
    min-height: 300px;
    order: 0;
  }
}

.feature-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  border-radius: 6px;
  background-color: var(--color-dust-grey);
  transition: box-shadow 0.2s ease;
  border: none;
  min-height: 269px;
}

.feature-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.feature-card h4 {
  margin-bottom: 0.75rem;
  max-width: none;
}

.feature-card p {
  font-size: var(--font-size-body-small);
  line-height: var(--line-height-body-small);
  margin-bottom: 0;
  opacity: 0.8;
}

.feature-card .feature-icon {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: var(--color-vivid-royal);
}

/* Features 4 Grid: Linke Spalte – Text nach unten schieben */
body .wp-block-columns.features-4-grid-columns {
  align-items: stretch !important;
}

@media (max-width: 991px) {
  body .wp-block-columns.features-4-grid-columns {
    /* kein Gap-Override – WordPress-Standard gilt */
  }
}

body .wp-block-columns.features-4-grid-columns > .wp-block-column:first-child {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 2rem !important;
}

body
  .wp-block-columns.features-4-grid-columns
  > .wp-block-column:first-child
  > p.features-paragraph {
  margin-top: auto !important;
  margin-bottom: 0 !important;
  max-width: 480px;
}

/* Feature Cards kompacter */
body .wp-block-group.feature-card {
  padding: 2rem !important;
}

/* --- Service Liste mit Trennlinien --- */
.service-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.service-list li {
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--color-dust-grey);
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--font-size-body);
  color: var(--color-pitch-black);
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: color 0.2s ease;
}

.service-list li:first-child {
  border-top: 1px solid var(--color-dust-grey);
}

.service-list li:hover {
  color: var(--color-vivid-royal);
}

.service-list li .service-arrow {
  color: var(--color-vivid-royal);
  font-size: 1.25rem;
}

/* --- Content Cards 3 Columns (Editor Styles) --- */
.content-cards-section {
  padding-top: 6rem;
  padding-bottom: 6rem;
}

.content-cards-inner {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.content-cards-heading-wrap {
  max-width: 640px;
  margin-left: auto;
  margin-right: 0;
  margin-bottom: 5rem;
}

.content-cards-heading-wrap h2 {
  text-align: left;
  margin-top: 0;
  margin-bottom: 0;
}

.content-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr) !important;
  grid-auto-rows: 1fr;
  gap: 1.25rem;
}

.content-cards-grid > .wp-block-group {
  margin-top: 0;
  margin-bottom: 0;
}

.wp-block-group.content-card.has-background {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 6px;
  padding: 1.5rem;
  min-height: 240px;
  height: 100%;
}

.wp-block-group.content-card.has-background h4 {
  margin-top: 0;
  margin-bottom: 0.75rem;
}

.wp-block-group.content-card.has-background p {
  margin: 0;
  font-size: var(--font-size-body-small);
  line-height: var(--line-height-body-small);
}

@media (max-width: 991px) {
  .content-cards-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-auto-rows: auto;
  }

  .content-cards-heading-wrap {
    max-width: 100%;
    margin-left: 0;
    margin-bottom: 4rem;
  }
}

@media (max-width: 767px) {
  .content-cards-section {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .content-cards-grid {
    grid-template-columns: 1fr !important;
  }

  .wp-block-group.content-card.has-background {
    min-height: auto;
    padding: 1.5rem;
    height: auto;
  }
}

/* ============================================
   ABOUT SPLIT – Team & Werte (Editor-Vorschau)
   ============================================ */

.about-split {
  padding-top: 6rem;
  padding-bottom: 6rem;
}

/* Linke Spalte nimmt exakt die Breite der Überschrift ein (auto).
   Paragraph max-width: 520px verhindert Aufblasen der Spalte.
   Rechte Spalte füllt den Rest (1fr). */
body .wp-block-columns.about-split-columns {
  display: grid !important;
  grid-template-columns: auto 1fr;
  gap: 4rem 6rem;
  align-items: stretch !important;
}

body .wp-block-columns.about-split-columns > .wp-block-column {
  flex-basis: auto !important;
  width: auto !important;
  margin-left: 0 !important;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

/* Heading: exakte 3-Zeilen-Breite durch <br> */
.about-split-heading {
  margin-top: 0;
  margin-bottom: 10rem;
  width: max-content !important;
  max-width: none !important;
}

/* Logo rechts oben, bündig am rechten Spaltenrand */
.about-split-logo {
  margin: 0;
  margin-left: auto;
  margin-bottom: 10rem;
}

.about-split-logo .wp-block-site-logo__container,
.about-split-logo .custom-logo-link {
  display: block;
}

.about-split-logo img {
  max-width: 160px;
  height: auto;
  display: block;
}

/* Paragraph max-width hält linke Spalte schmal */
.about-split-left-bottom p {
  margin-bottom: 1.5rem;
  max-width: 520px;
}

/* Bild natürliche Größe, space-between drückt es nach unten */
.about-split-image {
  margin: 0;
}

.about-split-image img {
  border-radius: 6px;
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: cover;
  display: block;
}

/* Tablet / kleine Laptops: stapeln ab 1200px */
@media (max-width: 1200px) {
  body .wp-block-columns.about-split-columns {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  body .wp-block-columns.about-split-columns > .wp-block-column {
    justify-content: flex-start;
    height: auto;
  }

  .about-split-logo {
    margin-left: 0;
  }

  .about-split-logo img {
    max-width: 120px;
  }

  .about-split-left-bottom p {
    max-width: none;
  }

  .about-split-heading {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 2rem;
  }
}

/* ============================================
   IMAGE TEXT SPLIT – Bild links, Text rechts
   ============================================ */

.image-text-split-section {
  padding-top: 6rem;
  padding-bottom: 6rem;
  background-color: var(--color-white);
}

body .wp-block-columns.image-text-split-columns {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 6rem;
  align-items: stretch !important;
  max-width: var(--wide-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

body .wp-block-columns.image-text-split-columns > .wp-block-column {
  flex-basis: auto !important;
  width: auto !important;
  margin-left: 0 !important;
}

/* Linke Spalte: Bild */
.image-text-split-image-column {
  display: flex;
  align-items: flex-start;
}

.image-text-split-image {
  margin: 0;
  width: 100%;
}

.image-text-split-image img {
  border-radius: 6px;
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: cover;
  display: block;
}

/* Rechte Spalte: Content */
.image-text-split-content-column {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
}

.image-text-split-heading {
  margin-top: 0;
  margin-bottom: 0;
  font-family: var(--font-heading);
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  letter-spacing: var(--letter-spacing-h2);
  font-weight: 700;
  color: var(--color-pitch-black);
}

.image-text-split-content {
  padding-top: 0;
  padding-bottom: 0;
}

.image-text-split-content > * {
  margin-bottom: 1.5rem;
}

.image-text-split-content > *:last-child {
  margin-bottom: 0;
}

.image-text-split-intro {
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-body);
  color: var(--color-pitch-black);
  margin-bottom: 1.5rem;
}

.image-text-split-intro strong {
  font-weight: 700;
  color: var(--color-pitch-black);
}

.image-text-split-text {
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-body);
  color: var(--color-pitch-black);
  margin-bottom: 2rem;
}

.image-text-split-buttons {
  margin-top: 0;
  margin-bottom: 0;
}

.image-text-split-button .wp-block-button__link {
  background-color: var(--color-vivid-royal);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--font-size-body);
  padding: 16px 32px;
  border-radius: 6px;
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.2s ease;
  border: none;
}

.image-text-split-button .wp-block-button__link:hover {
  background-color: var(--color-vivid-royal-hover);
  opacity: 1;
}

/* Tablet */
@media (max-width: 991px) {
  body .wp-block-columns.image-text-split-columns {
    gap: 3rem;
  }
}

/* Mobile: Stapeln */
@media (max-width: 767px) {
  .image-text-split-section {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  body .wp-block-columns.image-text-split-columns {
    grid-template-columns: 1fr !important;
    /* kein Gap-Override – WordPress-Standard gilt */
  }

  .image-text-split-image img {
    max-height: 350px;
  }

  .image-text-split-content-column {
    gap: 1.5rem;
  }

  .image-text-split-heading {
    margin-bottom: 0;
  }
}