/* Mobil-Erlebnis (26.10.2026), nur bis 760 px. Gehört zu /assets/js/mobil-erlebnis.js.
   Alle Regeln hängen an html.me-an, das setzt erst das Skript. Ohne Skript bleibt die Seite wie bisher. */
@media (max-width: 760px) {

  /* ---------- Kino-Hero: großes Bild, Text darauf. Reines CSS, damit nichts springt.
     Das Bild setzt jede Seite als --me-held im Kopf. ---------- */
  main section:has(h1) {
    position: relative !important;
    isolation: isolate;
    overflow: hidden !important;
    background: var(--navy-900) !important;
    padding-top: calc(var(--me-held-h, 50svh) - 130px) !important;
    padding-bottom: 34px !important;
    min-height: 0 !important;
    color: #fff;
  }
  main section:has(h1)::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 0 auto 0 !important;
    height: var(--me-held-h, 50svh) !important;
    width: auto !important;
    background:
      linear-gradient(180deg, rgba(12, 32, 51, 0.55) 0%, rgba(12, 32, 51, 0) 22%, rgba(12, 32, 51, 0) 42%, rgba(12, 32, 51, 0.82) 78%, #0c2033 100%),
      var(--me-held) center 38% / cover no-repeat !important;
    z-index: -1 !important;
    opacity: 1 !important;
    transform-origin: 60% 40%;
    animation: me-zoom 14s ease-out both;
    border: 0 !important;
    border-radius: 0 !important;
    filter: none !important;
    mask: none !important;
    -webkit-mask: none !important;
  }
  main section:has(h1)::after {
    content: "Symbolbild" !important;
    position: absolute !important;
    top: calc(var(--nav-h, 72px) + 10px) !important;
    right: 14px !important;
    left: auto !important;
    bottom: auto !important;
    width: auto !important;
    height: auto !important;
    background: none !important;
    font: 500 10px/1 var(--body);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    z-index: 0 !important;
    opacity: 1 !important;
    transform: none !important;
    border: 0 !important;
  }
  @keyframes me-zoom { from { transform: scale(1.1); } to { transform: scale(1); } }

  /* alles neben der Textspalte ausblenden (Mockups, Fotos, Dekor), die Textspalte bleibt */
  main section:has(h1):not(:has(> h1)) > :not(:has(h1)),
  main section:has(h1) *:has(h1):not(:has(> h1)) > :not(:has(h1)) {
    display: none !important;
  }
  main section:has(h1) *:has(h1) {
    background: none !important;
    box-shadow: none !important;
    border: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: none !important;
    width: auto !important;
    min-height: 0 !important;
    display: block !important;
    transform: none !important;
  }
  main section:has(h1) :has(> h1) { padding: 0 16px !important; position: relative; z-index: 1; }
  main section:has(h1) h1 {
    color: #fff !important;
    font-size: clamp(34px, 9.6vw, 42px) !important;
    line-height: 1.06 !important;
    letter-spacing: -0.015em;
    text-shadow: 0 2px 24px rgba(12, 32, 51, 0.55);
    margin: 0 0 12px !important;
    text-wrap: balance;
    hyphens: auto;
    -webkit-hyphens: auto;
    overflow-wrap: break-word;
  }
  main section:has(h1) h1 + p:not(.me-offen) {
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    cursor: pointer;
  }
  main section:has(h1) h1 em,
  main section:has(h1) h1 span { color: #f1cd86 !important; }
  main section:has(h1) :has(> h1) > p,
  main section:has(h1) :has(> h1) > div > p,
  main section:has(h1) :has(> h1) li {
    color: rgba(255, 255, 255, 0.84) !important;
  }
  main section:has(h1) :has(> h1) > p:first-child,
  main section:has(h1) .p4-kicker {
    color: #f1cd86 !important;
    text-shadow: 0 1px 12px rgba(12, 32, 51, 0.6);
  }
  main section:has(h1) a:not(.btn):not([class*="btn"]) { color: #fff !important; }
  main section:has(h1) .btn,
  main section:has(h1) [class*="btn-gold"] {
    display: flex !important;
    justify-content: center;
    width: 100% !important;
    min-height: 54px;
    align-items: center;
    font-size: 16px !important;
    box-shadow: 0 10px 30px rgba(232, 189, 106, 0.28) !important;
  }
  main section:has(h1) [class*="actions"],
  main section:has(h1) [class*="aktionen"],
  main section:has(h1) [class*="cta"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    margin-top: 20px !important;
  }
  main section:has(h1) [class*="actions"] > a:not(.btn),
  main section:has(h1) [class*="aktionen"] > a:not(.btn) { align-self: center; }
  main section:has(h1) small,
  main section:has(h1) [class*="hinweis"] { color: rgba(255, 255, 255, 0.62) !important; }
  main section:has(h1) .me-klappe__knopf { color: #f1cd86; }
  main .breadcrumbs { display: none !important; }
  main section:has(h1) .btn:not(.btn-gold):not([class*="gold"]) {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.55) !important;
    color: #fff !important;
    box-shadow: none !important;
  }
  @media (prefers-reduced-motion: reduce) {
    main section:has(h1)::before { animation: none; }
  }

  /* ---------- Rhythmus: weniger Leerlauf zwischen den Kapiteln ---------- */
  main section:not(:has(h1)):not(.p4-trust):not(section section) {
    padding-top: 56px;
    padding-bottom: 56px;
  }
  main section h2 { text-wrap: balance; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
  html.me-an main section[data-me-nr] { position: relative; }
  html.me-an main section[data-me-nr]::before {
    content: attr(data-me-nr);
    position: absolute;
    top: 18px;
    right: 14px;
    font-family: var(--display);
    font-size: 104px;
    line-height: 1;
    font-weight: 600;
    color: transparent;
    -webkit-text-stroke: 1.2px rgba(216, 166, 87, 0.42);
    pointer-events: none;
    z-index: 0;
  }
  html.me-an main section[data-me-nr] > * { position: relative; z-index: 1; }

  /* ---------- Vertrauensleiste unter dem Hero: eine wischbare Zeile ---------- */
  .p4-trust { padding: 14px 0 !important; }
  .p4-trust__liste {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 8px !important;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0 16px !important;
    margin: 0 !important;
    scroll-snap-type: x proximity;
  }
  .p4-trust__liste::-webkit-scrollbar { display: none; }
  .p4-trust__liste > li {
    flex: 0 0 auto;
    scroll-snap-align: start;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }
  .p4-trust__liste > li,
  .p4-trust__liste > li > a {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
  }
  .p4-trust__liste > li > a,
  .p4-trust__liste > li:not(:has(a)) {
    background: #fff;
    border: 1px solid var(--line) !important;
    border-radius: 14px;
    padding: 10px 14px !important;
    min-height: 62px;
    text-decoration: none;
  }
  .p4-trust__liste strong { font-size: 18px !important; line-height: 1.1 !important; white-space: nowrap; }
  .p4-trust__liste span { font-size: 11.5px !important; line-height: 1.3 !important; max-width: 150px; display: block; }

  /* ---------- Kompaktraster ---------- */
  html.me-an .me-kompakt {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    align-items: stretch !important;
  }
  html.me-an .me-kompakt > * { margin: 0 !important; min-width: 0; }
  html.me-an .me-kompakt > * > a { height: 100%; box-sizing: border-box; }

  /* ---------- Belege: Zitat oben, Bewertungen nebeneinander ---------- */
  html.me-an .ws4-stimmen {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  html.me-an .ws4-stimmen > .ws4-zitat { grid-column: 1 / -1; margin: 0 !important; }
  html.me-an .ws4-stimmen > .ws4-wert { margin: 0 !important; padding: 16px !important; }
  html.me-an .ws4-stimmen > .ws4-wert strong { font-size: 40px !important; line-height: 1 !important; }

  /* ---------- Seekarte: Kapitelleiste ---------- */
  .me-karte {
    position: fixed;
    left: 0;
    right: 0;
    top: 72px;
    z-index: 7900;
    background: rgba(252, 250, 246, 0.94);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(12, 32, 51, 0.08);
    box-shadow: 0 8px 22px rgba(12, 32, 51, 0.08);
    transform: translateY(-110%);
    opacity: 0;
    transition: transform 0.35s cubic-bezier(.2, .8, .2, 1), opacity 0.25s ease;
    pointer-events: none;
  }
  .me-karte--da { transform: none; opacity: 1; pointer-events: auto; }
  .me-karte__spur {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 9px 16px 10px;
    scroll-padding-inline: 16px;
  }
  .me-karte__spur::-webkit-scrollbar { display: none; }
  .me-karte__spur a {
    flex: 0 0 auto;
    font: 600 13px/1 var(--body);
    color: var(--navy-800);
    text-decoration: none;
    padding: 9px 13px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--line);
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  }
  .me-karte__spur a.an {
    background: var(--navy-900);
    border-color: var(--navy-900);
    color: #f1cd86;
  }
  .me-karte__linie {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: linear-gradient(90deg, #d8a657, #f1cd86);
    transform-origin: 0 50%;
    transform: scaleX(0);
  }

  /* ---------- Wischkarten ---------- */
  html.me-an .me-deck {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    gap: 12px !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-left: -16px !important;
    margin-right: -16px !important;
    padding: 6px 16px 14px !important;
    scroll-padding-inline: 16px;
    align-items: stretch !important;
    columns: auto !important;
  }
  html.me-an .me-deck::-webkit-scrollbar { display: none; }
  html.me-an .me-deck > * {
    flex: 0 0 82% !important;
    width: 82% !important;
    max-width: 340px !important;
    min-width: 0 !important;
    margin: 0 !important;
    scroll-snap-align: start;
    grid-column: auto !important;
    grid-row: auto !important;
    transform: none;
  }
  html.me-an .me-deck > *:last-child { scroll-snap-align: end; }
  html.me-an .me-deck:focus-visible { outline: 2px solid #d8a657; outline-offset: 2px; }

  .me-deck__leiste {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 2px 0 6px;
    font: 600 12px/1 var(--body);
    letter-spacing: 0.04em;
    color: var(--muted);
  }
  .me-deck__zahl { min-width: 38px; font-variant-numeric: tabular-nums; }
  .me-deck__punkte { display: flex; gap: 5px; flex: 1; }
  .me-deck__punkte i {
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 3px;
    background: currentColor;
    opacity: 0.28;
    transition: width 0.25s ease, opacity 0.25s ease;
  }
  .me-deck__punkte i.an { width: 20px; opacity: 1; background: #d8a657; }
  .me-deck__tipp {
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.12em;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: opacity 0.3s ease;
  }
  .me-deck__tipp::after {
    content: "";
    width: 18px;
    height: 1px;
    background: currentColor;
    box-shadow: 4px 0 0 0 transparent;
    animation: me-wink 1.6s ease-in-out infinite;
  }
  .me-deck__leiste--los .me-deck__tipp { opacity: 0; }
  @keyframes me-wink { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }

  /* auf dunklen Kapiteln helle Leiste */
  html.me-an [class*="wen"] .me-deck__leiste,
  html.me-an .ws4-rostock .me-deck__leiste,
  html.me-an [style*="navy"] .me-deck__leiste { color: var(--muted-inverse); }

  /* ---------- Leistungsumfang als Logbuch zum Aufklappen ---------- */
  html.me-an .p4-index__zeile.me-auf {
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--schatten-1);
    padding: 16px 16px 14px !important;
    margin-bottom: 12px;
    display: block !important;
    position: relative;
  }
  html.me-an .me-auf .p4-index__nr {
    position: absolute;
    left: 16px;
    top: 14px;
    font-size: 30px !important;
    line-height: 1 !important;
    margin: 0 !important;
  }
  html.me-an .me-auf .p4-index__titel {
    padding-left: 50px;
    padding-right: 86px;
    min-height: 40px;
    cursor: pointer;
    position: relative;
  }
  html.me-an .me-auf .p4-index__titel h3 { margin: 0 0 2px !important; }
  html.me-an .me-auf .p4-index__titel p { margin: 0 !important; }
  .me-auf__knopf {
    position: absolute;
    right: -2px;
    top: 0;
    border: 1px solid var(--line);
    background: var(--paper);
    color: var(--navy-800);
    border-radius: 999px;
    font: 600 12px/1 var(--body);
    padding: 9px 12px 9px 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .me-auf__knopf::after {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.25s ease;
  }
  .me-auf--offen .me-auf__knopf::after { transform: translateY(2px) rotate(-135deg); }
  html.me-an .me-auf .p4-index__inhalt {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s ease, margin 0.35s ease;
    margin-top: 0;
  }
  html.me-an .me-auf .p4-index__inhalt > * { min-height: 0; overflow: hidden; }
  html.me-an .me-auf .p4-index__inhalt { overflow: hidden; }
  html.me-an .me-auf:not(.me-auf--offen) .p4-index__inhalt { grid-template-rows: 0fr; height: 0; }
  html.me-an .me-auf.me-auf--offen .p4-index__inhalt { grid-template-rows: 1fr; height: auto; margin-top: 14px; display: block; }
  html.me-an .me-auf .p4-index__analysen {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  html.me-an .me-auf .p4-index__analysen > div {
    margin: 0 !important;
    padding: 12px !important;
    border-radius: 12px;
    background: var(--paper);
    border: 1px solid var(--line-soft);
    box-shadow: none !important;
  }
  html.me-an .me-auf .p4-index__analysen dt { font-size: 14px !important; line-height: 1.25 !important; margin-bottom: 4px !important; }
  html.me-an .me-auf .p4-index__analysen dd { font-size: 12.5px !important; line-height: 1.4 !important; margin: 0 !important; }

  /* ---------- Kurslinie im Ablauf ---------- */
  html.me-an .me-kurs { position: relative; --me-kurs: 0; }
  html.me-an .me-kurs::after {
    content: "";
    position: absolute;
    left: 21px;
    top: 8px;
    width: 2px;
    height: calc((100% - 16px) * var(--me-kurs));
    background: linear-gradient(180deg, #d8a657, #f1cd86);
    border-radius: 2px;
    z-index: 0;
    pointer-events: none;
  }
  html.me-an .me-kurs > li .p4-reise__nr {
    transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    z-index: 1;
  }
  html.me-an .me-kurs > li.me-kurs--erreicht .p4-reise__nr {
    background: #d8a657 !important;
    color: var(--navy-900) !important;
    box-shadow: 0 0 0 6px rgba(216, 166, 87, 0.18);
  }

  /* ---------- Weiterlesen ---------- */
  html.me-an .me-klappe:not(.me-klappe--offen) {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
  }
  .me-klappe__knopf {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: -4px 0 14px;
    padding: 6px 0;
    border: 0;
    background: none;
    font: 600 14px/1.2 var(--body);
    color: var(--gold-text);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    cursor: pointer;
  }
  [class*="wen"] .me-klappe__knopf,
  .ws4-test .me-klappe__knopf,
  .ws4-rostock .me-klappe__knopf,
  .p4-final .me-klappe__knopf { color: #f1cd86; }

  /* ---------- Einblenden ---------- */
  html.me-an .me-wart { opacity: 0; transform: translateY(18px); }
  html.me-an .me-deck > .me-wart { transform: translateX(26px); }
  html.me-an .me-wart.me-da {
    opacity: 1;
    transform: none;
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(.2, .8, .2, 1);
  }
  html.me-an .me-deck > .me-wart.me-da:nth-child(2) { transition-delay: 0.06s; }
  html.me-an .me-deck > .me-wart.me-da:nth-child(3) { transition-delay: 0.12s; }
}