/* «Station für Station» (journey) — rev. 01.10.2026, split zig-zag. Own file (theme: assets/css/izlet-journey.css + rtlcss
   izlet-journey-rtl.css), loaded by inc/trip-plan.php only where a trip has journey.html; needs izlet.css (tokens).
   Every stop is one wide card: text column on the side of its number, photo column (1–3, mosaic) edge to edge on the other;
   even cards swap sides, so photos follow the zig-zag. Between two cards only ONE quiet beige diagonal (dot at the bottom →
   number of the next card), never along the side, on the phone too. The section has no background, only the cards.
   Phone: photos open the card (all visible, no swipe), then icon · time, H3, text. Lightbox: izlet.js (a[data-jr-lb]).
   Photo credits of placeholders: one closed <details class="iz-jr-src"> at the end (none for the owner's own photos). */
.iz-jr{--jr-pad:clamp(20px,4vw,56px);--jr-in:var(--jr-pad);--jr-gap:clamp(72px,9vw,140px);--jr-cs:clamp(34px,4vw,52px);--jr-no:44px;--jr-mut:#6b6458;--jr-bg:#fdfcfa;--jr-card:#f3eee4;--jr-line:#e3dccd;--jr-ink:#3a362f;--gold-d:#86671a}
.iz-jr-head{max-width:900px;margin:0 0 clamp(30px,4vw,52px)}
.iz-jr-head .offer-h2{margin-bottom:14px}
.iz-jr-intro{font:16.5px/1.65 var(--nav);color:var(--jr-ink);margin:0;max-width:68ch}
.iz-jr-list{list-style:none;margin:0;padding:0}
.iz-jr-stop{margin:0}
/* card: text 5fr | photos 7fr (even cards: photos first) */
.iz-jr-card{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);min-height:clamp(460px,44vw,620px);background:var(--jr-card);border-radius:var(--r-card);box-shadow:0 1px 0 rgba(12,12,12,.04),0 22px 44px -32px rgba(12,12,12,.3)}
.iz-jr-r .iz-jr-card{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.iz-jr-no{position:absolute;z-index:2;top:calc(var(--jr-no)/-2);inset-inline-start:calc(var(--jr-in) - var(--jr-no)/2);width:var(--jr-no);height:var(--jr-no);border-radius:50%;display:grid;place-items:center;background:var(--black);color:var(--gold);font:600 21px/1 var(--serif);font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1;box-shadow:0 0 0 5px var(--jr-bg),inset 0 0 0 1px rgba(201,168,76,.4)}
.iz-jr-card::after{content:"";position:absolute;z-index:2;bottom:-5.5px;inset-inline-start:calc(var(--jr-in) - 5.5px);width:11px;height:11px;border-radius:50%;background:#cfc5b0;box-shadow:0 0 0 4px var(--jr-bg)}
.iz-jr-r .iz-jr-no{inset-inline-start:auto;inset-inline-end:calc(var(--jr-in) - var(--jr-no)/2)}
.iz-jr-r .iz-jr-card::after{inset-inline-start:auto;inset-inline-end:calc(var(--jr-in) - 5.5px)}
/* text column */
.iz-jr-top{display:flex;flex-direction:column;justify-content:center;padding:calc(var(--jr-pad) + 10px) var(--jr-pad) var(--jr-pad)}
.iz-jr-hd{display:flex;flex-direction:column}
.iz-jr-hd h3{font:600 clamp(24px,2.3vw,34px)/1.1 var(--serif);color:var(--black);margin:0;text-wrap:balance}
.iz-jr-time{order:-1;display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:0 0 16px;font:600 12px/1 var(--nav);letter-spacing:.12em;text-transform:uppercase;color:var(--jr-mut)}
.iz-jr-ic{flex:none;width:36px;height:36px;padding:7.5px;margin-inline-end:4px;border-radius:50%;box-shadow:inset 0 0 0 1px #dccfae;color:var(--gold-d);fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.iz-jr-time time{padding:7px 11px 6px;border-radius:999px;background:var(--jr-bg);color:var(--black);font-variant-numeric:tabular-nums;letter-spacing:.08em;box-shadow:inset 0 0 0 1px #e2d8c4}
.iz-jr-time span::before{content:"·";margin-inline-end:8px;color:var(--gold)}
.iz-jr-txt{font:16px/1.72 var(--nav);color:var(--jr-ink);margin:22px 0 0;max-width:64ch}
/* photo column: 4 px seams in the card colour (passe-partout), only the card's outer corners rounded */
.iz-jr-ph{display:grid;gap:4px;overflow:hidden;border-start-end-radius:var(--r-card);border-end-end-radius:var(--r-card)}
.iz-jr-r .iz-jr-ph{order:-1;border-radius:0;border-start-start-radius:var(--r-card);border-end-start-radius:var(--r-card)}
.iz-jr-n3{grid-template:1.55fr 1fr/1fr 1fr}
.iz-jr-n3>a:first-child{grid-column:1/-1}
.iz-jr-n2{grid-template-rows:1.5fr 1fr}
.iz-jr-ph>a{position:relative;display:block;overflow:hidden;min-height:0;background:#e6e0d2}
.iz-jr-ph img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.22,.61,.36,1)}
.iz-jr-ph>a::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(12,12,12,.34),rgba(12,12,12,0) 42%);opacity:0;transition:opacity .5s var(--ease)}
.iz-jr-ph>a::before{content:"";position:absolute;z-index:1;top:12px;inset-inline-end:12px;width:34px;height:34px;border-radius:50%;background:rgba(253,252,250,.92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230C0C0C' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M14 4h6v6M10 20H4v-6M20 4l-6 6M4 20l6-6'/%3E%3C/svg%3E") center/15px no-repeat;opacity:0;scale:.85;transition:opacity .4s,scale .4s var(--ease)}
@media(hover:hover){.iz-jr-ph>a:hover img{transform:scale(1.04)}.iz-jr-ph>a:hover::after,.iz-jr-ph>a:hover::before{opacity:1;scale:1}}
/* keyboard focus: two-tone ring inside the photo (cream + black → visible on dark and light photos; the column clips outlines) */
.iz-jr-ph>a:focus-visible{outline:none}
.iz-jr-ph>a:focus-visible::after{opacity:1;z-index:1;box-shadow:inset 0 0 0 3px var(--jr-bg),inset 0 0 0 5px var(--black)}
.iz-jr-ph>a:focus-visible::before{opacity:1;scale:1}
/* «Symbolbild» on a placeholder that only illustrates the stop (gallery note), gone with the owner's photos */
.iz-jr-tag{position:absolute;z-index:2;bottom:12px;inset-inline-start:12px;padding:5px 9px 4px;border-radius:999px;background:rgba(253,252,250,.92);color:var(--black);font:600 11px/1 var(--nav);letter-spacing:.06em;pointer-events:none}
/* connector: one solid diagonal between two cards (SVG corner to corner, mirrored for even cards and RTL) */
.iz-jr-link{display:block;height:var(--jr-gap);margin:0 var(--jr-in)}
.iz-jr-link svg{display:block;width:100%;height:100%;overflow:visible}
.iz-jr-link line{fill:none;stroke:var(--jr-line);stroke-width:7;stroke-linecap:round}
.iz-jr-r .iz-jr-link,[dir="rtl"] .iz-jr-l .iz-jr-link{scale:-1 1}
[dir="rtl"] .iz-jr-r .iz-jr-link{scale:1 1}
.iz-jr-cap{position:relative;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;margin:0;padding-inline-start:calc(var(--jr-in) + 20px);font:600 13.5px/20px var(--nav);color:var(--jr-ink)}
.iz-jr-cap::before{content:"";position:absolute;top:4px;inset-inline-start:calc(var(--jr-in) - 6px);width:12px;height:12px;border-radius:50%;background:var(--black);box-shadow:0 0 0 4px var(--jr-bg)}
.iz-jr-cap time{font-weight:700;color:var(--black);font-variant-numeric:tabular-nums}
.iz-jr-start{margin-bottom:var(--jr-cs)}
.iz-jr-start::after{content:"";position:absolute;top:20px;inset-inline-start:calc(var(--jr-in) - 3.5px);width:7px;height:calc(100% - 20px + var(--jr-cs));background:var(--jr-line);border-radius:4px}
.iz-jr-fin{padding:20px 0 0 calc(var(--jr-in) - 6px)}
.iz-jr-fin::before{top:-6px}
.iz-jr-fin.iz-jr-r{justify-content:flex-end;padding-inline:0 calc(var(--jr-in) - 6px)}
.iz-jr-fin.iz-jr-r::before{inset-inline-start:auto;inset-inline-end:calc(var(--jr-in) - 6px)}
.iz-jr-end{max-width:820px;margin:clamp(36px,4.5vw,60px) 0 0;padding:clamp(18px,2.4vw,28px) clamp(20px,3vw,34px);border-radius:var(--r-card);background:var(--jr-card);font:15px/1.7 var(--nav);color:var(--jr-ink)}
/* photo credits (placeholders only) */
.iz-jr-src{max-width:820px;margin:18px 0 0;padding-inline:clamp(20px,3vw,34px);font:12px/1.6 var(--nav);color:var(--jr-mut)}
.iz-jr-src summary{display:inline-flex;align-items:center;gap:8px;padding:6px 0;cursor:pointer;list-style:none;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.iz-jr-src summary::-webkit-details-marker{display:none}
.iz-jr-src summary::after{content:"+";font-size:14px;letter-spacing:0;color:var(--gold-d)}
.iz-jr-src[open] summary::after{content:"\2013"}
.iz-jr-src summary:focus-visible{outline:2px solid var(--black);outline-offset:2px}
.iz-jr-src ol{margin:8px 0 0;padding:0;list-style:none;display:grid;gap:4px}
.iz-jr-src li span{color:var(--jr-ink);font-weight:600;margin-inline-end:4px}
.iz-jr .iz-jr-src a[target]{color:inherit;text-decoration:underline 1px #cfc5b0;text-underline-offset:3px}
.iz-jr .iz-jr-src a[target]::after{content:none}                     /* no ↗ in the compact credit list (izlet.css adds it to external links) */
@media(hover:hover){.iz-jr .iz-jr-src a[target]:hover{color:var(--black);text-decoration-color:currentColor}}
/* scroll reveal (CSS only): text slides up, photos fade; the card itself stays put so the connector never detaches */
@keyframes jr-in{from{opacity:0;translate:0 22px}}
@keyframes jr-fade{from{opacity:0}}
@media screen and (prefers-reduced-motion:no-preference){@supports(animation-timeline:view()){          /* screen only: print/PDF shows every card */
  .iz-jr-top{animation:jr-in linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
  .iz-jr-ph{animation:jr-fade linear both;animation-timeline:view();animation-range:entry 0% entry 45%}
}}
@media(prefers-reduced-motion:reduce){.iz-jr-ph img,.iz-jr-ph>a::before,.iz-jr-ph>a::after{transition:none}.iz-jr-ph>a:hover img{transform:none}}
/* tablet: two equal columns */
@media(max-width:959px){.iz-jr-card,.iz-jr-r .iz-jr-card{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.iz-jr-txt{font-size:15.5px}}
/* phone: photos first and edge to edge (n1 4:3 · n2 4:3 + 16:9 · n3 4:3 + two squares), then icon · time, H3, text */
@media(max-width:699px){
  .iz-jr{--jr-pad:20px;--jr-in:42px;--jr-gap:56px;--jr-no:38px}
  .iz-jr-no{font-size:18px}
  .iz-jr-card{display:flex;flex-direction:column;padding:0 var(--jr-pad);min-height:0}
  .iz-jr-top{display:contents}
  .iz-jr-ph,.iz-jr-r .iz-jr-ph{order:0;margin:0 calc(-1*var(--jr-pad));border-radius:var(--r-card) var(--r-card) 0 0;grid-template:none;grid-template-columns:1fr 1fr}
  .iz-jr-ph>a{aspect-ratio:1}
  .iz-jr-ph>a:first-child,.iz-jr-n2>a{grid-column:1/-1;aspect-ratio:4/3}
  .iz-jr-n2>a+a{aspect-ratio:16/9}
  .iz-jr-hd{order:1;margin-top:24px}
  .iz-jr-txt{order:2;margin:14px 0 26px}
  .iz-jr-time{margin-bottom:12px}
  .iz-jr-ic{width:30px;height:30px;padding:6px}
  .iz-jr-hd h3{font-size:24px}
  .iz-jr-end{padding:16px 18px}
  .iz-jr-src{padding-inline:18px}
}
/* Hindi: no tracking on Devanagari (breaks the shirorekha) */
html[lang^="hi"] :is(.iz-jr-time,.iz-jr-time time,.iz-jr-tag,.iz-jr-src summary){letter-spacing:0}
/* Chinese stop titles: break at punctuation, not inside a word (巧克/力) */
html[lang^="zh"] .iz-jr-hd h3{word-break:keep-all;overflow-wrap:anywhere}