@media (max-width: 767px) {
  /* Keep the illustrated workflow readable at phone width. */
  html body #funktionen .feat::before, html.modus-hell body #funktionen .feat::before {
    mask-image: linear-gradient(to bottom, transparent 15%, rgba(0,0,0,.12) 42%, #000 70%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 15%, rgba(0,0,0,.12) 42%, #000 70%);
  }
  html #f2 .feat-stage > .fc .fc-row { flex-wrap: nowrap; gap: 8px; align-items: center; }
  html #f2 .feat-stage > .fc .fc-row > b { flex: 1 1 0; min-width: 0; }
  html #f2 .feat-stage > .fc .fc-row > .st { flex: 0 0 auto; width: auto; }
  html #f2 .feat-stage > .fc { padding: 18px; }
  html #f2 .kette { padding-left: 0; gap: 10px; }
  html #f2 .kette .fc.mod {
    width: 100%; padding: 16px 18px 16px 32px;
    flex-direction: column; align-items: stretch; gap: 5px;
  }
  html #f2 .kette .mod h4 { flex: none; font-size: 16px; line-height: 1.3; }
  html #f2 .kette .mod .stat { flex: none; font-size: 14px; line-height: 1.45; min-height: 2.9em; }
  html #f2 .kette .bahn { left: 14px; z-index: 2; pointer-events: none; }
  html #f2 .kette .bahn i {
    left: -1px; width: 4px; height: 24px; border-radius: 4px;
    transform: translateY(-7px); background: var(--accent-glow, #22a393);
    box-shadow: 0 0 8px rgba(34,163,147,.3);
  }
  /* Portrait crops cover the card instead of shrinking into a bottom stripe. */
  html #nutzen::before, html.modus-hell #nutzen::before,
  html :is(#funktionen, #ventures) .feat::before,
  html.modus-hell :is(#funktionen, #ventures) .feat::before {
    inset: 0;
    width: 100%; height: 100%;
    background-size: auto 100%; background-position: 60% center;
    mask-image: linear-gradient(to bottom, transparent, #000 30%, #000);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%, #000);
  }
  html #nutzen::before, html.modus-hell #nutzen::before { opacity: .35; }
  html .fakt--gipfel::after, html .fakt--kette::after {
    inset: 0; width: 100%; height: 100%;
    background-size: auto 150%; background-position: 65% center;
    opacity: .22;
    mask-image: linear-gradient(to bottom, transparent, #000);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000);
  }
  html .hero .wrap.hero-grid::before,
  html .hero .wrap.hero-grid > .bg-film--hero {
    top: 0; bottom: 0; height: 100%;
  }
  /* Two expandable cards replace the uninterrupted, two-screen OS vault. */
  html #elg-os.mobile-os {
    background: transparent; padding: 0; overflow: visible;
  }
  html #elg-os.mobile-os::before { display: none; }
  #elg-os.mobile-os > .wrap { padding-inline: 0; }
  #elg-os.mobile-os .sec-head {
    position: relative; overflow: hidden; isolation: isolate;
    background: var(--mint-band); border-radius: 24px;
    padding: 28px 24px; margin-bottom: 16px;
  }
  #elg-os.mobile-os .sec-head::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: url('art-berge-tal-hell.webp') 55% center / auto 140% no-repeat;
    mix-blend-mode: multiply; opacity: .18;
  }
  html:not(.modus-hell) #elg-os.mobile-os .sec-head { background: #141414; }
  html:not(.modus-hell) #elg-os.mobile-os .sec-head::before {
    background-image: url('art-berge-tal.webp'); mix-blend-mode: normal;
  }
  #elg-os.mobile-os .os-lauf-text { min-height: var(--mobile-caption-height, 102px); }
  #elg-os.mobile-os .os-buehne { margin-top: 0; scroll-margin-top: 20px; }
  #elg-os.mobile-os .os-lauf:has(#osLaufText:empty) { display: none; }
  #elg-os.mobile-os .mobile-os-group {
    background: var(--mint-band); border-radius: 24px; margin-top: 12px; overflow: hidden;
  }
  html:not(.modus-hell) #elg-os.mobile-os .mobile-os-group { background: #141414; }
  #elg-os.mobile-os summary {
    display: flex; align-items: center; gap: 12px; cursor: pointer;
    position: relative; padding: 22px 38px; list-style: none; color: var(--ink);
  }
  #elg-os.mobile-os summary::-webkit-details-marker { display: none; }
  #elg-os.mobile-os summary > span { flex: 1; min-width: 0; text-align: center; }
  #elg-os.mobile-os summary strong { display: block; font-size: 20px; font-weight: 500; }
  #elg-os.mobile-os .mobile-os-sub { display: block; margin-top: 8px; font-size: 14px; line-height: 1.5; }
  #elg-os.mobile-os summary::after { content: '+'; position: absolute; right: 14px; font-size: 24px; width: 18px; }
  #elg-os.mobile-os details[open] > summary::after { content: '−'; }
  html:not(.modus-hell) #elg-os.mobile-os summary { color: #fff; }
  #elg-os.mobile-os .os-oben { padding: 16px; gap: 12px; }
  #elg-os.mobile-os .flow { padding: 20px; }
  #elg-os.mobile-os .flow-ico { width: 44px; height: 44px; margin-bottom: 10px; }
  #elg-os.mobile-os .os-sockel { margin: 0; padding: 16px; background: transparent; }
  #elg-os.mobile-os .os-sockel-kopf { display: none; }
  #elg-os.mobile-os .os-module { gap: 10px; }
  #elg-os.mobile-os .os-modul { padding: 16px 12px; opacity: 1; }
  #elg-os.mobile-os summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -5px; border-radius: 24px; }
}