:root {
  --text:
    verdana, HelveticaNeue, "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* Farben kommen aus der Theme-Palette (--contrast*, --base*, --accent*).
     Nur die beiden dunkleren Varianten fehlen dort und werden hier aus den
     Theme-Tokens abgeleitet, damit ein Brand-Wechsel sie mitnimmt. */

  --mak-red: #e30613;
  --mak-red-dark: #b80510;
  --mak-ink: #17191d;
  --mak-muted: #667085;
  --mak-line: #e7e8ec;
  --mak-soft: #f6f7f8;
  --mak-paper: #ffffff;
  --contrast: #2a2a2a;
  --contrast-2: #6e6e6e;
  --contrast-3: #f8f8f8;
  --base: #e1e1e1;
  --base-2: #f7f8f9;
  --base-3: #ffffff;
  --accent: #e3001a;
  --accent2: #6EBAC2 !important;
  --mak-radius: 22px;
  --mak-shadow: 0 18px 50px rgba(17, 24, 39, 0.1);
  --accent-dark: color-mix(in srgb, var(--accent) 82%, #000);

  --accent2-dark: color-mix(in srgb, var(--accent2) 75%, #000);
  --border-r-sm: 3px;
  --border-r-md: 8px;
  --border-r-lg: 14px;
  --border-r-full: 50%;
  --trans-duration: 0.3s;
  --trans-duration-md: 0.5s;
  --trans-duration-lg: 1s;
}

/*
Remove wenn production */
.mak-quote-rotator-slide {
  display: inset !important;
}

/* Mega Menu Ende */

@media (prefers-reduced-motion: reduce) {
  /* Animationen und Übergänge stoppen oder stark vereinfachen */
  * {
    -webkit-animation-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    -webkit-animation-iteration-count: 1 !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  :root {
    --trans-duration: 0.01ms !important;
  }
}

/* Global */
.wrapper-custom {
  max-width: 1700px;
  margin-inline: auto;
  padding-inline: clamp(1.5rem, 2vw, 2rem);
}
.wrapper-custom-full {
  padding-inline: clamp(1.5rem, 2vw, 2rem);
}
.card-span-twisted-heading {
  font-size: clamp(1.5rem, 3svw, 3rem);
  font-weight: 700;
  span {
    background-color: var(--accent2);
    display: block;
    padding: 5px 1rem;
    border-radius: 3px;
    color: white;
    box-shadow: 2px 3px 8px rgba(0, 0, 0, 0.1);
    white-space: nowrap;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin-inline: auto;

    &:nth-of-type(1) {
      rotate: -5deg;
      box-shadow: 2px 7px 22px rgba(0, 0, 0, 0.3);
      position: relative;
      left: 0;
      top: 0.2ch;
    }
  }
}
.gb-element-9f20da49,
.gb-element-c84cfb65 {
  background-color: var(--accent2) !important;
}
/* Global */

.main-header * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.custom-scrollbar-container {
  position: absolute;
  inset-inline: 0;
  /* inset-block-start: 10px; */
  height: 5px;
  background-color: var(--accent);
  animation-timeline: scroll(root);
  -webkit-animation-name: scaleProgress;
  animation-name: scaleProgress;
  -webkit-animation-duration: auto;
  animation-duration: auto;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  transform-origin: left center;
}

@-webkit-keyframes scaleProgress {
  0% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
  }
}

@keyframes scaleProgress {
  0% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
  }
}

header#custom-main-header {
  /* Negatives top: die obere Leiste darf wegscrollen, die Zeile mit Logo und
     Navigation bleibt danach stehen. */
  position: -webkit-sticky;
  position: sticky;
  z-index: 999999;
  top: -10px;
}
header#custom-main-header {
  .wrapper {
    position: relative;
  }
}
header#custom-main-header ul[class] {
  list-style: none;
}

header#custom-main-header button {
  border: none;
  background: none;
  cursor: pointer;
}

header#custom-main-header a,
header#custom-main-header button {
  text-decoration: none;
  color: currentColor;
  transition: all var(--trans-duration);
}
/* header#custom-main-header a[data-social="facebook"],
header#custom-main-header button[data-social="facebook"] {
  fill: rgb(24, 119, 242);
}
header#custom-main-header a[data-social="instagram"],
header#custom-main-header button[data-social="instagram"] {
  fill: orangered;
}
header#custom-main-header a[data-social="youtube"],
header#custom-main-header button[data-social="youtube"] {
  fill: #ff0000;
}
header#custom-main-header a[data-social="linkedin"],
header#custom-main-header button[data-social="linkedin"] {
  fill: #0077b5;
}
header#custom-main-header a[data-social="facebook"]:hover,
header#custom-main-header button[data-social="facebook"]:hover {
  fill: var(--mak-paper);
}
header#custom-main-header a[data-social="instagram"]:hover,
header#custom-main-header button[data-social="instagram"]:hover {
  fill: var(--mak-paper);
}
header#custom-main-header a[data-social="youtube"]:hover,
header#custom-main-header button[data-social="youtube"]:hover {
  fill: var(--mak-paper);
}
header#custom-main-header a[data-social="linkedin"]:hover,
header#custom-main-header button[data-social="linkedin"]:hover {
  fill: var(--mak-paper);
} */
.--top_contact-items a {
  fill: currentColor;
}
header#custom-main-header a > svg,
header#custom-main-header button > svg {
  display: block;
  width: 20px;
  fill: currentColor;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.sr-only + svg {
  display: block;
  width: 1rem;
  height: 1rem;
}

header#custom-main-header a:focus-visible,
header#custom-main-header button:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--border-r-sm);
}

/* Header */
header#custom-main-header {
  background-color: var(--base-2);
  .wrapper {
    max-width: 1700px;
    margin-inline: auto;
  }
}
._item_list-title {
  font-weight: 700;
  font-size: 1rem;
  background: var(--accent2-dark);
  color: var(--base-3);
  padding: 0.5rem 1rem;
  display: block;
  border-radius: var(--border-r-sm) var(--border-r-sm) 0 0;
}

.--top_contact-items span:not(.sr-only),
.--top_socials-items span:not(.sr-only) {
  display: none;
}

/* Die Zeile traegt nur noch Hintergrund und Bezugsrahmen; das Flexbox-Layout
   sitzt auf .wrapper. So laeuft der Hintergrund ueber die volle Breite,
   waehrend der Inhalt auf die Wrapper-Breite begrenzt bleibt. */
.main-header--top {
  display: block;
  /* Bezugsrahmen fuer das Such-Panel. Ohne das faellt es auf
     #custom-main-header zurueck und haengt dann unter der ganzen Kopfzeile,
     statt die untere Zeile zu ueberdecken. Aktiviert ausserdem das
     z-index: 100, das vorher wirkungslos war.
     Bewusst hier und nicht auf .wrapper: das Panel soll ueber die ganze
     Zeilenbreite laufen, nicht nur ueber die des Inhalts. */
  position: relative;
  z-index: 100;
  margin-inline: auto;
  background: var(--base-2);
  padding: 0 1rem;
}
.main-header--top ul {
  display: flex;
  gap: 10px;
}
/* Bewusst auf die beiden Icon-Listen begrenzt und nicht auf
   .main-header--top: in der Kopfzeile liegen inzwischen auch die
   Such-Buttons und die Ergebnis-Links. Die wuerden sonst das
   !important auf der Farbe und die 32px-Icongroesse erben. */
header .--top_contact-items a,
header .--top_contact-items button,
header .--top_socials-items a,
header .--top_socials-items button {
  display: block;
  color: var(--accent2) !important;
  border: 1px solid rgba(0, 0, 0, 0.1254901961);
}
header#custom-main-header .--top_contact-items a svg,
header#custom-main-header .--top_contact-items button svg,
header#custom-main-header .--top_socials-items a svg,
header#custom-main-header .--top_socials-items button svg {
  height: 32px;
  width: 32px;
}
.--top_contact-items a:hover,
.--top_contact-items button:hover,
.--top_socials-items a:hover,
.--top_socials-items button:hover {
  background: var(--accent2-dark);
}

/* Header Search Form */
form._search--form {
  display: flex;
  position: relative;
  width: 100%;
  input {
    width: 100%;
    /* Vorn Platz fuer das Lupen-Icon, das im Feld liegt. */
    padding: 0.3rem 1rem 0.3rem 3rem;
    font: inherit;
    font-size: 0.95rem;
    color: var(--contrast);
    background: var(--base-3);
    border-radius: var(--border-r-sm);
    border: 1px solid var(--base);
    transition:
      border-color var(--trans-duration) ease,
      box-shadow var(--trans-duration) ease;
    &::-webkit-input-placeholder {
      font-size: 0.8rem;
    }
    &::-moz-placeholder {
      font-size: 0.8rem;
    }
    &:-ms-input-placeholder {
      font-size: 0.8rem;
    }
    &::-ms-input-placeholder {
      font-size: 0.8rem;
    }
    &::placeholder {
      font-size: 0.8rem;
    }
  }
  /* Die native Löschen-Schaltfläche von type="search" braucht hier niemand:
     geleert wird über Escape oder den Schließen-Button. */
  input::-webkit-search-cancel-button,
  input::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
  }
  input::-webkit-input-placeholder {
    color: var(--contrast-2);
    opacity: 1;
  }
  input::-moz-placeholder {
    color: var(--contrast-2);
    opacity: 1;
  }
  input:-ms-input-placeholder {
    color: var(--contrast-2);
    opacity: 1;
  }
  input::-ms-input-placeholder {
    color: var(--contrast-2);
    opacity: 1;
  }
  input::placeholder {
    color: var(--contrast-2);
    opacity: 1;
  }
  input:focus {
    outline: none;
    border-color: var(--accent2);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent2) 30%, transparent);
  }
  /* Liegt im Feld, nicht daneben: pointer-events: none, damit ein Klick auf
     das Icon im Eingabefeld landet und den Cursor setzt. */
  ._search--icon {
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    pointer-events: none;
    color: var(--contrast-2);
    transition: color var(--trans-duration) ease;
  }
}

/* Das Icon steht im Markup vor dem Feld, also greift kein
   Geschwister-Kombinator (~ trifft nur nachfolgende Elemente). */
form._search--form:has(input:focus) ._search--icon {
  color: var(--accent2);
}

/* Mobile first: Basis = schmaler Viewport.
   Burger sichtbar, Navigationsliste eingeklappt. */
.main-header--bottom {
  position: relative;
  display: block;
  padding: 0;
}

/* Der gemeinsame Flex-Container beider Zeilen. Breite und Zentrierung kommen
   aus der Theme-Definition von .wrapper - hier steht nur die Verteilung. */
.main-header--top > .wrapper,
.main-header--bottom > .wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  /* Die Regel .main-header * { margin: 0 } weiter oben wuerde ein
  margin: 0 auto aus der Theme-Definition plattmachen - je nach
  Ladereihenfolge der Stylesheets. Darum hier ausdruecklich. */
  margin-inline: auto;
}
.main-header--bottom .--bottom_logo img {
  max-width: 150px;
  width: 50dvw;
  height: auto;
  display: block;
}
._main-nav--toggle {
  display: flex;
  width: auto;
}
._main-nav--toggle svg {
  width: 2rem;
  height: 2rem;
  fill: var(--contrast-2);
}
._main-nav--toggle svg path {
  position: relative;
  transition: all var(--trans-duration);
}
._main-nav--toggle[aria-expanded="true"] svg {
  fill: var(--accent2);
}
._main-nav--toggle[aria-expanded="true"] svg path:first-of-type {
  transform: translateX(-20%);
  width: 40%;
}
._main-nav--toggle[aria-expanded="true"] svg path:nth-of-type(2) {
  transform: translateX(-10%);
  width: 20%;
}
.main-header--bottom a,
.main-header--bottom button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1rem 0.5rem;
  margin-block: 0 5px;
  gap: 1rem;
  transition: all var(--trans-duration);
}
.main-header--bottom a:hover:not(.--bottom_logo a) {
  background-color: var(--accent2);
  color: var(--base-3) !important;
}
.main-header--bottom button:hover:not(._main-nav--toggle) {
  background-color: var(--accent2) !important;
  color: var(--base-3) !important;
}
._main-nav--nav-items {
  display: none;
  position: absolute;
  inset-inline: 2rem;
  border: 1px solid var(--base);
  background: var(--base-2);
  transition: all var(--trans-duration-md);
  box-shadow: 2px 3px 20px rgba(0, 0, 0, 0.1254901961);
}

.--nav-item--latest-post {
  flex-shrink: 0;
  margin: 1rem;
  max-width: 50dvw;
  display: none;
}
.--nav-item--latest-post a {
  padding: 0;
  border-radius: var(--border-r-md);
}

.--latest-post-card {
  position: relative;
  display: block;
  width: 100%;
  min-height: 420px;
  color: var(--base-3);
  text-decoration: none;
  isolation: isolate;
  border-radius: inherit;
  overflow: hidden;
  background: var(--base);
}
.--latest-post-card:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
.--latest-post-card img {
  width: 100%;
  height: 100%;
  min-height: 420px;
  -o-object-fit: contain;
  object-fit: contain;
  display: block;
  -webkit-filter: saturate(1.05) contrast(1.02);
  filter: saturate(1.05) contrast(1.02);
}
.--latest-post-card .--latest-post-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(17, 17, 17, 0.12) 0%,
    rgba(17, 17, 17, 0.82) 100%
  );
  z-index: 1;
}
.--latest-post-card .--latest-post-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.6rem;
  padding: 1.25rem 1.25rem 1.4rem;
}
.--latest-post-card .--latest-post-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
}
.--latest-post-card .--latest-post-kicker {
  position: absolute;
  top: 0;
  left: 0;
}
.--latest-post-card .--latest-post-kicker b {
  position: absolute;
  top: 19px;
  font-size: 0.5rem;
  left: 51%;
  transform: translateX(-50%);
  color: var(--base);
}
.--latest-post-card .--latest-post-kicker svg {
  fill: var(--accent);
  width: 4rem;
  height: auto;
}
.--latest-post-card .--latest-post-date {
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
}
.--latest-post-card .--latest-post-date::before {
  content: "·";
  -webkit-margin-end: 0.5rem;
  margin-inline-end: 0.5rem;
}
.--latest-post-card ._cta_title {
  font-size: clamp(1.25rem, 1.6vw, 1.6rem);
  line-height: 1.2;
  font-weight: 700;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 24ch;
  text-wrap: balance;
  color: var(--base);
}
.--latest-post-card ._cta_link-text {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-top: 0.25rem;
  font-size: 0.82rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--accent);
  color: var(--base-3);
  padding: 0.75rem 1rem;
  font-weight: 700;
  border-radius: var(--border-r-sm);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 28%, transparent);
  transition:
    transform var(--trans-duration) ease,
    background-color var(--trans-duration) ease,
    box-shadow var(--trans-duration) ease;
}
.--latest-post-card ._cta_link-text svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}
.--latest-post-card:hover ._cta_link-text,
.--latest-post-card:focus-visible ._cta_link-text {
  background: var(--accent-dark);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 38%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .--latest-post-card ._cta_link-text {
    transition: none;
  }
  .--latest-post-card:hover ._cta_link-text,
  .--latest-post-card:focus-visible ._cta_link-text {
    transform: none;
  }
}
@media (forced-colors: active) {
  .--latest-post-card img {
    display: none;
  }
  .--latest-post-card .--latest-post-overlay {
    background: Canvas;
  }
  .--latest-post-card .--latest-post-content {
    color: CanvasText;
  }
  .--latest-post-card .--latest-post-kicker,
  .--latest-post-card .--latest-post-date,
  .--latest-post-card ._cta_title {
    color: CanvasText;
  }
  .--latest-post-card ._cta_link-text {
    border: 1px solid ButtonBorder;
    background: ButtonFace;
    color: ButtonText;
  }
  .--latest-post-card:focus-visible {
    outline: 3px solid Highlight;
  }
}

/* Ladezustand: die Karte wird erst nach dem fetch gefuellt. Ohne
   Platzhalter springt das Layout, wenn jemand das Menue frueh oeffnet. */
.--latest-post-card--skeleton {
  background: var(--contrast);
  cursor: default;
}
.--latest-post-card--skeleton .--latest-post-overlay {
  background: linear-gradient(
    180deg,
    rgba(17, 17, 17, 0.12) 0%,
    rgba(17, 17, 17, 0.55) 100%
  );
}

.--skeleton-line {
  display: block;
  border-radius: var(--border-r-sm);
  background: rgba(255, 255, 255, 0.16);
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.24) 50%,
    rgba(255, 255, 255, 0.1) 100%
  );
  background-size: 200% 100%;
  -webkit-animation: mak-skeleton 1.4s ease-in-out infinite;
  animation: mak-skeleton 1.4s ease-in-out infinite;
}
.--skeleton-line.--skeleton-line--kicker {
  width: 42%;
  height: 0.72rem;
}
.--skeleton-line.--skeleton-line--title {
  width: 92%;
  height: 1.4rem;
}
.--skeleton-line.--skeleton-line--title-short {
  width: 64%;
  height: 1.4rem;
}
.--skeleton-line.--skeleton-line--button {
  width: 8.5rem;
  height: 2.6rem;
  margin-top: 0.25rem;
  border-radius: var(--border-r-sm);
}

@-webkit-keyframes mak-skeleton {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}

@keyframes mak-skeleton {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}
/* Dritte Ebene */
._item_list--has-sub {
  position: relative;
}

._sub-item--toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  text-align: start;
}

._sub-item--chevron {
  width: 0.85rem;
  height: 0.85rem;
  flex-shrink: 0;
  transition: transform var(--trans-duration) ease;
}

._sub-item--toggle[aria-expanded="true"] ._sub-item--chevron {
  transform: rotate(180deg);
}

._main-nav--toggle[aria-expanded="true"] + ._main-nav--nav-items {
  display: block;
  overflow-y: scroll;
  height: 85dvh;
}

/* Nur mobil: dort klappt die Liste wirklich auf. Auf dem Desktop ist sie
   immer sichtbar – und der transform aus dieser Animation wuerde das
   ._main-nav--nav-items fuer die Dauer des Uebergangs zum Bezugsrahmen
   machen. Das Megamenue haengt dann an der Liste statt am Header und ist
   fuer eine halbe Sekunde zu schmal. */
@media (max-width: 999.98px) {
  @starting-style {
    ._main-nav--nav-items {
      opacity: 0;
      transform: translateY(50px);
    }
  }
}
/* .search-result-container ist ausgenommen, weil sie ihren display-Wechsel
   wie das Megamenue ueber allow-discrete animiert. Ein !important hier
   wuerde den Uebergang abschneiden. */
[hidden]:not(.--item_megamenu):not(.search-result-container) {
  display: none !important;
}

.--item_megamenu {
  display: grid;
  grid-template-rows: 1fr; /* aufgeklappt */
  opacity: 1;
  transition:
    grid-template-rows var(--trans-duration) ease,
    opacity var(--trans-duration) ease,
    display var(--trans-duration) allow-discrete;
  transition:
    grid-template-rows var(--trans-duration) ease,
    opacity var(--trans-duration) ease,
    display var(--trans-duration) allow-discrete,
    -ms-grid-rows var(--trans-duration) ease;
}
.--item_megamenu > * {
  overflow: hidden;
  min-height: 0;
}

.--item_megamenu[hidden] {
  display: none;
  grid-template-rows: 0fr; /* zugeklappt */
  opacity: 0;
}

@starting-style {
  .--item_megamenu:not([hidden]) {
    grid-template-rows: 0fr;
    opacity: 0;
  }
}
._nav-item--toggle > svg {
  transition: transform var(--trans-duration) ease;
}

._nav-item--toggle[aria-expanded="true"] > svg {
  transform: rotate(180deg);
}

/* Ab 821px: Burger entfaellt, Navigation ist dauerhaft sichtbar.
   Der Breakpoint muss mit dem matchMedia in script.js uebereinstimmen,
   sonst meldet der Burger einen Zustand, den CSS nicht abbildet. */
@media (min-width: 1000px) {
  header#custom-main-header {
    /* Negatives top: die obere Leiste darf wegscrollen, die Zeile mit Logo und
     Navigation bleibt danach stehen. */
    position: -webkit-sticky;
    position: sticky;
    z-index: 999999;
    top: -52px;
  }
  .main-header--bottom {
    padding: 0;
    a {
      margin-block: 0;
    }
  }
  .main-header--bottom > .wrapper {
    align-items: flex-end;
  }
  .main-header--bottom a,
  .main-header--bottom button {
    margin-block: 0;
  }
  .main-header--bottom li.current-menu-item > a,
  .main-header--bottom
    li.current-menu-ancestor
    > a
    .main-header--bottom
    li.current-menu-item
    > button,
  .main-header--bottom li.current-menu-ancestor > button {
    position: relative;
    &::after {
      content: "";
      position: absolute;
      inset-inline: 0;
      bottom: 0;
      height: 5px;
      background: var(--accent);
      border-radius: 5px 5px 0 0;
    }
  }
  .main-header--bottom ._main-nav--toggle {
    display: none;
  }
  ._main-nav--nav-items {
    position: unset;
    inset-inline: unset;
    display: flex;
    gap: 1rem;
    box-shadow: unset;
    border: unset;
    background-color: unset;
    box-shadow: unset;
    margin-block: 0;
  }
  .--item_megamenu {
    position: absolute;
    inset-inline: 0;
    top: 100%;
    width: 100%;
    padding-inline: 1rem;
  }

  ._megamenu--container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    border: 1px solid var(--base-2);
    background-color: var(--base);
    position: relative;
    box-shadow: 3px 10px 25px rgba(0, 0, 0, 0.5);
    border-radius: 0 0 4px 4px;
    gap: clamp(4px, 2rem, 1rem);
  }
  .--nav-item--latest-post {
    display: block;
  }
  /* Auf dem Desktop liegt das Megamenue ohnehin absolut ueber dem Inhalt.
     Die Grid-Hoehenanimation braucht es hier nicht – und ihr overflow:hidden
     wuerde das Flyout der dritten Ebene abschneiden. */
  .--item_megamenu {
    display: block;
    grid-template-rows: none;
    opacity: 1;
    transform: translateY(0);
    transition:
      opacity var(--trans-duration) ease,
      transform var(--trans-duration) ease,
      display var(--trans-duration) allow-discrete;
  }
  .--item_megamenu > * {
    overflow: visible;
  }
  .--item_megamenu[hidden] {
    display: none;
    opacity: 0;
    transform: translateY(-8px);
  }
  @starting-style {
    .--item_megamenu:not([hidden]) {
      opacity: 0;
      transform: translateY(-8px);
    }
  }
  ._item_list--has-sub {
    position: static;
  }
  ._sub-item_list {
    position: absolute;
    top: 0;
    inset-inline-start: auto;
    inset-inline-end: 0;
    z-index: 20;
    width: min(320px, 40%);
    padding: 0.5rem;
    background: var(--base-3);
    border: 1px solid var(--base);
    border-radius: var(--border-r-md);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
  }
  ._sub-item_list a {
    white-space: normal;
  }
  /* Reicht der Platz rechts nicht, weil die oeffnende Spalte selbst schon
     bis dorthin reicht, klappt das Flyout auf die linke Seite des Panels.
     Das data-Attribut setzt script.js nach einer Messung beim Oeffnen. */
  ._sub-item_list[data-flip="left"] {
    inset-inline-end: auto;
    inset-inline-start: 0;
  }
  /* Der Pfeil zeigt zur Seite, weil das Flyout seitlich aufgeht – nicht
     darunter wie im Akkordeon. Das gilt in beiden Zustaenden; der
     [aria-expanded]-Fall muss mitgeschrieben werden, weil die Regel fuer das
     Akkordeon sonst spezifischer ist und den Pfeil nach oben drehen wuerde. */
  ._sub-item--toggle ._sub-item--chevron,
  ._sub-item--toggle[aria-expanded="true"] ._sub-item--chevron {
    transform: rotate(-90deg);
  }
  /* Das Flyout steht am rechten Rand und damit weit weg von seinem Eintrag.
     Ohne aktiven Zustand ist nicht erkennbar, wozu es gehoert. */
  ._sub-item--toggle[aria-expanded="true"] {
    background: var(--base-3);
    color: var(--contrast);
    font-weight: 700;
    border-radius: var(--border-r-sm) 0 0 var(--border-r-sm);
  }
}
/* Unterhalb des Desktop-Breakpoints ist die dritte Ebene ein normales,
   eingerücktes Akkordeon – kein Flyout. */
@media (max-width: 999.98px) {
  ._sub-item_list {
    -webkit-padding-start: 1.25rem;
    padding-inline-start: 1.25rem;
    -webkit-border-start: 2px solid var(--base);
    border-inline-start: 2px solid var(--base);
    -webkit-margin-start: 0.5rem;
    margin-inline-start: 0.5rem;
  }
}

/* =====================================================================
   Kopfzeilen-Suche
   ---------------------------------------------------------------------
   Zustandstraeger ist [data-search="open"] am Header, nicht am Formular:
   betroffen sind beide Kopfzeilen-Reihen. Die untere Reihe wird dabei
   nur unsichtbar, nicht display:none - sonst faellt sie aus dem Fluss,
   der Header schrumpft und die Seite springt beim Oeffnen.
   ===================================================================== */

.--top_search-container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

._search--dropdown {
  /* min-width: 0; */
  min-width: 100%;
}

._search--trigger,
._search--close {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0.5rem;
  color: var(--contrast-2);
  border-radius: var(--border-r-sm);
}
._search--trigger:hover,
._search--close:hover {
  color: var(--base-3);
  background: var(--accent2);
}
header#custom-main-header ._search--icon > svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: currentColor;
}

header#custom-main-header ._search--trigger > svg,
header#custom-main-header ._search--close > svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: currentColor;
}

/* Die untere Reihe raeumt das Feld fuer die Ergebnisse. */
.main-header--bottom {
  transition:
    opacity var(--trans-duration) ease,
    transform var(--trans-duration) ease,
    visibility var(--trans-duration) ease;
}
/* Nur ab Desktop: dort liegt die Suche in der oberen Reihe, die untere kann
   also komplett weichen. Mobil steckt der Lupen-Button selbst in dieser
   Reihe - sie auszublenden wuerde die Suche mit ausblenden. */
@media (min-width: 1000px) {
  [data-search="open"] .main-header--bottom {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
  }
}
/* Mobil verschwinden nur Logo und Burger, die Suche bleibt stehen. */
@media (max-width: 999.98px) {
  [data-search="open"] .--bottom_logo,
  [data-search="open"] .--bottom_main-nav {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

/* --- Ergebnis-Panel ------------------------------------------------- */

.search-result-container {
  position: absolute;
  inset-inline: 0;
  top: 100%;
  z-index: 60;
  overflow: hidden auto;
  -ms-scroll-chaining: none;
  overscroll-behavior: contain;
  max-height: min(70dvh, 40rem);
  background: var(--base-3);
  border: 1px solid var(--base);
  -webkit-border-before: 2px solid var(--accent);
  border-block-start: 2px solid var(--accent);
  border-radius: 0 0 var(--border-r-md) var(--border-r-md);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
  transition:
    opacity var(--trans-duration) ease,
    transform var(--trans-duration) ease,
    display var(--trans-duration) allow-discrete;
}
.search-result-container[hidden] {
  display: none;
  opacity: 0;
  transform: translateY(-10px);
}
@starting-style {
  .search-result-container:not([hidden]) {
    opacity: 0;
    transform: translateY(-10px);
  }
}

/* Ladebalken. Laeuft nur, solange aria-busy am Panel steht - so braucht
   das Skript keine eigene Klasse dafuer. */
._search--progress {
  display: block;
  height: 2px;
  background: transparent;
}
[aria-busy="true"] > ._search--progress {
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--accent) 50%,
    transparent 100%
  );
  background-size: 40% 100%;
  background-repeat: no-repeat;
  -webkit-animation: mak-search-progress 1s ease-in-out infinite;
  animation: mak-search-progress 1s ease-in-out infinite;
}
@-webkit-keyframes mak-search-progress {
  from {
    background-position: -40% 0;
  }
  to {
    background-position: 140% 0;
  }
}
@keyframes mak-search-progress {
  from {
    background-position: -40% 0;
  }
  to {
    background-position: 140% 0;
  }
}

._search--status {
  padding: 0.85rem 1.25rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--contrast-2);
}
._search--status:empty {
  display: none;
}

/* --- Ladeanzeige ---------------------------------------------------- */

/* Liegt ueber der Trefferliste. Beim Tippen bleiben die alten Treffer
   stehen - abgesetzte Flaeche und Trennlinie machen deutlich, dass der
   Hinweis oben und die Liste unten gerade nicht zusammengehoeren. */
._search--loading {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.9rem 1.25rem;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--contrast);
  background: var(--base-2);
  -webkit-border-after: 1px solid var(--base);
  border-block-end: 1px solid var(--base);
  /* Dasselbe Auftauchen wie bei den Treffern, damit der Kasten nicht
     haerter erscheint als die Liste, die er ankuendigt. */
  -webkit-animation: mak-search-in var(--trans-duration)
    cubic-bezier(0.2, 0.7, 0.2, 1) both;
  animation: mak-search-in var(--trans-duration) cubic-bezier(0.2, 0.7, 0.2, 1)
    both;
}

._search--loading-text {
  min-width: 0;
}

._search--loading-term {
  font-weight: 700;
  color: var(--accent-dark);
  /* Ein langer Suchbegriff darf die Zeile nicht aus dem Panel schieben. */
  overflow-wrap: anywhere;
}

._search--spinner {
  flex-shrink: 0;
  width: 1.15rem;
  height: 1.15rem;
  border: 2px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-block-start-color: var(--accent);
  border-radius: var(--border-r-full);
  -webkit-animation: mak-search-spin 0.7s linear infinite;
  animation: mak-search-spin 0.7s linear infinite;
}
@-webkit-keyframes mak-search-spin {
  to {
    transform: rotate(1turn);
  }
}
@keyframes mak-search-spin {
  to {
    transform: rotate(1turn);
  }
}

/* Die Punkte laufen dem Satz nach: der Ring sagt "es passiert etwas", die
   Punkte haengen am Text und lesen sich als dessen Fortsetzung. */
._search--dots {
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
  -webkit-margin-start: 4px;
  margin-inline-start: 4px;
}
._search--dots i {
  width: 4px;
  height: 4px;
  background: var(--accent);
  border-radius: var(--border-r-full);
  -webkit-animation: mak-search-dot 1.2s ease-in-out infinite;
  animation: mak-search-dot 1.2s ease-in-out infinite;
}
._search--dots i:nth-child(2) {
  -webkit-animation-delay: 0.15s;
  animation-delay: 0.15s;
}
._search--dots i:nth-child(3) {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}
@-webkit-keyframes mak-search-dot {
  0%,
  65%,
  100% {
    opacity: 0.25;
    transform: translateY(0);
  }
  32% {
    opacity: 1;
    transform: translateY(-3px);
  }
}
@keyframes mak-search-dot {
  0%,
  65%,
  100% {
    opacity: 0.25;
    transform: translateY(0);
  }
  32% {
    opacity: 1;
    transform: translateY(-3px);
  }
}

/* Die Treffer der vorigen Eingabe bleiben stehen, damit das Panel nicht bei
   jedem Tastendruck leer wird. Abgedunkelt und nicht klickbar, weil sie in
   dem Moment eine Antwort auf eine andere Frage sind. */
.search-result-container > ul.search-results,
.search-result-container > ._search--footer {
  transition: opacity var(--trans-duration) ease;
}
.search-result-container[aria-busy="true"] > ul.search-results,
.search-result-container[aria-busy="true"] > ._search--footer {
  opacity: 0.35;
  pointer-events: none;
}

/* --- Ergebnisliste -------------------------------------------------- */

ul.search-results {
  display: flex;
  flex-direction: column;
  /* .main-header--top ul setzt gap: 10px. Zwischen den Treffern trennen
     Linien, keine Luecken. */
  gap: 0;
}

/* --- Gruppen: Titeltreffer vs. reine Texterwaehnungen --------------- */

._search--group {
  display: flex;
  flex-direction: column;
}

._search--group-label {
  /* Klebt beim Scrollen oben an, damit auch weiter unten klar bleibt, in
     welcher Gruppe man gerade liest. */
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 0.55rem 1.25rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--contrast-2);
  background: var(--base-2);
  -webkit-border-before: 1px solid var(--base);
  border-block-start: 1px solid var(--base);
}
/* Die erste Gruppe steht direkt unter der Trefferzahl – dort waere die Linie
   die zweite in Folge. */
._search--group:first-child ._search--group-label {
  -webkit-border-before: 0;
  border-block-start: 0;
}

._search--result > a {
  display: grid;
  grid-template-columns: 5.5rem 1fr auto;
  align-items: center;
  gap: 0 1rem;
  padding: 0.9rem 1.25rem;
  -webkit-border-before: 1px solid var(--base-2);
  border-block-start: 1px solid var(--base-2);
  /* Beim Tippen wird die Liste komplett neu geschrieben. Eine Animation
     greift bei frisch eingefuegten Knoten zuverlaessig, ein transition
     mit @starting-style hier nicht. */
  -webkit-animation: mak-search-in var(--trans-duration)
    cubic-bezier(0.2, 0.7, 0.2, 1) both;
  animation: mak-search-in var(--trans-duration) cubic-bezier(0.2, 0.7, 0.2, 1)
    both;
  -webkit-animation-delay: calc(var(--i, 0) * 35ms);
  animation-delay: calc(var(--i, 0) * 35ms);
}
._search--group-label + ._search--result > a {
  -webkit-border-before: 0;
  border-block-start: 0;
}

._search--result > a:hover,
._search--result > a.is-active {
  background: var(--base-2);
}
._search--result > a.is-active {
  box-shadow: inset 3px 0 0 var(--accent);
}

@-webkit-keyframes mak-search-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

@keyframes mak-search-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

._result--type {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent2-dark);
}

._result--body {
  min-width: 0;
}

._result--title {
  display: block;
  font-size: clamp(1rem, 1.15vw, 1.15rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--contrast);
  text-wrap: balance;
}
._result--title mark {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: inherit;
  border-radius: 2px;
}

._result--excerpt {
  -webkit-margin-before: 0.2rem;
  margin-block-start: 0.2rem;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--contrast-2);
  /* Zweizeilig gekappt, damit lange Auszuege die Zeilenhoehe der Treffer
     nicht auseinanderziehen. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

header#custom-main-header ._result--arrow {
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
  fill: var(--contrast-2);
  opacity: 0;
  transform: translateX(-6px);
  transition:
    opacity var(--trans-duration) ease,
    transform var(--trans-duration) ease;
}
._search--result > a:hover ._result--arrow,
._search--result > a.is-active ._result--arrow,
._search--result > a:focus-visible ._result--arrow {
  opacity: 1;
  transform: translateX(0);
  fill: var(--accent);
}

/* --- Fusszeile des Panels ------------------------------------------- */

._search--footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  padding: 0.85rem 1.25rem;
  background: var(--base-2);
  -webkit-border-before: 1px solid var(--base);
  border-block-start: 1px solid var(--base);
}
._search--footer[hidden] {
  display: none;
}

a._search--all {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
a._search--all:hover {
  color: var(--accent-dark);
}

._search--hint {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.7rem;
  color: var(--contrast-2);
}
._search--hint kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  padding: 0.1rem 0.3rem;
  font-family: inherit;
  font-size: 0.7rem;
  line-height: 1.4;
  color: var(--contrast);
  background: var(--base-3);
  border: 1px solid var(--base);
  border-block-end-width: 2px;
  border-radius: var(--border-r-sm);
}
._search--hint span {
  -webkit-margin-end: 0.5rem;
  margin-inline-end: 0.5rem;
}

/* --- Mobil: eine Kopfzeilen-Reihe ----------------------------------- */

@media (max-width: 999.98px) {
  /* Kontakt- und Social-Liste stecken jetzt im Menue, die Suche in der
     unteren Reihe - die obere Leiste ist leer. */
  [data-compact] .main-header--top {
    display: none;
  }
  /* Logo links, Suche und Burger rechts. margin-inline-end: auto statt
     space-between: mit drei Kindern wuerde space-between die Suche in die
     Mitte schieben. */
  [data-compact] .--bottom_logo {
    -webkit-margin-end: auto;
    margin-inline-end: auto;
  }
  [data-compact] .--top_search-container {
    order: 1;
  }
  [data-compact] .--bottom_main-nav {
    order: 2;
  }

  /* Zu: nur die Lupe steht in der Reihe. Offen: das Feld uebernimmt sie,
     und die Lupe wandert als Zierde ins Feld. */
  ._search--dropdown {
    display: none;
  }
  /* Logo und Burger bleiben sichtbar-unsichtbar, damit die Zeile ihre Hoehe
     behaelt und die Seite beim Oeffnen nicht springt. Als Flex-Geschwister
     belegen sie aber weiter ihre Breite: die Zeile will dann rund 450px, hat
     auf einem 384px-Display aber keine - und das Feld ist das einzige Element
     mit min-width: 0, schrumpft also auf die Breite seines Icons zusammen.
     Darum liegt die Suche im offenen Zustand ueber der Zeile statt in ihr. */
  [data-search="open"] .--top_search-container {
    position: absolute;
    inset-block: 0;
    inset-inline: 1rem;
    z-index: 61;
  }
  [data-search="open"] ._search--dropdown {
    display: block;
    flex: 1 1 auto;
  }
  [data-search="open"] ._search--trigger {
    display: none;
  }

  /* Der Container fuellt die Zeile senkrecht komplett aus (inset: 0), deshalb
     ist top: 100% am Panel genau die Unterkante der Kopfzeile. */
  .search-result-container {
    max-height: min(60dvh, 30rem);
  }
  /* iOS zoomt beim Fokus in jedes Feld mit weniger als 16px Schriftgroesse.
     Der Zoom bleibt danach stehen und die Kopfzeile ist verrutscht. */
  form._search--form input {
    font-size: 1rem;
  }
  ._search--result > a {
    grid-template-columns: 1fr auto;
  }
  /* Die Typ-Marke wandert ueber den Titel: 5.5rem Spalte sind bei
     schmalen Viewports zu teuer. */
  ._result--type {
    grid-column: 1 / -1;
    -webkit-margin-after: 0.15rem;
    margin-block-end: 0.15rem;
  }
  ._search--hint {
    display: none;
  }
}

@media (min-width: 1000px) {
  ._search--trigger {
    display: none;
  }
  /* Gleiche Flex-Basis fuer die beiden Icon-Listen: erst dadurch liegt das
     Suchfeld wirklich in der Mitte der Kopfzeile und nicht nur in der Mitte
     des uebrigen Platzes. */
  .main-header--top .wrapper > .--top_contact-items,
  .main-header--top .wrapper > .--top_socials-items {
    flex: 1 1 0;
    min-width: 0;
  }
  .main-header--top .wrapper > .--top_socials-items {
    justify-content: flex-end;
  }
  .--top_search-container {
    flex: 0 1 auto;
    justify-content: center;
    padding-inline: 1rem;
  }
  ._search--dropdown {
    flex: 0 1 auto;
    width: 34rem;
    max-width: 100%;
  }
}

/* =====================================================================
   Mobile Ablage im Menue: Kontakt- und Social-Icons
   ---------------------------------------------------------------------
   In der Kopfleiste waren die Beschriftungen ausgeblendet, weil dort kein
   Platz war. Im aufgeklappten Menue ist er da - Telefonnummer und Adresse
   als Text sind deutlich brauchbarer als vier gleich aussehende Kacheln.
   ===================================================================== */

._main-nav--extras {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem 0.5rem 0.5rem;
  -webkit-margin-before: 0.5rem;
  margin-block-start: 0.5rem;
  -webkit-border-before: 1px solid var(--base);
  border-block-start: 1px solid var(--base);
}

._extras--group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

._extras--label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--contrast-2);
}

/* Kontakt: eine Zeile pro Eintrag, Icon plus Beschriftung. */
._main-nav--extras .--top_contact-items {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
._main-nav--extras .--top_contact-items span:not(.sr-only) {
  display: inline;
  font-size: 0.9rem;
  font-weight: 700;
}
header#custom-main-header ._main-nav--extras .--top_contact-items a {
  display: flex;
  align-items: center;
  /* .main-header--bottom a setzt space-between - das schiebt die
     Beschriftung an den rechten Rand, weg von ihrem Icon. */
  justify-content: flex-start;
  gap: 0.75rem;
  padding: 0.6rem 0.5rem;
  /* Die Kachel-Optik aus der Kopfleiste passt hier nicht: in einer Liste
     mit Text wirkt der Rahmen um jede Zeile wie ein Eingabefeld. */
  border: 0;
  border-radius: var(--border-r-sm);
  color: var(--contrast) !important;
  transition: all var(--trans-duration) ease;
}
header[data-scrolled] {
  .main-header--bottom {
    .--bottom_logo {
      a {
        padding: 0 0.5rem;
        img {
          width: 100%;
          height: auto;
        }
      }
    }
  }
}
header#custom-main-header ._main-nav--extras .--top_contact-items a svg {
  width: 1.35rem;
  height: 1.35rem;
  flex-shrink: 0;
  fill: var(--accent2);
}
._main-nav--extras .--top_contact-items a:hover {
  background: var(--base-2);
}

/* Socials bleiben eine Reihe aus Icons - die Wortmarken sind eindeutig. */
._main-nav--extras .--top_socials-items {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
header#custom-main-header ._main-nav--extras .--top_socials-items a {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Ohne width: auto macht das width: 100% aus .main-header--bottom a aus
     der Icon-Reihe eine Spalte. */
  width: auto;
  padding: 0.5rem;
  border-radius: var(--border-r-sm);
}
header#custom-main-header ._main-nav--extras .--top_socials-items a svg {
  width: 1.5rem;
  height: 1.5rem;
}

/* =====================================================================
   Scroll-Zustand der Kopfzeile
   ---------------------------------------------------------------------
   [data-scrolled] setzt das Javascript ab 800px Scrollhoehe. Ein reiner
   CSS-Weg gibt es dafuer nicht: scroll()-Timelines beschreiben einen
   Verlauf, keinen Schwellwert.
   ===================================================================== */

.main-header--top,
.main-header--bottom {
  transition: background-color var(--trans-duration) ease;
}

header#custom-main-header[data-scrolled] .main-header--top,
header#custom-main-header[data-scrolled] .main-header--bottom {
  background-color: var(--base-3);
}

/* Abgesetzt vom Inhalt, sobald die Kopfzeile darueber liegt. */
header#custom-main-header[data-scrolled] {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* Kleineres Logo - per transform, nicht per max-width.
   Eine echte Groessenaenderung macht die Zeile niedriger. Der Browser zieht
   dann per Scroll-Anchoring die Scrollposition nach, damit der sichtbare
   Inhalt stehen bleibt; die nachgezogene Position liegt unter der Schwelle,
   das Logo waechst wieder, die Zeile wird hoeher - und das pro Frame der
   Animation. Genau das war das Springen zwischen beiden Groessen.
   transform veraendert das Layout nicht und bricht die Rueckkopplung. */
.main-header--bottom .--bottom_logo img {
  transform-origin: left center;
  transition: transform var(--trans-duration) ease;
}
header#custom-main-header[data-scrolled] .--bottom_logo img {
  /* 0.6 x 150px = 90px */
  transform: scale(0.6);
}

/* Custom */

/* Einzelbeiträge: Theme-Bild und automatische Metadaten ausblenden */
.single-post .featured-image.page-header-image-single,
.single-post .entry-header .entry-meta,
.single-post footer.entry-meta {
  display: none !important;
}
.site-info {
  font-size: 0;
}
/*
.site-info:after {
  content: "© MAK 2026 | Marketing für aktive Kollegen GmbH";
  font-size: 14px;
}
  */
.mak-tab-content {
  display: none;
}

.mak-tab-content.is-active {
  display: block;
}
.block-editor-page .mak-tab-content {
  display: block !important;
}

.mak-card {
  transition: all 0.3s ease;
  cursor: pointer;
}

.mak-card.is-active {
  background-color: #71c0c9;
  color: #ffffff;
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}

.mak-card.is-active h1,
.mak-card.is-active h2,
.mak-card.is-active h3,
.mak-card.is-active h4,
.mak-card.is-active h5,
.mak-card.is-active h6,
.mak-card.is-active p,
.mak-card.is-active span,
.mak-card.is-active a {
  color: #ffffff;
}
.mak-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
}
.mak-standard-button {
  color: #ffffff !important;
}

.mak-standard-button:hover {
  color: #ffffff !important;
}
.gb-button,
.gb-button a,
.gb-button span {
  color: #ffffff !important;
}

.gb-button:hover,
.gb-button:hover a,
.gb-button:hover span {
  color: #ffffff !important;
}

/* Mega Menu Anfang */

.mega-menu {
  position: static !important;
}

.nav-container-oder-header {
  position: relative;
}

.mega-menu svg {
  /* display: none !important; */
}

.mega-menu:hover > a {
  background-color: #fafafa !important;
  color: #000000 !important;
}

.mega-menu > ul.sub-menu {
  display: none;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(15px);
  transition: all 0.3s ease-in-out;
  position: absolute;
  left: 50%;
  width: 87%;
  background: #ffffff;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
  padding: 30px;
  z-index: 999;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  box-sizing: border-box;
}

.mega-menu:hover > ul.sub-menu {
  display: flex;
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.mega-menu > ul.sub-menu > li {
  flex: 1;
  min-width: 90px;
  padding: 0 20px;
  list-style: none;
}

.mega-menu > ul.sub-menu > li > a {
  font-weight: 700;
  display: block;
  margin-bottom: 15px;
  text-transform: uppercase;
  color: #000000;
  transition: color 0.2s;
}

.mega-menu > ul.sub-menu > li > a:hover {
  color: #e3001a;
  font-weight: bold;
}

.mega-menu > ul.sub-menu > li ul {
  display: block !important;
  position: static !important;
  padding: 0;
  margin: 0;
}

.mega-menu > ul.sub-menu > li ul li {
  list-style: none;
  padding: 4px 0;
}

.mega-menu > ul.sub-menu > li ul li a {
  font-weight: normal;
  color: #000000;
  text-decoration: none;
  transition: padding-left 0.2s ease;
}

.mega-menu > ul.sub-menu > li ul li a:hover {
  padding-left: 1px;
  color: #e3001a;
}

@media (max-width: 1024px) {
  .mega-menu > ul.sub-menu {
    position: static;
    transform: none;
    width: 100%;
    display: block;
    opacity: 1;
    visibility: visible;
  }
}

/* ------------------------------------------------------------------
   Weich gezeichneter Hintergrund der Startseiten-Hero.

   Nachbau eines unscharfen Fotos aus gestapelten Radialverläufen:
   unten die Grundfläche, darüber die Farbinseln (Grünband oben links,
   Blau rechts, Creme unten rechts, roter Fleck in der Mitte).

   Zwei Punkte zur Browserverträglichkeit:
   - background-color steht als eigene Deklaration davor. Kann ein
     Browser die Verläufe nicht, bleibt eine Volltonfläche statt
     durchsichtig.
   - Ausgeblendet wird immer nach rgba(…, 0) derselben Farbe, nie nach
     `transparent`. `transparent` ist rgba(0,0,0,0); Safari und ältere
     WebKit-Versionen interpolieren darauf zu und ziehen einen grauen
     Schmutzrand durch den Verlauf.
   ------------------------------------------------------------------ */

.start-hero-custom {
  position: relative;
  &::after {
    content: "";
    position: absolute;
    inset: 0;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
  }
  p{
    transition: all .5s ease-out;
  }
  &:hover{
    p{
      &:nth-of-type(1){
        transform: rotate(0deg);
      }
      &:nth-of-type(2){
        transform:translateY(20px);
        transition-delay:0.3s;
      }
    }
  }
}

.start-hero-section-custom-background {
  background-color: #eff1ef;

  background-image:
    /* Roter Fleck, Bildmitte rechts */
    radial-gradient(
      24% 46% at 57% 61%,
      rgba(224, 108, 88, 0.34) 0%,
      rgba(224, 108, 88, 0) 68%
    ),
    /* Warmes Gelb unten rechts */
    radial-gradient(
        30% 42% at 82% 97%,
        rgba(238, 196, 104, 0.5) 0%,
        rgba(238, 196, 104, 0) 70%
      ),
    /* Cremefläche, die es nach links auslaufen lässt */
    radial-gradient(
        46% 40% at 72% 92%,
        rgba(240, 226, 196, 0.55) 0%,
        rgba(240, 226, 196, 0) 72%
      ),
    /* Blau rechts, untere Hälfte */
    radial-gradient(
        26% 46% at 90% 70%,
        rgba(140, 190, 220, 0.52) 0%,
        rgba(140, 190, 220, 0) 72%
      ),
    /* Blau rechts, obere Hälfte – heller und kühler */
    radial-gradient(
        22% 40% at 97% 47%,
        rgba(168, 202, 228, 0.45) 0%,
        rgba(168, 202, 228, 0) 70%
      ),
    /* Lila-Anflug oben rechts */
    radial-gradient(
        20% 34% at 92% 33%,
        rgba(186, 186, 214, 0.34) 0%,
        rgba(186, 186, 214, 0) 70%
      ),
    /* Grünband: zwei flache Ellipsen statt einer, sonst wird es zum
       gleichmäßigen Streifen und verliert die Unschärfe */
    radial-gradient(
        42% 17% at 22% 27%,
        rgba(158, 176, 96, 0.6) 0%,
        rgba(158, 176, 96, 0) 72%
      ),
    radial-gradient(
      34% 15% at 47% 30%,
      rgba(150, 170, 104, 0.42) 0%,
      rgba(150, 170, 104, 0) 74%
    ),
    /* Blassblau unten links */
    radial-gradient(
        44% 52% at 6% 84%,
        rgba(196, 218, 234, 0.75) 0%,
        rgba(196, 218, 234, 0) 72%
      ),
    /* Heller Schleier über der Mitte – hebt sie von den Farbinseln ab */
    radial-gradient(
        38% 46% at 40% 72%,
        rgba(252, 252, 250, 0.8) 0%,
        rgba(252, 252, 250, 0) 70%
      ),
    /* Grundfläche: oben warmes Weiß, unten kühl */
    linear-gradient(180deg, #f6f5f2 0%, #f1f2ef 30%, #edf0f0 62%, #e7edf0 100%);

  background-repeat: no-repeat;
}

/* ------------------------------------------------------------------
   Variante 2 der Hero-Flaeche.

   Gleiches Prinzip wie oben, aber nach der zweiten Bildvorlage:
   deutlich heller und entsaettigter, das Gruenband liegt waagerecht
   auf halber Hoehe und laeuft nach rechts aus, die Farbakzente
   (Rot, Blau, Gelb) sitzen in der rechten Bildhaelfte, unten rechts
   dunkelt eine graue Ecke ab.

   Die beiden Regeln von oben gelten hier genauso:
   background-color als Rueckfalloption vorweg, und ausgeblendet wird
   nach rgba(…, 0) derselben Farbe statt nach `transparent`.
   ------------------------------------------------------------------ */
.start-hero-section-custom-background-2 {
  background-color: #f0f0ee;

  background-image:
    /* Graue Ecke unten rechts – dunkelster Punkt im Bild */
    radial-gradient(
      30% 34% at 95% 103%,
      rgba(122, 124, 128, 0.42) 0%,
      rgba(122, 124, 128, 0) 72%
    ),
    /* Gelb am rechten Rand, auf halber Hoehe */
    radial-gradient(
        14% 24% at 100% 66%,
        rgba(240, 208, 112, 0.55) 0%,
        rgba(240, 208, 112, 0) 72%
      ),
    /* Roter Fleck, rechts der Bildmitte */
    radial-gradient(
        13% 20% at 60% 64%,
        rgba(226, 92, 78, 0.3) 0%,
        rgba(226, 92, 78, 0) 70%
      ),
    /* Blau rechts, untere Haelfte */
    radial-gradient(
        22% 34% at 80% 73%,
        rgba(126, 176, 216, 0.4) 0%,
        rgba(126, 176, 216, 0) 72%
      ),
    /* Blau rechts, obere Haelfte – heller */
    radial-gradient(
        20% 30% at 87% 46%,
        rgba(168, 200, 228, 0.42) 0%,
        rgba(168, 200, 228, 0) 70%
      ),
    /* Lila-Anflug oben rechts */
    radial-gradient(
        18% 26% at 79% 40%,
        rgba(184, 182, 210, 0.3) 0%,
        rgba(184, 182, 210, 0) 70%
      ),
    /* Gruenband: drei flache Ellipsen nebeneinander, nach rechts
       schwaecher werdend – als ein Verlauf wuerde daraus ein
       gleichmaessiger Streifen ohne Unschaerfe */
    radial-gradient(
        30% 11% at 14% 49%,
        rgba(164, 176, 116, 0.62) 0%,
        rgba(164, 176, 116, 0) 74%
      ),
    radial-gradient(
      30% 10% at 44% 50%,
      rgba(160, 172, 112, 0.5) 0%,
      rgba(160, 172, 112, 0) 74%
    ),
    radial-gradient(
      26% 9% at 68% 51%,
      rgba(158, 168, 116, 0.3) 0%,
      rgba(158, 168, 116, 0) 76%
    ),
    /* Weisse Inseln unten links und unten Mitte */
    radial-gradient(
        34% 40% at 16% 82%,
        rgba(255, 255, 255, 0.9) 0%,
        rgba(255, 255, 255, 0) 72%
      ),
    radial-gradient(
      26% 32% at 44% 92%,
      rgba(255, 255, 255, 0.8) 0%,
      rgba(255, 255, 255, 0) 72%
    ),
    /* Heller Schleier ueber der oberen Bildhaelfte – laesst den
       Bereich oberhalb des Gruenbands fast weiss werden */
    radial-gradient(
        60% 40% at 42% 12%,
        rgba(252, 252, 250, 0.92) 0%,
        rgba(252, 252, 250, 0) 74%
      ),
    /* Grundflaeche: oben neutrales Weiss, unten eine Spur kuehler */
    linear-gradient(180deg, #f5f5f3 0%, #f2f2f0 34%, #efefed 64%, #eaebe9 100%);

  background-repeat: no-repeat;
}

body.single-post,
body.page-id-41 {
  background: #f4f5f7;
  color: var(--mak-ink);
}
.single-post .site-content,
.page-id-41 .site-content {
  max-width: 1440px;
  padding: 0 24px 80px;
}
.single-post .content-area,
.page-id-41 .content-area {
  width: 100%;
}
.single-post .widget-area,
.page-id-41 .widget-area {
  display: none;
}
.single-post .site-main,
.page-id-41 .site-main {
  margin: 0;
}
.single-post .entry-header,
.single-post .entry-meta,
.single-post .comments-area {
  display: none;
}
.single-post .inside-article,
.page-id-41 .inside-article {
  padding: 0;
  background: transparent;
}
.single-post .entry-content,
.page-id-41 .entry-content {
  margin: 0;
}
.mak-magazine-article {
  max-width: 1180px;
  margin: 38px auto 0;
  background: var(--mak-paper);
  border-radius: 28px;
  box-shadow: var(--mak-shadow);
  overflow: hidden;
}
.mak-magazine-article > .entry-content-wrapper:first-child {
  padding-bottom: 42px;
}
.mak-magazine-article > .entry-content-wrapper:not(:first-child) {
  max-width: 1040px;
  margin: 0 auto;
  padding: 14px 64px 42px;
}
.mak-magazine-article .avia-image-container:first-child {
  margin: 0 !important;
}
.mak-magazine-article .avia-image-container:first-child img {
  display: block;
  width: 100%;
  max-height: 560px;
  -o-object-fit: cover;
  object-fit: cover;
}
.mak-magazine-article > .entry-content-wrapper:first-child > .hr {
  display: none;
}
.mak-magazine-article
  > .entry-content-wrapper:first-child
  > .av_textblock_section {
  max-width: 940px;
  margin: -64px auto 34px;
  padding: 34px 42px 30px;
  position: relative;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 14px 40px rgba(17, 24, 39, 0.14);
}
.mak-magazine-article h1 {
  font-size: clamp(2rem, 4vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
  margin: 0 0 14px;
  color: var(--mak-ink);
  font-weight: 800;
}
.mak-magazine-article
  > .entry-content-wrapper:first-child
  > .av_textblock_section
  p {
  font-size: clamp(1.05rem, 1.7vw, 1.35rem);
  line-height: 1.5;
  color: #4b5563;
  margin: 0;
}
.mak-magazine-article
  > .entry-content-wrapper:has(> .av_two_third + .av_one_third) {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(250px, 1fr);
  gap: 38px;
  align-items: start;
}
.mak-magazine-article > .entry-content-wrapper:first-child > .av_two_third {
  padding-left: 64px;
}
.mak-magazine-article > .entry-content-wrapper:first-child > .av_one_third {
  margin-right: 64px;
  position: -webkit-sticky;
  position: sticky;
  top: 110px;
  background: var(--mak-soft);
  border: 1px solid var(--mak-line);
  border-radius: 18px;
  padding: 24px;
}
.mak-magazine-article > .entry-content-wrapper:first-child > .av_one_third h2 {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--mak-red);
  margin: 0 0 14px;
}
.mak-magazine-article > .entry-content-wrapper:first-child > .av_one_third a {
  display: block;
  color: #343841;
  text-decoration: none;
  font-weight: 650;
  font-size: 0.95rem;
  line-height: 1.35;
  padding: 9px 0;
  border-bottom: 1px solid #dddfe3;
}
.mak-magazine-article
  > .entry-content-wrapper:first-child
  > .av_one_third
  a:hover {
  color: var(--mak-red);
}
.mak-magazine-article
  > .entry-content-wrapper:first-child
  > .av_two_third
  p:first-child,
.mak-magazine-article
  > .entry-content-wrapper:first-child
  > .av_two_third
  p:nth-child(2) {
  display: inline-flex;
  align-items: center;
  background: #fff0f1;
  color: #a90812;
  border-radius: 999px;
  padding: 7px 12px;
  margin: 0 8px 18px 0;
  font-size: 0.88rem;
  font-weight: 700;
}
.mak-magazine-article h2 {
  font-size: clamp(1.55rem, 2.7vw, 2.35rem);
  line-height: 1.2;
  letter-spacing: -0.025em;
  margin: 10px 0 18px;
  color: var(--mak-ink);
  font-weight: 780;
}
.mak-magazine-article h3 {
  font-size: clamp(1.22rem, 2vw, 1.6rem);
  line-height: 1.3;
  margin: 26px 0 12px;
  color: var(--mak-ink);
  font-weight: 760;
}
.mak-magazine-article h4 {
  font-size: 1.08rem;
  line-height: 1.4;
  margin: 24px 0 10px;
  color: var(--mak-red-dark);
}
.mak-magazine-article p,
.mak-magazine-article li {
  font-size: 1.08rem;
  line-height: 1.78;
  color: #30343b;
}
.mak-magazine-article p {
  margin: 0 0 18px;
}
.mak-magazine-article ul,
.mak-magazine-article ol {
  margin: 8px 0 24px;
  padding-left: 1.35em;
}
.mak-magazine-article li {
  margin: 8px 0;
  padding-left: 0.25em;
}
.mak-magazine-article strong {
  color: #17191d;
}
.mak-magazine-article em {
  color: #4b5563;
}
.mak-magazine-article a {
  color: var(--mak-red-dark);
  text-underline-offset: 3px;
}
.mak-magazine-article img {
  max-width: 100%;
  height: auto;
  border-radius: 16px;
}
.mak-magazine-article .avia-image-container {
  margin: 26px 0;
}
.mak-magazine-article .avia-button-wrap a,
.mak-magazine-article a.avia-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--mak-red);
  color: #fff !important;
  text-decoration: none;
  border-radius: 999px;
  padding: 13px 22px;
  font-weight: 750;
  box-shadow: 0 8px 22px rgba(227, 6, 19, 0.22);
}
.mak-magazine-article .avia-button-wrap a:hover,
.mak-magazine-article a.avia-button:hover {
  background: var(--mak-red-dark);
  transform: translateY(-1px);
}
.mak-magazine-article .av_promobox,
.mak-magazine-article .avia_message_box,
.mak-magazine-article .av_one_third .av_textblock_section {
  background: #fff5f5;
  border: 1px solid #ffd7da;
  border-left: 5px solid var(--mak-red);
  border-radius: 16px;
  padding: 22px;
  margin: 22px 0;
}
.mak-magazine-article iframe {
  width: 100%;
  aspect-ratio: 16/9;
  height: auto;
  border: 0;
  border-radius: 16px;
}
.mak-magazine-article .avia-icon-list,
.mak-magazine-article .avia_textblock {
  max-width: 100%;
}
.mak-blog-index {
  max-width: 1240px;
  margin: 36px auto 0;
}
.mak-blog-hero {
  background: linear-gradient(135deg, #17191d 0%, #2d1114 58%, #e30613 140%);
  color: #fff;
  border-radius: 28px;
  padding: clamp(42px, 7vw, 88px);
  position: relative;
  overflow: hidden;
  box-shadow: var(--mak-shadow);
  margin-bottom: 34px;
}
.mak-blog-hero:after {
  content: "";
  position: absolute;
  width: 330px;
  height: 330px;
  border: 80px solid rgba(255, 255, 255, 0.055);
  border-radius: 50%;
  right: -90px;
  top: -120px;
}
.mak-blog-hero h1 {
  position: relative;
  z-index: 1;
  color: #fff;
  font-size: clamp(2.3rem, 5vw, 4.6rem);
  line-height: 1.03;
  letter-spacing: -0.045em;
  max-width: 900px;
  margin: 0 0 24px;
}
.mak-blog-hero p {
  position: relative;
  z-index: 1;
  color: #eceef1;
  font-size: clamp(1rem, 1.7vw, 1.25rem);
  line-height: 1.7;
  max-width: 880px;
  margin: 0;
}
.mak-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.mak-blog-card {
  background: #fff;
  border: 1px solid var(--mak-line);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 9px 28px rgba(17, 24, 39, 0.07);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}
.mak-blog-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 44px rgba(17, 24, 39, 0.13);
}
.mak-blog-card > a:first-child {
  display: block;
  overflow: hidden;
  aspect-ratio: 16/10;
  background: #ddd;
}
.mak-blog-card > a:first-child img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  transition: transform 0.45s ease;
}
.mak-blog-card:hover > a:first-child img {
  transform: scale(1.035);
}
.mak-blog-card__body {
  padding: 24px 24px 26px;
  display: flex;
  flex-direction: column;
  min-height: 320px;
}
.mak-blog-card__meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.mak-blog-card__meta span {
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  color: #8b1118;
  background: #fff0f1;
  border-radius: 999px;
  padding: 6px 9px;
}
.mak-blog-card h2 {
  font-size: 1.35rem;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
}
.mak-blog-card h2 a {
  color: var(--mak-ink);
  text-decoration: none;
}
.mak-blog-card p {
  font-size: 0.98rem;
  line-height: 1.65;
  color: #5f6670;
  margin: 0 0 20px;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mak-blog-card__more {
  margin-top: auto;
  color: var(--mak-red-dark);
  font-weight: 800;
  text-decoration: none;
}
.mak-blog-card__more:after {
  content: " →";
}
@media (max-width: 960px) {
  .mak-blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mak-magazine-article
    > .entry-content-wrapper:first-child
    > .av_textblock_section {
    margin: -40px 28px 28px;
  }
  .mak-magazine-article
    > .entry-content-wrapper:has(> .av_two_third + .av_one_third) {
    grid-template-columns: 1fr;
  }
  .mak-magazine-article > .entry-content-wrapper:first-child > .av_two_third {
    padding: 0 38px;
  }
  .mak-magazine-article > .entry-content-wrapper:first-child > .av_one_third {
    margin: 0 38px;
    position: static;
  }
}
@media (max-width: 640px) {
  .single-post .site-content,
  .page-id-41 .site-content {
    padding: 0 14px 50px;
  }
  .mak-magazine-article,
  .mak-blog-hero {
    border-radius: 18px;
  }
  .mak-magazine-article {
    margin-top: 18px;
  }
  .mak-magazine-article .avia-image-container:first-child img {
    max-height: 340px;
  }
  .mak-magazine-article
    > .entry-content-wrapper:first-child
    > .av_textblock_section {
    margin: -24px 14px 24px;
    padding: 24px 22px;
  }
  .mak-magazine-article > .entry-content-wrapper:first-child > .av_two_third {
    padding: 0 22px;
  }
  .mak-magazine-article > .entry-content-wrapper:first-child > .av_one_third {
    margin: 0 22px;
    padding: 20px;
  }
  .mak-magazine-article > .entry-content-wrapper:not(:first-child) {
    padding: 10px 22px 30px;
  }
  .mak-magazine-article p,
  .mak-magazine-article li {
    font-size: 1rem;
    line-height: 1.7;
  }
  .mak-blog-index {
    margin-top: 18px;
  }
  .mak-blog-hero {
    padding: 34px 24px;
    margin-bottom: 22px;
  }
  .mak-blog-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .mak-blog-card__body {
    min-height: 0;
  }
}

/* Artikel-Intro: Hero und Titel über volle Breite, Intro + Inhaltsverzeichnis darunter */
.mak-magazine-article > .entry-content-wrapper:first-child {
  display: block !important;
}
.mak-magazine-article > .entry-content-wrapper:first-child:after {
  content: "";
  display: table;
  clear: both;
}
.mak-magazine-article > .entry-content-wrapper:first-child > .av_two_third {
  float: left;
  width: calc(66.666% - 20px);
}
.mak-magazine-article > .entry-content-wrapper:first-child > .av_one_third {
  float: right;
  width: calc(33.333% - 20px);
}
.mak-magazine-article h1 {
  font-size: clamp(2rem, 4vw, 3.6rem) !important;
  line-height: 1.08 !important;
  text-align: left !important;
}
.mak-magazine-article
  > .entry-content-wrapper:first-child
  > .av_textblock_section
  p {
  text-align: left !important;
}
@media (max-width: 960px) {
  .mak-magazine-article > .entry-content-wrapper:first-child > .av_two_third,
  .mak-magazine-article > .entry-content-wrapper:first-child > .av_one_third {
    float: none;
    width: auto;
  }
}

/* Varianten mit getrenntem Hero-/Titel-Block */
.mak-external-hero img {
  display: block;
  width: 100%;
  max-height: 560px;
  -o-object-fit: cover;
  object-fit: cover;
}
.mak-magazine-article > .entry-content-wrapper:first-of-type {
  display: block !important;
  padding-bottom: 42px;
}
.mak-magazine-article > .entry-content-wrapper:first-of-type:after {
  content: "";
  display: table;
  clear: both;
}
.mak-magazine-article
  > .entry-content-wrapper:first-of-type
  > .av_textblock_section {
  max-width: 940px;
  margin: -64px auto 34px;
  padding: 34px 42px 30px;
  position: relative;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 14px 40px rgba(17, 24, 39, 0.14);
}
.mak-magazine-article > .entry-content-wrapper:first-of-type > .av_two_third {
  float: left;
  width: calc(66.666% - 20px);
  padding-left: 64px;
}
.mak-magazine-article > .entry-content-wrapper:first-of-type > .av_one_third {
  float: right;
  width: calc(33.333% - 20px);
  margin-right: 64px;
  position: -webkit-sticky;
  position: sticky;
  top: 110px;
  background: var(--mak-soft);
  border: 1px solid var(--mak-line);
  border-radius: 18px;
  padding: 24px;
}
.mak-magazine-article
  > .entry-content-wrapper:first-of-type
  > .av_textblock_section
  p {
  text-align: left !important;
}
.mak-magazine-article
  > .entry-content-wrapper:first-of-type
  > .av_two_third
  p:first-child,
.mak-magazine-article
  > .entry-content-wrapper:first-of-type
  > .av_two_third
  p:nth-child(2) {
  display: inline-flex;
  align-items: center;
  background: #fff0f1;
  color: #a90812;
  border-radius: 999px;
  padding: 7px 12px;
  margin: 0 8px 18px 0;
  font-size: 0.88rem;
  font-weight: 700;
}
@media (max-width: 960px) {
  .mak-magazine-article > .entry-content-wrapper:first-of-type > .av_two_third,
  .mak-magazine-article > .entry-content-wrapper:first-of-type > .av_one_third {
    float: none;
    width: auto;
  }
  .mak-magazine-article > .entry-content-wrapper:first-of-type > .av_two_third {
    padding: 0 38px;
  }
  .mak-magazine-article > .entry-content-wrapper:first-of-type > .av_one_third {
    margin: 0 38px;
    position: static;
  }
}
@media (max-width: 640px) {
  .mak-magazine-article
    > .entry-content-wrapper:first-of-type
    > .av_textblock_section {
    margin: -24px 14px 24px;
    padding: 24px 22px;
  }
  .mak-magazine-article > .entry-content-wrapper:first-of-type > .av_two_third {
    padding: 0 22px;
  }
  .mak-magazine-article > .entry-content-wrapper:first-of-type > .av_one_third {
    margin: 0 22px;
    padding: 20px;
  }
}

.mak-magazine-article
  .avia-image-container:has(
    img[src*="ChatGPT-Image-22.-Jan.-2026-10_02_27.png"]
  ) {
  display: none;
}

@media (min-width: 961px) {
  .mak-blog-card--featured {
    grid-column: span 2;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
  }
  .mak-blog-card--featured > a:first-child {
    height: 100%;
    aspect-ratio: auto;
  }
  .mak-blog-card--featured .mak-blog-card__body {
    min-height: 420px;
    padding: 34px;
  }
  .mak-blog-card--featured h2 {
    font-size: 1.8rem;
  }
}

.page-id-41 .entry-header {
  display: none;
}

@media (max-width: 960px) {
  .mak-blog-grid {
    grid-template-columns: 1fr;
  }
}

/* MAK Magazin – Inhaltsverzeichnis 2.0 */
.mak-magazine-article > .entry-content-wrapper:first-of-type > .av_two_third {
  float: none !important;
  width: auto !important;
  padding: 0 64px !important;
}
.mak-magazine-article > .entry-content-wrapper:first-of-type > .av_one_third {
  float: none !important;
  width: auto !important;
  margin: 28px 64px 0 !important;
  position: static !important;
  padding: 28px 30px !important;
  background: var(--mak-soft) !important;
  border: 1px solid var(--mak-line) !important;
  border-left: 5px solid var(--mak-red) !important;
  border-radius: 18px !important;
}
.mak-magazine-article
  > .entry-content-wrapper:first-of-type
  > .av_one_third
  h2 {
  margin: 0 0 18px !important;
  font-size: 1rem !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--mak-red) !important;
}
.mak-magazine-article
  > .entry-content-wrapper:first-of-type
  > .av_one_third
  .av_textblock_section:not(:first-child)
  .avia_textblock {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 28px;
}
.mak-magazine-article
  > .entry-content-wrapper:first-of-type
  > .av_one_third
  .av_textblock_section:not(:first-child)
  .avia_textblock
  > div {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}
.mak-magazine-article
  > .entry-content-wrapper:first-of-type
  > .av_one_third
  .av_font_icon,
.mak-magazine-article
  > .entry-content-wrapper:first-of-type
  > .av_one_third
  .avia_codeblock_section,
.mak-magazine-article
  > .entry-content-wrapper:first-of-type
  > .av_one_third
  p:empty {
  display: none !important;
}
.mak-magazine-article
  > .entry-content-wrapper:first-of-type
  > .av_one_third
  .avia_textblock
  > div
  > div {
  margin: 0 !important;
}
.mak-magazine-article > .entry-content-wrapper:first-of-type > .av_one_third a {
  display: block;
  position: relative;
  padding: 11px 0 11px 18px;
  border-bottom: 1px solid #dddfe3;
  color: #343841 !important;
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
}
.mak-magazine-article
  > .entry-content-wrapper:first-of-type
  > .av_one_third
  a:before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.08em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mak-red);
}
.mak-magazine-article
  > .entry-content-wrapper:first-of-type
  > .av_one_third
  a:hover {
  color: var(--mak-red-dark) !important;
}
@media (max-width: 960px) {
  .mak-magazine-article > .entry-content-wrapper:first-of-type > .av_two_third {
    padding: 0 38px !important;
  }
  .mak-magazine-article > .entry-content-wrapper:first-of-type > .av_one_third {
    margin: 24px 38px 0 !important;
  }
  .mak-magazine-article
    > .entry-content-wrapper:first-of-type
    > .av_one_third
    .av_textblock_section:not(:first-child)
    .avia_textblock {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}
@media (max-width: 640px) {
  .mak-magazine-article > .entry-content-wrapper:first-of-type > .av_two_third {
    padding: 0 22px !important;
  }
  .mak-magazine-article > .entry-content-wrapper:first-of-type > .av_one_third {
    margin: 22px 22px 0 !important;
    padding: 22px !important;
  }
}

/* MAK Magazin – Inhaltsverzeichnis kompakter Innenaufbau */
.mak-magazine-article
  > .entry-content-wrapper:first-of-type
  > .av_one_third
  > .av_textblock_section {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.mak-magazine-article
  > .entry-content-wrapper:first-of-type
  > .av_one_third
  > .av_textblock_section:first-child {
  margin-bottom: 14px !important;
}

/* MAK Gutenberg Magazin-Vorlage */
.single-post .mak-gutenberg-magazine {
  --mak-gb-red: #e30613;
  --mak-gb-red-dark: #a90812;
  --mak-gb-soft: #f5f6f7;
  --mak-gb-line: #dddfe3;
  max-width: 920px;
  margin: 0 auto;
  color: #272a31;
  font-size: 1.06rem;
  line-height: 1.75;
}
.single-post .mak-gutenberg-magazine > p,
.single-post .mak-gutenberg-magazine > h2,
.single-post .mak-gutenberg-magazine > h3,
.single-post .mak-gutenberg-magazine > ul,
.single-post .mak-gutenberg-magazine > blockquote {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.single-post .mak-gutenberg-magazine h2 {
  margin-top: 64px;
  margin-bottom: 18px;
  color: #202229;
  font-size: clamp(1.65rem, 3vw, 2.25rem);
  line-height: 1.2;
  scroll-margin-top: 120px;
}
.single-post .mak-gutenberg-magazine h3 {
  margin-top: 38px;
  margin-bottom: 14px;
  color: #2a2d34;
  font-size: 1.3rem;
  line-height: 1.3;
}
.single-post .mak-gutenberg-magazine p {
  margin-top: 0;
  margin-bottom: 22px;
}
.single-post .mak-gutenberg-magazine > blockquote {
  margin-top: 32px;
  margin-bottom: 34px;
  padding: 22px 26px;
  background: #fff4f4;
  border: 0;
  border-left: 5px solid var(--mak-gb-red);
  border-radius: 14px;
}
.single-post .mak-gutenberg-magazine > blockquote:first-child {
  background: #fff8e6;
  border-left-color: #d79b00;
  color: #5b470b;
  font-size: 0.94rem;
}
.single-post .mak-gutenberg-magazine hr {
  max-width: 760px;
  margin: 44px auto;
  border: 0;
  border-top: 1px solid var(--mak-gb-line);
}
.single-post .mak-gutenberg-magazine h2:has(+ ol) {
  max-width: 920px;
  margin: 42px auto 0;
  padding: 26px 30px 12px;
  background: var(--mak-gb-soft);
  border: 1px solid var(--mak-gb-line);
  border-bottom: 0;
  border-left: 5px solid var(--mak-gb-red);
  border-radius: 18px 18px 0 0;
  color: var(--mak-gb-red);
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.single-post .mak-gutenberg-magazine h2:has(+ ol) + ol {
  max-width: 920px;
  margin: 0 auto 52px;
  padding: 8px 30px 28px 52px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 32px;
  background: var(--mak-gb-soft);
  border: 1px solid var(--mak-gb-line);
  border-top: 0;
  border-left: 5px solid var(--mak-gb-red);
  border-radius: 0 0 18px 18px;
}
.single-post .mak-gutenberg-magazine h2:has(+ ol) + ol li {
  padding: 9px 0 9px 3px;
  border-bottom: 1px solid var(--mak-gb-line);
}
.single-post .mak-gutenberg-magazine h2:has(+ ol) + ol a {
  color: #343841;
  font-weight: 700;
  text-decoration: none;
}
.single-post .mak-gutenberg-magazine h2:has(+ ol) + ol a:hover {
  color: var(--mak-gb-red-dark);
}
.single-post .mak-gutenberg-magazine .wp-block-image {
  max-width: 920px;
  margin: 34px auto 46px;
}
.single-post .mak-gutenberg-magazine .wp-block-image img {
  width: 100%;
  border-radius: 18px;
  box-shadow: 0 14px 36px rgba(17, 24, 39, 0.12);
}
.single-post .mak-gutenberg-magazine ul {
  margin-top: 8px;
  margin-bottom: 30px;
}
.single-post .mak-gutenberg-magazine li {
  margin-bottom: 9px;
}
@media (max-width: 960px) {
  .single-post .mak-gutenberg-magazine {
    padding: 0 22px 56px;
    font-size: 1rem;
  }
  .single-post .mak-gutenberg-magazine h2 {
    margin-top: 48px;
  }
  .single-post .mak-gutenberg-magazine h2:has(+ ol) + ol {
    grid-template-columns: 1fr;
    gap: 0;
  }
}
@media (max-width: 560px) {
  .single-post .mak-gutenberg-magazine h2:has(+ ol) {
    padding: 22px 22px 10px;
  }
  .single-post .mak-gutenberg-magazine h2:has(+ ol) + ol {
    padding: 6px 22px 22px 40px;
  }
}

/* MAK Gutenberg – normaler Beitragstitel */
.single-post:has(.mak-gutenberg-magazine) .entry-header {
  display: block !important;
  max-width: 920px;
  margin: 0 auto 34px;
  padding: 42px 0 0;
}
.single-post:has(.mak-gutenberg-magazine) .entry-header .entry-title {
  margin: 0;
  color: #202229;
  font-size: clamp(2.35rem, 5vw, 4.35rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
}
@media (max-width: 960px) {
  .single-post:has(.mak-gutenberg-magazine) .entry-header {
    padding: 30px 22px 0;
  }
}

/* MAK Gutenberg Magazinheader 2.0 */
.single-post:has(.mak-gutenberg-magazine) .site-content {
  padding-top: 42px;
  padding-bottom: 72px;
}
.single-post:has(.mak-gutenberg-magazine) .inside-article {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 40px 78px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 26px;
  box-shadow: 0 18px 55px rgba(17, 24, 39, 0.1);
  overflow: visible;
}
.single-post:has(.mak-gutenberg-magazine) .inside-article > .entry-content {
  grid-area: 1 / 1;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
}
.single-post:has(.mak-gutenberg-magazine) .inside-article > .entry-header {
  grid-area: 1 / 1;
  align-self: start;
  position: relative;
  z-index: 5;
  width: min(780px, calc(100% - 64px));
  max-width: none;
  margin: clamp(290px, 34vw, 360px) auto 0 !important;
  padding: 32px 42px 34px !important;
  background: #fff;
  border: 1px solid #eceef1;
  border-radius: 22px;
  box-shadow: 0 16px 42px rgba(17, 24, 39, 0.16);
}
.single-post:has(.mak-gutenberg-magazine)
  .inside-article
  > .entry-header
  .entry-title {
  margin: 0;
  color: #202229;
  font-size: clamp(2.15rem, 4vw, 3.4rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.035em;
}
.single-post:has(.mak-gutenberg-magazine) .inside-article > .entry-meta {
  grid-column: 1;
}
.single-post .mak-gutenberg-magazine {
  max-width: 1040px;
  margin: 0 auto;
}
.single-post .mak-gutenberg-magazine > .mak-blog-hero-image {
  max-width: 1040px !important;
  margin: 0 auto 150px !important;
}
.single-post .mak-gutenberg-magazine > .mak-blog-hero-image img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 7;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 25px 25px 18px 18px;
  box-shadow: none;
}
.single-post .mak-gutenberg-magazine > .mak-editor-note {
  display: none !important;
}
.single-post .mak-gutenberg-magazine > p:first-of-type {
  display: block;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 760px;
  margin: 0 auto 28px;
  padding: 8px 14px;
  background: #fff0f1;
  color: #4b4f58;
  border-radius: 999px;
  font-size: 0.9rem;
}
.single-post .mak-gutenberg-magazine > p:first-of-type strong {
  color: #a90812;
}
.single-post .mak-gutenberg-magazine > p:nth-of-type(2) {
  margin-bottom: 12px;
  color: #252831;
  font-size: clamp(1.22rem, 2.1vw, 1.55rem);
  line-height: 1.35;
}
.single-post .mak-gutenberg-magazine > p:nth-of-type(3) {
  margin-bottom: 34px;
  font-size: 1.08rem;
  line-height: 1.75;
}
.single-post
  .mak-gutenberg-magazine
  > .wp-block-image:not(.mak-blog-hero-image) {
  max-width: 900px;
}
@media (max-width: 960px) {
  .single-post:has(.mak-gutenberg-magazine) .site-content {
    padding: 24px 18px 50px;
  }
  .single-post:has(.mak-gutenberg-magazine) .inside-article {
    padding: 0 24px 62px;
    border-radius: 22px;
  }
  .single-post:has(.mak-gutenberg-magazine) .inside-article > .entry-header {
    width: min(680px, calc(100% - 40px));
    margin-top: clamp(220px, 34vw, 310px) !important;
    padding: 28px 32px 30px !important;
  }
  .single-post .mak-gutenberg-magazine {
    padding: 0;
  }
  .single-post .mak-gutenberg-magazine > .mak-blog-hero-image {
    margin-bottom: 140px !important;
  }
}
@media (max-width: 640px) {
  .single-post:has(.mak-gutenberg-magazine) .site-content {
    padding: 14px 10px 36px;
  }
  .single-post:has(.mak-gutenberg-magazine) .inside-article {
    padding: 0 14px 48px;
    border-radius: 17px;
  }
  .single-post .mak-gutenberg-magazine > .mak-blog-hero-image img {
    aspect-ratio: 16 / 9;
    border-radius: 16px 16px 12px 12px;
  }
  .single-post:has(.mak-gutenberg-magazine) .inside-article > .entry-header {
    width: calc(100% - 28px);
    margin-top: calc((100vw - 48px) * 0.5625 - 52px) !important;
    padding: 23px 22px 25px !important;
    border-radius: 17px;
  }
  .single-post:has(.mak-gutenberg-magazine)
    .inside-article
    > .entry-header
    .entry-title {
    font-size: clamp(1.8rem, 9vw, 2.45rem);
    line-height: 1.06;
  }
  .single-post .mak-gutenberg-magazine > .mak-blog-hero-image {
    margin-bottom: 132px !important;
  }
  .single-post .mak-gutenberg-magazine > p:first-of-type {
    width: auto;
    border-radius: 14px;
    text-align: center;
  }
}

/* MAK Gutenberg – innere Gruppenstruktur */
.single-post
  .mak-gutenberg-magazine
  > .wp-block-group__inner-container
  > .mak-blog-hero-image {
  width: 100%;
  max-width: 1040px !important;
  aspect-ratio: 16 / 7;
  margin: 0 auto 150px !important;
  overflow: hidden;
  border-radius: 25px 25px 18px 18px;
}
.single-post
  .mak-gutenberg-magazine
  > .wp-block-group__inner-container
  > .mak-blog-hero-image
  img {
  display: block;
  width: 100%;
  height: 100% !important;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 0;
  box-shadow: none;
}
.single-post
  .mak-gutenberg-magazine
  > .wp-block-group__inner-container
  > .mak-editor-note {
  display: none !important;
}
.single-post
  .mak-gutenberg-magazine
  > .wp-block-group__inner-container
  > p:first-of-type {
  display: block;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 760px;
  margin: 0 auto 28px;
  padding: 8px 14px;
  background: #fff0f1;
  color: #4b4f58;
  border-radius: 999px;
  font-size: 0.9rem;
}
.single-post
  .mak-gutenberg-magazine
  > .wp-block-group__inner-container
  > p:first-of-type
  strong {
  color: #a90812;
}
.single-post
  .mak-gutenberg-magazine
  > .wp-block-group__inner-container
  > p:nth-of-type(2) {
  margin-bottom: 12px;
  color: #252831;
  font-size: clamp(1.22rem, 2.1vw, 1.55rem);
  line-height: 1.35;
}
.single-post
  .mak-gutenberg-magazine
  > .wp-block-group__inner-container
  > p:nth-of-type(3) {
  margin-bottom: 34px;
  font-size: 1.08rem;
  line-height: 1.75;
}
@media (max-width: 960px) {
  .single-post
    .mak-gutenberg-magazine
    > .wp-block-group__inner-container
    > .mak-blog-hero-image {
    margin-bottom: 140px !important;
  }
}
@media (max-width: 640px) {
  .single-post
    .mak-gutenberg-magazine
    > .wp-block-group__inner-container
    > .mak-blog-hero-image {
    aspect-ratio: 16 / 9;
    margin-bottom: 132px !important;
    border-radius: 16px 16px 12px 12px;
  }
  .single-post
    .mak-gutenberg-magazine
    > .wp-block-group__inner-container
    > p:first-of-type {
    width: auto;
    border-radius: 14px;
    text-align: center;
  }
}

/* MAK Gutenberg – volle Magazinbreite */
.single-post .mak-gutenberg-magazine > .wp-block-group__inner-container {
  padding: 0 !important;
}

/* MAK Gutenberg – Platz für mobile Titelkarte */
@media (max-width: 640px) {
  .single-post
    .mak-gutenberg-magazine
    > .wp-block-group__inner-container
    > .mak-blog-hero-image {
    margin-bottom: 205px !important;
  }
}

/* Nur Blogübersicht: Inhaltscontainer zentrieren */
body.page-id-41 #content.site-content {
  width: 100%;
  max-width: 1440px;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* MAK Teamseite – nur Seite 75 */
.page-id-75 .entry-header {
  display: none;
}
.page-id-75 .inside-article {
  padding: 0;
}
.page-id-75 .entry-content {
  margin: 0;
}
.page-id-75 #content.site-content {
  max-width: none;
  padding: 0;
}

.page-id-75 .mak-team-page {
  --team-ink: #1a3a3e;
  --team-red: #e30513;
  --team-text: #5f646b;
  --team-soft: #f3f7f7;
  --team-line: #dfe7e8;
  color: var(--team-text);
}

.page-id-75 .mak-team-shell {
  width: min(1200px, calc(100% - 48px));
  margin-inline: auto;
}

.page-id-75 .mak-team-hero {
  padding: clamp(56px, 7vw, 104px) 0;
  background: linear-gradient(135deg, #f7fbfb 0%, #edf6f6 58%, #fceff0 100%);
  overflow: hidden;
}

.page-id-75 .mak-team-hero-grid {
  align-items: center;
  gap: clamp(36px, 6vw, 88px);
}

.page-id-75 .mak-team-kicker,
.page-id-75 .mak-team-section-kicker {
  margin-bottom: 12px;
  color: var(--team-red);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.page-id-75 .mak-team-hero h1 {
  max-width: 760px;
  margin: 0 0 22px;
  color: var(--team-ink);
  font-size: clamp(2.5rem, 5vw, 4.8rem);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.035em;
}

.page-id-75 .mak-team-hero-copy {
  max-width: 720px;
  font-size: clamp(1.08rem, 1.8vw, 1.28rem);
  line-height: 1.7;
}

.page-id-75 .mak-team-hero-photo {
  margin: 0;
  padding: 30px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(26, 58, 62, 0.1);
  border-radius: 28px;
  box-shadow: 0 22px 60px rgba(26, 58, 62, 0.12);
}

.page-id-75 .mak-team-hero-photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  -o-object-fit: contain;
  object-fit: contain;
}

.page-id-75 .mak-team-jump {
  gap: 10px;
  margin-top: 28px;
}

.page-id-75 .mak-team-jump .wp-block-button__link {
  padding: 9px 15px;
  color: var(--team-ink);
  background: #fff;
  border: 1px solid var(--team-line);
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 700;
}

.page-id-75 .mak-team-section {
  padding: clamp(64px, 8vw, 108px) 0;
}

.page-id-75 .mak-team-section--soft {
  background: var(--team-soft);
}

.page-id-75 .mak-team-section-head {
  max-width: 760px;
  margin: 0 auto 42px;
  text-align: center;
}

.page-id-75 .mak-team-section-head h2 {
  margin: 0;
  color: var(--team-ink);
  font-size: clamp(2rem, 3.7vw, 3.1rem);
  font-weight: 500;
  line-height: 1.12;
}

.page-id-75 .mak-team-grid {
  gap: 24px;
  align-items: stretch;
}

.page-id-75 .mak-team-card {
  height: 100%;
  padding: 16px 16px 22px;
  background: #fff;
  border: 1px solid var(--team-line);
  border-radius: 20px;
  box-shadow: 0 10px 28px rgba(26, 58, 62, 0.07);
  overflow: hidden;
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease;
}

.page-id-75 .mak-team-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 38px rgba(26, 58, 62, 0.12);
}

.page-id-75 .mak-team-photo {
  margin: 0 0 20px;
  padding: 24px;
  background: linear-gradient(145deg, #f7f9f9, #eaf1f1);
  border-radius: 14px;
}

.page-id-75 .mak-team-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  -o-object-fit: contain;
  object-fit: contain;
}

.page-id-75 .mak-team-card h3 {
  margin: 0 6px 7px;
  color: var(--team-ink);
  font-size: 1.28rem;
  line-height: 1.2;
}

.page-id-75 .mak-team-role {
  min-height: 2.8em;
  margin: 0 6px 16px;
  color: var(--team-text);
  line-height: 1.45;
}

.page-id-75 .mak-team-contact {
  margin: auto 6px 0;
  padding-top: 14px;
  border-top: 1px solid var(--team-line);
  font-size: 0.92rem;
  line-height: 1.8;
}

.page-id-75 .mak-team-contact a {
  color: var(--team-ink);
  text-decoration: none;
}

.page-id-75 .mak-team-contact a:hover {
  color: var(--team-red);
}

.page-id-75 .mak-team-videos {
  padding: clamp(64px, 8vw, 104px) 0;
  color: #fff;
  background: var(--team-ink);
}

.page-id-75 .mak-team-videos .mak-team-section-kicker {
  color: #ff7982;
}
.page-id-75 .mak-team-videos h2 {
  color: #fff;
}
.page-id-75 .mak-team-videos .mak-team-section-head {
  margin-bottom: 36px;
}

.page-id-75 .mak-team-video-grid {
  gap: 18px;
  align-items: stretch;
}

.page-id-75 .mak-team-video-card {
  height: 100%;
  padding: 12px 12px 18px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
}

.page-id-75 .mak-team-video-card .wp-block-embed {
  margin: 0 0 14px;
  overflow: hidden;
  border-radius: 12px;
}

.page-id-75 .mak-team-video-card p {
  margin: 0 6px;
  color: #fff;
  text-align: center;
  line-height: 1.35;
}

.page-id-75 .mak-team-cta {
  padding: clamp(34px, 5vw, 56px);
  background: linear-gradient(135deg, #fff0f1, #fde2e4);
  border: 1px solid #f8c8cc;
  border-radius: 24px;
}

.page-id-75 .mak-team-cta h2 {
  margin: 0;
  color: var(--team-ink);
  font-size: clamp(1.7rem, 3vw, 2.5rem);
}

.page-id-75 .mak-team-cta .wp-block-button__link {
  padding: 12px 22px;
  color: #fff;
  background: var(--team-red);
  border-radius: 10px;
  font-weight: 700;
}

@media (max-width: 781px) {
  .page-id-75 .mak-team-shell {
    width: min(100% - 28px, 1200px);
  }
  .page-id-75 .mak-team-hero {
    padding: 52px 0 60px;
  }
  .page-id-75 .mak-team-hero-grid {
    gap: 30px;
  }
  .page-id-75 .mak-team-jump {
    justify-content: flex-start;
  }
  .page-id-75 .mak-team-hero-photo {
    padding: 20px;
    border-radius: 20px;
  }
  .page-id-75 .mak-team-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .page-id-75 .mak-team-video-grid {
    flex-wrap: wrap !important;
  }
  .page-id-75 .mak-team-video-grid > .wp-block-column {
    flex-basis: calc(50% - 12px) !important;
  }
}

@media (max-width: 520px) {
  .page-id-75 .mak-team-grid {
    grid-template-columns: 1fr !important;
  }
  .page-id-75 .mak-team-video-grid > .wp-block-column {
    flex-basis: 100% !important;
  }
  .page-id-75 .mak-team-card {
    padding: 12px 12px 20px;
    border-radius: 17px;
  }
  .page-id-75 .mak-team-cta {
    padding: 30px 22px;
    text-align: center;
  }
  .page-id-75 .mak-team-cta .wp-block-buttons {
    justify-content: center;
  }
}

.page-id-75 .mak-team-contact a {
  overflow-wrap: anywhere;
}

.page-id-75 .mak-team-page .wp-block-group__inner-container {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
@media (max-width: 781px) {
  .page-id-75 .mak-team-shell {
    width: min(calc(100% - 28px), 1200px);
  }
}

/* Angleichung an Start- und Produktseiten */
.page-id-75 .mak-team-page {
  font-family: inherit;
  color: #6e6e6e;
}

.page-id-75 .mak-team-hero {
  background: #fff;
}

.page-id-75 .mak-team-hero h1 {
  font-size: clamp(2.25rem, 3.8vw, 3.25rem);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -0.015em;
}

.page-id-75 .mak-team-hero-copy {
  font-size: 1.125rem;
  line-height: 1.65;
}

.page-id-75 .mak-team-kicker,
.page-id-75 .mak-team-section-kicker {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.page-id-75 .mak-team-section-head h2 {
  font-size: clamp(1.9rem, 3vw, 2.5rem);
  font-weight: 400;
  line-height: 1.2;
}

.page-id-75 .mak-team-card h3 {
  font-weight: 500;
}

.page-id-75 .mak-team-career-link {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 24px 0 28px;
  padding: 13px 18px;
  gap: 7px 16px;
  background: #f5f5f5;
  border-left: 3px solid var(--team-red);
  border-radius: 4px;
}

.page-id-75 .mak-team-career-link p {
  margin: 0;
  color: #4f4f4f;
  font-size: 0.98rem;
  line-height: 1.45;
}

.page-id-75 .mak-team-career-link a {
  color: var(--team-red);
  font-weight: 600;
  text-decoration: none;
}

.page-id-75 .mak-team-videos {
  color: #6e6e6e;
  background: #f5f6f7;
}

.page-id-75 .mak-team-videos .mak-team-section-kicker {
  color: var(--team-red);
}
.page-id-75 .mak-team-videos h2 {
  color: var(--team-ink);
}

.page-id-75 .mak-team-video-card {
  background: #fff;
  border-color: var(--team-line);
  box-shadow: 0 8px 24px rgba(26, 58, 62, 0.06);
}

.page-id-75 .mak-team-video-card p {
  color: var(--team-ink);
  font-weight: 500;
}

.page-id-75 .mak-team-hero h1 {
  font-size: 36px;
  line-height: 1.14;
}
@media (max-width: 520px) {
  .page-id-75 .mak-team-hero h1 {
    font-size: 34px;
  }
}

/* Runde Mitarbeiterporträts und breiteres Teamfoto */
.page-id-75 .mak-team-hero-grid > .wp-block-column:first-child {
  flex-basis: 52% !important;
}

.page-id-75 .mak-team-hero-grid > .wp-block-column:last-child {
  flex-basis: 48% !important;
}

.page-id-75 .mak-team-hero-photo {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 12px;
  box-shadow: none;
}

.page-id-75 .mak-team-hero-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  -o-object-fit: contain;
  object-fit: contain;
  border-radius: 12px;
}

.page-id-75 .mak-team-card {
  padding: 26px 18px 22px;
  text-align: center;
}

.page-id-75 .mak-team-photo {
  width: min(180px, 82%);
  margin: 0 auto 22px;
  padding: 0;
  background: transparent;
  border-radius: 50%;
}

.page-id-75 .mak-team-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 50%;
}

.page-id-75 .mak-team-card h3,
.page-id-75 .mak-team-role,
.page-id-75 .mak-team-contact {
  text-align: center;
}

@media (max-width: 781px) {
  .page-id-75 .mak-team-hero-grid > .wp-block-column:first-child,
  .page-id-75 .mak-team-hero-grid > .wp-block-column:last-child {
    flex-basis: 100% !important;
  }

  .page-id-75 .mak-team-hero-photo {
    max-width: 620px;
    margin-inline: auto;
  }
}

/* ==================================================================
   Hauptnavigation: Unterstreichung (nur Desktop)

   Ein einziger Balken fuer die ganze Leiste statt eines ::after je
   Link. Nur so kann er von Punkt zu Punkt wandern - zwei getrennte
   Pseudoelemente koennen sich nicht ineinander bewegen.

   Ruhezustand: Position und Breite des Links zur aktuellen Seite.
   Beim Hovern folgt er der Maus auf der X-Achse; Breite und Hoehe
   bleiben, nur die horizontale Position aendert sich.

   Bewusst ohne position: relative auf ._main-nav--nav-items: die
   Liste als Bezugsrahmen wuerde das Megamenue an sie binden statt an
   .wrapper - das Panel waere dann nur so breit wie die Navigation.
   Der Balken haengt darum am selben Bezugsrahmen wie das Megamenue,
   script.js rechnet die Werte entsprechend um.

   --nav-indicator-x/-y/-w kommen aus script.js.
   ================================================================== */
._main-nav--indicator {
  /* Mobil klappt die Liste als Block auf - dort ergibt eine
     Unterstreichung, die der Maus folgt, keinen Sinn. */
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: var(--nav-indicator-w, 0px);
  height: 2px;
  border-radius: 1px;
  /* Theme-Rot. --accent kommt aus der GeneratePress-Palette und ist im
     Stylesheet selbst nirgends definiert - waere es nicht gesetzt, faellt
     die ganze Deklaration weg und der Balken bliebe unsichtbar. Darum das
     Marken-Rot als letzte Sicherung. Fuer eine andere Farbe reicht es,
     --nav-indicator-color zu setzen. */
  background: var(--nav-indicator-color, var(--accent, #e30613));
  opacity: 0;
  pointer-events: none;
  transform: translate3d(
    var(--nav-indicator-x, 0px),
    var(--nav-indicator-y, 0px),
    0
  );
  transition:
    transform var(--nav-indicator-speed, var(--trans-duration)) ease-out,
    width var(--nav-indicator-speed, var(--trans-duration)) ease-out,
    opacity var(--trans-duration) ease;
}

/* Beim Mitlaufen kuerzer, sonst haengt der Balken sichtbar hinter dem
   Zeiger her. Der Weg zurueck zur aktiven Seite darf ruhig laenger sein. */
._main-nav--indicator[data-state="follow"] {
  --nav-indicator-speed: 0.15s;
}

@media (min-width: 1000px) {
  ._main-nav--indicator {
    display: block;
  }

  /* Erst einblenden, wenn script.js gemessen hat. Ohne das blitzt der
     Balken beim Laden kurz links auf Breite 0 auf. */
  ._main-nav--nav-items[data-indicator="ready"] ._main-nav--indicator {
    opacity: 1;
  }
}