/* components.css
 *
 * Stile für wiederverwendbare Komponenten wie Buttons, Cards, Badges, Accordions usw.
 * Dieser Bereich dient der modularen Gestaltung einzelner UI-Elemente.
 *
 * Aktuell leer – bereit für individuelle Komponenten-Styles.
 */


/* Angebots-Karte */
.card {
  position: relative;
  overflow: hidden;
}

.card .wp-block-post-terms .wp-block-post-terms__separator {
  display: none;
}

@media (min-width: 768px) {
  .card-content {
    z-index: 1;
    padding-right: calc(100% / 3);
  }

  .card .image-content {
    min-width: 400px;
    max-width: 400px;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 0;
  }
}

@media (max-width: 767px) {
  .card-content {
    min-height: auto !important;
    align-items: center;
  }

  .card {
    flex-direction: column;
    text-align: center;
    padding-right: var(--wp--preset--spacing--40) !important;
  }

  .card-image {
    order: -1;
    max-width: 100%;
  }
}

/* Tag-Liste */
.tag-list {
  display: flex;
  list-style: none;
  padding: 0;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--10);
}

/* Team-Mitglieder */
.team-member {
  overflow: hidden;
  position: relative;
}

.team-member .image-wrapper .button-container {
  position: absolute;
  bottom: var(--wp--preset--spacing--30);
  right: var(--wp--preset--spacing--30);
}

/* Badge für Bewertungen */
@media (min-width: 1024px) {
  .reviewBadge {
    position: relative;
    top: -50%;
    transform: translateY(-50%);
  }
}

/* Cursor-Animation */
.tooth {
  width: 50px;
  height: 50px;
  position: fixed;
  top: 0;
  left: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.tooth svg {
  width: 50px;
  height: auto;
}

.tooth svg path {
  fill: var(--color-white);
  stroke: var(--color-black);
  stroke-width: 8;
}

/* Popup (Popmake) */
.pum-container p>a:hover {
  color: var(--color-primary-light);
}

@media (max-width: 1023px) {
  .pum-container {
    width: auto !important;
    height: auto !important;
    /* min-height: 100%; */
    top: 20px !important;
    left: 20px !important;
    right: 20px !important;
    bottom: 20px !important;
    border-radius: 0 !important;
    overflow-y: scroll !important;
    ;
    margin-bottom: 0 !important;
    ;
  }
}

.pum-container .pum-close.popmake-close {
  top: 10px !important;
  right: 20px !important;
}

@media (min-width: 1024px) and (max-width: 1919px) {
  .pum-container {
    margin-left: -35% !important;
    width: 70% !important;
  }
}

@media (min-width: 1920px) {
  .pum-container {
    margin-left: -25% !important;
    width: 50% !important;
  }
}

/* Responsive Iframe Wrapper */
body:not(.block-editor-page) .iframeWrapper-responsive {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}

body:not(.block-editor-page) .iframeWrapper-responsive iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}


/* ===== Hero Cover ===== */
.hero-cover {
  position: relative;
}

.hero-cover.wp-block-cover>.wp-block-cover__inner-container {
  /* 'static' ist hier expliziter als 'initial' */
  position: static;
}

/* --------------------------------------------------------------------- *
 * Inhaltsbreite der überarbeiteten Seiten
 * 1340px auf dem Desktop, darunter volle Breite mit 15px Rand.
 * Bewusst auf body.home begrenzt – die übrigen Seiten behalten die
 * bisherigen 1024px aus dem Parent-Theme.
 * --------------------------------------------------------------------- */

body.home {
  --wp--style--global--content-size: var(--content-max-width);
  /* Grundfarbe der Startseite (Figma 80:2188 = #C8E2F7).
     Entspricht exakt primary-light (#A3CEF2) mit 60 % über Weiss. */
  background-color: #C8E2F7;
}

/* Im Editor ersetzt WordPress "body" durch ".editor-styles-wrapper" – die
   Regel oben greift dort also nicht. Damit die Startseite im Backend gleich
   aussieht, gilt sie hier zusätzlich, sobald der Angebot-Block vorhanden ist. */
.editor-styles-wrapper:has(.angebot) {
  --wp--style--global--content-size: var(--content-max-width);
  background-color: #C8E2F7;
}

/* --------------------------------------------------------------------- *
 * Hero der Startseite · Figma 20:3142 (Desktop) / 2013:130 (Mobile)
 * Der Videohintergrund bleibt; darüber liegen Titel, Text und Button.
 * --------------------------------------------------------------------- */

/* Figma 20:3144 Container – Inhalt sitzt unten links, Abstand 50 zum Rand.
   Der Cover-Block ist von Haus aus eine Flex-Zeile; als Spalte mit
   justify-content: flex-end sitzt der Inhalt unten und nimmt die volle
   Breite ein. */
.hero-cover.wp-block-cover {
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  /* Inhaltsbreite 1340px, darunter volle Breite mit 15px Rand.
     Der seitliche Abstand steckt hier statt im inner-container, weil der
     Core dessen Margins und align-self überschreibt. */
  padding: 0 max(var(--content-gutter),
                 calc((100% - var(--content-max-width)) / 2));
}

/* Der Cover-Block ist keine Gruppe, bekommt den Gutter also nicht automatisch;
   deshalb hier dieselbe Variable wie bei den übrigen Blöcken.
   position/z-index sind nötig, weil die Regel weiter oben den Container auf
   'static' setzt – sonst liegt der Text hinter Video und Abdunklung. */
.hero-cover.wp-block-cover .wp-block-cover__inner-container {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  /* Figma 20:3144 gap 30 zwischen Textgruppe und Button */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
  /* Figma 20:3144 – 50px Abstand nach unten; seitlich übernimmt der Cover */
  padding: 0 0 50px;
}

/* Figma 20:3145 Frame 2 gap 20 zwischen Titel und Text */
.hero-cover .hero-cover__title {
  /* Figma 20:3146 = Manrope 600 40/45, #FFFFFF, Textbreite 557.
     Überschriften laufen im Theme sonst auf "baga"; der Entwurf zeigt für
     den Hero-Titel ausdrücklich Manrope. */
  font-family: var(--wp--preset--font-family--body);
  max-width: 557px;
  margin: 0;
  color: var(--color-white);
  font-size: 40px;
  font-weight: 600;
  line-height: 45px;
  letter-spacing: 0;
}

.hero-cover .hero-cover__text {
  /* Figma 20:3152 = Manrope 400 16/22.4, #FFFFFF, Textbreite 408 */
  max-width: 408px;
  /* 20 statt gap, weil Titel und Text eine eigene Gruppe bilden (Figma 20:3145) */
  margin: -10px 0 0;
  color: var(--color-white);
  font-size: 16px;
  font-weight: 400;
  line-height: 22.4px;
}

/* Das constrained-Layout zentriert seine Kinder über auto-Margins mit
   !important – im Entwurf steht der Inhalt linksbündig (Figma 20:3144 cal MIN). */
.hero-cover .hero-cover__title,
.hero-cover .hero-cover__text,
.hero-cover .hero-cover__actions {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.hero-cover .hero-cover__actions {
  margin-top: 0;
  margin-bottom: 0;
}

.hero-cover .hero-cover__title {
  max-width: 557px;
}

.hero-cover .hero-cover__text {
  max-width: 408px;
}

.hero-cover .hero-cover__actions .wp-block-button__link {
  /* Figma 20:3153 Link = padding 18/30, radius 100, #FF499E */
  padding: 18px 30px;
  border-radius: 100px;
  background-color: var(--theme-color-secondary);
  /* Figma 20:3154 = Manrope 500 16/24, #FFFFFF */
  color: var(--color-white);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}

/* Mobile: Bild oben, Text darunter auf Weiss · Figma 80:3589 + 80:2176 ---- */

@media (max-width: 781.98px) {

  /* Figma 2013:130 – auf dem Handy steht der Text nicht mehr im Bild,
     sondern darunter auf weissem Grund. Der Cover-Block wird dafür zum
     normalen Blockfluss: das Video bekommt eine feste Höhe, der Textteil
     folgt darunter. (margin-top am inner-container greift nicht, den
     überschreibt der Core mit hoher Spezifität.) */
  .hero-cover.wp-block-cover {
    display: block;
    /* Figma 80:3590 Rectangle 14 = 375x384 */
    min-height: 384px !important;
    height: auto;
    /* Der weisse Textblock geht über die volle Breite (Figma 80:2176 = 375);
       der seitliche Rand von 15px sitzt im inner-container. */
    padding: 384px 0 0;
    overflow: visible;
    background-color: var(--color-white);
  }

  .hero-cover.wp-block-cover .wp-block-cover__video-background,
  .hero-cover.wp-block-cover .wp-block-cover__background,
  .hero-cover.wp-block-cover .wp-block-cover__image-background {
    top: 0;
    height: 384px;
  }

  .hero-cover.wp-block-cover .wp-block-cover__inner-container {
    /* Figma 80:2176 = padding 40/15, Hintergrund #FFFFFF */
    padding: 40px 15px;
    background-color: var(--color-white);
    /* Figma 80:2177 Container gap 24 */
    gap: 24px;
  }

  .hero-cover .hero-cover__title {
    /* Figma 80:2179 = Manrope 700 28/33.6, #000000 */
    max-width: none;
    color: var(--color-black);
    font-size: 28px;
    font-weight: 700;
    line-height: 33.6px;
  }

  .hero-cover .hero-cover__text {
    /* Figma 80:2185 = Manrope 400 16/22.4, #000000 */
    max-width: none;
    /* Figma 80:2178 gap 16 zwischen Titel und Text */
    margin-top: -8px;
    color: var(--color-black);
  }

  .hero-cover .hero-cover__actions {
    /* Figma 80:2186 Link füllt die Breite */
    width: 100%;
  }

  .hero-cover .hero-cover__actions .wp-block-button {
    width: 100%;
  }

  .hero-cover .hero-cover__actions .wp-block-button__link {
    /* Figma 80:2186 = padding 12/30 */
    display: block;
    width: 100%;
    padding: 12px 30px;
    text-align: center;
  }
}

/* --------------------------------------------------------------------- *
 * Hero der Invisalign-Seite · Figma 8:414 (Desktop) / 2024:132 (Mobile)
 * Gleicher Aufbau wie der Hero der Startseite. Abweichend sind nur die
 * Titelgroesse, die Zeile mit dem Standort-Symbol und ein fester Umbruch
 * auf dem Handy; alles Uebrige kommt aus .hero-cover.
 * --------------------------------------------------------------------- */

.hero-cover--invisalign .hero-cover__title {
  /* Figma 1:1073 = Manrope 600 36/45, #FFFFFF, Textbreite 516 */
  max-width: 516px;
  font-size: 36px;
  line-height: 45px;
}

.hero-cover--invisalign .hero-cover__meta {
  /* Figma 3:9 = Symbol und Text nebeneinander, gap 10, mittig */
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: none;
  /* Figma 1:1076 = Manrope 400 20/30, #FFFFFF */
  font-size: 20px;
  line-height: 30px;
}

.hero-cover--invisalign .hero-cover__meta-icon {
  /* Figma 3:10 = 20x20. Als Maske eingebunden, damit die Farbe der
     Textfarbe folgt: im Entwurf weiss auf dem Video, auf dem Handy
     schwarz im weissen Textblock. */
  display: block;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask: url("../images/icon-marker-pin.svg") no-repeat center / contain;
  mask: url("../images/icon-marker-pin.svg") no-repeat center / contain;
}

/* Der Umbruch vor "in Luzern" steht nur im Handy-Entwurf (Figma 77:4223). */
.hero-cover__title br.br-sm {
  display: none;
}

@media (max-width: 781.98px) {

  .hero-cover__title br.br-sm {
    display: inline;
  }

  /* Die Regeln oben stehen spaeter in der Datei als der Handy-Block des
     Basis-Heros und wuerden ihn sonst ueberschreiben – deshalb hier noch
     einmal die Werte des Handy-Entwurfs. */
  .hero-cover--invisalign .hero-cover__title {
    /* Figma 77:4223 = Manrope 700 28/33.6, #000000 */
    max-width: none;
    font-size: 28px;
    line-height: 33.6px;
  }

  .hero-cover--invisalign .hero-cover__meta {
    /* Figma 77:4229 = Manrope 400 16/19.2, #000000 */
    font-size: 16px;
    line-height: 19.2px;
  }

  .hero-cover--invisalign .hero-cover__meta-icon {
    /* Figma 77:4225 = 16x16 */
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
  }
}

/* --------------------------------------------------------------------- *
 * Intro mit Schaltfläche · Figma 1:2122 (Desktop) / 78:4233 (Mobile)
 * Zentrierter Titel, Fliesstext und eine Schaltfläche.
 * Die Fläche selbst ist ohne Hintergrund – die Farbe kommt von der Seite
 * (Figma 1:1066 = #A3CEF2 mit 60 %, also #C8E2F7).
 * --------------------------------------------------------------------- */

body.page-id-1218 {
  /* Figma 1:1066 / 78:4233 = #C8E2F7 als Seitenhintergrund */
  background-color: #C8E2F7;
}

.intro-cta {
  /* Figma 1:2122 = Spalte, mittig, gap 30, padding 100 oben und unten */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  padding: 100px var(--content-gutter);
}

/* Der Fluss-Layout-Abstand des Themes käme zum gap hinzu. */
.intro-cta > *,
.intro-cta .intro-cta__head > * {
  margin: 0;
}

.intro-cta .intro-cta__head {
  /* Figma 3:15 = 844 breit, gap 16, mittig */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 844px;
}

.intro-cta .intro-cta__title {
  /* Figma 1:1088 = 700 36/45, #4062BB, zentriert.
     Schriftart bleibt die Überschriftenschrift des Themes ("baga"). */
  font-size: 36px;
  font-weight: 700;
  line-height: 45px;
  color: var(--theme-color-primary);
  text-align: center;
}

.intro-cta .intro-cta__text {
  /* Figma 1:1091 = Manrope 400 20/28, #000000, zentriert */
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
  color: var(--color-black);
  text-align: center;
}

.intro-cta .intro-cta__actions .wp-block-button__link {
  /* Figma 1:1096 = padding 12/16, radius 100, #FF499E;
     Figma 1:1098 = Manrope 500 16/24, #FFFFFF */
  padding: 12px 16px;
  border-radius: 100px;
  background-color: var(--theme-color-secondary);
  color: var(--color-white);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}

@media (max-width: 781.98px) {

  .intro-cta {
    /* Figma 78:4233 = padding 80/15/0, Figma 78:4234 gap 24 */
    gap: 24px;
    padding: 80px var(--content-gutter) 0;
  }

  .intro-cta .intro-cta__head {
    /* Figma 78:4235 gap 15, Breite der Fläche */
    gap: 15px;
    max-width: none;
  }

  .intro-cta .intro-cta__title {
    /* Figma 78:4236 = 700 28/33.6 */
    font-size: 28px;
    line-height: 33.6px;
  }

  .intro-cta .intro-cta__text {
    /* Figma 78:4245 = Manrope 400 16/22.4 */
    font-size: 16px;
    line-height: 22.4px;
  }

  .intro-cta .intro-cta__actions,
  .intro-cta .intro-cta__actions .wp-block-button {
    /* Figma 78:4243 = über die volle Breite */
    width: 100%;
  }

  .intro-cta .intro-cta__actions .wp-block-button__link {
    /* Figma 78:4243 = padding 12/30 */
    display: block;
    width: 100%;
    padding: 12px 30px;
    text-align: center;
  }
}

/* --------------------------------------------------------------------- *
 * Zwei Karten mit Bild und Liste · Figma 1:1100 (Desktop) / 78:4264 (Mobile)
 * Aufbau: <div.split-cards> > <div.split-cards__card> >
 *           <figure.split-cards__figure> + <div.split-cards__body>
 *             > <h3.split-cards__title> + <ul.split-cards__list>
 *               > <li><strong>Titel</strong>Text</li>
 * Die zweite Karte spiegelt die Reihenfolge (Bild rechts).
 * Der Hintergrund der Fläche kommt von der Seite; die Bergkette liefert
 * weiterhin die bestehende Utility-Klasse .bergkette-1.
 * --------------------------------------------------------------------- */

.split-cards {
  /* Figma 1:1100 = Abstand 40 zwischen den Karten, seitlich 50 bei 1440;
     oben und unten kein Abstand. Die Karte bleibt bei 1340 stehen. */
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 0 max(var(--content-gutter),
                 calc((100% - var(--content-max-width)) / 2));
}

.split-cards > * {
  margin: 0;
}

.split-cards .split-cards__card {
  /* Figma 1:1102 = weiss, radius 8, padding 8, gap 50, mittig */
  display: flex;
  align-items: center;
  gap: 50px;
  padding: 8px;
  border-radius: 8px;
  background-color: var(--color-white);
}

.split-cards .split-cards__card--reverse {
  /* Figma 4:2 = Bild rechts, Text links */
  flex-direction: row-reverse;
}

.split-cards .split-cards__card > * {
  /* Der Fluss-Abstand des Themes (15px) käme sonst auf die Textspalte. */
  margin: 0;
}

.split-cards .split-cards__figure {
  /* Figma 1:1103 = 637x500, radius 8. Beide Spalten je die Hälfte der
     Kartenbreite abzüglich des Abstands – "flex: 1" allein teilt ungleich,
     weil das Innenabstand-Paket der Textspalte mitzählt. */
  flex: 0 0 calc((100% - 50px) / 2);
  aspect-ratio: 637 / 500;
  margin: 0;
  border-radius: 8px;
  overflow: hidden;
}

.split-cards .split-cards__figure img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  object-fit: cover;
}

.split-cards .split-cards__body {
  /* Figma 1:1106 = zweite Hälfte, Titel oben, Liste unten (SPACE_BETWEEN),
     padding 50 – zur Bildseite hin 0 */
  display: flex;
  flex: 0 0 calc((100% - 50px) / 2);
  flex-direction: column;
  justify-content: space-between;
  align-self: stretch;
  box-sizing: border-box;
  padding: 50px 50px 50px 0;
}

.split-cards .split-cards__card--reverse .split-cards__body {
  /* Figma 4:5 = gespiegelt */
  padding: 50px 0 50px 50px;
}

.split-cards .split-cards__title {
  /* Figma 1:1109 = Manrope 500 30/37.2, #000000 */
  margin: 0;
  font-family: var(--wp--preset--font-family--body);
  font-size: 30px;
  font-weight: 500;
  line-height: 37.2px;
  color: var(--color-black);
}

.split-cards .split-cards__list {
  /* Figma 1:1111 = Abstand 30 zur Überschrift, Abstand 30 zwischen den
     Einträgen, keine Aufzählungszeichen */
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}

.split-cards .split-cards__list li {
  /* Der Einzug von 30px kommt aus dem Theme. */
  margin: 0;
  padding: 0;
  /* Figma 2:2124 = Manrope 400 16/22.4, #000000 */
  font-size: 16px;
  font-weight: 400;
  line-height: 22.4px;
  color: var(--color-black);
}

.split-cards .split-cards__list li strong {
  /* Figma 1:1116 = Manrope 700 20/26; Abstand 10 zum Text (Figma 1:1112) */
  display: block;
  margin-bottom: 10px;
  font-size: 20px;
  font-weight: 700;
  line-height: 26px;
}

@media (max-width: 781.98px) {

  .split-cards {
    /* Figma 78:4264 = padding 80/15/0, gap 40 */
    padding: 80px var(--content-gutter) 0;
  }

  /* Im Handy-Entwurf liegt keine Bergkette hinter den Karten. Beide Klassen
     im Selektor, weil utilities.css nach dieser Datei geladen wird. */
  .split-cards.bergkette-1 {
    background-image: none;
  }

  .split-cards .split-cards__card,
  .split-cards .split-cards__card--reverse {
    /* Figma 78:4271 = Spalte, Bild oben, gap 30, padding 8/8/30/8 */
    flex-direction: column;
    align-items: stretch;
    gap: 30px;
    padding: 8px 8px 30px;
  }

  .split-cards .split-cards__figure {
    /* Figma 78:4272 = 327x256 */
    flex: none;
    width: 100%;
    aspect-ratio: 327 / 256;
  }

  .split-cards .split-cards__body,
  .split-cards .split-cards__card--reverse .split-cards__body {
    /* Figma 78:4273 = padding 0/12, Abstand 30 zwischen Titel und Liste */
    flex: none;
    width: 100%;
    justify-content: flex-start;
    padding: 0 12px;
  }

  .split-cards .split-cards__title {
    /* Figma 78:4274 = Manrope 600 24/28.8 */
    font-size: 24px;
    font-weight: 600;
    line-height: 28.8px;
  }

  .split-cards .split-cards__list {
    /* Figma 78:4275 = gap 20, Abstand 30 zur Überschrift */
    gap: 20px;
  }

  .split-cards .split-cards__list li {
    /* Figma 78:4278 = Manrope 400 14/19.6 */
    font-size: 14px;
    line-height: 19.6px;
  }

  .split-cards .split-cards__list li strong {
    /* Figma 78:4277 = Manrope 700 16/19.2 */
    font-size: 16px;
    line-height: 19.2px;
  }
}

/* --------------------------------------------------------------------- *
 * Vier Schritte · Figma 1:1161 (Desktop) / 78:4318 (Mobile)
 * Aufbau: <div.steps> > <h2.steps__title> + <div.steps__grid> >
 *           <div.steps__card> > <div.steps__head> > <p.steps__badge>
 *                                                 + <h3.steps__card-title>
 *                             + <p.steps__text>
 * Im Markup steht der Schritt-Hinweis vor der Überschrift (Reihenfolge des
 * Handy-Entwurfs); auf dem Desktop dreht row-reverse die Zeile um.
 * --------------------------------------------------------------------- */

.steps {
  /* Figma 1:1161 = padding 100 oben/unten, seitlich 50 bei 1440 */
  padding: 100px max(var(--content-gutter),
                     calc((100% - var(--content-max-width)) / 2));
}

.steps > *,
.steps .steps__grid > *,
.steps .steps__card > *,
.steps .steps__head > * {
  margin: 0;
}

.steps .steps__title {
  /* Figma 1:1162 = Textfläche 1024 breit, mittig; Schriftgrösse und Farbe
     (700 36/45, #4062BB) kommen aus dem Theme. */
  max-width: 1024px;
  margin: 0 auto;
  text-align: center;
}

.steps .steps__grid {
  /* Figma 7:69 / 7:68 = zwei Spalten mit Abstand 16, Abstand 50 zur
     Überschrift (Figma 1:1165 padding-top) */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 50px;
}

.steps .steps__card {
  /* Figma 1:1166 = weiss, radius 8, padding 30, Abstand 24 */
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 30px;
  border-radius: 8px;
  background-color: var(--color-white);
}

.steps .steps__head {
  /* Figma 7:93 = Überschrift links, Schritt-Hinweis rechts, mittig, gap 30 */
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
}

.steps .steps__badge {
  /* Figma 7:97 = padding 4/10, radius 4, #4062BB mit 20 %;
     Figma 7:98 = Manrope 700 15/30, #4062BB */
  flex: none;
  padding: 4px 10px;
  border-radius: 4px;
  background-color: rgba(64, 98, 187, 0.2);
  color: var(--theme-color-primary);
  font-size: 15px;
  font-weight: 700;
  line-height: 30px;
  text-align: center;
}

.steps .steps__card-title {
  /* Figma 1:1172 = Manrope 600 24/26, #000000 */
  font-family: var(--wp--preset--font-family--body);
  font-size: 24px;
  font-weight: 600;
  line-height: 26px;
  color: var(--color-black);
}

.steps .steps__text {
  /* Figma 1:1175 = Manrope 400 20/30, #000000 */
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
  color: var(--color-black);
}

@media (max-width: 781.98px) {

  .steps {
    /* Figma 78:4318 = padding 80/15/0 */
    padding: 80px var(--content-gutter) 0;
  }

  .steps .steps__title {
    /* Figma 78:4321 = 700 28/33.6 */
    max-width: none;
    font-size: 28px;
    line-height: 33.6px;
  }

  .steps .steps__grid {
    /* Figma 78:4322 = eine Spalte, Abstand 15, Abstand 40 zur Überschrift */
    grid-template-columns: 1fr;
    gap: 15px;
    margin-top: 40px;
  }

  .steps .steps__card {
    /* Figma 78:4324 = padding 20, Abstand 20 */
    gap: 20px;
    padding: 20px;
  }

  .steps .steps__head {
    /* Figma 78:4380 = Schritt-Hinweis über der Überschrift, Abstand 15 */
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  .steps .steps__badge {
    /* Figma 78:4327 = padding 3/10; Figma 78:4328 = 700 13/30 */
    padding: 3px 10px;
    font-size: 13px;
  }

  .steps .steps__card-title {
    /* Figma 78:4326 = Manrope 700 20/26 */
    font-size: 20px;
    font-weight: 700;
    line-height: 26px;
  }

  .steps .steps__text {
    /* Figma 78:4329 = Manrope 400 14/19.6 */
    font-size: 14px;
    line-height: 19.6px;
  }
}

/* --------------------------------------------------------------------- *
 * Kosten-Karte mit Schaltfläche · Figma 1:1220 (Desktop) / 78:4432 (Mobile)
 * Blaue Karte mit Bergkette im Hintergrund, Text und Schaltfläche mittig.
 * Aufbau: <div.cta-card> > <div.cta-card__inner> >
 *           <div.cta-card__text> (Titel + Fliesstext) + <div.cta-card__actions>
 * --------------------------------------------------------------------- */

.cta-card {
  /* Figma 1:1220 = seitlich 50 bei 1440, oben und unten kein Abstand */
  padding: 0 max(var(--content-gutter),
                 calc((100% - var(--content-max-width)) / 2));
}

.cta-card > *,
.cta-card .cta-card__inner > *,
.cta-card .cta-card__text > * {
  margin: 0;
}

.cta-card .cta-card__inner {
  /* Figma 7:196 = #4062BB, radius 12, padding 60, gap 30, mittig.
     Zweite Füllung ist dieselbe Bergkette wie in der Utility-Klasse
     (weiss mit 20 %); Grösse und Lage stammen aus dem imageTransform:
     Breite 52.52 % der Karte, Versatz 59.85 % / 65.27 % – sie läuft also
     unten rechts aus dem Bild heraus. */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  padding: 60px;
  border-radius: 12px;
  background-color: var(--theme-color-primary);
  background-image: url("../images/pilatus-bergkette-primary-light.svg");
  background-repeat: no-repeat;
  background-size: 52.52% auto;
  background-position: 125.9% 112.7%;
}

.cta-card .cta-card__text {
  /* Figma 7:205 = 844 breit, gap 16, mittig */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 844px;
}

.cta-card .cta-card__title {
  /* Figma 1:1223 = 700 36/45 weiss, zentriert (Grösse aus dem Theme) */
  max-width: none;
  color: var(--color-white);
  text-align: center;
}

.cta-card .cta-card__lead {
  /* Figma 1:1226 = Manrope 400 20/30, weiss, zentriert */
  max-width: none;
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
  color: var(--color-white);
  text-align: center;
}

.cta-card .cta-card__actions .wp-block-button__link {
  /* Figma 7:201 = padding 18/30, radius 100, #FF499E;
     Figma 7:202 = Manrope 500 16/24, weiss */
  padding: 18px 30px;
  border-radius: 100px;
  background-color: var(--theme-color-secondary);
  color: var(--color-white);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}

@media (max-width: 781.98px) {

  .cta-card {
    /* Figma 78:4432 = padding 80/15/0 */
    padding: 80px var(--content-gutter) 0;
  }

  .cta-card .cta-card__inner {
    /* Figma 78:4433 = padding 30/20; Bergkette 118.26 % breit, unten links */
    padding: 30px 20px;
    background-size: 118.26% auto;
    background-position: 0% 93.96%;
  }

  .cta-card .cta-card__text {
    /* Figma 78:4434 = gap 15, volle Breite */
    max-width: none;
    gap: 15px;
  }

  .cta-card .cta-card__title {
    /* Figma 78:4435 = 700 28/33.6 */
    font-size: 28px;
    line-height: 33.6px;
  }

  .cta-card .cta-card__lead {
    /* Figma 78:4436 = Manrope 400 16/22.4 */
    font-size: 16px;
    line-height: 22.4px;
  }

  .cta-card .cta-card__actions,
  .cta-card .cta-card__actions .wp-block-button {
    /* Figma 78:4437 = über die volle Breite */
    width: 100%;
  }

  .cta-card .cta-card__actions .wp-block-button__link {
    /* Figma 78:4437 = padding 12/30 */
    display: block;
    width: 100%;
    padding: 12px 30px;
    text-align: center;
  }
}

/* --------------------------------------------------------------------- *
 * Zahnfehlstellungen · Figma 1:1234 (Desktop) / 78:4447 (Mobile)
 * Aufbau: <div.cases> > <div.cases__head> (Titel + Lauftext)
 *                     + <div.cases__grid> > <div.cases__card> >
 *                         <figure.cases__figure> + <div.cases__body>
 *                     + <p.cases__note>
 * --------------------------------------------------------------------- */

.cases {
  /* Figma 1:1234 = padding 100 oben/unten, seitlich 50 bei 1440 */
  padding: 100px max(var(--content-gutter),
                     calc((100% - var(--content-max-width)) / 2));
}

.cases > *,
.cases .cases__head > *,
.cases .cases__grid > *,
.cases .cases__card > *,
.cases .cases__body > * {
  margin: 0;
}

.cases .cases__head {
  /* Figma 7:226 = gap 16, mittig. Die 925 im Entwurf sind die Eigenbreite der
     Überschrift, keine Vorgabe – die Überschriftenschrift des Themes läuft
     etwas breiter und bräuchte sonst zwei Zeilen. */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.cases .cases__title {
  /* Figma 1:1236 = 700 36/45, #4062BB, zentriert (Grösse aus dem Theme) */
  max-width: none;
  text-align: center;
}

.cases .cases__lead {
  /* Figma 1:1239 = Manrope 400 20/28, #000000, Textfläche 656 */
  max-width: 656px;
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
  color: var(--color-black);
  text-align: center;
}

.cases .cases__grid {
  /* Figma 1:1241 = vier Spalten mit Abstand 16, Abstand 50 zur Kopfzeile */
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 50px;
}

.cases .cases__card {
  /* Figma 1:1243 = weiss, radius 8, padding 8/8/20, Abstand 30 */
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 8px 8px 20px;
  border-radius: 8px;
  background-color: var(--color-white);
}

.cases .cases__figure {
  /* Figma 8:241 = 307x215, radius 8 */
  aspect-ratio: 307 / 215;
  border-radius: 8px;
  overflow: hidden;
}

.cases .cases__figure img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  object-fit: cover;
}

.cases .cases__body {
  /* Figma 7:221 = padding 0/12, Abstand 15 */
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 0 12px;
}

.cases .cases__card-title {
  /* Figma 1:1246 = Manrope 700 20/26, #000000 */
  font-family: var(--wp--preset--font-family--body);
  font-size: 20px;
  font-weight: 700;
  line-height: 26px;
  color: var(--color-black);
}

.cases .cases__card-text {
  /* Figma 1:1249 = Manrope 400 16/22.4, #000000 */
  font-size: 16px;
  font-weight: 400;
  line-height: 22.4px;
  color: var(--color-black);
}

.cases .cases__note {
  /* Figma 1:1289 = Manrope 400 20/30, #000000, Textfläche 844,
     Abstand 30 zur Kartenreihe (Figma 1:1294 padding-top) */
  max-width: 844px;
  margin: 30px auto 0;
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
  color: var(--color-black);
  text-align: center;
}

@media (max-width: 781.98px) {

  .cases {
    /* Figma 78:4447 = padding 80/15 */
    padding: 80px var(--content-gutter);
  }

  .cases .cases__head {
    /* Figma 78:4448 = gap 15, volle Breite */
    max-width: none;
    gap: 15px;
  }

  .cases .cases__title {
    /* Figma 78:4449 = 700 28/33.6 */
    font-size: 28px;
    line-height: 33.6px;
  }

  .cases .cases__lead {
    /* Figma 78:4450 = Manrope 400 16/22.4, volle Breite */
    max-width: none;
    font-size: 16px;
    line-height: 22.4px;
  }

  .cases .cases__grid {
    /* Figma 78:4451 = eine Spalte, Abstand 15, Abstand 40 zur Kopfzeile */
    grid-template-columns: 1fr;
    gap: 15px;
    margin-top: 40px;
  }

  .cases .cases__card {
    /* Figma 78:4452 = Abstand 20 */
    gap: 20px;
  }

  .cases .cases__figure {
    /* Figma 78:4453 = 329x215 */
    aspect-ratio: 329 / 215;
  }

  .cases .cases__body {
    /* Figma 78:4454 = Abstand 10 */
    gap: 10px;
  }

  .cases .cases__card-text {
    /* Figma 78:4456 = Manrope 400 14/19.6 */
    font-size: 14px;
    line-height: 19.6px;
  }

  .cases .cases__note {
    /* Figma 78:4474 = Manrope 400 16/22.4 */
    max-width: none;
    font-size: 16px;
    line-height: 22.4px;
  }
}

/* Zwischenbreiten: zwei Karten pro Reihe (Wunsch des Kunden – im Entwurf
   gibt es dafür keinen eigenen Rahmen). Steht bewusst NACH dem Handy-Block,
   damit es zwischen 768 und 782 dessen eine Spalte überschreibt. */
@media (min-width: 768px) and (max-width: 991.98px) {

  .cases .cases__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --------------------------------------------------------------------- *
 * Fachzahnärzte · Figma 1:1295 (Desktop) / 78:4497 (Mobile)
 * Aufbau: <div.experts> > <h2.experts__title> + <p.experts__lead>
 *           + <div.experts__grid> > <div.experts__card> >
 *               <figure.experts__figure> + <div.experts__body> >
 *                 <h3.experts__name> + <div.experts__meta>
 * Flächenfarbe (primary-light, also #A3CEF2 mit 60 %) steht als
 * Block-Attribut im Beitrag – wie im Entwurf. Bergkette und ihre Lage sind
 * 1:1 vom Team-Abschnitt der Startseite übernommen (.team-cards).
 * --------------------------------------------------------------------- */

.experts {
  /* Figma 1:1295 = padding 100 oben/unten, seitlich 50 bei 1440 */
  padding: 100px max(var(--content-gutter),
                     calc((100% - var(--content-max-width)) / 2));
  /* Bergkette – Figma 1:1295 legt sie als Füllung der Fläche an:
     55 % x 18.73 % der Fläche, rechtsbündig, oben bei 85.03 % – sie läuft
     also unten aus dem Abschnitt heraus. In Prozent umgerechnet (der
     Prozentwert der Position bezieht sich auf Fläche minus Bild). */
  background-image: url("../images/pilatus-bergkette-primary-light-stretch.svg");
  background-repeat: no-repeat;
  background-size: 55% 18.73%;
  background-position: 100% 104.62%;
}

.experts > *,
.experts .experts__grid > *,
.experts .experts__card > *,
.experts .experts__body > *,
.experts .experts__meta > * {
  margin: 0;
}

.experts .experts__title {
  /* Figma 1:1298 = 700 36/45, #4062BB, zentriert (Grösse aus dem Theme) */
  max-width: none;
  text-align: center;
}

.experts .experts__lead {
  /* Figma 1:1301 = Manrope 400 20/28, #000000, Textfläche 844;
     Figma 1:1341 = Abstand 15 zur Überschrift */
  max-width: 844px;
  margin: 15px auto 0;
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
  color: var(--color-black);
  text-align: center;
}

.experts .experts__grid {
  /* Figma 1:1303 = drei Spalten mit Abstand 16, Abstand 50 zum Text */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 50px;
}

.experts .experts__card {
  /* Figma 1:1304 = weiss, radius 8, padding 8/8/20, Abstand 30 */
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 8px 8px 20px;
  border-radius: 8px;
  background-color: var(--color-white);
}

.experts .experts__figure {
  /* Figma 1:1307 = 420x290, radius 8 */
  aspect-ratio: 420 / 290;
  border-radius: 8px;
  overflow: hidden;
}

.experts .experts__figure img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  object-fit: cover;
}

.experts .experts__body {
  /* Figma 8:391 = padding 0/12, Abstand 16 */
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 12px;
}

.experts .experts__name {
  /* Figma 8:392 = Manrope 600 24/26, #000000 */
  font-family: var(--wp--preset--font-family--body);
  font-size: 24px;
  font-weight: 600;
  line-height: 26px;
  color: var(--color-black);
}

.experts .experts__meta {
  /* Figma 8:393 = Abstand 10 */
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.experts .experts__degree {
  /* Figma 8:394 = Manrope 500 20/28, #000000 */
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  color: var(--color-black);
}

.experts .experts__role {
  /* Figma 8:395 = Manrope 400 16/22.4, #000000 mit 60 % (Deckkraft der Ebene) */
  font-size: 16px;
  font-weight: 400;
  line-height: 22.4px;
  color: rgba(0, 0, 0, 0.6);
}

@media (max-width: 781.98px) {

  .experts {
    /* Figma 78:4497 = padding 80/15 */
    padding: 80px var(--content-gutter);
    /* Bergkette – Figma 78:4497 = 102.01 % x 5.51 % der Fläche,
       linksbündig, oben bei 94.87 % */
    background-size: 102.01% 5.51%;
    background-position: 0% 100.4%;
  }

  .experts .experts__title {
    /* Figma 78:4500 = 700 28/33.6 */
    font-size: 28px;
    line-height: 33.6px;
  }

  .experts .experts__lead {
    /* Figma 78:4502 = Manrope 400 16/22.4; Figma 78:4525 gap 16 */
    max-width: none;
    margin-top: 16px;
    font-size: 16px;
    line-height: 22.4px;
  }

  .experts .experts__grid {
    /* Figma 78:4503 = eine Spalte, Abstand 15, Abstand 40 zum Text */
    grid-template-columns: 1fr;
    gap: 15px;
    margin-top: 40px;
  }

  .experts .experts__card {
    /* Figma 78:4504 = Abstand 20 */
    gap: 20px;
  }

  .experts .experts__figure {
    /* Figma 78:4505 = 329x215 */
    aspect-ratio: 329 / 215;
  }

  .experts .experts__body {
    /* Figma 78:4506 = Abstand 15 */
    gap: 15px;
  }

  .experts .experts__name {
    /* Figma 78:4507 = Manrope 700 20/26 */
    font-size: 20px;
    font-weight: 700;
    line-height: 26px;
  }

  .experts .experts__meta {
    /* Figma 78:4508 = Abstand 4 */
    gap: 4px;
  }

  .experts .experts__degree {
    /* Figma 78:4509 = Manrope 600 16/22.4 */
    font-size: 16px;
    font-weight: 600;
    line-height: 22.4px;
  }

  .experts .experts__role {
    /* Figma 78:4510 = Manrope 400 14/19.6 */
    font-size: 14px;
    line-height: 19.6px;
  }
}

/* ===== Zahn-Illu ===== */
:root {
  /* leicht anpassbare Parameter */
  --tooth-angle: 12deg;
  --tooth-duration: 3.5s;
  /* responsive Größe zwischen 133px und 338px, abhängig von der Viewport-Breite */
  --tooth-max-width: clamp(133px, 16vw, 338px);
}

/* Keyframes: flüssiges Pendeln ohne "Stop" in der Mitte */
@keyframes tooth-swing {
  0% {
    transform: rotate(calc(-1 * var(--tooth-angle)));
  }

  50% {
    transform: rotate(var(--tooth-angle));
  }

  100% {
    transform: rotate(calc(-1 * var(--tooth-angle)));
  }
}

figure.wp-block-image.size-full.illu-zahn-hero {
  position: relative;
  margin-block-start: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
  width: 100%;
  max-width: var(--tooth-max-width);
  max-width: 133px;

  transform-origin: center bottom;
  animation: tooth-swing var(--tooth-duration) ease-in-out infinite;
  backface-visibility: hidden;
  will-change: transform;

  /* erst ab Tablet-Größe anzeigen */
  display: none;
}

@media (min-width: 767px) {
  figure.wp-block-image.size-full.illu-zahn-hero {
    display: block;
  }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  figure.wp-block-image.size-full.illu-zahn-hero {
    max-width: 233px;
  }
}

@media screen and (min-width: 1025px) and (max-width: 1600px) {
  figure.wp-block-image.size-full.illu-zahn-hero {
    max-width: 338px;
  }
}

@media (min-width: 1601px) {
  figure.wp-block-image.size-full.illu-zahn-hero {
    max-width: 380px;
  }
}

/* Positions-Modifier (kompakt & klar) */
figure.wp-block-image.size-full.illu-zahn-hero.position-bottom-right {
  position: absolute;
  right: 5vw;
  bottom: 5%;
}

figure.wp-block-image.size-full.illu-zahn-hero.position-top-right {
  position: absolute;
  right: 5vw;
  top: 5%;
}

figure.wp-block-image.size-full.illu-zahn-hero.position-top-1-right {
  position: absolute;
  right: 5vw;
  top: 15%;
}

/* Nutzer*innen mit Bewegungseinschränkung respektieren */
@media (prefers-reduced-motion: reduce) {
  figure.wp-block-image.size-full.illu-zahn-hero {
    animation: none;
  }
}
/* --------------------------------------------------------------------- *
 * "Unser Angebot" · Figma 20:3177 (Desktop) / 80:2188 (Mobile)
 * Drei Karten – auf dem Desktop nebeneinander, auf dem Handy als Slider.
 * --------------------------------------------------------------------- */

.angebot {
  /* Figma 20:3177 padding 100/50 – seitlich liefert der Gutter */
  padding-top: 100px;
  padding-bottom: 100px;
  /* Seitlicher Rand: früher kam er aus --theme-spacing-responsive-gutter des
     Themes; diese Variable steuert aber den globalen blockGap, deshalb hier
     die eigene Variable. */
  padding-left: var(--content-gutter);
  padding-right: var(--content-gutter);
}

/* Figma 20:3177 gap 50 zwischen Einleitung und Karten */
.angebot .angebot__intro {
  /* Figma 56:71 = 844 breit, zentriert, gap 16 */
  max-width: 844px;
  margin: 0 auto 50px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.angebot .angebot__title {
  /* Figma 56:72 = Manrope 700 36/45, ls -0.36, #4062BB.
     Überschriften laufen im Theme sonst auf "baga". */
  margin: 0;
  font-family: var(--wp--preset--font-family--body);
  font-size: 36px;
  font-weight: 700;
  line-height: 45px;
  letter-spacing: -0.36px;
  color: var(--theme-color-primary);
}

.angebot .angebot__lead {
  /* Figma 56:73 = Manrope 400 20/28, #000000 */
  margin: 0;
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
  color: var(--color-black);
}

/* Karten ---------------------------------------------------------------- */

.angebot .angebot__card {
  /* Kein gap: die Abstände stehen einzeln an den Elementen, damit der
     zugeklappte Zusatztext keinen doppelten Abstand hinterlässt. */
  display: flex;
  flex-direction: column;
  gap: 0;
  height: auto;
  padding: 0;
}

/* Das constrained-Layout zentriert die Kinder über auto-Margins und setzt
   eigene Blockabstände; im Entwurf steht alles linksbündig und die Abstände
   werden hier gesetzt (Figma 52:2336 gap 10). */
.angebot .angebot__card>* {
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-block-start: 0;
  margin-block-end: 0;
  max-width: none;
}

.angebot .angebot__image {
  margin: 0;
}

.angebot .angebot__image img {
  /* Figma 21:3887 = 426x426, radius 8, Bild beschnitten */
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 8px;
}

/* Figma 52:2336 = Textgruppe mit gap 10.
   Titel, Text, Zusatztext und Umschalter bilden zusammen die Textgruppe;
   der Abstand von 24 zum Bild kommt aus dem gap der Karte. */
.angebot .angebot__card-title {
  /* Figma 22:4032 = Manrope 700 20/26, #000000.
     Abstand 24 zum Bild (Figma 22:4039). */
  margin: 24px 0 0;
  font-family: var(--wp--preset--font-family--body);
  font-size: 20px;
  font-weight: 700;
  line-height: 26px;
  color: var(--color-black);
}

.angebot .angebot__card-text {
  /* Figma 52:2334 = Manrope 400 16/22.4, #000000. Abstand 10 (Figma 52:2336). */
  margin: 10px 0 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 22.4px;
  color: var(--color-black);
}

/* Aufklappbarer Zusatztext --------------------------------------------- */

.angebot .angebot__more {
  /* Die Höhe setzt das Skript aus scrollHeight; hier nur der Übergang.
     Eine reine CSS-Lösung über grid-template-rows funktioniert nur mit einem
     einzigen Kindelement – im Backend dürfen es beliebig viele Absätze sein.
     Ohne JavaScript bleibt der Text sichtbar, es geht also nichts verloren. */
  overflow: hidden;
  transition: max-height 0.35s ease;
}

/* Im Editor muss der Zusatztext bearbeitbar bleiben, deshalb dort immer offen. */
.editor-styles-wrapper .angebot .angebot__more {
  max-height: none !important;
  overflow: visible;
}

.angebot .angebot__more p {
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 22.4px;
  color: var(--color-black);
}

/* Figma 52:2336 gap 10 – Abstand zum ersten Absatz nur im offenen Zustand,
   sonst bliebe er als Reststreifen stehen. */
.angebot .angebot__card.is-open .angebot__more p:first-child,
.editor-styles-wrapper .angebot .angebot__more p:first-child {
  padding-top: 10px;
}

.angebot .angebot__more p+p {
  padding-top: 10px;
}

.angebot .angebot__toggle {
  /* Figma 53:3383 = Manrope 500 16/22.4, #FF499E.
     Steht als letztes Wort im ersten Absatz, deshalb inline. */
  display: inline;
  font-weight: 500;
  color: var(--theme-color-secondary);
  cursor: pointer;
  transition: color 0.3s ease-in-out;
}

.angebot .angebot__toggle:hover,
.angebot .angebot__toggle:focus-visible {
  color: var(--theme-color-primary);
}

/* Kartenreihe ----------------------------------------------------------- */

.angebot .angebot__list {
  /* Abstand kam früher aus dem globalen blockGap (damals 15px); seit die
     Theme-Variable nicht mehr überschrieben wird, hier ausgeschrieben. */
  margin-top: 15px;
  /* Figma 21:3872 = drei Spalten mit gap 30 */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  gap: 30px;
}

/* Der Flow-Layout-Standard setzt zwischen Geschwistern einen Blockabstand;
   in Grid und Flex verschiebt der die zweite und dritte Karte nach unten. */
.angebot .angebot__list>* {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* Fortschrittsbalken gehört laut Entwurf nur zur mobilen Ansicht */
.angebot .angebot__progress {
  /* Abstand kam früher aus dem globalen blockGap (damals 15px); seit die
     Theme-Variable nicht mehr überschrieben wird, hier ausgeschrieben. */
  margin-top: 15px;
  display: none;
}

/* Mobile ---------------------------------------------------------------- */

@media (max-width: 781.98px) {

  .angebot {
    /* Figma 80:2188 padding 80/15/0/15 */
    padding-top: 80px;
    padding-bottom: 0;
  }

  .angebot .angebot__intro {
    /* Figma 80:2190 gap 15, Abstand zum Slider 40 */
    margin-bottom: 40px;
    gap: 15px;
  }

  .angebot .angebot__title {
    /* Figma 80:2191 = Manrope 700 28/33.6, ls 0 */
    font-size: 28px;
    line-height: 33.6px;
    letter-spacing: 0;
  }

  .angebot .angebot__lead {
    /* Figma 80:2192 = Manrope 400 16/22.4 */
    font-size: 16px;
    line-height: 22.4px;
  }

  .angebot .angebot__card-title {
    /* Figma 80:2595 Abstand 20 zum Bild */
    margin-top: 20px;
  }

  .angebot .angebot__card-title {
    /* Figma 80:2599 = Manrope 700 16/26 */
    font-size: 16px;
    line-height: 26px;
  }

  .angebot .angebot__card-text,
  .angebot .angebot__more p {
    /* Figma 80:2600 / 80:2601 = 14/19.6 */
    font-size: 14px;
    line-height: 19.6px;
  }

  /* Figma 80:2612 – die Karten liegen nebeneinander und werden gewischt.
     Die nächste Karte schaut 34px hervor (Figma: 345 sichtbar, Karte 311). */
  .angebot .angebot__list {
    display: flex;
    grid-template-columns: none;
    gap: 20px;
    /* Die Reihe soll rechts bis an den Bildschirmrand laufen; der
       Innenabstand hält am Ende des Wischens denselben Rand wie links.
       !important, weil das constrained-Layout die Ränder auf auto setzt. */
    margin-right: calc(-1 * var(--content-gutter)) !important;
    padding-right: var(--content-gutter);
    overflow-x: auto;
    align-items: start;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .angebot .angebot__list::-webkit-scrollbar {
    display: none;
  }

  .angebot .angebot__card {
    flex: 0 0 calc(100% - 34px);
    scroll-snap-align: start;
  }

  /* Fortschrittsbalken – Figma 80:2615 = 345x2, Spur #B2D6F4, Fortschritt #4062BB */
  .angebot .angebot__progress {
    display: block;
    height: 2px;
    margin-top: 20px;
    border-radius: 10px;
    background-color: #B2D6F4;
    overflow: hidden;
  }

  .angebot .angebot__progress-bar {
    display: block;
    height: 100%;
    border-radius: 10px;
    background-color: var(--theme-color-primary);
    transform-origin: left center;
    transition: transform 0.2s ease-out;
  }
}

/* --------------------------------------------------------------------- *
 * "Deine Spezialisten" · Figma 58:77 (Desktop) / 80:2621 (Mobile)
 * Drei breite Karten untereinander: Nummer, Text, Link – Bild rechts.
 * --------------------------------------------------------------------- */

.spezialisten {
  /* Figma 58:77 padding 0/50/100/50 – seitlich liefert der Gutter */
  padding-top: 0;
  padding-bottom: 100px;
  /* Seitlicher Rand: früher kam er aus --theme-spacing-responsive-gutter des
     Themes; diese Variable steuert aber den globalen blockGap, deshalb hier
     die eigene Variable. */
  padding-left: var(--content-gutter);
  padding-right: var(--content-gutter);
}

.spezialisten .spezialisten__heading {
  /* Figma 58:79 = Manrope 700 36/45, ls -0.36, #4062BB */
  margin: 0;
  font-family: var(--wp--preset--font-family--body);
  font-size: 36px;
  font-weight: 700;
  line-height: 45px;
  letter-spacing: -0.36px;
  color: var(--theme-color-primary);
}

.spezialisten .spezialisten__lead {
  /* Figma 58:80 = Manrope 400 20/28, Breite 844 */
  max-width: 844px;
  /* Figma 58:78 gap 15 */
  margin: 15px auto 0;
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
  color: var(--color-black);
}

/* Figma 58:77 gap 50 zwischen Einleitung und Liste */
.spezialisten .spezialisten__list {
  /* Figma 60:195 gap 16 zwischen den Karten */
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 50px;
}

.spezialisten .spezialisten__list>* {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* Karte ----------------------------------------------------------------- */

.spezialisten .spezialisten__card {
  /* Figma 58:82 = 1340x299, padding 8/8/8/50, radius 8, weiss.
     row-reverse, weil das Bild im Markup zuerst steht – auf dem Handy
     gehört es nach oben, auf dem Desktop nach rechts. */
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  gap: 50px;
  min-height: 299px;
  box-sizing: border-box;
  padding: 8px 8px 8px 50px;
  border-radius: 8px;
}

/* Der Flow-Standard setzt Blockabstände zwischen den Kindern; im Flex-Layout
   verschieben die den Textteil nach unten. */
.spezialisten .spezialisten__card>*,
.spezialisten .spezialisten__body>*,
.spezialisten .spezialisten__content>* {
  margin-block-start: 0;
  margin-block-end: 0;
}

.spezialisten .spezialisten__image {
  /* Figma 58:84 = 311x283, radius 8. Das Verhältnis sitzt am Rahmen, nicht
     am <img>: auf lazy geladene Bilder legt Smush ein eigenes
     aspect-ratio mit !important, das jede Regel am Bild überschreibt. */
  flex: 0 0 311px;
  aspect-ratio: 311 / 283;
  /* overflow: hidden, damit die Eigenhöhe des Bildes den Rahmen nicht über
     das Verhältnis hinaus aufzieht. */
  overflow: hidden;
  margin: 0;
}

.spezialisten .spezialisten__image img {
  display: block;
  width: 100%;
  height: 100%;
  /* "contain" statt "cover": die Motive sind freigestellte Personen – bei
     "cover" schneidet das feste Seitenverhältnis Kopf und Füsse ab. */
  object-fit: contain;
  border-radius: 8px;
  /* Die Bilder sind freigestellt (rund 40-50 % transparent). Im Entwurf
     liegt darunter eine helle Fläche – Figma 60:174 / 60:193 = #F7F7F6. */
  background-color: #F7F7F6;
}

.spezialisten .spezialisten__body {
  /* Figma 60:155 = gap 50 zwischen Nummer und Text, oben 42 Abstand */
  flex: 1 1 auto;
  display: flex;
  gap: 50px;
  padding-top: 42px;
}

.spezialisten .spezialisten__num {
  /* Figma 58:86 = Manrope 400 16/22.4, eigene Spalte mit 32 Breite */
  flex: 0 0 32px;
  margin: 0;
  /* Figma 58:115 padding-top 5 */
  padding-top: 5px;
  font-size: 16px;
  font-weight: 400;
  line-height: 22.4px;
  color: var(--color-black);
}

.spezialisten .spezialisten__content {
  flex: 1 1 auto;
}

.spezialisten .spezialisten__title {
  /* Figma 60:151 = Manrope 500 30/37.2, Textbreite 575 */
  max-width: 575px;
  margin: 0;
  font-family: var(--wp--preset--font-family--body);
  font-size: 30px;
  font-weight: 500;
  line-height: 37.2px;
  color: var(--color-black);
}

.spezialisten .spezialisten__text {
  /* Figma 60:152 = Manrope 400 16/22.4, Breite 575, gap 15 zum Titel */
  max-width: 575px;
  margin: 15px 0 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 22.4px;
  color: var(--color-black);
}

/* Link mit Pfeilkreis --------------------------------------------------- */

.spezialisten .spezialisten__link {
  /* Figma 60:149 gap 30 zwischen Textblock und Link */
  margin: 30px 0 0;
}

.spezialisten .spezialisten__link a {
  /* Figma 60:156 = gap 8, Text Manrope 500 16/24, #000000 */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: var(--color-black);
  text-decoration: none;
}

.spezialisten .spezialisten__link a::after {
  /* Figma 60:158 = 32x32, radius 100, #FF499E, Icon 16x16 weiss */
  content: "";
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 100px;
  background-color: var(--theme-color-secondary);
  background-image: url("../images/icon-arrow-up-right.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
  transition: background-color 0.3s ease-in-out;
}

.spezialisten .spezialisten__link a:hover::after,
.spezialisten .spezialisten__link a:focus-visible::after {
  background-color: var(--theme-color-primary);
}

/* Mobile ---------------------------------------------------------------- */

/* Der Umbruch liegt hier bei 991px statt bei 781.98px: die breite Karte mit
   Bild rechts wird auf Tablets sonst zu gedrängt. */
@media (max-width: 991.98px) {

  .spezialisten {
    /* Figma 80:2621 padding 80/15/0/15 */
    padding-top: 80px;
    padding-bottom: 0;
  }

  .spezialisten .spezialisten__heading {
    /* Figma 80:2623 = Manrope 700 28/33.6, ls 0 */
    font-size: 28px;
    line-height: 33.6px;
    letter-spacing: 0;
  }

  .spezialisten .spezialisten__lead {
    /* Figma 80:2624 = Manrope 400 16/22.4 */
    font-size: 16px;
    line-height: 22.4px;
  }

  .spezialisten .spezialisten__list {
    /* Figma 80:2699 gap 20, Abstand 40 zur Einleitung */
    gap: 20px;
    margin-top: 40px;
  }

  .spezialisten .spezialisten__card {
    /* Figma 80:2645 = padding 8/8/20/8, gap 20, Bild oben */
    flex-direction: column;
    gap: 20px;
    min-height: 0;
    padding: 8px 8px 20px;
  }

  .spezialisten .spezialisten__image {
    flex: none;
    align-self: stretch;
  }

  .spezialisten .spezialisten__image {
    /* Figma 80:2657 = 329x250 */
    aspect-ratio: 329 / 250;
  }

  .spezialisten .spezialisten__body {
    /* Figma 80:2646 = gap 20, padding 0/12 */
    flex-direction: column;
    gap: 20px;
    padding: 0 12px;
  }

  .spezialisten .spezialisten__num {
    /* Figma 80:2648 = Manrope 400 14/19.6 */
    flex: none;
    padding-top: 0;
    font-size: 14px;
    line-height: 19.6px;
  }

  .spezialisten .spezialisten__title {
    /* Figma 80:2651 = Manrope 700 16/19.2 */
    max-width: none;
    font-size: 16px;
    font-weight: 700;
    line-height: 19.2px;
  }

  .spezialisten .spezialisten__text {
    /* Figma 80:2652 = Manrope 400 14/19.6, gap 10 zum Titel */
    max-width: none;
    margin-top: 10px;
    font-size: 14px;
    line-height: 19.6px;
  }

  .spezialisten .spezialisten__link {
    /* Figma 80:2646 gap 20 */
    margin-top: 20px;
  }

  .spezialisten .spezialisten__link a {
    /* Figma 80:2654 = Manrope 500 14/19.6 */
    font-size: 14px;
    line-height: 19.6px;
  }
}

/* --------------------------------------------------------------------- *
 * "Unser Praxis" · Figma 20:3214 (Desktop) / 80:2224 (Mobile)
 * Überschrift plus waagrechte Bilderreihe, die über den rechten Rand
 * hinausläuft und dort abgeschnitten wird.
 * --------------------------------------------------------------------- */

.praxis {
  /* Figma 20:3214 padding 0/0/100/20 */
  padding-top: 0;
  padding-bottom: 100px;
  /* Seitlicher Rand: früher kam er aus --theme-spacing-responsive-gutter des
     Themes; diese Variable steuert aber den globalen blockGap, deshalb hier
     die eigene Variable. */
  padding-left: var(--content-gutter);
  padding-right: var(--content-gutter);
  overflow: hidden;
}

.praxis .praxis__heading {
  /* Figma 28:6304 = Manrope 700 36/45, ls -0.36, #4062BB */
  margin: 0;
  font-family: var(--wp--preset--font-family--body);
  font-size: 36px;
  font-weight: 700;
  line-height: 45px;
  letter-spacing: -0.36px;
  color: var(--theme-color-primary);
}

.praxis .praxis__gallery {
  /* Die Reihe nutzt die volle Fensterbreite – Figma 20:3214 hat links nur
     20px Rand, der Inhalt beginnt also nicht an der Inhaltsspalte.
     !important, weil das constrained-Layout margin: auto !important setzt. */
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  max-width: none;
  /* Figma 20:3214 gap 30 zwischen Überschrift und Reihe */
  margin-top: 30px;
}

.praxis .rocket-slider {
  /* Das Plugin hält hier Platz für die Dots frei (--wp--preset--spacing--40);
     dieser Slider hat keine, der Abstand käme unter der Reihe doppelt. */
  padding-bottom: 0;
  /* Der linke Einzug kommt aus slidesOffsetBefore (src/js/praxis-gallery.js),
     damit die Reihe beim Wischen bis an den Rand laufen kann. */
  overflow: hidden;
}

.praxis .praxis__figure {
  /* Figma 20:3857 = 672x485, radius 8. Verhältnis am Rahmen statt am <img>
     (Smush setzt am Bild ein eigenes aspect-ratio mit !important).
     Feste Breite, weil der Slider mit slidesPerView: 'auto' läuft. */
  width: 672px;
  aspect-ratio: 672 / 485;
  /* Ohne das streckt Swiper die Kachel auf die Höhe der höchsten. */
  align-self: flex-start;
  height: auto;
  margin: 0;
  border-radius: 8px;
  overflow: hidden;
}

.praxis .praxis__figure>* {
  margin-block-start: 0;
  margin-block-end: 0;
}

.praxis .praxis__figure .wp-block-image,
.praxis .praxis__figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

/* Der Abstand nach oben hängt am unteren Abstand des vorherigen Abschnitts:
   "Deine Spezialisten" schaltet bereits ab 991px auf die mobile Variante und
   gibt sein padding-bottom ab; ohne diese Regel stünden zwischen 782 und 991
   beide auf 0 und die Abschnitte klebten aneinander. */
@media (max-width: 991.98px) {

  .praxis {
    padding-top: 80px;
  }
}

/* Mobile ---------------------------------------------------------------- */

@media (max-width: 781.98px) {

  .praxis {
    /* Figma 80:2224 padding 80/16/0/16 */
    padding-top: 80px;
    padding-bottom: 0;
  }

  .praxis .praxis__heading {
    /* Figma 80:2225 = Manrope 700 28/33.6, ls 0 */
    font-size: 28px;
    line-height: 33.6px;
    letter-spacing: 0;
  }

  .praxis .praxis__gallery {
    /* Figma 80:2224 gap 40 zwischen Überschrift und Reihe */
    margin-top: 40px;
  }

  .praxis .praxis__figure {
    /* Figma 80:2707 = 281x203 */
    width: 281px;
    aspect-ratio: 281 / 203;
  }
}

/* --------------------------------------------------------------------- *
 * "Team mit Kompetenz" · Figma 20:3281 (Desktop) / 80:2287 (Mobile)
 * Der Abschnitt ist bewusst dunkler als die Seite: primary-light (60 %)
 * über dem Seitenhintergrund ergibt #B2D6F4. Dazu die Bergkette unten rechts.
 * --------------------------------------------------------------------- */

.team-intro {
  /* Figma 20:3281 padding-top 100 */
  padding-top: 100px;
  /* Seitlicher Rand: früher kam er aus --theme-spacing-responsive-gutter des
     Themes; diese Variable steuert aber den globalen blockGap, deshalb hier
     die eigene Variable. */
  padding-left: var(--content-gutter);
  padding-right: var(--content-gutter);
}

/* Überschrift und Text stehen im Entwurf bündig mit den Karten.
   Die innere Gruppe ist "alignwide" und wäre sonst 1470 statt 1340 breit. */
.team-intro>.wp-block-group {
  box-sizing: border-box;
  max-width: var(--content-max-width);
  margin-left: auto;
  margin-right: auto;
}

/* Figma 20:3286 / 23:4080 = beide Absätze Manrope 400 16/22.4, Breite 900.
   Der erste trägt im Backend den Stil "lead" und wäre sonst deutlich grösser. */
.team-intro .wp-block-column>p,
.team-intro>.wp-block-group p,
.team-intro p.is-style-lead {
  max-width: 900px;
  font-size: 16px;
  font-weight: 400;
  line-height: 22.4px;
  color: var(--color-black);
}

.team-intro .wp-block-columns {
  /* Beim Umbruch auf Mobil kam der Zeilenabstand früher aus dem globalen
     blockGap (damals 15px); jetzt ausgeschrieben. */
  row-gap: 15px;
}

.team-intro .wp-block-column>p+p,
.team-intro>.wp-block-group p+p {
  margin-top: 8px;
}

.team-cards {
  /* Figma 20:3281 padding-bottom 100 */
  padding-bottom: 100px;
  /* Seitlicher Rand: früher kam er aus --theme-spacing-responsive-gutter des
     Themes; diese Variable steuert aber den globalen blockGap, deshalb hier
     die eigene Variable. */
  padding-left: var(--content-gutter);
  padding-right: var(--content-gutter);
  /* Bergkette – Figma 20:3281 legt sie als Füllung des Abschnitts an:
     792x267 bei 1440, rechtsbündig, unten 53.6 über den Rand hinaus.
     Im Markup ist der Abschnitt zweigeteilt (.team-intro + .team-cards);
     die Bergkette hängt am unteren Teil, deshalb sind die Prozentwerte auf
     dessen Höhe umgerechnet: 267/1140 = 23.42 %, Position 106.13 %. */
  /* Eigene SVG-Kopie mit preserveAspectRatio="none": die Originaldatei
     behält beim Skalieren ihr Seitenverhältnis, dadurch ignoriert sie die
     hier gesetzte Breite und wird schmaler gezeichnet als angegeben. */
  background-image: url("../images/pilatus-bergkette-primary-light-stretch.svg");
  background-repeat: no-repeat;
  background-size: 55% 23.42%;
  background-position: 100% 106.13%;
}

/* Überschrift ----------------------------------------------------------- */

.team-intro .wp-block-heading {
  /* Figma 23:4076 = baga 700 42/52.5, #4062BB */
  color: var(--theme-color-primary);
}

.team-intro .wp-block-heading img {
  /* Figma 23:4077 Herz-Icon 40x34 – Inline-Breite im Beitrag überschreiben */
  width: 40px !important;
  height: auto;
  vertical-align: baseline;
}

/* Raster ---------------------------------------------------------------- */

.team-cards .team-grid {
  /* Figma 20:3287 = vier Spalten, gap 16 */
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* Alle Karten gleich hoch – auch über Reihen hinweg (Figma: durchgehend 448) */
  align-items: stretch;
  grid-auto-rows: 1fr;
  gap: 16px;
}

.team-cards .team-grid>* {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* Karte ----------------------------------------------------------------- */

.team-cards .team-member {
  /* Figma 20:3288 = padding 8/8/20/8, radius 8, weiss */
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  height: 100%;
  padding: 8px 8px 20px;
  border-radius: 8px;
}

.team-cards .team-member>* {
  margin-block-start: 0;
  margin-block-end: 0;
}

.team-cards .team-member__media {
  position: relative;
  /* Figma 20:3288 gap 30 zwischen Bild und Text */
  margin-bottom: 30px;
}

.team-cards .team-member__photo {
  /* Figma 20:3289 = 307x290, radius 8. Verhältnis am Rahmen statt am <img>:
     Smush setzt auf lazy geladene Bilder ein eigenes aspect-ratio mit
     !important. */
  aspect-ratio: 307 / 290;
  margin: 0;
  border-radius: 8px;
  overflow: hidden;
}

.team-cards .team-member__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

/* Plus-Button – Figma 28:6326 = 40x40, radius 100, #FF499E, erscheint auf Hover */
.team-cards .team-member__more {
  /* Abstand kam früher aus dem globalen blockGap (damals 15px); seit die
     Theme-Variable nicht mehr überschrieben wird, hier ausgeschrieben. */
  margin-top: 15px;
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 100px;
  background-color: var(--theme-color-secondary);
  background-image: url("../images/icon-plus.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

.team-cards .team-member:hover .team-member__more,
.team-cards .team-member__more:focus-visible {
  opacity: 1;
}

.team-cards .team-member__more:hover {
  background-color: var(--theme-color-primary);
}

/* Text ------------------------------------------------------------------ */

.team-cards .team-member__info {
  /* Figma 20:3290 padding 0/12 */
  padding: 0 12px;
}

.team-cards .team-member__name {
  /* Figma 20:3291 = Manrope 600 24/26 */
  margin: 0;
  font-family: var(--wp--preset--font-family--body);
  font-size: 24px;
  font-weight: 600;
  line-height: 26px;
  color: var(--color-black);
}

.team-cards .team-member__role {
  /* Figma 20:3293 = Manrope 500 20/28, Abstand 16 zum Namen */
  margin: 16px 0 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  color: var(--color-black);
}

.team-cards .team-member__qualification {
  /* Figma 20:3294 = Manrope 400 16/22.4, 60 % Schwarz, Abstand 8 */
  margin: 8px 0 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 22.4px;
  color: rgba(0, 0, 0, 0.6);
}

/* Button "Weitere Teammitglieder" --------------------------------------- */

.team-cards .team-more {
  margin-top: 0;
}

/* Fortschrittsbalken gehört laut Entwurf nur zur mobilen Ansicht */
.team-cards .team__progress {
  display: none;
}

/* Figma 22:4013 = 30 Abstand zwischen Kartenraster und Button. Das
   constrained-Layout setzt zwischen Geschwistern einen eigenen Blockabstand
   von 90, der hier deutlich zu gross ist.
   Kein "+"-Selektor: zwischen Raster und Button steht der Fortschrittsbalken
   (auf dem Desktop ausgeblendet, aber im Markup vorhanden), dadurch greift
   eine Nachbarschafts-Regel nicht. */
.team-cards .wp-block-buttons {
  margin-top: 30px;
}

/* Mobile ---------------------------------------------------------------- */

/* Wie bei "Deine Spezialisten": der Umbruch liegt hier bei 991px, damit die
   vierspaltige Kartenreihe auf Tablets nicht zu schmal wird. */
@media (max-width: 991.98px) {

  .team-intro {
    /* Figma 80:2287 padding 80/15 */
    padding-top: 80px;
  }

  .team-cards {
    padding-bottom: 80px;
  }

  .team-intro .wp-block-heading {
    /* Figma 80:2289 = Manrope 700 28/33.6.
       !important, weil die Überschrift die Preset-Klasse has-5-xl-font-size
       trägt und WordPress solche Grössen mit !important ausgibt. */
    font-family: var(--wp--preset--font-family--body);
    font-size: 28px !important;
    font-weight: 700;
    line-height: 33.6px;
  }

  .team-intro .wp-block-heading img {
    /* Figma 80:2714 Herz-Icon 24x21.
       !important, weil die Breite als Inline-Style im Beitrag steht. */
    width: 24px !important;
  }

  /* Bergkette – Figma 80:2287: 382.5x52.8 bei 375, linksbündig, unten 3.6
     über den Rand hinaus. Also fast bildschirmbreit und flach, nicht die
     kleine Ecke wie auf dem Desktop. Höhe umgerechnet auf den unteren
     Abschnittsteil: 52.8/472 = 11.19 %. */
  .team-cards {
    background-size: 102.01% 11.19%;
    background-position: 0% 100.88%;
  }

  /* Figma 80:2291 – die Karten werden gewischt statt gerastert */
  .team-cards .team-grid {
    /* Der Slider läuft genau über die Inhaltsbreite (Figma 80:2291 = 345 bei
       375, also 15 Rand links wie rechts). Kein Vollbild-Ausbruch über
       negative Ränder: die setzt das constrained-Layout mit
       "margin-left: auto !important" ohnehin zurück, und der Entwurf
       schneidet die Karten am Seitenrand ab. */
    display: flex;
    grid-template-columns: none;
    gap: 20px;
    /* Rechts bis an den Bildschirmrand, links bleibt der Seitenrand von 15.
       !important, weil das constrained-Layout die Ränder auf auto setzt. */
    margin-right: calc(-1 * var(--content-gutter)) !important;
    padding-right: var(--content-gutter);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .team-cards .team-grid::-webkit-scrollbar {
    display: none;
  }

  .team-cards .team-member {
    /* Figma 80:2292 = 311x350 – alle Karten sind gleich hoch.
       height:100% (Desktop-Raster) muss hier weg: im Flex-Slider hat der
       Container keine feste Höhe, die Prozenthöhe fällt auf den Inhalt
       zurück und verhindert das Strecken auf die höchste Karte. */
    flex: 0 0 311px;
    height: auto;
    scroll-snap-align: start;
  }

  .team-cards .team-member__media {
    /* Figma 80:2292 gap 20 */
    margin-bottom: 20px;
  }

  .team-cards .team-member__photo {
    /* Figma 80:2293 = 295x215 */
    aspect-ratio: 295 / 215;
  }

  /* Ohne Hover auf Touchgeräten bleibt der Button sichtbar */
  .team-cards .team-member__more {
    opacity: 1;
  }

  .team-cards .team-member__name {
    /* Figma 80:2295 = Manrope 700 20/26 */
    font-size: 20px;
    font-weight: 700;
  }

  .team-cards .team-member__role {
    /* Figma 80:2297 = Manrope 600 16/22.4, Abstand 15 zum Namen */
    margin-top: 15px;
    font-size: 16px;
    font-weight: 600;
    line-height: 22.4px;
  }

  .team-cards .team-member__qualification {
    /* Figma 80:2298 = Manrope 400 14/19.6, Abstand 4 zur Zeile darüber */
    margin-top: 4px;
    font-size: 14px;
    line-height: 19.6px;
  }

  /* Fortschrittsbalken – Figma 80:2717 = 345x2, Spur #C8E2F7, Fortschritt
     #4062BB (80:2718 = 44x2). Abstand 40 zu den Karten. */
  .team-cards .team__progress {
    display: block;
    height: 2px;
    margin-top: 40px;
    border-radius: 10px;
    background-color: #C8E2F7;
    overflow: hidden;
  }

  .team-cards .team__progress-bar {
    display: block;
    height: 100%;
    border-radius: 10px;
    background-color: var(--theme-color-primary);
    transform-origin: left center;
    transition: transform 0.2s ease-out;
  }

  /* Im mobilen Entwurf (80:2291) liegen alle Mitglieder im Slider – der
     Button "Weitere Teammitglieder anzeigen" kommt dort nicht vor.
     Ausgeblendet wird die Button-Gruppe, nicht der Button selbst: das
     Elterntheme setzt .wp-block-buttons > .wp-block-button auf display:flex
     und steht in der Kaskade nach dieser Datei. */
  .team-cards .wp-block-buttons:has(.team-more) {
    display: none;
  }
}

/* --------------------------------------------------------------------- *
 * Team als eigene Seite (/team/) · Figma 80:5788 (Desktop) / 80:5866 (Mobil)
 * Derselbe Abschnitt wie auf der Startseite. Der Entwurf ist bis auf drei
 * Punkte identisch, deshalb steht hier nur, was abweicht – alles unter dem
 * Modifikator, die Startseite bleibt unberührt:
 *   1. kein eigener Hintergrund (Figma 80:5788 hat den Farbfüller auf
 *      "visible": false, die Farbe kommt vom Seitenrahmen 80:4288 #C8E2F7)
 *   2. mobil ein untereinander gestapeltes Raster statt des Wisch-Sliders
 *   3. zwei Stellen, an denen die Startseite vom gemeinsamen Entwurf
 *      abweicht, hier aber entwurfsgetreu sind (Abstand 50, Schaltfläche 48)
 * --------------------------------------------------------------------- */

body.page-id-1294 {
  /* Figma 80:5541 = #C8E2F7 als Seitenhintergrund; der Abschnitt selbst
     bekommt keine eigene Farbe. */
  background-color: #C8E2F7;
}

body.page-id-1306 {
  /* Figma 80:4288 = #C8E2F7 als Seitenhintergrund (entspricht primary-light
     mit 60 % über Weiss). Der Abschnitt selbst bekommt keine Farbe, sonst
     läge sie doppelt übereinander. */
  background-color: #C8E2F7;
  /* Ohne das erbt die Seite die 1024 des Eltern-Themes (nur body.home wird
     erweitert) und das Kartenraster wäre 1024 statt der 1340 aus Figma
     80:5796. */
  --wp--style--global--content-size: var(--content-max-width);
}

.team-intro.team--page .is-style-lead {
  /* Figma 80:5793 pad-top 15 zum Titel, gap 8 zum zweiten Absatz
     (die Startseite rendert hier 30/30 aus dem Absatzstil). */
  margin-top: 15px;
  margin-bottom: 0;
}

.team-intro.team--page {
  /* Figma 80:5796 pad-top 50 = Abstand Text -> Karten (Startseite: 120) */
  padding-bottom: 50px;
}

/* Figma 80:5858 = 283x48, padding 12/16 (Startseite rendert 330x60 aus den
   globalen Button-Variablen). */
.team-cards.team--page .team-more .wp-block-button__link {
  padding: 12px 16px;
}

@media (max-width: 991.98px) {

  .team-cards.team--page {
    /* Bergkette – Figma 80:5866: 102.01 % breit, unten über den Rand hinaus.
       Die Höhenprozente beziehen sich auf den unteren Abschnittsteil und
       werden nach dem Deploy an der gemessenen Höhe nachgezogen. */
    background-size: 102.01% 6.41%;
    background-position: 0% 100.47%;
  }

  .team-cards.team--page .team-grid {
    /* Figma 80:5874 = untereinander, gap 20 – kein Slider wie auf der
       Startseite (80:2291). */
    display: grid;
    grid-template-columns: 1fr;
    /* Figma 80:5875 ff.: die Karten sind unterschiedlich hoch (326/350), je
       nachdem ob die Qualifikationszeile da ist. Das Desktop-Raster zwingt
       über grid-auto-rows: 1fr alle auf dieselbe Höhe. */
    grid-auto-rows: auto;
    gap: 20px;
    margin-right: 0 !important;
    padding-right: 0;
    overflow-x: visible;
  }

  .team-cards.team--page .team-member {
    /* Volle Inhaltsbreite statt der 311 breiten Slider-Karte */
    flex: 0 0 auto;
  }

  .team-cards.team--page .team-member__photo {
    /* Figma 80:5876 = 329x215 (Startseiten-Slider: 295x215) */
    aspect-ratio: 329 / 215;
  }

  .team-cards.team--page .wp-block-buttons:has(.team-more) {
    /* Figma 80:5978: auf dieser Seite steht die Schaltfläche auch mobil */
    display: flex;
  }

  .team-intro.team--page {
    /* Figma 80:5866 gap 40 zwischen Textblock und Karten */
    padding-bottom: 40px;
  }

  .team-cards.team--page {
    padding-top: 0;
  }

  .team-cards.team--page .wp-block-buttons {
    /* Figma 80:5866 gap 40 zwischen Karten und Schaltfläche */
    margin-top: 40px;
  }
}

/* Zwischen 768 und 991 stehen die Karten zu zweit in einer Reihe: eine
 * einzelne Karte über die volle Breite wirkt auf Tablets zu wuchtig.
 * Nur auf /team/ – die Startseite behält dort ihren Wisch-Slider. */
@media (min-width: 768px) and (max-width: 991.98px) {

  .team-cards.team--page .team-grid {
    grid-template-columns: repeat(2, 1fr);
    /* Beide Karten einer Reihe gleich hoch, wie im Desktop-Raster. */
    grid-auto-rows: 1fr;
  }
}

/* --------------------------------------------------------------------- *
 * Vita-Popup (Popup Maker) · Figma 29:6851
 * Weisse Box mit zwei Spalten: links Person und Terminhinweis,
 * rechts die Laufbahn mit eigenem Scrollbereich.
 * Alles unter .vita – die übrigen Popups bleiben unberührt.
 * --------------------------------------------------------------------- */

/* Der Hintergrund gehört zum Entwurf: Figma 29:6850 = #000000 bei 50 %.
   Popup Maker liefert über sein Theme ein helles Weiss – nur für die Vita
   wird das überschrieben, alle anderen Popups behalten ihr Theme. */
/* Popup Maker gleicht die beim Öffnen verschwindende Scrollleiste aus, indem
   es allen direkten Kindern von <body> padding-right: 15px gibt. Wo die
   Scrollleiste den Inhalt überlagert (macOS, Touch), verschwindet aber nichts
   – der Inhalt wurde dort um 15 schmaler und der zentrierte Bereich sprang
   beim Öffnen um 7 zur Seite. --scrollbar-width kommt aus
   src/js/scrollbar-width.js und ist genau 0, wo nichts auszugleichen ist. */
html.pum-open.pum-open-overlay.pum-open-scrollable body > *:not(.pum-overlay) {
  padding-right: var(--scrollbar-width, 0px) !important;
}

.pum-overlay:has(.vita) {
  background-color: rgba(0, 0, 0, 0.5) !important;
}

.pum-container:has(.vita) {
  /* Figma 29:6777: Fenster 1440x800, Popup 1340x700 – also ringsum 50 Rand.
     Breite und Höhe ergeben sich daher aus dem Viewport minus 2x50. */
  box-sizing: border-box;
  width: min(1340px, calc(100vw - 100px)) !important;
  max-width: none !important;
  /* Feste Höhe statt max-height: sonst kennt der Inhalt keine Bezugsgrösse
     und der Laufbahn-Bereich kann nicht für sich scrollen. */
  height: calc(100vh - 100px);
  /* Popup Maker rechnet top/left als Inline-Style aus und das Theme setzt
     zusätzlich margin-left; beides muss hier weichen, damit der Abstand
     oben und unten exakt 50 beträgt. */
  top: 50px !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  transform: translateX(-50%);
  padding: 30px !important;
  border-radius: 8px !important;
  background-color: var(--color-white) !important;
  overflow: hidden;
}

/* Das display gehört an den offenen Zustand, nicht an den Container.

   Popup Maker steuert die Sichtbarkeit über einen Inline-Style. Beim
   Schliessen blendet es den Container per jQuery aus und setzt zum Schluss
   display: none – ein unbedingtes "display: flex !important" überstimmt das
   aber, der Container erschien nach dem Ausblenden kurz wieder und ver-
   schwand erst, wenn das Overlay selbst weg war. Genau dieses Aufblitzen.

   .pum-active sitzt schon vor der Einblende-Animation am Overlay, für das
   Öffnen ändert sich also nichts. */
.pum-overlay.pum-active .pum-container:has(.vita) {
  /* Popup Maker setzt display per Inline-Style, deshalb !important */
  display: flex !important;
}

/* Ab 782 gilt die feste Popup-Höhe. Ohne !important gewinnt die allgemeine
   Popup-Regel weiter oben (@media max-width:1023px → height:auto!important):
   zwischen 782 und 1023 wuchs das Vita-Popup dadurch auf Inhaltshöhe
   (über 1900 px) und ragte oben und unten aus dem Bildschirm. Unterhalb 782
   bleibt es bewusst aussen vor – dort scrollt das Popup als Ganzes. */
@media (min-width: 782px) {

  .pum-container:has(.vita) {
    height: calc(100vh - 100px) !important;
  }
}

/* Schliessen – Figma 29:6970 = 16x16 in der oberen rechten Ecke des Popups,
   darin ein X von 8x8 mit 1.5 Strich in #666666. Das Popup-Maker-Theme
   liefert stattdessen einen 42x42-Knopf mit hellblauem Grund, der per
   position:fixed am Bildschirmrand klebt. */
.pum-container:has(.vita) .pum-close.popmake-close {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  left: auto !important;
  bottom: auto !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-image: url("../images/icon-close.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
  box-shadow: none !important;
  text-shadow: none !important;
  /* Das Theme rendert ein "x" als Text – der wird unsichtbar gemacht,
     bleibt aber für Screenreader über aria-label erhalten. */
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
}

.pum-container:has(.vita) .pum-content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.vita {
  /* Figma: linke Spalte 291, rechte 745, dazwischen 244 – zusammen 1280, also
     genau die Inhaltsbreite des Popups bei 1440 (1340 minus 2x30 Innenabstand).
     Als feste Pixel gerechnet lief die Zeile ab etwa 1430 aus dem Popup
     hinaus, weil das Popup mitschrumpft (100vw - 100). Deshalb in Prozent
     der Inhaltsbreite: 291/1280, 244/1280, 745/1280. */
  display: grid;
  grid-template-columns: 22.734% 58.203%;
  column-gap: 19.063%;
  flex: 1 1 auto;
  min-height: 0;
}

.vita>* {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* Linke Spalte ---------------------------------------------------------- */

.vita .vita__side {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.vita .vita__side>* {
  margin-block-start: 0;
  margin-block-end: 0;
}

.vita .vita__photo {
  /* Figma 29:6853 = 213x200, radius 8. Verhältnis am Rahmen (Smush-!important
     am Bild). */
  /* flex-basis wäre in der Spalten-Flexbox die HÖHE – das Bild wurde dadurch
     213 hoch und auf die Spaltenbreite gezogen. Breite explizit, Höhe aus
     dem Verhältnis; max-width kappt es auf schmalen Spalten. */
  flex: 0 0 auto;
  width: 213px;
  max-width: 100%;
  aspect-ratio: 213 / 200;
  overflow: hidden;
  border-radius: 8px;
  margin: 0;
}

.vita .vita__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.vita .vita__name {
  /* Figma 29:6854 = Manrope 600 24/26, Abstand 15 zum Bild */
  margin: 15px 0 0;
  font-family: var(--wp--preset--font-family--body);
  font-size: 24px;
  font-weight: 600;
  line-height: 26px;
  color: var(--color-black);
}

.vita .vita__role {
  /* Figma 29:6856 = Manrope 500 20/28 */
  margin: 15px 0 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  color: var(--color-black);
}

.vita .vita__qualification {
  /* Figma 29:6857 = Manrope 400 16/22.4, 60 % Schwarz */
  margin: 8px 0 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 22.4px;
  color: rgba(0, 0, 0, 0.6);
}

/* Terminhinweis – Figma 29:6858 = 260 breit, padding 16, radius 8, #C8E2F7 */
.vita .vita__cta {
  box-sizing: border-box;
  width: 260px;
  margin-top: auto;
  padding: 16px;
  border-radius: 8px;
  background-color: #C8E2F7;
}

.vita .vita__cta>* {
  margin-block-start: 0;
  margin-block-end: 0;
}

.vita .vita__cta p {
  /* Figma 29:6859 = Manrope 400 16/22.4 */
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 22.4px;
  color: var(--color-black);
}

.vita .vita__cta-link {
  /* Figma 29:6860 gap 16 zum Text */
  margin-top: 16px !important;
}

.vita .vita__cta-link a {
  /* Figma 29:6861 = Manrope 500 16/24, schwarz, gap 8 zum Kreis */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: var(--color-black);
  text-decoration: none;
}

.vita .vita__cta-link a::after {
  /* Figma 29:6862 = 32x32, radius 100, weiss, Pfeil schwarz */
  content: "";
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 100px;
  background-color: var(--color-white);
  background-image: url("../images/icon-arrow-up-right-dark.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
}

/* Rechte Spalte --------------------------------------------------------- */

.vita .vita__main {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.vita .vita__main>* {
  margin-block-start: 0;
  margin-block-end: 0;
}

.vita .vita__title {
  /* Figma 29:6866 = Manrope 600 24/26 */
  margin: 0;
  font-family: var(--wp--preset--font-family--body);
  font-size: 24px;
  font-weight: 600;
  line-height: 26px;
  color: var(--color-black);
}

.vita .vita__list {
  /* Figma 29:6864 gap 30 zur Überschrift; der Bereich scrollt für sich */
  margin-top: 30px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  /* Platz für die Scrollleiste, damit der Text nicht darunter läuft */
  padding-right: 12px;
}

.vita .vita__entry {
  /* Figma 29:6867 gap 16 zwischen den Einträgen */
  padding-bottom: 16px;
}

.vita .vita__entry+.vita__entry {
  /* Figma 29:6876 Trennlinie #C8E2F7 */
  border-top: 1px solid #C8E2F7;
  padding-top: 16px;
}

.vita .vita__entry>* {
  margin-block-start: 0;
  margin-block-end: 0;
}

.vita .vita__head {
  /* Figma 29:6870 = Manrope 600 16/22.4 */
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 22.4px;
  color: var(--color-black);
}

.vita .vita__year {
  /* Figma 29:6872 = Manrope 400, 60 % Schwarz */
  font-weight: 400;
  color: rgba(0, 0, 0, 0.6);
}

.vita .vita__place {
  /* Figma 29:6874 = Manrope 400 16/22.4, Abstand 8 */
  margin: 8px 0 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 22.4px;
  color: var(--color-black);
}

.vita .vita__note {
  /* Figma 29:6875 = Manrope 400 16/22.4, 60 % Schwarz, Abstand 4 */
  margin: 4px 0 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 22.4px;
  color: rgba(0, 0, 0, 0.6);
}

/* Mobile ---------------------------------------------------------------- */

@media (max-width: 781.98px) {

  /* Figma 80:3655 = 375x812, also bildschirmfüllend: kein Rand, keine
     Rundung, Innenabstand 30/15. Die Desktop-Werte (50 ringsum, mittig
     gesetzt) müssen dafür zurückgenommen werden. */
  .pum-container:has(.vita) {
    width: 100% !important;
    height: 100%;
    max-height: none;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    margin: 0 !important;
    transform: none;
    padding: 30px 15px !important;
    border-radius: 0 !important;
  }

  /* Untereinander im normalen Fluss statt im Raster: das Raster teilt die
     feste Popup-Höhe auf zwei Reihen auf, wodurch sich Person und Laufbahn
     überlagert haben. Gescrollt wird das Popup als Ganzes. */
  .vita {
    display: block;
    max-height: none;
    overflow-y: auto;
  }

  .vita .vita__side {
    display: block;
    /* Figma 80:3940 gap 40 zwischen Person und Laufbahn */
    margin-bottom: 40px;
  }

  /* Figma 80:3947 = 16x16, 15 vom oberen und rechten Rand */
  .pum-container:has(.vita) .pum-close.popmake-close {
    top: 15px !important;
    right: 15px !important;
  }

  /* Popup Maker setzt .pum-content auf position:relative – dann würde sich
     die Leiste am Innenabstand ausrichten statt am Bildschirmrand. Für die
     Vita wird der Bezugspunkt deshalb auf das Popup selbst gelegt. */
  .pum-container:has(.vita) .pum-content {
    position: static;
  }

  /* Figma 80:3931 = 375x120 am unteren Bildschirmrand, über die volle
     Breite und ausserhalb des Innenabstands. Deshalb absolut zum Popup
     statt im Textfluss – so bleibt sie beim Scrollen stehen. */
  .vita .vita__cta {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    margin: 0;
    padding: 16px;
    border-radius: 0;
  }

  /* Platz, damit der letzte Eintrag nicht unter der Leiste endet
     (Figma 80:3931 = 120 hoch). */
  .vita {
    padding-bottom: 120px;
  }

  .vita .vita__list {
    overflow-y: visible;
  }
}

/* --------------------------------------------------------------------- *
 * Bewertungen · Figma 20:3309 (Desktop) / 80:2313 (Mobil)
 * Überschrift und Lauftext kommen aus dem Beitrag, die Karten liefert das
 * Trustindex-Widget ([trustindex no-registration=google]). Der Entwurf ist
 * mit genau diesem Widget gezeichnet, deshalb stimmen Kartenmasse,
 * Schriften und Farben bereits – hier stehen nur Rahmen und die mobilen
 * Abweichungen.
 * --------------------------------------------------------------------- */

.reviews {
  /* Figma 20:3309 padding 100/0 */
  padding-top: 100px;
  padding-bottom: 100px;
  padding-left: var(--content-gutter);
  padding-right: var(--content-gutter);
  /* In der Einspaltenansicht reicht das Widget absichtlich bis an den
     Bildschirmrand (siehe .ti-widget:has(.ti-col-1) weiter unten). Sein
     eigener Container legt darüber hinaus noch "margin: 0 -8px" – die
     stehen dann rechts über und erzeugen einen waagrechten Seiten-Scroll.
     clip statt hidden: hidden würde aus dem Abschnitt einen Scroll-Container
     machen und damit senkrecht klebende Elemente im Widget aushebeln, clip
     schneidet nur ab und lässt die senkrechte Achse in Ruhe. */
  overflow-x: clip;
}

.reviews .reviews__intro {
  /* Figma 20:3310: die 825 sind die natürliche Breite der Überschrift, keine
     Begrenzung – als max-width gesetzt bricht die Zeile um. */
  text-align: center;
}

.reviews .reviews__title {
  /* Figma 20:3311 = baga 700 36/45, #4062BB */
  margin: 0;
  font-size: 36px;
  font-weight: 700;
  line-height: 45px;
  color: var(--theme-color-primary);
}

.reviews .reviews__lead {
  /* Figma 20:3312 = Manrope 400 20/30, Abstand 16 zur Überschrift */
  max-width: 577px;
  margin: 16px auto 0;
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
  color: var(--color-black);
}

/* Trustindex hängt sein Widget in einen klassenlosen DIV; solange der noch
   leer ist, kam dessen Abstand aus dem globalen blockGap. Hier derselbe Wert
   wie beim fertigen Widget, damit vor und nach dem Rendern nichts springt. */
.reviews > div:not([class]) {
  margin-top: 30px;
}

/* Widget – Figma 20:3313 = 1024 breit, 30 Abstand zum Vorspann */
.reviews .ti-widget {
  max-width: 1024px;
  margin: 30px auto 0;
}

/* Figma 20:3355: der Weiterlesen-Link steht bei 13.5/19 in 50 % Schwarz,
   das Widget liefert 14px in vollem Schwarz. */
.reviews .ti-widget .ti-read-more {
  font-size: 13.5px !important;
  line-height: 19px;
  color: rgba(0, 0, 0, 0.5);
}

/* Mobil ---------------------------------------------------------------- *
 * Das Widget schaltet selbst auf eine Spalte (Klasse ti-col-1) – daran
 * hängen die mobilen Regeln, nicht an einer eigenen Breakpoint-Grenze.
 * --------------------------------------------------------------------- */

/* In der Einspaltenansicht läuft die Reihe rechts bis an den Bildschirmrand;
   links bleibt der Seitenrand stehen. */
.reviews .ti-widget:has(.ti-col-1) {
  /* !important, weil das constrained-Layout die Ränder mit auto!important
     überschreibt. */
  /* Das Widget setzt sich selbst auf width:100%; ein negativer Rand allein
     macht es deshalb nicht breiter – die Breite muss mitwachsen. */
  width: calc(100% + var(--content-gutter));
  max-width: none;
  margin-right: calc(-1 * var(--content-gutter)) !important;
  /* Ohne das verteilt der automatische linke Rand die gewonnenen 15 wieder
     auf beide Seiten und die Reihe rückt links ein. */
  margin-left: 0 !important;
}

.reviews .ti-widget .ti-widget-container.ti-col-1 .ti-review-item {
  /* Figma 80:2318 = Karte 311, Abstand 20 zur nächsten.
     Die Prozente beziehen sich auf .ti-reviews-container-wrapper: der ist
     wegen "margin: 0 -8px" um 16 breiter als das Feld, dazu kommen die
     15 aus dem negativen Rand oben und die 12, die vom nächsten Eintrag
     sichtbar bleiben – zusammen 43. */
  flex: 0 0 calc(100% - 43px);
  max-width: calc(100% - 43px);
  padding-left: 10px;
  padding-right: 10px;
}

.reviews .ti-widget .ti-widget-container.ti-col-1 .ti-controls-line {
  /* Figma 80:2432 = 343x2, Spur #B2D6F4, Fortschritt #4062BB (80:2433).
     Das Widget blendet die Leiste erst unter 480 ein und zeichnet sie
     150x3 in Grau. */
  display: block;
  /* Die Leiste bleibt in der Inhaltsbreite (Figma 80:2432 = 343 bei 375) und
     wandert nicht mit dem Slider an den Bildschirmrand. */
  width: calc(100% - var(--content-gutter));
  height: 2px;
  margin: 16px 0 0;
  border-radius: 10px;
  background: #B2D6F4;
}

.reviews .ti-widget .ti-widget-container.ti-col-1 .ti-controls-line .dot {
  border-radius: 10px;
  background: var(--theme-color-primary);
}

@media (max-width: 991.98px) {

  .reviews {
    /* Figma 80:2313 padding 80/16/0 */
    padding-top: 80px;
    padding-bottom: 0;
  }

  .reviews .reviews__title {
    /* Figma 80:2315 = 28/34 */
    font-size: 28px;
    line-height: 34px;
  }

  .reviews .reviews__lead {
    /* Figma 80:2316 = 16/22 */
    font-size: 16px;
    line-height: 22px;
  }

  .reviews .ti-widget {
    /* Figma 80:2317 = 40 Abstand zum Vorspann */
    margin-top: 40px;
  }
}

/* --------------------------------------------------------------------- *
 * Häufige Fragen · Figma 1:1972 (Desktop) / 79:673 (Mobil)
 * Aufklappliste aus Core-Blöcken (wp:details). Das Elternthema bringt für
 * <details> bereits eigene Regeln mit (Font-Awesome-Pfeil, grauer Karten-
 * hintergrund, 30er Abstand, Hover-Einzug); sie werden hier innerhalb von
 * .faq überschrieben. Konkurrierende Selektoren des Themes:
 *   .wp-block-details                     (0,1,0) bg #F6F5F3, margin-bottom 30
 *   .wp-block-details summary             (0,1,1) flex, space-between
 *   .wp-block-details summary:after       (0,2,1) Font-Awesome-Glyphe
 *   .wp-block-details[open] summary:after (0,3,1) rotate(180deg)
 *   .wp-block-details summary:hover       (0,2,1) padding-left 1rem
 *   .wp-block-details summary~:last-child (0,1,2) padding-bottom 50
 * --------------------------------------------------------------------- */

.faq {
  /* Figma 1:1786 padding 0/50/100/50 – die 50 an den Seiten sind bereits der
     Abstand der 1024er Inhaltsspalte im 1440er Fenster (constrained layout).
     padding-top 0: das Theme gibt verschachtelten alignfull-Gruppen sonst
     spacing|70 (120) mit. */
  padding-top: 0;
  padding-bottom: 100px;
  padding-left: var(--content-gutter);
  padding-right: var(--content-gutter);
  /* Bergkette – Figma 1:1786 legt sie als Füllung des Abschnitts an.
     imageTransform [[1.8182,0,-0.8182],[0,9.3798,-0.8380]] ergibt
     55 % x 10.66 % der Abschnittsfläche an Position 100 % / 10 %
     (bei 1440x1089 also 792x116 px, oben 97). Eigene SVG-Kopie mit
     preserveAspectRatio="none", weil das Original sein Seitenverhältnis
     behält und die gesetzte Höhe sonst ignoriert würde. */
  background-image: url("../images/pilatus-bergkette-grey-light-stretch.svg");
  background-repeat: no-repeat;
  background-size: 55% 10.66%;
  background-position: 100% 10%;
}

.faq .faq__title {
  /* Figma 1:1789 = baga 700 36/45, #4062BB, zentriert */
  margin: 0;
  font-size: 36px;
  font-weight: 700;
  line-height: 45px;
  color: var(--theme-color-primary);
}

.faq .wp-block-details {
  /* Figma 1:1791 = weiss, Radius 8, padding 20, Abstand 8 zur nächsten Karte.
     Das Theme setzt hier #F6F5F3 und margin-bottom 30. */
  margin-top: 0;
  margin-bottom: 8px;
  padding: 20px;
  border-radius: 8px;
  background-color: var(--color-white);
}

.faq .wp-block-details:first-of-type {
  /* Figma 1:1786 gap 30 zwischen Überschrift und Liste */
  margin-top: 30px;
}

.faq .wp-block-details:last-of-type {
  margin-bottom: 0;
}

.faq .wp-block-details summary {
  /* Figma 1:1792 = Reihe, space-between, mittig, gap 50 */
  gap: 50px;
  /* Figma 1:1793 = Manrope 700 20/30, #000000 */
  font-size: 20px;
  font-weight: 700;
  line-height: 30px;
  color: var(--color-black);
}

.faq .wp-block-details summary:hover {
  /* Der Einzug beim Überfahren kommt aus dem Elternthema, im Entwurf gibt es
     ihn nicht. */
  padding-left: 0;
}

.faq .wp-block-details summary::after {
  /* Figma 8:442 = 24x24-Rahmen mit dem Pfad M6 9L12 15L18 9, Strich 2,
     runde Enden, #000000. Das Elternthema setzt hier eine Font-Awesome-
     Glyphe in 32px und Primärfarbe. */
  content: "";
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  margin-left: 0;
  /* Nicht currentColor: das Elternthema färbt die Pseudo-Elemente selbst mit
     der Primärfarbe ein, im Entwurf ist der Pfeil schwarz. */
  background-color: var(--color-black);
  -webkit-mask: url("../images/icon-chevron-down.svg") no-repeat center / 24px 24px;
  mask: url("../images/icon-chevron-down.svg") no-repeat center / 24px 24px;
}

.faq .wp-block-details[open] summary {
  /* Figma 1:1899 = 20 Abstand zwischen Frage und Antwort */
  margin-bottom: 20px;
}

.faq .wp-block-details summary ~ * {
  /* Figma 1:1909 = Manrope 400 16/22.4, #000000. Der Abstand steckt oben in
     summary, das Elternthema hängt hier sonst 50 px Innenabstand an. */
  margin-top: 0;
  margin-bottom: 0;
  padding-bottom: 0;
  /* Figma 1:1909 = 984 breit, also die volle Kartenbreite. Das Theme kappt
     Absätze sonst über :where(p){max-width:var(--global-max-width-text)}. */
  max-width: none;
  font-size: 16px;
  font-weight: 400;
  line-height: 22.4px;
  color: var(--color-black);
}

@media (max-width: 781.98px) {
  .faq {
    /* Figma 79:673 padding 80/15/0/15, ohne Bergkette */
    padding-top: 80px;
    padding-bottom: 0;
    background-image: none;
  }

  .faq .faq__title {
    /* Figma 79:675 = 28/33.6 */
    font-size: 28px;
    line-height: 33.6px;
  }

  .faq .wp-block-details:first-of-type {
    /* Figma 79:673 gap 40 */
    margin-top: 40px;
  }

  .faq .wp-block-details summary {
    /* Figma 79:796 gap 16, Figma 79:797 = 600 16/19.2 */
    gap: 16px;
    font-size: 16px;
    font-weight: 600;
    line-height: 19.2px;
  }

  .faq .wp-block-details[open] summary {
    /* Figma 79:831 = 16 Abstand zur Antwort */
    margin-bottom: 16px;
  }

  .faq .wp-block-details summary ~ * {
    /* Figma 79:835 = 14/19.6 */
    font-size: 14px;
    line-height: 19.6px;
  }
}

/* --------------------------------------------------------------------- *
 * Standort · Figma 52:2376 (Desktop) / 80:2482 (Mobil)
 * Links Text, Kontakte und die beiden runden Social-Buttons, rechts die
 * Karte; darunter der weisse CTA-Streifen.
 * --------------------------------------------------------------------- */

.standort {
  /* Figma 52:2376 padding 0/50/100/50 – die 50 an den Seiten sind bereits
     der Abstand der 1340er Inhaltsbreite im 1440er Fenster.
     padding-top 0: das Theme gibt verschachtelten alignfull-Gruppen sonst
     spacing|70 (120) mit. */
  padding-top: 0;
  padding-bottom: 100px;
  /* Seitlicher Rand: früher kam er aus --theme-spacing-responsive-gutter des
     Themes; diese Variable steuert aber den globalen blockGap, deshalb hier
     die eigene Variable. */
  padding-left: var(--content-gutter);
  padding-right: var(--content-gutter);
}

.standort .standort__row {
  /* Figma 52:2377 = 1340 breit, gap 50, vertikal zentriert.
     Der Abstand steht als Variable da, weil die beiden Spalten ihn von
     ihrer Breite abziehen müssen – siehe unten. */
  --standort-gap: 50px;
  display: flex;
  align-items: center;
  gap: var(--standort-gap);
}

.standort .standort__row>* {
  margin-block-start: 0;
  margin-block-end: 0;
}

.standort .standort__info {
  /* Figma 52:2378 = 535 von 1340, 450 hoch wie die Karte daneben.
     Der Textblock steht oben, Kontakte und Buttons sitzen am unteren Rand
     der Spalte (Figma: Kontakte y=314, Buttons y=402, Spalte endet bei 450).

     Der Anteil rechnet gegen die Breite OHNE den Abstand: 535 und 755 teilen
     sich im Entwurf 1290 (= 1340 - 50), nicht 1340. Mit Prozenten von der
     vollen Breite kam der Abstand oben drauf, die Reihe war damit ab knapp
     1440px zu breit und schob die Karte über den rechten Rand hinaus. */
  flex: 0 0 calc((100% - var(--standort-gap)) * 0.414729);
  max-width: calc((100% - var(--standort-gap)) * 0.414729);
  display: flex;
  flex-direction: column;
  /* Gleich hoch wie die Karte daneben (im Entwurf beide 450). Über
     align-self statt fester Höhe, damit beide Spalten zusammen skalieren –
     .standort__row setzt align-items: center, das wird hier überschrieben. */
  align-self: stretch;
}

.standort .standort__info>* {
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-block-end: 0;
  max-width: none;
}

.standort .standort__title {
  /* Figma 52:2380 = Manrope 700 36/45, #4062BB.
     Anders als die übrigen Abschnitte steht hier im Entwurf Manrope,
     nicht die Titelschrift baga. */
  margin: 0;
  font-family: var(--wp--preset--font-family--body);
  font-size: 36px;
  font-weight: 700;
  line-height: 45px;
  /* Figma 52:2380 / 34:74 letterSpacing -0.36 (beide Instanzen) */
  letter-spacing: -0.36px;
  color: var(--theme-color-primary);
}

.standort .standort__text {
  /* Figma 52:2381 = Manrope 400 16/22, Abstand 16 zur Überschrift */
  margin: 16px 0 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  color: var(--color-black);
}

/* Kontakte ------------------------------------------------------------- */

.standort .standort__contacts {
  /* Figma 52:2382 = zwei Spalten mit gap 30; auto schiebt Kontakte und
     Buttons an den unteren Rand der Spalte. */
  display: flex;
  gap: 30px;
  margin-top: auto;
}

/* Das Flow-Layout setzt zwischen Geschwistern einen Blockabstand – in der
   Flex-Reihe schiebt der die zweite Spalte nach unten. */
.standort .standort__contacts>*,
.standort .standort__contact>* {
  margin-block-start: 0;
  margin-block-end: 0;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: none;
}

.standort .standort__label {
  /* Figma 52:2384 = Manrope 400 16/22, Schwarz mit 70 % */
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  color: rgba(0, 0, 0, 0.7);
}

.standort .standort__value {
  /* Figma 52:2386 = Manrope 600 20/28, Abstand 8 zum Label */
  margin: 8px 0 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  color: var(--color-black);
}

.standort .standort__value a {
  color: inherit;
  text-decoration: none;
}

/* Social-Buttons – Figma 52:2391 = 48x48, radius 100, #FF499E, Icon 16 */

.standort .standort__socials {
  display: flex;
  gap: 16px;
  margin-top: 30px;
}

.standort .standort__social {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 100px;
  background-color: var(--theme-color-secondary);
}

.standort .standort__social img {
  display: block;
  width: 16px;
  height: 16px;
}

/* Karte – Figma 52:2397 = 755x450, radius 8 */

.standort .standort__map {
  /* 755 von 1290 – zur Rechnung siehe .standort__info */
  flex: 0 0 calc((100% - var(--standort-gap)) * 0.585271);
  max-width: calc((100% - var(--standort-gap)) * 0.585271);
  /* Figma 52:2397 = 755x450 */
  aspect-ratio: 755 / 450;
  border-radius: 8px;
  overflow: hidden;
}

.standort .standort__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* CTA-Streifen – Figma 52:2398 = 1340x80, radius 8, weiss */

.standort .standort__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 30px;
  padding: 16px 16px 16px 30px;
  border-radius: 8px;
  background-color: var(--color-white);
}

.standort .standort__cta>* {
  margin-block-start: 0;
  margin-block-end: 0;
}

.standort .standort__cta-text {
  /* Figma 52:2399 = Manrope 600 20/28 */
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  color: var(--color-black);
}

.standort .standort__cta-actions {
  margin: 0;
}

/* Figma 52:2400 = 220x48, radius 100, #FF499E, Text 500 16/24 weiss */
.standort .standort__cta-button .wp-block-button__link {
  padding: 12px 16px;
  border-radius: 100px;
  background-color: var(--theme-color-secondary);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: var(--color-white);
}

/* Mobil ---------------------------------------------------------------- */

@media (max-width: 991.98px) {

  .standort {
    /* Figma 80:2482 padding 80/16/0 */
    padding-top: 80px;
    padding-bottom: 0;
  }

  .standort .standort__row {
    flex-direction: column;
    align-items: stretch;
    gap: 30px;
  }

  .standort .standort__info,
  .standort .standort__map {
    flex: 0 0 auto;
    max-width: none;
  }

  .standort .standort__info {
    /* Figma 80:2482: mobil bestimmt der Inhalt die Höhe */
    height: auto;
  }

  .standort .standort__contacts {
    /* Figma 80:2486 gap 30 zum Text */
    margin-top: 30px;
  }

  .standort .standort__title {
    /* Figma 80:2484 / 80:1053 = 28/34, ohne Tracking */
    font-size: 28px;
    line-height: 34px;
    letter-spacing: 0;
  }

  .standort .standort__text {
    /* Figma 80:2483 gap 15 */
    margin-top: 15px;
  }

  .standort .standort__label {
    /* Figma 80:2489 = 14/20, volles Schwarz (nicht 70 % wie am Desktop) */
    font-size: 14px;
    line-height: 20px;
    color: var(--color-black);
  }

  .standort .standort__value {
    /* Figma 80:2491 = 16/22, Abstand 4 zum Label */
    margin-top: 4px;
    font-size: 16px;
    line-height: 22px;
  }

  .standort .standort__socials {
    /* Figma 80:2486 gap 20 zwischen Kontakten und Buttons */
    gap: 12px;
    margin-top: 20px;
  }

  .standort .standort__social {
    /* Figma 80:2496 = 40x40 */
    width: 40px;
    height: 40px;
  }

  .standort .standort__map {
    /* Figma 80:2502 = 343x206 */
    aspect-ratio: 343 / 206;
  }

  .standort .standort__cta {
    /* Figma 80:2503 = spaltenweise, padding 20, gap 16 */
    flex-direction: column;
    align-items: stretch;
    padding: 20px;
  }

  .standort .standort__cta-text {
    /* Figma 80:2504 = 16/19 */
    font-size: 16px;
    line-height: 19px;
  }

  .standort .standort__cta-button {
    /* Figma 80:2505 = über die volle Breite */
    width: 100%;
  }

  .standort .standort__cta-button .wp-block-button__link {
    display: block;
    width: 100%;
    text-align: center;
  }
}

/* Instanz auf den überarbeiteten Unterseiten:
 *   /invisalign-luzern/ · Figma 34:49 (Desktop) / 80:1052 (Mobil)
 *   /kontakt/           · Figma 80:5565 / 80:5680
 * Beide Entwürfe sind Knoten für Knoten identisch (29 bzw. 28 Knoten, eine
 * einzige Abweichung: der obere Innenabstand, siehe .standort--first).
 * Gegenüber der Startseite unterscheiden sie sich in vier Werten – die stehen
 * hier unter dem Modifikator, die Startseite bleibt unberührt. */

.standort--page {
  /* Die Seite erbt die 1024 des Eltern-Themes (nur body.home wird auf 1340
     erweitert). Der Entwurf zeigt hier aber die 1340er Reihe, deshalb die
     Inhaltsbreite für diesen Abschnitt setzen – die verschachtelten Blöcke
     ziehen ihre max-width aus dieser Variablen. */
  --wp--style--global--content-size: var(--content-max-width);
}

.standort--page .standort__text {
  /* Figma 34:79 gap 15 (Startseite 52:2379 = 16) */
  margin-top: 15px;
}

.standort--page .standort__value {
  /* Figma 34:115 / 34:108 gap 10 (Startseite 52:2383 / 52:2387 = 8) */
  margin-top: 10px;
}

.standort--first {
  /* Figma 80:5565 padding-top 100: auf /kontakt/ ist der Abschnitt der erste
     Inhalt unter der Kopfzeile (auf /invisalign-luzern/ steht er zuletzt und
     hat oben 0). */
  padding-top: 100px;
}

@media (max-width: 991.98px) {

  .standort--first {
    /* Figma 80:5680 = mobil dieselben 80 wie überall */
    padding-top: 80px;
  }

  .standort--page {
    /* Figma 80:1052 padding-bottom 80 – hier ist der Abschnitt der letzte
       Inhalt vor dem Footer (Startseite 80:2482 = 0). */
    padding-bottom: 80px;
  }

  .standort--page .standort__socials {
    /* Figma 80:1131 gap 16 (Startseite 80:2495 = 12) */
    gap: 16px;
  }

  .standort--page .standort__value {
    /* Die 10 oben gelten nur am Desktop; mobil sind es wie auf der
       Startseite 4 (Figma 80:1117 gap 4). */
    margin-top: 4px;
  }
}

/* --------------------------------------------------------------------- *
 * Mitgliedschaften · Figma 24:5717 (Desktop) / 80:2434 (Mobil)
 * Überschrift und darunter weisse Kacheln mit den Verbandslogos.
 * --------------------------------------------------------------------- */

.mitglied {
  /* Figma 24:5717 padding 0/50/100/50, gap 30 */
  padding-top: 0;
  padding-bottom: 100px;
  /* Seitlicher Rand: früher kam er aus --theme-spacing-responsive-gutter des
     Themes; diese Variable steuert aber den globalen blockGap, deshalb hier
     die eigene Variable. */
  padding-left: var(--content-gutter);
  padding-right: var(--content-gutter);
}

.mitglied .mitglied__title {
  /* Figma 24:5718 = Manrope 700 36/45, #4062BB, zentriert */
  margin: 0;
  font-family: var(--wp--preset--font-family--body);
  font-size: 36px;
  font-weight: 700;
  line-height: 45px;
  text-align: center;
  color: var(--theme-color-primary);
}

.mitglied .mitglied__list {
  /* Figma 53:2677 = 879 breite Zone (1341 minus 231 je Seite), zwei Reihen
     mit gap 16; die Reihen ergeben sich aus den Kachelbreiten. */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  /* 879 aus dem Entwurf plus ein Pixel: die erste Kachel ist wegen der
     skalierten PNG-Breite 211.33 statt 211 breit, sonst bricht die dritte
     Kachel in die nächste Zeile um. */
  max-width: 880px;
  margin: 30px auto 0;
}

.mitglied .mitglied__item {
  /* Figma 53:3088 = weiss, radius 8, 100 hoch, padding 20 */
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 100px;
  padding: 20px;
  border-radius: 8px;
  background-color: var(--color-white);
}

.mitglied .mitglied__item img {
  /* Figma 53:3089 u. a. = 60 hoch, Breite nach Bild */
  display: block;
  width: auto;
  height: 60px;
}

/* Figma 24:5937/24:5938 = das EOS-Signet ist 67x70, also höher als die
   übrigen, und seine Kachel ist mit 112 breiter als Bild plus Innenabstand. */
.mitglied .mitglied__item--eos {
  width: 112px;
}

.mitglied .mitglied__item--eos img {
  height: 70px;
}

/* Mobil ---------------------------------------------------------------- */

@media (max-width: 991.98px) {

  .mitglied {
    /* Figma 80:2434 padding 80/16 */
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .mitglied .mitglied__title {
    /* Figma 80:2435 = 28/34 */
    font-size: 28px;
    line-height: 34px;
  }

  .mitglied .mitglied__list {
    /* Figma 80:3554 = gap 10, Abstand 40 zur Überschrift */
    gap: 10px;
    margin-top: 40px;
    max-width: none;
  }

  .mitglied .mitglied__item {
    /* Figma 80:3141 = 48 hoch, padding 8 */
    height: 48px;
    padding: 8px;
  }

  .mitglied .mitglied__item img {
    /* Figma 80:3142 = 32 hoch */
    height: 32px;
  }

  .mitglied .mitglied__item--eos {
    /* Figma 80:3408 = 68 breit */
    width: 68px;
  }

  .mitglied .mitglied__item--eos img {
    /* Figma 80:3409 = 40x42 */
    height: 42px;
  }
}

/* --------------------------------------------------------------------- *
 * Footer · Figma 20:3770 (Desktop) / 80:2507 (Mobil)
 * Links Adresse und Kontakte, daneben die Zeiten, rechts die Download-Box;
 * die Rechtslinks stehen im Entwurf absolut am unteren linken Rand.
 * --------------------------------------------------------------------- */

.site-footer {
  /* Figma 20:3770 = #4062BB, padding 50 ringsum. Die 50 an den Seiten sind
     bei 1440 genau der Rand der 1340er Inhaltsbreite – deshalb steht hier
     der normale Seitenrand, die Breite regelt __inner. Sonst hätte der
     Footer unter 1440 einen grösseren Rand als der Rest der Seite. */
  padding: 50px var(--content-gutter);
  background-color: var(--theme-color-primary);
  color: var(--color-white);
}

.site-footer .site-footer__inner {
  /* Figma 20:3771 = 1340x423; die Rechtslinks liegen absolut darin */
  position: relative;
  max-width: var(--content-max-width);
  min-height: 423px;
  margin: 0 auto;
}

.site-footer .site-footer__inner>* {
  margin-block-start: 0;
  margin-block-end: 0;
}

.site-footer .site-footer__main {
  /* Figma 20:3771 pal SPACE_BETWEEN, cal MIN */
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 50px;
}

.site-footer .site-footer__main>* {
  margin-block-start: 0;
  margin-block-end: 0;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: none;
}

/* Adresse und Kontakte ------------------------------------------------- */

.site-footer .site-footer__col {
  display: flex;
  flex-direction: column;
}

.site-footer .site-footer__col>*,
.site-footer .site-footer__address>*,
.site-footer .site-footer__hours>* {
  margin-block-start: 0;
  margin-block-end: 0;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: none;
}

.site-footer .site-footer__cols {
  /* Figma 20:3772 = 501 breit, die beiden Spalten mit gap 50.
     Feste Breite: schrumpft die linke Seite mit, brechen Zeiten und
     E-Mail-Adresse um. Unter 1440 gibt stattdessen die Download-Box nach. */
  display: flex;
  flex: 0 0 501px;
  gap: 50px;
}

.site-footer .site-footer__cols>* {
  margin-block-start: 0;
  margin-block-end: 0;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: none;
}

.site-footer .site-footer__col--contact {
  /* Figma 20:3773 = 275 breit, gap 30 zwischen Adresse und Kontakten */
  flex: 0 0 275px;
  gap: 30px;
}

.site-footer .site-footer__company,
.site-footer .site-footer__street {
  /* Figma 20:3775/20:3776 = Manrope 500 20/28, weiss, kein Abstand dazwischen */
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  color: var(--color-white);
}

.site-footer .site-footer__contacts {
  /* Figma 20:3777 = Spalte mit gap 16 */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.site-footer .site-footer__contact {
  /* Figma 20:3778 = Icon 16 + Text, gap 8, mittig */
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  color: var(--color-white);
  text-decoration: none;
  transition: color 0.3s ease-in-out;
}

/* Nur auf Geräten mit echtem Zeiger – sonst bliebe der Zustand nach
   einem Tap hängen. Für Mobil gibt es im Entwurf keinen Hover. */
@media (hover: hover) {
  .site-footer .site-footer__contact:hover,
  .site-footer .site-footer__contact:focus-visible {
    /* Figma 53:2589 = Text und Icon werden #FF499E */
    color: var(--theme-color-secondary);
  }
}

/* Die Icons liegen als Maske über der Textfarbe, damit sie beim Hover
   mitwechseln – als <img> liesse sich die Farbe nicht steuern. */
.site-footer .site-footer__contact-icon {
  display: block;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: var(--icon) no-repeat center / contain;
  mask: var(--icon) no-repeat center / contain;
}

.site-footer .site-footer__contact-icon--phone {
  --icon: url("../images/footer/icon-phone.svg");
}

.site-footer .site-footer__contact-icon--whatsapp {
  --icon: url("../images/footer/icon-whatsapp.svg");
}

.site-footer .site-footer__contact-icon--mail {
  --icon: url("../images/footer/icon-mail.svg");
}

.site-footer .site-footer__contact-icon--instagram {
  --icon: url("../images/footer/icon-instagram.svg");
}

/* Zeiten --------------------------------------------------------------- */

.site-footer .site-footer__col--hours {
  /* Figma 20:3796 = 176 breit, gap 30 */
  flex: 0 0 176px;
  gap: 30px;
}

.site-footer .site-footer__hours {
  /* Figma 20:3797 gap 8 */
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.site-footer .site-footer__hours-label {
  /* Figma 20:3798 = 400 16/22, Weiss mit 70 % */
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  color: rgba(255, 255, 255, 0.7);
}

.site-footer .site-footer__hours-value {
  /* Figma 20:3799 = 500 20/28 */
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  color: var(--color-white);
}

/* Downloads ------------------------------------------------------------ */

.site-footer .site-footer__downloads {
  /* Figma 20:3803 = 548x420, radius 8, padding 30, gap 30.
     Die Füllung ist Weiss plus #A3CEF2 bei 60 % – das ergibt #C8E2F7. */
  /* Figma 20:3803 = 548 breit; darf als einziger Teil nachgeben, wenn das
     Fenster schmaler als 1440 wird. */
  flex: 0 1 548px;
  min-width: 0;
  box-sizing: border-box;
  padding: 30px;
  border-radius: 8px;
  background-color: #C8E2F7;
  color: var(--color-black);
}

.site-footer .site-footer__downloads>* {
  margin-block-start: 0;
  margin-block-end: 0;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: none;
}

.site-footer .site-footer__downloads-title {
  /* Figma 20:3804 = Manrope 600 24/26, schwarz */
  margin: 0;
  font-family: var(--wp--preset--font-family--body);
  font-size: 24px;
  font-weight: 600;
  line-height: 26px;
  color: var(--color-black);
}

.site-footer .site-footer__download-list {
  /* Figma 20:3805 = Spalte mit gap 16, Abstand 30 zur Überschrift */
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 30px;
}

.site-footer .site-footer__download {
  /* Figma 20:3806 = Icon-Kreis + Text, gap 16, mittig */
  display: flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  color: inherit;
}

.site-footer .site-footer__download-icon {
  /* Figma 20:3807 = 48x48, radius 100, weiss, Icon 24 */
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 100px;
  background-color: var(--color-white);
  transition: background-color 0.3s ease-in-out;
}

.site-footer .site-footer__download-glyph {
  /* Figma 20:3808 = 24x24, schwarz. Maske statt <img>, damit das Symbol
     beim Hover weiss wird und gegen den Download-Pfeil tauschen kann. */
  display: block;
  width: 24px;
  height: 24px;
  background-color: var(--color-black);
  -webkit-mask: var(--icon) no-repeat center / contain;
  mask: var(--icon) no-repeat center / contain;
  transition: background-color 0.3s ease-in-out;
}

.site-footer .site-footer__download-glyph--document {
  --icon: url("../images/footer/icon-document.svg");
}

.site-footer .site-footer__download-glyph--video {
  --icon: url("../images/footer/icon-video.svg");
}

/* Nur auf Geräten mit echtem Zeiger – sonst bliebe der Zustand nach
   einem Tap hängen. Für Mobil gibt es im Entwurf keinen Hover. */
@media (hover: hover) {
  .site-footer .site-footer__download:hover .site-footer__download-icon,
  .site-footer .site-footer__download:focus-visible .site-footer__download-icon {
    /* Figma 53:2608 = Kreis wird #FF499E */
    background-color: var(--theme-color-secondary);
  }

  .site-footer .site-footer__download:hover .site-footer__download-glyph,
  .site-footer .site-footer__download:focus-visible .site-footer__download-glyph {
    /* Figma 53:2652 = weisser Download-Pfeil statt des schwarzen Symbols */
    --icon: url("../images/footer/icon-download.svg");
    background-color: var(--color-white);
  }
}

.site-footer .site-footer__download-text {
  /* Figma 20:3810 = Spalte, gap 4, vertikal zentriert */
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

.site-footer .site-footer__download-title {
  /* Figma 20:3811 = 600 16/22, schwarz */
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
  color: var(--color-black);
}

.site-footer .site-footer__download-desc {
  /* Figma 20:3812 = 400 16/22, Schwarz mit 70 % */
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  color: rgba(0, 0, 0, 0.7);
}

/* Rechtslinks ---------------------------------------------------------- */

.site-footer .site-footer__legal {
  /* Figma 20:3841 = layoutPositioning ABSOLUTE, unten links im Container.
     width: max-content, weil ein absolut gesetztes nav sonst auf 0 schrumpft
     und die Liste darin umbricht. */
  position: absolute;
  left: 0;
  bottom: 0;
  width: max-content;
}

/* Die Liste steht in der Theme-Basis auf position:absolute (für das
   Overlay-Menü); dadurch bliebe das nav hier 0 breit. */
.site-footer .site-footer__legal .wp-block-navigation__container {
  position: static;
  flex-wrap: nowrap;
}

.site-footer .site-footer__legal .wp-block-navigation-item__content {
  /* Figma 20:3842 = 400 16/24, weiss */
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--color-white);
  text-decoration: none;
  transition: color 0.3s ease-in-out;
}

/* Nur auf Geräten mit echtem Zeiger – sonst bliebe der Zustand nach
   einem Tap hängen. Für Mobil gibt es im Entwurf keinen Hover. */
@media (hover: hover) {
  .site-footer .site-footer__legal .wp-block-navigation-item__content:hover,
  .site-footer .site-footer__legal .wp-block-navigation-item__content:focus-visible {
    /* Im Entwurf nicht gezeigt; auf Wunsch dieselbe Hover-Farbe wie bei den
       übrigen Links. */
    color: var(--theme-color-secondary);
  }
}

/* Mobil ---------------------------------------------------------------- */

@media (max-width: 991.98px) {

  .site-footer {
    /* Figma 80:2507 padding 40/16/16/16 */
    padding: 40px var(--content-gutter) var(--content-gutter);
  }

  .site-footer .site-footer__inner {
    min-height: 0;
  }

  .site-footer .site-footer__main {
    /* Figma 80:2507 = eine Spalte, gap 30. stretch, damit Zeiten-Reihe und
       Download-Box über die volle Feldbreite gehen (der Desktop steht auf
       flex-start). */
    flex-direction: column;
    align-items: stretch;
    gap: 30px;
  }

  .site-footer .site-footer__col,
  .site-footer .site-footer__downloads {
    flex: 0 0 auto;
  }

  .site-footer .site-footer__downloads {
    /* Figma 80:2537 = über die volle Feldbreite (343 bei 375) */
    align-self: stretch;
  }

  /* Figma 80:2507: mobil stehen die Zeiten VOR den Kontakten – dafür lösen
     sich die beiden Wrapper auf, damit die Reihenfolge frei wählbar ist. */
  .site-footer .site-footer__cols,
  .site-footer .site-footer__col--contact {
    display: contents;
  }

  .site-footer .site-footer__address {
    order: 1;
  }

  .site-footer .site-footer__col--hours {
    /* Figma 80:2511 = beide Zeitblöcke nebeneinander, gap 10 */
    order: 2;
    flex-direction: row;
    align-self: stretch;
    gap: 10px;
  }

  .site-footer .site-footer__hours {
    /* Beide Zeitspalten je zur Hälfte der Feldbreite (Wunsch des Kunden;
       im Entwurf richten sie sich mit 176/130 nach dem Inhalt). */
    flex: 1 1 0;
    min-width: 0;
  }

  .site-footer .site-footer__contacts {
    /* Figma 80:2518 gap 12 */
    order: 3;
    gap: 12px;
  }

  .site-footer .site-footer__downloads {
    order: 4;
  }

  .site-footer .site-footer__company,
  .site-footer .site-footer__street {
    /* Figma 80:2509 = 16/22 */
    font-size: 16px;
    line-height: 22px;
  }

  .site-footer .site-footer__contact {
    /* Figma 80:2521 = 600 statt 500 */
    font-weight: 600;
  }

  .site-footer .site-footer__hours-label {
    /* Figma 80:2513 = 14/20 */
    font-size: 14px;
    line-height: 20px;
  }

  .site-footer .site-footer__hours-value {
    /* Figma 80:2514 = 16/22 */
    font-size: 16px;
    line-height: 22px;
  }

  .site-footer .site-footer__downloads {
    /* Figma 80:2537 padding 20, gap 20 */
    padding: 20px;
  }

  .site-footer .site-footer__downloads-title {
    /* Figma 80:2538 = 20/26 */
    font-size: 20px;
    line-height: 26px;
  }

  .site-footer .site-footer__download-list {
    /* Figma 80:2539 = gap 15, Abstand 20 zur Überschrift */
    gap: 15px;
    margin-top: 20px;
  }

  .site-footer .site-footer__download {
    /* Figma 80:2540 gap 10, oben ausgerichtet */
    align-items: flex-start;
    gap: 10px;
  }

  .site-footer .site-footer__download-icon {
    /* Figma 80:2541 = 40x40 */
    flex-basis: 40px;
    width: 40px;
    height: 40px;
  }

  .site-footer .site-footer__download-glyph {
    /* Figma 80:2542 = 16x16 im kleineren Kreis */
    width: 16px;
    height: 16px;
  }

  .site-footer .site-footer__download-desc {
    /* Figma 80:2543 = 14/20 */
    font-size: 14px;
    line-height: 20px;
  }

  .site-footer .site-footer__legal {
    /* Figma 80:2575 = im Fluss, 30 Abstand zur Download-Box */
    position: static;
    margin-top: 30px;
  }

  .site-footer .site-footer__legal .wp-block-navigation-item__content {
    /* Figma 80:2576 = 14/24 */
    font-size: 14px;
    line-height: 24px;
  }
}