/* =========================================================
   Patterns & Gutenberg Styles
   ---------------------------------------------------------
   Globale Styles für Gutenberg-Blöcke und eigene Patterns
   ========================================================= */


/* ---------------------------------------------------------
   Standard-Gutter für normale Gutenberg-Blöcke
   ---------------------------------------------------------
   Alle direkten Kinder innerhalb von .entry-content bekommen
   den globalen Seitenabstand (Gutter). 
   Ausnahme: Blöcke mit .alignfull, da diese bewusst 
   über die komplette Breite gehen sollen.
--------------------------------------------------------- */
.entry-content > *:not(.alignfull) {
  position: relative;        /* verhindert Überlagerungsprobleme bei Layouts */
  z-index: 2;                /* sorgt dafür, dass Content über Hintergründen liegt */
  padding-inline: var(--gutter); /* global definierter Seitenabstand */
}


/* ---------------------------------------------------------
   Fullwidth-Blöcke (alignfull)
   ---------------------------------------------------------
   Gutenberg-Blöcke mit .alignfull sollen randlos sein und
   keinen Gutter erhalten.
--------------------------------------------------------- */
.entry-content > .alignfull {
  position: relative;
  z-index: 2;
  padding-inline: 0;
}


/* ---------------------------------------------------------
   Bildcontainer in Patterns
   ---------------------------------------------------------
   Entfernt das Standardmargin von figure-Elementen,
   damit Bilder exakt bündig im Layout sitzen.
--------------------------------------------------------- */
.cover-image-container figure,
.dx-pattern-cover-image figure {
  margin:0!important;
}


/* ---------------------------------------------------------
   Text-Bild Pattern Layout
   ---------------------------------------------------------
   Entfernt Abstand zwischen den Columns sowie den
   unteren Margin, um einen sauberen Edge-to-Edge
   Layoutblock zu erzeugen.
--------------------------------------------------------- */
.text-image-section,
.dx-pattern-text-image-section {
    gap: 0 !important;       /* kein Abstand zwischen Spalten */
    margin-bottom: 0 !important; /* kein Abstand unterhalb des Blocks */
}

.wp-block-columns.text-image-section,
.wp-block-columns.dx-pattern-text-image-section {
  align-items: stretch !important;
}

@media (min-width: 1600px) {
  .wp-block-columns.text-image-section > .section-content,
  .wp-block-columns.dx-pattern-text-image-section > .dx-pattern-content {
    flex: 0 1 60% !important;
    max-width: 60% !important;
  }

  .wp-block-columns.text-image-section > .section-media,
  .wp-block-columns.dx-pattern-text-image-section > .dx-pattern-media {
    flex: 0 1 40% !important;
    max-width: 40% !important;
  }

  /* Padding für Text (links) und Bild (rechts) - nur auf XL Screens */
  .wp-block-columns.dx-pattern-text-image-section > .wp-block-column:first-child {
    padding-left: 12rem !important;
  }

  .wp-block-columns.dx-pattern-text-image-section > .wp-block-column:last-child {
    padding-right: 12rem !important;
  }
}

/* Desktop Normal (1200-1599px) - bessere Bildplatzierung */
@media (min-width: 1200px) and (max-width: 1599.98px) {
  .wp-block-columns.text-image-section > .section-content,
  .wp-block-columns.dx-pattern-text-image-section > .dx-pattern-content {
    flex: 0 1 60% !important;
    max-width: 60% !important;
  }

  .wp-block-columns.text-image-section > .section-media,
  .wp-block-columns.dx-pattern-text-image-section > .dx-pattern-media {
    flex: 0 1 40% !important;
    max-width: 40% !important;
  }
}

.wp-block-columns.text-image-section > .wp-block-column,
.wp-block-columns.dx-pattern-text-image-section > .wp-block-column {
  display: flex;
  min-height: 26rem;
}

.section-content,
.dx-pattern-content {
  align-items: center;
}

.textwrapper-content,
.dx-pattern-text-wrapper {
  width: 100%;
  max-width: 40rem;
  margin-inline: auto;
  box-sizing: border-box;
}

.section-media,
.dx-pattern-media {
  align-items: stretch;
}

.cover-image-container,
.dx-pattern-cover-image {
  width: 100%;
  height: 100%;
  min-height: inherit;
}

.cover-image-container .wp-block-image,
.dx-pattern-cover-image .wp-block-image,
.cover-image-container figure,
.dx-pattern-cover-image figure {
  width: 100%;
  height: 100%;
}

.cover-image-container img,
.dx-pattern-cover-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (min-width: 1200px) {
  /* Right-image variant: give the image panel a visible edge spacing on desktop. */
  .wp-block-columns.text-image-section > .section-media:last-child,
  .wp-block-columns.dx-pattern-text-image-section > .dx-pattern-media:last-child {
    box-sizing: border-box;
  }

  .wp-block-columns.text-image-section > .section-media:last-child .cover-image-container,
  .wp-block-columns.dx-pattern-text-image-section > .dx-pattern-media:last-child .dx-pattern-cover-image {
    overflow: hidden;
  }
}


/* ---------------------------------------------------------
   Responsive Verhalten des Text-Bild Patterns
   ---------------------------------------------------------
   Gutenberg Columns stapeln standardmäßig erst sehr spät.
   Dieser Breakpoint sorgt dafür, dass die Spalten bereits
   bei <=1199px untereinander dargestellt werden.
   
   Auf Tablet & Mobile: Immer Text oben, Bild unten
   (unabhängig von text-image-left oder text-image-right)
--------------------------------------------------------- */
@media (max-width: 1199.98px) {

  /* Columns umbrechen lassen */
  .wp-block-columns.text-image-section,
  .wp-block-columns.dx-pattern-text-image-section {
    flex-wrap: wrap !important;
  }

  /* Jede Column nimmt volle Breite ein */
  .wp-block-columns.text-image-section > .wp-block-column,
  .wp-block-columns.dx-pattern-text-image-section > .wp-block-column {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    min-height: auto;
  }

  /* Immer Text zuerst, Bild danach (beide Pattern-Varianten). */
  .wp-block-columns.text-image-section > .section-content,
  .wp-block-columns.dx-pattern-text-image-section > .dx-pattern-content {
    order: 1;
    align-items: flex-start;
  }

  .wp-block-columns.text-image-section > .section-media,
  .wp-block-columns.dx-pattern-text-image-section > .dx-pattern-media {
    order: 2;
    min-height: 16rem;
  }
}

/* Smartphone: Text mit 2rem Padding */
@media (max-width: 767.98px) {
  
  /* Text-Content bekommt 2rem Padding links/rechts */
  .wp-block-columns.text-image-section > .section-content,
  .wp-block-columns.dx-pattern-text-image-section > .dx-pattern-content {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
    box-sizing: border-box;
  }
}



/* =========================================================





.wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-white);
  border-radius: 1rem;
  overflow: hidden;
}



.wp-block-table tbody td {
  padding: 1.5rem 2rem;
  vertical-align: top;
}
.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
  background: var(--color-white);
}
.wp-block-table tbody tr:nth-child(even) {
  background: var(--color-secondary);
}

.wp-block-table tbody td:first-child {
  font-weight: 700;
  color: var(--color-tertiary);
  width: 32%;
}

.wp-block-table tbody td:last-child {
  color: var(--color-text);
}
.wp-block-table.is-style-stripes{ border-bottom:0px;}