/* Modern Bridge für die bestehenden Ayurveda-Unterseiten.
   Header und Footer bleiben unverändert. */

/* Modern Bridge: wirkt nur im Inhaltsbereich, Header und Footer bleiben unverändert */
  .modern-bridge {
    --bridge-forest: #213c34;
    --bridge-sage: #7f9585;
    --bridge-cream: #f6f1e8;
    --bridge-paper: #fffdf9;
    --bridge-clay: #b9684f;
    --bridge-text: #3f4b45;
    --bridge-muted: #68736d;
    --bridge-line: #dedfd8;
    background: var(--bridge-paper);
  }

  .modern-bridge main {
    background: var(--bridge-paper);
    color: var(--bridge-text);
    overflow: hidden;
  }

  .modern-bridge main .wrapper {
    max-width: 1160px;
  }

  .modern-bridge main .wrapper .wrapper {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
  }

  .modern-bridge main .fwSlider {
    max-height: 640px;
    overflow: hidden;
    background: var(--bridge-forest);
  }

  .modern-bridge main .fwSlider .carousel-cell,
  .modern-bridge main .fwSlider .carousel-cell a {
    width: 100%;
    height: clamp(390px, 52vw, 640px);
  }

  .modern-bridge main .fwSlider .carousel-cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right center;
  }

  .modern-bridge main .brochureOrder {
    top: 0;
    padding: 0;
    background: var(--bridge-clay);
    overflow: hidden;
    transition: background-color .25s ease, box-shadow .25s ease;
  }

  .modern-bridge main .brochureOrder > a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 64px;
    padding: 14px 22px;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
  }

  .modern-bridge main .brochureOrder h2 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    font: 18px/1.45 Helvetica, Arial, sans-serif;
    letter-spacing: .01em;
    text-transform: none;
    transition: transform .25s ease;
  }

  .modern-bridge main .brochureOrder h2::after {
    content: "→";
    display: inline-grid;
    place-items: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255,255,255,.7);
    border-radius: 50%;
    font: 20px/1 Helvetica, Arial, sans-serif;
    transition: transform .25s ease, background-color .25s ease, color .25s ease;
  }

  .modern-bridge main .brochureOrder:hover,
  .modern-bridge main .brochureOrder:focus-within {
    background: #a95640;
    box-shadow: 0 10px 28px rgba(91,45,34,.2);
  }

  .modern-bridge main .brochureOrder:hover h2,
  .modern-bridge main .brochureOrder:focus-within h2 {
    transform: translateY(-1px);
  }

  .modern-bridge main .brochureOrder:hover h2::after,
  .modern-bridge main .brochureOrder:focus-within h2::after {
    transform: translateX(4px);
    background: #fff;
    color: var(--bridge-clay);
  }

  .modern-bridge main .brochureOrder > a:focus-visible {
    outline: 3px solid #fff !important;
    outline-offset: -5px;
  }

  .modern-bridge main > .wrapper:first-of-type {
    padding-top: 70px;
    padding-bottom: 55px;
  }

  .modern-bridge main > .wrapper:first-of-type > center {
    display: block;
    max-width: 860px;
    margin: 0 auto;
  }

  .modern-bridge main h1 {
    color: var(--bridge-forest);
    font: 400 clamp(42px, 5vw, 66px)/1.08 "Alverata Medium", sans-serif;
    letter-spacing: -.02em;
    margin-bottom: 25px;
  }

  .modern-bridge main h2,
  .modern-bridge main h3 {
    color: var(--bridge-forest);
  }

  .modern-bridge main h3.punkt25 {
    color: var(--bridge-clay);
    font: 500 13px/1.4 Helvetica, Arial, sans-serif;
    letter-spacing: .15em;
    text-transform: uppercase;
    margin-bottom: 22px;
  }

  .modern-bridge main p,
  .modern-bridge main p.small,
  .modern-bridge main p.alL {
    color: var(--bridge-text);
    font: 18px/1.65 "Alverata Light", sans-serif;
  }

  .modern-bridge main > .wrapper:first-of-type > center > p.small {
    max-width: 780px;
    margin: 0 auto;
    font-size: 21px;
    line-height: 1.6;
    color: var(--bridge-muted);
  }

  .modern-bridge main a {
    color: var(--bridge-clay);
    text-decoration-color: rgba(185,104,79,.45);
    text-underline-offset: 3px;
  }

  .modern-bridge main a:hover {
    color: var(--bridge-forest);
  }

  .modern-bridge main p.padding-10-bottom,
  .modern-bridge main .halfFlex > div > p.padding-10-bottom {
    padding: 0 0 14px;
    color: var(--bridge-forest);
    font: 400 27px/1.25 "Alverata Medium", sans-serif;
  }

  .modern-bridge main .wrapper .wrapper {
    margin-top: 45px;
    padding: 34px;
    border: 1px solid var(--bridge-line);
    border-radius: 18px;
    background: var(--bridge-cream);
  }

  .modern-bridge main .wrapper .wrapper h2 p {
    color: var(--bridge-forest);
    font: 400 30px/1.25 "Alverata Medium", sans-serif;
  }

  .modern-bridge main .halfFlex {
    align-items: center;
    gap: 55px;
    margin-top: 28px;
    margin-bottom: 70px;
    padding: 0;
  }

  .modern-bridge main .halfFlex > div,
  .modern-bridge main .halfFlex > section,
  .modern-bridge main .halfFlex > article {
    width: calc(50% - 28px);
  }

  .modern-bridge main .halfFlex img,
  .modern-bridge main > .wrapper > img {
    border-radius: 18px;
    box-shadow: 0 16px 42px rgba(33,60,52,.09);
  }

  .modern-bridge main .halfFlex > div > p.small:not(.padding-10-bottom) {
    color: var(--bridge-muted);
  }

  .modern-bridge main .halfFlex > div > img + p.small {
    padding: 12px 3px 0;
    font-size: 14px;
    line-height: 1.5;
  }

  .modern-bridge main .signet {
    margin: 10px auto 42px;
    opacity: .55;
  }

  .modern-bridge main .signet img {
    width: 72px;
  }

  .modern-bridge main .spacer-dynamic-large {
    height: 55px;
  }

  @media screen and (max-width: 767px) {
    .modern-bridge main > .wrapper:first-of-type {
      padding-top: 45px;
      padding-bottom: 35px;
    }

    .modern-bridge main .fwSlider .carousel-cell,
    .modern-bridge main .fwSlider .carousel-cell a {
      height: 430px;
    }

    .modern-bridge main h1 {
      font-size: 40px;
    }

    .modern-bridge main > .wrapper:first-of-type > center > p.small {
      font-size: 18px;
    }

    .modern-bridge main .wrapper .wrapper {
      margin-top: 30px;
      padding: 24px 20px;
    }

    .modern-bridge main .halfFlex {
      display: block;
      margin-bottom: 48px;
    }

    .modern-bridge main .halfFlex > div,
    .modern-bridge main .halfFlex > section,
    .modern-bridge main .halfFlex > article {
      width: 100%;
      margin-bottom: 28px;
    }

    .modern-bridge main p.padding-10-bottom,
    .modern-bridge main .halfFlex > div > p.padding-10-bottom {
      font-size: 24px;
    }

    .modern-bridge main .brochureOrder h2 {
      font-size: 16px;
    }

    .modern-bridge main .brochureOrder > a {
      min-height: 58px;
      padding: 12px 16px;
    }

    .modern-bridge main .brochureOrder h2::after {
      flex-basis: 30px;
      width: 30px;
      height: 30px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .modern-bridge main .brochureOrder,
    .modern-bridge main .brochureOrder h2,
    .modern-bridge main .brochureOrder h2::after {
      transition: none;
    }
  }