/* =========================================================
   Allelon – dezente Animationen (Zusatz, ohne das Design zu aendern)
   ========================================================= */

/* Nur fuer Screenreader/SEO sichtbar (visuell ausgeblendet) */
.allelon-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* sanfte Uebergaenge fuer Buttons & Links (immer, sehr dezent) */
.brxe-button,
a.brxe-button,
.bricks-button,
.brxe-text-link a,
a.brxe-text-link {
  transition: transform .25s ease, box-shadow .25s ease,
              background-color .25s ease, color .25s ease, opacity .25s ease;
}

/* =========================================================
   HERO – kein Foto mehr, dafuer eleganter Mesh-Verlauf
   ========================================================= */


/* Heading-Bereich – Zentrierung erzwingen (Bricks setzt row+space-between) */
/* Das Hero-Hintergrundbild gehoert NUR hierher (nicht hinter die Angebote). */
.home-hero__head-container {
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: clamp(70px, 9vw, 140px) clamp(20px, 5vw, 60px) clamp(50px, 7vw, 110px) !important;
  text-align: center;
  position: relative;
  background-image: url("../wp-content/uploads/0-347e898b-18d7-479d-94be-98f07a375234-1184x800-1.jpg");
  background-size: cover;
  background-position: center;
  border-radius: var(--radius-xl);
  overflow: hidden;
}
/* Abdunkelnder Overlay fuer Textkontrast (liegt UNTER den Puzzleteilen) */
.home-hero__head-container::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(135% 105% at 50% 42%, rgba(8, 12, 30, .30), rgba(8, 12, 30, .58) 78%),
    linear-gradient(180deg, rgba(8, 12, 30, .30) 0%, rgba(8, 12, 30, .44) 100%);
}
/* Container traegt KEIN Hintergrundbild mehr (sonst auch hinter den Angeboten) */
.home-hero__container.brxe-container {
  background-image: none !important;
}
.home-hero__info-container {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-width: 880px !important;
  width: 100% !important;
  position: relative;
  z-index: 3;
}

/* kleine Tagline ueber dem Heading */
.hero-eyebrow {
  margin: 0;
  font-size: .8rem;
  letter-spacing: .26em;
  font-weight: 700;
  color: rgba(255, 255, 255, .85);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.hero-eyebrow::before,
.hero-eyebrow::after {
  content: "";
  width: 28px; height: 1px;
  background: rgba(255, 255, 255, .55);
}

/* Heading */
.home-hero__heading {
  margin: 0 !important;
  text-align: center;
  font-weight: 700;
  font-size: clamp(2.4rem, 5.5vw, 5rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -.025em;
  color: #ffffff !important;
  text-shadow: 0 4px 30px rgba(15, 20, 70, .25);
  max-width: 100% !important;
}

/* Untertitel */
.hero-subline {
  margin: 4px 0 0;
  font-size: clamp(1rem, 1.4vw + .4rem, 1.25rem);
  line-height: 1.55;
  font-weight: 400;
  color: rgba(255, 255, 255, .88);
  max-width: 640px;
}

/* CTA-Buttons */
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 18px;
  justify-content: center;
}
.hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: .01em;
  text-decoration: none !important;
  transition: transform .25s ease, box-shadow .25s ease,
              background-color .25s ease, color .25s ease,
              border-color .25s ease;
}
.hero-btn--solid {
  background: #ffffff;
  color: #273A8F;
  box-shadow: 0 10px 28px rgba(20, 30, 90, .25);
}
.hero-btn--solid:hover {
  transform: translateY(-2px);
  background: #f4f6ff;
  box-shadow: 0 16px 36px rgba(20, 30, 90, .32);
}
.hero-btn--ghost {
  background: transparent;
  color: #ffffff;
  border: 1.5px solid rgba(255, 255, 255, .6);
}
.hero-btn--ghost:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, .12);
  border-color: #ffffff;
}

/* dekorative Puzzleteile – ueber dem Overlay, deutlich sichtbar + lebendig */
.hero-decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}
.hero-decor__p {
  position: absolute;
  width: clamp(84px, 9vw, 158px);
  height: auto;
  opacity: .5;
  /* weisslich faerben + weicher Schatten fuer Tiefe */
  filter: brightness(0) invert(1) drop-shadow(0 8px 18px rgba(0, 0, 0, .25));
  will-change: transform;
}
.hero-decor__p1 { top: 6%;   left: 1%;   rotate: -18deg; animation: heroFloat1 11s ease-in-out infinite; }
.hero-decor__p2 { top: 10%;  right: 1%;  rotate: 22deg;  animation: heroFloat2 13s ease-in-out infinite; }
.hero-decor__p3 { bottom: 10%; left: 2%; rotate: 14deg;  animation: heroFloat3 12s ease-in-out infinite; }
.hero-decor__p4 { bottom: 7%; right: 2%; rotate: -26deg; animation: heroFloat4 14s ease-in-out infinite; }

/* jedes Teil schwebt und kippt eigenstaendig (Float + Wobble) */
@keyframes heroFloat1 {
  0%, 100% { translate: 0 0;        rotate: -18deg; }
  50%      { translate: 16px -24px; rotate: -6deg;  }
}
@keyframes heroFloat2 {
  0%, 100% { translate: 0 0;         rotate: 22deg; }
  50%      { translate: -18px -20px; rotate: 34deg; }
}
@keyframes heroFloat3 {
  0%, 100% { translate: 0 0;        rotate: 14deg; }
  50%      { translate: 14px -26px; rotate: 2deg;  }
}
@keyframes heroFloat4 {
  0%, 100% { translate: 0 0;         rotate: -26deg; }
  50%      { translate: -15px -22px; rotate: -12deg; }
}

/* die Angebots-Box bleibt sauber ueber den Dekorations-Layer */
.home-hero__wrapper {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .hero-decor__p { animation: none; }
}

/* =========================================================
   Slogan-Block "Dafür stehen wir" – cleaner Look + Mesh-Gradient
   ========================================================= */
.home-slogan {
  position: relative;
  isolation: isolate;          /* haelt den Gradient unter dem Text */
  padding: 90px 24px;
  overflow: hidden;
  /* mehrschichtiger Pastell-Mesh – kraeftiger als vorher */
  background:
    radial-gradient(60% 70% at 12% 18%, rgba(120,160,255,.55) 0%, rgba(120,160,255,0) 60%),
    radial-gradient(55% 65% at 88% 22%, rgba(255,170,210,.55) 0%, rgba(255,170,210,0) 60%),
    radial-gradient(70% 80% at 78% 92%, rgba(180,150,255,.55) 0%, rgba(180,150,255,0) 60%),
    radial-gradient(55% 70% at 18% 88%, rgba(140,210,255,.55) 0%, rgba(140,210,255,0) 60%),
    linear-gradient(135deg, #eaf0ff 0%, #f4edff 50%, #ffeef4 100%);
}
/* feiner Rahmen + sanftes Glow oben/unten fuer mehr Tiefe */
.home-slogan::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  box-shadow:
    inset 0  60px 80px -60px rgba(255,255,255,.6),
    inset 0 -60px 80px -60px rgba(255,255,255,.6);
  z-index: -1;
}

.home-slogan__tag-container {
  display: flex;
  justify-content: center;
  margin-bottom: 22px;
}
.home-slogan__tag-container .global__tagline,
.home-slogan__tag-container .home-hero__tagline {
  margin: 0;
  font-size: .78rem;
  letter-spacing: .22em;
  font-weight: 700;
  color: #273A8F;
  text-transform: uppercase;
}
.home-slogan__heading {
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
  font-weight: 700;
  font-size: clamp(1.6rem, 2.6vw + .8rem, 2.6rem);
  line-height: 1.25;
  color: #16204d;
  letter-spacing: -.005em;
}
.home-slogan__heading .slogan-hl {
  color: #273A8F;
  position: relative;
  white-space: nowrap;
}
/* dezente Akzentlinie unter den 2 Schluesselwoertern */
.home-slogan__heading .slogan-hl::after {
  content: "";
  position: absolute;
  left: 4%; right: 4%;
  bottom: -.08em;
  height: .12em;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(39,58,143,.0), rgba(39,58,143,.6), rgba(39,58,143,.0));
}

/* =========================================================
   Angebots-Kacheln: schoeneres, einheitliches Grunddesign
   ========================================================= */
/* ALLE Kacheln gleich hoch (per JS angeglichen) -> Buttons auf einer Linie */
.home-hero__feature-list.brxe-block {
  align-items: stretch;
}
.card-home-hero {
  position: relative;            /* Anker fuer den absolut platzierten Button */
  background: #ffffff;
  border: 1px solid rgba(39, 58, 143, .10);
  border-radius: 20px;
  box-shadow: 0 6px 20px rgba(16, 24, 64, .06);
  overflow: hidden;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  padding: 32px 32px 104px !important;   /* unten Platz fuer fixierten Button (Bricks ueberschreibt sonst) */
  gap: 18px;
  transition: transform .32s cubic-bezier(.22,.61,.36,1),
              box-shadow .32s ease,
              border-color .32s ease,
              background-color .32s ease;
}

/* ----- Innenleben sauber & konsistent ----- */

/* Header-Bereich (Puzzleteil + Titel) */
.card-home-hero > .brxe-block:first-child {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0;
}
.card-home-hero img[data-allelon-puzzle] {
  width: 64px;
  height: auto;
  flex: 0 0 auto;
  margin: 0;
}
.card-home-hero__heading {
  margin: 0;
  font-size: 1.4rem;
  line-height: 1.25;
  font-weight: 700;
  color: #16204d;
}

/* Beschreibungs-Block: einheitliche Schriftgroesse.
   WICHTIG: NICHT wachsen lassen (sonst frisst es den Freiraum, der den
   Button nach unten schieben soll). Der Freiraum gehoert dem Button-Wrapper. */
.card-home-hero__description {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: #2a2f45;
  flex: 0 0 auto !important;
}
/* Status-Block ebenfalls feste Hoehe (nicht wachsen) */
.card-home-hero .brxe-imcpea {
  flex: 0 0 auto !important;
}
.card-home-hero__description > p:first-child {
  margin-top: 0;
}
.card-home-hero__description > *:last-child {
  margin-bottom: 0;
}
.card-home-hero__description p {
  margin: 0 0 .6em;
}
.card-home-hero__description strong {
  font-weight: 700;
  color: #16204d;
}
.card-home-hero__description ul {
  list-style: disc;
  padding-left: 1.25em;
  margin: 0;
}
.card-home-hero__description li {
  margin: 0 0 .35em;
  padding-left: .15em;
}
.card-home-hero__description li::marker {
  color: #273A8F;
}

/* Status-Hinweis (Haekchen + Text) */
.card-home-hero .brxe-imcpea {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: #f3f5ff;
  border-radius: 12px;
  margin: 0;
}
.card-home-hero .brxe-imcpea .brxe-icon {
  flex: 0 0 auto;
  font-size: 1.5rem;
  color: #273A8F;
  line-height: 1;
  margin-top: 1px;
}
.card-home-hero .brxe-imcpea .brxe-text,
.card-home-hero .brxe-imcpea .brxe-text p {
  margin: 0;
  font-size: 1rem;       /* gleiche Groesse wie Beschreibung */
  line-height: 1.45;
  color: #16204d;
}
.card-home-hero .brxe-imcpea .brxe-text strong {
  font-weight: 700;
}

/* Button-Wrapper: ABSOLUT am Kachelboden fixiert -> immer exakt gleiche
   Position, unabhaengig von Inhaltslaenge oder Flexbox-Eigenheiten. */
.card-home-hero > .brxe-block:last-child {
  position: absolute !important;
  left: 32px;
  right: 32px;
  bottom: 28px;
  top: auto !important;
  height: -webkit-fit-content !important;
  height: fit-content !important;   /* NICHT auf Kartenhoehe strecken */
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* Button: ueberall identische Farbe (auch :link / :visited) */
.card-home-hero .global-hero__btn,
.card-home-hero .global-hero__btn:link,
.card-home-hero .global-hero__btn:visited {
  background-color: var(--primary);
  color: var(--light);
}

/* blauer Hover ueber die GANZE Kachel */
.card-home-hero:hover {
  border-color: #273A8F;
  background: linear-gradient(180deg, #eef1ff 0%, #ffffff 70%);
  box-shadow: 0 22px 48px rgba(39, 58, 143, .22);
}
/* Titel & Icon beim Hover blau betonen */
.card-home-hero:hover .card-home-hero__heading,
.card-home-hero:hover .brxe-heading {
  color: #273A8F;
}
.card-home-hero:hover .brxe-icon,
.card-home-hero:hover .brxe-icon i {
  color: #273A8F;
}
.card-home-hero .card-home-hero__heading,
.card-home-hero .brxe-icon,
.card-home-hero .brxe-icon i {
  transition: color .3s ease;
}

@media (prefers-reduced-motion: no-preference) {

  /* ---- Puzzleteile: leichtes Schweben + Hover ---- */
  img[data-allelon-puzzle] {
    will-change: transform;
    animation: allelonFloat 6s ease-in-out infinite;
    transform-origin: center;
    transition: transform .4s ease;
  }
  img[data-allelon-puzzle="2"] { animation-delay: -1s; }
  img[data-allelon-puzzle="3"] { animation-delay: -2s; }
  img[data-allelon-puzzle="4"] { animation-delay: -3s; }
  img[data-allelon-puzzle="5"] { animation-delay: -4s; }
  img[data-allelon-puzzle="6"] { animation-delay: -5s; }

  @keyframes allelonFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-7px) rotate(1.6deg); }
  }

  /* ---- Hover-Lift fuer Buttons ---- */
  .brxe-button:hover,
  a.brxe-button:hover,
  .bricks-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(39, 58, 143, .18);
  }

  /* ---- sanfter Lift der ganzen Kachel beim Hover ---- */
  .card-home-hero:hover {
    transform: translateY(-6px);
  }

  /* ---- Scroll-Reveal (nur aktiv, wenn JS die Klasse setzt) ---- */
  html.allelon-anim .allelon-reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .7s cubic-bezier(.22, .61, .36, 1),
                transform .7s cubic-bezier(.22, .61, .36, 1);
  }
  html.allelon-anim .allelon-reveal.is-visible {
    opacity: 1;
    transform: none;
  }
}

/* =========================================================
   "Zum Angebot"-Buttons – schoener Hover-Effekt
   ========================================================= */
a.global-hero__btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 14px 56px 14px 32px;        /* extra Platz rechts fuer den Pfeil */
  letter-spacing: .18em;
  font-weight: 600;
  background: #273A8F;
  color: #ffffff;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(39, 58, 143, .22);
  transition: transform .35s cubic-bezier(.22,.61,.36,1),
              box-shadow .35s ease,
              padding .35s ease,
              background-color .35s ease;
}

/* Pfeil ">", erscheint beim Hover */
a.global-hero__btn::after {
  content: "→";
  position: absolute;
  top: 50%;
  right: 26px;
  transform: translate(-8px, -50%);
  font-size: 1.15em;
  font-weight: 400;
  line-height: 1;
  opacity: 0;
  transition: opacity .3s ease, transform .35s cubic-bezier(.22,.61,.36,1);
  pointer-events: none;
}

/* Glanz-Streifen, zieht beim Hover ueber den Button */
a.global-hero__btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg,
              rgba(255,255,255,0)   0%,
              rgba(255,255,255,0)   38%,
              rgba(255,255,255,.35) 50%,
              rgba(255,255,255,0)   62%,
              rgba(255,255,255,0)   100%);
  background-size: 220% 100%;
  background-position: -120% 0;
  transition: background-position .8s cubic-bezier(.22,.61,.36,1);
  pointer-events: none;
  z-index: 0;
}

a.global-hero__btn > * { position: relative; z-index: 1; }

/* Hover-Zustand: Lift + Glow + Pfeil + Glanz + Verlauf */
a.global-hero__btn:hover,
a.global-hero__btn:focus-visible {
  transform: translateY(-3px);
  padding-right: 64px;                 /* schiebt Text leicht nach links */
  background-image: linear-gradient(135deg, #273A8F 0%, #4456c6 100%);
  box-shadow:
    0 14px 32px rgba(39, 58, 143, .38),
    0 0 0 4px rgba(120, 145, 255, .18); /* sanfter Halo */
}
a.global-hero__btn:hover::after,
a.global-hero__btn:focus-visible::after {
  opacity: 1;
  transform: translate(0, -50%);
}
a.global-hero__btn:hover::before,
a.global-hero__btn:focus-visible::before {
  background-position: 220% 0;
}

/* gedrueckt: kurz "stempeln" */
a.global-hero__btn:active {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(39, 58, 143, .28);
  transition-duration: .08s;
}

@media (prefers-reduced-motion: reduce) {
  a.global-hero__btn,
  a.global-hero__btn::after,
  a.global-hero__btn::before {
    transition: none;
  }
}

/* =========================================================
   Angebots-Kacheln: Buttons alle auf gleicher Hoehe
   (Karte streckt sich auf volle Reihen-Hoehe, Description
    nimmt verbleibenden Platz, Button rutscht nach unten)
   ========================================================= */
/* Feature-Liste als Grid mit gleichen Karten-Hoehen */
ul.home-hero__feature-list,
.home-hero__feature-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 20px !important;
  align-items: stretch !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}
@media (max-width: 720px) {
  ul.home-hero__feature-list,
  .home-hero__feature-list {
    grid-template-columns: 1fr !important;
  }
}
/* Jede Karte = Flex column mit voller Hoehe */
article.card-home-hero,
.card-home-hero {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  margin: 0 !important;
}
/* Description nimmt verbleibenden Platz */
.card-home-hero .card-home-hero__description {
  flex: 1 1 auto !important;
}
/* Button-Wrapper IMMER ans untere Ende */
.card-home-hero > .brxe-pkvqmr,
.card-home-hero > div.brxe-block:last-child,
.card-home-hero > *:last-child {
  margin-top: auto !important;
}

/* =========================================================
   ÜBER UNS → TEAM (page-id-594) — im Stil der Startseite
   ========================================================= */

/* ---------- Hero: Mesh-Verlauf statt Foto ---------- */


.global-hero__container {
  position: relative;
  z-index: 2;
  padding: clamp(50px, 5vw, 90px) clamp(20px, 5vw, 60px) clamp(90px, 10vw, 150px) !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: transparent !important;
}
.global-hero__container-info {
  max-width: 880px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.global-hero__heading {
  margin: 0 !important;
  text-align: center;
  font-weight: 700;
  font-size: clamp(1.75rem, 2.6vw + .6rem, 2.8rem) !important;
  line-height: 1.15 !important;
  letter-spacing: -.015em;
  color: #ffffff !important;
  text-shadow: 0 2px 18px rgba(15, 20, 70, .2);
  max-width: 760px !important;
}
/* Erstbuchstabe gross fuer Headings die mit Kleinbuchstaben starten ("über uns", "unsere Angebote") */
.global-hero__heading::first-letter {
  text-transform: uppercase;
}
.global-hero__description,
.global-hero__description p {
  margin: 0;
  font-size: clamp(.92rem, .3vw + .65rem, 1.02rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, .85);
  max-width: 540px;
  text-align: center;
  font-weight: 400;
}
.global-hero__description { margin: 0 auto; }

/* ---------- Section-Header (Tagline + Heading) ---------- */
.team-member { padding: 60px 0 40px; }
.team-member__container-info {
  text-align: center;
  margin-bottom: 36px;
}
.team-member__container-info .global__tagline {
  margin: 0 0 10px;
  font-size: .8rem;
  letter-spacing: .26em;
  font-weight: 700;
  color: #273A8F;
  text-transform: uppercase;
}
.team-member__heading {
  margin: 0;
  font-size: clamp(1.8rem, 2.6vw + .8rem, 2.6rem);
  line-height: 1.2;
  font-weight: 700;
  color: #16204d;
  letter-spacing: -.01em;
}

/* ---------- Grid 3 Spalten ---------- */
.team-member__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (max-width: 1100px) { .team-member__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .team-member__grid { grid-template-columns: 1fr; } }
.card-team-member__wrapper { list-style: none; margin: 0; }

/* ---------- Karte ---------- */
.card-team-member {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid rgba(39, 58, 143, .10);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(16, 24, 64, .06);
  text-decoration: none !important;
  height: 100%;
  transition: transform .35s cubic-bezier(.22,.61,.36,1),
              box-shadow .35s ease,
              border-color .35s ease;
}
.card-team-member:hover {
  transform: translateY(-5px);
  border-color: #273A8F;
  box-shadow: 0 22px 44px rgba(39, 58, 143, .22);
}

/* Foto 4:5, sanfter Zoom */
.card-team-member__avatar {
  margin: 0;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #f0f3ff;
}
.card-team-member__avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .7s cubic-bezier(.22,.61,.36,1);
}
.card-team-member:hover .card-team-member__avatar img {
  transform: scale(1.04);
}

/* ---------- Info-Container im Karten-Body ---------- */
.card-team-member__container-info {
  padding: 26px 26px 28px;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 22px;
  text-align: left;
  flex: 1;
}

/* WICHTIG: Bricks UND die Angebote-Tab-Grid-Regel machen diese <ul>-Wrapper zu
   mehrspaltigen GRIDS -> Inhalte ueberlappen. Hoehere Spezifitaet als die
   Tab-Regel (:is(.allelon-tabs__panel, .brxe-post-content) ul[class*=...]) erzwingen, eine Spalte. */
:is(.allelon-tabs__panel, .brxe-post-content) .card-team-member ul.team-angebote__features-list,
.card-team-member ul.team-angebote__features-list {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: none !important;
}
/* innere Bloecke der Abschnitte volle Breite (nicht nebeneinander) */
.card-team-member ul.team-angebote__features-list > * { width: 100% !important; }

/* Header-Block: Name + Position + Aufgaben-Untertitel */
.card-team-member__name {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 700;
  color: #16204d;
  letter-spacing: -.01em;
  line-height: 1.2;
  text-align: left !important;
  order: 1;
}
.card-team-member__position {
  margin: 4px 0 0;
  font-size: .8rem;
  letter-spacing: .22em;
  font-weight: 700;
  color: #273A8F;
  text-transform: uppercase;
  line-height: 1.3;
  text-align: left !important;
  order: 2;
  background: none !important;
}
/* "team__description" steckt im selben Block wie Name/Position
   – wird also als Erklärung zur Funktion verwendet (NICHT Über-mich-Text) */
.card-team-member .team-angebote__features-list:first-of-type .team__description {
  margin: 6px 0 0;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  font-size: .95rem;
  line-height: 1.5;
  color: #5b6480;
  font-weight: 400;
  order: 3;
}

/* Section-Headings ("Über mich", "Tätigkeiten", "Kontakt") */
.card-team-member .team__heading-section {
  margin: 6px 0 6px;
  padding-top: 16px;
  font-size: .72rem !important;
  letter-spacing: .22em;
  font-weight: 700;
  color: #273A8F !important;
  text-transform: uppercase;
  line-height: 1;
  text-align: left !important;
  border-top: 1px solid rgba(39, 58, 143, .14);
}

/* "Über mich"-Text: ohne dekorative Box, schlicht und gut lesbar */
.card-team-member .brxe-mhwaok {
  padding: 0 !important;
  background: none !important;
  border: none !important;
  margin: 0;
  font-size: .92rem;
  line-height: 1.6;
  color: #2a2f45;
}
.card-team-member .brxe-mhwaok p {
  margin: 0 0 .7em;
}
.card-team-member .brxe-mhwaok p:last-child { margin-bottom: 0; }

/* "Tätigkeiten"-Liste – existierende Font-Awesome-Häkchen klein & dezent */
.card-team-member .team-angebote__features-list .team-contact__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.card-team-member .team-angebote__feature-icon {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
/* Original-Bricks-Häkchen (Font Awesome) klein, blau */
.card-team-member .team-angebote__feature-item-icon {
  font-size: .85rem !important;
  color: #273A8F !important;
  background: none !important;
  border: none !important;
  width: auto !important;
  height: auto !important;
  flex: 0 0 auto;
  line-height: 1;
}
.card-team-member .team-angebote__feature-element-text {
  font-size: .92rem;
  color: #2a2f45;
  text-decoration: none !important;
  transition: color .2s ease;
  line-height: 1.4;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
.card-team-member .team-angebote__feature-element-text:hover {
  color: #273A8F;
  text-decoration: underline !important;
}

/* "Kontakt" – Telefon + Mail mit Font-Awesome-Icons (schon im HTML) */
.card-team-member .team-contact__list-item {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.card-team-member .team-contact__list-icon {
  font-size: .9rem !important;
  color: #273A8F !important;
  background: none !important;
  border: none !important;
  width: auto !important;
  height: auto !important;
  flex: 0 0 auto;
  line-height: 1;
}
.card-team-member .team-contact__list-info {
  font-size: .92rem;
  color: #2a2f45;
  text-decoration: none !important;
  transition: color .2s ease;
  word-break: break-word;
}
.card-team-member .team-contact__list-info:hover { color: #273A8F; }

@media (prefers-reduced-motion: reduce) {
  .card-team-member,
  .card-team-member__avatar img {
    transition: none !important;
  }
}


/* =========================================================
   Team-Hero: schlichte Verfeinerungen (Tagline + sanfter Uebergang)
   ========================================================= */

/* Tagline "ÜBER UNS" – weisslich auf dunklem Verlauf */
.global-hero__container-info .team-hero-eyebrow {
  margin: 0 0 14px;
  color: rgba(255, 255, 255, .9);
}
.team-hero-eyebrow::before,
.team-hero-eyebrow::after {
  background: rgba(255, 255, 255, .6);
}

/* Sanfter Uebergang zum naechsten Section */


/* =========================================================
   "Verein Allelon" Karten (Team / Vision / Leitbild)
   – Original-Layout (Foto fuellt Karte, Titel als Overlay)
   ========================================================= */

/* Section-Header */
.home-about-card { padding: 60px 0 80px; }
.home-about__container-info {
  text-align: center;
  margin-bottom: 36px;
}
.home-about__container-info .global__tagline {
  margin: 0 0 10px;
  font-size: .8rem;
  letter-spacing: .26em;
  font-weight: 700;
  color: #273A8F;
  text-transform: uppercase;
}
.home-about__heading {
  margin: 0;
  font-size: clamp(1.8rem, 2.6vw + .8rem, 2.6rem);
  line-height: 1.2;
  font-weight: 700;
  color: #16204d;
  letter-spacing: -.01em;
}

/* Grid */
.card-home-about-card__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (max-width: 860px) {
  .card-home-about-card__grid { grid-template-columns: 1fr; }
}
.card-home-about-card__wrapper { list-style: none; margin: 0; }

/* Link-Wrapper */
.card-home-about-card__link {
  display: block;
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none !important;
  box-shadow: 0 6px 20px rgba(16, 24, 64, .08);
  transition: transform .35s cubic-bezier(.22,.61,.36,1),
              box-shadow .35s ease;
}
.card-home-about-card__link:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 48px rgba(39, 58, 143, .25);
}

/* Karte – relativ, mit Aspect-Ratio */
.card-home-about-card,
.card-home-about-card.brxe-block {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;        /* quadratisch wie im Original */
  overflow: hidden;
}
.card-home-about-card__container,
.card-home-about-card__container.brxe-block {
  position: absolute;
  inset: 0;
  display: block;
}

/* FIGURE: absolut positioniert, fuellt die Karte */
figure.card-home-about-card__img,
figure.card-home-about-card__img.tag {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #0f1740 !important;
}
figure.card-home-about-card__img img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform .8s cubic-bezier(.22,.61,.36,1);
}
.card-home-about-card__link:hover figure.card-home-about-card__img img {
  transform: scale(1.06);
}

/* OVERLAY: dunkler Gradient ueber dem Bild fuer Text-Kontrast */
.card-home-about-card__overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg,
    rgba(20, 30, 80, 0)   45%,
    rgba(20, 30, 80, .55) 75%,
    rgba(20, 30, 80, .88) 100%);
  pointer-events: none;
  transition: background .35s ease;
}
.card-home-about-card__link:hover .card-home-about-card__overlay {
  background: linear-gradient(180deg,
    rgba(20, 30, 80, .1)  0%,
    rgba(20, 30, 80, .55) 55%,
    rgba(39, 58, 143, .92) 100%);
}

/* TITEL: weiss, unten links */
.card-home-about-card__heading {
  position: absolute !important;
  left: 28px;
  bottom: 26px;
  right: 70px;       /* Platz fuer Pfeil rechts */
  margin: 0 !important;
  color: #ffffff !important;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.005em;
  z-index: 2;
  transition: transform .35s cubic-bezier(.22,.61,.36,1);
}
.card-home-about-card__link:hover .card-home-about-card__heading {
  transform: translateY(-2px);
}

/* PFEIL-ICON: rechts unten, dezent, rueckt beim Hover ein */
.card-home-about-card__icon {
  position: absolute !important;
  right: 24px;
  bottom: 28px;
  font-size: 1.3rem !important;
  color: #ffffff !important;
  opacity: .55;
  background: none !important;
  width: auto !important;
  height: auto !important;
  z-index: 2;
  transform: translateX(-6px);
  transition: opacity .3s ease, transform .35s cubic-bezier(.22,.61,.36,1);
}
.card-home-about-card__link:hover .card-home-about-card__icon {
  opacity: 1;
  transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  .card-home-about-card__link,
  figure.card-home-about-card__img img,
  .card-home-about-card__overlay,
  .card-home-about-card__heading,
  .card-home-about-card__icon {
    transition: none !important;
  }
}

/* =========================================================
   FIX 2 – Header beim Scrollen: sauberer Glass-Look
   ========================================================= */
header.brx-sticky {
  position: sticky;
  top: 0;
  z-index: 100;
  transition: padding .35s ease;
}
header.brx-sticky .header__container {
  background: rgba(255, 255, 255, .85) !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%);
          backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(39, 58, 143, .08);
  box-shadow: 0 8px 26px rgba(20, 30, 90, .08);
  transition: padding .35s ease, box-shadow .35s ease,
              background-color .35s ease, transform .35s ease;
}
/* beim Scrollen kompakter + etwas kraeftigerer Schatten */
.scrolling header.brx-sticky .header__container,
.scrolling .header__container {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  box-shadow: 0 12px 32px rgba(20, 30, 90, .14) !important;
  background: rgba(255, 255, 255, .92) !important;
}
/* den umgebenden Header-Streifen transparent halten – verhindert
   den "doppelten Hintergrund"-Effekt aus dem Screenshot */
header.brx-sticky .header.brxe-section {
  background-color: transparent !important;
}

/* =========================================================
   FIX 3 – Leitbild-Seite (page-id-406): klares Layout
   ========================================================= */
.leitbild {
  padding: 70px 0 90px;
}
/* Layout: Heading mittig oben, Text-Box mittig, Button mittig unten */
.leitbild > .brxe-container,
.leitbild .brxe-container,
.leitbild__inner-container-info {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 36px !important;
  max-width: 880px !important;
  margin: 0 auto !important;
  padding: 70px 24px 90px !important;
  text-align: center;
}
/* Reihenfolge: 1) Heading, 2) Text, 3) Button */
.leitbild__container-heading     { order: 1; }
.leitbild__container-description { order: 2; }
.leitbild__btn-container         { order: 3; }

/* Heading-Block (Tagline + Titel) – mittig */
.leitbild__container-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  max-width: 720px;
}
.leitbild__container-heading .global__tagline {
  margin: 0;
  font-size: .8rem;
  letter-spacing: .26em;
  font-weight: 700;
  color: #273A8F;
  text-transform: uppercase;
}
.leitbild .brxe-heading,
.leitbild__heading {
  margin: 0 !important;
  font-size: clamp(2rem, 3.2vw + .8rem, 3.2rem) !important;
  line-height: 1.12 !important;
  font-weight: 700 !important;
  color: #16204d !important;
  letter-spacing: -.015em;
  text-align: center !important;
  white-space: normal !important;
  /* dezente Akzentlinie unter dem Titel */
  position: relative;
  padding-bottom: 18px;
}
.leitbild .brxe-heading::after,
.leitbild__heading::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: 56px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(39,58,143,0), #273A8F 50%, rgba(39,58,143,0));
}

/* Text-Box – zentrierter Lesefluss */
.leitbild__container-description {
  width: 100%;
  display: flex;
  justify-content: center;
}
.leitbild__container-description .brxe-text,
.leitbild__container-description .leitbild__description {
  width: 100%;
  max-width: 760px;
  text-align: left;
  font-size: 1rem;
  line-height: 1.75;
  color: #2a2f45;
  background: #ffffff;
  border: 1px solid rgba(39, 58, 143, .10);
  border-radius: 20px;
  padding: 32px 36px;
  box-shadow: 0 6px 20px rgba(16, 24, 64, .06);
}
.leitbild__container-description p {
  margin: 0 0 1em;
}
.leitbild__container-description p:last-child { margin-bottom: 0; }

/* Button-Block – unten zentriert */
.leitbild__btn-container {
  display: flex;
  justify-content: center;
  margin: 0;
}
.leitbild__btn-container .bricks-button,
.leitbild a.bricks-button {
  display: inline-flex;
  align-items: center;
  padding: 14px 36px !important;
  border-radius: 999px !important;
  background: #273A8F !important;
  color: #ffffff !important;
  border: none !important;
  font-weight: 600;
  letter-spacing: .14em;
  font-size: .9rem;
  text-decoration: none !important;
  box-shadow: 0 8px 22px rgba(39, 58, 143, .25);
  transition: transform .25s ease, box-shadow .25s ease;
}
.leitbild__btn-container .bricks-button:hover,
.leitbild a.bricks-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(39, 58, 143, .35);
}

@media (max-width: 860px) {
  .leitbild > .brxe-container,
  .leitbild .brxe-container,
  .leitbild__inner-container-info {
    padding: 50px 20px 70px !important;
    gap: 28px !important;
  }
  .leitbild__container-description .brxe-text,
  .leitbild__container-description .leitbild__description {
    padding: 24px 22px;
  }
}
@media (max-width: 860px) {
  .leitbild > .brxe-container,
  .leitbild .brxe-container {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}
/* Heading-Bereich (links) */
.leitbild .brxe-heading {
  font-size: clamp(1.8rem, 2.4vw + .8rem, 2.6rem) !important;
  line-height: 1.2;
  font-weight: 700;
  color: #16204d !important;
  margin: 0 0 24px !important;
  letter-spacing: -.01em;
}
/* Textblock (rechts) – schoener Lesefluss + dezente Karte */
.leitbild .brxe-text,
.leitbild .brxe-text > div {
  background: #ffffff;
  border: 1px solid rgba(39, 58, 143, .10);
  border-radius: 20px;
  padding: 32px 36px;
  box-shadow: 0 6px 20px rgba(16, 24, 64, .06);
  font-size: 1rem;
  line-height: 1.7;
  color: #2a2f45;
}
.leitbild .brxe-text p {
  margin: 0 0 1em;
}
.leitbild .brxe-text p:last-child {
  margin-bottom: 0;
}
/* alte Editor-Verschachtelung neutralisieren */
.leitbild section[class*="text-token-text"],
.leitbild section[class*="text-token-text"] > div {
  display: contents;
}
/* Kontakt-Button */
.leitbild a.bricks-button {
  display: inline-flex;
  align-items: center;
  padding: 12px 28px;
  border-radius: 999px;
  background: #273A8F !important;
  color: #ffffff !important;
  border: none !important;
  font-weight: 600;
  letter-spacing: .12em;
  text-decoration: none !important;
  box-shadow: 0 6px 18px rgba(39, 58, 143, .22);
  transition: transform .25s ease, box-shadow .25s ease;
}
.leitbild a.bricks-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(39, 58, 143, .32);
}

/* =========================================================
   FIX 4 – CTA-Section "Starten Sie jetzt / Wir hören zu"
   schoenere Doppel-Karte mit Akzent-Verlauf
   ========================================================= */
.footer-cta__container {
  background:
    radial-gradient(80% 100% at 0% 0%, rgba(150,170,255,.18) 0%, rgba(150,170,255,0) 70%),
    radial-gradient(80% 100% at 100% 100%, rgba(170,130,230,.18) 0%, rgba(170,130,230,0) 70%),
    #f5f7ff !important;
  border-radius: 24px;
  border: 1px solid rgba(39, 58, 143, .10);
  padding: clamp(40px, 6vw, 80px) clamp(30px, 5vw, 70px) !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: start;
  box-shadow: 0 10px 30px rgba(20, 30, 90, .08);
}
@media (max-width: 860px) {
  .footer-cta__container { grid-template-columns: 1fr; gap: 32px; }
}
.footer-cta__container .newsletter-footer-cta {
  display: flex !important;
  flex-direction: column;
  gap: 14px;
  background: rgba(255,255,255,.55);
  border-radius: 16px;
  padding: 28px 30px;
  border: 1px solid rgba(255,255,255,.7);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}
.footer-cta__container .newsletter-footer-cta .global__tagline {
  margin: 0;
  font-size: .8rem;
  letter-spacing: .26em;
  font-weight: 700;
  color: #273A8F;
  text-transform: uppercase;
}
.footer-cta__container .newsletter-footer-cta .newsletter-footer-cta__heading {
  margin: 0;
  font-size: clamp(1.4rem, 2vw + .4rem, 2rem);
  line-height: 1.2;
  font-weight: 700;
  color: #16204d !important;
  letter-spacing: -.01em;
}
.footer-cta__container .newsletter-footer-cta .bricks-button,
.footer-cta__container .newsletter-footer-cta a.bricks-button {
  align-self: flex-start;
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  padding: 12px 26px;
  border-radius: 999px;
  background: #273A8F !important;
  color: #ffffff !important;
  border: none !important;
  font-weight: 600;
  letter-spacing: .14em;
  text-decoration: none !important;
  font-size: .85rem;
  box-shadow: 0 6px 18px rgba(39, 58, 143, .22);
  transition: transform .25s ease, box-shadow .25s ease;
}
.footer-cta__container .newsletter-footer-cta .bricks-button:hover,
.footer-cta__container .newsletter-footer-cta a.bricks-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(39, 58, 143, .32);
}


/* =========================================================
   Generische Hero-Tagline (per JS injiziert auf Seiten ohne eigene)
   ========================================================= */
.allelon-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 0 auto 16px;
  padding: 0;
  font-size: .78rem;
  letter-spacing: .26em;
  font-weight: 700;
  color: rgba(255, 255, 255, .85);
  text-transform: uppercase;
  text-align: center;
  background: none;
}
.allelon-hero-eyebrow::before,
.allelon-hero-eyebrow::after {
  content: "";
  width: 28px;
  height: 1px;
  background: rgba(255, 255, 255, .55);
  display: inline-block;
}


/* =========================================================
   Tab-Navigation auf kombinierten Seiten (Über uns / Angebote)
   ========================================================= */
.allelon-tabs {
  background: #ffffff;
  position: relative;
}
.allelon-tabs__nav-wrap {
  position: sticky;
  top: 72px;
  z-index: 50;
  background: rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
          backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid rgba(39, 58, 143, .08);
  padding: 14px 0;
  margin-bottom: 0;
}
.allelon-tabs__nav {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  flex-wrap: nowrap;            /* alle Tabs in EINER Zeile */
  justify-content: center;
  gap: 6px;
  overflow-x: auto;            /* auf schmalen Screens horizontal scrollbar */
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
/* Tabs als Pills im Karten-Look der Seite */
.allelon-tabs__btn {
  appearance: none;
  border: 1px solid rgba(39, 58, 143, .14);
  background: #ffffff;
  border-radius: 999px;
  padding: 9px 15px;
  font: inherit;
  font-size: .82rem;
  font-weight: 600;
  color: #5b6480;
  white-space: nowrap;
  flex: 0 0 auto;              /* Pills nicht stauchen */
  cursor: pointer;
  transition: color .25s ease, border-color .25s ease,
              background-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.allelon-tabs__btn:hover {
  color: #273A8F;
  border-color: rgba(39, 58, 143, .35);
  background: #f5f7ff;
}
.allelon-tabs__btn[aria-selected="true"],
.allelon-tabs__btn.is-active {
  color: #ffffff;
  background: #273A8F;
  border-color: #273A8F;
  box-shadow: 0 8px 20px rgba(39, 58, 143, .25);
}
.allelon-tabs__btn[aria-selected="true"]:hover,
.allelon-tabs__btn.is-active:hover {
  color: #ffffff;
  background: #21337d;
}
.allelon-tabs__panel { padding-top: 8px; }
.allelon-tabs__panel[hidden] { display: none !important; }

/* Smooth Fade beim Tab-Wechsel */
.allelon-tabs__panel:not([hidden]) {
  animation: tabFadeIn .35s ease;
}
@keyframes tabFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .allelon-tabs__panel:not([hidden]) { animation: none; }
}

/* Scrollbar fuer die Tab-Nav (mobil) */
.allelon-tabs__nav::-webkit-scrollbar { height: 4px; }
.allelon-tabs__nav::-webkit-scrollbar-thumb {
  background: rgba(39, 58, 143, .25);
  border-radius: 2px;
}

/* =========================================================
   Hauptnavigation: Dropdown-Submenüs ausblenden
   (Sub-Inhalte sind jetzt als Tabs auf den Hauptseiten erreichbar)
   ========================================================= */
.bricks-nav-menu .sub-menu,
.bricks-nav-menu ul.sub-menu,
header .sub-menu {
  display: none !important;
}
/* Nur den PFEIL-Button neben "Über uns" und "Angebote" ausblenden
   (NICHT den ganzen toggle-div, weil der Bricks darin auch das <a> packt) */
.bricks-nav-menu .brx-submenu-toggle button,
.bricks-nav-menu .menu-item-has-children .brx-submenu-toggle button,
header .brx-submenu-toggle button {
  display: none !important;
}
/* Pfeil-Icon allgemein (falls anders gerendert) */
.bricks-nav-menu .brx-submenu-toggle i.fa-angle-down,
.bricks-nav-menu .brx-submenu-toggle .menu-item-icon,
header .brx-submenu-toggle i {
  display: none !important;
}
/* "has-children" Items NICHT mehr als ausklappbar markieren */
.bricks-nav-menu .menu-item-has-children > a {
  pointer-events: auto;
  cursor: pointer;
}
/* Hover- und Aria-Open-States für Sub-Menüs deaktivieren */
.bricks-nav-menu .menu-item-has-children:hover > .sub-menu,
.bricks-nav-menu .menu-item-has-children[aria-expanded="true"] > .sub-menu,
.bricks-nav-menu .menu-item-has-children.brx-open > .sub-menu {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* =========================================================
   KONTAKT-Seite (page-id-28) – Karten im Stil der Startseite
   ========================================================= */

/* Grid */
body.page-id-28 .contact__card,
body.page-id-28 article.contact__card {
  background: #ffffff !important;
  border: 1px solid rgba(39, 58, 143, .10);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(16, 24, 64, .08);
  display: flex !important;
  flex-direction: column;
  height: 100%;
  transition: transform .32s cubic-bezier(.22,.61,.36,1),
              box-shadow .32s ease,
              border-color .32s ease;
}
body.page-id-28 .contact__card:hover {
  transform: translateY(-5px);
  border-color: #273A8F;
  box-shadow: 0 22px 44px rgba(39, 58, 143, .22);
}

/* Foto oben */
body.page-id-28 .contact__card figure,
body.page-id-28 .contact__card figure.contact__img,
body.page-id-28 figure.contact__img,
body.page-id-28 .contact__img,
body.page-id-28 .contact__img.tag,
body.page-id-28 .brxe-image.contact__img {
  display: block !important;
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  aspect-ratio: 4 / 5 !important;    /* hoeher -> mehr vom Portrait sichtbar */
  height: auto !important;
  overflow: hidden !important;
  background: #f0f3ff !important;
  border-radius: 0 !important;
}
body.page-id-28 .contact__card figure img,
body.page-id-28 .contact__card figure.contact__img img,
body.page-id-28 figure.contact__img img,
body.page-id-28 .contact__img img,
body.page-id-28 .brxe-image.contact__img img {
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center top !important;
  display: block !important;
  border-radius: 0 !important;
  margin: 0 !important;
  transition: transform .7s cubic-bezier(.22,.61,.36,1);
}
body.page-id-28 .contact__card:hover figure img,
body.page-id-28 .contact__card:hover .contact__img img {
  transform: scale(1.04);
}
/* Bricks-figure inline-block default brechen */
body.page-id-28 .brxe-image.tag.contact__img,
body.page-id-28 figure.brxe-image.contact__img {
  display: block !important;
  width: 100% !important;
}
body.page-id-28 .contact__card:hover figure.contact__img img {
  transform: scale(1.04);
}

/* Grid: beide Karten gleich hoch */
body.page-id-28 #brxe-isizva {
  align-items: stretch !important;
}
body.page-id-28 .card-team-member__wrapper {
  display: flex !important;
  flex-direction: column;
  align-items: stretch !important;
  flex: 1 1 0 !important;
}
body.page-id-28 .contact__card {
  flex: 1 1 auto !important;
}

/* Info-Container unter dem Foto */
body.page-id-28 .contact__card .card-team-member__container-info {
  padding: 24px 26px 28px !important;
  display: flex;
  flex-direction: column;
  gap: 18px;
  text-align: left !important;
  background: #ffffff;
  flex: 1 1 auto !important;      /* fuellt Resthoehe -> Kontaktbox kann nach unten */
}

/* Erste Liste = Header (Name, Position, Aufgaben) */
body.page-id-28 .contact__card .team-angebote__features-list:first-of-type {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
body.page-id-28 .contact__card .card-team-member__name {
  margin: 0 !important;
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  color: #16204d !important;
  letter-spacing: -.01em;
  line-height: 1.2;
  text-align: left !important;
  order: 2;
}
body.page-id-28 .contact__card .card-team-member__position {
  margin: 0 !important;
  font-size: .78rem !important;
  letter-spacing: .26em;
  font-weight: 700;
  color: #273A8F !important;
  text-transform: uppercase;
  text-align: left !important;
  background: none !important;
  padding: 0 !important;
  order: 1;
}
body.page-id-28 .contact__card .team__description {
  margin: 4px 0 0 !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  font-size: .92rem;
  line-height: 1.55;
  color: #5b6480 !important;
  font-weight: 400;
  text-align: left !important;
  order: 3;
}

/* "Kontakt"-Section innerhalb der Karte */
body.page-id-28 .contact__card .team-angebote__features-list:nth-of-type(2) {
  margin: auto 0 0 !important;     /* nach unten schieben -> Kontaktboxen bündig */
  padding: 16px 18px !important;
  background: #f5f7ff;
  border-radius: 14px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
body.page-id-28 .contact__card .team__heading-section {
  margin: 0 0 4px !important;
  padding: 0 !important;
  font-size: .72rem !important;
  letter-spacing: .26em;
  font-weight: 700;
  color: #273A8F !important;
  text-transform: uppercase;
  text-align: left !important;
  background: none !important;
  border: none !important;
}
body.page-id-28 .contact__card .team-contact__list {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start !important;  /* Bricks zentriert -> Icons untereinander */
  gap: 8px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
  background: none !important;
}
body.page-id-28 .contact__card .team-contact__list-item {
  align-self: stretch !important;
  justify-content: flex-start !important;
}
body.page-id-28 .contact__card .team-contact__list-item {
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center;
  gap: 12px;
  min-height: 32px;
  background: none !important;
  border: none !important;
}
body.page-id-28 .contact__card .team-contact__list-item + .team-contact__list-item {
  padding-left: 0 !important;
}
body.page-id-28 .contact__card .team-contact__list-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 32px !important;
  height: 32px !important;
  flex: 0 0 auto;
  margin: 0 !important;          /* Bricks setzt margin:auto -> Icon zentriert */
  border-radius: 999px;
  background: #273A8F !important;
  color: #ffffff !important;
  font-size: .85rem !important;
  line-height: 1;
}
body.page-id-28 .contact__card .team-contact__list-info {
  font-size: .92rem;
  color: #16204d !important;
  text-decoration: none !important;
  font-weight: 500;
  word-break: break-word;
  transition: color .2s ease;
}
body.page-id-28 .contact__card .team-contact__list-info:hover {
  color: #273A8F !important;
  text-decoration: underline !important;
}

/* Grid Container (falls vorhanden) */
body.page-id-28 .card-team-member__wrapper {
  list-style: none;
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  body.page-id-28 .contact__card,
  body.page-id-28 figure.contact__img img {
    transition: none !important;
  }
}

/* =========================================================
   Tab-Panel Header: Eyebrow + Titel + Lead (oben in jedem Tab)
   ========================================================= */
.allelon-tab-panel__header {
  max-width: 880px;
  margin: 28px auto 18px;
  padding: 0 24px;
  text-align: center;
}
.allelon-tab-panel__eyebrow {
  margin: 0 0 10px;
  font-size: .78rem;
  letter-spacing: .26em;
  font-weight: 700;
  color: #273A8F;
  text-transform: uppercase;
}
.allelon-tab-panel__title {
  margin: 0 0 14px;
  font-size: clamp(1.8rem, 3vw + .6rem, 2.6rem);
  line-height: 1.15;
  font-weight: 700;
  color: #16204d;
  letter-spacing: -.015em;
  position: relative;
  padding-bottom: 16px;
}
.allelon-tab-panel__title::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: 56px; height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(39,58,143,0), #273A8F, rgba(39,58,143,0));
}
.allelon-tab-panel__lead {
  margin: 0 auto;
  max-width: 640px;
  font-size: 1.02rem;
  line-height: 1.7;
  color: #4a5070;
}

/* =========================================================
   ANGEBOT-DETAIL-SEKTIONEN — einheitliches Styling
   (greift für ALLE Sections der Angebots-Detail-Seiten)
   ========================================================= */

/* Gemeinsame Abstände für Sections */
.feature01,
.feature03,
.angebot-feature,
.angebot-triangle,
.angebot-about03,
.angebot-about04,
.angebot-timeline,
.angebot-info,
.angebot-grid,
.angebot-price,
.angebot-hero02,
.angebot-slider,
.angebot-gallery,
.angebot-download,
.angebot-contact,
.global-content,
.global-slogan {
  padding: 60px 24px !important;
}
.feature01 .brxe-container,
.feature03 .brxe-container,
.angebot-feature .brxe-container,
.angebot-triangle .brxe-container,
.angebot-about03 .brxe-container,
.angebot-about04 .brxe-container,
.angebot-timeline .brxe-container,
.angebot-info .brxe-container,
.angebot-grid .brxe-container,
.angebot-price .brxe-container,
.angebot-hero02 .brxe-container,
.angebot-slider .brxe-container,
.angebot-gallery .brxe-container,
.angebot-download .brxe-container,
.angebot-contact .brxe-container,
.global-content .brxe-container,
.global-slogan .brxe-container {
  max-width: 1180px !important;
  margin: 0 auto !important;
}

/* Section-Header (Tagline + Heading + Description) — generisch */
[class*="__container-info"] .global__tagline,
.global-content [class*="__tagline"],
.angebot-feature [class*="__tagline"],
.angebot-timeline [class*="__tagline"],
.angebot-about03 [class*="__tagline"],
.angebot-about04 [class*="__tagline"],
.angebot-price [class*="__tagline"],
.angebot-info [class*="__tagline"],
.angebot-grid [class*="__tagline"] {
  margin: 0 0 10px !important;
  font-size: .8rem !important;
  letter-spacing: .26em !important;
  font-weight: 700 !important;
  color: #273A8F !important;
  text-transform: uppercase !important;
}

/* Headings einheitlich (h2 in angebot-Section) */
.angebot-feature h2.brxe-heading,
.angebot-timeline h2.brxe-heading,
.angebot-about03 h2.brxe-heading,
.angebot-about04 h2.brxe-heading,
.angebot-price h2.brxe-heading,
.angebot-info h2.brxe-heading,
.angebot-grid h2.brxe-heading,
.angebot-hero02 h2.brxe-heading,
.angebot-slider h2.brxe-heading,
.angebot-gallery h2.brxe-heading,
.angebot-download h2.brxe-heading,
.angebot-contact h2.brxe-heading,
.global-content h2.brxe-heading,
.global-slogan h2.brxe-heading,
.feature01 h2.brxe-heading,
.feature03 h2.brxe-heading,
.angebot-triangle h2.brxe-heading {
  margin: 0 0 16px !important;
  font-size: clamp(1.6rem, 2.2vw + .6rem, 2.2rem) !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  color: #16204d !important;
  letter-spacing: -.01em !important;
}
/* h3 in Karten/Items */
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-feature h3,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-about03 h3,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-about04 h3,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-timeline h3,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-grid h3,
:is(.allelon-tabs__panel, .brxe-post-content) .feature01 h3,
:is(.allelon-tabs__panel, .brxe-post-content) .feature03 h3,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-triangle h3 {
  margin: 0 0 8px !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: #16204d !important;
  line-height: 1.25 !important;
}

/* Beschreibungstexte */
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-feature p,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-about03 p,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-about04 p,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-timeline p,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-grid p,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-info p,
:is(.allelon-tabs__panel, .brxe-post-content) .global-content p,
:is(.allelon-tabs__panel, .brxe-post-content) .feature01 p,
:is(.allelon-tabs__panel, .brxe-post-content) .feature03 p,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-triangle p {
  font-size: .95rem;
  line-height: 1.65;
  color: #4a5070;
}

/* Icons in Karten/Items überall Allelon-Blau */
:is(.allelon-tabs__panel, .brxe-post-content) .brxe-icon,
:is(.allelon-tabs__panel, .brxe-post-content) i.brxe-icon,
:is(.allelon-tabs__panel, .brxe-post-content) .fas.brxe-icon,
:is(.allelon-tabs__panel, .brxe-post-content) i.fas {
  color: #273A8F !important;
  background: transparent !important;
}

/* Karten-Layout — alle grid/feature-lists werden zu 3-Spalten Karten */
:is(.allelon-tabs__panel, .brxe-post-content) .feature01__grid,
:is(.allelon-tabs__panel, .brxe-post-content) .feature03__grid,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-feature__grid,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-feature__list,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-triangle__list,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-grid__list,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-about04__list,
:is(.allelon-tabs__panel, .brxe-post-content) ul.angebot-grid-card__features-list,
:is(.allelon-tabs__panel, .brxe-post-content) ul.angebot-grid-card__features-list {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 22px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 28px 0 0 !important;
}
@media (max-width: 1024px) {
  :is(.allelon-tabs__panel, .brxe-post-content) [class*="__grid"],
  :is(.allelon-tabs__panel, .brxe-post-content) .angebot-grid-card__features-list,
  :is(.allelon-tabs__panel, .brxe-post-content) .angebot-grid-card__features-list,
  :is(.allelon-tabs__panel, .brxe-post-content) .angebot-triangle__list,
  :is(.allelon-tabs__panel, .brxe-post-content) .angebot-about04__list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 640px) {
  :is(.allelon-tabs__panel, .brxe-post-content) [class*="__grid"],
  :is(.allelon-tabs__panel, .brxe-post-content) .angebot-grid-card__features-list,
  :is(.allelon-tabs__panel, .brxe-post-content) .angebot-grid-card__features-list,
  :is(.allelon-tabs__panel, .brxe-post-content) .angebot-triangle__list,
  :is(.allelon-tabs__panel, .brxe-post-content) .angebot-about04__list {
    grid-template-columns: 1fr !important;
  }
}

/* Grid-Wrapper (li / global__grid-item) -> transparenter Pass-through.
   Verhindert Doppelrahmen: die KARTE ist nur das innere <article>. */
:is(.allelon-tabs__panel, .brxe-post-content) .feature01__grid > li,
:is(.allelon-tabs__panel, .brxe-post-content) .feature03__grid > li,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-feature__grid > li,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-feature__list > li,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-grid__list > li,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-grid__grid > li,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-about04__list > li,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-triangle__list > .global__grid-item,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-triangle__list > .global__grid-item > li {
  display: flex !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  list-style: none !important;
}

/* Die eigentliche KARTE: das <article> (bzw. das <li> bei article-losen
   Mini-Karten-Listen). Genau EIN Rahmen. */
:is(.allelon-tabs__panel, .brxe-post-content) .feature01__grid article,
:is(.allelon-tabs__panel, .brxe-post-content) .feature03__grid article,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-feature__grid article,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-feature__list article,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-triangle__list article,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-grid__list article,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-grid__grid article,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-about04__list article,
:is(.allelon-tabs__panel, .brxe-post-content) ul.angebot-grid-card__features-list > li,
:is(.allelon-tabs__panel, .brxe-post-content) ul.angebot-grid-card__features-list > li {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 28px 24px !important;
  list-style: none !important;
  background: #ffffff !important;
  border: 1px solid rgba(39, 58, 143, .10) !important;
  border-radius: 18px !important;
  box-shadow: 0 6px 20px rgba(16, 24, 64, .06) !important;
  gap: 12px !important;
  transform: none !important;
  position: static !important;
  transition: transform .32s cubic-bezier(.22,.61,.36,1),
              box-shadow .32s ease,
              border-color .32s ease;
}
/* Mini-Karten (in den Paket-Karten) kompakter */
:is(.allelon-tabs__panel, .brxe-post-content) ul.angebot-grid-card__features-list > li,
:is(.allelon-tabs__panel, .brxe-post-content) ul.angebot-grid-card__features-list > li {
  padding: 18px 14px !important;
  border-radius: 14px !important;
  gap: 8px !important;
}
:is(.allelon-tabs__panel, .brxe-post-content) .feature01__grid article:hover,
:is(.allelon-tabs__panel, .brxe-post-content) .feature03__grid article:hover,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-feature__grid article:hover,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-feature__list article:hover,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-triangle__list article:hover,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-grid__list article:hover,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-grid__grid article:hover,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-about04__list article:hover {
  transform: translateY(-4px) !important;
  border-color: #273A8F !important;
  box-shadow: 0 18px 36px rgba(39, 58, 143, .18) !important;
}
:is(.allelon-tabs__panel, .brxe-post-content) [class*="__grid"] .brxe-icon,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-grid-card__features-list .brxe-icon,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-grid-card__features-list .brxe-icon,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-triangle__list .brxe-icon {
  font-size: 2rem !important;
  margin: 0 auto 6px !important;
  line-height: 1;
}

/* angebot-contact — schöneres Layout */
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-contact__container {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}
@media (max-width: 860px) {
  :is(.allelon-tabs__panel, .brxe-post-content) .angebot-contact__container { grid-template-columns: 1fr; }
}
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-contact__img,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-contact__img-wrapper {
  margin: 0 !important;
  border-radius: 20px;
  overflow: hidden;
}
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-contact__img img {
  width: 100%; height: auto; display: block; border-radius: 20px;
}
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-contact .bricks-button {
  align-self: flex-start;
  display: inline-flex; align-items: center;
  padding: 14px 30px !important;
  border-radius: 999px !important;
  background: #273A8F !important;
  color: #ffffff !important;
  border: none !important;
  font-weight: 600;
  letter-spacing: .12em;
  text-decoration: none !important;
  box-shadow: 0 8px 22px rgba(39, 58, 143, .25);
  transition: transform .25s ease, box-shadow .25s ease;
}
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-contact .bricks-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(39, 58, 143, .35);
}

/* KONTAKT-CTA (mit Pfeil): eigener Platz rechts, damit der Pfeil nicht mehr
   auf dem "T" liegt. Das symmetrische Padding oben ueberschreibt sonst die
   asymmetrische Basisregel (a.global-hero__btn) und laesst keinen Raum. */
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-contact a.global-hero__btn {
  padding: 14px 52px 14px 28px !important;   /* rechts Platz fuer den Pfeil */
}
/* Pfeil dauerhaft sichtbar und sauber im reservierten Raum platziert */
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-contact a.global-hero__btn::after {
  opacity: 1;
  right: 22px;
  transform: translate(0, -50%);
}
/* Hover: Pfeil rueckt sanft nach rechts (Button-Lift kommt aus der Regel oben) */
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-contact a.global-hero__btn:hover::after,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-contact a.global-hero__btn:focus-visible::after {
  transform: translate(5px, -50%);
}

/* angebot-price — Preis-Block hervorgehoben als Card */
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-price .brxe-container {
  background: #f5f7ff;
  border: 1px solid rgba(39, 58, 143, .12);
  border-radius: 22px;
  padding: 32px 36px !important;
}

/* angebot-timeline — vertikale Schritte */
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-timeline ul,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-timeline ol {
  list-style: none;
  padding: 0; margin: 28px 0 0;
  display: flex; flex-direction: column;
  gap: 18px;
}
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-timeline li,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-timeline article {
  background: #ffffff;
  border: 1px solid rgba(39, 58, 143, .10);
  border-radius: 16px;
  padding: 22px 26px;
  box-shadow: 0 4px 14px rgba(16, 24, 64, .05);
  display: flex; align-items: flex-start; gap: 18px;
}

/* faq — Accordion */
:is(.allelon-tabs__panel, .brxe-post-content) .faq__accordion {
  list-style: none; padding: 0; margin: 28px 0 0;
  display: flex; flex-direction: column; gap: 10px;
}
:is(.allelon-tabs__panel, .brxe-post-content) .faq__item,
:is(.allelon-tabs__panel, .brxe-post-content) .brxe-accordion-nested {
  background: #ffffff;
  border: 1px solid rgba(39, 58, 143, .10);
  border-radius: 14px;
  overflow: hidden;
  list-style: none;
}
:is(.allelon-tabs__panel, .brxe-post-content) .accordion-title-wrapper {
  padding: 16px 22px !important;
  font-weight: 600;
  color: #16204d;
  cursor: pointer;
}
:is(.allelon-tabs__panel, .brxe-post-content) .accordion-content-wrapper {
  padding: 0 22px 18px !important;
  color: #4a5070;
}

/* content08 — saubere 2-Spalten */
:is(.allelon-tabs__panel, .brxe-post-content) .content08__container {
  display: grid !important;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 50px;
  align-items: center;
}
@media (max-width: 860px) {
  :is(.allelon-tabs__panel, .brxe-post-content) .content08__container { grid-template-columns: 1fr; }
}
:is(.allelon-tabs__panel, .brxe-post-content) .content08__list { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-direction: column; gap: 12px; }
:is(.allelon-tabs__panel, .brxe-post-content) .content08__list-item { display: flex; align-items: center; gap: 12px; }
:is(.allelon-tabs__panel, .brxe-post-content) .content08__list-icon { font-size: 1.1rem !important; color: #273A8F !important; }

/* Bilder generisch nicht verzerren */
:is(.allelon-tabs__panel, .brxe-post-content) figure.brxe-image img,
:is(.allelon-tabs__panel, .brxe-post-content) .brxe-image img {
  max-width: 100%;
  height: auto;
}

/* Slogan-Sections schmaler */
:is(.allelon-tabs__panel, .brxe-post-content) .global-slogan,
:is(.allelon-tabs__panel, .brxe-post-content) .home-slogan {
  text-align: center;
}
:is(.allelon-tabs__panel, .brxe-post-content) .global-slogan h2,
:is(.allelon-tabs__panel, .brxe-post-content) .home-slogan h2 {
  max-width: 880px; margin-left: auto; margin-right: auto;
}

/* angebot-download – CTA download box */
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-download .brxe-container {
  background: #273A8F;
  color: #ffffff;
  border-radius: 22px;
  padding: 36px 40px !important;
  text-align: center;
}
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-download h2,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-download p,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-download .brxe-heading {
  color: #ffffff !important;
}
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-download a {
  display: inline-flex; align-items: center;
  padding: 14px 28px;
  border-radius: 999px;
  background: #ffffff !important;
  color: #273A8F !important;
  font-weight: 600;
  text-decoration: none !important;
  margin-top: 16px;
}

/* =========================================================
   ALLE ANGEBOT-SEKTIONEN — vollständig & einheitlich
   Greift auf alle Tab-Panel-Inhalte (gescoped via .allelon-tabs__panel)
   ========================================================= */

/* ----- GENERISCHE BASIS für ALLES in Tab-Panels ----- */
:is(.allelon-tabs__panel, .brxe-post-content) section[class*="brxe-section"] {
  padding: 50px 24px !important;
  margin: 0 !important;
}
:is(.allelon-tabs__panel, .brxe-post-content) section[class*="brxe-section"] > .brxe-container {
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Hintergrund-Klassen */
:is(.allelon-tabs__panel, .brxe-post-content) .bg-mesh01,
:is(.allelon-tabs__panel, .brxe-post-content) .bg-mesh02 {
  background: linear-gradient(180deg, #f5f7ff 0%, #ffffff 100%) !important;
  border-radius: 20px;
  margin: 24px 16px !important;
  padding: 50px 32px !important;
}

/* Headings */
:is(.allelon-tabs__panel, .brxe-post-content) h2.brxe-heading,
:is(.allelon-tabs__panel, .brxe-post-content) h3.brxe-heading {
  color: #16204d !important;
  font-weight: 700 !important;
  letter-spacing: -.01em;
  line-height: 1.2 !important;
}
:is(.allelon-tabs__panel, .brxe-post-content) h2.brxe-heading {
  font-size: clamp(1.5rem, 2vw + .5rem, 2rem) !important;
  margin: 0 0 16px !important;
}
:is(.allelon-tabs__panel, .brxe-post-content) h3.brxe-heading {
  font-size: 1.15rem !important;
  margin: 0 0 8px !important;
}

/* Taglines */
:is(.allelon-tabs__panel, .brxe-post-content) .global__tagline,
:is(.allelon-tabs__panel, .brxe-post-content) [class*="__tagline"] {
  margin: 0 0 10px !important;
  font-size: .78rem !important;
  letter-spacing: .26em !important;
  font-weight: 700 !important;
  color: #273A8F !important;
  text-transform: uppercase !important;
}

/* Beschreibungstexte */
:is(.allelon-tabs__panel, .brxe-post-content) section p,
:is(.allelon-tabs__panel, .brxe-post-content) .brxe-text-basic,
:is(.allelon-tabs__panel, .brxe-post-content) .brxe-text p {
  font-size: 1rem;
  line-height: 1.65;
  color: #4a5070;
}

/* ----- global-slogan / home-slogan ----- */
:is(.allelon-tabs__panel, .brxe-post-content) .global-slogan,
:is(.allelon-tabs__panel, .brxe-post-content) .home-slogan {
  text-align: center;
}
:is(.allelon-tabs__panel, .brxe-post-content) .global-slogan h2,
:is(.allelon-tabs__panel, .brxe-post-content) .home-slogan h2,
:is(.allelon-tabs__panel, .brxe-post-content) .global-slogan__heading,
:is(.allelon-tabs__panel, .brxe-post-content) .home-slogan__heading {
  font-size: clamp(1.4rem, 1.6vw + .6rem, 1.8rem) !important;
  max-width: 880px;
  margin: 0 auto !important;
  text-align: center;
  line-height: 1.4 !important;
}
/* Tagline "Dafür stehen wir" mittig (statt linksbuendig) */
:is(.allelon-tabs__panel, .brxe-post-content) .home-slogan__container-info,
:is(.allelon-tabs__panel, .brxe-post-content) .global-slogan__container-info {
  align-items: center;
}
:is(.allelon-tabs__panel, .brxe-post-content) .home-slogan__container-info .global__tagline,
:is(.allelon-tabs__panel, .brxe-post-content) .global-slogan__container-info .global__tagline {
  margin-left: auto !important;
  margin-right: auto !important;
  align-self: center;
  text-align: center !important;
}

/* ----- global-content / angebot-info ----- */
:is(.allelon-tabs__panel, .brxe-post-content) .global-content .brxe-container,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-info .brxe-container {
  text-align: left;
}
:is(.allelon-tabs__panel, .brxe-post-content) .global-content .brxe-text,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-info .brxe-text {
  font-size: 1rem;
  line-height: 1.7;
  color: #2a2f45;
  max-width: 760px;
}

/* ----- ALLE LISTEN/GRIDS in Sections zu schönen Karten-Grids ----- */
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-feature ul,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-about03 ul,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-about04 ul,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-grid ul,
:is(.allelon-tabs__panel, .brxe-post-content) .feature01 ul,
:is(.allelon-tabs__panel, .brxe-post-content) .feature03 ul,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-triangle ul,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-timeline ul,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-timeline ol,
:is(.allelon-tabs__panel, .brxe-post-content) ul[class*="__list"]:not(.team-contact__list):not(.bricks-nav-menu) {
  list-style: none !important;
  padding: 0 !important;
  margin: 28px 0 0 !important;
}

/* Karten-Grid (für die meisten Sections) */
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-feature ul:not([class*="contact"]),
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-about03 ul:not([class*="contact"]),
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-about04 ul:not([class*="contact"]),
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-grid ul:not([class*="contact"]),
:is(.allelon-tabs__panel, .brxe-post-content) .feature01 ul:not([class*="contact"]),
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-triangle ul:not([class*="contact"]):not([class*="features-list"]) {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 20px !important;
}
@media (max-width: 1024px) {
  :is(.allelon-tabs__panel, .brxe-post-content) .angebot-feature ul,
  :is(.allelon-tabs__panel, .brxe-post-content) .angebot-about03 ul,
  :is(.allelon-tabs__panel, .brxe-post-content) .angebot-about04 ul,
  :is(.allelon-tabs__panel, .brxe-post-content) .angebot-grid ul,
  :is(.allelon-tabs__panel, .brxe-post-content) .feature01 ul,
  :is(.allelon-tabs__panel, .brxe-post-content) .angebot-triangle ul {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 640px) {
  :is(.allelon-tabs__panel, .brxe-post-content) .angebot-feature ul,
  :is(.allelon-tabs__panel, .brxe-post-content) .angebot-about03 ul,
  :is(.allelon-tabs__panel, .brxe-post-content) .angebot-about04 ul,
  :is(.allelon-tabs__panel, .brxe-post-content) .angebot-grid ul,
  :is(.allelon-tabs__panel, .brxe-post-content) .feature01 ul,
  :is(.allelon-tabs__panel, .brxe-post-content) .angebot-triangle ul {
    grid-template-columns: 1fr !important;
  }
}

/* Karten-Items */
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-feature li,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-about03 li,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-about04 li,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-grid li,
:is(.allelon-tabs__panel, .brxe-post-content) .feature01 li,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-triangle li,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-feature article,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-about03 article,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-about04 article,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-grid article,
:is(.allelon-tabs__panel, .brxe-post-content) .feature01 article,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-triangle article,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-feature .global__grid-item,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-triangle .global__grid-item {
  list-style: none !important;
  background: #ffffff !important;
  border: 1px solid rgba(39, 58, 143, .10) !important;
  border-radius: 18px !important;
  padding: 26px 24px !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 12px !important;
  height: 100% !important;
  width: 100% !important;
  transform: none !important;
  position: static !important;
  box-shadow: 0 4px 14px rgba(16, 24, 64, .05) !important;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-feature li:hover,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-about03 li:hover,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-about04 li:hover,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-grid li:hover,
:is(.allelon-tabs__panel, .brxe-post-content) .feature01 li:hover,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-triangle li:hover,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-feature article:hover,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-about03 article:hover {
  transform: translateY(-3px);
  border-color: #273A8F !important;
  box-shadow: 0 14px 30px rgba(39, 58, 143, .15) !important;
}

/* Icons in Items */
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-feature .brxe-icon,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-about03 .brxe-icon,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-about04 .brxe-icon,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-grid .brxe-icon,
:is(.allelon-tabs__panel, .brxe-post-content) .feature01 .brxe-icon,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-triangle .brxe-icon,
:is(.allelon-tabs__panel, .brxe-post-content) li > i.brxe-icon,
:is(.allelon-tabs__panel, .brxe-post-content) article > i.brxe-icon {
  font-size: 1.8rem !important;
  color: #273A8F !important;
  background: transparent !important;
  width: auto !important;
  height: auto !important;
  margin: 0 auto 4px !important;
  line-height: 1;
}

/* ----- TIMELINE: vertikale Schritt-Karten ----- */
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-timeline ul,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-timeline ol {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  grid-template-columns: none !important;
}
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-timeline li,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-timeline article {
  flex-direction: row !important;
  align-items: flex-start !important;
  text-align: left !important;
  padding: 20px 24px !important;
}
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-timeline .brxe-icon {
  margin: 0 !important;
  flex: 0 0 auto;
}

/* ----- PREIS-BLOCK ----- */
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-price {
  padding: 32px 24px !important;
}
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-price > .brxe-container {
  background: linear-gradient(135deg, #eef1ff 0%, #f5f7ff 100%) !important;
  border: 1px solid rgba(39, 58, 143, .14) !important;
  border-radius: 22px !important;
  padding: 32px 36px !important;
  text-align: center;
}
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-price h2,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-price h3 {
  color: #273A8F !important;
}
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-price ul {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin: 18px 0 0 !important;
  padding: 0 !important;
  align-items: center;
}
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-price li {
  background: #ffffff !important;
  border: 1px solid rgba(39, 58, 143, .10) !important;
  border-radius: 12px !important;
  padding: 14px 22px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 14px !important;
  list-style: none;
  max-width: 600px;
  width: 100%;
  margin: 0 !important;
}

/* ----- GALERIE (angebot-gallery__gallery) ----- */
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-gallery__container {
  max-width: 1280px;
  margin: 0 auto;
}
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-gallery__head-container {
  text-align: center;
  margin-bottom: 30px;
  padding: 0 24px;
}
/* Die eigentliche Galerie-Liste – sauberes 4-Spalten-Grid */
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-gallery__gallery,
:is(.allelon-tabs__panel, .brxe-post-content) ul.angebot-gallery__gallery,
:is(.allelon-tabs__panel, .brxe-post-content) ul.angebot-gallery__gallery.bricks-layout-wrapper {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  /* Bricks-Layout-JS deaktivieren */
  position: static !important;
  height: auto !important;
}
@media (max-width: 1024px) {
  :is(.allelon-tabs__panel, .brxe-post-content) .angebot-gallery__gallery,
  :is(.allelon-tabs__panel, .brxe-post-content) ul.angebot-gallery__gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 700px) {
  :is(.allelon-tabs__panel, .brxe-post-content) .angebot-gallery__gallery,
  :is(.allelon-tabs__panel, .brxe-post-content) ul.angebot-gallery__gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
}
@media (max-width: 440px) {
  :is(.allelon-tabs__panel, .brxe-post-content) .angebot-gallery__gallery,
  :is(.allelon-tabs__panel, .brxe-post-content) ul.angebot-gallery__gallery {
    grid-template-columns: 1fr !important;
  }
}

/* Bricks-Layout-Items überschreiben */
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-gallery .bricks-layout-item {
  position: static !important;
  width: 100% !important;
  height: auto !important;
  top: auto !important; left: auto !important;
  transform: none !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  /* alle Karten sollen wie Karten aussehen */
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Jedes Galerie-Bild als quadratische Karte */
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-gallery figure,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-gallery .bricks-layout-item figure {
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  height: 0 !important;
  padding-bottom: 100% !important;       /* quadratisch */
  overflow: hidden !important;
  border-radius: 12px !important;
  cursor: pointer;
  background: #f0f3ff !important;
}
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-gallery img,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-gallery .bricks-layout-inner {
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 12px !important;
  margin: 0 !important;
  transition: transform .55s cubic-bezier(.22,.61,.36,1),
              filter .3s ease;
}
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-gallery figure:hover img,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-gallery .bricks-layout-item:hover img {
  transform: scale(1.06);
  filter: brightness(1.05);
}

/* Optional: dezenter Schatten beim Hover */
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-gallery figure {
  transition: box-shadow .3s ease, transform .3s ease;
}
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-gallery figure:hover {
  box-shadow: 0 12px 28px rgba(16, 24, 64, .18);
  transform: translateY(-3px);
}

/* ----- SLIDER (einfache horizontale Scroll-Liste) ----- */
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-slider .brxe-container {
  display: flex !important;
  gap: 16px !important;
  overflow-x: auto !important;
  scroll-snap-type: x mandatory;
  padding-bottom: 12px;
}
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-slider .brxe-container > * {
  flex: 0 0 280px !important;
  scroll-snap-align: start;
}
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-slider figure {
  margin: 0 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  aspect-ratio: 4 / 5;
}
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-slider img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* ----- DOWNLOAD-CTA-Karte ----- */
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-download .brxe-container {
  background: linear-gradient(135deg, #273A8F 0%, #4456c6 100%) !important;
  color: #ffffff !important;
  border-radius: 22px !important;
  padding: 36px 40px !important;
  text-align: center !important;
}
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-download h2,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-download h3,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-download p,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-download .brxe-heading,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-download .brxe-text {
  color: #ffffff !important;
}
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-download .global__tagline {
  color: rgba(255,255,255,.85) !important;
}
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-download a {
  display: inline-flex !important;
  align-items: center;
  padding: 14px 28px !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: #273A8F !important;
  font-weight: 700 !important;
  letter-spacing: .1em;
  text-decoration: none !important;
  margin-top: 16px;
  transition: transform .25s ease;
}
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-download a:hover { transform: translateY(-2px); }

/* ----- ANGEBOT-CONTACT: Bild + Text + Button ----- */
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-contact .brxe-container {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 40px !important;
  align-items: center !important;
}
@media (max-width: 860px) {
  :is(.allelon-tabs__panel, .brxe-post-content) .angebot-contact .brxe-container {
    grid-template-columns: 1fr !important;
  }
}
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-contact figure {
  margin: 0 !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  width: 100% !important;
}
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-contact figure img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  border-radius: 22px !important;
}
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-contact .bricks-button {
  display: inline-flex !important;
  align-items: center;
  padding: 14px 30px !important;
  border-radius: 999px !important;
  background: #273A8F !important;
  color: #ffffff !important;
  border: none !important;
  font-weight: 600 !important;
  letter-spacing: .12em;
  text-decoration: none !important;
  box-shadow: 0 8px 22px rgba(39, 58, 143, .25);
}

/* ----- CONTENT08: Text + Liste ----- */
:is(.allelon-tabs__panel, .brxe-post-content) .content08 .brxe-container {
  display: grid !important;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) !important;
  gap: 48px !important;
  align-items: center;
}
@media (max-width: 860px) {
  :is(.allelon-tabs__panel, .brxe-post-content) .content08 .brxe-container {
    grid-template-columns: 1fr !important;
  }
}
:is(.allelon-tabs__panel, .brxe-post-content) .content08 ul {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  list-style: none;
  padding: 0;
}
:is(.allelon-tabs__panel, .brxe-post-content) .content08 li {
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 14px 18px !important;
  background: #f5f7ff;
  border-radius: 12px;
  font-weight: 500;
  color: #16204d;
}
:is(.allelon-tabs__panel, .brxe-post-content) .content08 li .brxe-icon { font-size: 1.1rem !important; margin: 0 !important; }

/* ----- FAQ-Accordion ----- */
:is(.allelon-tabs__panel, .brxe-post-content) .faq ul,
:is(.allelon-tabs__panel, .brxe-post-content) .faq__accordion {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
:is(.allelon-tabs__panel, .brxe-post-content) .faq__item,
:is(.allelon-tabs__panel, .brxe-post-content) .faq li {
  background: #ffffff;
  border: 1px solid rgba(39, 58, 143, .10);
  border-radius: 12px;
  overflow: hidden;
}
:is(.allelon-tabs__panel, .brxe-post-content) .accordion-title-wrapper {
  padding: 16px 20px !important;
  font-weight: 600;
  color: #16204d;
  cursor: pointer;
}
:is(.allelon-tabs__panel, .brxe-post-content) .accordion-content-wrapper {
  padding: 0 20px 16px !important;
  color: #4a5070;
  font-size: .95rem;
}

/* ----- angebot-hero02 (sub-hero) ----- */
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-hero02 {
  text-align: center;
}
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-hero02 h2 {
  max-width: 880px;
  margin: 0 auto 16px !important;
}
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-hero02 figure img,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-hero02 img {
  border-radius: 18px;
  max-width: 100%;
  height: auto;
}

/* Generisch: Figuren ohne explizites Styling – nicht riesig werden lassen */
:is(.allelon-tabs__panel, .brxe-post-content) figure.brxe-image,
:is(.allelon-tabs__panel, .brxe-post-content) .brxe-image {
  max-width: 100%;
}
:is(.allelon-tabs__panel, .brxe-post-content) figure.brxe-image img,
:is(.allelon-tabs__panel, .brxe-post-content) .brxe-image img {
  max-width: 100%;
  height: auto;
}

/* =========================================================
   Footer: volle Breite (randlos) + kompakter (weniger hoch)
   ========================================================= */
.footer.brxe-section {
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: var(--space-2xl) !important;   /* Abstand ueber dem Footer kleiner */
}
.footer__container.brxe-container {
  width: 100% !important;
  max-width: 100% !important;                 /* nicht breiter als der Viewport (kein Ueberlauf) */
  border-radius: 0 !important;                /* randlos -> ueber die ganze Seite */
  padding-top: var(--space-2xl) !important;    /* vorher 4xl -> weniger hoch */
  padding-bottom: var(--space-xl) !important;  /* vorher 3xl */
  padding-left: var(--space-2xl) !important;
  padding-right: var(--space-2xl) !important;
  row-gap: var(--space-l) !important;          /* vorher xl */
}
/* Footer-Logo: Schutzraum (klare Freiflaeche rundherum) */
.footer__logo.brxe-logo {
  display: inline-block;
  margin-top: var(--space-xl) !important;
  margin-bottom: var(--space-2xl) !important;
}

/* =========================================================
   Rechtsseiten (Datenschutz + Impressum) – im Markenstil
   ========================================================= */
.privacy.brxe-section,
.impressum.brxe-section {
  background: linear-gradient(180deg, #eef1ff 0%, #ffffff 340px) !important;
}
/* eine zentrierte, gut lesbare Spalte (statt 2-Spalten-Grid / links geklebt) */
.privacy__container.brxe-container,
.impressum__container.brxe-container {
  display: block !important;
  width: 100% !important;
  max-width: 880px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: clamp(48px, 7vw, 100px) clamp(20px, 5vw, 40px) clamp(64px, 9vw, 120px) !important;
}
.privacy__container-info.brxe-block,
.impressum__container-info.brxe-block { width: 100% !important; }

/* ---- Seitentitel + Eyebrow ---- */
h1.privacy__heading,
h1.impressum__heading {
  color: #16204d !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
  font-size: clamp(2.3rem, 5vw, 3.4rem) !important;
  line-height: 1.05 !important;
  margin: 0 0 .5em !important;
}
h1.privacy__heading::before,
h1.impressum__heading::before {
  display: block;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .24em;
  color: #273A8F;
  margin-bottom: 1rem;
}
h1.privacy__heading::before   { content: "DATENSCHUTZ"; }
h1.impressum__heading::before { content: "IMPRESSUM"; }

/* ---- Datenschutz: Body-Typografie ---- */
.privacy__description { color: #2a2f45; }
.privacy__description > p:first-child {           /* "Zuletzt aktualisiert am …" */
  display: inline-block;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: #4a5578;
  background: #eef1ff;
  border: 1px solid rgba(39, 58, 143, .14);
  padding: 6px 14px;
  border-radius: 999px;
  margin: 0 0 1.8em;
}
.privacy__description h2 {
  color: #16204d;
  font-weight: 700;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  margin: 2.4em 0 .7em;
  padding-top: 1.3em;
  border-top: 1px solid rgba(39, 58, 143, .14);
}
.privacy__description h3 {
  color: #273A8F;
  font-weight: 700;
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  margin: 1.8em 0 .5em;
}
.privacy__description p { line-height: 1.75; margin: 0 0 1.1em; }
.privacy__description strong { color: #16204d; font-weight: 700; }
.privacy__description ul,
.privacy__description ol { margin: 0 0 1.2em; padding-left: 1.3em; }
.privacy__description li { margin: 0 0 .5em; line-height: 1.65; }
.privacy__description li::marker { color: #273A8F; }
.privacy__description a { color: #273A8F; text-decoration: underline; text-underline-offset: 2px; }
.privacy__description a:hover { color: #16204d; }

/* ---- Impressum: Abschnitte + Kontakt ---- */
h2.impressum__heading {
  color: #16204d !important;
  font-weight: 700 !important;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem) !important;
  margin: 2.4em 0 1em !important;
  padding-top: 1.3em !important;
  border-top: 1px solid rgba(39, 58, 143, .14);
  width: 100%;
}
.impressum__heading-h3.brxe-heading {
  color: #273A8F !important;
  font-weight: 700 !important;
  font-size: clamp(1.15rem, 1.8vw, 1.4rem) !important;
}
.impressum__description.brxe-text-basic {
  color: #2a2f45 !important;
  line-height: 1.75 !important;
  max-width: 680px !important;
}
/* Kontaktzeilen: Icon im blauen Badge, Label dezent, Wert in Markenblau */
.impressum__contact-element.brxe-block {
  align-items: center !important;
  column-gap: var(--space-s) !important;
  padding: 4px 0;
}
.impressum__contact-icon.brxe-icon {
  color: #273A8F !important;
  fill: #273A8F !important;
  background: #eef1ff;
  border-radius: 10px;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1rem !important;
}
.impressum__contact-heading.brxe-heading {
  color: #16204d !important;
  font-size: .78rem !important;
  font-weight: 700 !important;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.impressum__contact-link.brxe-text-basic {
  color: #273A8F !important;
  font-weight: 500 !important;
  font-size: var(--text-m) !important;
}
.impressum__contact-link.brxe-text-basic:hover { color: #16204d !important; text-decoration: underline; }

/* =========================================================
   Team-Karten KOMPAKT: nur Foto + Name + Position + kurze Funktion.
   Lange Abschnitte (Über mich / Tätigkeiten / Kontakt) ausblenden,
   damit die Kacheln kurz, gleichmaessig und schoen sind.
   ========================================================= */
.card-team-member ul.team-angebote__features-list:not(:first-of-type) {
  display: none !important;
}
.card-team-member__container-info {
  padding: 22px 24px 24px !important;
  gap: 10px !important;
  justify-content: flex-start !important;
}
.card-team-member ul.team-angebote__features-list:first-of-type {
  gap: 6px !important;
}
/* kurze Funktions-Beschreibung: max. 3 Zeilen, einheitlich */
.card-team-member .team-angebote__features-list:first-of-type .team__description {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 8px !important;
}

/* =========================================================
   Team-Karten: exakt gleich gross + Klick zum Aufklappen
   ========================================================= */
.team-member__grid { align-items: start !important; }
.card-team-member {
  height: auto !important;
  align-self: start !important;
  cursor: pointer;
}
/* Klick-Hinweis unten in der Karte */
.card-team-member__container-info::after {
  content: "Mehr erfahren \2193";
  margin-top: auto;
  padding-top: 14px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #273A8F;
  opacity: .85;
}
.card-team-member.is-expanded .card-team-member__container-info::after {
  content: "Weniger anzeigen \2191";
}
/* aufgeklappt: hervorheben + versteckte Abschnitte zeigen */
.card-team-member.is-expanded {
  border-color: #273A8F !important;
  box-shadow: 0 24px 50px rgba(39, 58, 143, .24) !important;
}
.card-team-member.is-expanded ul.team-angebote__features-list:not(:first-of-type) {
  display: flex !important;
  animation: teamReveal .35s ease both;
}
@keyframes teamReveal {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* Tätigkeiten-Liste im aufgeklappten Zustand: Häkchen links + Text inline */
.card-team-member .team-angebote__feature-icon {
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  text-align: left !important;
  width: 100% !important;
}
/* Hohe Spezifitaet noetig: schlaegt die Angebote-Tab-Regel
   ":is(.allelon-tabs__panel, .brxe-post-content) [class*=__grid] .brxe-icon { margin:0 auto }" */
:is(.allelon-tabs__panel, .brxe-post-content) .card-team-member i.team-angebote__feature-item-icon,
.card-team-member i.team-angebote__feature-item-icon {
  font-size: 1rem !important;
  color: #273A8F !important;
  flex: 0 0 auto !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;           /* kein auto-Margin -> Icon nicht zentrieren */
}
.card-team-member .team-angebote__feature-element-text {
  color: #2a2f45 !important;
  font-size: .92rem !important;
  line-height: 1.45 !important;
  text-align: left !important;
  text-decoration: none !important;
  margin: 0 !important;
}

/* mehr Abstand vor der 2. Team-Sektion (Geschäftsleitung & Vorstand).
   Hohe Spezifitaet noetig (schlaegt die Tab-Panel-margin-Reset-Regel). */
:is(.allelon-tabs__panel, .brxe-post-content) .team-member .team-member__container + .team-member__container,
.team-member .team-member__container + .team-member__container {
  margin-top: clamp(64px, 9vw, 130px) !important;
}
/* Karten ohne Zusatzinfos: kein "Mehr erfahren", nicht klickbar */
.card-team-member.no-expand { cursor: default; }
.card-team-member.no-expand .card-team-member__container-info::after { content: none !important; }
.card-team-member.no-expand:hover {
  transform: none;
  border-color: rgba(39, 58, 143, .10);
  box-shadow: 0 6px 20px rgba(16, 24, 64, .06);
}
.card-team-member.no-expand:hover .card-team-member__avatar img { transform: none; }

/* =========================================================
   Angebots-Detailinhalt (in den Tabs) – im Markenstil
   ========================================================= */
:is(.allelon-tabs__panel, .brxe-post-content) .brxe-section {
  padding-top: clamp(36px, 5vw, 64px) !important;
  padding-bottom: clamp(36px, 5vw, 64px) !important;
}
:is(.allelon-tabs__panel, .brxe-post-content) .brxe-container { max-width: 1080px !important; margin-left: auto !important; margin-right: auto !important; }

/* Eyebrows / Taglines */
:is(.allelon-tabs__panel, .brxe-post-content) .global__tagline {
  color: #273A8F !important; text-transform: uppercase !important;
  letter-spacing: .2em !important; font-weight: 700 !important; font-size: .8rem !important;
}
/* Ueberschriften & Text */
:is(.allelon-tabs__panel, .brxe-post-content) h2:not(.allelon-tab-panel__title) { color: #16204d !important; font-weight: 700 !important; letter-spacing: -.01em; line-height: 1.2; }
:is(.allelon-tabs__panel, .brxe-post-content) h3 { color: #16204d !important; font-weight: 700 !important; }
:is(.allelon-tabs__panel, .brxe-post-content) .brxe-text p, :is(.allelon-tabs__panel, .brxe-post-content) .brxe-text-basic { line-height: 1.7; color: #2a2f45; }
:is(.allelon-tabs__panel, .brxe-post-content) strong { color: #16204d; }

/* Zielgruppe / Feature-Karten */
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-feature__grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
  gap: 20px !important;
}
:is(.allelon-tabs__panel, .brxe-post-content) .card-angebot-feature {
  background: #fff; border: 1px solid rgba(39,58,143,.10); border-radius: 18px;
  box-shadow: 0 6px 20px rgba(16,24,64,.06); padding: 26px 24px !important; height: 100%;
  transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s, border-color .3s;
}
:is(.allelon-tabs__panel, .brxe-post-content) .card-angebot-feature:hover { transform: translateY(-4px); border-color: #273A8F; box-shadow: 0 18px 40px rgba(39,58,143,.16); }
:is(.allelon-tabs__panel, .brxe-post-content) .card-angebot-feature__icon {
  color: #273A8F !important; font-size: 1.25rem !important; background: #eef1ff;
  width: 48px; height: 48px; display: inline-flex !important; align-items: center; justify-content: center;
  border-radius: 13px; margin: 0 0 16px !important; aspect-ratio: auto !important;
}
:is(.allelon-tabs__panel, .brxe-post-content) .card-angebot-feature__heading { color: #16204d !important; font-weight: 700 !important; margin: 0 0 8px !important; }
:is(.allelon-tabs__panel, .brxe-post-content) .card-angebot-feature__description { color: #2a2f45 !important; line-height: 1.6; }

/* Timeline */
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-timeline__icon-wrapper {
  background: #273A8F !important; width: 52px !important; height: 52px !important; border-radius: 50% !important;
  display: flex !important; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(39,58,143,.25);
}
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-timeline__icon { color: #fff !important; fill: #fff !important; font-size: 1.05rem !important; }
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-timeline__line .line { border-top-color: rgba(39,58,143,.20) !important; border-right-color: rgba(39,58,143,.20) !important; }
:is(.allelon-tabs__panel, .brxe-post-content) .card-angebot-timeline {
  background: #fff; border: 1px solid rgba(39,58,143,.10); border-radius: 16px;
  box-shadow: 0 6px 18px rgba(16,24,64,.05); padding: 20px 26px !important;
}
:is(.allelon-tabs__panel, .brxe-post-content) .card-angebot-timeline__heading { color: #16204d !important; font-weight: 700 !important; margin: 0 0 6px !important; }
:is(.allelon-tabs__panel, .brxe-post-content) .card-angebot-timeline__description { color: #2a2f45 !important; line-height: 1.6; }

/* Preis */
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-price__container {
  background: linear-gradient(135deg, #273A8F 0%, #16204d 100%) !important;
  border-radius: 20px !important; padding: 30px 36px !important; box-shadow: 0 18px 44px rgba(39,58,143,.22);
}
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-price__container *,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-price__container .global__tagline { color: #fff !important; }
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-price__container .global__tagline { opacity: .82; }
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-price__heading { font-size: clamp(1.6rem, 3vw, 2.2rem) !important; font-weight: 800 !important; }

/* about03 / about04 (Bild+Text, dunkel) – Text sichtbar */
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-about03__heading, :is(.allelon-tabs__panel, .brxe-post-content) .angebot-about03__description,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-about03 p, :is(.allelon-tabs__panel, .brxe-post-content) .angebot-about04 p { color: #fff !important; }

/* Slogan */
:is(.allelon-tabs__panel, .brxe-post-content) .global-slogan__container { max-width: 900px; }
:is(.allelon-tabs__panel, .brxe-post-content) .angebot__slogan p { font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.65; color: #16204d; }

/* Timeline-Icon zwingend weiss (auf blauem Kreis) */
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-timeline__icon-wrapper i.angebot-timeline__icon,
:is(.allelon-tabs__panel, .brxe-post-content) i.angebot-timeline__icon,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-timeline__icon-wrapper .brxe-icon {
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* Preis-Block: Text zwingend weiss (schlaegt die generische h2-navy-Regel) */
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-price__container h2,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-price__container h2.angebot-price__heading,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-price__container h3,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-price__container p,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-price__container .brxe-text-basic,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-price__container .global__tagline,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-price__container i {
  color: #ffffff !important;
}

/* Bricks-Gallery (Masonry per JS) -> sauberes CSS-Grid mit gleichen Kacheln */
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-gallery__gallery {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important;
  gap: 12px !important;
  position: static !important;
  height: auto !important;
  width: 100% !important;
  list-style: none !important;
  padding: 0 !important;
}
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-gallery__gallery .bricks-layout-item {
  position: static !important;
  inset: auto !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  transform: none !important;
}
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-gallery__gallery .bricks-layout-inner,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-gallery__gallery img {
  position: static !important;
  width: 100% !important;
  height: 210px !important;
  object-fit: cover !important;
  border-radius: 12px !important;
  display: block !important;
  transition: transform .4s ease;
}
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-gallery__gallery .bricks-layout-item:hover img { transform: scale(1.04); }

/* Gallery-Kacheln exakt Bildhöhe (kein leerer Bereich darunter) */
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-gallery__gallery { grid-auto-rows: 210px !important; }
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-gallery__gallery .bricks-layout-item {
  height: 210px !important; overflow: hidden !important; border-radius: 12px !important;
  background: none !important;
}

/* =========================================================
   EINZELNE ANGEBOT-DETAIL-SEITE (z. B. /schule-wegweiser/)
   Dieselben Sektionen wie in den Tab-Panels, aber OHNE den
   .allelon-tabs__panel-Wrapper. Hier bekommen sie dasselbe
   schoene Karten-/Grid-/Heading-Styling. Gescoped auf
   .brxe-post-content -> betrifft NIE die Tab-Seite (/angebote/).
   ========================================================= */

/* ---------- Sektions-Abstaende + Container ---------- */
.brxe-post-content .content08,
.brxe-post-content .faq {
  padding: 60px 24px;
}
.brxe-post-content .content08 > .brxe-container,
.brxe-post-content .faq > .brxe-container {
  max-width: 1180px;
  margin: 0 auto;
}

/* Bricks setzt auf .brxe-container eine FESTE Breite (width:1100px), die auf
   Mobil nicht schrumpft -> horizontaler Ueberlauf. Auf 100% zwingen; das
   bestehende max-width:1180 + margin:auto haelt den Desktop zentriert/gecappt. */
.brxe-post-content .feature01,
.brxe-post-content .angebot-triangle,
.brxe-post-content .content08,
.brxe-post-content .faq {
  align-items: stretch !important;
}
.brxe-post-content .feature01__container,
.brxe-post-content .angebot-triangle__container,
.brxe-post-content .content08__container,
.brxe-post-content .faq__container {
  width: 100% !important;
  min-width: 0 !important;
}

/* ---------- Sektions-Kopf (Tagline + Titel + Lead) zentriert ---------- */
.brxe-post-content .feature01__container,
.brxe-post-content .angebot-triangle__container,
.brxe-post-content .faq__container {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}
.brxe-post-content .feature01__container-info,
.brxe-post-content .feature03__container-info,
.brxe-post-content .faq__container-info {
  text-align: center;
  max-width: 820px;
  margin: 0 auto;
  list-style: none;
}

/* Titel der vier Sektionen wie der Rest der Seite (groesser, einheitlich) */
.brxe-post-content h2.feature01__heading,
.brxe-post-content h2.feature03__heading,
.brxe-post-content h2.content08__heading,
.brxe-post-content h2.faq__heading {
  margin: 0 0 14px !important;
  font-size: clamp(1.8rem, 2.6vw + .8rem, 2.6rem) !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  color: #16204d !important;
  letter-spacing: -.01em !important;
}

/* Lead-/Beschreibungstexte unter den Titeln */
.brxe-post-content .feature01__description,
.brxe-post-content .faq__description,
.brxe-post-content .feature03__container-info > .brxe-text-basic {
  font-size: 1.02rem !important;
  line-height: 1.7 !important;
  color: #4a5070 !important;
  margin-top: 6px !important;
}

/* ---------- Karten-Grids (Feature + Tagesstruktur) ---------- */
.brxe-post-content .feature01__grid,
.brxe-post-content .angebot-triangle__list {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 22px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 28px 0 0 !important;
}
@media (max-width: 1024px) {
  .brxe-post-content .feature01__grid,
  .brxe-post-content .angebot-triangle__list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 640px) {
  .brxe-post-content .feature01__grid,
  .brxe-post-content .angebot-triangle__list {
    grid-template-columns: 1fr !important;
  }
}

/* Grid-Zellen sind nur Layout-Wrapper -> die Karte ist das <article> */
.brxe-post-content .feature01__grid > li,
.brxe-post-content .angebot-triangle__list > .global__grid-item,
.brxe-post-content .angebot-triangle__list > .global__grid-item > li {
  display: flex !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  /* Bricks platziert die Tagesstruktur-Items per ID in einem 6-Spalten-
     "Triangle"-Raster (grid-column: 3/5 usw.). Das hier wieder neutralisieren,
     damit sie sauber 3-pro-Reihe fliessen wie die uebrigen Karten. */
  grid-column: auto !important;
  grid-row: auto !important;
  position: static !important;
  transform: none !important;
}

/* "Zweiter Rand" an den Kartenecken: Das Wrapper-<li> der Karten-Raster warf
   einen eigenen, ECKIGEN Schatten (border-radius 0), der hinter der
   abgerundeten Karte (article) an den Ecken hervorschaute. Die Karte hat ihren
   eigenen Schatten -> Wrapper-Schatten/-Rahmen/-Hintergrund entfernen. */
:is(.allelon-tabs__panel, .brxe-post-content) :is(.feature01__grid, .feature03__grid, .angebot-feature__grid, .angebot-feature__grid02, .angebot-feature__list, .angebot-grid__grid, .angebot-grid__list, .angebot-about04__list, .angebot-triangle__list) :is(li, .global__grid-item):has(> article) {
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

/* Die KARTE selbst */
.brxe-post-content .feature01__grid article,
.brxe-post-content .angebot-triangle__list article {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 28px 24px !important;
  gap: 12px !important;
  background: #ffffff !important;
  border: 1px solid rgba(39, 58, 143, .10) !important;
  border-radius: 20px !important;
  box-shadow: 0 6px 20px rgba(16, 24, 64, .06) !important;
  transition: transform .32s cubic-bezier(.22,.61,.36,1),
              box-shadow .32s ease,
              border-color .32s ease;
}
.brxe-post-content .feature01__grid article:hover,
.brxe-post-content .angebot-triangle__list article:hover {
  transform: translateY(-4px);
  border-color: #273A8F !important;
  box-shadow: 0 18px 36px rgba(39, 58, 143, .18) !important;
}

/* Icons in den Karten */
.brxe-post-content .feature01__grid .brxe-icon,
.brxe-post-content .angebot-triangle__list .brxe-icon {
  color: #273A8F !important;
  background: transparent !important;
  font-size: 2rem !important;
  line-height: 1 !important;
  margin: 0 auto 6px !important;
}

/* Karten-Titel + Karten-Text */
.brxe-post-content .feature01__grid h3,
.brxe-post-content .angebot-triangle__list h3 {
  margin: 0 0 8px !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: #16204d !important;
  line-height: 1.25 !important;
}
.brxe-post-content .feature01__grid .brxe-text-basic,
.brxe-post-content .angebot-triangle__list .brxe-text-basic {
  font-size: .95rem !important;
  line-height: 1.65 !important;
  color: #4a5070 !important;
}

/* ---------- content08 — saubere 2 Spalten ---------- */
.brxe-post-content .content08__container {
  display: grid !important;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 50px;
  align-items: center;
}
@media (max-width: 860px) {
  .brxe-post-content .content08__container { grid-template-columns: 1fr; }
}
.brxe-post-content .content08__list {
  list-style: none; padding: 0; margin: 24px 0 0;
  display: flex; flex-direction: column; gap: 12px;
}
.brxe-post-content .content08__list-item { display: flex; align-items: center; gap: 12px; }
.brxe-post-content .content08__list-icon { font-size: 1.1rem !important; color: #273A8F !important; }
.brxe-post-content .content08__description p { font-size: 1.02rem; line-height: 1.7; color: #4a5070; }

/* =========================================================
   FAQ-AKKORDEON — gilt fuer BEIDE Kontexte (Einzelseite + Tabs)
   Standardmaessig ZU; oeffnet per Klick (JS toggelt aria-expanded).
   ========================================================= */
.brxe-post-content .faq__accordion {
  list-style: none;
  padding: 0;
  margin: 28px auto 0;
  max-width: 820px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.brxe-post-content .faq__item {
  background: #ffffff;
  border: 1px solid rgba(39, 58, 143, .10);
  border-radius: 14px;
  overflow: hidden;
  list-style: none;
}

/* Frage-Zeile */
.faq__question.accordion-title-wrapper {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 22px !important;
  cursor: pointer;
  font-weight: 600;
  color: #16204d;
  -webkit-user-select: none;
  user-select: none;
}
.faq__question .faq__answer-heading {
  margin: 0 !important;
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  color: #16204d !important;
  line-height: 1.35 !important;
}
.faq__answer-icon-wrapper { flex: 0 0 auto; display: flex; align-items: center; }
.faq__answer-icon {
  color: #273A8F !important;
  transition: transform .3s ease;
}
.faq__question[aria-expanded="true"] .faq__answer-icon { transform: rotate(45deg); }

.faq__answer-content {
  padding: 2px 22px 18px !important;
  color: #4a5070;
  line-height: 1.65;
}

/* Antwort: NUR zuklappen, wenn das JS aktiv ist (setzt html.allelon-faq-js).
   Ohne JS bleiben die Antworten sichtbar -> nie unzugaenglich.
   max-height kollabiert zuverlaessig auf 0 (kein durchscheinender Reststreifen). */
html.allelon-faq-js .faq__answer.accordion-content-wrapper {
  display: block !important;
  max-height: 0;
  overflow: hidden !important;
  opacity: 0;
  padding: 0 !important;
  transition: max-height .35s cubic-bezier(.4, 0, .2, 1), opacity .3s ease;
}
html.allelon-faq-js .faq__question[aria-expanded="true"] + .faq__answer.accordion-content-wrapper {
  max-height: 800px;
  opacity: 1;
}

/* =========================================================
   EINZELNE ANGEBOTSSEITEN (body.single-angebot) — generische
   Korrekturen der Bricks-Layout-Altlasten, die NUR auf den
   Einzelseiten geladen werden (auf der Tab-Seite /angebote/ nicht).
   Gescoped auf .brxe-post-content -> nie Header/Footer.
   ========================================================= */

/* Bricks setzt .brxe-container{width:1100px} (fix) -> volle Breite,
   max-width:1180 + margin:auto (aus den Tab-Regeln) zentriert auf Desktop. */
.single-angebot .brxe-post-content .brxe-container {
  width: 100% !important;
  min-width: 0 !important;
}

/* Sektionen sind display:flex; align-items:center -> Container schrumpfen.
   Auf stretch zwingen, damit Container volle Breite nehmen. */
.single-angebot .brxe-post-content section[class*="brxe-section"] {
  align-items: stretch !important;
}

/* Per-ID Grid-Platzierungen (grid-column: 3/5 usw.) neutralisieren,
   damit Karten sauber fliessen. (Slider/Flex ignorieren grid-column.) */
.single-angebot .brxe-post-content [class*="__grid"] > *,
.single-angebot .brxe-post-content [class*="__list"] > * {
  grid-column: auto !important;
  grid-row: auto !important;
}

/* Sektions-Titel einheitlich wie der Rest der Webseite. Ausnahmen: FAQ-Fragen,
   Karten-h3 (h3) und die Titel auf den dunklen CTAs (Preis/Download) — die
   bleiben weiss via ihrer eigenen Regeln. */
.single-angebot .brxe-post-content h2[class*="__heading"]:not(.faq__answer-heading):not(.angebot-price__heading):not(.angebot-download__heading) {
  font-size: clamp(1.8rem, 2.6vw + .8rem, 2.6rem) !important;
  line-height: 1.2 !important;
  margin: 0 0 16px !important;
  color: #16204d !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
}

/* Preis-Block: der innere navy Gradient-Kasten ist gewollt, aber Bricks legt
   noch einen aeusseren Navy-Wrapper darueber -> neutralisieren. */
.single-angebot .brxe-post-content .angebot-price__container-wrapper {
  background-color: transparent !important;
}

/* Bricks faerbt einzelne Sektions-Wrapper navy (background-color: var(--secondary)),
   wodurch ganze Bereiche dunkelblau erscheinen. Diese konkreten Wrapper-IDs
   (pro Seite eindeutig) auf transparent setzen -> heller Seitenhintergrund.
   Icon-Badges/Download-CTA beziehen ihr Navy anders und bleiben erhalten. */
#brxe-iiczub, #brxe-bodhiz,
#brxe-ahdnjb, #brxe-xhpjjo,
#brxe-qpagdb, #brxe-lbrtxh,
#brxe-pbycre,
#brxe-bkcfzw {
  background-color: transparent !important;
}

/* angebot-info: navy Announcement-Box -> gesamten Text weiss (lesbar). */
.single-angebot .brxe-post-content .angebot-info__container-info,
.single-angebot .brxe-post-content .angebot-info__container-info * {
  color: #ffffff !important;
}
/* angebot-slider: ungewollter navy Kasten -> hell, damit der Text lesbar ist. */
.single-angebot .brxe-post-content .angebot-slider__container-slider {
  background-color: transparent !important;
}

/* about03/about04/slider waren urspruenglich dunkle Sektionen mit weissem Text.
   Da sie jetzt hell sind, die Beschreibungstexte lesbar (dunkel) machen.
   Tagline (blau) und Headings bleiben von ihren eigenen Regeln bedient. */
.single-angebot .brxe-post-content .angebot-about03 .brxe-text,
.single-angebot .brxe-post-content .angebot-about03 .brxe-text *,
.single-angebot .brxe-post-content .angebot-about03 .brxe-text-basic,
.single-angebot .brxe-post-content .angebot-about04 .brxe-text,
.single-angebot .brxe-post-content .angebot-about04 .brxe-text *,
.single-angebot .brxe-post-content .angebot-about04 .brxe-text-basic,
.single-angebot .brxe-post-content .angebot-slider .brxe-text,
.single-angebot .brxe-post-content .angebot-slider .brxe-text *,
.single-angebot .brxe-post-content .angebot-slider .brxe-text-basic {
  color: #4a5070 !important;
}

/* Tab-Panels: einige Unterseiten-Titel sind als <h1> gesetzt (z.B.
   "Tagesstruktur im Härzhuus", "Freie Wohnungen ..."). Ohne das Inline-CSS
   der Unterseite fallen sie auf die riesige Theme-h1-Groesse zurueck.
   Auf Sektionstitel-Groesse begrenzen (das Tab-Panel hat schon seinen Titel). */
.allelon-tabs__panel h1[class*="__heading"]:not(.home-slogan__heading):not(.global-slogan__heading) {
  font-size: clamp(1.6rem, 2.2vw + .6rem, 2.2rem) !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  margin: 0 0 14px !important;
  color: #16204d !important;
  letter-spacing: -.01em !important;
}

/* =========================================================
   Hero: Bild fuellt die volle Hero-Hoehe
   Der global-hero ist min-height:60vh, das Bild lag aber nur im
   Container (~410px) -> grosse weisse Leerflaeche darunter (faellt v.a.
   auf /angebote/ vor den Tabs auf). Container die Sektion fuellen lassen
   und Inhalt vertikal zentrieren -> Bild deckt den ganzen Hero.
   ========================================================= */
.global-hero {
  display: flex !important;
  flex-direction: column !important;
}
.global-hero__container {
  flex: 1 0 auto !important;
  justify-content: center !important;
}

/* =========================================================
   DOPPELRAHMEN-FIX (Tab-/Einzelseiten)
   Mehrere aeltere Karten-Regeln (".angebot-feature li" usw.) rahmen auch
   die WRAPPER-<li> der Karten -> doppelter Rahmen. Die Wrapper konsequent
   transparent schalten; die Karte ist allein das innere .card-* (article).
   Mini-Karten (…__feature-element) und Paket-Karten (.angebot-grid-card)
   haben kein "__wrapper" und bleiben unberuehrt.
   ========================================================= */
:is(.allelon-tabs__panel, .brxe-post-content) [class*="card-angebot"][class*="__wrapper"],
:is(.allelon-tabs__panel, .brxe-post-content) li[class*="__wrapper"][class*="card-"] {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* =========================================================
   TAB-/EINZELSEITEN FEINSCHLIFF (User-Feedback)
   ========================================================= */

/* (7) about03/04-Beschreibung war weiss auf hellem Grund -> dunkel/lesbar */
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-about03 :is(p, .brxe-text, .brxe-text-basic, span),
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-about03 .brxe-text *,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-about04 :is(p, .brxe-text, .brxe-text-basic, span),
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-about04 .brxe-text * {
  color: #4a5070 !important;
}

/* (5) Preis-Box war viel zu breit/leer -> kompakter + zentriert */
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-price__container {
  max-width: 720px !important;
  margin: 0 auto !important;
  padding: 30px 38px !important;
}

/* (1) Mehr Luft: groessere Sektions-Abstaende + Kopfbloecke nicht kleben */
:is(.allelon-tabs__panel, .brxe-post-content) section[class*="brxe-section"] {
  padding-top: 64px !important;
  padding-bottom: 64px !important;
}
:is(.allelon-tabs__panel, .brxe-post-content) [class*="__inner-container-info"] > * + *,
:is(.allelon-tabs__panel, .brxe-post-content) .global-content__container-info > * + * {
  margin-top: 16px !important;
}
:is(.allelon-tabs__panel, .brxe-post-content) .global-content02__inner-container,
:is(.allelon-tabs__panel, .brxe-post-content) .global-content02__heading {
  margin-top: 22px !important;
}

/* (3) CTA-Buttons mit Abstand zueinander und zum Text */
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-contact__container-btn {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
  margin-top: 26px !important;
}
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-contact__container-btn .bricks-button {
  margin: 0 !important;
}

/* (6) Paket-Karten + Mini-Karten luftiger */
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-grid-card {
  padding: 30px 28px !important;
}
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-grid-card__features-list {
  gap: 14px !important;
}

/* (5) Preis-Box: Inhalt links, grosses Icon rechts -> gefuellt & kompakt */
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-price__container {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 28px !important;
  padding: 30px 42px !important;
  text-align: left !important;
}
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-price__container-info-right {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
}
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-price__container-info-right .brxe-icon,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-price__icon {
  font-size: 3.6rem !important;
  opacity: .8 !important;
  margin: 0 !important;
}
@media (max-width: 600px) {
  :is(.allelon-tabs__panel, .brxe-post-content) .angebot-price__container {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
  }
}

/* Slider: Webschrift statt Serifen-Fallback. Icons (Font Awesome) ausnehmen,
   sonst werden die Pfeil-Glyphen zu leeren Kaestchen. */
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-slider,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-slider *:not(i):not(.fas):not(.far):not(.fab):not([class*="fa-"]) {
  font-family: "Inter", "Gilmer", -apple-system, sans-serif !important;
}

/* Preis-Box: Inhaltsblock nimmt verfuegbare Breite -> Titel bricht NICHT
   Wort-fuer-Wort um. Box etwas breiter, Icon nur so breit wie noetig. */
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-price__container {
  max-width: 820px !important;
}
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-price__container-info {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-price__heading {
  white-space: normal !important;
  overflow-wrap: normal !important;
}

/* Preis-Box FINAL: Block-Layout -> Text in voller Breite (kein Wort-pro-Zeile),
   Icon als grosser, dezenter Hintergrund-Akzent rechts (absolut, beschraenkt
   den Text nicht). Schlaegt die frueheren Flex-Regeln. */
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-price__container {
  display: block !important;
  position: relative !important;
  max-width: 820px !important;
  margin: 0 auto !important;
  padding: 34px 44px !important;
  overflow: hidden !important;
  text-align: left !important;
}
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-price__container-info {
  position: relative !important;
  z-index: 2 !important;
  max-width: 80% !important;
  flex: none !important;
}
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-price__container-info-right {
  position: absolute !important;
  right: 40px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 1 !important;
  margin: 0 !important;
}
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-price__container-info-right .brxe-icon,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-price__icon {
  font-size: 5rem !important;
  opacity: .16 !important;
}
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-price__heading {
  white-space: normal !important;
  overflow-wrap: normal !important;
}

/* Preis-Sektionen: vertikaler Abstand, damit gestapelte Preis-Boxen
   (z.B. Besuchsbegleitung + Besuchsuebergabe) nicht aneinanderkleben. */
:is(.allelon-tabs__panel, .brxe-post-content) section.angebot-price {
  padding-top: 18px !important;
  padding-bottom: 18px !important;
}
:is(.allelon-tabs__panel, .brxe-post-content) section.angebot-price + section.angebot-price {
  padding-top: 0 !important;
  margin-top: 26px !important;
}

/* Preis-Sektion ist display:flex mit zwei gestapelten Preis-Boxen, aber
   gap:0 -> sie klebten aneinander. Flex-Gap setzen. */
:is(.allelon-tabs__panel, .brxe-post-content) section.angebot-price {
  display: flex !important;
  flex-direction: column !important;
  gap: 26px !important;
  align-items: stretch !important;
}

/* Mini-Karten-Text umbrechen statt abschneiden ("Wohnung/Studio" usw.) */
:is(.allelon-tabs__panel, .brxe-post-content) ul.angebot-grid-card__features-list > li,
:is(.allelon-tabs__panel, .brxe-post-content) ul.angebot-grid-card__features-list > li {
  overflow: visible !important;
  padding: 16px 10px !important;
}
:is(.allelon-tabs__panel, .brxe-post-content) ul.angebot-grid-card__features-list > li,
:is(.allelon-tabs__panel, .brxe-post-content) ul.angebot-grid-card__features-list > li :is(span, p, div),
:is(.allelon-tabs__panel, .brxe-post-content) ul.angebot-grid-card__features-list > li,
:is(.allelon-tabs__panel, .brxe-post-content) ul.angebot-grid-card__features-list > li :is(span, p, div) {
  font-size: .8rem !important;
  line-height: 1.35 !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
  hyphens: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* (7) Paket-Karten: innere Feature-Elemente NICHT als eigene Karten zeigen
   (kein "Karte-in-Karte"). Nur Gradient-Icon-Badge + Label, direkt auf der
   weissen Paket-Karte -> transparent, ohne Rahmen/Schatten/Radius. */
:is(.allelon-tabs__panel, .brxe-post-content) ul.angebot-grid-card__features-list > li {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 6px 8px !important;
}
:is(.allelon-tabs__panel, .brxe-post-content) ul.angebot-grid-card__features-list > li:hover {
  transform: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
  background: transparent !important;
}

/* =========================================================
   Galerie-Lightbox
   ========================================================= */
.allelon-lightbox {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 4vh 4vw;
  background: rgba(10, 14, 38, .93);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity .25s ease;
}
.allelon-lightbox[aria-hidden="false"] { display: flex; opacity: 1; }
html.allelon-lightbox-open { overflow: hidden; }

.allelon-lightbox__stage {
  margin: 0;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.allelon-lightbox__img {
  max-width: 90vw;
  max-height: 86vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .55);
  cursor: zoom-out;
  animation: allelonLbIn .28s cubic-bezier(.22,.61,.36,1);
}
@keyframes allelonLbIn { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }

.allelon-lightbox__close,
.allelon-lightbox__nav {
  position: absolute;
  border: 0;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: background .2s ease, transform .2s ease;
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}
.allelon-lightbox__close:hover,
.allelon-lightbox__nav:hover { background: rgba(255, 255, 255, .26); }
.allelon-lightbox__close {
  top: 18px; right: 22px;
  width: 46px; height: 46px; border-radius: 50%;
  font-size: 30px; padding-bottom: 3px;
}
.allelon-lightbox__nav {
  top: 50%; transform: translateY(-50%);
  width: 54px; height: 54px; border-radius: 50%;
  font-size: 34px; padding-bottom: 4px;
}
.allelon-lightbox__nav:hover { transform: translateY(-50%) scale(1.06); }
.allelon-lightbox__prev { left: 18px; }
.allelon-lightbox__next { right: 18px; }
.allelon-lightbox__counter {
  position: absolute;
  bottom: 20px; left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, .85);
  font-size: .9rem;
  letter-spacing: .06em;
  font-weight: 600;
}
@media (max-width: 600px) {
  .allelon-lightbox__nav { width: 44px; height: 44px; font-size: 28px; }
  .allelon-lightbox__prev { left: 8px; }
  .allelon-lightbox__next { right: 8px; }
  .allelon-lightbox__img { max-width: 96vw; }
}

/* Galerie-Thumbnails: anklickbar */
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-gallery__gallery a,
:is(.allelon-tabs__panel, .brxe-post-content) .angebot-gallery__gallery img {
  cursor: zoom-in;
}

/* Kontaktseite (page-id-28): kein "Mehr erfahren" — die Karten zeigen die
   Kontaktinfos bereits direkt; der Aufklapp-Hinweis ist hier unnoetig.
   (Team-Karten auf /ueber-uns/ behalten ihn.) */
body.page-id-28 .card-team-member__container-info::after {
  content: none !important;
}

/* =========================================================
   VISION – "Warum ALLELON" als edle Werte-Karten
   Gilt fuer den Vision-Tab (#panel-vision, kombinierte Ueber-uns-Seite)
   und die eigenstaendige Vision-Seite (page-id-410).
   Reines CSS: der Inhalt bleibt unveraendert und immer sichtbar.
   ========================================================= */

/* Die Beschreibungs-Box aus der Einzel-Karte loesen -> zentriertes Grid */
:is(#panel-vision, #panel-leitbild, .page-id-410, .page-id-406) .leitbild__container-description {
  max-width: 960px;
}
:is(#panel-vision, #panel-leitbild, .page-id-410, .page-id-406) .leitbild__container-description .leitbild__description {
  width: 100%;
  max-width: 960px;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  text-align: left;
}

/* "Warum ALLELON" -> zentriertes Sektions-Label ueber den Karten */
:is(#panel-vision, #panel-leitbild, .page-id-410, .page-id-406) .leitbild__description h4 {
  grid-column: 1 / -1;
  margin: 0 0 2px;
  text-align: center;
  font-size: .8rem;
  letter-spacing: .26em;
  font-weight: 700;
  text-transform: uppercase;
  color: #273A8F;
}

/* Erster Absatz = Leitsatz: volle Breite, hervorgehoben mit Zitatzeichen */
:is(#panel-vision, #panel-leitbild, .page-id-410, .page-id-406) .leitbild__description p:first-of-type {
  grid-column: 1 / -1;
  margin: 0;
  position: relative;
  text-align: center;
  padding: 50px 44px 34px;
  border-radius: 22px;
  border: 1px solid rgba(39, 58, 143, .12);
  box-shadow: 0 10px 30px rgba(16, 24, 64, .08);
  background:
    radial-gradient(120% 150% at 0% 0%, rgba(120,160,255,.18), rgba(120,160,255,0) 60%),
    radial-gradient(120% 150% at 100% 0%, rgba(255,170,210,.16), rgba(255,170,210,0) 60%),
    linear-gradient(135deg, #f3f6ff 0%, #f7f2ff 55%, #ffeef5 100%);
  font-size: clamp(1.12rem, 1.1vw + .85rem, 1.4rem);
  line-height: 1.55;
  font-weight: 600;
  color: #16204d;
}
:is(#panel-vision, #panel-leitbild, .page-id-410, .page-id-406) .leitbild__description p:first-of-type::before {
  content: "\201C";
  position: absolute;
  left: 50%; top: 6px;
  transform: translateX(-50%);
  font: 700 4rem/1 Georgia, "Times New Roman", serif;
  color: rgba(39, 58, 143, .22);
}

/* Uebrige Absaetze = Werte-Karten mit Check-Badge */
:is(#panel-vision, #panel-leitbild, .page-id-410, .page-id-406) .leitbild__description p:not(:first-of-type) {
  margin: 0;
  position: relative;
  background: #ffffff;
  border: 1px solid rgba(39, 58, 143, .10);
  border-radius: 18px;
  padding: 26px 26px 26px 64px;
  box-shadow: 0 6px 20px rgba(16, 24, 64, .06);
  font-size: .98rem;
  line-height: 1.65;
  color: #2a2f45;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
:is(#panel-vision, #panel-leitbild, .page-id-410, .page-id-406) .leitbild__description p:not(:first-of-type):hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(16, 24, 64, .10);
  border-color: rgba(39, 58, 143, .22);
}
:is(#panel-vision, #panel-leitbild, .page-id-410, .page-id-406) .leitbild__description p:not(:first-of-type)::before {
  content: "";
  position: absolute;
  left: 22px; top: 24px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #273A8F url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
  box-shadow: 0 4px 10px rgba(39, 58, 143, .30);
}

/* Kontakt-Button (per JS unter die Kacheln verschoben) mittig ausrichten.
   Der Container ist flex-direction:column mit align-items:flex-start – daher
   den Button per align-items:center horizontal mittig setzen. */
:is(#panel-vision, #panel-leitbild, .page-id-410, .page-id-406) .leitbild__inner-container-info > .leitbild__btn-container {
  width: 100% !important;
  align-self: stretch !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 8px auto 0 !important;
}

@media (max-width: 720px) {
  :is(#panel-vision, #panel-leitbild, .page-id-410, .page-id-406) .leitbild__container-description .leitbild__description {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  :is(#panel-vision, #panel-leitbild, .page-id-410, .page-id-406) .leitbild__description p:first-of-type {
    padding: 44px 24px 28px;
  }
  :is(#panel-vision, #panel-leitbild, .page-id-410, .page-id-406) .leitbild__description p:not(:first-of-type) {
    padding: 22px 22px 22px 58px;
  }
}

/* =========================================================
   ANGEBOTSSEITEN — EINHEITLICHES LAYOUT ("durchgezogen")
   Ein ruhiges, konsistentes Raster ueber ALLE Angebots-Detailseiten
   (body.single-angebot), unabhaengig davon, welche Bricks-Sektionen
   eine Seite verwendet:
     1) gleicher Sektions-Rhythmus: abwechselnd Weiss / Hellblau
     2) einheitliche, groszuegige Abstaende
     3) zentrierte Section-Header mit Akzentlinie
   Der grosse Bild-Hero (global-hero) liegt VOR .brxe-post-content
   und bleibt unberuehrt.
   ========================================================= */

/* 1) + 2) Rhythmus & Abstaende: jede Inhalts-Sektion gleich, abwechselnd hell.
   Das !important neutralisiert zugleich die uneinheitlichen Mesh-/Farb-
   Hintergruende einzelner Sektionen -> ruhiges, konsistentes Bild. */
:is(body.single-angebot, body.page-id-597 .allelon-tabs__panel) .brxe-post-content section.brxe-section {
  background: #ffffff !important;
  padding: clamp(52px, 6.5vw, 92px) 24px !important;
}
:is(body.single-angebot, body.page-id-597 .allelon-tabs__panel) .brxe-post-content section.brxe-section:nth-of-type(even) {
  background: #f4f6fc !important;
}
/* dezente Trennlinie zwischen gleichfarbigen Uebergaengen vermeiden -> keine */
:is(body.single-angebot, body.page-id-597 .allelon-tabs__panel) .brxe-post-content section.brxe-section > .brxe-container,
:is(body.single-angebot, body.page-id-597 .allelon-tabs__panel) .brxe-post-content section.brxe-section > [class*="__container"] {
  max-width: 1180px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 3) Section-Header konsequent zentriert.
   Fliesstext/Header werden mittig ausgerichtet; mehrspaltige bzw. Listen-
   Bloecke werden weiter unten wieder linksbuendig gestellt. */
:is(body.single-angebot, body.page-id-597 .allelon-tabs__panel) .brxe-post-content section.brxe-section {
  text-align: center;
}
:is(body.single-angebot, body.page-id-597 .allelon-tabs__panel) .brxe-post-content [class*="__tagline"] {
  text-align: center !important;
}

/* Akzentlinie unter jeder Section-Ueberschrift
   (dunkle Info-Sektion ausgenommen: dort bleibt der helle Card-Look). */
:is(body.single-angebot, body.page-id-597 .allelon-tabs__panel) .brxe-post-content section.brxe-section:not(.angebot-info) h2.brxe-heading {
  text-align: center !important;
  position: relative;
  padding-bottom: 20px !important;
}
:is(body.single-angebot, body.page-id-597 .allelon-tabs__panel) .brxe-post-content section.brxe-section:not(.angebot-info) h2.brxe-heading::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: 54px; height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(39,58,143,0), #273A8F 50%, rgba(39,58,143,0));
}

/* Lead-/Intro-Absaetze mittig, angenehme Lesebreite */
:is(body.single-angebot, body.page-id-597 .allelon-tabs__panel) .brxe-post-content section.brxe-section > .brxe-container > [class*="__container-info"] > p,
:is(body.single-angebot, body.page-id-597 .allelon-tabs__panel) .brxe-post-content section.brxe-section > [class*="__container"] [class*="__description"]:first-of-type {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* Mehrspaltige / listenbasierte Bloecke: Fliesstext wieder linksbuendig,
   damit laengere Texte gut lesbar bleiben. Karten selbst sind zentriert. */
:is(body.single-angebot, body.page-id-597 .allelon-tabs__panel) .brxe-post-content .content08__container,
:is(body.single-angebot, body.page-id-597 .allelon-tabs__panel) .brxe-post-content .angebot-contact__container,
:is(body.single-angebot, body.page-id-597 .allelon-tabs__panel) .brxe-post-content .angebot-timeline li,
:is(body.single-angebot, body.page-id-597 .allelon-tabs__panel) .brxe-post-content .angebot-timeline article,
:is(body.single-angebot, body.page-id-597 .allelon-tabs__panel) .brxe-post-content .faq__item,
:is(body.single-angebot, body.page-id-597 .allelon-tabs__panel) .brxe-post-content .accordion-title-wrapper,
:is(body.single-angebot, body.page-id-597 .allelon-tabs__panel) .brxe-post-content .accordion-content-wrapper {
  text-align: left;
}

/* Preis-Karten auf hellblauen Baendern klar abheben (weiss statt fast-gleich) */
:is(body.single-angebot, body.page-id-597 .allelon-tabs__panel) .brxe-post-content section.brxe-section:nth-of-type(even) .angebot-price .brxe-container {
  background: #ffffff !important;
}

/* Button-Container in den Angebots-Sektionen mittig (passend zu den
   zentrierten Headern) – ausgenommen die 2-spaltige Kontakt-Sektion. */
:is(body.single-angebot, body.page-id-597 .allelon-tabs__panel) .brxe-post-content section.brxe-section:not(.angebot-contact) [class*="__btn-container"],
:is(body.single-angebot, body.page-id-597 .allelon-tabs__panel) .brxe-post-content section.brxe-section:not(.angebot-contact) [class*="__container-btn"] {
  display: flex !important;
  justify-content: center !important;
  width: 100%;
}

/* =========================================================
   SCHULE WEGWEISER (postid-1089) — mehr Abwechslung & Gradients
   • Sektionen wechseln staerker ab: zarte Mesh-Gradients (wie Vision/Leitbild)
   • zweite Karten-Sektion ("Unterricht und Tagesstruktur") anders dargestellt
     (horizontale Karten mit Gradient-Icon-Badge) statt Klon der ersten
   • kompaktere FAQ mit kleineren Plus-Zeichen
   • Gradient-Hover auf den Karten
   ========================================================= */

/* 1) Rhythmus mit Gradients: triangle + contact bekommen ein Mesh-Band,
   feature01/faq bleiben weiss, content08 hellblau -> deutlich abwechslungsreicher.
   (html-Prefix + Sektionsklassen fuer ausreichende Spezifitaet gegen die
   generische nth-of-type-Band-Regel.) */
:is(body.postid-1089, #panel-schule-wegweiser) .brxe-post-content section.brxe-section.angebot-triangle,
:is(body.postid-1089, #panel-schule-wegweiser) .brxe-post-content section.brxe-section.angebot-contact {
  background:
    radial-gradient(55% 65% at 8% 12%, rgba(120,160,255,.24), transparent 62%),
    radial-gradient(52% 60% at 92% 16%, rgba(255,170,210,.22), transparent 62%),
    radial-gradient(60% 72% at 82% 96%, rgba(180,150,255,.22), transparent 62%),
    linear-gradient(135deg, #f4f7ff 0%, #f7f2ff 55%, #ffeef6 100%) !important;
}
:is(body.postid-1089, #panel-schule-wegweiser) .brxe-post-content section.brxe-section.faq {
  background: #ffffff !important;
}
/* feature01 als eigenes hellblaues Band -> klare Trennung vom weissen
   Intro-Block ("Schule Wegweiser – Eine Schule, die traegt") darueber. */
:is(body.postid-1089, #panel-schule-wegweiser) .brxe-post-content section.brxe-section.feature01,
:is(body.postid-1089, #panel-schule-wegweiser) .brxe-post-content section.brxe-section.content08 {
  background: #f4f6fc !important;
}

/* 2) Zweite Karten-Sektion klar anders: horizontale Karten, 2 Spalten,
   Icon in Gradient-Badge links, Text linksbuendig.
   (Hohe Spezifitaet gegen die doppelten generischen 3-Spalten-Regeln.) */
:is(body.postid-1089, #panel-schule-wegweiser) .brxe-post-content section.angebot-triangle .angebot-triangle__list {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  max-width: 960px;
  margin-left: auto !important;
  margin-right: auto !important;
}
@media (max-width: 760px) {
  :is(body.postid-1089, #panel-schule-wegweiser) .brxe-post-content section.angebot-triangle .angebot-triangle__list {
    grid-template-columns: 1fr !important;
  }
}
:is(body.postid-1089, #panel-schule-wegweiser) .brxe-post-content .angebot-triangle__list article {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  column-gap: 16px !important;
  row-gap: 4px !important;
  align-items: start !important;
  text-align: left !important;
  padding: 22px 24px !important;
}
/* Icon-Badge: Spalte 1, ueber beide Zeilen, vertikal mittig */
:is(body.postid-1089, #panel-schule-wegweiser) .brxe-post-content .angebot-triangle__list article > div:first-child {
  grid-column: 1 !important;
  grid-row: 1 / 3 !important;
  align-self: center !important;
  width: 48px; height: 48px;
  margin: 0 !important;
  border-radius: 50%;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #3a5bd9 0%, #7b5fe0 100%) !important;
  box-shadow: 0 8px 18px rgba(59,74,180,.32);
}
:is(body.postid-1089, #panel-schule-wegweiser) .brxe-post-content .angebot-triangle__list article > div:first-child i,
:is(body.postid-1089, #panel-schule-wegweiser) .brxe-post-content .angebot-triangle__list article > div:first-child .brxe-icon {
  color: #ffffff !important;
  font-size: 1.2rem !important;
  margin: 0 !important;
}
/* Titel: Spalte 2, Zeile 1, volle Breite -> keine Umbrueche */
:is(body.postid-1089, #panel-schule-wegweiser) .brxe-post-content .angebot-triangle__list article h3 {
  grid-column: 2 !important;
  grid-row: 1 !important;
  text-align: left !important;
  margin: 0 0 2px !important;
  white-space: nowrap !important;
}
/* Beschreibung: Spalte 2, Zeile 2, direkt unter dem Titel */
:is(body.postid-1089, #panel-schule-wegweiser) .brxe-post-content .angebot-triangle__list article .brxe-text-basic,
:is(body.postid-1089, #panel-schule-wegweiser) .brxe-post-content .angebot-triangle__list article p {
  grid-column: 2 !important;
  grid-row: 2 !important;
  text-align: left !important;
}
/* Auf schmalen Screens Titel wieder umbrechen lassen (kein Ueberlauf) */
@media (max-width: 620px) {
  :is(body.postid-1089, #panel-schule-wegweiser) .brxe-post-content .angebot-triangle__list article h3 {
    white-space: normal !important;
  }
}

/* 3) FAQ kompakter: Frage links, kleines Plus rechts, weniger Padding */
:is(body.postid-1089, #panel-schule-wegweiser) .brxe-post-content .faq__accordion {
  gap: 8px !important;
  max-width: 820px;
  margin-left: auto; margin-right: auto;
}
:is(body.postid-1089, #panel-schule-wegweiser) .brxe-post-content .accordion-title-wrapper,
:is(body.postid-1089, #panel-schule-wegweiser) .brxe-post-content .faq__question {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  text-align: left !important;
  padding: 14px 20px !important;
  font-size: 1rem !important;
}
:is(body.postid-1089, #panel-schule-wegweiser) .brxe-post-content .faq__answer-icon,
:is(body.postid-1089, #panel-schule-wegweiser) .brxe-post-content .accordion-title-wrapper i {
  font-size: .8rem !important;
  margin: 0 !important;
  flex: 0 0 auto;
  color: #273A8F !important;
}
:is(body.postid-1089, #panel-schule-wegweiser) .brxe-post-content .accordion-content-wrapper {
  padding: 0 20px 16px !important;
  font-size: .92rem !important;
  text-align: left !important;
}

/* 4) Gradient-Hover auf allen Karten der Seite */
:is(body.postid-1089, #panel-schule-wegweiser) .brxe-post-content .feature01__grid article,
:is(body.postid-1089, #panel-schule-wegweiser) .brxe-post-content .angebot-triangle__list article {
  transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease,
              border-color .3s ease, background .3s ease !important;
}
:is(body.postid-1089, #panel-schule-wegweiser) .brxe-post-content .feature01__grid article:hover,
:is(body.postid-1089, #panel-schule-wegweiser) .brxe-post-content .angebot-triangle__list article:hover {
  transform: translateY(-5px) !important;
  border-color: transparent !important;
  box-shadow: 0 22px 44px rgba(39,58,143,.22) !important;
  background:
    radial-gradient(100% 130% at 0% 0%, rgba(120,160,255,.20), transparent 60%),
    radial-gradient(100% 130% at 100% 100%, rgba(255,170,210,.18), transparent 60%),
    #ffffff !important;
}

/* 5) Nicht zwei gleich grosse Titel stapeln:
   Der grosse Titel oben ist der Angebots-Titel ("Schule Wegweiser – …").
   Die erste Sektion (feature01) wird zur normalen Sektion herabgestuft:
   kleinere Ueberschrift, weniger Luft nach oben -> kein zweiter "Hero". */
:is(body.postid-1089, #panel-schule-wegweiser) .brxe-post-content section.feature01 {
  padding-top: clamp(48px, 6vw, 84px) !important;
}
/* Mehr Weissraum unter dem Tab-Intro (vor der ersten Sektion) */
body.page-id-597 .allelon-tabs__panel .allelon-tab-panel__header {
  margin-bottom: clamp(30px, 4vw, 56px) !important;
}
:is(body.postid-1089, #panel-schule-wegweiser) .brxe-post-content section.feature01 h2.brxe-heading {
  font-size: clamp(1.35rem, 1.1vw + .7rem, 1.7rem) !important;
  text-align: center !important;
}
/* Header-Container ist flex-column/flex-start -> alle Elemente (Eyebrow,
   Titel, Lead) gemeinsam mittig ausrichten. */
:is(body.postid-1089, #panel-schule-wegweiser) .brxe-post-content section.feature01 .feature01__container-info {
  align-items: center !important;
}
/* Ueberschrift ist zentriert -> Akzentlinie mittig darunter */
:is(body.postid-1089, #panel-schule-wegweiser) .brxe-post-content section.feature01 h2.brxe-heading::after {
  left: 50% !important;
  transform: translateX(-50%) !important;
}

/* 6) Kopf-Karte der Triangle-Sektion ("Unterricht und Tagesstruktur")
   war linksbuendig (margin:0) -> mittig setzen. */
:is(body.postid-1089, #panel-schule-wegweiser) .brxe-post-content .angebot-triangle .feature03__container-info {
  margin-left: auto !important;
  margin-right: auto !important;
  align-self: center !important;
}

/* =========================================================
   ANGEBOTE — Gradient-Look auf ALLE Angebote uebertragen
   (kombinierte /angebote/-Tabs [page-id-597] + Einzelseiten [single-angebot])
   • Mesh-Gradient auf Slogan-Sektionen (Signatur-Band)
   • Gradient-Icon-Badges auf Karten
   • Gradient-Hover auf allen Karten
   ========================================================= */

/* Slogan-Sektionen als sanftes Mesh-Verlaufsband */
:is(body.single-angebot, body.page-id-597 .allelon-tabs__panel) .brxe-post-content section.brxe-section.global-slogan,
:is(body.single-angebot, body.page-id-597 .allelon-tabs__panel) .brxe-post-content section.brxe-section.home-slogan {
  background:
    radial-gradient(55% 65% at 8% 12%, rgba(120,160,255,.22), transparent 62%),
    radial-gradient(52% 60% at 92% 16%, rgba(255,170,210,.20), transparent 62%),
    radial-gradient(60% 72% at 82% 96%, rgba(180,150,255,.20), transparent 62%),
    linear-gradient(135deg, #f4f7ff 0%, #f7f2ff 55%, #ffeef6 100%) !important;
}

/* Karten-Icons als Gradient-Badge (Triangle hat bereits ein eigenes Badge) */
:is(body.single-angebot, body.page-id-597 .allelon-tabs__panel) .brxe-post-content :is(.feature01__grid, .feature03__grid, .angebot-feature__grid, .angebot-feature__list, .angebot-grid__list, .angebot-grid__grid, .angebot-about04__list) article .brxe-icon {
  width: 54px !important;
  height: 54px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, #3a5bd9 0%, #7b5fe0 100%) !important;
  color: #ffffff !important;
  font-size: 1.35rem !important;
  line-height: 1 !important;
  margin: 0 auto 8px !important;
  box-shadow: 0 8px 18px rgba(59,74,180,.30);
}

/* Gradient-Hover auf allen Karten */
:is(body.single-angebot, body.page-id-597 .allelon-tabs__panel) .brxe-post-content :is(.feature01__grid, .feature03__grid, .angebot-feature__grid, .angebot-feature__list, .angebot-triangle__list, .angebot-grid__list, .angebot-grid__grid, .angebot-about04__list) article {
  transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease,
              border-color .3s ease, background .3s ease !important;
}
:is(body.single-angebot, body.page-id-597 .allelon-tabs__panel) .brxe-post-content :is(.feature01__grid, .feature03__grid, .angebot-feature__grid, .angebot-feature__list, .angebot-triangle__list, .angebot-grid__list, .angebot-grid__grid, .angebot-about04__list) article:hover {
  transform: translateY(-5px) !important;
  border-color: transparent !important;
  box-shadow: 0 22px 44px rgba(39,58,143,.22) !important;
  background:
    radial-gradient(100% 130% at 0% 0%, rgba(120,160,255,.20), transparent 60%),
    radial-gradient(100% 130% at 100% 100%, rgba(255,170,210,.18), transparent 60%),
    #ffffff !important;
}

/* Verlaufs-Wash auf ALLEN Feature-/Zielgruppe-Karten – auch bei Grid-Varianten
   wie .angebot-feature__grid02 (z.B. Besuchsbegleitungen), die oben in den
   :is()-Listen fehlten und daher bisher keinen Hover-Verlauf hatten. */
:is(body.single-angebot, body.page-id-597 .allelon-tabs__panel) .brxe-post-content article.card-angebot-feature {
  transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease,
              border-color .3s ease, background .3s ease !important;
}
:is(body.single-angebot, body.page-id-597 .allelon-tabs__panel) .brxe-post-content article.card-angebot-feature:hover {
  transform: translateY(-5px) !important;
  border-color: transparent !important;
  box-shadow: 0 22px 44px rgba(39,58,143,.22) !important;
  background:
    radial-gradient(100% 130% at 0% 0%, rgba(120,160,255,.20), transparent 60%),
    radial-gradient(100% 130% at 100% 100%, rgba(255,170,210,.18), transparent 60%),
    #ffffff !important;
}
/* 4 Karten -> zentriertes 2x2 statt 3+1 (keine einzelne Karte allein in einer
   Reihe) – gilt fuer Feature-/Zielgruppe-Raster UND Paket-Raster (angebot-grid). */
:is(body.single-angebot, body.page-id-597 .allelon-tabs__panel) .brxe-post-content :is(.angebot-feature__grid, .angebot-feature__grid02, .angebot-feature__list, .angebot-grid__grid, .angebot-grid__list):has(> :last-child:nth-child(4)) {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  max-width: 940px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* 2 Karten: buendiges Paar ueber die volle Breite (statt links im 3-Spalten-
   Raster mit leerer Spalte rechts) – fluchtet mit der Info-Karte darunter. */
:is(body.single-angebot, body.page-id-597 .allelon-tabs__panel) .brxe-post-content :is(.angebot-feature__grid, .angebot-feature__grid02, .angebot-feature__list, .angebot-grid__grid, .angebot-grid__list):has(> :last-child:nth-child(2)) {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
/* Freistehende "Info"-Karte (nicht im Raster) hatte 0 Abstand zum Karten-
   Raster darueber -> Abstand ergaenzen. Nur Karten AUSSERHALB jedes Rasters
   (grid/grid02/list), damit echte Raster-Karten unberuehrt bleiben. */
:is(body.single-angebot, body.page-id-597 .allelon-tabs__panel) .brxe-post-content .angebot-feature .card-angebot-feature__wrapper:not([class*="angebot-feature__grid"] *):not(.angebot-feature__list *) {
  margin-top: 28px !important;
}

/* =========================================================
   ANGEBOT-TIMELINE — Karten im Stil der Zielgruppe-/Feature-
   Karten: Gradient-Icon-Badge OBEN zentriert, Text zentriert,
   alle Phasen als eigenstaendige Karten UNTEREINANDER (1 Spalte).
   Gilt auf kombinierter /angebote/-Seite UND Einzelseiten.
   ========================================================= */
/* Stapel: eine Spalte, mittig, angenehme Lesebreite */
:is(body.single-angebot, body.page-id-597 .allelon-tabs__panel) .brxe-post-content .angebot-timeline__timeline {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 22px !important;
  margin: 30px auto 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
/* Jede Phase = eine Feature-Karte (Icon oben, Text zentriert) */
:is(body.single-angebot, body.page-id-597 .allelon-tabs__panel) .brxe-post-content .angebot-timeline li.angebot-timeline__row {
  width: 100% !important;
  max-width: 720px !important;
  background: #ffffff !important;
  border: 1px solid rgba(39,58,143,.10) !important;
  border-radius: 18px !important;
  box-shadow: 0 6px 20px rgba(16,24,64,.06) !important;
  padding: 30px 28px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 0 !important;
  transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease,
              border-color .3s ease, background .3s ease !important;
}
/* Hover: identischer Verlaufs-Wash wie die Feature-/Zielgruppe-Karten oben */
:is(body.single-angebot, body.page-id-597 .allelon-tabs__panel) .brxe-post-content .angebot-timeline li.angebot-timeline__row:hover {
  transform: translateY(-5px) !important;
  border-color: transparent !important;
  box-shadow: 0 22px 44px rgba(39,58,143,.22) !important;
  background:
    radial-gradient(100% 130% at 0% 0%, rgba(120,160,255,.20), transparent 60%),
    radial-gradient(100% 130% at 100% 100%, rgba(255,170,210,.18), transparent 60%),
    #ffffff !important;
}
/* leerer Spacer + vertikale Linie weg */
:is(body.single-angebot, body.page-id-597 .allelon-tabs__panel) .brxe-post-content .angebot-timeline .angebot-timeline__empty,
:is(body.single-angebot, body.page-id-597 .allelon-tabs__panel) .brxe-post-content .angebot-timeline .angebot-timeline__line {
  display: none !important;
}
/* Icon-Bereich: oben, zentriert */
:is(body.single-angebot, body.page-id-597 .allelon-tabs__panel) .brxe-post-content .angebot-timeline .angebot-timeline__line-wrapper {
  width: auto !important;
  min-width: 0 !important;
  margin: 0 0 16px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
/* Icon als Gradient-Badge (identisch zu den Feature-Karten) */
:is(body.single-angebot, body.page-id-597 .allelon-tabs__panel) .brxe-post-content .angebot-timeline .angebot-timeline__icon-wrapper {
  flex: 0 0 auto !important;
  width: 54px !important;
  height: 54px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, #3a5bd9 0%, #7b5fe0 100%) !important;
  box-shadow: 0 8px 18px rgba(59,74,180,.30) !important;
}
:is(body.single-angebot, body.page-id-597 .allelon-tabs__panel) .brxe-post-content .angebot-timeline .angebot-timeline__icon {
  color: #ffffff !important;
  font-size: 1.35rem !important;
  margin: 0 !important;
}
/* Innere Text-Karte transparent (die Zeile selbst IST die Karte).
   .card-* sind Bricks-.brxe-block (flex/column, align:flex-start) ->
   align-items:center noetig, damit auch die kurze Ueberschrift mittig sitzt. */
:is(body.single-angebot, body.page-id-597 .allelon-tabs__panel) .brxe-post-content .angebot-timeline .card-angebot-timeline,
:is(body.single-angebot, body.page-id-597 .allelon-tabs__panel) .brxe-post-content .angebot-timeline .card-angebot-timeline__container {
  width: 100% !important;
  align-items: center !important;
  text-align: center !important;
}
:is(body.single-angebot, body.page-id-597 .allelon-tabs__panel) .brxe-post-content .angebot-timeline .card-angebot-timeline {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
:is(body.single-angebot, body.page-id-597 .allelon-tabs__panel) .brxe-post-content .angebot-timeline .card-angebot-timeline__heading,
:is(body.single-angebot, body.page-id-597 .allelon-tabs__panel) .brxe-post-content .angebot-timeline .card-angebot-timeline__description {
  text-align: center !important;
  width: 100% !important;
}
:is(body.single-angebot, body.page-id-597 .allelon-tabs__panel) .brxe-post-content .angebot-timeline .card-angebot-timeline__heading {
  margin: 0 0 8px !important;
}
/* leere Divi-Timeline-Reste ausblenden (Ursache des Leerraums) + Rahmen/Abstand neutralisieren */
:is(body.single-angebot, body.page-id-597 .allelon-tabs__panel) .brxe-post-content .angebot-timeline .card-angebot-timeline__description .dipi_timeline_item:not(:first-of-type) {
  display: none !important;
}
:is(body.single-angebot, body.page-id-597 .allelon-tabs__panel) .brxe-post-content .angebot-timeline .card-angebot-timeline__description .dipi_timeline_item,
:is(body.single-angebot, body.page-id-597 .allelon-tabs__panel) .brxe-post-content .angebot-timeline .card-angebot-timeline__description .et_pb_module_inner {
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}
/* Einzelseiten: Divi erzwingt bei jeder 2. Phase eine alternierende
   Reihenfolge (Icon unten) + Ribbon-Dreiecke. Vereinheitlichen:
   Icon IMMER oben, Text darunter, Deko-Dreiecke ausblenden. */
:is(body.single-angebot, body.page-id-597 .allelon-tabs__panel) .brxe-post-content .angebot-timeline .angebot-timeline__line-wrapper {
  order: 0 !important;
}
:is(body.single-angebot, body.page-id-597 .allelon-tabs__panel) .brxe-post-content .angebot-timeline .card-angebot-timeline {
  order: 1 !important;
}
:is(body.single-angebot, body.page-id-597 .allelon-tabs__panel) .brxe-post-content .angebot-timeline .dipi_timeline_ribbon,
:is(body.single-angebot, body.page-id-597 .allelon-tabs__panel) .brxe-post-content .angebot-timeline .ribbon-icon-wrap,
:is(body.single-angebot, body.page-id-597 .allelon-tabs__panel) .brxe-post-content .angebot-timeline [class*="ribbon"] {
  display: none !important;
}
/* Divi-Timeline-Pfeil (kleines Dreieck am Kartenrand) entfernen */
:is(body.single-angebot, body.page-id-597 .allelon-tabs__panel) .brxe-post-content .angebot-timeline .card-angebot-timeline::before,
:is(body.single-angebot, body.page-id-597 .allelon-tabs__panel) .brxe-post-content .angebot-timeline .card-angebot-timeline::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
}

/* =========================================================
   UEBER-UNS (page-id-17) — Tab-Titel schoener:
   elegante Verlaufs-Textfuellung (Navy -> Blau -> Violett),
   passend zum Gradient-Look der Seite.
   ========================================================= */
body.page-id-17 .allelon-tab-panel__title {
  background: linear-gradient(100deg, #16204d 0%, #2b3f9e 52%, #6d54d6 100%) !important;
  -webkit-background-clip: text !important;
          background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  letter-spacing: -.02em;
}
/* Fallback: falls background-clip nicht unterstuetzt wird, bleibt Navy sichtbar */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  body.page-id-17 .allelon-tab-panel__title {
    -webkit-text-fill-color: #16204d !important;
    color: #16204d !important;
    background: none !important;
  }
}

/* =========================================================
   UEBER-UNS (page-id-17) — Hero: Inhalt in eleganter
   Frosted-Glass-Karte statt frei ueber dem Bild.
   Bild bleibt, Text bekommt einen definierten Platz + bessere
   Lesbarkeit. Gilt nur fuer den Ueber-uns-Hero.
   ========================================================= */
/* etwas mehr Tiefe im Overlay (Verlauf) fuer Premium-Look */
:is(body.page-id-17, body.page-id-597, body.page-id-28) .global-hero__overlay {
  background:
    radial-gradient(120% 90% at 50% 40%, rgba(8,12,35,.28), rgba(8,12,35,.52) 78%),
    linear-gradient(180deg, rgba(8,12,35,.22) 0%, rgba(8,12,35,.42) 100%) !important;
}
/* Inhalt als Glas-Karte */
:is(body.page-id-17, body.page-id-597, body.page-id-28) .global-hero__container-info {
  max-width: 620px !important;
  gap: 16px !important;
  padding: clamp(30px, 3.5vw, 50px) clamp(26px, 3.5vw, 52px) !important;
  background: rgba(14, 20, 48, .22);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
          backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 26px;
  box-shadow: 0 30px 70px rgba(8, 12, 40, .38);
}
/* Beschreibung: volle Kartenbreite nutzen, angenehm lesbar */
:is(body.page-id-17, body.page-id-597, body.page-id-28) .global-hero__description,
:is(body.page-id-17, body.page-id-597, body.page-id-28) .global-hero__description p {
  max-width: 100% !important;
  font-size: 1.02rem !important;
  line-height: 1.65 !important;
  color: rgba(255, 255, 255, .92) !important;
}
:is(body.page-id-17, body.page-id-597, body.page-id-28) .global-hero__heading {
  max-width: 100% !important;
}

/* =========================================================
   SCHULE WEGWEISER — content08 ("Projektorientiertes Lernen")
   zentriert (statt 2-spaltig) + moderne Check-Chips mit
   Gradient-Badge statt flacher blauer Kreis-Icons.
   ========================================================= */
:is(#panel-schule-wegweiser, body.postid-1089) .brxe-post-content .content08__container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  max-width: 860px !important;
  margin: 0 auto !important;
  gap: 6px !important;
}
:is(#panel-schule-wegweiser, body.postid-1089) .brxe-post-content .content08__container-info {
  text-align: center !important;
  max-width: 720px !important;
  margin: 0 auto !important;
  align-items: center !important;
}
/* Ueberschrift/Eyebrow im flex-column-Container mittig */
:is(#panel-schule-wegweiser, body.postid-1089) .brxe-post-content .content08__container-info > * {
  align-self: center !important;
}
:is(#panel-schule-wegweiser, body.postid-1089) .brxe-post-content .content08__description {
  margin-left: auto !important;
  margin-right: auto !important;
}
/* Checkliste als zentrierte Chip-Reihe */
:is(#panel-schule-wegweiser, body.postid-1089) .brxe-post-content .content08__container-features {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  margin-top: 22px !important;
}
:is(#panel-schule-wegweiser, body.postid-1089) .brxe-post-content .content08__list {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: 960px !important;
  list-style: none !important;
}
:is(#panel-schule-wegweiser, body.postid-1089) .brxe-post-content .content08__list-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: #ffffff !important;
  border: 1px solid rgba(39,58,143,.10) !important;
  border-radius: 999px !important;
  padding: 9px 18px 9px 10px !important;
  margin: 0 !important;
  box-shadow: 0 4px 14px rgba(16,24,64,.05) !important;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
}
:is(#panel-schule-wegweiser, body.postid-1089) .brxe-post-content .content08__list-item:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(39,58,143,.22) !important;
  box-shadow: 0 10px 22px rgba(39,58,143,.14) !important;
}
/* Modernes Gradient-Check-Badge (fa-check im Gradient-Kreis) */
:is(#panel-schule-wegweiser, body.postid-1089) .brxe-post-content .content08__list-icon {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, #3a5bd9 0%, #7b5fe0 100%) !important;
  color: #ffffff !important;
  font-size: .72rem !important;
  box-shadow: 0 4px 10px rgba(59,74,180,.28) !important;
}
:is(#panel-schule-wegweiser, body.postid-1089) .brxe-post-content .content08__list-icon::before {
  content: "\2713" !important;   /* Unicode-Haken (nicht FA-Subset) */
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-weight: 700 !important;
  font-size: .82rem !important;
  color: #ffffff !important;
  line-height: 1 !important;
}
:is(#panel-schule-wegweiser, body.postid-1089) .brxe-post-content .content08__item-info {
  margin: 0 !important;
  font-weight: 600 !important;
  color: #16204d !important;
  white-space: nowrap !important;
}

/* =========================================================
   ANGEBOTE — Section-Header/Content konsequent zentrieren
   Viele Header liegen in flex-column/flex-start-Containern und
   sind dadurch linksbuendig. Hier werden die Header-Container
   mittig gestellt (Timeline & 2-spaltige Kontakt-Sektion aus-
   genommen). Behebt Zielgruppe, Beschreibung, Arbeitsweise …
   ========================================================= */
:is(body.single-angebot, body.page-id-597 .allelon-tabs__panel) .brxe-post-content section.brxe-section:not(.angebot-timeline):not(.angebot-contact) :is(
  [class*="__container-info"],
  [class*="__inner-container"],
  [class*="__container-heading"],
  .angebot-feature__container,
  .global-content__container,
  .feature03__container
) {
  align-items: center !important;
  text-align: center !important;
}
/* Grids/Listen trotz zentriertem Container voll nutzbar */
:is(body.single-angebot, body.page-id-597 .allelon-tabs__panel) .brxe-post-content section.brxe-section:not(.angebot-timeline):not(.angebot-contact) [class*="__grid"],
:is(body.single-angebot, body.page-id-597 .allelon-tabs__panel) .brxe-post-content section.brxe-section:not(.angebot-timeline):not(.angebot-contact) [class*="__list"] {
  width: 100% !important;
}
/* Beschreibungs-/Fliesstexte zentriert mit angenehmer Lesebreite */
:is(body.single-angebot, body.page-id-597 .allelon-tabs__panel) .brxe-post-content section.brxe-section:not(.angebot-timeline):not(.angebot-contact) [class*="__description"] {
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 760px !important;
}

/* =========================================================
   SPF — Zielgruppe-Kacheln: kleiner, zentriertes 2-Spalten-Grid
   (5 Karten -> 2 / 2 / 1, letzte mittig)
   ========================================================= */
:is(#panel-sozialpaedagogische-familienbegleitung, body.postid-454) .brxe-post-content .angebot-feature__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important;
  max-width: 760px !important;
  margin: 26px auto 0 !important;
}
@media (max-width: 640px) {
  :is(#panel-sozialpaedagogische-familienbegleitung, body.postid-454) .brxe-post-content .angebot-feature__grid {
    grid-template-columns: 1fr !important;
  }
}
:is(#panel-sozialpaedagogische-familienbegleitung, body.postid-454) .brxe-post-content .angebot-feature__grid article {
  padding: 22px 20px !important;
  gap: 8px !important;
}
:is(#panel-sozialpaedagogische-familienbegleitung, body.postid-454) .brxe-post-content .angebot-feature__grid > li:last-child:nth-child(odd) {
  grid-column: 1 / -1 !important;
  max-width: 372px !important;
  justify-self: center !important;
  width: 100% !important;
}

/* =========================================================
   MOBILE/TABLET FIX — kein horizontales Scrollen mehr.
   Diverse Bricks-Container/Hero-/Text-Wrapper haben fixe px-Breiten
   bzw. max-width:1180px/880px !important (fuer die Desktop-Zentrierung).
   Unterhalb dieser Breiten ragte das ueber den Bildschirm hinaus ->
   hier auf volle Viewport-Breite zuruecksetzen.
   ========================================================= */
@media (max-width: 1180px) {
  /* Off-Canvas-Menu (Hamburger) liegt geschlossen rechts ausserhalb des
     Viewports und erzeugte horizontales Scrollen. overflow-x:clip kappt das
     (im Gegensatz zu :hidden OHNE den Sticky-Header zu brechen). */
  html, body { overflow-x: clip !important; }
  /* Layout-Container + Sektionen (auch ausserhalb der Tab-Panels, z.B. Hero) */
  main .brxe-container,
  main section[class*="brxe-section"],
  [class*="global-hero__container"],
  [class*="__container-info"],
  [class*="__inner-container"] {
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Text-Bloecke mit fixer max-width -> voll umbrechen */
  [class*="__description"],
  [class*="__heading"],
  [class*="__tagline"],
  [class*="__slogan"],
  .global-hero__description {
    max-width: 100% !important;
  }
  /* seitliches Padding fuer die Inhalts-Container (Header/Footer ausgenommen) */
  main :is(.allelon-tabs__panel, .brxe-post-content) .brxe-container {
    padding-left: clamp(16px, 4vw, 28px) !important;
    padding-right: clamp(16px, 4vw, 28px) !important;
  }
}
/* Karten-Raster auf schmalen Screens einspaltig & zentriert.
   :not(#_) hebt die Spezifitaet auf ID-Niveau, damit diese Regel die
   2x2-/2er-Anti-Orphan-Regeln (die per :has() hoehere Spezifitaet haben)
   auf dem Handy sicher ueberschreibt. */
@media (max-width: 640px) {
  :is(.allelon-tabs__panel, .brxe-post-content) :is(
    .angebot-feature__grid, .angebot-feature__grid02, .angebot-feature__list,
    .angebot-grid__grid, .angebot-grid__list, .feature01__grid, .feature03__grid,
    .angebot-triangle__list):not(#_) {
    grid-template-columns: 1fr !important;
    max-width: 460px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* KJA-Tarif-Link auf der Preis-Karte (weisser Text auf blauem Grund) */
.angebot-price__tarif-link { margin-top: 14px; text-align: center; }
.angebot-price__tarif-link a { color: #ffffff; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; opacity: .92; }
.angebot-price__tarif-link a:hover { opacity: 1; }