/*
Theme Name: modernX
Theme URI: https://modernx.de/
Author: modernX GmbH & Co. KG
Description: Block-Theme im Design der modernX-Website. Nachbau der TYPO3-Vorlage template_modernx auf Basis der Original-Design-Tokens (Farben, Typografie, Abstaende).
Version: 1.1.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: modernx
Tags: block-theme, full-site-editing, business
*/

/* ------------------------------------------------------------------
   Basis
   Die Originalseite setzt :root auf 18px. Die gesamte rem-Skala in
   theme.json baut darauf auf.
   ------------------------------------------------------------------ */
:root {
  font-size: 18px;
  --mx-shadow-soft: 0 0 5px rgba(139, 147, 154, .55);
  --mx-radius-pill: 48px;
  --mx-transition: .3s ease;
}

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
  height: auto;
}

/* ------------------------------------------------------------------
   Buttons – Varianten der Originalseite
   ------------------------------------------------------------------ */
.wp-block-button.is-style-lightning .wp-block-button__link {
  color: var(--wp--preset--color--green);
  background-color: var(--wp--preset--color--green-soft);
  border-color: rgba(114, 182, 43, 0);
  box-shadow: 14px 8px 27px rgba(55, 255, 41, .35);
}

/* Die Vorlage nimmt den Grund nur leicht zurueck, sie kippt nicht auf Gruen. */
.wp-block-button.is-style-lightning .wp-block-button__link:hover,
.wp-block-button.is-style-lightning .wp-block-button__link:focus {
  background-color: rgba(227, 240, 213, .9);
}

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

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

/* ------------------------------------------------------------------
   Kopfbereich
   ------------------------------------------------------------------ */
/*
 * Kleben muss die Huelle der Vorlage, nicht die Gruppe darin: ein klebendes
 * Element bewegt sich nur innerhalb seines Elternelements, und das ist hier
 * genau so hoch wie die Kopfleiste selbst – es bliebe also kein Weg.
 */
.wp-site-blocks > header.wp-block-template-part {
  position: sticky;
  top: 0;
  z-index: 899;
  background: var(--wp--preset--color--white);
}

.mx-header {
  position: relative;
  z-index: 899;
  /* Die Kopfleiste der Vorlage ist 91 px hoch: 79 px Menue plus 6 px Luft. */
  padding-block: 6px;
  background: var(--wp--preset--color--white);
  box-shadow: var(--mx-shadow-soft);
}

/*
 * Das Logo steht auf breiten Fenstern in seiner eigenen Groesse (211 x 65).
 * Erst unterhalb von 992 px begrenzt die Vorlage es auf 54 px und schrumpft
 * es beim Scrollen auf 40 px - dort und nur dort.
 */
.mx-header .wp-block-site-logo img {
  /* Die Vorlage zeigt das Zeichen in 211 x 65; die SVG hat keine eigene
     Groesse, deshalb steht die Hoehe hier fest. */
  height: 65px;
  width: auto;
  max-height: none;
}

@media (max-width: 991.98px) {
  /*
   * Unterhalb von 992 px weicht das Menue dem Klappknopf; die Kopfleiste misst
   * dann 80 px - das kleinere Zeichen mit 54 px und 13 px Luft oben und unten.
   */
  .mx-header { padding-block: 13px; }

  .mx-header .wp-block-site-logo img {
    height: 54px;
    transition: height .2s ease;
  }

  .wp-site-blocks > header.wp-block-template-part.is-minified .wp-block-site-logo img {
    height: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mx-header .wp-block-site-logo img { transition: none; }
}


/* ------------------------------------------------------------------
   Brotkrumen
   ------------------------------------------------------------------ */
.mx-breadcrumb {
  /* 18 px oben und unten, direkt unter der Kopfleiste - wie im Original. */
  padding: 18px 13.5px;
  margin-block-start: 0;
  background: var(--wp--preset--color--light);
  /* Die Vorlage setzt die Brotkrume in 14 px, nicht in der kleinen Groesse. */
  font-size: 14px;
  line-height: 21px;
}

/*
 * Unter der Kopfleiste - ob mit oder ohne Brotkrume - faengt der Inhalt in der
 * Vorlage direkt an; der Blockabstand von WordPress schoebe 18 px dazwischen.
 */
.wp-site-blocks > main { margin-block-start: 0; }

.mx-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  list-style: none;
  margin: 0;
  /* Das Polster steht am Band selbst; die Liste bringt keines mehr mit. */
  padding: 0;
}

/* Trennzeichen wie im Original: ein doppeltes Winkelzeichen. */
.mx-breadcrumb li + li::before {
  content: "\00BB";
  margin-right: .5rem;
  color: var(--wp--preset--color--grey);
}

.mx-breadcrumb a {
  color: var(--wp--preset--color--dark);
  text-decoration: underline;
}

.mx-breadcrumb a:hover {
  color: var(--wp--preset--color--primary);
}

/* ------------------------------------------------------------------
   Hero-Slider (Startseite)
   Ohne JavaScript nutzbar: Scroll-Snap plus Sprungmarken.
   ------------------------------------------------------------------ */
.mx-hero {
  position: relative;
  overflow: hidden;
}

.mx-hero__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.mx-hero__track::-webkit-scrollbar {
  display: none;
}

.mx-hero__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 2rem;
  padding-block: 0;
}

/* Die Vorlage setzt den Text 40 px vom unteren Rand ab. */
.mx-hero__text { padding-bottom: 40px; }

/*
 * Sobald das Skript uebernimmt, liegen die Tafeln uebereinander und wechseln
 * per Ueberblendung – wie im Original. Ohne Skript bleibt das Rollband, damit
 * der Inhalt in jedem Fall erreichbar ist.
 */
.mx-hero.is-ready .mx-hero__track {
  display: block;
  overflow: visible;
  position: relative;
  /* Die Vorlage gibt dem Band eine feste Hoehe von 550 px. */
  height: 550px;
}

/* Gestapelt braucht das Band mehr Hoehe, sonst schneidet es den Text ab. */
@media (max-width: 991.98px) {
  .mx-hero.is-ready .mx-hero__track { height: 720px; }
}

.mx-hero.is-ready .mx-hero__slide {
  display: grid;
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  /* Splide blendet mit der Voreinstellung von 400 ms. */
  transition: opacity .4s ease;
  pointer-events: none;
}

.mx-hero.is-ready .mx-hero__slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .mx-hero.is-ready .mx-hero__slide { transition: none; }
}

.mx-hero__slide .mx-hero__text {
  order: 2;
}

.mx-hero__slide .mx-hero__media {
  order: 1;
}

.mx-hero__text p:first-child {
  font-size: var(--wp--preset--font-size--display);
  font-weight: 400;
  line-height: 1.2;
  margin-top: 0;
}

/*
 * Die Tafelwahl. Im Original ist es eine Linie mit vier Punkten; der Punkt der
 * gerade sichtbaren Tafel ist gross und weiss, die Beschriftung darunter.
 */
/*
 * Die Vorlage haengt die Reiterleiste absolut in die rechte Haelfte des
 * Aufmachers (left:50%, width:50%, 35 px nach links, 35 px vom unteren Rand).
 * Die Reiter sind so breit wie ihre Beschriftung, mit 2 rem Abstand.
 */
.mx-hero__tabs {
  position: absolute;
  left: 50%;
  bottom: 35px;
  width: 50%;
  transform: translateX(-35px);
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
  z-index: 2;
}

.mx-hero__tabs li {
  position: relative;
  text-align: center;
  padding-top: 25px;
}

/*
 * Die Verbindungslinie zeichnet die Vorlage je Reiter, nicht als einen Balken.
 * So passt sie auch bei unterschiedlich breiten Beschriftungen.
 */
.mx-hero__tabs li:not(:first-child)::before,
.mx-hero__tabs li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 0;
  height: 2px;
  z-index: -1;
  background: var(--wp--preset--color--secondary);
}

.mx-hero__tabs li:not(:first-child)::before { left: 0; width: 50%; }
.mx-hero__tabs li:not(:last-child)::after { left: 50%; width: calc(50% + 2rem); }

/* Der Punkt sitzt auf der Linie und wird beim aktiven Reiter gross und weiss. */
.mx-hero__tabs li > a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 15px;
  height: 15px;
  border-radius: 15px;
  background: var(--wp--preset--color--secondary);
  transform: translate(-50%, -50%);
  transition: all var(--mx-transition);
}

.mx-hero__tabs li > a.is-active::before {
  width: 27px;
  height: 27px;
  background: #ffffff;
}

/*
 * Die Beschriftung ist tuerkis und nur beim aktiven Reiter weiss. Die Regel
 * fuer Verweise auf farbigem Grund darf das nicht ueberschreiben, deshalb
 * steht hier der Elternselektor davor.
 */
/*
 * Die Regel fuer Verweise auf Farbflaechen hat dieselbe Gewichtung und steht
 * spaeter in der Datei; deshalb hier ein Schritt mehr im Selektor.
 */
.mx-hero .mx-hero__tabs li > a {
  display: block;
  padding: 0;
  color: var(--wp--preset--color--secondary);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  white-space: nowrap;
}

.mx-hero .mx-hero__tabs li > a.is-active { color: #ffffff; }

.mx-hero .mx-hero__tabs li > a:hover,
.mx-hero .mx-hero__tabs li > a:focus {
  color: #ffffff;
}

@media (max-width: 991.98px) {
  .mx-hero__slide {
    grid-template-columns: 1fr;
  }
  .mx-hero__slide .mx-hero__text { order: 1; }
  .mx-hero__slide .mx-hero__media { order: 2; }
}

/* ------------------------------------------------------------------
   Kachelraster mit Rueckseite (Referenzen / Kennzahlen)
   ------------------------------------------------------------------ */
.mx-tiles {
  position: relative;
}

.mx-tiles__track {
  /* Werte aus der Splide-Konfiguration des Originals: vier Kacheln,
     1,75 rem Rinne, 10 px Rand; unterhalb von 992 px eine Kachel mit 50 px. */
  --mx-tiles-gap: 1.75rem;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc(
    (100% - (var(--mx-tiles-per, 1) - 1) * var(--mx-tiles-gap))
    / var(--mx-tiles-per, 1)
  );
  /* Die Referenzen laufen ueber vier Zeilen (grid: rows 4, cols 4). */
  grid-template-rows: repeat(var(--mx-tiles-rows, 1), auto);
  gap: var(--mx-tiles-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-inline: 10px;
  padding-bottom: .5rem;
}

/*
 * Das Rasterband der Referenzen ist in der Vorlage kein Schieber: 4 x 4
 * Kacheln mit 27 px Rinne, buendig am Raster und ohne Pfeile.
 */
.mx-tiles--grid .mx-tiles__track {
  --mx-tiles-gap: 1.5rem;
  /* Das Raster fuellt sich zeilenweise, nicht spaltenweise. */
  grid-auto-flow: row;
  grid-template-columns: repeat(var(--mx-tiles-per, 1), minmax(0, 1fr));
  grid-template-rows: none;
  overflow-x: visible;
  scroll-snap-type: none;
  padding-inline: 0;
  padding-bottom: 0;
}

.mx-tiles--grid .mx-tiles__nav { display: none; }

@media (max-width: 991.98px) {
  .mx-tiles__track { --mx-tiles-per: 1; padding-inline: 50px; }
}

.mx-tiles__track::-webkit-scrollbar { display: none; }

/* Blaetterpfeile, wie im Original an den Enden des Bandes. */
.mx-tiles__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: #006aa1;
  color: #ffffff;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  transition: background var(--mx-transition), color var(--mx-transition);
}

/* Die Pfeile sitzen im Original mittig auf der Kante des Bandes. */
.mx-tiles__nav--prev { left: -25px; }
.mx-tiles__nav--next { right: -25px; }

@media (max-width: 991.98px) {
  .mx-tiles__nav { width: 40px; height: 40px; font-size: 1.4rem; }
  .mx-tiles__nav--prev { left: 0; }
  .mx-tiles__nav--next { right: 0; }
}

/* Am Anfang beziehungsweise Ende wird der Pfeil grau, wie im Original. */
.mx-tiles.at-start .mx-tiles__nav--prev,
.mx-tiles.at-end .mx-tiles__nav--next {
  background: #dcdcdc;
  pointer-events: none;
}

.mx-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  /* Sichtbar, damit die versetzte Platte darunter herausschaut. */
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.25rem;
  color: var(--wp--preset--color--white);
  scroll-snap-align: start;
  /* Runde Ecken und der durchsichtige Rand wie im Original. */
  border-radius: 30px;
  border: 2px solid transparent;
  /*
   * Ohne min-width waechst die Spalte auf die Breite des laengsten Wortes;
   * "Prozessoptimierung" sprengte damit das Raster nach rechts.
   */
  min-width: 0;
}

/* Kennzahlkacheln: weisser Grund, gruener Rand, gruene Zahl. */
.mx-tile--bordered {
  background: var(--wp--preset--color--white);
  color: var(--wp--preset--color--green);
  border-color: var(--wp--preset--color--green);
}

/* Nur das Hintergrundbild fuellt die Kachel, nicht das Kundenlogo darin. */
.mx-tile > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Ohne overflow an der Kachel beschneidet das Bild sich selbst. */
  border-radius: 28px;
}

/*
 * Hinter jeder Kachel liegt in der Vorlage eine um 7 px versetzte
 * hellgruene Platte.
 */
.mx-tile::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 7px;
  width: 100%;
  height: 100%;
  background: #aad380;
  border-radius: 30px;
  z-index: -1;
}

.mx-tile__front,
.mx-tile__back {
  position: relative;
  z-index: 1;
}

.mx-tile__front {
  /* Die Vorlage setzt die Kennzahl als h3 (1,778 rem) in Strichstaerke 600. */
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  inset: 0;
  padding: 15px;
  font-size: var(--wp--preset--font-size--x-large);
  font-weight: 600;
  line-height: 1.2;
  max-width: 100%;
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* Rueckseite: weiss mit gruener Schrift, auf Kennzahlkacheln umgekehrt. */
.mx-tile__back {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  border-radius: 28px;
  /* Die Vorlage schaltet die Rueckseite hart ein, sie blendet nicht. */
  opacity: 0;
  visibility: hidden;
  background: var(--wp--preset--color--white);
  color: var(--wp--preset--color--green);
  font-weight: 600;
}

.mx-tile--bordered .mx-tile__back {
  background: var(--wp--preset--color--green);
  color: var(--wp--preset--color--white);
}

.mx-tile:hover .mx-tile__back,
.mx-tile:focus-within .mx-tile__back {
  opacity: 1;
  visibility: visible;
}

/* ------------------------------------------------------------------
   Kartenraster (Themenuebersichten der Beratungsfelder)
   ------------------------------------------------------------------ */
.mx-cards {
  display: grid;
  /* col-lg-4 der Vorlage: drei Spalten bis hinauf zu 1920 px. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* Die Rinne ist die des Rasters (27 px); der Zeilenabstand steckt im
     py-5 der Karten selbst. */
  gap: 0 27px;
}

/*
 * Im Original steht nur das Symbol mittig; Ueberschrift und Fliesstext laufen
 * linksbuendig. Zentrierter Mengentext ueber acht Zeilen liest sich schlecht.
 */
.mx-card {
  text-align: left;
  /* py-5 der Vorlage: 54 px oben und unten, also 108 px zwischen zwei Reihen. */
  padding-block: 3rem;
}

/*
 * Unter jeder Abbildung stehen 27 px.
 *
 * TYPO3 stellt jedes Bild einer Galerie in eine Rasterzelle mit der Klasse
 * mb-4 - das sind bei 18 px Grundschrift 1,5 rem. Ohne diesen Abstand war im
 * Nachbau praktisch jeder Bildrahmen 27 px flacher als in der Vorlage, was
 * sich ueber eine Seite zu mehreren hundert Pixeln summierte.
 * Spaeter stehende Regeln (Kartenbox, Symbolreihe) setzen eigene Werte.
 */
.entry-content .wp-block-image { margin-bottom: 1.5rem; }

.mx-card .wp-block-image img {
  width: 135px;
  height: 135px;
  object-fit: contain;
  margin-inline: auto;
}

.mx-card h3 {
  font-weight: 400;
  margin-top: .75rem;
}

.mx-card p {
  color: var(--wp--preset--color--grey);
}

.mx-card .wp-block-buttons {
  justify-content: flex-start;
}

/* ------------------------------------------------------------------
   Parallax-Sektion mit Hintergrundvideo
   ------------------------------------------------------------------ */
/*
 * Im Original laeuft das Video ungedaempft ueber die volle Hoehe des Fensters;
 * der Text steht in einer weissen Karte, die links aus dem Raster herausragt.
 */
/*
 * Das Fenster ist genau so hoch wie das Browserfenster und beschneidet alles,
 * was darueber hinausragt - wie .parallaxWindow in der Vorlage.
 */
.mx-parallax {
  position: relative;
  height: 100vh;
  min-height: 100vh;
  padding-block: 0;
  /*
   * Beschnitten wird mit clip-path, NICHT mit overflow: hidden.
   *
   * overflow macht aus dem Abschnitt einen Scrollbehaelter. Die
   * bildlaufgesteuerte Animation weiter unten sucht sich den naechsten
   * Scrollbehaelter als Zeitachse - und das waere dann dieser Abschnitt.
   * Der scrollt nie, die Zeitachse steht fest bei 50 Prozent, und das Video
   * behaelt eine feste Verschiebung: es laeuft einfach mit, statt
   * stillzustehen. Am 10.09.2026 genau so gemessen.
   *
   * clip-path beschneidet dasselbe Rechteck, ohne einen Scrollbehaelter
   * anzulegen. Damit haengt die Zeitachse am Dokument, wo sie hingehoert.
   */
  clip-path: inset(0);
  /*
   * Der Abschnitt gibt die Zeitachse an. Ohne Namen naehme view() das
   * animierte Element selbst als Bezug - also das Video, das dabei gerade
   * verschoben wird. Der Abschnitt bewegt sich nicht und ist damit der
   * saubere Bezug.
   */
  view-timeline-name: --mx-parallax;
  /*
   * Ohne diese Zeile bleibt ein Rest Nachlauf. Die Wurzel traegt
   * scroll-padding-top: 90px fuer die Sprungmarken unter der Kopfzeile. Eine
   * view()-Zeitachse rechnet dieses Polster standardmaessig mit und verkuerzt
   * ihren Bereich dadurch von 1800 auf 1710 Pixel - 5,3 Prozent. Genau so viel
   * ist das Video am 10.09.2026 nachgelaufen: 43 Pixel auf 830 Pixel
   * Abschnittsweg. inset 0 nimmt das Polster wieder heraus.
   */
  view-timeline-inset: 0;
}

/*
 * Das Video steht beim Scrollen still. In der Vorlage haengt es als
 * position:fixed hinter der ganzen Seite; das setzt voraus, dass alles
 * ausserhalb des Fensters deckend ist. Hier bleibt es im Abschnitt und wird
 * vom Skript um die Scrollstrecke zurueckgeschoben - dasselbe Bild, ohne
 * Annahmen ueber den Rest der Seite.
 */
.mx-parallax .wp-block-cover__video-background,
.mx-parallax .wp-block-cover__image-background {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  object-fit: cover;
  backface-visibility: hidden;
}

/*
 * Das Stillstehen kommt aus einer bildlaufgesteuerten Animation, nicht mehr
 * aus einem Skript.
 *
 * Vorher rechnete ein Scroll-Zuhoerer im Hauptstrang die Gegenbewegung aus.
 * Der Bildlauf selbst laeuft aber auf dem Compositor: die Seite bewegt sich
 * zuerst, die Gegenbewegung kommt ein Bild spaeter, und das Video zittert um
 * ein paar Pixel auf und ab. Das ist keine Frage der Rechenzeit - es ist die
 * Bauart. Kein Runden und keine eigene Ebene bekommt das weg.
 *
 * animation-timeline: view() haengt dieselbe Bewegung an den Bildlauf selbst.
 * Sie laeuft damit im selben Takt wie das Scrollen, ohne Umweg ueber den
 * Hauptstrang. Der Bereich einer view()-Zeitachse geht von "der Abschnitt
 * beginnt einzutreten" bis "er ist ganz heraus" - bei 100vh Hoehe sind das
 * 200vh Weg. Damit das Video dabei stillsteht, laeuft es von -100vh nach
 * +100vh.
 *
 * Wo view() fehlt, bleibt das Video einfach am Abschnitt haengen und scrollt
 * mit. Das ist kein Effekt, aber es zittert auch nicht.
 */
@supports (animation-timeline: view()) and (view-timeline-name: --x) {
  @media not (prefers-reduced-motion: reduce) {
    .mx-parallax .wp-block-cover__video-background,
    .mx-parallax .wp-block-cover__image-background {
      animation: mx-parallax-stillstand linear both;
      animation-timeline: --mx-parallax;
    }
  }
}

@keyframes mx-parallax-stillstand {
  from { transform: translateY(-100vh); }
  to   { transform: translateY(100vh); }
}

/* Die Ebene mit der Karte liegt darueber und folgt dem Raster. */
.mx-parallax .wp-block-cover__inner-container {
  position: absolute;
  inset: 0;
  z-index: 100;
  width: 100%;
  max-width: var(--wp--style--global--content-size);
  margin-inline: auto;
  padding: 0;
}

/*
 * Die weisse Karte: 600 px breit, senkrecht mittig, 50 Pixel nach links aus
 * dem Raster heraus - die Werte stammen aus .innerWrapper der Vorlage.
 */
.mx-parallax__card {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  max-width: 600px;
  padding: 50px;
  background: var(--wp--preset--color--white);
  /*
   * Die Farbe steht an der Karte, nicht an den einzelnen Elementen: der
   * Anreisser erbt sie ueber ".mx-parallax .mx-lead { color: inherit }" und
   * waere sonst weiss auf Weiss.
   */
  color: var(--wp--preset--color--dark);
  transform: translate(-50px, -50%);
}

.mx-parallax .mx-parallax__card :is(h1, h2, h3, h4, h5, h6, p, li, a) {
  color: var(--wp--preset--color--dark);
}

.mx-parallax__card > :first-child { margin-top: 0; }
.mx-parallax__card > :last-child { margin-bottom: 0; }

@media (max-width: 991.98px) {
  /*
   * Kein Video auf schmalen Geraeten - die Vorlage zeigt dort das Standbild.
   *
   * Hier stand background-attachment: fixed, damit das Standbild ebenfalls
   * stehenbleibt. Das ist auf Telefonen die bekannteste Ursache fuer ruckelndes
   * Scrollen: der Browser kann die Flaeche nicht als Ebene verschieben, sondern
   * muss sie in jedem Bild neu zeichnen. Der Gewinn war ein Effekt, den auf
   * dieser Breite ohnehin kaum jemand als solchen erkennt; der Preis war
   * sichtbar. Das Bild scrollt jetzt mit.
   */
  .mx-parallax .wp-block-cover__video-background { display: none; }
  .mx-parallax {
    background-size: cover;
    background-position: center;
    background-attachment: scroll;
  }
}

/* ------------------------------------------------------------------
   Einbettungen (Bookings-Kalender, Video-Portale)
   ------------------------------------------------------------------ */
.mx-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  min-height: 32rem;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 4px;
  overflow: hidden;
  background: var(--wp--preset--color--light);
}

.mx-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ------------------------------------------------------------------
   Klapp-Abschnitte (Akkordeon)
   ------------------------------------------------------------------ */
.mx-acc { display: flex; flex-direction: column; gap: 0; }

.mx-acc__item {
  border-bottom: 1px solid var(--wp--preset--color--border);
}

/*
 * Nebeneinander ist der Titel nur ein Viertel breit - die Linie gehoert
 * unter ihn, nicht ueber die ganze Zeile. Und der Blockabstand von
 * WordPress zwischen den <details> faellt bei JEDER Breite weg: unter
 * 992 px summierten sich sonst 40 Fugen zu 720 px auf /ciospirit.
 */
.mx-acc--sidebyside .mx-acc__item {
  border-bottom: 0;
  margin-block: 0;
  /* Gestapelt zogen sich die Eintraege sonst auf ihre Inhaltsbreite zusammen
     und standen mittig; die Kernregel setzt hier margin: auto !important. */
  margin-inline: 0 !important;
}

/*
 * Zugeklappte Eintraege zeigen ihre Tafel nicht. Das muss ausdruecklich
 * dastehen: gemessen zeigte der Browser bei 390 px alle 41 Tafeln, obwohl nur
 * ein Eintrag offen war.
 */
.mx-acc--sidebyside .mx-acc__item:not([open]) > .mx-acc__panel { display: none; }

.mx-acc__item > summary {
  cursor: pointer;
  list-style: none;
  padding: 1.15rem 2.5rem 1.15rem 0;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .15rem;
}

.mx-acc__item > summary::-webkit-details-marker { display: none; }

/*
 * Die Vorlage zeichnet an dieser Stelle keinen Winkel: der offene Eintrag
 * wird ueber die gruene Schraegflaeche und die Schriftfarbe kenntlich.
 */

.mx-acc__title {
  color: var(--wp--preset--color--grey);
  font-size: var(--wp--preset--font-size--small);
}

.mx-acc__sub {
  font-weight: 700;
  color: var(--wp--preset--color--dark);
}

.mx-acc__item[open] > summary .mx-acc__sub { color: var(--wp--preset--color--primary); }

.mx-acc__item > :not(summary) { padding-bottom: 1.25rem; }

/* ------------------------------------------------------------------
   Formulare
   ------------------------------------------------------------------ */
.mx-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.5rem;
}

.mx-field { display: flex; flex-direction: column; gap: .35rem; }
.mx-field--wide { grid-column: 1 / -1; }

.mx-field label {
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600;
  color: var(--wp--preset--color--dark);
}

/* Der Stern ist in der Vorlage dunkelblau, nicht orange. */
.mx-req { color: var(--wp--preset--color--dark); }

/*
 * Die Felder der Vorlage sind Pillen: 2 px Rahmen in Dunkelblau, Radius 48,
 * 18 px fette Schrift, ein feiner Schatten nach innen.
 */
.mx-field input:not([type="checkbox"]),
.mx-field select,
.mx-field textarea {
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--wp--preset--color--dark);
  background: var(--wp--preset--color--white);
  border: 2px solid var(--wp--preset--color--dark);
  border-radius: 48px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .075);
  padding: .53rem 1.75rem;
  width: 100%;
  /* Ohne border-box addieren sich Rahmen und Innenabstand zur Breite und die
     Seite laesst sich seitlich verschieben. */
  box-sizing: border-box;
  max-width: 100%;
}

.mx-field :is(input, select, textarea):focus {
  border-color: #80b5d0;
  outline: 0;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .075),
              0 0 0 .25rem rgba(0, 106, 161, .25);
}

/* Auf farbigen Abschnitten laesst die Vorlage den Rahmen verschwinden. */
.mx-section--dark .mx-field :is(input:not([type="checkbox"]), select, textarea),
.mx-section--primary .mx-field :is(input:not([type="checkbox"]), select, textarea),
.mx-section--gradient .mx-field :is(input:not([type="checkbox"]), select, textarea) {
  border-color: transparent;
}

.mx-field textarea { resize: vertical; border-radius: 24px; }

/* Die Vorlage zeichnet den Winkel selbst und blendet den Systempfeil aus. */
.mx-field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: calc(100% - 31.5px) 50%;
  background-size: 16px 12px;
  padding-right: 4rem;
}

.mx-check {
  flex-direction: row;
  align-items: flex-start;
  gap: .6rem;
  font-weight: 400;
}

.mx-check input { flex: 0 0 auto; }

/* Der Abstand ist der Rest der letzten Feldgruppe: 1 rem, nicht 1,5. */
.mx-form__actions { margin-top: 1rem; }

/*
 * Der Absendeknopf ist in der Vorlage der helle gruene (btn-lightning), nicht
 * der blaue: hellgruener Grund, gruene Schrift, gruener Schein.
 */
.mx-form__actions button {
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  cursor: pointer;
  color: var(--wp--preset--color--green);
  background: var(--wp--preset--color--green-soft);
  border: 2px solid rgba(114, 182, 43, 0);
  border-radius: 48px;
  box-shadow: 14px 8px 27px rgba(55, 255, 41, .35);
  margin-bottom: 10px;
  padding: .53rem 2.5rem;
}

.mx-form__actions button:hover,
.mx-form__actions button:focus {
  background: rgba(227, 240, 213, .9);
}

@media (max-width: 991.98px) {
  .mx-form__grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------
   News
   ------------------------------------------------------------------ */
.mx-news-meta {
  color: var(--wp--preset--color--grey);
  font-size: var(--wp--preset--font-size--small);
}

/* Die Vorlage zieht unter den Kacheln keine Linie - nur die Zeilenliste
   des Magazins hat eine. */
.mx-news-card > li,
li.mx-news-card {
  padding-bottom: 1.5rem;
}

.mx-news-card .wp-block-post-title a {
  color: var(--wp--preset--color--dark);
  text-decoration: none;
}

/* Gestapelt haengt die Vorlage mb-5 an jeden Eintrag - 54 px. */
@media (max-width: 991.98px) {
  .mx-news-card { row-gap: 0; }
  .mx-news-card > li { margin-bottom: 3rem; }
}

.mx-news-card .wp-block-post-title a:hover {
  color: var(--wp--preset--color--primary);
}

.mx-news-card .wp-block-post-featured-image img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/*
 * Kategorie-Etikett. Im Original steht es als "/ Veranstaltungen" ueber der
 * Ueberschrift, in der Hausfarbe und in Versalien.
 */
.mx-news-cat {
  color: var(--wp--preset--color--secondary);
  /* In der Vorlage gemessen: 18 px, nicht die kleine Schriftgroesse. */
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 0.35rem;
}

.mx-news-cat a {
  color: inherit;
  text-decoration: none;
}

.mx-news-cat a:hover {
  text-decoration: underline;
}

/* ------------------------------------------------------------------
   Autorenzeile
   ------------------------------------------------------------------ */
.mx-byline {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--wp--preset--color--grey);
  /* Die Vorlage setzt .extra in 1 rem mit Zeilenhoehe 1. */
  font-size: 1rem;
  line-height: 1;
  margin: 0.75rem 0;
}

.mx-byline__img {
  width: 95px;
  height: 95px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}

.mx-byline--compact .mx-byline__img {
  width: 40px;
  height: 40px;
}

/*
 * Die Vorlage stellt das Autorenbild inline und gibt ihm 9 px nach rechts und
 * nach unten; die Zeile misst damit 49 px und traegt keine eigenen Abstaende.
 */
.mx-byline--compact {
  gap: 9px;
  margin: 0;
  padding-bottom: 9px;
}

.mx-byline__text time {
  /* Das Datum ist fett, aber im selben Grau wie die uebrige Zeile. */
  font-weight: 700;
}

/* ------------------------------------------------------------------
   Abschnitte mit Flaechenfarbe
   ------------------------------------------------------------------ */
/*
 * Farbflaechen laufen im Original bis an den Fensterrand. Innerhalb des
 * Inhaltsbereichs greift die Randaufhebung von WordPress nicht zuverlaessig,
 * deshalb hier ausdruecklich.
 */
.wp-block-group.alignfull:is(.mx-section--light, .mx-section--dark,
                             .mx-section--primary, .mx-section--gradient),
.wp-block-cover.alignfull:is(.mx-parallax, .mx-news-hero__cover) {
  margin-left: calc(-1 * var(--wp--style--root--padding-left, 1rem));
  margin-right: calc(-1 * var(--wp--style--root--padding-right, 1rem));
  width: auto;
  max-width: none;
}

/*
 * Zwei randlose Farbflaechen stossen in der Vorlage ohne Fuge aneinander.
 * Der Ausschluss ist noetig, damit ein Abschnitt mit eigenem frame-space
 * (mx-sp-b-*) seinen Abstand behaelt.
 */
.entry-content > .alignfull:is(.mx-section--light, .mx-section--dark,
                               .mx-section--primary, .mx-section--gradient,
                               .mx-parallax, .mx-news-hero__cover
                              ):not([class*="mx-sp-b-"]) {
  margin-block-start: 0;
}

/* .section der Vorlage: Zierformen laufen nicht ueber den Rand hinaus. */
.mx-section--light,
.mx-section--dark,
.mx-section--primary,
.mx-section--gradient {
  position: relative;
  overflow: hidden;
}

.mx-section--light { background: var(--wp--preset--color--light); }

.mx-section--dark,
.mx-section--primary,
.mx-section--gradient {
  color: var(--wp--preset--color--white);
}

.mx-section--dark    { background: var(--wp--preset--color--dark); }
.mx-section--primary { background: var(--wp--preset--color--primary); }
.mx-section--gradient {
  background: var(--wp--preset--gradient--modernx-deep);
}

/* Auf dunklen Flaechen muss alles mitziehen, sonst bleibt Text unlesbar. */
.mx-section--dark :is(h1, h2, h3, h4, h5, h6, p, li, figcaption),
.mx-section--primary :is(h1, h2, h3, h4, h5, h6, p, li, figcaption),
.mx-section--gradient :is(h1, h2, h3, h4, h5, h6, p, li, figcaption) {
  color: var(--wp--preset--color--white);
}

.mx-section--dark a:not(.wp-block-button__link):not(.mx-arrow),
.mx-section--primary a:not(.wp-block-button__link):not(.mx-arrow),
.mx-section--gradient a:not(.wp-block-button__link):not(.mx-arrow) {
  color: var(--wp--preset--color--white);
  text-decoration: underline;
}

/*
 * Formularbeschriftungen auf farbiger Flaeche. Im Original liegen sie als
 * schwebende Beschriftung im weissen Feld; hier stehen sie darueber und
 * brauchen deshalb die helle Schriftfarbe.
 */
.mx-section--dark :is(.mx-form__head :is(h2, h3, h4), .mx-field__hint),
.mx-section--primary :is(.mx-form__head :is(h2, h3, h4), .mx-field__hint),
.mx-section--gradient :is(.mx-form__head :is(h2, h3, h4), .mx-field__hint) {
  color: var(--wp--preset--color--white);
}

/* ------------------------------------------------------------------
   Fussbereich
   ------------------------------------------------------------------ */
/* Der Fussbereich der Originalseite liegt auf hellgrauer Flaeche. */
/* Im Original steht der Fussbereich auf Weiss und in Grau. */
.mx-footer {
  background: var(--wp--preset--color--white);
  color: var(--wp--preset--color--grey);
}

/* Kontaktlinks im Original dunkelblau; nur die Menuelinks sind grau. */
.mx-footer a {
  color: var(--wp--preset--color--dark);
  text-decoration: none;
}

.mx-footer__top p a:hover {
  color: inherit;
  text-decoration: underline;
}

/* Soziale Netze: 40-px-Kacheln in Petrol, wie in der Vorlage. */
.mx-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: 13.5px;
  margin: 18px 0 27px;
}

.mx-footer__social img {
  display: block;
  width: 40px;
  height: 40px;
}


.mx-footer__copyright {
  padding: 1rem 0;
  color: var(--wp--preset--color--grey);
}

/* pb-5 der Vorlage: unter 768 px bleiben 54 px frei. */
@media (max-width: 767.98px) {
  .mx-footer__copyright { padding-bottom: 4rem; }
}

/* ------------------------------------------------------------------
   Hinweisfeld fuer Inhalte, die in der Vorschau nicht aktiv sind
   ------------------------------------------------------------------ */
.mx-notice {
  border: 2px solid var(--wp--preset--color--border);
  border-radius: 30px;
  padding: 1rem;
  background: var(--wp--preset--color--light);
  color: var(--wp--preset--color--grey);
  font-size: var(--wp--preset--font-size--small);
}

.mx-notice strong {
  color: var(--wp--preset--color--dark);
}

.mx-field__hint {
  display: block;
  margin-top: 0.35rem;
  color: var(--wp--preset--color--grey);
  font-size: 0.8em;
}

/* Farbe erbt der Hinweis von seinem Abschnitt – auf farbiger Flaeche weiss. */
.mx-form__note p {
  margin: 0;
  color: inherit;
}

.mx-tile__logo {
  position: static;
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
}

.mx-form__head h2,
.mx-form__head h3,
.mx-form__head h4 {
  margin: 1.5rem 0 0.25rem;
  font-size: var(--wp--preset--font-size--medium);
}

/*
 * Etikett ueber einem Abschnitt: im Original klein, in Versalien und in der
 * Hausfarbe, ueber der eigentlichen Ueberschrift.
 */
/*
 * Das Etikett ist in der Vorlage ein gruener Kasten mit weisser Schrift in
 * 30 px, keine gesperrte Versalzeile.
 */
.mx-section-label {
  display: inline-block;
  margin-bottom: 0;
  padding: 14px 20px;
  background: var(--wp--preset--color--green);
  color: #ffffff;
  font-size: 30px;
  font-weight: 400;
}

@media (max-width: 991.98px) {
  .mx-section-label { font-size: 18px; }
}

/* Die Vorlage laesst unter dem Etikett 54 px frei. */
.wp-site-blocks .mx-section-label + * { margin-block-start: 3rem; }

/* Ein Anreisser bringt dahinter zusaetzlich seine eigenen 35 px mit. */
.wp-site-blocks .mx-section-label + .mx-lead {
  margin-block-start: calc(3rem + 35px);
}

@media (max-width: 991.98px) {
  .wp-site-blocks .mx-section-label + .mx-lead {
    margin-block-start: calc(3rem + 15px);
  }
}

@media (max-width: 767.98px) {
  .wp-site-blocks .mx-section-label + * { margin-block-start: 1.5rem; }
}

/* ------------------------------------------------------------------
   Symbolreihe der Startseite
   ------------------------------------------------------------------ */
.mx-feature-row .wp-block-column {
  text-align: center;
}

.mx-feature-row .wp-block-image {
  margin-bottom: 0.5rem;
}

.mx-feature-row .wp-block-image img {
  margin-inline: auto;
}

.mx-feature-row ul {
  text-align: left;
  color: var(--wp--preset--color--grey);
}

/* ------------------------------------------------------------------
   Anreisser mit gruener Schraege
   ------------------------------------------------------------------ */
/*
 * Vor dem einleitenden Absatz steht im Original eine gruene Schraege. Sie
 * kommt auf 144 Absaetzen quer durch die Seite vor.
 */
.mx-lead {
  position: relative;
  padding-left: 83px;
  min-height: 66px;
  margin-top: 35px;
  color: var(--wp--preset--color--grey);
}

/*
 * Die Schraege ist im Original tuerkis und nur auf farbigen Flaechen gruen.
 * Die Form kommt als Maske, damit die Farbe aus einer Variablen kommt.
 */
.mx-lead::before,
.mx-schraege::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 49px;
  height: 59px;
  background: var(--mx-slash-color, var(--wp--preset--color--secondary));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48.839' height='58.941' viewBox='0 0 48.839 58.941'%3E%3Cpath d='M18.692,58.941H0L30.147,0H48.839L18.692,58.94Z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48.839' height='58.941' viewBox='0 0 48.839 58.941'%3E%3Cpath d='M18.692,58.941H0L30.147,0H48.839L18.692,58.94Z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Auf Farbflaechen und in der Parallax-Karte ist sie gruen. */
.mx-section--dark .mx-lead,
.mx-section--primary .mx-lead,
.mx-section--gradient .mx-lead,
.mx-parallax .mx-lead {
  --mx-slash-color: var(--wp--preset--color--green);
}

/* Auf farbigen Flaechen erbt der Anreisser die Schriftfarbe des Abschnitts. */
.mx-section--dark .mx-lead,
.mx-section--primary .mx-lead,
.mx-section--gradient .mx-lead,
.mx-parallax .mx-lead {
  color: inherit;
}

/*
 * Steht ueber einem Abschnitt kein Anreisser, ruecken wir die Ueberschrift an
 * dessen Platz: gleicher Einzug, gleiche Schraege. Groesse und Farbe bleiben
 * die einer Ueberschrift. Doppelte Klasse, weil die globalen Stile von
 * WordPress nach dem Theme geladen werden und einfache Selektoren sonst
 * gleichauf liegen.
 */
.wp-site-blocks .wp-block-heading.mx-schraege {
  position: relative;
  padding-left: 83px;
  min-height: 66px;
}

/* Neben einer einzelnen Zeile steht die Schraege mittig, nicht oben. */
.wp-block-heading.mx-schraege::before {
  top: 50%;
  transform: translateY(-50%);
}

@media (max-width: 991.98px) {
  .mx-lead { padding-left: 0; margin-top: 15px; min-height: 0; }
  .mx-lead::before,
  .mx-schraege::before { display: none; }
  .wp-site-blocks .wp-block-heading.mx-schraege { padding-left: 0; min-height: 0; }
}

/* ------------------------------------------------------------------
   Diagonale Zierform an den Abschnittsecken
   ------------------------------------------------------------------ */
.mx-deco--after {
  position: relative;
  overflow: hidden;
}

/* .icon-before der Vorlage rueckt den Inhalt um 15 % ein. */
.mx-deco--before {
  position: relative;
  overflow: hidden;
  padding-left: 15%;
}

.mx-deco--before::before,
.mx-deco--after::after {
  content: "";
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
  z-index: 1;
}

.mx-deco--before::before {
  left: -2px;
  top: -2px;
  width: 10%;
  max-width: 200px;
  aspect-ratio: 200 / 417;
  background-image: url("assets/img/icon-before.svg");
  background-position: left top;
}

.mx-deco--after::after {
  right: -2px;
  bottom: -8px;
  width: 6%;
  max-width: 158px;
  aspect-ratio: 158 / 329;
  background-image: url("assets/img/icon-after.svg");
  background-position: right bottom;
}

/*
 * Auf schmalen Geraeten nimmt die Vorlage die Zierform aus der absoluten Lage
 * und stellt sie mit 20 Prozent Breite in den Fluss - sie verschwindet nicht.
 */
@media (max-width: 767.98px) {
  .mx-deco--before { padding-top: 0 !important; padding-left: 0; }
  .mx-deco--before::before {
    position: relative;
    display: inline-block;
    width: 20%;
    max-width: none;
    left: auto;
    top: auto;
  }
  .mx-deco--after { padding-bottom: 0 !important; }
  .mx-deco--after::after {
    position: relative;
    display: block;
    width: 20%;
    max-width: none;
    right: auto;
    bottom: auto;
    margin-left: auto;
  }

  /*
   * Am Aufmacher der Startseite blendet die Vorlage die Zierform ganz aus -
   * nachgemessen bei 390 px: dort "display: none", auf den Beratungsfeldern
   * dagegen sichtbar. Im Fluss haenge sie sonst 151 px leeren Raum an das
   * Band, weil sie dessen Hoehe mitbestimmt.
   */
  .mx-deco--after:has(.mx-hero)::after { display: none; }
}

/* ------------------------------------------------------------------
   Symbolreihe, die sich aufklappt
   ------------------------------------------------------------------ */
.mx-feature-row {
  display: flex;
  align-items: stretch;
  gap: 0;
  /* Die Vorlage deckelt die Reihe, damit ein langer Text nicht ausbricht. */
  max-height: 600px;
  /* Den Abstand bringt der umgebende Rahmen mit (mx-sp-a-extra-small). */
  margin-block: 0;
}

.mx-feature {
  /* Alle Spalten teilen sich den Platz gleich; die offene bekommt Faktor 10. */
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: stretch;
  position: relative;
  background: var(--wp--preset--color--white);
  padding: 20px;
  transition: all .5s ease;
  overflow: hidden;
}

.mx-feature__head { flex: 1; min-width: 250px; }

.mx-feature-row.is-ready .mx-feature { cursor: pointer; }

.mx-feature-row.is-ready .mx-feature:hover,
.mx-feature-row.is-ready .mx-feature:focus-within {
  box-shadow: -2px -2px 15px rgba(0, 132, 167, .55);
  position: relative;
  z-index: 1;
}

.mx-feature__head { text-align: center; }

.mx-feature__head .wp-block-image { margin: 0 0 .25rem; }
.mx-feature__head .wp-block-image img { margin-inline: auto; }

.mx-feature__arrow {
  display: block;
  text-align: right;
  color: var(--wp--preset--color--green);
  font-size: 1.35rem;
  line-height: 1;
}

.mx-feature__title {
  /* Die Vorlage setzt die Titel als h5 - 1.333rem, also 24 px. */
  font-size: var(--wp--preset--font-size--large);
  font-weight: 700;
  line-height: 1.2;
  color: var(--wp--preset--color--dark);
  margin: .5rem 0;
}

@media (max-width: 1199.98px) {
  .mx-feature__title { font-size: calc(1.2583rem + .11205vw); }
}

@media (max-width: 575.98px) {
  .mx-feature__title { font-size: 20px; }
}

.mx-feature__body { color: var(--wp--preset--color--grey); }

.mx-feature__body ul {
  text-align: left;
  padding-left: 1.1rem;
}

/* Wie in der Vorlage (p und ul haben dort margin: 0 0 1rem): der Abstand
   haengt unter dem Element. Ohne das legt der Browser 1 em darueber. */
.mx-feature__body :is(p, ul, ol) {
  margin-top: 0;
  margin-bottom: 1rem;
}

/* Solange das Skript laeuft, ist der Text eingeklappt. */
.mx-feature-row.is-ready .mx-feature__body {
  flex: 0;
  display: none;
  opacity: 0;
  transform: scale(.9);
  padding: .75rem;
  transition: all .25s .1s ease-out;
}

.mx-feature-row.is-ready .mx-feature.is-open {
  /* Wie die Vorlage: "flex: 10" heisst 10 1 0% - eine Basis in Prozent.
     Mit 0px faellt die Kachel gestapelt auf ihr Polster zusammen. */
  flex: 10;
  max-width: 750px;
  box-shadow: -2px -2px 15px rgba(0, 132, 167, .55);
  display: flex;
  gap: 1.5rem;
  align-items: center;
}

.mx-feature-row.is-ready .mx-feature.is-open .mx-feature__head { flex: 1; min-width: 250px; }

.mx-feature-row.is-ready .mx-feature.is-open .mx-feature__body {
  display: block;
  flex: 4;
  opacity: 1;
  transform: scale(1);
}

/* Die geschlossenen Nachbarn treten zurueck, statt ganz zu verschwinden. */
.mx-feature-row.is-ready .mx-feature.is-narrow {
  box-shadow: -2px -2px 15px rgba(0, 132, 167, .35);
}

.mx-feature-row.is-ready .mx-feature.is-narrow img { max-height: 300px; }
.mx-feature-row.is-ready .mx-feature.is-narrow .mx-feature__arrow { visibility: hidden; }

@media (max-width: 991.98px) {
  .mx-feature-row { flex-direction: column; max-height: none; }

  /*
   * Gestapelt darf jede Kachel ihre eigene Hoehe behalten. Mit dem "flex: 1"
   * der Zeilenansicht faellt sie in der Spaltenrichtung auf null zusammen -
   * die Reihe mass dadurch 160 statt 1476 px und schnitt allen Inhalt ab.
   */
  .mx-feature {
    flex: 0 0 auto;
    flex-direction: column;
  }
  .mx-feature-row.is-ready .mx-feature.is-open { max-width: none; }
  .mx-feature-row.is-ready .mx-feature.is-narrow img { max-height: none; }
  .mx-feature-row.is-ready .mx-feature.is-open .mx-feature__arrow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mx-feature,
  .mx-feature-row.is-ready .mx-feature__body { transition: none; }
}

/* ------------------------------------------------------------------
   Schwebende Kontaktleiste und Knopf nach oben
   ------------------------------------------------------------------ */
/*
 * Der Kasten steht im Original unterhalb des Fensters und faehrt in 0,5 s
 * hoch. Der orange Reiter wandert dabei mit 1 s Verzoegerung von der Mitte
 * an den linken Rand, wird dunkel und flacher.
 */
.mx-cta {
  position: fixed;
  left: 50%;
  bottom: 0;
  width: 100%;
  max-width: 680px;
  z-index: 1000;
  padding: 40px;
  border-radius: 20px 20px 0 0;
  background: var(--wp--preset--color--dark);
  color: #ffffff;
  transform: translate(-50%, 100%);
  transition: transform .5s ease;
}

.mx-cta.is-open { transform: translate(-50%, 0); }

.mx-cta__toggle {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 850;
  border: 0;
  border-radius: 20px;
  background: var(--wp--preset--color--orange);
  color: #ffffff;
  font: inherit;
  font-weight: 600;
  padding: 15px 20px 60px;
  white-space: nowrap;
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: background-color .1s ease, transform .5s ease 1s,
              left .5s ease 1s, padding .5s ease;
}

.mx-cta__toggle:hover { background: var(--wp--preset--color--dark); }

.mx-cta.is-open .mx-cta__toggle {
  left: 0;
  transform: translate(0, -50%);
  padding: 15px 20px 25px;
  background: var(--wp--preset--color--dark);
}

.mx-cta__body {
  max-height: 70vh;
  overflow-y: auto;
}

.mx-cta__body :is(p, a) { color: inherit; }

@media (max-width: 991.98px) {
  .mx-cta__toggle { transition: none; }
  .mx-cta.is-open .mx-cta__toggle {
    width: 100%;
    text-align: center;
    padding: 25px 20px;
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mx-cta, .mx-cta__toggle { transition: none; }
}

/* Masse wie im Original: 50 x 52, ohne runde Ecken. */
.mx-to-top {
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 500;
  width: 50px;
  height: 52px;
  border: 0;
  border-radius: 0;
  background: var(--wp--preset--color--orange);
  color: #ffffff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--mx-transition), visibility var(--mx-transition);
}

.mx-to-top.is-visible { opacity: 1; visibility: visible; }

/* Der Pfeil wippt beim Ueberfahren nach oben, wie in der Vorlage. */
.mx-to-top__icon {
  display: block;
  transition: transform .3s ease;
}

.mx-to-top:hover .mx-to-top__icon { transform: translateY(-5px); }

/* Unterhalb von 992 px blendet das Original den Knopf ganz aus. */
@media (max-width: 991.98px) {
  .mx-to-top { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mx-to-top__icon { transition: none; }
}

@media print {
  .mx-cta, .mx-to-top { display: none; }
}

.mx-cta__head {
  font-size: var(--wp--preset--font-size--large);
  font-weight: 400;
  line-height: 1.2;
  color: #ffffff;
  margin-top: 0;
}

/* Die Kontaktzeilen stehen in 20 px und brechen nicht um; Knoepfe bleiben. */
.mx-cta__body a:not(.wp-element-button) {
  font-size: 20px;
  white-space: nowrap;
}

.mx-cta__actions,
.mx-cta__contact {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.5rem;
}

.mx-cta__actions a {
  background: var(--wp--preset--color--orange);
  border-color: var(--wp--preset--color--orange);
  color: #ffffff;
  text-decoration: none;
}

.mx-cta__actions a:hover {
  background: #f5a226;
  border-color: #f49d1a;
  color: #000000;
}

.mx-cta__body p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------
   Nachrichtenkacheln: der Anrisskasten schiebt sich ueber das Bild
   ------------------------------------------------------------------ */
.mx-news-card > li,
.mx-news-card.wp-block-post {
  position: relative;
}

.mx-news-card .wp-block-post-featured-image {
  margin-bottom: 0;
}

.mx-news-card .wp-block-post-terms {
  margin-top: -50px;
  margin-left: auto;
  width: 75%;
  background: var(--wp--preset--color--white);
  padding: 1.25rem 1.25rem 0;
  position: relative;
  z-index: 1;
}

.mx-news-card .wp-block-post-title,
.mx-news-card .mx-byline,
.mx-news-card .wp-block-post-excerpt {
  margin-left: auto;
  width: 75%;
  background: var(--wp--preset--color--white);
  padding-inline: 1.25rem;
  position: relative;
  z-index: 1;
}

.mx-news-card .wp-block-post-excerpt { padding-bottom: 1.25rem; }

/* Ohne eigene Angabe setzt der Browser 32 px ueber den Titel. */
.mx-news-card .wp-block-post-title {
  /*
   * Die Vorlage setzt den Kacheltitel als h4. Die Groesse stimmte, die
   * Strichstaerke nicht: gemessen sind es 400, hier standen 600.
   */
  font-size: 1.556rem;
  line-height: 1.2;
  font-weight: 400;
  margin-block: 5px 20px;
}

@media (max-width: 1199.98px) {
  .mx-news-card .wp-block-post-title { font-size: calc(1.2806rem + .4131vw); }
}

@media (max-width: 575.98px) {
  .mx-news-card .wp-block-post-title { font-size: 21px; }
}

.mx-news-cat { color: var(--wp--preset--color--secondary); }

@media (max-width: 991.98px) {
  .mx-news-card .wp-block-post-terms { margin-top: 0; }
  .mx-news-card :is(.wp-block-post-terms, .wp-block-post-title, .mx-byline, .wp-block-post-excerpt) {
    width: 100%;
  }
}

/* ------------------------------------------------------------------
   Aufmacher einer Nachrichtenliste
   ------------------------------------------------------------------ */
/*
 * Ein Beitrag ueber die volle Breite: Beitragsbild als Grund, darauf eine
 * dunkle Karte mit Titel, Autorenzeile und Verweis – wie im Magazin.
 */
/*
 * Der Schieber der Vorlage laeuft mit height: '80vh'; darunter bleiben 27 px
 * fuer die Punktreihe frei, bevor die Liste anfaengt.
 */
.mx-news-hero__cover {
  min-height: 80vh;
  padding: 0;
  margin-block: 0 27px;
}

/* Die Karte haengt 75 px ueber der Unterkante, in der Inhaltsspalte. */
.mx-news-hero__cover .wp-block-cover__inner-container {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 75px;
  width: 100%;
  max-width: var(--wp--style--global--content-size);
  margin-inline: auto;
  padding: 0;
}

.mx-news-hero__card {
  max-width: 600px;
  margin-left: 0 !important;
  margin-right: auto !important;
  padding: 35px;
  border-bottom-right-radius: 30px;
  background: var(--wp--preset--color--dark);
  color: #ffffff;
}

.mx-news-hero__card :is(h1, h2, h3, .mx-byline, .mx-byline__text time) {
  color: #ffffff;
}

.mx-news-hero__card .wp-block-post-title a {
  color: #ffffff;
  text-decoration: none;
}

.mx-news-hero__card .wp-block-post-title a:hover { text-decoration: underline; }

.mx-news-hero__card .wp-block-post-title { margin-block: 0 18px; }

.mx-news-hero__card .wp-block-read-more {
  display: inline-block;
  margin-top: 5px;
  color: var(--wp--preset--color--green);
  font-weight: 700;
  text-decoration: none;
}

.mx-news-hero__card .wp-block-read-more::after {
  content: " \2192";
}

/* ------------------------------------------------------------------
   Nachrichtenliste als Zeile: Text links, Bild rechts
   ------------------------------------------------------------------ */
/*
 * Als Flexspalte, damit die 54 px oben und unten an jeder Zeile nicht
 * zusammenfallen - die Vorlage kommt so auf 108 px zwischen zwei Zeilen.
 * Eine Trennlinie hat sie nicht.
 */
.mx-news-row {
  display: flex;
  flex-direction: column;
}

.mx-news-row > li,
.mx-news-row.wp-block-post,
.mx-news-row > li:first-child,
.mx-news-row > li:last-child {
  margin-block: 54px;
  border-bottom: 0;
  padding-bottom: 0;
}

.mx-news-row .wp-block-columns {
  gap: 27px;
  margin-block: 0;
}

/*
 * Die Vorlage setzt die Zeile aus einem leeren Zweizwoelftel, dann 5/12 Text
 * und 5/12 Bild. Der Einzug ist genau ein Sechstel der Rasterbreite.
 */
@media (min-width: 992px) {
  .mx-news-row .wp-block-columns { padding-left: calc((100% + 27px) / 6); }
  .mx-news-row .wp-block-column {
    flex-basis: calc((100% - 27px) / 2);
    flex-grow: 0;
  }
}

/* Unter 992 px stapelt die Vorlage; das Bild rutscht unter den Text. */
@media (max-width: 991.98px) {
  .mx-news-row .wp-block-columns { flex-wrap: wrap; }
  .mx-news-row .wp-block-column { flex-basis: 100%; }
  .mx-news-row .wp-block-column:first-child { margin-bottom: 27px; }
}

.mx-news-row .wp-block-post-title {
  /* Die Vorlage setzt den Zeilentitel als h4 - also 1.556rem = 28 px. */
  font-size: 1.556rem;
  line-height: 1.2;
  margin-block: 0 20px;
}

@media (max-width: 1199.98px) {
  .mx-news-row .wp-block-post-title { font-size: calc(1.2806rem + .4131vw); }
}

@media (max-width: 575.98px) {
  .mx-news-row .wp-block-post-title { font-size: 21px; }
}

.mx-news-row .wp-block-post-title a {
  color: var(--wp--preset--color--dark);
  text-decoration: none;
  font-weight: 600;
}

.mx-news-row .wp-block-post-title a:hover { color: var(--wp--preset--color--primary); }

.mx-news-row .mx-byline { margin-block: 0; }

.mx-news-row .wp-block-post-excerpt {
  color: var(--wp--preset--color--grey);
  margin-block: 0;
}

.wp-block-read-more { line-height: 1.333; }

.mx-news-row .wp-block-read-more {
  display: inline-block;
  margin-block-start: 3px;
  color: var(--wp--preset--color--green);
  font-weight: 700;
  text-decoration: none;
}

.mx-news-row .wp-block-read-more::after { content: " \2192"; }

/* Die Vorlage schneidet jedes Listenbild auf 523 x 336 zu. */
.mx-news-row .wp-block-post-featured-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 523 / 336;
  object-fit: cover;
}

/*
 * Ab 1400 px waechst das Raster auf 1293 px: die Kennzahl auf den Kacheln
 * steht dann in 45 px, und die Menuekarte folgt der Textspalte.
 */
@media (min-width: 1400px) {
  .mx-tile__front { font-size: 45px; }
  .mx-nav__panel { width: min(1293px, 100vw - 36px); }
}

/* ------------------------------------------------------------------
   Hauptnavigation mit Megamenue
   ------------------------------------------------------------------ */
.mx-nav__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
 * Die Vorlage haelt die Menuepunkte nicht ueber eine Luecke auseinander,
 * sondern ueber 9 px Polster im Listenpunkt - zwischen zwei Woertern stehen
 * also 18 px. Der Unterstrich sitzt am Link und bleibt dadurch genau so breit
 * wie das Wort. Mit einer Luecke von 27 px passte die Leiste ab dem achten
 * Punkt (OnePager) bei 1200 px Fensterbreite nicht mehr in eine Zeile.
 */
.mx-nav__item { padding-inline: 9px; }

/*
 * Zwischen 1200 und 1400 px ist das Raster 1113 px breit. Abzueglich Zeichen
 * (208 px) und Zwischenraum (18 px) bleiben 887 px fuer das Menue; die acht
 * Punkte brauchen mit 9 px Polster aber 904 px und der letzte rutschte in die
 * zweite Zeile. Mit 6 px sind es 856 px. Ab 1400 px waechst das Raster auf
 * 1293 px, dort gilt wieder das Mass der Vorlage.
 */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .mx-nav__item { padding-inline: 6px; }
}

.mx-nav__link {
  position: relative;
  display: inline-block;
  /* 26 px oben und unten, wie in der Vorlage. */
  padding: 26px 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 700;
  color: var(--wp--preset--color--dark);
  text-decoration: none;
  cursor: pointer;
}

/*
 * Der Unterstrich waechst im Original aus der Mitte nach beiden Seiten – in
 * 0,3 s ueber Breite und linke Kante, nicht als harter Umschlag.
 */
.mx-nav__link::after {
  content: "";
  display: block;
  position: absolute;
  bottom: -2px;
  left: 50%;
  height: 5px;
  width: 0;
  background: transparent;
  transition: width .3s ease, left .3s ease;
}

.mx-nav__item:hover > .mx-nav__link::after,
.mx-nav__item.is-current > .mx-nav__link::after,
.mx-nav__item.is-open > .mx-nav__link::after {
  left: 0;
  width: 100%;
  background: var(--wp--preset--color--dark);
}

@media (prefers-reduced-motion: reduce) {
  .mx-nav__link::after { transition: none; }
}

/*
 * Das Megamenue liegt ueber die volle Fensterbreite unter der Kopfleiste,
 * genau wie im Original.
 */
/*
 * Das Untermenue ist in der Vorlage eine eingerueckte weisse Karte, keine
 * Flaeche ueber die ganze Fensterbreite: Breite wie der Inhalt, 23,4 px
 * Polster, Schlagschatten nach unten.
 */
.mx-nav__panel {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: min(1113px, 100vw - 36px);
  top: 100%;
  padding: 23.4px;
  background: var(--wp--preset--color--white);
  box-shadow: 0 4.5px 22.5px rgba(0, 0, 0, .25);
  z-index: 900;
}

.mx-nav__panel[hidden] { display: none; }

.mx-nav__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 27px;
  margin-inline: 0;
  padding: 0;
}

.mx-nav__coltitle {
  display: flex;
  align-items: flex-end;
  /* Gleiche Hoehe fuer alle drei Spaltenkoepfe, auch bei einer Zeile. */
  min-height: 69px;
  padding: 4.5px 18px;
  margin: 0 0 18px;
  color: var(--wp--preset--color--primary);
  font-size: 20px;
  font-weight: 700;
}

.mx-nav__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mx-nav__col li + li { border-top: 1px solid var(--wp--preset--color--border); }

.mx-nav__col li { padding: 4.5px 18px; }

.mx-nav__col a {
  display: block;
  padding: 2.7px 0 9px;
  color: var(--wp--preset--color--green);
  text-decoration: none;
}

.mx-nav__col a:hover { color: var(--wp--preset--color--dark); }

.mx-nav__burger { display: none; }

/* Die Beschriftung unter dem Symbol steht erst im Klappmenue-Bereich. */
.mx-nav__burgerlabel {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/*
 * Die Vorlage schaltet erst unter 1200 px auf das Menue um
 * (navbar-expand-xl), nicht schon unter 992 px.
 */
@media (max-width: 1199.98px) {
  .mx-nav__burger {
    display: block;
    width: 44px;
    height: 44px;
    border: 0;
    background: none;
    cursor: pointer;
    position: relative;
  }

  .mx-nav__burgerlabel {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
    display: block;
    text-transform: uppercase;
    font-weight: 600;
    font-size: .61111rem;
    color: #212529;
  }
  /*
   * Die drei Balken drehen sich im Original in 0,5 s zum Kreuz: der obere
   * um 135 Grad, der untere um -135, der mittlere schrumpft auf null.
   */
  .mx-nav__burger span:first-child,
  .mx-nav__burger span:first-child::before,
  .mx-nav__burger span:first-child::after {
    content: "";
    position: absolute;
    left: 10px;
    width: 24px;
    height: 2px;
    border-radius: 3px;
    background: var(--wp--preset--color--dark);
    transition: transform .5s ease;
  }
  .mx-nav__burger span:first-child { top: 21px; }
  .mx-nav__burger span:first-child::before { top: -7px; left: 0; }
  .mx-nav__burger span:first-child::after { top: 7px; left: 0; }

  .mx-nav.is-open .mx-nav__burger span:first-child { transform: scale(0); }
  .mx-nav.is-open .mx-nav__burger span:first-child::before {
    transform: translateY(7px) rotate(135deg);
  }
  .mx-nav.is-open .mx-nav__burger span:first-child::after {
    transform: translateY(-7px) rotate(-135deg);
  }

  /*
   * Das Menue der Vorlage ist eine eigene Seite ueber dem Fenster: es faehrt
   * in 0,5 s von Hoehe null auf volle Hoehe, liegt fest ueber allem und hat
   * 100 px Luft oben und unten.
   */
  .mx-nav__list {
    display: flex;
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--wp--preset--color--white);
    padding: 0 1rem;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    z-index: 1030;
    transition: height .5s ease, visibility 0s .5s;
  }
  .mx-nav.is-open .mx-nav__list {
    height: 100vh;
    overflow-y: auto;
    padding: 100px 1rem;
    visibility: visible;
    transition: height .5s ease, visibility 0s;
  }

  /* Der Knopf bleibt ueber dem geoeffneten Menue erreichbar. */
  .mx-nav.is-open .mx-nav__burger { position: fixed; top: 5px; right: 5px; z-index: 1040; }

  /* Im Klappmenue steht jeder Punkt in einer eigenen Zeile, das seitliche
     Polster der Kopfleiste faellt dort weg. */
  .mx-nav__item { padding-inline: 0; }

  /* Beschriftungen wie in der Vorlage. */
  .mx-nav__list > .mx-nav__item > .mx-nav__link {
    padding: 1rem 0;
    margin: 0 1rem;
    border-bottom: 2px solid var(--wp--preset--color--border);
    width: calc(100% - 2rem);
    text-align: left;
    font-weight: 700;
    color: var(--wp--preset--color--primary);
  }

  .mx-nav__panel a {
    border-bottom: 1px solid var(--wp--preset--color--border);
    padding: .75rem 0;
    font-weight: 400;
  }
  .mx-nav__link { padding: .85rem 0; }
  .mx-nav__panel { position: static; box-shadow: none; }
  .mx-nav__cols { grid-template-columns: 1fr; padding: 0 0 1rem; gap: 1rem; }
}

/* ------------------------------------------------------------------
   Pfeilverweise ("mehr erfahren")
   ------------------------------------------------------------------ */
/*
 * Im Original gruen, fett und mit einem Pfeil dahinter. 155 Stueck auf
 * 42 Seiten – ohne die Auszeichnung sehen sie wie Fliesstextverweise aus.
 */
a.mx-arrow,
.mx-arrow {
  color: var(--wp--preset--color--green);
  font-weight: 700;
  text-decoration: none;
}

.mx-arrow::after {
  content: " \2192";
  display: inline-block;
  /* Die Vorlage bewegt den Pfeil beim Ueberfahren nicht. */
  margin-left: .4rem;
}

.mx-section--dark a.mx-arrow,
.mx-section--primary a.mx-arrow,
.mx-section--gradient a.mx-arrow,
.mx-parallax a.mx-arrow {
  color: var(--wp--preset--color--green);
  text-decoration: none;
}

/* ------------------------------------------------------------------
   Weisse Schraege hinter einer Spalte
   ------------------------------------------------------------------ */
/*
 * Im CIOspirit-Abschnitt der Startseite schneidet eine weisse, geneigte
 * Flaeche in den Farbverlauf. Der Text darauf steht dunkel.
 */
.wp-block-column.mx-slash {
  position: relative;
  color: var(--wp--preset--color--dark);
}

/* Der Abstand nach oben gilt im Original nur bis 991,98 px. */
@media (max-width: 991.98px) {
  .wp-block-column.mx-slash { padding-top: 20px; }
}

/*
 * Fuer breite Fenster gelten 50vw und right: 0 – die Werte 120vw/-10% stehen
 * im Original in einer Media Query fuer schmale Geraete.
 */
.wp-block-column.mx-slash::before {
  content: "";
  position: absolute;
  width: 50vw;
  height: 102%;
  top: -1%;
  /* Halbe Rinne nach aussen, damit die Kante wie im Original steht. */
  right: -13.5px;
  background: var(--wp--preset--color--white);
  transform: skewX(-20deg);
}

@media (max-width: 991.98px) {
  .wp-block-column.mx-slash::before {
    width: 120vw;
    right: -10%;
  }
}

.wp-block-column.mx-slash > * {
  position: relative;
  z-index: 1;
}

/* Die Farbregel des Abschnitts darf hier nicht auf Weiss stellen. */
.mx-section--dark .mx-slash :is(h1, h2, h3, h4, h5, h6, p, li),
.mx-section--primary .mx-slash :is(h1, h2, h3, h4, h5, h6, p, li),
.mx-section--gradient .mx-slash :is(h1, h2, h3, h4, h5, h6, p, li) {
  color: var(--wp--preset--color--dark);
}

.mx-slash h2 { font-weight: 400; }

/*
 * Im Original bleibt die Schraege auch auf schmalen Geraeten stehen – nur
 * breiter und weiter nach rechts. Die Schrift bleibt dunkel darauf.
 */


/* ------------------------------------------------------------------
   Teaserband mit abgedunkeltem Hintergrundbild
   ------------------------------------------------------------------ */
/*
 * Das Band zeigt sein Bild in der Rasterbreite und im eigenen Seitenverhaeltnis
 * (das Markup traegt dazu aspect-ratio). Der Textkasten steht rechts darauf.
 * Unten laesst die Vorlage 40 px frei.
 */
.mx-band {
  padding-block: 0;
  min-height: 0;
  /* Das Seitenverhaeltnis gilt der Bildflaeche. Die 40 px darunter sind ein
     Aussenabstand, kein Polster: in der Vorlage reicht das Bild nicht in
     diesen Streifen hinein. (Ein content-box hier schlug ueber die
     Vererbung von box-sizing auf den Textkasten durch und machte ihn
     680 statt 550 px breit.) */
  margin-bottom: 40px;
}

/* Der Textkasten steht rechts auf einer zu 80 Prozent weissen Flaeche. */
.mx-band .wp-block-cover__inner-container {
  width: 100%;
  max-width: 550px;
  margin-left: auto;
  margin-right: 0;
  padding: 20px 65px;
  background: rgba(255, 255, 255, .8);
  box-sizing: border-box;
}

/* Auf der hellen Flaeche steht der Text dunkel, nicht weiss. */
.mx-band .wp-block-cover__inner-container :is(h1, h2, h3, h4, h5, h6, p, li) {
  color: var(--wp--preset--color--dark);
}

.mx-band .wp-block-cover__image-background {
  object-position: left;
}

/* ------------------------------------------------------------------
   Knopfvarianten des Originals
   ------------------------------------------------------------------ */
/*
 * 156 von 200 Knoepfen sind im Original gruen, 13 orange. Blau ist nur die
 * Rueckfallfarbe fuer die wenigen ohne eigene Klasse.
 */
.wp-block-button.is-style-success .wp-block-button__link {
  background-color: var(--wp--preset--color--green);
  border-color: var(--wp--preset--color--green);
  color: #ffffff;
}

.wp-block-button.is-style-success .wp-block-button__link:hover {
  background-color: #87c14b;
  border-color: #80bd40;
  color: #000000;
}

.wp-block-button.is-style-warning .wp-block-button__link {
  background-color: var(--wp--preset--color--orange);
  border-color: var(--wp--preset--color--orange);
  color: #ffffff;
}

.wp-block-button.is-style-warning .wp-block-button__link:hover {
  background-color: #f5a226;
  border-color: #f49d1a;
  color: #000000;
}


/*
 * Knoepfe mitten im Fliesstext.
 *
 * Die Vorlage haengt btn btn-warning an einzelne Verweise innerhalb eines
 * Absatzes. Als Block laesst sich das nicht abbilden, deshalb bekommt der
 * Verweis hier dasselbe Aussehen wie eine Schaltflaeche.
 */
a.mx-btn {
  display: inline-block;
  padding: 9.54px 45px;
  border: 1px solid transparent;
  border-radius: 48px;
  color: #ffffff;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  transition: background-color var(--mx-transition), border-color var(--mx-transition);
}

a.mx-btn--warning { background-color: var(--wp--preset--color--orange); border-color: var(--wp--preset--color--orange); }
a.mx-btn--warning:hover { background-color: #f5a226; border-color: #f49d1a; color: #000000; }
a.mx-btn--success { background-color: var(--wp--preset--color--green); border-color: var(--wp--preset--color--green); }
a.mx-btn--success:hover { background-color: #87c14b; border-color: #80bd40; color: #000000; }
a.mx-btn--lightning { background-color: var(--wp--preset--color--green); border-color: var(--wp--preset--color--green); }
a.mx-btn--outline-dark {
  background-color: transparent;
  border-color: var(--wp--preset--color--dark);
  color: var(--wp--preset--color--dark);
}
a.mx-btn--outline-dark:hover { background-color: var(--wp--preset--color--dark); color: #ffffff; }

/* Auf farbigen Abschnitten bleibt der Knopf weiss beschriftet. */
.mx-section--dark a.mx-btn,
.mx-section--primary a.mx-btn,
.mx-section--gradient a.mx-btn { color: #ffffff; }

.mx-section--dark a.mx-btn:hover,
.mx-section--primary a.mx-btn:hover,
.mx-section--gradient a.mx-btn:hover { color: #000000; }

/* ------------------------------------------------------------------
   Ausrichtung der Rasterzeilen
   ------------------------------------------------------------------ */
/*
 * Das Original richtet 130 Rasterzeilen senkrecht aus – die meisten unten
 * (align-items-end). Ohne diese Regeln stehen alle Spalten oben.
 */
/* Core setzt align-items mit !important; ohne Gegengewicht bleibt es wirkungslos. */
/*
 * Spalten stapeln wie in der Vorlage.
 *
 * WordPress bricht Spaltenbloecke bei 782 px um, Bootstrap bei col-lg erst
 * unter 992 px. Ohne diese Regel stehen Bild und Text zwischen 782 und 991 px
 * nebeneinander, im Original bereits untereinander.
 */
@media (max-width: 991.98px) {
  .wp-block-columns:not(.is-not-stacked-on-mobile) {
    flex-wrap: wrap !important;
  }

  .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
    flex-basis: 100% !important;
  }
}

/* Blocksatz der Vorlage (text-justify). */
.mx-justify { text-align: justify; }

/*
 * Absaetze, die in der Vorlage wie eine Zwischenueberschrift gesetzt sind
 * (p.h2 bis p.h5), folgen deren Zeilenhoehe und Staffelung.
 */
p.mx-hx {
  line-height: 1.2;
  margin-bottom: 1rem;
}

@media (max-width: 1199.98px) {
  p.has-xx-large-font-size.mx-hx { font-size: calc(1.3472rem + 1.3122vw) !important; }
  p.has-x-large-font-size.mx-hx  { font-size: calc(1.3028rem + .7128vw) !important; }
  p.has-h4-font-size.mx-hx       { font-size: calc(1.2806rem + .4131vw) !important; }
  p.has-large-font-size.mx-hx    { font-size: calc(1.2583rem + .11205vw) !important; }
}

@media (max-width: 575.98px) {
  p.has-xx-large-font-size.mx-hx { font-size: 24px !important; }
  p.has-x-large-font-size.mx-hx  { font-size: 23px !important; }
  p.has-h4-font-size.mx-hx       { font-size: 21px !important; }
  p.has-large-font-size.mx-hx    { font-size: 20px !important; }
}

/* Die Display-Stufen der Vorlage stehen enger und wachsen mit dem Fenster. */
.has-display-font-size,
.has-display-6-font-size { line-height: 1.2; }

@media (max-width: 1199.98px) {
  .has-display-font-size   { font-size: calc(1.525rem + 3.7125vw) !important; }
  .has-display-6-font-size { font-size: calc(1.375rem + 1.6875vw) !important; }
}

/* Mittig gesetzte Abbildungen der Vorlage (ce-center). */
.wp-block-image.mx-img--center img {
  display: block;
  margin-inline: auto;
}

/*
 * Vier und mehr gleich breite Spalten laufen in der Vorlage als Raster zu
 * dritt um; der Spaltenblock von WordPress haelt sonst alles in einer Zeile.
 */
/*
 * Kartenband auf /kontakt und /impressum. Die Vorlage haelt dafuer 500 px
 * ueber die volle Breite frei; die Karte selbst laedt dort ohne Einwilligung
 * nicht, das Band bleibt also auch im Original leer.
 */
.mx-map {
  height: 500px;
  background: var(--wp--preset--color--light);
  /* Das Band laeuft bis an den Fensterrand, nicht nur bis zum Raster. */
  max-width: none;
  width: auto;
  /* WordPress zentriert Kinder eines eingeschraenkten Behaelters mit
     "margin: auto !important" - dagegen hilft nur dasselbe Gewicht. */
  margin-left: calc(-1 * var(--wp--style--root--padding-left, 1rem)) !important;
  margin-right: calc(-1 * var(--wp--style--root--padding-right, 1rem)) !important;
}

/* ------------------------------------------------------------------
   Kartenbox der Beratungsfelder
   ------------------------------------------------------------------ */
/*
 * Die Vorlage stellt jede Karte in ein div.card: gruener Rand, Radius 30,
 * 27 px Polster. Der Beschreibungstext ist auf fuenf Zeilen begrenzt, darunter
 * steht "mehr ..." - und zwar nur dann, wenn wirklich etwas abgeschnitten ist.
 */
.wp-block-column.mx-cardbox {
  border: 2px solid var(--wp--preset--color--green);
  border-radius: 30px;
  padding: 1.5rem;
}

.mx-cardbox > .wp-block-image { margin-bottom: 18px; }

.mx-cardbox > p.mx-hx { margin-top: 0; }

/* Der Absatz nach dem Titel ist die Beschreibung. */
.mx-cardbox > p.mx-hx + p {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mx-cardbox.is-open > p.mx-hx + p { -webkit-line-clamp: unset; }

/* "mehr ..." zeigt erst das Skript, wenn der Text nicht ganz hineinpasst. */
.mx-cardbox .mx-cardbox__more { display: none; margin-top: 0; }
.mx-cardbox.has-more .mx-cardbox__more { display: block; }

.mx-cardbox .mx-cardbox__more a {
  color: var(--wp--preset--color--green);
  font-weight: 700;
  text-decoration: none;
}

/*
 * WordPress setzt ab 782 px "flex-wrap: nowrap !important" und die Spalten
 * tragen ihre Breite als Inline-Stil - beides laesst sich nur mit demselben
 * Gewicht ueberschreiben. Ohne das standen auf den Beratungsfeldern sechs
 * Karten zu 163 px nebeneinander statt drei zu 353 px.
 * Der Zeilenabstand ist das mb-4 der Vorlage.
 */
.wp-block-columns.mx-cols--wrap {
  flex-wrap: wrap !important;
  row-gap: 27px;
}

/*
 * Nur Spalten OHNE eigene Breite bekommen das Drittel. Die Kacheln unter
 * "Eingesetzte Technologien" bringen ihre Breite selbst mit
 * (calc(25% - 20.25px), also vier je Reihe wie col-lg-3 der Vorlage) - ein
 * !important hier hat sie vorher auf drei je Reihe gezwungen, wodurch fuenf
 * Kacheln als 3 + 1 + 1 umbrachen.
 */
.wp-block-columns.mx-cols--wrap > .wp-block-column:not([style*="flex-basis"]) {
  flex-basis: calc((100% - 54px) / 3);
  flex-grow: 0;
}

.wp-block-columns.mx-cols--wrap > .wp-block-column[style*="flex-basis"] {
  flex-grow: 0;
}

@media (max-width: 781px) {
  .wp-block-columns.mx-cols--wrap > .wp-block-column,
  .wp-block-columns.mx-cols--wrap > .wp-block-column[style*="flex-basis"] {
    flex-basis: 100% !important;
  }
}

/*
 * Groessenstaffel der Ueberschriften wie in der Vorlage.
 *
 * Bootstrap rechnet unterhalb von 1200 px mit einer Formel und setzt darueber
 * feste Werte; unter 576 px gilt eine eigene, kleinere Reihe. Die festen Werte
 * stehen bereits in theme.json, hier stehen die beiden anderen Bereiche.
 */
@media (max-width: 1199.98px) {
  h1 { font-size: calc(1.4028rem + 2.0628vw); }
  h2 { font-size: calc(1.3472rem + 1.3122vw); }
  h3 { font-size: calc(1.3028rem + .7128vw); }
  h4 { font-size: calc(1.2806rem + .4131vw); }
  h5 { font-size: calc(1.2583rem + .11205vw); }
}

@media (max-width: 575.98px) {
  h1 { font-size: 28px; }
  h2 { font-size: 24px; }
  h3 { font-size: 23px; }
  h4 { font-size: 21px; }
  h5 { font-size: 20px; }
}

/*
 * Abstaende der Rahmen wie in der Vorlage.
 *
 * TYPO3 vergibt je Rahmen eine Groesse von 1 bis 5 em und halbiert sie auf
 * schmalen Geraeten. Weil es Aussenabstaende sind, fallen zwei benachbarte
 * Angaben zusammen - genau wie im Original.
 */
/*
 * Bringt ein Rahmen sein eigenes Polster mit, faellt der Blockabstand weg -
 * sonst zaehlen beide. mx-pt-none bleibt aussen vor, damit zwei Rahmen
 * hintereinander ihre 18 px behalten.
 */
.wp-site-blocks :is(.mx-pt-9, .mx-pt-extra-small, .mx-pt-27, .mx-pt-small,
                    .mx-pt-medium, .mx-pt-large, .mx-pt-extra-large) {
  margin-block-start: 0;
}

.wp-site-blocks .mx-sp-b-extra-small { margin-block-start: 1rem; }
.wp-site-blocks .mx-sp-b-small       { margin-block-start: 2rem; }
.wp-site-blocks .mx-sp-b-medium      { margin-block-start: 3rem; }
.wp-site-blocks .mx-sp-b-large       { margin-block-start: 4rem; }
.wp-site-blocks .mx-sp-b-extra-large { margin-block-start: 5rem; }

.wp-site-blocks .mx-sp-a-extra-small { margin-block-end: 1rem; }
.wp-site-blocks .mx-sp-a-small       { margin-block-end: 2rem; }
.wp-site-blocks .mx-sp-a-medium      { margin-block-end: 3rem; }
.wp-site-blocks .mx-sp-a-large       { margin-block-end: 4rem; }
.wp-site-blocks .mx-sp-a-extra-large { margin-block-end: 5rem; }

/*
 * Halbierung auf schmalen Geraeten - aber NUR fuer die Innenabstaende.
 *
 * Das Stylesheet der Vorlage enthaelt zwar auch fuer frame-space-* eine
 * Medienabfrage mit halben Werten, sie wirkt dort jedoch nie: die Datei ist
 * doppelt zusammengesetzt, und die zweite, unbedingte Fassung der Basisregel
 * steht dahinter (Position 188023 gegen 164890 in orig-full.css). Gemessen
 * behaelt die Vorlage bei 390 px ihre 90 px Aussenabstand. Deshalb halbiert
 * der Nachbau nur die Polster - siehe den Block mx-pt-/mx-pb- weiter unten.
 */

/*
 * Inhaltsbreite wie im Original.
 *
 * Die Vorlage nutzt den gewoehnlichen Bootstrap-Container (540/720/960/1140/
 * 1320) mit 13,5 Pixeln Innenabstand je Seite. Uebrig bleibt die Textbreite,
 * die hier eingestellt wird. Die zweite Regel im Original-CSS (1110/1290) gilt
 * nur fuer .section.container und darf nicht verallgemeinert werden.
 */
/*
 * Unter 576 px ist der Behaelter randlos: volle Breite, 13,5 px Innenabstand.
 * Als Prozentwert wuerde sich der Abzug auf jeder Schachtelungsebene erneut
 * anwenden - der Inhalt schrumpfte mit jeder Ebene. Deshalb traegt hier der
 * Aussenabstand der Seite die 13,5 px und die Inhaltsbreite bleibt bei 100 %.
 */
/*
 * Die Vorlage rechnet ueberall in border-box. Fuer die Bausteine des Themes
 * gilt das sonst nicht - Innenabstaende kaemen zur Breite hinzu und die Seite
 * bekaeme waagerechten Ueberlauf.
 */
[class^="mx-"],
[class*=" mx-"] {
  box-sizing: border-box;
}

/*
 * Auch auf body setzen: WordPress legt die Randvariablen dort ab, und ein
 * Wert am naeheren Vorfahren schlaegt den geerbten von :root.
 */
:root,
body {
  --wp--style--global--content-size: 100%;
  --wp--style--global--wide-size: 100%;
  --wp--style--root--padding-left: 13.5px;
  --wp--style--root--padding-right: 13.5px;
}

@media (max-width: 575.98px) {
  .has-global-padding {
    padding-left: 13.5px;
    padding-right: 13.5px;
  }

  /*
   * Der Aufmacher haelt seinen Inhalt selbst auf Abstand: sein Kasten ist
   * absolut gesetzt und ginge sonst bis an den Fensterrand.
   */
  .mx-news-hero__cover .wp-block-cover__inner-container {
    max-width: calc(100% - 27px);
  }
}
@media (min-width: 576px)  { :root, body {
  --wp--style--global--content-size: 513px;
  --wp--style--global--wide-size: 513px;
  --wp--style--root--padding-left: 18px;
  --wp--style--root--padding-right: 18px;
} }
@media (min-width: 768px)  { :root, body { --wp--style--global--content-size: 693px;
                                   --wp--style--global--wide-size: 693px; } }
@media (min-width: 992px)  { :root, body { --wp--style--global--content-size: 933px;
                                   --wp--style--global--wide-size: 933px; } }
@media (min-width: 1200px) { :root, body { --wp--style--global--content-size: 1113px;
                                   --wp--style--global--wide-size: 1113px; } }
@media (min-width: 1400px) { :root, body { --wp--style--global--content-size: 1293px;
                                   --wp--style--global--wide-size: 1293px; } }

/* Der Spaltenabstand entspricht der Rinne des Originals. */
/* Die Rinne liegt waagerecht; gestapelt stehen die Spalten dicht. */
.wp-block-columns { column-gap: 27px; row-gap: 0; }

.wp-block-columns.are-vertically-aligned-top { align-items: flex-start !important; }
.wp-block-columns.are-vertically-aligned-center { align-items: center !important; }
.wp-block-columns.are-vertically-aligned-bottom { align-items: flex-end !important; }
.wp-block-columns.is-content-justification-space-between { justify-content: space-between; }

/* ------------------------------------------------------------------
   Schwebende Formularbeschriftung
   ------------------------------------------------------------------ */
/*
 * Im Original liegt die Beschriftung im Feld und schrumpft beim Tippen nach
 * oben (.control-label absolut, 0,3 s Uebergang, im gefuellten Zustand 8 px).
 * Deshalb ist sie dort auch auf farbigen Flaechen dunkel: sie steht ja auf
 * dem weissen Feld.
 */
.mx-field {
  position: relative;
}

.mx-field > label {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: .53rem 1.75rem;
  margin: 0;
  pointer-events: none;
  transition: all .3s ease;
  font-weight: 700;
  font-size: 1rem;
  color: var(--wp--preset--color--dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/*
 * Ruhezustand wie in der Vorlage; sobald etwas drinsteht, rutscht der Text
 * nach unten und macht der geschrumpften Beschriftung Platz.
 *
 * Kaestchen sind ausgenommen, aus demselben Grund wie bei der Beschriftung
 * weiter unten: sie zeigen nie einen Platzhalter, also trifft
 * :not(:placeholder-shown) auch auf sie zu. Die Polsterung von 15 px oben
 * machte aus dem Quadrat ein Rechteck von 15 mal 23 Pixeln - und weil dieser
 * Wahler mit :has() spezifischer ist als .mx-check input, half dort kein
 * padding:0. Ausgenommen gehoert es hier, nicht ueberschrieben.
 */
.mx-field:focus-within :is(input:not([type="checkbox"]), select, textarea),
.mx-field:has(input:not([type="checkbox"]):not(:placeholder-shown)) input:not([type="checkbox"]),
.mx-field:has(textarea:not(:placeholder-shown)) textarea,
.mx-field:has(select) select {
  padding-top: .86rem;
  padding-bottom: .2rem;
}

.mx-field textarea { min-height: 220px; }

/* Beim Tippen oder wenn etwas drinsteht: klein und nach oben. */
/*
 * Kaestchen ausgenommen: sie zeigen nie einen Platzhalter, damit trifft
 * :not(:placeholder-shown) auch auf sie zu - die Zustimmungszeile schrumpfte
 * dadurch auf 8 px.
 */
.mx-field:focus-within:not(:has(.mx-check)) > label,
.mx-field:has(input:not([type="checkbox"]):not(:placeholder-shown)) > label,
.mx-field:has(textarea:not(:placeholder-shown)) > label,
.mx-field:has(select) > label {
  /* Die Vorlage schrumpft auf glatte 8 px. */
  font-size: 8px;
  padding-top: 5px;
}

/*
 * Steht im Auswahlfeld noch der leere Eintrag, ist nichts gewaehlt - dann
 * bleibt die Beschriftung gross und wirkt als Platzhalter.
 */
.mx-field:not(:focus-within):has(select option[value=""]:checked) > label {
  font-size: 1rem;
  padding-top: .53rem;
}

.mx-field:not(:focus-within):has(select option[value=""]:checked) select {
  padding-top: .53rem;
  padding-bottom: .53rem;
}

/*
 * Die Zustimmung ist die einzige Beschriftung, die nicht im weissen Feld
 * liegt: sie steht neben dem Kaestchen auf der Abschnittsfarbe.
 */
.mx-field .mx-check {
  position: static;
  padding: 0;
  pointer-events: auto;
  white-space: normal;
  overflow: visible;
  font-weight: 400;
  color: inherit;
}

.mx-field:has(.mx-check) { min-height: 0; }

.mx-section--dark .mx-check,
.mx-section--primary .mx-check,
.mx-section--gradient .mx-check,
.mx-section--dark .mx-check a,
.mx-section--primary .mx-check a,
.mx-section--gradient .mx-check a {
  color: #ffffff;
}

/* Ohne :has bleibt die Beschriftung sichtbar, nur ohne das Schweben. */
@supports not selector(:has(*)) {
  .mx-field > label { position: static; padding: 0 0 .35rem; }
  .mx-field :is(input:not([type="checkbox"]), select, textarea) { padding: .6rem .75rem; min-height: 0; }
}

/* ------------------------------------------------------------------
   Sanftes Scrollen
   ------------------------------------------------------------------ */
/* Das Original setzt scroll-behavior global; Sprungmarken gleiten dorthin. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Bei offenem Menue steht die Seite dahinter still, wie in der Vorlage. */
body.mx-nav-open { height: 100vh; overflow: hidden; }

/*
 * Aufzaehlungen: die Vorlage setzt einen gruenen Punkt mit 25 px Einzug
 * statt des grauen Standardpunkts.
 */
.wp-block-post-content ul.wp-block-list:not(.is-style-plain) {
  list-style: none;
  padding-left: 0;
}

.wp-block-post-content ul.wp-block-list:not(.is-style-plain) > li {
  position: relative;
  padding-left: 25px;
}

.wp-block-post-content ul.wp-block-list:not(.is-style-plain) > li::before {
  content: "\2022";
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
  color: var(--wp--preset--color--green);
}

/*
 * Ankreuzfelder wie in der Vorlage: eigenes Kaestchen mit blauem Haken.
 */
.mx-check input {
  appearance: none;
  width: 1.15em;
  height: 1.15em;
  /*
   * Polsterung ausdruecklich auf null. Die Regel fuer gefuellte Felder - die
   * mit der wandernden Beschriftung - traf ueber ihren :has()-Zweig auch das
   * Ankreuzfeld und legte 15 px oben und 4 px unten darauf. Mit border-box
   * wurde aus dem Quadrat ein Rechteck von 15 mal 23 Pixeln: gestaucht,
   * schief, und auf dunklem Grund kaum als Bedienelement zu erkennen.
   */
  padding: 0;
  margin-top: .2em;
  background: #ffffff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: .78em;
  border: 2px solid rgba(0, 0, 0, .3);
  border-radius: 4px;
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease;
}

/*
 * Auf farbigen Abschnitten traegt der dunkle Rahmen nicht. Ungehakt steht das
 * Weiss fuer sich, gehakt der weisse Haken auf Hausblau - beides bleibt
 * lesbar, wenn der Rahmen hell mitgeht.
 */
.mx-section--dark .mx-check input,
.mx-section--primary .mx-check input,
.mx-section--gradient .mx-check input {
  border-color: rgba(255, 255, 255, .65);
}

.mx-section--dark .mx-check input:checked,
.mx-section--primary .mx-check input:checked,
.mx-section--gradient .mx-check input:checked {
  border-color: rgba(255, 255, 255, .85);
}

.mx-check input[type="radio"] { border-radius: 50%; }

.mx-check input:checked {
  background-color: var(--wp--preset--color--primary);
  border-color: var(--wp--preset--color--primary);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
}

.mx-check input:focus-visible {
  border-color: #80b5d0;
  outline: 0;
  box-shadow: 0 0 0 .25rem rgba(0, 106, 161, .25);
}

.mx-section--dark .mx-check input:focus-visible,
.mx-section--primary .mx-check input:focus-visible,
.mx-section--gradient .mx-check input:focus-visible {
  border-color: var(--wp--preset--color--white);
  box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .35);
}

/* Mehrfachauswahl: Ueberschrift steht fest, darunter die Antworten. */
.mx-field--group > .mx-field__group-label {
  position: static;
  display: block;
  padding: 0 0 .5rem;
  font-weight: 700;
  font-size: 1rem;
  color: inherit;
}

.mx-field--group .mx-field__options {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.mx-field--group .mx-check {
  position: static;
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-weight: 400;
  white-space: normal;
  pointer-events: auto;
}

/* Der Absendeknopf steht in der Vorlage rechts. */
.mx-form__actions {
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 991.98px) {
    .mx-form__actions {
    justify-content: flex-start;
    /* 18 px Rest der Feldgruppe plus die 35 px der Vorlage. */
    margin-top: calc(1rem + 35px);
  }
  .mx-form__actions button { padding-left: 1.25rem; padding-right: 1.25rem; }
}

/* ------------------------------------------------------------------
   Fussbereich wie in der Vorlage
   ------------------------------------------------------------------ */
/*
 * Der Spaltenblock steht auf hellblauem Grund, die Schlusszeile auf grauem;
 * beide Flaechen laufen bis an den Fensterrand. Der Rest bleibt weiss.
 */
.mx-footer__top {
  background: #f5f9fc;
  padding-top: 3rem;
  padding-bottom: 3rem;
  margin-left: calc(-1 * var(--wp--style--root--padding-left, 1rem));
  margin-right: calc(-1 * var(--wp--style--root--padding-right, 1rem));
  width: auto;
  max-width: none;
}

/* Auf breiten Fenstern schliesst die helle Flaeche unten enger ab. */
@media (min-width: 992px) {
  .mx-footer__top { padding-bottom: 1.5rem; }
}

/* Die Rechtsleiste steht im Original auf Weiss, nur das Copyright ist grau. */
.mx-footer__meta {
  color: #2b2e34;
  margin-left: calc(-1 * var(--wp--style--root--padding-left, 1rem));
  margin-right: calc(-1 * var(--wp--style--root--padding-right, 1rem));
  width: auto;
  max-width: none;
}

/*
 * Die Punkte der Schlusszeile trennt die Vorlage mit senkrechten Strichen.
 * Doppelte Klasse: die Global Styles setzen :first-child/:last-child im
 * constrained layout auf margin 0 und schlugen die einfache Regel.
 */
.wp-block-group.mx-footer__meta > p {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-block: 14px;
}

.mx-footer__meta a {
  padding-inline: 1rem;
  margin-block: 9px;
  color: #000000;
  line-height: 1;
}

.mx-footer__meta a:not(:last-child) { border-right: 1px solid #000000; }
.mx-footer__meta a:hover { color: #404040; text-decoration: none; }

@media (max-width: 991.98px) {
  .wp-block-group.mx-footer__meta > p { flex-direction: column; align-items: flex-start; }
  .mx-footer__meta a:not(:last-child) { border-right: 0; }
  /* Gestapelt braucht jede Zeile ihre 18 px, wie .metaNav der Vorlage. */
  .mx-footer__meta a { padding: 0; margin-block: 1rem; }
}

/* Ueberschriften im Fussbereich sind in der Vorlage dunkel und fett. */
.mx-footer :is(h1, h2, h3, h4, h5, h6) { color: #333333; font-weight: 700; }

.mx-footer .wp-block-site-logo img { width: 146px; height: auto; }

/* mb-4 der Rasterzelle (27 px) plus 10 px an der Galerie der Vorlage. */
.mx-footer__top .wp-block-site-logo { margin-bottom: 37px; }

/* Listen im Fussbereich: ohne Punkte, mit Trennlinien wie die Vorlage. */
.mx-footer ul.is-style-plain { list-style: none; padding-left: 0; }
.mx-footer ul.is-style-plain a { display: block; padding-block: 9px; color: var(--wp--preset--color--grey); }
.mx-footer ul.is-style-plain a:hover { color: var(--wp--preset--color--primary); }
.mx-footer ul.is-style-plain li:not(:last-child) a { border-bottom: 1px solid var(--wp--preset--color--border); }
.mx-footer__top .wp-block-column > p:last-child { margin-block-end: 18px; }

/* Ueberschriften im Fussbereich: 1,333 rem ab 1200 px, wie h5 der Vorlage. */
.mx-footer__top h2 { font-size: calc(1.2583rem + .11205vw); }
@media (min-width: 1200px) { .mx-footer__top h2 { font-size: 1.333rem; } }
@media (max-width: 575.98px) { .mx-footer__top h2 { font-size: 20px; } }

/* Symbole vor Mail, Telefon und TeamViewer wie in der Vorlage. */
.mx-footer__top a[href^="mailto:"]::before,
.mx-footer__top a[href^="tel:"]::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 27px;
  margin-right: 9px;
  vertical-align: -7px;
  background: currentColor;
}
.mx-footer__top a[href^="mailto:"]::before {
  -webkit-mask: url("assets/img/icon-mail.svg") center / 18px no-repeat;
  mask: url("assets/img/icon-mail.svg") center / 18px no-repeat;
}
.mx-footer__top a[href^="tel:"]::before {
  margin-right: 8px;
  -webkit-mask: url("assets/img/icon-phone.svg") center / 18px no-repeat;
  mask: url("assets/img/icon-phone.svg") center / 18px no-repeat;
}
.mx-footer__top a[href*="teamviewer"]::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 14px;
  margin-right: 5px;
  background: url("assets/img/teamviewer.png") center / contain no-repeat;
}

/* Die Vorlage markiert im Untermenue den Punkt der aktuellen Seite. */
.mx-nav__col a.is-current { color: #212529; text-decoration: underline; }

/* Die Brotkrume steht auf voller Breite, ihr Inhalt aber im Raster. */
.mx-breadcrumb > .wp-block-group,
.mx-breadcrumb > ol {
  max-width: var(--wp--style--global--content-size);
  margin-inline: auto;
}

/*
 * Die Kontaktleiste hat im geoeffneten Zustand eine blaue Griffleiste, wie
 * sie die Vorlage ueber .sticky__closer::after zeichnet.
 */
.mx-cta.is-open .mx-cta__toggle::after {
  content: "";
  position: absolute;
  top: 10px;
  left: calc(50% - 65px);
  width: 130px;
  height: 5px;
  border-radius: 5px;
  background: var(--wp--preset--color--primary);
}

/* Kundenlogos stehen in der Vorlage weiss auf dem Bild und werden beim
   Ueberfahren farbig. */
.mx-tile__logo { filter: saturate(0) brightness(10); }
.mx-tile:hover .mx-tile__logo,
.mx-tile:focus-within .mx-tile__logo { filter: none; }

/* Beim Ueberfahren bekommt die Kachel den gruenen Rand der Vorlage. */
.mx-tile:hover,
.mx-tile:focus-within { border-color: var(--wp--preset--color--green); }

/* ------------------------------------------------------------------
   Nachtrag aus dem zweiten Abgleich
   ------------------------------------------------------------------ */

/* Die Vorlage schaltet Farben hart um, sie blendet nicht. */
a.mx-btn { transition: none; }

/*
 * CIOspirit-Archiv: der offene Eintrag steht in der Vorlage auf einer gruenen
 * Schraegflaeche, die Trennung ist gestrichelt.
 */
.mx-acc__item > summary {
  padding: 15px 20px 15px 55px;
  overflow-x: hidden;
}

.mx-acc__item:not(:last-child) > summary {
  border-bottom: 1px dashed var(--wp--preset--color--grey);
}

.mx-acc__item[open] > summary {
  position: relative;
  color: #ffffff;
}

.mx-acc__item[open] > summary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--wp--preset--color--green);
  transform: skewX(-27deg) translateX(21px);
  z-index: 0;
}

.mx-acc__item[open] > summary > * { position: relative; z-index: 1; }
.mx-acc__item[open] > summary :is(.mx-acc__title, .mx-acc__sub) { color: #ffffff; }

@media (max-width: 991.98px) {
  .mx-acc__item[open] > summary::before { display: none; }
  .mx-acc__item[open] > summary { background: var(--wp--preset--color--green); }
  .mx-acc__item:not(:last-child) > summary { border-bottom: 0; }
}

/* Die eigenen Raster stapeln in der Vorlage ebenfalls erst unter 992 px. */
@media (max-width: 991.98px) {
  .mx-cards { grid-template-columns: 1fr; }
  .mx-news-card { grid-template-columns: 1fr !important; }
  /* Die Punktleiste unter dem Aufmacher blendet die Vorlage dort aus. */
  .mx-hero__tabs { display: none; }
}

/* Unter 768 px laufen die Knoepfe der Vorlage ueber die volle Breite. */
@media (max-width: 767.98px) {
  .wp-block-button:not(.is-style-lightning),
  a.mx-btn:not(.mx-btn--lightning) { width: 100%; }
  .wp-block-button.is-style-lightning,
  a.mx-btn--lightning { width: 90%; }
  .mx-form__actions button { width: 100%; }
}

/*
 * Die Merkmalsleiste auf modernX Facts klebt in der Vorlage mit und steht
 * rechtsbuendig; auf schmalen Geraeten faellt sie weg.
 */
/*
 * Merkmale der Spalten aus der Vorlage: zentriert, klebend, erst ab 992 px
 * sichtbar. Ohne sie steht die Merkmalsleiste auf modernX Facts linksbuendig
 * und laeuft mit, und die Kontaktkacheln stehen linksbuendig.
 */
.wp-block-column.mx-col--center { text-align: center; }
.wp-block-column.mx-col--center .wp-block-image img { margin-inline: auto; }

.wp-block-column.mx-col--sticky {
  position: sticky;
  top: 100px;
  align-self: flex-start;
}

@media (max-width: 991.98px) {
  .wp-block-column.mx-col--lg-only { display: none; }
  .wp-block-column.mx-col--sticky { position: static; }
}

/*
 * Innenabstaende der Rahmen wie in der Vorlage (padding-top-*/padding-bottom-*).
 * Dieselbe Staffel wie bei den Aussenabstaenden, auf schmalen Geraeten halbiert.
 */
.wp-site-blocks .mx-pt-none       { padding-top: 0; }
.wp-site-blocks .mx-pt-extra-small { padding-top: 1rem; }
.wp-site-blocks .mx-pt-small       { padding-top: 2rem; }
.wp-site-blocks .mx-pt-medium      { padding-top: 3rem; }
.wp-site-blocks .mx-pt-large       { padding-top: 4rem; }
.wp-site-blocks .mx-pt-extra-large { padding-top: 5rem; }

.wp-site-blocks .mx-pb-none       { padding-bottom: 0; }
.wp-site-blocks .mx-pb-extra-small { padding-bottom: 1rem; }
.wp-site-blocks .mx-pb-small       { padding-bottom: 2rem; }
.wp-site-blocks .mx-pb-medium      { padding-bottom: 3rem; }
.wp-site-blocks .mx-pb-large       { padding-bottom: 4rem; }
.wp-site-blocks .mx-pb-extra-large { padding-bottom: 5rem; }

/* Zwischenstufen fuer die Bootstrap-Kurzformen der Vorlage. */
.wp-site-blocks .mx-pt-9  { padding-top: .5rem; }
.wp-site-blocks .mx-pt-27 { padding-top: 1.5rem; }
.wp-site-blocks .mx-pb-9  { padding-bottom: .5rem; }
.wp-site-blocks .mx-pb-27 { padding-bottom: 1.5rem; }

@media (max-width: 767.98px) {
  .wp-site-blocks .mx-pt-9  { padding-top: .25rem; }
  .wp-site-blocks .mx-pt-27 { padding-top: .75rem; }
  .wp-site-blocks .mx-pb-9  { padding-bottom: .25rem; }
  .wp-site-blocks .mx-pb-27 { padding-bottom: .75rem; }
  .wp-site-blocks .mx-pt-extra-small { padding-top: .5rem; }
  .wp-site-blocks .mx-pt-small       { padding-top: 1rem; }
  .wp-site-blocks .mx-pt-medium      { padding-top: 1.5rem; }
  .wp-site-blocks .mx-pt-large       { padding-top: 2rem; }
  .wp-site-blocks .mx-pt-extra-large { padding-top: 2.5rem; }

  .wp-site-blocks .mx-pb-extra-small { padding-bottom: .5rem; }
  .wp-site-blocks .mx-pb-small       { padding-bottom: 1rem; }
  .wp-site-blocks .mx-pb-medium      { padding-bottom: 1.5rem; }
  .wp-site-blocks .mx-pb-large       { padding-bottom: 2rem; }
  .wp-site-blocks .mx-pb-extra-large { padding-bottom: 2.5rem; }
}

/*
 * CIOspirit-Archiv: die Vorlage stellt links eine schmale Titelspalte und
 * rechts den Inhalt des offenen Eintrags. Weil immer nur einer offen ist,
 * genuegt es, den offenen Inhalt ueber alle Zeilen der zweiten Spalte zu
 * spannen.
 */
/*
 * Kein Raster: "display: contents" auf einem <details> nimmt dem Element seine
 * Zuklapp-Wirkung - es standen alle 41 Tafeln gleichzeitig da. Und eine Tafel
 * laesst sich in einem Raster ohne explizite Zeilen nicht ueber den ganzen
 * Titelstapel spannen; sie dehnt stattdessen die erste Zeile auf ihre Hoehe
 * und riss im CIOspirit-Archiv eine Luecke von 380 px auf.
 *
 * Stattdessen wie in der Vorlage: die Titel stapeln sich in der linken
 * Vierteilspalte, die offene Tafel steht daneben und ist aus dem Fluss
 * genommen. Damit ein hoher Inhalt den Behaelter nicht ueberlaeuft, setzt
 * initAccordions() in modernx.js dessen Mindesthoehe.
 */
@media (min-width: 992px) {
  .mx-acc--sidebyside {
    display: block;
    position: relative;
  }

  /*
   * Die Titel stehen in der Vorlage dicht an dicht - nur die gestrichelte
   * Linie trennt sie. Der Blockabstand von WordPress schoebe 18 px dazwischen.
   */
  .mx-acc--sidebyside .mx-acc__item {
    display: block;
    margin-block: 0;
  }

  .mx-acc--sidebyside .mx-acc__item > summary {
    box-sizing: border-box;
    width: 25%;
    border-bottom: 1px dashed var(--wp--preset--color--border);
  }

  .mx-acc--sidebyside .mx-acc__item > .mx-acc__panel {
    position: absolute;
    top: 0;
    left: 25%;
    width: 75%;
    background: #dfe7f1;
    padding: 50px 100px;
    margin: 0;
  }
}

@media (max-width: 991.98px) {
  /* Gestapelt laufen die grauen Balken bis an den Rand des Rahmens. */
  .mx-acc--sidebyside { padding-inline: 0; }

  .mx-acc--sidebyside .mx-acc__item > summary {
    color: #ffffff;
    background: var(--wp--preset--color--grey);
    margin-top: 5px;
    /* Gestapelt kennt die Vorlage keine Trennlinie. */
    border-bottom: 0;
  }
  .mx-acc--sidebyside .mx-acc__item > .mx-acc__panel {
    background: #dfe7f1;
    padding: 30px 20px;
  }
}

/* Auf der Rueckseite steht das Logo farbig, nicht weiss. */
.mx-tile__back .mx-tile__logo { filter: none; }

/*
 * Aufmacher der Nachrichtenlisten: das Band laeuft in der Vorlage bis an den
 * Fensterrand. Der Abfrageblock darum ist eingeschraenkt, deshalb wird die
 * Begrenzung hier fuer genau diesen Fall aufgehoben.
 */
.wp-block-query:has(.mx-news-hero__cover),
.wp-block-query:has(.mx-news-hero__cover) > .wp-block-post-template,
.wp-block-query:has(.mx-news-hero__cover) > .wp-block-post-template > .wp-block-post,
/*
 * Ein Rahmen, der eine randlose Flaeche enthaelt, darf sie nicht einschnueren -
 * in der Vorlage ist der Rahmen um solche Abschnitte ohne Breitenbegrenzung.
 * Die uebrigen Kinder des Rahmens bleiben ueber is-layout-constrained im Raster.
 */
.wp-block-group:has(> .alignfull) {
  max-width: none;
  width: auto;
}

/* ------------------------------------------------------------------
   Kategoriefilter ueber den Kartenrastern
   ------------------------------------------------------------------ */
/*
 * Die Vorlage stellt das Auswahlfeld in eine Rasterzeile: links das Feld,
 * rechts der Zuruecksetzer. Ohne Auswahl stehen alle Karten da.
 */
.mx-cardfilter {
  display: flex;
  align-items: center;
  gap: 27px;
  margin-bottom: 1.5rem;
}

.mx-cardfilter .mx-field { flex: 1 1 auto; }

.mx-cardfilter__reset {
  flex: 0 0 auto;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
}

@media (max-width: 991.98px) {
  .mx-cardfilter { flex-direction: column; align-items: stretch; gap: 1rem; }
}

/* Ausgefilterte Karten nimmt das Raster nicht mehr mit. */
.mx-cards .mx-card[hidden] { display: none; }

/* Formularversand ------------------------------------------------------- */

/* Koederfeld gegen Automaten: fuer Menschen unsichtbar, aber im Baum. */
.mx-form__koeder {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.mx-form__meldung {
	scroll-margin-top: 110px;
	margin-bottom: 1.5rem;
	padding: 1rem 1.25rem;
	border-radius: 8px;
	border-left: 4px solid;
	font-size: 0.95rem;
	line-height: 1.5;
}

/*
 * Die Formulare stehen meist auf dunklem Verlauf. Eine halbtransparente
 * Flaeche war dort kaum lesbar - die Meldung steht jetzt auf Weiss.
 */
.mx-form__meldung--ok {
	border-color: #78be20;
	background: #ffffff;
	color: #0b2443;
	padding: 1.5rem 1.75rem;
	font-size: 1.05rem;
}

.mx-form__meldung--hinweis {
	border-color: #f39200;
	background: #ffffff;
	color: #0b2443;
}

.mx-form__meldung--fehler {
	border-color: #c0392b;
	background: #ffffff;
	color: #7d241a;
}

.mx-form__meldung:focus { outline: 2px solid currentColor; outline-offset: 3px; }

/* Einwilligung ---------------------------------------------------------- */

/* Gesperrte Einbettung: der Platzhalter haelt die Flaeche des Inhalts. */
.mx-sperre {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 320px;
	padding: 2rem 1.5rem;
	background: var(--wp--preset--color--light);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	text-align: center;
}

.mx-map .mx-sperre {
	height: 100%;
	min-height: 500px;
	border: 0;
	border-radius: 0;
}

.mx-sperre__innen {
	max-width: 460px;
}

.mx-sperre__titel {
	margin: 0 0 0.5rem;
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--wp--preset--color--dark);
}

.mx-sperre__text {
	margin: 0 0 1.25rem;
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--wp--preset--color--grey);
}

.mx-sperre__knopf {
	padding: 0.7em 1.6em;
	border: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--green);
	color: #fff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.mx-sperre__knopf:hover,
.mx-sperre__knopf:focus-visible {
	background: var(--wp--preset--color--dark);
}

.mx-sperre__verweis {
	display: block;
	margin: 0.75rem auto 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--primary);
	font: inherit;
	font-size: 0.85rem;
	text-decoration: underline;
	cursor: pointer;
}

.mx-sperre__rahmen {
	display: block;
	width: 100%;
	min-height: 320px;
	border: 0;
}

.mx-map .mx-sperre__rahmen {
	height: 500px;
	min-height: 500px;
}

/*
 * Terminbuchung: 1700 px, schmal 2000 px, wie .h-100 iframe der Vorlage.
 * Mit 320 px erschien der Kalender mit innerem Rollbalken.
 */
.mx-sperre__rahmen[title="Terminbuchung"] { min-height: 1700px; }
@media (max-width: 991.98px) {
	.mx-sperre__rahmen[title="Terminbuchung"] { min-height: 2000px; }
}

/*
 * Symbolleiste der Personenseiten (LinkedIn, Xing, Teams, vCard): im
 * Original vier kleine Zeichen in einer Reihe. Uebernommen wurde sie als
 * zugeschnittene Galerie, die die Zeichen auf 170 px aufblies. Das
 * !important braucht es, weil die Galerieregeln von WordPress mit
 * :not(#individual-image) ID-Gewicht tragen.
 */
.wp-block-gallery:has(img[src*="Teams_Logo"]) {
	flex-wrap: nowrap;
	gap: 0 27px;
	align-items: center;
}
.wp-block-gallery:has(img[src*="Teams_Logo"]) > figure.wp-block-image {
	flex: 0 0 auto !important;
	width: auto !important;
	margin: 0 !important;
}
.wp-block-gallery:has(img[src*="Teams_Logo"]) img {
	width: auto !important;
	height: 42px !important;
	object-fit: contain !important;
}

/* Dialog */
.mx-cookie {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	background: rgba(11, 36, 67, 0.6);
}

.mx-cookie[hidden] {
	display: none;
}

body.mx-cookie-offen {
	overflow: hidden;
}

.mx-cookie__flaeche {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 1140px;
	max-height: calc(100vh - 2rem);
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

.mx-cookie__kopf {
	padding: 1.25rem 1.5rem;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.mx-cookie__titel {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--wp--preset--color--dark);
}

.mx-cookie__koerper {
	padding: 1.5rem;
	overflow-y: auto;
}

.mx-cookie__text {
	margin: 0 0 1rem;
	font-size: 0.95rem;
	line-height: 1.6;
}

.mx-cookie__mehr {
	padding: 0.45em 1.4em;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 4px;
	background: var(--wp--preset--color--light);
	font: inherit;
	font-size: 0.9rem;
	cursor: pointer;
}

.mx-cookie__details {
	margin-top: 1.25rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 6px;
}

.mx-cookie__details[hidden] {
	display: none;
}

.mx-cookie__gruppe + .mx-cookie__gruppe {
	border-top: 1px solid var(--wp--preset--color--border);
}

.mx-cookie__gruppe > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.9rem 1.1rem;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.mx-cookie__gruppe > summary::-webkit-details-marker {
	display: none;
}

.mx-cookie__pfeil {
	width: 0.6em;
	height: 0.6em;
	border-right: 2px solid var(--wp--preset--color--grey);
	border-bottom: 2px solid var(--wp--preset--color--grey);
	transform: rotate(45deg);
	transition: transform 0.2s;
}

.mx-cookie__gruppe[open] .mx-cookie__pfeil {
	transform: rotate(-135deg);
}

.mx-cookie__inhalt {
	padding: 0 1.1rem 1.1rem;
	font-size: 0.9rem;
}

.mx-cookie__wahl {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
	font-weight: 600;
	cursor: pointer;
}

.mx-cookie__wahl input[disabled] {
	cursor: not-allowed;
}

.mx-cookie__sperre {
	margin: 0.5rem 0;
	color: var(--wp--preset--color--grey);
	font-style: italic;
}

/* Die Cookie-Tabellen sind breit; sie rollen in sich, nicht die Seite. */
.mx-cookie__tabelle {
	overflow-x: auto;
	margin-top: 0.75rem;
}

.mx-cookie__tabelle table {
	width: 100%;
	min-width: 640px;
	border-collapse: collapse;
	font-size: 0.8rem;
}

.mx-cookie__tabelle th,
.mx-cookie__tabelle td {
	padding: 0.5rem 0.6rem;
	border-bottom: 1px solid var(--wp--preset--color--border);
	text-align: left;
	vertical-align: top;
}

.mx-cookie__tabelle th {
	background: var(--wp--preset--color--light);
	font-weight: 600;
	white-space: nowrap;
}

.mx-cookie__fuss {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: flex-end;
	padding: 1.1rem 1.5rem;
	border-top: 1px solid var(--wp--preset--color--border);
}

.mx-cookie__knopf {
	padding: 0.6em 1.5em;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 4px;
	background: var(--wp--preset--color--light);
	font: inherit;
	font-size: 0.9rem;
	cursor: pointer;
}

.mx-cookie__knopf[hidden] {
	display: none;
}

.mx-cookie__knopf--voll {
	border-color: var(--wp--preset--color--green);
	background: var(--wp--preset--color--green);
	color: #fff;
	font-weight: 600;
}

.mx-cookie__knopf--voll:hover,
.mx-cookie__knopf--voll:focus-visible {
	background: var(--wp--preset--color--dark);
	border-color: var(--wp--preset--color--dark);
}

@media (max-width: 575px) {
	.mx-cookie__fuss {
		justify-content: stretch;
	}

	.mx-cookie__fuss .mx-cookie__knopf {
		flex: 1 1 100%;
	}
}

/* Karte des Firmensitzes: festes Bild, kein Fremdinhalt zur Laufzeit. */
.mx-map__verweis {
	position: relative;
	display: block;
	height: 100%;
	text-decoration: none;
}

.mx-map__verweis img {
	display: block;
	width: 100%;
	height: 500px;
	object-fit: cover;
	object-position: center;
}

.mx-map__marke {
	position: absolute;
	left: 50%;
	bottom: 1.5rem;
	transform: translateX(-50%);
	display: inline-flex;
	gap: 0.5rem;
	align-items: baseline;
	max-width: calc(100% - 2rem);
	padding: 0.6rem 1.1rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.94);
	box-shadow: 0 2px 10px rgba(11, 36, 67, 0.2);
	color: var(--wp--preset--color--dark);
	font-size: 0.9rem;
	font-weight: 600;
	white-space: nowrap;
}

.mx-map__marke span {
	color: var(--wp--preset--color--primary);
	font-weight: 400;
	text-decoration: underline;
}

.mx-map__verweis:hover .mx-map__marke,
.mx-map__verweis:focus-visible .mx-map__marke {
	background: #fff;
}

@media (max-width: 575px) {
	.mx-map__marke {
		white-space: normal;
		text-align: center;
	}
}

/* Korrekturen aus der Durchsicht vom 01.09.2026 ------------------------- */

/*
 * Die Zustimmungszeile ist Fliesstext, keine schwebende Beschriftung.
 * Groesse wie die uebrigen Feldbeschriftungen.
 */
.mx-field > label.mx-check {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
}

/*
 * Der Abschluss der Fusszeile lief bisher weiss aus. Jetzt schliesst er in
 * derselben Farbe wie die Verweisleiste darueber - ein durchgehendes Band.
 */
/*
 * Schlusszeile: graue Flaeche bis an den Rand. Die Rechtsleiste darueber
 * steht auf Weiss, wie in der Vorlage. Die Vollbreite kommt aus dem alignfull der
 * Blockvorlage - eigene negative Raender griffen hier nicht mehr, seit das
 * Block-CSS als Datei geladen wird und damit nach dem Theme-Stylesheet steht.
 */
.mx-footer__copyright {
	background: var(--wp--preset--color--border);
	color: #2b2e34;
	margin-block-start: 0;
}

/*
 * Kein Weiss zwischen und unter den beiden grauen Leisten.
 *
 * Die Klassenauswahl steht bewusst doppelt (.wp-block-group.mx-footer): die
 * Global Styles von WordPress werden nach diesem Stylesheet ausgegeben, ein
 * einfaches .mx-footer verliert daher bei gleicher Spezifitaet.
 */
.wp-block-group.mx-footer__meta { margin-block: 0; }

/*
 * Der Innenabstand unten steht als Inline-Stil in der Blockvorlage
 * (parts/footer.html) und ist dort auf 0 gesetzt - ein Stylesheet koennte ihn
 * gar nicht ueberstimmen. Die Schlusszeile bringt ihren eigenen Abstand mit.
 */
.wp-block-group.mx-footer__copyright { padding-block: 1rem; }

@media (max-width: 767.98px) {
	.wp-block-group.mx-footer__copyright { padding-bottom: 4rem; }
	.wp-block-group.mx-footer__copyright > p { padding-inline: 18px; }
}

/*
 * Umbrechende Spaltenreihen: die letzte, unvollstaendige Zeile stand links.
 * Vier Referenten ergaben 3 + 1, und die eine sass am linken Rand.
 */
.wp-block-columns.mx-cols--wrap {
	justify-content: center;
}

/*
 * Kachel mit Symbol ueber zentriertem Text: das Bild gehoert ebenfalls in die
 * Mitte. Ohne diese Regel standen die Symbole auf /kontakt 122 px links
 * neben der Spaltenmitte, waehrend Ueberschrift und Verweis zentriert waren.
 */
.wp-block-column:has(> .has-text-align-center) > .wp-block-image {
	margin-inline: auto;
	width: fit-content;
}

/* Kopf einer Kategorieseite - die Archive hatten bisher gar keine Ueberschrift. */
.mx-archiv__kopf {
	padding-top: 3rem;
	padding-bottom: 1.5rem;
}

.mx-archiv__kopf h1 {
	margin: 0;
}

/*
 * Weniger Kacheln als Spalten: das Raster wird mittig gesetzt, sonst klafft
 * rechts eine leere Spalte - so gesehen auf der Kategorie "Veranstaltungen"
 * mit zwei Beitraegen in drei Spalten.
 *
 * Nur fuer die dreispaltigen Listen. Ohne diese Einschraenkung traf die Regel
 * auch die zweispaltige Liste der Startseite: dort sassen die beiden Kacheln
 * auf 420 px zusammengedrueckt in der Mitte, links und rechts blieben je rund
 * 200 px leer, und die Titel brachen viel zu frueh um. Die Vorlage gibt jeder
 * Kachel dort die halbe Containerbreite.
 */
.wp-block-post-template.mx-news-card.columns-3:has(> :nth-child(-n+2):last-child) {
	grid-template-columns: repeat(auto-fit, minmax(280px, 420px));
	justify-content: center;
}

/* Teilen-Schaltflaechen (Ersatz fuer das Shariff-Plugin der Vorlage) ----- */
/*
 * Teilen-Leiste links neben dem Artikel, wie in der Vorlage.
 *
 * Die Vorlage stellt Shariff in eine Spalte col-lg-3 mit
 * "order-last order-lg-first": auf grossen Bildschirmen links vom Text, auf
 * kleinen darunter. Hier dasselbe mit den Bordmitteln des Blockthemes.
 */
.mx-artikel {
	max-width: var(--wp--style--global--content-size, 1113px);
	margin-inline: auto;
	gap: 27px;
}

.mx-artikel__rand { flex-grow: 0; }

.mx-artikel__text > .entry-content > *,
.mx-artikel__text > * {
	max-width: none;
}

@media (max-width: 781px) {
	.mx-artikel { flex-wrap: wrap; }
	.mx-artikel__rand { order: 2; flex-basis: 100%; }
	.mx-artikel__text { order: 1; flex-basis: 100%; }
}

.mx-teilen {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .5rem;
	position: sticky;
	top: 6rem;
}

@media (max-width: 781px) {
	.mx-teilen {
		flex-direction: row;
		flex-wrap: wrap;
		position: static;
		margin-block-start: 2rem;
	}
}

.mx-teilen__knopf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 4px;
	background: var(--wp--preset--color--green);
	color: #fff;
	text-decoration: none;
	transition: background-color .15s ease;
}

.mx-teilen__knopf:hover,
.mx-teilen__knopf:focus-visible {
	background: var(--wp--preset--color--primary);
	color: #fff;
}

.mx-teilen__knopf svg { display: block; }

/* Auf farbigen Abschnitten kehrt sich der Knopf um. */
.mx-section--dark .mx-teilen__knopf,
.mx-section--primary .mx-teilen__knopf,
.mx-section--gradient .mx-teilen__knopf {
	background: transparent;
	border-color: rgba(255, 255, 255, .5);
	color: #fff;
}

.mx-section--dark .mx-teilen__titel,
.mx-section--primary .mx-teilen__titel,
.mx-section--gradient .mx-teilen__titel {
	color: rgba(255, 255, 255, .8);
}

/* OnePager-Sammlung ----------------------------------------------------- */

.mx-onepager__gruppe + .mx-onepager__gruppe {
	margin-top: 2.5rem;
}

.mx-onepager__kategorie {
	margin: 0 0 1rem;
	font-size: var(--wp--preset--font-size--x-large);
	color: var(--wp--preset--color--dark);
}

.mx-onepager__liste {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mx-onepager__karte {
	display: flex;
	flex-direction: column;
	border: 2px solid var(--wp--preset--color--green);
	border-radius: 30px;
	overflow: hidden;
	background: #fff;
}

.mx-onepager__oeffnen {
	display: flex;
	flex-direction: column;
	gap: .4rem;
	flex: 1 1 auto;
	padding: 1.4rem 1.3rem 1rem;
	border: 0;
	background: none;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.mx-onepager__oeffnen:hover,
.mx-onepager__oeffnen:focus-visible {
	background: var(--wp--preset--color--green-soft);
}

/* Die Art steht als kleine Marke ueber dem Titel - PDF oder HTML. */
.mx-onepager__art {
	align-self: flex-start;
	padding: .1em .6em;
	border-radius: 999px;
	background: var(--wp--preset--color--green);
	color: #fff;
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .06em;
}

.mx-onepager__titel {
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--dark);
}


.mx-onepager__direkt {
	padding: .6rem 1.3rem 1rem;
	font-size: .82rem;
	color: var(--wp--preset--color--primary);
}

.mx-onepager--leer p {
	color: var(--wp--preset--color--grey);
}

/* Anzeigeflaeche */
.mx-onepager__buehne {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	background: rgba(11, 36, 67, .7);
}

.mx-onepager__buehne[hidden] {
	display: none;
}

body.mx-onepager-offen {
	overflow: hidden;
}

.mx-onepager__rahmen {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 1140px;
	height: calc(100vh - 2rem);
	background: #fff;
	border-radius: 10px;
	overflow: hidden;
}

.mx-onepager__kopf {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: .9rem 1.2rem;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.mx-onepager__buehne-titel {
	flex: 1 1 auto;
	margin: 0;
	font-weight: 600;
	color: var(--wp--preset--color--dark);
}

.mx-onepager__neu {
	font-size: .85rem;
	color: var(--wp--preset--color--primary);
	white-space: nowrap;
}

.mx-onepager__zu {
	width: 2rem;
	height: 2rem;
	border: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--light);
	font-size: 1.3rem;
	line-height: 1;
	cursor: pointer;
}

.mx-onepager__inhalt {
	flex: 1 1 auto;
	min-height: 0;
}

.mx-onepager__rahmeninhalt {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

@media (max-width: 575px) {
	.mx-onepager__rahmen {
		height: calc(100vh - 1rem);
	}

	.mx-onepager__buehne {
		padding: .5rem;
	}
}

/*
 * Solange eine Anzeige offen ist, treten der Aufruf am Seitenrand und der
 * Knopf nach oben zurueck - sonst liegen sie ueber dem Inhalt.
 */
body.mx-onepager-offen .mx-cta,
body.mx-onepager-offen .mx-to-top,
body.mx-cookie-offen .mx-cta,
body.mx-cookie-offen .mx-to-top {
	display: none;
}

/*
 * H1, die aus einer H2 hochgestuft wurde (inc/seo-technik.php): behaelt in
 * allen drei Groessenbereichen die Masse der H2, damit sich nichts verschiebt.
 */
h1.mx-h1--wie-h2 { font-size: var(--wp--preset--font-size--xx-large); }
@media (max-width: 1199.98px) { h1.mx-h1--wie-h2 { font-size: calc(1.3472rem + 1.3122vw); } }
@media (max-width: 575.98px) { h1.mx-h1--wie-h2 { font-size: 24px; } }

/*
 * Haeufige Fragen (inc/faq.php).
 *
 * Sichtbarer Text, keine Aufklapper: was zugeklappt ist, wird von
 * KI-Systemen schlechter erfasst und von Menschen gar nicht gelesen.
 * Die helle Flaeche laeuft ueber die volle Breite wie die uebrigen
 * Abschnitte der Vorlage, der Inhalt bleibt auf Textbreite.
 */
.mx-faq {
  margin-block-start: clamp(2.5rem, 6vw, 4.5rem);
  padding-block: clamp(2.25rem, 5vw, 3.5rem);
  background: var(--wp--preset--color--light);
  /* Vollbreite wie .alignfull im Theme: ueber die negativen Root-Paddings,
     nicht ueber 100vw - das wuerde die Scrollbalkenbreite mitrechnen und
     waagerechtes Scrollen ausloesen. */
  margin-inline: calc(-1 * var(--wp--style--root--padding-left, 1rem))
                 calc(-1 * var(--wp--style--root--padding-right, 1rem));
  width: auto;
  max-width: none;
}

.mx-faq__innen {
  max-width: 1113px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}

.mx-faq__titel {
  margin-block: 0 clamp(1.25rem, 3vw, 2rem);
  color: var(--wp--preset--color--dark);
}

.mx-faq__paar + .mx-faq__paar {
  margin-block-start: clamp(1.5rem, 3vw, 2.25rem);
  padding-block-start: clamp(1.5rem, 3vw, 2.25rem);
  border-block-start: 1px solid var(--wp--preset--color--border);
}

.mx-faq__frage {
  margin-block: 0 .55rem;
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 700;
  color: var(--wp--preset--color--dark);
  max-width: 62ch;
}

.mx-faq__antwort {
  margin-block: 0;
  max-width: 68ch;
}

/*
 * Vorschaubild auf den OnePager-Karten.
 *
 * Das Bild liegt als Datei neben dem OnePager (gleicher Name, .png). Es sitzt
 * oben in der Karte, im Seitenverhaeltnis der Vorlage, und wird beim
 * Ueberfahren leicht herangezogen. Fehlt es, bleibt eine ruhige Flaeche in der
 * Hausfarbe stehen - die Karte behaelt so in jeder Reihe dieselbe Hoehe.
 */
.mx-onepager__oeffnen { padding-top: 0; }

.mx-onepager__bild {
  display: block;
  aspect-ratio: 420 / 297;
  margin: 0 0 1rem;
  overflow: hidden;
  background: var(--wp--preset--color--light);
  border-bottom: 1px solid var(--wp--preset--color--border);
}

.mx-onepager__bild img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform .25s ease;
}

.mx-onepager__oeffnen:hover .mx-onepager__bild img,
.mx-onepager__oeffnen:focus-visible .mx-onepager__bild img {
  transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
  .mx-onepager__bild img { transition: none; }
  .mx-onepager__oeffnen:hover .mx-onepager__bild img { transform: none; }
}

/*
 * Live-Vorschau: der OnePager selbst, verkleinert.
 *
 * Der Rahmen ist auf eine feste Entwurfsbreite gesetzt und wird herunter-
 * skaliert. Den genauen Faktor setzt modernx.js je Karte; der Vorgabewert
 * hier passt fuer die uebliche Kartenbreite, damit auch ohne Skript nichts
 * verrutscht.
 */
.mx-onepager__bild--live {
  position: relative;
  --mx-vorschau-breite: 1100px;
  --mx-vorschau-skala: .22;
  /* Faellt der Rahmen aus - etwa PDF auf dem Telefon -, bleibt diese
     Flaeche sichtbar statt eines weissen Lochs. */
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--wp--preset--color--primary) 12%, transparent),
      color-mix(in srgb, var(--wp--preset--color--green) 12%, transparent));
}

/*
 * PDF-Seiten sind hochkant. Der Rahmen wird schmaler angesetzt, damit der
 * Seitenkopf die Kachelbreite fuellt statt als Briefmarke in der Mitte zu
 * stehen.
 */
.mx-onepager__bild--pdf { --mx-vorschau-breite: 780px; }

.mx-onepager__bild--live iframe {
  position: absolute;
  inset: 0;
  width: var(--mx-vorschau-breite);
  height: calc(var(--mx-vorschau-breite) / (420 / 297));
  border: 0;
  transform-origin: top left;
  transform: scale(var(--mx-vorschau-skala));
  pointer-events: none;
  background: #fff;
}

/* Ohne Bild und ohne HTML: Flaeche in den Hausfarben. */
.mx-onepager__bild--leer {
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--wp--preset--color--primary) 12%, transparent),
      color-mix(in srgb, var(--wp--preset--color--green) 12%, transparent));
}

/* Die Marken sitzen jetzt unter dem Bild und brauchen den Innenabstand. */
.mx-onepager__art,
.mx-onepager__titel { padding-inline: 1.3rem; }

.mx-onepager__art { padding-top: .2rem; }
.mx-onepager__titel { padding-bottom: .9rem; }