/* Variante 04 Rundgang: eine Kamerafahrt durch die Praxis als Scroll-Film.
   Der Film läuft randlos in voller Helligkeit. Desktop: Text in einer hellen Karte (Paper, dunkle Schrift).
   Handy: Film über die ganze Bühne im Hochformat, weisse Schrift direkt auf dem Bild mit einem Verlauf nach unten.
   Ohne html.tour-film gilt der ruhige Rückfall: Poster mit Station 1, darunter die Stationen 2 bis 4.
   In der Bühne bewegen sich nur opacity und transform; Text und Knöpfe bleiben echtes HTML. */
.hero-tour{display:none;position:relative;padding-top:var(--header);background:var(--paper);color:var(--ink)}
html[data-hero=rundgang] .hero-tour{display:block!important}
html[data-hero=rundgang] .hero-light,html[data-hero=rundgang] .cinematic{display:none}

/* Rückfall: Poster als Startbild, Station 1 in der Karte, Stationen 2 bis 4 als Reihe. */
.tour-stage{display:grid;grid-template-columns:calc(var(--gutter) - 26px) repeat(3,minmax(0,1fr)) calc(var(--gutter) - 26px);column-gap:26px}
.tour-media{grid-area:1/1/2/-1;position:relative;height:calc(100svh - var(--header));min-height:600px;max-height:940px;overflow:hidden;background:var(--stone)}
.tour-media picture,.tour-media img,.tour-media canvas,.tour-media video{position:absolute;inset:0;width:100%;height:100%}
.tour-media img,.tour-media canvas,.tour-media video{object-fit:cover;object-position:50% 50%}
.tour-media canvas{display:none;opacity:0}
.tour-media video{opacity:0;transition:opacity .5s ease}
.tour-media.has-video video{opacity:1}
.tour-mark,.tour-hint,.tour-play{display:inline-flex;align-items:center;gap:10px;max-width:none;border-radius:3px;background:var(--paper);color:var(--ink);font-size:12px;line-height:1.45;letter-spacing:.01em}
.tour-mark{grid-area:1/2/2/-2;z-index:2;align-self:start;justify-self:end;margin-top:16px;padding:7px 11px;font-size:11px}
.tour-card,.tour-stations{display:contents}
.tour-hint,.tour-rail{display:none}
.tour-station{min-width:0}
.tour-station:first-child{grid-area:1/2/2/-2;z-index:2;align-self:end;justify-self:start;width:min(540px,100%);margin-bottom:96px;padding:34px 36px 36px;border-radius:16px;background:var(--paper);box-shadow:0 20px 56px rgba(34,38,32,.16)}
.tour-station h1,.tour-station h2{font-size:46px;font-weight:450;line-height:1.08;letter-spacing:-.04em;text-wrap:initial}
.tour-station>p{font-size:17px;line-height:1.55;max-width:40ch;margin-block:18px 20px;color:#51574f}
.tour-tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 22px;padding:0}
.tour-tags li{display:flex}
.tour-tags .tour-tag,.tour-tags a{display:inline-flex;align-items:center;min-height:32px;padding:5px 12px;border:1px solid #b9bbae;border-radius:3px;font-size:12.5px;line-height:1.3;letter-spacing:.01em;color:var(--ink)}
.tour-tags a{transition:background .25s,border-color .25s}
.tour-tags a:hover{background:var(--stone);border-color:var(--ink)}
.tour-station .button{min-height:54px}
.tour-station>:last-child{margin-bottom:0}
.tour-label{display:block;font-size:12px;letter-spacing:.02em;color:var(--muted);margin:22px 0 10px}
.tour-still{position:relative;aspect-ratio:1.5;overflow:hidden;border-radius:10px;background:var(--stone)}
.tour-still picture,.tour-still img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tour-station:not(:first-child){grid-row:2;padding:clamp(64px,7vw,104px) 0 clamp(60px,6.4vw,96px)}
.tour-station:nth-child(2){grid-column:2}
.tour-station:nth-child(3){grid-column:3}
.tour-station:nth-child(4){grid-column:4}
.tour-station:not(:first-child) h2{font-size:clamp(27px,2.5vw,36px);line-height:1.14;letter-spacing:-.03em}
.tour-station:not(:first-child)>p{font-size:16px;line-height:1.6;margin-block:14px 20px;color:var(--muted);max-width:34ch}
.tour-station:not(:first-child) .button{min-height:52px;font-size:14px}
.tour-play{grid-area:1/2/2/-2;z-index:2;align-self:end;justify-self:end;margin-bottom:96px;min-height:46px;padding:11px 18px;border-radius:100px;font-size:13px;line-height:1.2;transition:background .25s}
.tour-play .icon{width:15px;height:15px}
.tour-play:hover{background:#e3d7bb}
.hero-tour :is(a,button):focus-visible{outline:3px solid #97722d;outline-offset:5px}

/* Scroll-Film: hohe Sektion, klebende Bühne unter dem Kopf über den ganzen Schirm. */
html.tour-film .hero-tour{height:420svh}
html.tour-film .tour-stage{position:sticky;top:var(--header);display:block;height:calc(100svh - var(--header));overflow:hidden;isolation:isolate;background:var(--stone)}
html.tour-film .tour-media{position:absolute;inset:0;z-index:-1;height:auto;min-height:0;max-height:none}
html.tour-film .tour-media canvas{display:block;transition:opacity .45s ease}
html.tour-film .tour-media.has-frames canvas{opacity:1}
html.tour-film .tour-mark{position:absolute;top:16px;right:var(--gutter);margin:0;align-self:auto;justify-self:auto}
html.tour-film .tour-card{display:block;position:absolute;z-index:1;left:var(--gutter);bottom:96px;width:min(540px,calc(100% - var(--gutter)*2));padding:34px 36px 0;border-radius:16px;background:var(--paper);box-shadow:0 20px 56px rgba(34,38,32,.16)}
html.tour-film .tour-stations{display:grid}
html.tour-film .tour-station,html.tour-film .tour-station:first-child{grid-area:1/1;align-self:start;justify-self:stretch;width:auto;margin:0;padding:0;border-radius:0;background:none;box-shadow:none;opacity:0;transform:translate3d(0,10px,0);transition:opacity .16s ease,transform .45s var(--ease);pointer-events:none}
html.tour-film .tour-station.is-active{opacity:1;transform:none;pointer-events:auto;transition:opacity .38s ease .14s,transform .65s var(--ease) .14s}
html.tour-film .tour-station:not(.is-active){user-select:none}
html.tour-film .tour-station:not(:first-child) h2{font-size:46px;line-height:1.08;letter-spacing:-.04em}
html.tour-film .tour-station:not(:first-child)>p{font-size:17px;line-height:1.55;max-width:40ch;margin-block:18px 20px;color:#51574f}
html.tour-film .tour-station:not(:first-child) .button{min-height:54px;font-size:15px}
html.tour-film .tour-station>:last-child{margin-bottom:0}
html.tour-film .tour-still,html.tour-film .tour-label,html.tour-film .tour-play{display:none}
html.tour-film .tour-rail{display:flex;gap:14px;margin-top:28px;padding-bottom:20px}
.tour-rail button{position:relative;flex:1;display:block;min-height:54px;padding:13px 0 6px;text-align:left;background:none;border-top:1px solid var(--line);font-size:13px;line-height:1.4;color:var(--muted);transition:color .3s}
.tour-rail button>span{display:block;font-size:11px;color:#756031;margin-bottom:2px}
.tour-rail button>i{position:absolute;inset:-1px 0 auto;height:2px;background:#a78442;transform:scaleX(var(--p,0));transform-origin:left}
.tour-rail button[aria-pressed=true],.tour-rail button:hover{color:var(--ink)}
.tour-rail button[aria-pressed=true]{font-weight:500}
html.tour-film .tour-hint{display:inline-flex;position:absolute;left:calc(100% + 14px);bottom:0;padding:9px 13px;white-space:nowrap;transition:opacity .4s ease,transform .6s var(--ease)}
.tour-hint .icon{width:15px;height:15px;transform:rotate(90deg)}
html.tour-film .hero-tour.is-moving .tour-hint{opacity:0;transform:translate3d(0,8px,0)}

@media(min-width:901px) and (max-height:760px){
 .tour-station:first-child{margin-bottom:88px;padding:26px 30px 28px}
 html.tour-film .tour-card{bottom:88px;padding:26px 30px 0}
 .tour-station:first-child h1,html.tour-film .tour-station:not(:first-child) h2{font-size:40px}
 .tour-station:first-child>p,html.tour-film .tour-station:not(:first-child)>p{font-size:16px;margin-block:14px 16px}
 .tour-tags{margin-bottom:16px}
 html.tour-film .tour-station .button,.tour-station:first-child .button{min-height:48px;padding-block:13px}
 html.tour-film .tour-rail{margin-top:20px;padding-bottom:14px}
 .tour-rail button{min-height:48px;padding-top:10px}
}
@media(min-width:901px) and (max-height:640px){html.tour-film .tour-station:first-child .tour-tags{display:none}}
@media(max-width:900px){
 .tour-stage{grid-template-columns:var(--gutter) minmax(0,1fr) var(--gutter);column-gap:0}
 .tour-media{height:auto;min-height:0;max-height:none;aspect-ratio:1}
 .tour-media img,.tour-media video{object-position:50% 44%}
 .tour-mark{justify-self:start;margin-top:12px;font-size:10px;padding:6px 9px}
 .tour-station:first-child{grid-area:2/1/3/-1;width:auto;margin:-18px 0 0;padding:26px var(--gutter) 34px;border-radius:18px 18px 0 0;box-shadow:none}
 .tour-station h1,.tour-station h2{font-size:clamp(30px,8.9vw,38px)}
 .tour-station>p{font-size:15.5px;line-height:1.5;margin-block:13px 15px}
 .tour-tags{margin-bottom:18px}
 .tour-tags .tour-tag{min-height:30px;padding:5px 10px;font-size:11.5px}
 .tour-tags a{min-height:44px;padding-inline:16px;font-size:13px}
 .tour-station .button{min-height:50px;font-size:14px;padding:14px 22px}
 .tour-play{margin-bottom:32px;min-height:44px;padding:10px 15px;font-size:12px}
 .tour-station:not(:first-child){grid-column:2;grid-row:auto;padding:0 0 46px}
 .tour-station:nth-child(2){padding-top:26px}
 .tour-station:nth-child(4){padding-bottom:64px}
 .tour-still{aspect-ratio:1}
 .tour-station:not(:first-child) h2{font-size:30px}
 .tour-station:not(:first-child)>p{font-size:16px;max-width:40ch}
 .tour-station:not(:first-child) .button{min-height:50px}

 /* Handy im Scroll-Film: der Film füllt die ganze Bühne im Hochformat, der Text steht ohne Fläche direkt darauf.
    Lesbarkeit nur über einen Verlauf nach unten, der an der Texthöhe hängt; die obere Bildhälfte bleibt frei. */
 html.tour-film .hero-tour{height:380svh}
 html.tour-film .tour-stage{background:#191b18}
 html.tour-film .tour-media{aspect-ratio:auto}
 html.tour-film .tour-media :is(img,canvas,video){object-position:50% 50%}
 html.tour-film .tour-mark{top:12px;left:var(--gutter);right:auto;z-index:2}
 html.tour-film .tour-card{position:absolute;left:0;right:0;bottom:0;width:auto;padding:0 var(--gutter) calc(84px + env(safe-area-inset-bottom));border-radius:0;background:none;box-shadow:none;color:#fff;isolation:isolate}
 html.tour-film .tour-card::before{content:'';position:absolute;z-index:-1;left:0;right:0;bottom:0;top:-120px;pointer-events:none;background:linear-gradient(180deg,rgba(17,21,17,0) 0,rgba(17,21,17,.1) 36px,rgba(17,21,17,.33) 78px,rgba(17,21,17,.6) 120px,rgba(17,21,17,.7) 210px,rgba(17,21,17,.78) 320px,rgba(17,21,17,.84) 100%)}
 html.tour-film .tour-station,html.tour-film .tour-station:first-child{align-self:end;color:#fff}
 html.tour-film .tour-station h1,html.tour-film .tour-station:not(:first-child) h2{font-size:clamp(30px,8.9vw,40px);color:#fff;text-shadow:0 1px 18px rgba(12,16,12,.45)}
 html.tour-film .tour-station>p,html.tour-film .tour-station:not(:first-child)>p{font-size:15.5px;line-height:1.5;margin-block:13px 15px;color:#f3f2ec;text-shadow:0 1px 12px rgba(12,16,12,.5)}
 html.tour-film .tour-tags .tour-tag,html.tour-film .tour-tags a{border-color:rgba(255,255,255,.62);background:none;color:#fff}
 html.tour-film .tour-tags a:hover{background:rgba(255,255,255,.14);border-color:#fff}
 html.tour-film .tour-station .button,html.tour-film .tour-station:not(:first-child) .button{min-height:50px;font-size:14px;background:var(--paper);border-color:var(--paper);color:var(--ink)}
 html.tour-film .tour-station .button:hover{background:#e3d7bb;border-color:#e3d7bb}
 html.tour-film .tour-rail{gap:12px;margin-top:18px;padding-bottom:0}
 html.tour-film .tour-rail button{min-height:46px;padding:9px 0 4px;font-size:11.5px;color:#e4e2da;border-top-color:rgba(255,255,255,.4)}
 html.tour-film .tour-rail button>span{font-size:10px;color:#ecd9b4}
 html.tour-film .tour-rail button>i{background:#fff}
 html.tour-film .tour-rail button[aria-pressed=true],html.tour-film .tour-rail button:hover{color:#fff}
 html.tour-film .tour-hint{left:auto;right:var(--gutter);bottom:calc(148px + env(safe-area-inset-bottom));min-height:50px;max-width:128px;padding:0;border-radius:0;background:none;color:#fff;white-space:normal;text-align:right;justify-content:flex-end;font-size:11.5px;line-height:1.4;text-shadow:0 1px 10px rgba(12,16,12,.55)}
 html.tour-film .hero-tour :is(a,button):focus-visible{outline-color:#f0d9a8}
}
@media(max-width:900px) and (max-height:700px){
 html.tour-film .tour-card{padding-bottom:calc(80px + env(safe-area-inset-bottom))}
 html.tour-film .tour-card::before{top:-100px;background:linear-gradient(180deg,rgba(17,21,17,0) 0,rgba(17,21,17,.12) 30px,rgba(17,21,17,.36) 66px,rgba(17,21,17,.64) 100px,rgba(17,21,17,.73) 180px,rgba(17,21,17,.8) 270px,rgba(17,21,17,.86) 100%)}
 html.tour-film .tour-station h1,html.tour-film .tour-station:not(:first-child) h2{font-size:clamp(28px,8.4vw,34px)}
 html.tour-film .tour-station>p,html.tour-film .tour-station:not(:first-child)>p{font-size:14px;margin-block:10px 12px}
 html.tour-film .tour-station:first-child .tour-tags{display:none}
 html.tour-film .tour-tags{margin-bottom:0}
 html.tour-film .tour-station .button,html.tour-film .tour-station:not(:first-child) .button{min-height:46px;padding-block:12px}
 html.tour-film .tour-rail{margin-top:14px}
 html.tour-film .tour-rail button{min-height:44px;padding-top:8px}
 html.tour-film .tour-hint{bottom:calc(138px + env(safe-area-inset-bottom));min-height:46px}
}
/* Vier Fassungen im Umschalter: auf schmalen Handys ohne das Kürzel, damit die Knöpfe ganz bleiben. */
@media(min-width:361px) and (max-width:384px){.variant-switch>span{display:none}}
@media(prefers-reduced-motion:reduce){.tour-media video,.tour-rail button,.tour-tags a,.tour-play{transition:none}}