/* ==========================================================================
   smartEngin – Block-Styles (Frontend & Editor)
   Nutzt die --se-* Variablen des Themes; mit Fallbacks, falls ein anderes
   Theme aktiv ist.
   ========================================================================== */

.seb-icon { display: inline-block; line-height: 1; }

/* --------------------------------------------------------------------------
   Topbar (obere Leiste)
   -------------------------------------------------------------------------- */
.seb-topbar {
  width: 100%;
  background: var(--se-topbar-bg, #11314A);
  color: var(--se-topbar-text, #FFFFFF);
  font-size: var(--se-topbar-font-size, 13px);
  /* Dezenter Schatten zur Menüleiste 2 – ein/aus + Intensität über
     smartEngin → Design → Header. z-index, damit der Schatten über der
     nächsten Leiste liegt. */
  position: relative;
  z-index: 3;
  box-shadow: var(--se-topbar-shadow, none);
}
.seb-topbar__inner {
  display: flex;
  align-items: center;                          /* alle Links auf gleicher Höhe */
  justify-content: var(--se-topbar-justify, flex-end);
  gap: var(--se-space-m, 24px);
  padding-block: var(--se-topbar-padding-y, 8px);
}
.seb-topbar__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: inherit;
  text-decoration: none;
  line-height: 1;
}
.seb-topbar__link i.ph { font-size: 1.15em; line-height: 1; }
.seb-topbar__link:hover { color: var(--se-topbar-link-hover, #4ED66F); }

/* --------------------------------------------------------------------------
   Breadcrumb (Pfad-Leiste)
   -------------------------------------------------------------------------- */
.seb-breadcrumb {
  width: 100%;
  background: var(--se-breadcrumb-bg, #EAECE7);
  color: var(--se-breadcrumb-text, #11314A);
  font-size: var(--se-breadcrumb-font-size, 13px);
  line-height: 1;                                   /* keine Zeilenhöhe-Aufblähung */
}
.seb-breadcrumb__inner {
  display: flex;
  align-items: center;                              /* vertikal mittig */
  flex-wrap: wrap;
  gap: 8px;
  line-height: 1;
  padding-block: var(--se-breadcrumb-padding-y, 4px);
}
.seb-breadcrumb a,
.seb-bc__current { display: inline-flex; align-items: center; gap: 4px; line-height: 1; }
.seb-breadcrumb a { color: inherit; text-decoration: none; }
.seb-breadcrumb a:hover { color: var(--se-color-primary, #37B971); }
.seb-bc__current { font-weight: 600; }
.seb-bc__sep { opacity: 0.5; }
.seb-breadcrumb i.ph { font-size: 1.1em; line-height: 1; display: inline-flex; align-items: center; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.seb-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--se-space-2xl, 64px) var(--se-space-gutter, 24px);
}
.seb-hero__inner {
  width: 100%;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--se-space-m, 24px);
}
/* Inhaltsbreite */
.seb-hero__inner--narrow { max-width: 820px; }
.seb-hero__inner--wide   { max-width: var(--se-menu-width, 1200px); }
.seb-hero__inner--full   { max-width: 100%; }

/* Textausrichtung (Mitte = Standard, Links optional) */
.seb-hero__inner--align-left { align-items: flex-start; text-align: left; }
.seb-hero__inner--align-left .seb-hero__buttons { justify-content: flex-start; }

/* Bild neben Text (Split-Layout) */
.seb-hero__inner--split {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--se-space-2xl, 64px);
  text-align: left;
}
.seb-hero__inner--split.seb-hero__inner--img-left { flex-direction: row-reverse; }
.seb-hero__inner--split .seb-hero__text  { flex: 1 1 52%; display: flex; flex-direction: column; gap: var(--se-space-m, 24px); align-items: flex-start; }
.seb-hero__inner--split .seb-hero__media { flex: 1 1 44%; }
.seb-hero__inner--split .seb-hero__buttons { justify-content: flex-start; }
.seb-hero__media img { width: 100%; height: auto; display: block; }

.seb-hero__title {
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  line-height: 1.1;
  margin: 0;
}
.seb-hero__subtitle {
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  margin: 0;
  opacity: 0.95;
}
.seb-hero__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--se-space-s, 16px);
  justify-content: center;
  margin-top: var(--se-space-s, 16px);
}
@media (max-width: 768px) {
  .seb-hero__inner--split { flex-direction: column; text-align: center; }
  .seb-hero__inner--split .seb-hero__text { align-items: center; }
  .seb-hero__inner--split .seb-hero__buttons { justify-content: center; }
}


/* --------------------------------------------------------------------------
   Design-Banner
   -------------------------------------------------------------------------- */
.seb-design-banner {
  --seb-db-stage-max: 1240px;
  --seb-db-content-ratio: 38%;
  --seb-db-height-desktop: 285px;
  --seb-db-height-tablet: 330px;
  --seb-db-height-mobile: 300px;
  --seb-db-image-height-tablet: 150px;
  --seb-db-image-height-mobile: 115px;
  --seb-db-pad-desktop: 36px;
  --seb-db-pad-mobile: 22px;
  --seb-db-img-x: 50%;
  --seb-db-img-y: 50%;
  --seb-db-content-bg: #FFFFFF;
  --seb-db-text: #11314A;
  --seb-db-dark: #11314A;
  --seb-db-accent: #37B971;
  --seb-db-neutral: #EAECE7;

  /* Außenflächen bei Vollbreite:
     - edge-left färbt den Bereich ganz links neben der weißen Textfläche.
     - edge-right färbt den Bereich ganz rechts neben dem Bild.
     Beide Werte sind im Block-Inspector unter "Außenflächen bei Vollbreite" änderbar. */
  --seb-db-edge-left: #FFFFFF;
  --seb-db-edge-right: #11314A;

  --seb-db-overlay-color: #11314A;
  --seb-db-overlay-opacity: .12;
  --seb-db-ribbon-w: clamp(42px, 4.2vw, 56px);
  --seb-db-accent-w: clamp(26px, 2.65vw, 36px);
  --seb-db-accent-h: clamp(34px, 3.45vw, 48px);

  position: relative;
  box-sizing: border-box;
  width: 100%;
  /* Hintergrund außerhalb der zentrierten Designfläche.
     Links vom Textfeld = --seb-db-edge-left, rechts vom Bild = --seb-db-edge-right. */
  background: linear-gradient(90deg, var(--seb-db-edge-left) 0 50%, var(--seb-db-edge-right) 50% 100%);
  color: var(--seb-db-text);
  overflow: hidden;
}
.seb-design-banner,
.seb-design-banner * { box-sizing: border-box; }

/* Breiten-Modi. Vollbreite bricht aus begrenzten Content-Containern aus,
   die eigentliche Designfläche bleibt zentriert und stabil. */
.seb-design-banner--width-full {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.seb-design-banner--width-normal .seb-design-banner__stage { max-width: min(920px, var(--seb-db-stage-max)); }
.seb-design-banner--width-wide .seb-design-banner__stage { max-width: min(1280px, var(--seb-db-stage-max)); }
.seb-design-banner--width-full .seb-design-banner__stage { max-width: var(--seb-db-stage-max); }

.seb-design-banner__stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  min-height: var(--seb-db-height-desktop);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, var(--seb-db-content-ratio)) minmax(0, calc(100% - var(--seb-db-content-ratio)));
  grid-template-areas: "content media";
  background: var(--seb-db-edge-right);
}
.seb-design-banner.has-shadow .seb-design-banner__stage {
  box-shadow: 0 14px 30px rgba(17, 49, 74, .20);
}

.seb-design-banner__content {
  position: relative;
  z-index: 5;
  grid-area: content;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--seb-db-pad-desktop);
  background: var(--seb-db-content-bg);
  color: var(--seb-db-text);
}
.seb-design-banner__content > * {
  max-width: 100%;
}
.seb-design-banner__content :where(h1,h2,h3,h4,p,ul,ol) {
  color: inherit;
}
.seb-design-banner__content :where(h1,h2,h3,h4) {
  margin-top: 0;
  margin-bottom: .35em;
  line-height: 1.08;
  letter-spacing: -.02em;
}
.seb-design-banner__content :where(h1,h2) {
  font-size: clamp(1.55rem, 2.6vw, 2.35rem);
}
.seb-design-banner__content p {
  margin-top: 0;
  margin-bottom: 1em;
  font-size: clamp(.86rem, 1vw, 1rem);
  line-height: 1.55;
}
.seb-design-banner__content .wp-block-buttons {
  margin-top: .5rem;
}
.seb-design-banner__content .wp-block-button__link {
  border-radius: var(--se-radius-button, 999px);
  padding: .58em 1.1em;
  font-size: .78rem;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .02em;
  background: var(--seb-db-dark);
  color: #fff;
}
.seb-design-banner__content .wp-block-button__link:hover {
  background: var(--seb-db-accent);
  color: #fff;
}

.seb-design-banner__media {
  position: relative;
  z-index: 1;
  grid-area: media;
  min-width: 0;
  min-height: 100%;
  background: var(--seb-db-edge-right);
  overflow: hidden;
}
.seb-design-banner__media img {
  display: block;
  width: calc(100% + 8px);
  max-width: none;
  height: 100%;
  min-height: var(--seb-db-height-desktop);
  object-fit: cover;
  object-position: var(--seb-db-img-x) var(--seb-db-img-y);
}
.seb-design-banner.has-image-overlay .seb-design-banner__media::after {
  content: "";
  position: absolute;

  /* =========================================================
     RECHTES HALBTRANSPARENTES TRAPEZ - HIER ANPASSEN

     Position/Proportionen:
     - top: vertikale Position ab Oberkante
     - right: leicht negativ lassen, verhindert helle Haarlinie rechts
     - width: Breite des Trapezes
     - height: Höhe des Trapezes; kein bottom setzen, sonst wird es durchgehend

     Form mit 4 Ecken:
     polygon( oben-links, oben-rechts, unten-rechts, unten-links )
     ========================================================= */
  top: 0;
  right: -8px;
  bottom: auto;
  width: 86px;
  height: 90%;

  z-index: 4;
  pointer-events: none;
  background: var(--seb-db-overlay-color);
  opacity: var(--seb-db-overlay-opacity);
  clip-path: polygon(45% 20%, 100% 5%, 100% 95%, 45% 80%);
}
.seb-design-banner__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: var(--seb-db-height-desktop);
  color: var(--seb-db-dark);
  font-weight: 600;
  background:
    linear-gradient(135deg, rgba(255,255,255,.55) 25%, transparent 25%) 0 0 / 18px 18px,
    linear-gradient(135deg, transparent 75%, rgba(255,255,255,.55) 75%) 0 0 / 18px 18px,
    var(--seb-db-neutral);
}

/* Dekor für Desktop-Split: vertikaler Steg mit schräger Unterkante und
   Akzentdreieck wie in der Referenz. Das Akzentdreieck liegt nicht rechts
   neben dem Steg, sondern unter der schrägen Kante innerhalb des Stegbereichs. */
.seb-design-banner__ribbon,
.seb-design-banner__accent,
.seb-design-banner__fold {
  position: absolute;
  display: none;
  pointer-events: none;
}
.seb-design-banner.has-decor .seb-design-banner__ribbon,
.seb-design-banner.has-decor .seb-design-banner__accent,
.seb-design-banner.has-folds .seb-design-banner__fold {
  display: block;
}
@media (min-width: 1025px) {
  /* =========================================================
     DESKTOP: Graues / dunkles Trapez links zwischen Text und Bild
     HIER ANPASSEN: Position, Breite, Höhe und clip-path
     ========================================================= */
  .seb-design-banner__ribbon {
    z-index: 7;
    top: 0;
    bottom: auto;
    left: calc(var(--seb-db-content-ratio) - 34px);
    width: 65px !important;
    height: 64%;
    transform: none;
    background: var(--seb-db-dark);
    clip-path: polygon(0 0, 100% 0, 100% 76%, 0 100%);
  }

  /* =========================================================
     DESKTOP: Grünes Dreieck unter / neben dem Trapez
     HIER ANPASSEN: top, left, width, height und clip-path
     ========================================================= */
  .seb-design-banner__accent {
    z-index: 6 !important;
    top: 56% !important;
    left: calc(var(--seb-db-content-ratio) - 34px) !important;
    width: 34px !important;
    height: 67px !important;
    transform: none;
    border: 0;
    background: var(--seb-db-accent) !important;
    clip-path: polygon(100% 0, 100% 100%, 0 50%) !important;
  }
}
.seb-design-banner__fold {
  z-index: 8;
  right: 0;
  width: 0;
  height: 0;
}
.seb-design-banner__fold--top {
  top: 0;
  border-top: 46px solid var(--seb-db-dark);
  border-left: 46px solid transparent;
}
.seb-design-banner__fold--bottom {
  bottom: 0;
  border-bottom: 46px solid var(--seb-db-dark);
  border-left: 46px solid transparent;
}

.seb-design-banner.has-image-overlay .seb-design-banner__fold {
  display: none;
}

/* Desktop-Varianten */
.seb-design-banner--desktop-split-reverse .seb-design-banner__stage {
  grid-template-columns: minmax(0, calc(100% - var(--seb-db-content-ratio))) minmax(0, var(--seb-db-content-ratio));
  grid-template-areas: "media content";
}
.seb-design-banner--desktop-split-reverse .seb-design-banner__ribbon {
  left: auto;
  right: var(--seb-db-content-ratio);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 76%);
}
.seb-design-banner--desktop-split-reverse .seb-design-banner__accent {
  left: auto;
  right: var(--seb-db-content-ratio);
  transform: none;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.seb-design-banner--desktop-stacked .seb-design-banner__stage,
.seb-design-banner--desktop-stacked-reverse .seb-design-banner__stage {
  grid-template-columns: 1fr;
  min-height: auto;
}
.seb-design-banner--desktop-stacked .seb-design-banner__stage {
  grid-template-rows: minmax(120px, calc(var(--seb-db-height-desktop) * .48)) auto;
  grid-template-areas: "media" "content";
}
.seb-design-banner--desktop-stacked-reverse .seb-design-banner__stage {
  grid-template-rows: auto minmax(120px, calc(var(--seb-db-height-desktop) * .48));
  grid-template-areas: "content" "media";
}
.seb-design-banner--desktop-slim .seb-design-banner__stage {
  min-height: calc(var(--seb-db-height-desktop) * .58);
}
.seb-design-banner--desktop-slim .seb-design-banner__content {
  padding-block: calc(var(--seb-db-pad-desktop) * .55);
}
.seb-design-banner--desktop-slim .seb-design-banner__media img,
.seb-design-banner--desktop-slim .seb-design-banner__placeholder {
  min-height: calc(var(--seb-db-height-desktop) * .58);
}

.seb-design-banner--desktop-stacked .seb-design-banner__ribbon,
.seb-design-banner--desktop-stacked-reverse .seb-design-banner__ribbon {
  inset: calc(var(--seb-db-height-desktop) * .48 - 22px) auto auto 0;
  width: 52%;
  height: 44px;
  transform: none;
  clip-path: polygon(0 0, 86% 0, 100% 100%, 0 100%);
}
.seb-design-banner--desktop-stacked .seb-design-banner__accent,
.seb-design-banner--desktop-stacked-reverse .seb-design-banner__accent {
  top: calc(var(--seb-db-height-desktop) * .48 + 22px);
  left: 50%;
  width: 48px;
  height: 28px;
  transform: translateX(-50%);
  border: 0;
  background: var(--seb-db-accent);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

/* Tablet: eigener Layoutzustand, damit Desktop- und Mobile-Banner zusammenpassen. */
@media (max-width: 1024px) {
  .seb-design-banner__stage {
    min-height: var(--seb-db-height-tablet);
  }
  .seb-design-banner--tablet-split .seb-design-banner__stage {
    grid-template-columns: minmax(0, var(--seb-db-content-ratio)) minmax(0, calc(100% - var(--seb-db-content-ratio)));
    grid-template-areas: "content media";
  }
  .seb-design-banner--tablet-split-reverse .seb-design-banner__stage {
    grid-template-columns: minmax(0, calc(100% - var(--seb-db-content-ratio))) minmax(0, var(--seb-db-content-ratio));
    grid-template-areas: "media content";
  }
  .seb-design-banner--tablet-stacked .seb-design-banner__stage,
  .seb-design-banner--tablet-stacked-reverse .seb-design-banner__stage {
    grid-template-columns: 1fr;
    min-height: var(--seb-db-height-tablet);
  }
  .seb-design-banner--tablet-stacked .seb-design-banner__stage {
    grid-template-rows: var(--seb-db-image-height-tablet) auto;
    grid-template-areas: "media" "content";
  }
  .seb-design-banner--tablet-stacked-reverse .seb-design-banner__stage {
    grid-template-rows: auto var(--seb-db-image-height-tablet);
    grid-template-areas: "content" "media";
  }
  .seb-design-banner--tablet-slim .seb-design-banner__stage {
    min-height: calc(var(--seb-db-height-tablet) * .62);
  }
  .seb-design-banner__content {
    padding: calc(var(--seb-db-pad-desktop) * .72);
  }
  .seb-design-banner__media img,
  .seb-design-banner__placeholder {
    min-height: 100%;
  }

  /* TABLET: eigenständige Geometrie wie in der Referenz – unabhängig vom Desktop-Trapez. */
  .seb-design-banner--tablet-stacked .seb-design-banner__ribbon,
  .seb-design-banner--tablet-stacked-reverse .seb-design-banner__ribbon {
    inset: calc(var(--seb-db-image-height-tablet) - 22px) auto auto 0 !important;
    width: 55% !important;
    height: 44px !important;
    transform: none !important;
    clip-path: polygon(0 0, 86% 0, 100% 100%, 0 100%) !important;
  }
  .seb-design-banner--tablet-stacked .seb-design-banner__accent,
  .seb-design-banner--tablet-stacked-reverse .seb-design-banner__accent {
    top: calc(var(--seb-db-image-height-tablet) + 21px) !important;
    left: 55% !important;
    width: 48px !important;
    height: 28px !important;
    transform: translate(-50%, -1px) !important;
    border: 0 !important;
    background: var(--seb-db-accent) !important;
    clip-path: polygon(0 0, 100% 0, 50% 100%) !important;
  }
  .seb-design-banner.has-image-overlay .seb-design-banner__media::after {
    top: 0;
    right: 0;
    bottom: auto;
    width: clamp(72px, 18%, 132px);
    height: 42px;
    clip-path: polygon(22% 0, 100% 0, 100% 100%, 42% 100%);
  }
}

/* Mobile: bewusst kompakter, damit das Bild/Text-Verhältnis wie in deiner
   Referenz gestauchter wirkt als auf Tablet. */
@media (max-width: 640px) {
  .seb-design-banner__stage {
    min-height: var(--seb-db-height-mobile);
  }
  .seb-design-banner--mobile-stacked .seb-design-banner__stage,
  .seb-design-banner--mobile-stacked-compact .seb-design-banner__stage {
    grid-template-columns: 1fr;
    grid-template-rows: var(--seb-db-image-height-mobile) auto;
    grid-template-areas: "media" "content";
  }
  .seb-design-banner--mobile-image-hidden .seb-design-banner__stage {
    grid-template-columns: 1fr;
    grid-template-areas: "content";
  }
  .seb-design-banner--mobile-image-hidden .seb-design-banner__media {
    display: none;
  }
  .seb-design-banner__content {
    padding: var(--seb-db-pad-mobile);
  }
  .seb-design-banner__content :where(h1,h2) {
    font-size: clamp(1.2rem, 6vw, 1.65rem);
    line-height: 1.06;
  }
  .seb-design-banner__content p {
    font-size: .84rem;
    line-height: 1.42;
  }
  .seb-design-banner__content .wp-block-button__link {
    font-size: .68rem;
    padding: .54em .95em;
  }
  .seb-design-banner--mobile-stacked-compact .seb-design-banner__stage {
    min-height: var(--seb-db-height-mobile);
  }
  .seb-design-banner--mobile-stacked-compact .seb-design-banner__content {
    padding-block: calc(var(--seb-db-pad-mobile) * .75);
  }
  /* MOBILE: kompakte eigenständige Geometrie; Desktop-Werte dürfen hier nicht wirken. */
  .seb-design-banner--mobile-stacked .seb-design-banner__ribbon,
  .seb-design-banner--mobile-stacked-compact .seb-design-banner__ribbon {
    inset: calc(var(--seb-db-image-height-mobile) - 18px) auto auto 0 !important;
    width: 58% !important;
    height: 36px !important;
    transform: none !important;
    clip-path: polygon(0 0, 86% 0, 100% 100%, 0 100%) !important;
  }
  .seb-design-banner--mobile-stacked .seb-design-banner__accent,
  .seb-design-banner--mobile-stacked-compact .seb-design-banner__accent {
    top: calc(var(--seb-db-image-height-mobile) + 17px) !important;
    left: 58% !important;
    width: 40px !important;
    height: 24px !important;
    transform: translate(-50%, -1px) !important;
    border: 0 !important;
    background: var(--seb-db-accent) !important;
    clip-path: polygon(0 0, 100% 0, 50% 100%) !important;
  }
  .seb-design-banner__fold--top {
    border-top-width: 34px;
    border-left-width: 34px;
  }
  .seb-design-banner__fold--bottom {
    border-bottom-width: 34px;
    border-left-width: 34px;
  }
  .seb-design-banner.has-image-overlay .seb-design-banner__media::after {
    top: 0;
    right: 0;
    bottom: auto;
    width: clamp(56px, 24%, 104px);
    height: 34px;
    clip-path: polygon(24% 0, 100% 0, 100% 100%, 44% 100%);
  }
}


/* =========================================================
   smartEngin Design-Banner – Tablet/Mobile ohne Geometrie-Elemente
   Blendet auf Tablet und Mobile aus:
   - dunkler Übergangssteg links zwischen Text und Bild
   - grünes Akzentdreieck
   - rechtes halbtransparentes Bild-Trapez
   Desktop bleibt unverändert.
   ========================================================= */
@media (max-width: 1024px) {
  .seb-design-banner .seb-design-banner__ribbon,
  .seb-design-banner .seb-design-banner__accent,
  .seb-design-banner.has-image-overlay .seb-design-banner__media::after {
    display: none !important;
  }
}


/* ==========================================================================
   smartEngin Design-Banner 2
   Exakt angelehnt an die gelieferte Referenz mit dunkler Textfläche links,
   Bannerbild rechts/oben und kurvigen Übergängen in drei Ebenen.
   ========================================================================== */
.seb-design-banner-2 {
  --seb-db2-stage-max: 1240px;
  --seb-db2-content-ratio: 44%;
  --seb-db2-height-desktop: 285px;
  --seb-db2-height-tablet: 250px;
  --seb-db2-height-mobile: 430px;
  --seb-db2-image-height-mobile: 265px;
  --seb-db2-pad-desktop: 32px;
  --seb-db2-pad-mobile: 24px;
  --seb-db2-img-x: 50%;
  --seb-db2-img-y: 50%;
  --seb-db2-content-bg: #0A1E5A;
  --seb-db2-eyebrow: #FFFFFF;
  --seb-db2-title: #F12635;
  --seb-db2-body: rgba(255,255,255,.82);
  --seb-db2-button-bg: #F12635;
  --seb-db2-button-text: #FFFFFF;
  --seb-db2-curve-base: #17316B;
  --seb-db2-curve-light: #F7F5F2;
  --seb-db2-curve-accent: #F12635;
  --seb-db2-divider-width-desktop: clamp(138px, 12vw, 198px);
  --seb-db2-divider-shift-desktop: -38%;
  --seb-db2-divider-height-mobile: 118px;
  --seb-db2-divider-top-mobile: calc(var(--seb-db2-image-height-mobile) - 58px);

  position: relative;
  width: 100%;
  overflow: hidden;
}
.seb-design-banner-2,
.seb-design-banner-2 * { box-sizing: border-box; }

.seb-design-banner-2--width-full {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.seb-design-banner-2--width-normal .seb-design-banner-2__stage { max-width: min(920px, var(--seb-db2-stage-max)); }
.seb-design-banner-2--width-wide .seb-design-banner-2__stage { max-width: min(1280px, var(--seb-db2-stage-max)); }
.seb-design-banner-2--width-full .seb-design-banner-2__stage { max-width: var(--seb-db2-stage-max); }

/* --------------------------------------------------------------------------
   DESIGN 2 – Grundstruktur
   -------------------------------------------------------------------------- */
.seb-design-banner-2__stage {
  position: relative;
  isolation: isolate;
  width: 100%;
  margin-inline: auto;
  min-height: var(--seb-db2-height-desktop);
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, var(--seb-db2-content-ratio)) minmax(0, calc(100% - var(--seb-db2-content-ratio)));
  grid-template-areas: "content media";
  align-items: stretch;
}
.seb-design-banner-2.has-shadow .seb-design-banner-2__stage {
  box-shadow: 0 14px 30px rgba(11, 20, 58, .22);
}
.seb-design-banner-2__content {
  position: relative;
  z-index: 5;
  grid-area: content;
  min-width: 0;
  background: var(--seb-db2-content-bg);
  padding: var(--seb-db2-pad-desktop);
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.seb-design-banner-2__copy {
  width: min(100%, 330px);
}
.seb-design-banner-2__eyebrow,
.seb-design-banner-2__title,
.seb-design-banner-2__body {
  margin: 0;
}
.seb-design-banner-2__eyebrow {
  color: var(--seb-db2-eyebrow);
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  line-height: .96;
  letter-spacing: .015em;
  font-weight: 800;
  text-transform: uppercase;
}
.seb-design-banner-2__title {
  color: var(--seb-db2-title);
  font-size: clamp(1.25rem, 2vw, 1.9rem);
  line-height: .95;
  font-weight: 700;
  margin-top: .18em;
}
.seb-design-banner-2__body {
  color: var(--seb-db2-body);
  font-size: clamp(.72rem, 1.06vw, .88rem);
  line-height: 1.45;
  margin-top: 1.2em;
  max-width: 27ch;
}
.seb-design-banner-2__actions {
  margin-top: 1.35em;
}
.seb-design-banner-2__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: .42em 1.5em;
  border-radius: 999px;
  background: var(--seb-db2-button-bg);
  color: var(--seb-db2-button-text);
  font-size: .66rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(242, 38, 53, .28);
}
.seb-design-banner-2__media {
  position: relative;
  z-index: 1;
  grid-area: media;
  min-width: 0;
  min-height: 100%;
  overflow: hidden;
  background: rgba(234, 236, 231, .36);
}
.seb-design-banner-2__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--seb-db2-img-x) var(--seb-db2-img-y);
}
.seb-design-banner-2__placeholder {
  width: 100%;
  height: 100%;
  min-height: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5E6975;
  font-size: .85rem;
  text-align: center;
  background:
    linear-gradient(45deg, rgba(17,49,74,.08) 25%, transparent 25%, transparent 75%, rgba(17,49,74,.08) 75%),
    linear-gradient(45deg, rgba(17,49,74,.08) 25%, transparent 25%, transparent 75%, rgba(17,49,74,.08) 75%);
  background-size: 24px 24px;
  background-position: 0 0, 12px 12px;
}

/* --------------------------------------------------------------------------
   DESIGN 2 – Geometrie anpassen
   - Desktop/Tablet: Breite und horizontale Lage der senkrechten Kurve
     über --seb-db2-divider-width-desktop und --seb-db2-divider-shift-desktop.
   - Mobile: Höhe und vertikale Lage der Kurve über
     --seb-db2-divider-height-mobile und --seb-db2-divider-top-mobile.
   - Die exakten Kurvenverläufe liegen als SVG-Pfade in
     blocks/design-banner-2/render.php und assets/js/blocks.js.
   -------------------------------------------------------------------------- */
.seb-design-banner-2__divider {
  position: absolute;
  pointer-events: none;
}
.seb-design-banner-2__divider svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* --------------------------------------------------------------------------
   DESIGN 2 – Desktop
   -------------------------------------------------------------------------- */
.seb-design-banner-2__divider--desktop {
  top: -1%;
  left: var(--seb-db2-content-ratio);
  width: var(--seb-db2-divider-width-desktop);
  height: 102%;
  transform: translateX(var(--seb-db2-divider-shift-desktop));
  z-index: 4;
}
.seb-design-banner-2__divider--mobile {
  display: none;
}

/* --------------------------------------------------------------------------
   DESIGN 2 – Tablet
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .seb-design-banner-2__stage {
    min-height: var(--seb-db2-height-tablet);
  }
  .seb-design-banner-2__content {
    padding: clamp(18px, 3.2vw, 28px);
  }
  .seb-design-banner-2__copy {
    width: min(100%, 250px);
  }
  .seb-design-banner-2__eyebrow {
    font-size: clamp(1.05rem, 4.5vw, 1.55rem);
  }
  .seb-design-banner-2__title {
    font-size: clamp(1rem, 4vw, 1.42rem);
  }
  .seb-design-banner-2__body {
    font-size: clamp(.62rem, 2vw, .76rem);
    max-width: 23ch;
  }
  .seb-design-banner-2__button {
    min-height: 30px;
    font-size: .58rem;
    padding-inline: 1.25em;
  }
  .seb-design-banner-2__divider--desktop {
    width: clamp(112px, 18vw, 148px);
    transform: translateX(-42%);
  }
}

/* --------------------------------------------------------------------------
   DESIGN 2 – Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .seb-design-banner-2__stage {
    min-height: var(--seb-db2-height-mobile);
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: var(--seb-db2-image-height-mobile) auto;
    grid-template-areas: "media" "content";
  }
  .seb-design-banner-2__media {
    min-height: var(--seb-db2-image-height-mobile);
  }
  .seb-design-banner-2__content {
    padding: calc(var(--seb-db2-pad-mobile) + 14px) var(--seb-db2-pad-mobile) var(--seb-db2-pad-mobile);
    align-items: flex-start;
  }
  .seb-design-banner-2__copy {
    width: min(100%, 260px);
  }
  .seb-design-banner-2__eyebrow {
    font-size: clamp(1.65rem, 9vw, 2.1rem);
  }
  .seb-design-banner-2__title {
    font-size: clamp(1.55rem, 8.2vw, 1.95rem);
  }
  .seb-design-banner-2__body {
    font-size: .78rem;
    max-width: 29ch;
  }
  .seb-design-banner-2__actions {
    margin-top: 1.4em;
  }
  .seb-design-banner-2__button {
    min-height: 36px;
    font-size: .7rem;
    padding: .5em 1.5em;
  }
  .seb-design-banner-2__divider--desktop {
    display: none;
  }
  .seb-design-banner-2__divider--mobile {
    display: block;
    left: 0;
    top: var(--seb-db2-divider-top-mobile);
    width: 100%;
    height: var(--seb-db2-divider-height-mobile);
    z-index: 4;
  }
}

/* --------------------------------------------------------------------------
   Kacheln (Raster)
   -------------------------------------------------------------------------- */
.seb-kacheln {
  display: grid;
  grid-template-columns: repeat(var(--seb-cols, 3), 1fr);
  gap: var(--seb-gap, 24px);
}
.seb-kachel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;                       /* Abstände einzeln steuern (siehe unten) */
  padding: var(--se-space-l, 32px);
  /* Rundung: per Kacheln-Block einstellbar (--seb-radius), sonst globaler Wert. */
  border-radius: var(--seb-radius, var(--se-kachel-radius, 16px));
  /* Schatten: Standard = globaler Wert. Per-Block-Override siehe .seb-shadow-on/off
     (aus Einzelwerten zusammengesetzt, weil WP komplexe Inline-Werte filtert). */
  box-shadow: var(--se-kachel-shadow, var(--se-shadow-soft, 0 4px 16px rgba(16,35,50,0.10)));
  /* Rahmen: per Kacheln-Block einstellbar; Standard 0 = kein sichtbarer Rahmen.
     Variablennamen bewusst OHNE "border-width"/"border-color" (siehe render.php). */
  border: var(--seb-brd-w, 0) solid var(--seb-brd-c, transparent);
  box-sizing: border-box;
  text-decoration: none;
  transition: box-shadow .18s ease, transform .18s ease;
}
/* Per-Block-Schatten (Intensität 0–100). Aus Einzelwerten zusammengesetzt, weil
   WordPress komplexe box-shadow-Werte im Inline-style filtert (safecss_filter_attr).
   Höhere Spezifität als die Basisregel → gewinnt; steht vor der :hover-Regel. */
.seb-shadow-on .seb-kachel {
  box-shadow: 0 var(--seb-sh-y, 4px) var(--seb-sh-b, 16px) rgba(16,35,50, var(--seb-sh-o, 0.1));
}
.seb-shadow-off .seb-kachel {
  box-shadow: none;
}
/* WICHTIG: KEIN height:100% auf der Kachel. Die Kacheln sind über das Grid
   (align-items:stretch, Standard) pro Reihe ohnehin gleich hoch. height:100%
   auf Grid-Items löst in Chromium bei mehreren Reihen (Tablet/Handy) fehlerhaft
   gegen die GESAMTE Grid-Höhe auf – dadurch werden die Kacheln zu hoch und
   überlappen sich. Ohne height:100% verschwindet die Überlappung. */

/* Gleichmäßiger Abstand zwischen Icon/Bild, Titel und Text. */
.seb-kachel > * + * { margin-top: var(--se-space-s, 16px); }

.seb-kachel--link { cursor: pointer; }
.seb-kachel--link:hover { box-shadow: var(--se-shadow-medium, 0 8px 28px rgba(16,35,50,0.16)); transform: translateY(-4px); }
/* Header-Bild: sitzt oben und geht randlos bis an alle Kachelkanten. Es bricht
   per negativer Ränder aus dem Innenabstand aus und reicht EXAKT bis zum
   Kachelrand (nicht darüber hinaus – daher kein overflow:hidden nötig, das den
   Editor zusammengeschoben hatte). Die oberen Ecken werden direkt am Bild
   passend zur Kachel gerundet. Höhe global über --se-kachel-image-height.
   Der untere Bildrand (margin-bottom:0) ist eine feste Kante – darunter folgt
   der Text als eigener Block, das Bild überlappt ihn also nie. object-position:
   center bottom hält die UNTERKANTE des Bildes im Ausschnitt und beschneidet
   nur oben. Kacheln OHNE Bild bleiben unverändert. */
.seb-kachel__image {
  display: block;
  width: calc(100% + 2 * var(--se-space-l, 32px));
  max-width: none;              /* evtl. globales img{max-width:100%} überschreiben */
  height: var(--se-kachel-image-height, 160px);
  margin: calc(-1 * var(--se-space-l, 32px)) calc(-1 * var(--se-space-l, 32px)) 0;
  border-top-left-radius: var(--seb-radius, var(--se-kachel-radius, 16px));
  border-top-right-radius: var(--seb-radius, var(--se-kachel-radius, 16px));
  object-fit: cover;
  object-position: center bottom;
}
.seb-kachel__title { margin: 0; font-size: 1.25rem; }
.seb-kachel__text { margin: 0; font-size: 1rem; }
/* Button immer am unteren Kachelrand (gleiche Höhe über alle Kacheln einer
   Reihe). margin-top:auto schiebt ihn nach unten; padding-top sorgt für einen
   kleinen, gleichbleibenden Mindestabstand (16px) – auch in der textreichsten
   Kachel, wo margin-top:auto auf 0 zusammenfällt. So verschwindet die früher
   viel zu große Lücke, ohne dass Text und Button aneinanderkleben. */
.seb-kachel__cta { margin-top: auto; padding-top: var(--se-space-s, 16px); }
.seb-kachel__cta--text { font-weight: 600; color: var(--se-color-primary, #37B971); }

/* --------------------------------------------------------------------------
   Mega-Menü-Spalte
   -------------------------------------------------------------------------- */
.seb-mm {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: var(--se-space-s, 16px);
}
/* Icon steht VOR dem Titel (nicht darüber) */
.seb-mm__head { display: flex; align-items: center; gap: 10px; }
.seb-mm__icon { font-size: 30px; line-height: 1; display: inline-flex; }
.seb-mm__title { margin: 0; font-size: calc(1.05rem + 2px); font-weight: 600; }
.seb-mm__text { margin: 0; font-size: var(--se-submenu-text-size, 15px); font-weight: 400; color: var(--se-color-muted, #5B6B78); }
.seb-mm__link { font-size: var(--se-submenu-text-size, 15px); font-weight: 600; color: var(--se-color-primary, #37B971); text-decoration: none; }
.seb-mm__link:hover { text-decoration: underline; }

.seb-mm--promo {
  border-radius: var(--se-radius-card, 16px);
  padding: var(--se-space-l, 32px);
}
.seb-mm__promo-img { width: 100%; border-radius: 10px; margin-bottom: 8px; }
.seb-mm__promo-title { margin: 0 0 4px; font-size: 1.2rem; }
.seb-mm__promo-text { margin: 0 0 12px; opacity: 0.9; font-size: var(--se-submenu-text-size, 15px); }

/* Promo-Button: nur so breit wie der Text (align-self), Farben je Kachel
   konfigurierbar über Inline-CSS-Variablen (--pb-*). */
.seb-mm__promo-btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--se-font-base);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  padding: var(--se-btn-padding-y, 12px) var(--se-btn-padding-x, 24px);
  border-radius: var(--se-radius-button, 999px);
  background: var(--pb-bg, #37B971);
  color: var(--pb-text, #FFFFFF);
  border: var(--se-btn-border-width, 2px) solid var(--pb-border, #37B971);
  transition: background var(--se-transition, .2s ease), color var(--se-transition, .2s ease), border-color var(--se-transition, .2s ease);
}
.seb-mm__promo-btn:hover {
  background: var(--pb-hover-bg, #2EA863);
  color: var(--pb-hover-text, #FFFFFF);
  border-color: var(--pb-hover-border, #2EA863);
}

/* --------------------------------------------------------------------------
   Footer-Kachel
   -------------------------------------------------------------------------- */
.seb-footer-kachel {
  flex-grow: 0;
  flex-shrink: 1;
  min-width: 180px;
  padding-right: var(--se-space-l, 32px);
}
.seb-footer-kachel__title { margin: 0 0 var(--se-space-s, 16px); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .seb-kacheln { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .seb-kacheln { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Piktogramm im WordPress-Standard-Button (core/button)
   Icon wird im Frontend serverseitig in .wp-block-button__link eingefügt,
   im Editor per JS zur Vorschau. Reihenfolge (links/rechts) über die
   DOM-Position; hier nur Ausrichtung & Abstand.
   -------------------------------------------------------------------------- */
.wp-block-button__link.has-se-icon,
.seb-design-banner-2__button.has-se-icon {
  display: inline-flex;
  align-items: center;
  gap: .5em;
}
.se-btn-icon {
  font-size: 1.15em;
  line-height: 0;
  flex: 0 0 auto;
}