/* ── Galerie-Stapel ── */
    .gallery-stack {
      position: relative;
      isolation: isolate;
      width: 100%;
      aspect-ratio: 3 / 2;
      min-height: 220px;
      cursor: pointer;
      overflow: visible;
      pointer-events: auto;
      -webkit-tap-highlight-color: transparent;
      -webkit-touch-callout: none;
      user-select: none;
      -webkit-user-select: none;
    }

    .gallery-card {
      position: absolute;
      inset: 0;
      width: 100%; height: 100%;
      /* kein preserve-3d — sonst clippt ::after nicht mit clip-path */
      will-change: transform;
      overflow: visible;
      -webkit-tap-highlight-color: transparent;
    }

    /* vorderste Karte — keine CSS-transition, nur Animation */
    .gallery-card[data-pos="0"] {
      z-index: 2;
      transform: rotate(var(--hero-rot, 1deg));
    }
    .gallery-card[data-pos="1"] {
      z-index: 1;
      transform: rotate(-2.5deg) translate(-6px, 5px) scale(.97);
      transition: transform .55s cubic-bezier(.4,0,.2,1);
    }
    .gallery-card[data-pos="2"] {
      z-index: 0;
      transform: rotate(2.8deg) translate(8px, 9px) scale(.94);
      transition: transform .55s cubic-bezier(.4,0,.2,1);
    }

    /* Abziehen: GPU-only (transform + opacity) */
    .gallery-card.g-flip-out {
      animation: cardSwipe .30s cubic-bezier(.4,0,1,.5) forwards;
      z-index: 10 !important;
    }
    @keyframes cardSwipe {
      0%   { transform: rotate(var(--hero-rot,1deg)) translate(0,0) scale(1);    opacity: 1; }
      18%  { transform: rotate(calc(var(--hero-rot,1deg) - 7deg)) translate(-5%,-4%) scale(1.03); opacity: 1; }
      100% { transform: rotate(calc(var(--hero-rot,1deg) - 30deg)) translate(-130%,-20%) scale(.88); opacity: 0; }
    }

    /* Nächste Karte schnappt nach vorne */
    .gallery-card.g-flip-in {
      animation: cardSnap .28s cubic-bezier(0,.85,.3,1) .12s both;
      z-index: 5 !important;
    }
    @keyframes cardSnap {
      0%   { transform: rotate(2.8deg) translate(8px,9px) scale(.94); }
      65%  { transform: rotate(calc(var(--hero-rot,1deg) - .5deg)) scale(1.025); }
      100% { transform: rotate(var(--hero-rot,1deg)) scale(1); }
    }

    /* Inneres hero-shape übernimmt die Maske */
    .gallery-card .hero-shape {
      position: absolute;
      inset: 0;
      min-height: unset;
      aspect-ratio: unset;
      height: 100%;
      overflow: hidden;
    }

    /* Bildquellen-Button: dezent, aber >=44px Touch-Ziel + sichtbarer Fokusring (a11y) */
    .hero-img-source-btn {
      position: absolute;
      right: .5rem;
      bottom: .5rem;
      z-index: 3;
      width: 28px;
      height: 28px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
      border: none;
      border-radius: 50%;
      background: rgba(0,0,0,.38);
      color: #fff;
      cursor: pointer;
      padding: 0;
    }
    .hero-img-source-btn::before {
      content: '';
      position: absolute;
      inset: -8px;
    }
    .hero-img-source-btn svg { width: 14px; height: 14px; }
    .hero-img-source-btn:focus-visible {
      outline: 2px solid #fff;
      outline-offset: 2px;
    }

    /* Link im Bildquellen-Modal: kein Standard-Blau, folgt der App-Farbwelt
       (--accent), keine Unterstreichung, Domain statt voller URL als Label. */
    .image-source-modal-link {
      color: var(--accent);
      text-decoration: none;
      font-weight: 700;
      word-break: break-all;
    }
    .image-source-modal-link:hover,
    .image-source-modal-link:focus-visible {
      text-decoration: underline;
    }

    /* Beschreibung unter dem Bild (Desktop/Tablet: im hero-section) */
    .hero-description {
      font-size: .9rem;
      color: var(--muted);
      line-height: 1.55;
      padding: 0 .1rem;
      margin: 1rem 0 0;
      display: none; /* Mobile: versteckt – kommt als result-tagline im result-body */
    }

    /* Beschreibung im result-body (Mobile: sichtbar, Desktop: versteckt) */
    .result-tagline { display: block; }

    /* Quell-/ÖV-Karten der Bestätigungsseite - gleiches Doppel-Render-Muster
       wie .hero-description/.result-tagline (Toggle weiter unten). */
    .hero-top-links   { display: none; margin-top: 1.1rem; }
    .result-top-links { display: block; margin-top: .9rem; }

    /* Galerie-Indikator (Punkte) */
    .gallery-dots {
      display: flex;
      gap: 6px;
      justify-content: center;
      margin-top: .35rem;
    }
    .gallery-dot {
      width: 5px; height: 5px;
      border-radius: 50%;
      background: rgba(241,234,219,.22);
      transition: background .25s, transform .25s;
    }
    .gallery-dot.active {
      background: #d9c483;
      transform: scale(1.35);
    }

    /* Nur zeigen wenn mehrere Bilder vorhanden */
    .gallery-dots:empty,
    .gallery-dots.single { display: none; }

    /* Result body */
    .result-body {
      padding: 0 1.25rem;
      position: relative;
      z-index: 1;
    }

    .result-location {
      display: flex;
      align-items: center;
      gap: .35rem;
      font-size: .82rem;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: .5rem;
    }

    .result-location svg { width: 13px; height: 13px; stroke: var(--accent); fill: none; stroke-width: 2; flex-shrink: 0; }

    .result-title {
      font-size: 1.75rem;
      font-weight: 850;
      line-height: 1.0;
      letter-spacing: -.04em;
      color: var(--text);
      margin-bottom: .45rem;
    }

    .result-tagline {
      font-size: .92rem;
      color: var(--muted);
      margin-bottom: .85rem;
      line-height: 1.5;
    }

    /* Weather badge */
    .weather-badge {
      display: inline-flex;
      align-items: center;
      gap: .45rem;
      background: rgba(8,20,28,.55);
      border: 1px solid rgba(212,185,106,.22);
      color: var(--text);
      font-size: .85rem;
      font-weight: 600;
      padding: .5rem .9rem;
      border-radius: 14px;
      margin-bottom: .75rem;
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
    }

    .weather-badge svg { width: 15px; height: 15px; stroke: var(--accent); fill: none; stroke-width: 1.8; flex-shrink: 0; }

    /* Heat-day context badges – rechts neben der Wetteranzeige */
    .fit-weather-wrap {
      display: flex;
      align-items: center;
      gap: .5rem;
      flex-wrap: wrap;
      margin-bottom: .75rem;
    }
    .fit-weather-wrap .weather-badge { margin-bottom: 0; }
    .heat-badges-row { display: flex; flex-direction: column; gap: 4px; }
    .heat-badge {
      background: rgba(5,18,30,.96);
      border: 1.5px solid rgba(90,195,220,.50);
      color: #c8eef5;
      padding: 4px 10px;
      border-radius: 5px;
      text-align: center;
      transform: rotate(4deg);
      display: flex;
      flex-direction: column;
      gap: 1px;
    }
    .heat-badge-label {
      font-size: .72rem;
      font-weight: 800;
      line-height: 1.2;
      letter-spacing: .02em;
    }
    .heat-badge-sub {
      font-size: .68rem; /* A11y: war .58rem (9.3px) */
      font-weight: 500;
      line-height: 1.2;
      opacity: .75;
    }

    /* Stats wrapper + difficulty badge */
    .stats-wrap {
      position: relative;
      margin-bottom: .75rem;
    }

    .stats-difficulty-badge {
      position: absolute;
      top: -10px;
      right: 14px;
      background: var(--accent);
      color: #07110d;
      font-size: .72rem; /* A11y: war .6rem (9.6px) — einzige Anzeige der Wanderschwierigkeit */
      font-weight: 800;
      padding: 2px 10px;
      border-radius: 5px;
      transform: rotate(5deg);
      letter-spacing: .08em;
      text-transform: uppercase;
      box-shadow: 0 2px 8px rgba(0,0,0,.4);
      z-index: 2;
      pointer-events: none;
    }

    /* Facts grid (4 cells, icon above text) */
    .stats-row {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      overflow: hidden;
      background: rgba(8,20,28,.55);
      border: 1px solid var(--line-strong);
      border-radius: 20px;
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
    }

    .stat-item {
      min-height: 72px;
      padding: 12px 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 6px;
      text-align: center;
      font-size: .82rem;
      font-weight: 600;
      color: var(--text);
      border-right: 1px solid var(--line);
    }

    .stat-item:last-child { border-right: 0; }

    .stat-item svg { width: 20px; height: 20px; stroke: var(--accent); fill: none; stroke-width: 1.8; flex-shrink: 0; }

    /* Route card */
    .route-row {
      display: grid;
      grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
      gap: 12px;
      align-items: start;
      background: rgba(8,20,28,.62);
      border: 1px solid var(--line-strong);
      border-radius: 22px;
      padding: 1rem 1.1rem;
      margin-bottom: .75rem;
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
    }

    .route-point { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
    .route-point-end { align-items: flex-end; text-align: right; }

    .route-label {
      color: var(--accent);
      text-transform: uppercase;
      font-size: .65rem;
      letter-spacing: .1em;
      font-weight: 750;
    }

    .route-place {
      font-size: 1rem;
      font-weight: 700;
      line-height: 1.15;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      color: var(--text);
      max-width: 100%;
    }

    .route-station {
      font-size: .72rem; /* A11y: war .62rem (9.9px) */
      color: var(--muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
    }

    .route-arrow { width: 56px; color: var(--accent); flex-shrink: 0; align-self: center; margin-top: .9rem; }

    /* Rundwanderung: 2 Spalten statt 3 */
    .route-row--loop { grid-template-columns: 1fr auto; }
    .route-return-arrow { width: 80px; height: 40px; color: var(--accent); flex-shrink: 0; align-self: center; margin-top: .9rem; }

    /* Ohne Stationslink (Bestätigungsseite) ist die Route-Point-Box nur
       2-zeilig statt 3-zeilig - der Pfeil braucht dann keinen Top-Offset. */
    .route-row--compact .route-arrow,
    .route-row--compact .route-return-arrow { margin-top: 0; }

    /* Klickbare ÖV-Station */
    .station-link { text-decoration: none; color: inherit; display: inline-flex; align-items: center; gap: .25rem; max-width: 100%; overflow: hidden; }
    .station-link:hover .route-station { color: var(--accent); text-decoration: underline; }
    .sbb-badge { display: inline-block; flex-shrink: 0; width: 13px; height: 13px; opacity: .85; }

    /* Transit-Badge unter der Route */
    .transit-quip {
      display: flex;
      align-items: center;
      gap: .45rem;
      font-size: .82rem;
      font-weight: 650;
      color: var(--accent);
      margin-top: -.35rem;
      margin-bottom: .75rem;
      padding: 0 .25rem;
      opacity: .88;
    }
    .transit-quip svg { flex-shrink: 0; }

    /* Warnings */
    .warnings-wrap { margin-bottom: .75rem; }

    .warning-item {
      font-size: .82rem;
      color: var(--amber);
      padding: .45rem .7rem;
      background: var(--amber-lt);
      border-radius: 8px;
      margin-bottom: .35rem;
      line-height: 1.4;
    }

    /* Mitreisenden-Status (Confirm-Pending) */
    .members-status {
      background: var(--panel); border: 1px solid var(--line-strong);
      border-radius: 12px; padding: .7rem .9rem; margin-bottom: .75rem;
    }
    .members-status-title { font-size: .78rem; font-weight: 600; color: var(--muted); margin-bottom: .4rem; }
    .members-status-row {
      display: flex; align-items: center; justify-content: space-between;
      font-size: .85rem; padding: .25rem 0;
    }
    .member-status-accepted { color: var(--accent-green); font-weight: 600; }
    .member-status-declined { color: var(--amber); font-weight: 600; }
    .member-status-pending  { color: var(--muted); }

    .veto-hint {
      font-size: .82rem; color: var(--muted); line-height: 1.4;
      margin-bottom: .75rem; text-align: center;
    }

    /* Linksbündige Fliesstext-Meta-Zeile ("Für morgen · 2. Vorschlag · von
       {Name}") statt vormals zwei separaten Pill-Badges (.result-day-badge
       oben rechts + .ordinal-badge im result-body) - mit dem Suchenden-Namen
       dazu ist es zu viel Info für eine Badge-Form. Margin neu balanciert
       (Bugfix 2026-07-11, 2. Nachbesserung: der vorige Bottom-Wert (1.2rem)
       kollabierte auf Detail-/Tablet-/Landscape-Breakpoints mit .hero-wraps
       eigenem Top-Margin (1.5rem dort, 1rem in der Basisregel) - bei
       angrenzenden Block-Geschwistern gewinnt CSS-Margin-Collapsing immer der
       GRÖSSERE der beiden Werte statt sie zu addieren, daher blieb der
       Abstand dort optisch unverändert. padding-bottom statt margin-bottom
       kollabiert grundsätzlich nicht mit dem Margin des nächsten Geschwisters -
       damit wirkt der Abstand jetzt überall zuverlässig, unabhängig vom
       hero-wrap-Margin des jeweiligen Breakpoints. */
    .result-meta-line {
      font-size: .78rem; font-weight: 600; color: var(--muted);
      margin: .4rem 1.25rem 0;
      padding-bottom: 1.2rem;
    }

    /* Hitze-Fallback-Hinweis innerhalb der Meta-Zeile bewusst leiser als der
       Rest (unfettet + kursiv) - reiner Kontext, keine sicherheitsrelevante
       Warnung wie .warning-item (Bugfix 2026-07-11). */
    .result-meta-heat-note {
      font-weight: 400;
      font-style: italic;
    }

    /* CTA buttons (Farbe/Rand/Schrift/Pfeilspitze: s. .btn-start-big weiter
       oben, beide teilen sich dieselbe Basisregel inkl. .btn-start-arrow) —
       Breite inkl. Pfeilspitze kommt bereits aus der Basisregel
       (.btn-start-arrow width:calc(100% - 50px)), hier nur noch der
       abweichende max-width-Reset nötig (Basis begrenzt auf 320px für den
       zentrierten Start-Button-Kontext, hier soll die Karte voll ausgefüllt
       werden). */
    .btn-accept {
      max-width: none;
      margin-top: 2.5rem;
      margin-bottom: .6rem;
    }
    .btn-accept svg { width: 20px; height: 20px; stroke: #07110d; fill: none; stroke-width: 2.5; stroke-linecap: round; }

    .btn-next {
      display: block;
      width: 100%;
      background: rgba(255,255,255,.018);
      color: var(--text);
      border: 1px solid var(--line-strong);
      border-radius: 18px;
      min-height: 50px;
      padding: .85rem 1.25rem;
      font-size: .98rem;
      font-weight: 600;
      cursor: pointer;
      transition: background .15s;
      font-family: inherit;
      text-align: center;
    }

    .btn-next:hover { background: rgba(255,255,255,.04); }