/* ==========================================================================
   CSS Custom Properties
   ========================================================================== */

:root {
  --mi-narrow-size: 800px;
  --mi-header-height: 89px; /* mobile default */
  --mi-form-radius: 0.5rem;
}

@media (min-width: 599px) {
  :root {
    --mi-header-height: 100px;
  }
}

@media (min-width: 992px) {
  :root {
    --mi-header-height: 112px;
  }
}

.mi-narrow-blog {
  --wp--style--global--content-size: var(--mi-narrow-size);
  --wp--style--global--wide-size: 1080px;
}

/* ==========================================================================
   Section Style Overrides
   Parent (theme.css) uses :root :where(...) = specificity (0,0,1).
   These class selectors have specificity (0,2,0) and win.
   ========================================================================== */

.wp-block-group.is-style-section-neutral,
.wp-block-columns.is-style-section-neutral {
  background-color: var(--wp--preset--color--base);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.button .arrow_right::before {
  display: none;
}

.button .arrow_right {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: middle;
  background-color: currentColor;
  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.6465 4.64648C11.8417 4.45121 12.1583 4.45121 12.3535 4.64648L19.3535 11.6465C19.5488 11.8417 19.5488 12.1582 19.3535 12.3535L12.3535 19.3535C12.1583 19.5488 11.8417 19.5488 11.6465 19.3535C11.4512 19.1582 11.4512 18.8417 11.6465 18.6465L17.793 12.5H5C4.72386 12.5 4.5 12.2761 4.5 12C4.5 11.7239 4.72386 11.5 5 11.5H17.793L11.6465 5.35351C11.4512 5.15825 11.4512 4.84174 11.6465 4.64648Z' fill='%23000000'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  margin-left: 0.5em !important;
}

/* Icon-only Button (.mi-button-icon): Text-Span ist visually hidden,
   quadratisches Padding, kein margin vor dem Pfeil. */
.mi-button-icon .arrow_right {
  margin-left: 0 !important;
}

.mi-button-icon {
  padding-left: var(--wp--custom--greyd--button--spacing--padding--top);
  padding-right: var(--wp--custom--greyd--button--spacing--padding--top);
}

.is-size-small.mi-button-icon {
  padding-left: var(--wp--custom--greyd--button--small--spacing--padding--top);
  padding-right: var(--wp--custom--greyd--button--small--spacing--padding--top);
}

.is-size-big.mi-button-icon {
  padding-left: var(--wp--custom--greyd--button--big--spacing--padding--top);
  padding-right: var(--wp--custom--greyd--button--big--spacing--padding--top);
}

.mi-button-icon > span:first-child {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Clear-Button: text-decoration entfernen */
.button.is-style-clear {
  text-decoration: none !important;
}

/* Underline + Arrow Hover Animation — opt-in via .mi-button-underline */
.button.is-style-clear.mi-button-underline > span:first-child {
  position: relative;
}

.button.is-style-clear.mi-button-underline > span:first-child::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transform: scaleX(1);
  transform-origin: bottom left;
  transition: transform 0.3s ease;
}

.button.is-style-clear.mi-button-underline:hover > span:first-child::after,
.button.is-style-clear.mi-button-underline:focus > span:first-child::after {
  transform: scaleX(0);
  transform-origin: bottom right;
}

.button.is-style-clear.mi-button-underline .arrow_right {
  transition: transform 0.3s ease;
}

.button.is-style-clear.mi-button-underline:hover .arrow_right,
.button.is-style-clear.mi-button-underline:focus .arrow_right {
  transform: translateX(4px);
}

/* ==========================================================================
   Lists
   ========================================================================== */

.wp-block-greyd-list .list_icon {
  margin-top: 0.25em;
}

/* ==========================================================================
   Header
   ========================================================================== */

/* Header: fixed + hide-on-scroll-down / reveal-on-scroll-up.
   JS (mi-nav.js) setzt .mi-header--hidden und .mi-header--scrolled.
   .mi-header--scrolled aktiviert den Glass-Effekt sobald gescrollt wird. */
header.wp-block-template-part {
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 99998;
  transition:
    top 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    background-color 0.3s ease,
    backdrop-filter 0.3s ease,
    box-shadow 0.3s ease;
}

/* top statt transform: kein neuer Containing Block → fixed Kinder (mobiles Overlay)
   bleiben am Viewport positioniert und werden nicht abgeschnitten. */
header.wp-block-template-part.mi-header--hidden {
  top: calc(var(--mi-header-height) * -1);
}

header.wp-block-template-part.mi-header--scrolled {
  background-color: color-mix(in srgb, var(--wp--preset--color--foreground) 75%, transparent);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
}

/* Header-Padding: direkt in CSS statt Block-Editor, damit wir es kontrollieren können.
   Transition auf den inneren Containern → smooth shrink beim Scrollen.
   Scrolled-Zustand = calc(var / 2). Nur die Variablen anpassen. */
:root {
  --mi-header-padding-mobile: 25px;
  --mi-header-padding-tablet: 30px;
  --mi-header-padding-desktop: 30px;
}

.mi-mobile-header {
  padding-block: var(--mi-header-padding-mobile);
  transition: padding-block 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 599px) {
  .mi-mobile-header {
    padding-block: var(--mi-header-padding-tablet);
  }
}

.mi-desktop-header {
  padding-block: var(--mi-header-padding-desktop);
  transition: padding-block 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

header.wp-block-template-part.mi-header--scrolled .mi-mobile-header {
  padding-block: calc(var(--mi-header-padding-mobile) / 2);
}

@media (min-width: 599px) {
  header.wp-block-template-part.mi-header--scrolled .mi-mobile-header {
    padding-block: calc(var(--mi-header-padding-tablet) / 2);
  }
}

header.wp-block-template-part.mi-header--scrolled .mi-desktop-header {
  padding-block: calc(var(--mi-header-padding-desktop) / 2);
}

/* Logo-Wechsel: Volllogo ↔ Bildmarke je nach Sticky-Zustand.
   Bildmarke ist absolut positioniert → belegt keinen Platz im Flow. */
.mi-header-logo-container {
  position: relative;
}

.mi-site-logo {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mi-header-logo-container__brand-only {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

header.wp-block-template-part.mi-header--scrolled .mi-site-logo {
  opacity: 0;
  visibility: hidden;
}

header.wp-block-template-part.mi-header--scrolled .mi-header-logo-container__brand-only {
  opacity: 1;
  visibility: visible;
}

header.wp-block-template-part + main {
  margin-top: 0;
}

header.wp-block-template-part + main .mi-hero {
  padding-top: calc(var(--wp--preset--spacing--x-large) + calc(var(--mi-header-height) / 2)) !important;
}

/* Erste Section: Content nicht hinter Header verstecken */
/* main > *:first-child {
  padding-top: calc(var(--wp--preset--spacing--x-large) + var(--mi-header-height)) !important;
} */

/* Anker-Links: nicht hinter Header scrollen */
[id] {
  scroll-margin-top: var(--mi-header-height);
}

/* ==========================================================================
   Navigation
   ========================================================================== */

/* Farb-Konfiguration: Variablen zentral anpassen */
:root {
  --mi-nav-bg-color: white;        /* Glasfarbe für Panel + Indicator */
  --mi-nav-blur: 16px;
  --mi-nav-saturate: 1.6;
  --mi-nav-text-color: #ffffff;    /* Schriftfarbe erste Ebene */
  --mi-nav-dropdown-text-color: var(--wp--preset--color--foreground); /* Schriftfarbe Dropdown-Items */
}

/* Dark-Variante: Klasse mi-main-nav--dark auf nav setzen */
.mi-main-nav.mi-main-nav--dark {
  --mi-nav-bg-color: #000000;
  --mi-nav-dropdown-text-color: #ffffff;
}

.mi-main-nav--dark .mi-nav-dropdown__icon {
  filter: invert(92%) sepia(99%) saturate(31%) hue-rotate(256deg) brightness(107%) contrast(100%); /* background #FFFFFF */
}

.mi-nav-dropdown [role=dialog],
.mi-nav-mobile-popover [role=dialog] {
  --dialog-transition-property: transform, opacity;
  --dialog-transition-duration: 0.3s;
  --dialog-transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  background-color: color-mix(in srgb, var(--mi-nav-bg-color) 75%, transparent) !important;
  backdrop-filter: blur(var(--mi-nav-blur)) saturate(var(--mi-nav-saturate));
  -webkit-backdrop-filter: blur(var(--mi-nav-blur)) saturate(var(--mi-nav-saturate));
  border: 1px solid color-mix(in srgb, var(--mi-nav-bg-color) 35%, transparent);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  transform-origin: top center;
}

/* Wenn der Header selbst backdrop-filter hat (.mi-header--scrolled), entsteht ein neuer
   Backdrop-Kontext — child backdrop-filter blurt dann den Header statt die Seite.
   Lösung: Im scrolled-Zustand solides Hintergrundfarbe, kein zweites backdrop-filter. */
header.wp-block-template-part.mi-header--scrolled .mi-nav-dropdown [role=dialog],
header.wp-block-template-part.mi-header--scrolled .mi-nav-mobile-popover [role=dialog] {
  background-color: color-mix(in srgb, var(--mi-nav-bg-color) 95%, transparent) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.mi-nav-dropdown [role=dialog]:not([open]) {
  transform: translateY(-15px) scale(0.9);
}

.mi-nav-dropdown [role=dialog]:is([open], :focus-within) {
  transform: translateY(0) scale(1);
}

.mi-nav-dropdown__item {
  position: relative;
  border-radius: 0.5em !important;
  transition: background-color 0.2s ease;
  color: var(--mi-nav-dropdown-text-color) !important;
}

.mi-nav-dropdown__item--highlight {
  background-color: color-mix(in srgb, var(--mi-nav-bg-color) 20%, transparent) !important;
  border-radius: 0.5em !important;
}

.mi-nav-dropdown__item:hover {
  background-color: color-mix(in srgb, var(--mi-nav-bg-color) 30%, transparent) !important;
}

.mi-nav-dropdown__icon img {
  transition: transform 0.25s ease;
}

.mi-nav-dropdown__item:hover .mi-nav-dropdown__icon img {
  transform: scale(1.12);
}

.mi-main-nav > ul > li > button,
.mi-main-nav > ul > li > a {
  color: var(--mi-nav-text-color) !important;
  font-weight: 400;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
  border: 1px solid transparent;
  background-color: transparent;
  border-radius: 1em;
  padding: 0.3em 0.75em;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    backdrop-filter 0.2s ease;
  text-decoration: none;
}

.mi-main-nav > ul > li > button:hover,
.mi-main-nav > ul > li > a:hover {
  background-color: color-mix(in srgb, var(--mi-nav-bg-color) 12%, transparent);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-color: color-mix(in srgb, var(--mi-nav-bg-color) 15%, transparent);
}

/* Mit JS aktiv: CSS-Hover deaktivieren, Indicator übernimmt */
.mi-nav-indicator-ready > ul > li > button:hover,
.mi-nav-indicator-ready > ul > li > a:hover {
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-color: transparent !important;
}

/* Sliding Indicator Pill */
.mi-main-nav > ul {
  position: relative;
}

/* li-Items über dem Indicator halten (Popover-Dropdown bleibt klickbar) */
.mi-main-nav > ul > li {
  position: relative;
  z-index: 1;
}

.mi-nav-indicator {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  transform: translate(0, 0);
  background-color: color-mix(in srgb, var(--mi-nav-bg-color) 12%, transparent);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid color-mix(in srgb, var(--mi-nav-bg-color) 15%, transparent);
  border-radius: 1em;
  pointer-events: none;
  opacity: 0;
  transition:
    transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    width 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.15s ease;
}

.mi-nav-indicator.is-active {
  opacity: 1;
}

.mi-nav-mobile-popover [role=dialog] {
  z-index: 99998;
}

/* Mobile Submenu Trigger: Arrow-Rotation bei geöffnetem Submenu */
a[href*="--mobile-submenu-"] .arrow_carrot-down {
  display: inline-block;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

a[href*="--mobile-submenu-"][aria-expanded="true"] .arrow_carrot-down {
  transform: rotate(180deg);
}

.mi-mobile-header__burger {
  z-index: 99999;
  position: relative;
  border-radius: 100%;
}

/* ==========================================================================
   Cards (.mi-card)
   ========================================================================== */

.mi-card > .u-justify-between {
  flex-grow: 1;
}

/* Image: border per section variant.
   margin: 0 → browser-Default der <figure> entfernen.
   img display: block → inline-Baseline-Gap unterhalb des Bildes eliminieren. */
.mi-card__image {
  border-bottom: 1px solid var(--wp--preset--color--mediumlight);
  margin: 0;
}

.mi-card__image img {
  display: block;
  width: 100%;
  height: auto; /* SVG ohne px-Dimensionen: erzwingt Höhe aus viewBox-Aspect-Ratio */
}

.is-style-section-neutral .mi-card__image {
  border-color: var(--wp--preset--color--mediumlight);
}

.is-style-section-contrast .mi-card__image {
  /* border-color: var(--wp--preset--color--foreground); */
}

.is-style-section-neutral .mi-card.is-style-section-neutral {
  background-color: var(--wp--preset--color--background);
}

/*
 * Icon color filters – CSS filter hack to colorize black SVG/PNG icons.
 * Generator: https://codepen.io/sosuke/pen/Pjoqqp
 * Verwendung: class="mi-icon-adaptive" auf dem Wrapper, <img> direkt darin.
 */
.mi-icon-adaptive img,
.is-style-section-brand .is-style-section-inverse .mi-icon-adaptive img,
.wp-block-greyd-list .list_icon,
.is-style-section-brand .is-style-section-inverse .wp-block-greyd-list .list_icon {
  filter: invert(19%) sepia(19%) saturate(569%) hue-rotate(169deg)
    brightness(99%) contrast(88%); /* foreground #333D47 */
}

.is-style-section-contrast .mi-icon-adaptive img,
.is-style-section-brand .mi-icon-adaptive img,
.is-style-section-contrast .wp-block-greyd-list .list_icon,
.is-style-section-brand .wp-block-greyd-list .list_icon {
  filter: invert(92%) sepia(99%) saturate(31%) hue-rotate(256deg)
    brightness(107%) contrast(100%); /* background #FFFFFF */
}

/* ==========================================================================
   Brand Element Overlay (.mi-brand-element)
   Dekoratives SVG-Overlay, visuell per ::after über den Container gelegt.
   Overflow wird am Container selbst geclipt.
   ========================================================================== */

.mi-brand-element {
  position: relative;
  overflow: hidden;
}

.mi-brand-element::after {
  content: "";
  position: absolute;
  inset: 0 -58% -3% 0;
  background-image: url('../images/brand-element.svg');
  background-size: cover;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 5;
}

.mi-brand-element > * {
  position: relative;
  z-index: 1;
}

/* Header-Variante: Brand Element zentriert, skaliert mit Container-Breite.
   Pseudo-Element = 200% Containerbreite (beidseitig -50%), cover füllt
   immer vollständig unabhängig von der Containerhöhe. */
.mi-brand-element--header::after {
  inset: 0 -50% 0 -50%;
  background-size: cover;
  background-position: center;
}

/* ==========================================================================
   Flex Image Cover (.mi-flex-image-cover)
   Wrapper für core/image in Flex-Layouts: Bild füllt verfügbare Höhe/Breite
   und wird mit object-fit: cover zugeschnitten.
   ========================================================================== */

.mi-flex-image-cover > .wp-block-image,
.mi-flex-image-cover > .wp-block-media-text__media {
  align-self: stretch !important;
}

.mi-flex-image-cover > .wp-block-image img,
.mi-flex-image-cover > .wp-block-media-text__media img {
  height: 100% !important;
  object-fit: cover !important;
}

/* ==========================================================================
   Content Stretch (.mi-content-stretch)
   Generisch: Content-Bereich von core/media-text auf volle Höhe strecken;
   innerer Block-Group füllt den restlichen Platz (flex-grow: 1).
   ========================================================================== */

.mi-content-stretch .wp-block-media-text__content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.mi-content-stretch .wp-block-media-text__content > .wp-block-group {
  flex-grow: 1;
}

/* ==========================================================================
   Image Overlay (.mi-image-overlay-radial / .mi-image-overlay-linear)
   Farbiges Gradient-Overlay über einem <img />.

   Schichten (Figma-Struktur für radial):
   Hintergrund  — Bild (wp-block-image, normaler Flow)
   ::before     — foreground-Fläche mit mix-blend-mode: multiply + opacity: 0.8
                  → multipliziert mit dem Bild → entspricht Figmas image-layer
   ::after      — Gradient-Overlay normal darüber (radial gold + brand + bottom-fade)
   > div        — Text-Content über allem (z-index: 5)

   isolation: isolate begrenzt die Blend Modes auf den Component.
   ========================================================================== */

.mi-image-overlay-radial,
.mi-image-overlay-linear {
  position: relative;
  isolation: isolate;
}

.mi-image-overlay-radial > div,
.mi-image-overlay-linear > div {
  position: relative;
  z-index: 5;
}

.mi-image-overlay-radial::before,
.mi-image-overlay-radial::after,
.mi-image-overlay-linear::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* radial ::before — multiply-Darkening (Figma: image-layer mit blend: multiply, opacity: 0.8) */
.mi-image-overlay-radial::before {
  background: var(--wp--preset--color--foreground);
  mix-blend-mode: multiply;
  opacity: 0.8;
  z-index: 1;
}

/* radial ::after — Gradient-Overlay (normal blend, über ::before) */
.mi-image-overlay-radial::after {
  background:
    linear-gradient(180deg,
      transparent 21.26%,
      var(--wp--preset--color--foreground) 100%),
    radial-gradient(100.76% 154.49% at -22.69% -43.16%,
      color-mix(in srgb, var(--wp--preset--color--primary) 50%, transparent) 0%,
      transparent 100%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--wp--preset--color--brand) 20%, transparent) -6.79%,
      color-mix(in srgb, var(--wp--preset--color--foreground) 20%, transparent) 100%);
  z-index: 2;
}

/* linear — semi-transparent foreground layer, normal blend */
.mi-image-overlay-linear::after {
  background:
    radial-gradient(100.76% 154.49% at -22.69% -43.16%,
      color-mix(in srgb, var(--wp--preset--color--primary) 50%, transparent) 0%,
      transparent 100%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--wp--preset--color--brand) 20%, transparent) -6.79%,
      color-mix(in srgb, var(--wp--preset--color--foreground) 20%, transparent) 100%),
    color-mix(in srgb, var(--wp--preset--color--foreground) 50%, transparent);
}

/* ==========================================================================
   Utilities
   ========================================================================== */

.mi-rounded {
  border-radius: 1rem;
  overflow: hidden;
}

.u-justify-between {
  justify-content: space-between !important;
}
.u-justify-center {
  justify-content: center !important;
}
.u-justify-start {
  justify-content: flex-start !important;
}
.u-justify-end {
  justify-content: flex-end !important;
}
.u-align-center {
  align-items: center !important;
}
.u-align-start {
  align-items: flex-start !important;
}
.u-align-end {
  align-items: flex-end !important;
}
.u-flex {
  display: flex !important;
}
.u-flex-col {
  flex-direction: column !important;
}
.u-flex-wrap {
  flex-wrap: wrap !important;
}
.u-gap-0 {
  gap: 0 !important;
}
.u-gap-sm {
  gap: 0.5rem !important;
}
.u-gap-md {
  gap: 1rem !important;
}
.u-gap-lg {
  gap: 2rem !important;
}
.u-grow {
  flex-grow: 1 !important;
}
.u-shrink-0 {
  flex-shrink: 0 !important;
}
.u-narrow {
  max-width: var(--mi-narrow-size) !important;
}
.u-w-full {
  width: 100% !important;
}
.u-text-center {
  text-align: center !important;
}
.u-nowrap {
  white-space: nowrap !important;
}
.u-text-left {
  text-align: left !important;
}
.u-text-right {
  text-align: right !important;
}
.u-position-relative {
  position: relative !important;
}
.u-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Stretched Link: <a class="u-stretched-link"> macht den nächsten
   position:relative-Vorfahren vollständig klickbar.
   wp-block-greyd-buttons ist bereits relative → auf static setzen,
   damit das ::after zum gewünschten Vorfahren durchgreift. */
.u-stretched-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.wp-block-greyd-buttons:has(.u-stretched-link) {
  position: static !important;
}

/* ==========================================================================
   Grid Column Ratios
   ========================================================================== */

.u-grid-1-3,
.u-grid-25-75 {
  grid-template-columns: 1fr 3fr !important;
}

.u-grid-3-1 {
  grid-template-columns: 3fr 1fr !important;
}

.u-grid-2-1 {
  grid-template-columns: 2fr 1fr !important;
}

.u-grid-1-2 {
  grid-template-columns: 1fr 2fr !important;
}

/* ==========================================================================
   Responsive Row (break + reverse) and Grid break (single column)
   ========================================================================== */

@media (max-width: 599px) {
  .u-break-sm {
    flex-wrap: wrap !important;
  }
  .u-reverse-sm {
    flex-direction: column-reverse;
  }
  .u-grid-break-sm {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 992px) {
  .u-break-md {
    flex-wrap: wrap !important;
  }
  .u-reverse-md {
    flex-direction: column-reverse;
  }
  .u-grid-break-md {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 1199px) {
  .u-break-lg {
    flex-wrap: wrap !important;
  }
  .u-reverse-lg {
    flex-direction: column-reverse;
  }
  .u-grid-break-lg {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   Off-Grid (respect page/content width from one side only)
   ========================================================================== */

.u-respect-grid-left {
  padding-left: max(
    var(--wp--style--root--padding-left),
    calc(50vw - calc(var(--wp--style--global--wide-size) / 2))
  ) !important;
}

.u-respect-grid-right {
  padding-right: max(
    var(--wp--style--root--padding-left),
    calc(50vw - calc(var(--wp--style--global--wide-size) / 2))
  ) !important;
}

.u-respect-contentgrid-left {
  padding-left: max(
    var(--wp--style--root--padding-left),
    calc(50vw - calc(var(--wp--style--global--content-size) / 2))
  ) !important;
}

.u-respect-contentgrid-right {
  padding-right: max(
    var(--wp--style--root--padding-left),
    calc(50vw - calc(var(--wp--style--global--content-size) / 2))
  ) !important;
}

/* ==========================================================================
   Hub Grid (.mi-hub-grid)
   Content immer zuerst im HTML; --reverse spiegelt visuell per order.
   Mobile: Bild immer oben.
   ========================================================================== */

.mi-hub-grid {
  grid-template-columns: minmax(350px, 1fr) 3fr !important;
}

.mi-hub-grid--reverse {
  grid-template-columns: 3fr minmax(350px, 1fr) !important;
}

.mi-hub-grid--reverse .mi-hub-grid__image {
  order: -1;
}

@media (max-width: 599px) {
  .mi-hub-grid,
  .mi-hub-grid--reverse {
    grid-template-columns: 1fr !important;
  }

  .mi-hub-grid .mi-hub-grid__image {
    order: -1;
  }
}

/* ==========================================================================
   Logo List (.mi-logo-list)
   Responsive Grid: 2 Spalte Mobile & Tablet → 3 Spalten Desktop.
   ========================================================================== */

.mi-logo-list {
  grid-template-columns: repeat(2, 1fr) !important;
}

@media (min-width: 992px) {
  .mi-logo-list {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* ==========================================================================
   Footer (.mi-footer-nav / .mi-footer__sitemap)
   mi-footer-nav          — äußeres Layout: Info-Block (1/3) + Sitemap (2/3)
   mi-footer__sitemap     — Sitemap-Grid, auto-fill ~3 Spalten (min 180px)
   mi-footer__sitemap--4  — Sitemap-Grid, auto-fill ~4 Spalten (min 140px)
   Spalten brechen automatisch um — keine expliziten Breakpoints nötig.
   ========================================================================== */

.mi-footer__main {
  grid-template-columns: 2fr 2fr !important;
}

.mi-footer__sitemap {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
}

.mi-footer__sitemap--4 {
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
}

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

/* ==========================================================================
   Feature List (.mi-divided-list)
   Rechte Spalte der Scrolling Section: border-left + border-bottom pro Item.
   Mobile: border-left entfällt, nur border-bottom bleibt.
   ========================================================================== */

.mi-divided-list {
  border-left: 1px solid var(--wp--preset--color--mediumlight);
}

.mi-divided-list > * {
  border-bottom: 1px solid var(--wp--preset--color--mediumlight);
}

.mi-divided-list > *:last-child {
  border-bottom: none;
}

@media (max-width: 992px) {
  .mi-divided-list {
    border-left: none;
  }
}

/* ==========================================================================
   Hero Gallery (.mi-hero-gallery)
   Overflow-Bild-Galerie: Bilder in fixer Breite überragen den Container,
   werden am Section-Block (.mi-hero-gallery-section) geclippt.
   Nutzung: mi-hero-gallery-section auf den äußersten alignfull-Block,
            mi-hero-gallery auf den Galerie-Reihen-Block.
   ========================================================================== */

.mi-hero-gallery-section {
  overflow: hidden !important;
}

/* WordPress is-layout-grid überschreiben: Flex statt Grid */
.mi-hero-gallery {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 1.5rem !important;
  grid-template-columns: unset !important;
}

.mi-hero-gallery > .wp-block-image {
  flex: 0 0 440px;
  height: 330px;
}

.mi-hero-gallery > .wp-block-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mi-hero-gallery--offset {
  margin-left: calc(-220px - 0.75rem) !important; /* halbes Bild + halber Gap */
}

/* ==========================================================================
   Card Grid (.mi-card-grid)
   Responsive 3-spaltig → 2-spaltig → 1-spaltig.
   ========================================================================== */

.mi-card-grid {
  grid-template-columns: repeat(3, 1fr) !important;
}

@media (max-width: 1199px) {
  .mi-card-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

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

/* ==========================================================================
   Grid Columns Responsive (u-grid-cols-*)
   ========================================================================== */

.u-grid-cols-2 {
  grid-template-columns: repeat(2, 1fr) !important;
}

.u-grid-auto-2 {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
}

@media (max-width: 992px) {
  .u-grid-cols-2 {
    grid-template-columns: 1fr !important;
  }
}

.u-grid-cols-3 {
  grid-template-columns: repeat(3, 1fr) !important;
}

@media (max-width: 1199px) {
  .u-grid-cols-3 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 599px) {
  .u-grid-cols-3 {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   Grid Max Columns
   ========================================================================== */

@media (min-width: 1199px) {
  .u-grid-max-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
  }
  .u-grid-max-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }
  .u-grid-max-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
  .u-grid-max-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
  .u-grid-max-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .u-grid-max-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 992px) {
  .u-grid-max-8-md {
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
  }
  .u-grid-max-6-md {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }
  .u-grid-max-5-md {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
  .u-grid-max-4-md {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
  .u-grid-max-3-md {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .u-grid-max-2-md {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ==========================================================================
   Greyd Animation Overrides
   Überschreibt Greyd-Standard-Animationen mit modernerem Easing,
   subtileren Distanzen und optionalen Extras (blur-reveal, stagger).

   Technischer Hintergrund:
   – Greyd-Plugin (style.css) setzt [data-anim-action] mit Spezifität (0,1,0)
     und transition-duration: 200ms; timing: ease.
   – [data-anim-event="onScroll"][data-anim-triggered="false"][data-anim-reverse="false"]
     überschreibt mit transition-duration: 0s !important (0,3,0) – damit snappen
     Elemente instant in ihren Initialzustand, bevor die Animation getriggert wird.
     Diese Regel lassen wir absichtlich gelten.
   – Unsere Preset-Overrides nutzen [data-anim-action="X"][data-anim-event] (0,2,0)
     mit !important – das gewinnt beim Trigger (wenn triggered="true"), aber die
     0s-Regel mit (0,3,0) und !important gewinnt beim Snap (triggered="false").
   – Greyd setzt fadeIn*-Initialzustände per CSS-Regel, nicht als Inline-Style,
     daher ist !important hier ausreichend (kein Inline-Specificity-Problem).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CSS Custom Properties
   -------------------------------------------------------------------------- */

:root {
  --mi-ease-reveal: cubic-bezier(0.16, 1, 0.3, 1);   /* easeOutExpo: schnell rein, weiches Ausschwingen */
  --mi-ease-scale:  cubic-bezier(0.34, 1.56, 0.64, 1); /* leichter Overshoot für zoomIn */
  --mi-dur-opacity:   0.5s;
  --mi-dur-transform: 0.7s;
}

/* --------------------------------------------------------------------------
   2. Basis-Timing überschreiben
   Erhöhte Spezifität durch zweiten Attribut-Selektor (0,2,0 statt 0,1,0).
   -------------------------------------------------------------------------- */

[data-anim-action][data-anim-event] {
  transition-timing-function: var(--mi-ease-reveal) !important;
  transition-duration: var(--mi-dur-transform) !important;
}

/* --------------------------------------------------------------------------
   3. Preset-Initialzustände: subtilere Distanzen + layered Transition
   opacity läuft schneller als transform → Tiefeneffekt beim Einblenden.
   -------------------------------------------------------------------------- */

[data-anim-action="fadeIn"][data-anim-event] {
  transition:
    opacity var(--mi-dur-opacity) var(--mi-ease-reveal) !important;
}

[data-anim-action="fadeInUp"][data-anim-event] {
  transform: translateY(30px) !important;
  transition:
    opacity   var(--mi-dur-opacity)   var(--mi-ease-reveal),
    transform var(--mi-dur-transform) var(--mi-ease-reveal) !important;
}

[data-anim-action="fadeInDown"][data-anim-event] {
  transform: translateY(-30px) !important;
  transition:
    opacity   var(--mi-dur-opacity)   var(--mi-ease-reveal),
    transform var(--mi-dur-transform) var(--mi-ease-reveal) !important;
}

[data-anim-action="fadeInLeft"][data-anim-event] {
  transform: translateX(-30px) !important;
  transition:
    opacity   var(--mi-dur-opacity)   var(--mi-ease-reveal),
    transform var(--mi-dur-transform) var(--mi-ease-reveal) !important;
}

[data-anim-action="fadeInRight"][data-anim-event] {
  transform: translateX(30px) !important;
  transition:
    opacity   var(--mi-dur-opacity)   var(--mi-ease-reveal),
    transform var(--mi-dur-transform) var(--mi-ease-reveal) !important;
}

[data-anim-action="zoomIn"][data-anim-event] {
  transform: scale(0.92) !important;
  transition:
    opacity   var(--mi-dur-opacity)   var(--mi-ease-scale),
    transform var(--mi-dur-transform) var(--mi-ease-scale) !important;
}

/* --------------------------------------------------------------------------
   4. Endzustände sicherstellen
   -------------------------------------------------------------------------- */

[data-anim-action="fadeInUp"][data-anim-triggered="true"],
[data-anim-action="fadeInDown"][data-anim-triggered="true"],
[data-anim-action="fadeInLeft"][data-anim-triggered="true"],
[data-anim-action="fadeInRight"][data-anim-triggered="true"],
[data-anim-action="zoomIn"][data-anim-triggered="true"] {
  transform: none !important;
}

/* --------------------------------------------------------------------------
   5. Blur Reveal (.mi-blur-reveal)
   Opt-in: Klasse im Block-Editor unter "Zusätzliche CSS-Klassen" eintragen.
   Fügt einen subtilen Blur-Effekt zum Reveal hinzu (Frosted-Reveal-Look).
   Nicht als Default – bewusst opt-in, da filter teurer als transform.
   -------------------------------------------------------------------------- */

/* Spezifität (0,3,0): Klasse + 2 Attribut-Selektoren → überschreibt Preset-Transition */
.mi-blur-reveal[data-anim-action][data-anim-event] {
  filter: blur(4px);
  transition:
    opacity   var(--mi-dur-opacity)   var(--mi-ease-reveal),
    transform var(--mi-dur-transform) var(--mi-ease-reveal),
    filter    var(--mi-dur-transform) var(--mi-ease-reveal) !important;
}

.mi-blur-reveal[data-anim-action][data-anim-triggered="true"] {
  filter: blur(0px);
}

/* --------------------------------------------------------------------------
   6. Hero Motion Initialzustände
   Nur aktiv wenn .mi-motion-ready auf <html> gesetzt ist (= JS verfügbar).
   Inline-Script in wp_head setzt die Klasse synchron vor dem ersten Paint →
   kein Flash-of-Content. Ohne JS: keine Klasse, alle Elemente sichtbar.
   -------------------------------------------------------------------------- */

/* .mi-motion-ready .mi-brand-element--header h1,
.mi-motion-ready .mi-brand-element--header .u-grid-cols-2 p,
.mi-motion-ready .mi-brand-element--header .wp-block-greyd-buttons {
  opacity: 0;
}

.mi-motion-ready .mi-brand-element--header figure.wp-block-image {
  clip-path: inset(0 0 100% 0 round 1rem);
} */

/* @todo Proof of Concept – auskommentiert bis Hero-Animation finalisiert wird.
.mi-brand-element--header h1,
.mi-brand-element--header .u-grid-cols-2 p,
.mi-brand-element--header .wp-block-greyd-buttons {
  opacity: 0;
}

.mi-brand-element--header figure.wp-block-image {
  clip-path: inset(0 0 100% 0 round 1rem);
} */

/* Hero Text+Image (.mi-hero--text-image) */
.mi-motion-ready .mi-hero--text-image h1,
.mi-motion-ready .mi-hero--text-image p,
.mi-motion-ready .mi-hero--text-image .wp-block-greyd-buttons {
  opacity: 0;
}

.mi-motion-ready .mi-hero--text-image figure.wp-block-image {
  clip-path: inset(0 0 100% 0 round 1rem);
}

/* Hero Fullscreen Image (.mi-hero--fullscreen-image) */
.mi-motion-ready .mi-hero--fullscreen-image h1,
.mi-motion-ready .mi-hero--fullscreen-image h2,
.mi-motion-ready .mi-hero--fullscreen-image p,
.mi-motion-ready .mi-hero--fullscreen-image .wp-block-greyd-buttons {
  opacity: 0;
}

/* Inline background-image vom Section-Block entfernen –
   echtes <img> übernimmt */
.mi-hero--fullscreen-image {
  position: relative;
  overflow: hidden;
  background-image: none !important;
}

/* figure.mi-hero__fullscreen-image: absolut, füllt den Container */
.mi-hero__fullscreen-image {
  position: absolute !important;
  inset: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 0;
}

.mi-hero__fullscreen-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* Content über dem Bild */
.mi-hero--fullscreen-image > .wp-block-group {
  position: relative;
  z-index: 1;
}

/* Header initial state */
.mi-motion-ready header.wp-block-template-part {
  opacity: 0;
  transform: translateY(-10px);
}

/* Section-Reveals: direkte Kinder der top-level Sections (nicht der Container selbst –
   Section-Backgrounds sollen immer sichtbar bleiben). mi-card-grid und mi-motion-stagger
   ausgeschlossen da sie eigene Animationen haben. mi-motion-none überspringt Animationen. */
.mi-motion-ready main .wp-block-post-content > .wp-block-group:not(.mi-hero):not(.mi-motion-none) > *:not(.mi-card-grid):not(.mi-motion-stagger):not(.mi-motion-reveal):not(.mi-hero):not(:has(.mi-hero)):not(.mi-motion-none),
.mi-motion-ready main > .wp-block-group:not(.mi-hero):not(.mi-motion-none) > *:not(.mi-card-grid):not(.mi-motion-stagger):not(.mi-motion-reveal):not(.mi-hero):not(:has(.mi-hero)):not(.mi-motion-none) {
  opacity: 0;
}

/* mi-motion-reveal: direkte Kinder initial ausblenden */
.mi-motion-ready .mi-motion-reveal:not(.mi-motion-none) > *:not(.mi-motion-none) {
  opacity: 0;
}

/* --------------------------------------------------------------------------
   7. Generic Stagger (.mi-stagger)
   Eltern-Container bekommt Klasse mi-stagger im Editor.
   Direktkinder mit data-anim-action werden gestaffelt animiert.
   !important nötig, weil Greyd transition-delay: 0s !important setzt –
   unsere Delays gewinnen aber beim Trigger (triggered="true"), da die
   Greyd-0s-Regel nur für triggered="false" gilt.
   -------------------------------------------------------------------------- */

.mi-stagger > [data-anim-action]:nth-child(1) { transition-delay:   0ms; }
.mi-stagger > [data-anim-action]:nth-child(2) { transition-delay: 100ms !important; }
.mi-stagger > [data-anim-action]:nth-child(3) { transition-delay: 200ms !important; }
.mi-stagger > [data-anim-action]:nth-child(4) { transition-delay: 300ms !important; }
.mi-stagger > [data-anim-action]:nth-child(5) { transition-delay: 400ms !important; }
.mi-stagger > [data-anim-action]:nth-child(6) { transition-delay: 500ms !important; }

/* Greyd Posts Slider: --query-block-gap global auf small setzen.
   Gleiche Spezifität wie Greyd's Regel, gewinnt durch spätere Position im Cascade. */
.greyd-posts-slider.greyd-posts-slider {
  --query-block-gap: var(--wp--preset--spacing--small);
}

/* ==========================================================================
   Page Transitions
   Cross-Document View Transitions (Chrome 126+, Firefox 136+).
   Kein JavaScript nötig – @view-transition aktiviert automatisch für alle
   gleichseitigen Navigationen. Ältere Browser ignorieren die Regeln.
   ========================================================================== */

@view-transition {
  navigation: auto;
}

@keyframes mi-vt-fade-in {
  from { opacity: 0; }
}

/* Alte Seite bleibt sichtbar bis die neue Seite fertig geladen ist –
   verhindert leere Fläche bei langsamen Verbindungen. */
::view-transition-old(root) {
  animation: none;
}

::view-transition-new(root) {
  animation: 350ms ease-out both mi-vt-fade-in;
}

/* ==========================================================================
   Forms (greyd-forms)
   ========================================================================== */

/* Erstes sichtbares Formular-Element: greyd injiziert immer einen class-losen Honeypot-Div
   als erstes Kind, daher ist das erste Eingabefeld stets :nth-child(2). */
.greyd_form > .input-wrapper:nth-child(2) {
  margin-block-start: 0;
}

/* Text-, E-Mail- und Textarea-Felder */
.greyd_form .input-inner-wrapper input.input,
.greyd_form .input-inner-wrapper textarea.input {
  border-radius: var(--mi-form-radius);
}

/* Placeholder-Schriftgröße */
.greyd_form .input-inner-wrapper input.input::placeholder,
.greyd_form .input-inner-wrapper textarea.input::placeholder {
  font-size: 0.875em;
}

/* Checkbox: custom Indicator-Span */
.greyd_form .checkbox-label input[type="checkbox"] + span {
  border-radius: 0.25rem;
}

/* File Upload Drop-Zone */
.wp-block-greyd-forms-upload label {
  display: block;
  cursor: pointer;
}

.wp-block-greyd-forms-upload label .input {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1.75rem 1.5rem;
  border: 2px dashed var(--wp--preset--color--mediumlight);
  border-radius: var(--mi-form-radius);
  background-color: var(--wp--preset--color--base);
  color: var(--wp--preset--color--tertiary);
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    color 0.2s ease;
}

.wp-block-greyd-forms-upload label:hover .input {
  border-color: var(--wp--preset--color--secondary);
  background-color: var(--wp--preset--color--background);
  color: var(--wp--preset--color--secondary);
}

/* Upload-Icon: inline-Style von greyd überschreiben */
.wp-block-greyd-forms-upload .icon_upload,
.wp-block-greyd-forms-upload .icon_drawer_alt {
  font-size: 1.4rem !important;
  margin-right: 0 !important;
}

/* After-Message (Formular-Feedback)
   greyd setzt border-width: 1px 1px 1px 5px (linker Akzentstreifen) und border-radius: 2px.
   Wir überschreiben Farben, Radius und Shadow mit Markenwerten.
   Zustände: .success · .danger · .info
   ========================================================================== */

.message {
  border-radius: var(--mi-form-radius);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.message.success {
  border-color: var(--wp--preset--color--success);
  background-color: color-mix(in srgb, var(--wp--preset--color--success) 10%, white);
}

.message.danger {
  border-color: var(--wp--preset--color--critical);
  background-color: color-mix(in srgb, var(--wp--preset--color--critical) 10%, white);
}

.message.info {
  border-color: var(--wp--preset--color--warning);
  background-color: color-mix(in srgb, var(--wp--preset--color--warning) 10%, white);
}