/* Startseite „Ein Tag in Shanghai“
 * Farben folgen dem Tag: Morgennebel, Jade der Altstadt, Lackrot der Holzhäuser, Glas von Pudong, Neonpink der Nacht.
 * Schriften: Sora (Text), Noto Serif SC in Song-Schnitt nur für die chinesischen Zeichen (eigene kleine Datei).
 */
@font-face{font-family:"Sora";src:url("fonts/sora-300.woff2") format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Sora";src:url("fonts/sora-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Sora";src:url("fonts/sora-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Song Auswahl";src:url("fonts/noto-serif-sc-600-auswahl.woff2") format("woff2");font-weight:600;font-display:swap}

:root{
  --tusche:#111a2e; --tusche-2:#1c2842; --nebel:#eef2f4; --weiss:#ffffff;
  --jade:#15342f; --jade-2:#1f4a43; --jade-hell:#a6cfc0;
  --lack:#b8322a; --lack-hell:#e2593f; --perle:#d6418a; --perle-hell:#ffb8dc; --gold:#eda43c; --glas:#2d4f7f;
  --text:#13202f; --grau:#5b6676; --linie:#d5dce3;
  --sans:"Sora",system-ui,-apple-system,"Segoe UI",sans-serif;
  --song:"Song Auswahl","Songti SC","STSong","SimSun","Noto Serif CJK SC",serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --rand:max(24px,calc((100vw - 1240px) / 2));
  --kopf:68px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--kopf) + 8px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--nebel);color:var(--text);font:300 18px/1.7 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
b,strong{font-weight:600}
[hidden]{display:none!important}
.sprung{position:absolute;left:16px;top:-60px;z-index:100;background:var(--weiss);color:var(--text);padding:10px 16px;border-radius:8px}
.sprung:focus{top:12px}

/* ------------------------------------------------------------ Kopfzeile mit Tagesleiste */
.kopf{position:fixed;top:0;left:0;right:0;z-index:50;color:#fff;transition:background .4s var(--ease),-webkit-backdrop-filter .4s,backdrop-filter .4s}
.kopf.fest{background:rgba(17,26,46,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.kopf-innen{display:flex;align-items:center;justify-content:space-between;gap:24px;height:var(--kopf);padding:0 var(--rand)}
.marke img{display:block;height:40px;width:auto}
.tag-nav{display:flex;align-items:center;gap:28px}
.tag-nav a{position:relative;display:flex;flex-direction:column;text-decoration:none;font:400 15px/1.15 var(--sans);color:rgba(255,255,255,.72);padding:6px 0;transition:color .25s}
.tag-nav .uhrzeit{font-size:11px;color:rgba(255,255,255,.5);font-variant-numeric:tabular-nums;margin-bottom:2px;transition:color .25s}
.tag-nav a.ohne-zeit{justify-content:flex-end;padding-top:19px}
.tag-nav a:hover,.tag-nav a.aktiv{color:#fff}
.tag-nav a.aktiv .uhrzeit{color:var(--gold)}
.tag-nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.tag-nav a.aktiv::after{transform:scaleX(1)}
.fortschritt{height:2px;background:rgba(255,255,255,.08);opacity:0;transition:opacity .4s}
.kopf.fest .fortschritt{opacity:1}
/* Der Balken läuft vom Morgen (jade) über den Nachmittag (gold) in die Nacht (perle) */
.fortschritt i{display:block;height:100%;width:100%;transform:scaleX(var(--f,0));transform-origin:left;background:linear-gradient(90deg,var(--jade-hell),var(--gold) 55%,var(--perle) 80%,var(--perle-hell))}

/* ------------------------------------------------------------ Start */
.start{position:relative;min-height:100vh;min-height:100svh;display:grid;grid-template-rows:1fr auto auto;color:#fff;overflow:hidden;background:var(--tusche)}
.start-bild{position:absolute;inset:-6% 0;will-change:transform}
.start-bild div{position:absolute;inset:0;background:url("bilder/von-oben.jpg") 50% 62%/cover no-repeat}
.anim .start-bild div{animation:start-zoom 20s var(--ease) both}
@keyframes start-zoom{from{transform:scale(1.14)}to{transform:scale(1)}}
.start::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(17,26,46,.4) 0%,rgba(17,26,46,0) 20%,rgba(17,26,46,0) 46%,rgba(17,26,46,.5) 74%,rgba(17,26,46,.92) 100%),
    linear-gradient(90deg,rgba(17,26,46,.38) 0%,rgba(17,26,46,0) 58%)}
.start>*:not(.start-bild){position:relative;z-index:2}
.start-inhalt{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:40px;padding:calc(var(--kopf) + 60px) var(--rand) 34px}
.start h1{margin:0 0 22px;font:300 clamp(4.2rem,14.5vw,13.5rem)/.86 var(--sans);letter-spacing:-.05em;text-shadow:0 4px 40px rgba(17,26,46,.35)}
.start-lead{margin:0 0 34px;max-width:32em;font-size:clamp(17px,1.45vw,20px);line-height:1.6;color:rgba(255,255,255,.92);text-shadow:0 1px 16px rgba(17,26,46,.5)}
.knoepfe{display:flex;flex-wrap:wrap;gap:12px}
.knopf{display:inline-flex;align-items:center;min-height:52px;padding:0 26px;border-radius:999px;background:var(--lack);border:1px solid var(--lack);color:#fff;text-decoration:none;font:600 15px var(--sans);transition:background .25s,border-color .25s}
.knopf:hover{background:var(--lack-hell);border-color:var(--lack-hell)}
.knopf.leise{background:rgba(17,26,46,.2);border-color:rgba(255,255,255,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.knopf.leise:hover{background:rgba(255,255,255,.14);border-color:#fff}
.start-zeichen{display:flex;flex-direction:column;align-items:flex-end;gap:16px}
.hanzi{display:flex;flex-direction:column;font:600 clamp(5.5rem,13vw,12.5rem)/1 var(--song);color:#fff7ea;text-shadow:0 6px 40px rgba(120,60,10,.35)}
.hanzi-zusatz{font-size:14px;line-height:1.5;text-align:right;color:rgba(255,255,255,.82)}
/* Einziger großer Auftritt beim Laden: die Zeichen erscheinen wie mit dem Pinsel von oben nach unten */
.anim .hanzi span{clip-path:inset(0 0 100% 0);animation:pinsel 1.3s var(--ease) both}
.anim .hanzi span:nth-child(1){animation-delay:.35s}
.anim .hanzi span:nth-child(2){animation-delay:.85s}
@keyframes pinsel{to{clip-path:inset(0 0 0 0)}}
.anim .start-text>*,.anim .hanzi-zusatz{animation:auftritt 1.1s var(--ease) both}
.anim .start-text>:nth-child(1){animation-delay:.15s}
.anim .start-text>:nth-child(2){animation-delay:.45s}
.anim .start-text>:nth-child(3){animation-delay:.65s}
.anim .hanzi-zusatz{animation-delay:1.6s}
@keyframes auftritt{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

.uhr{justify-self:end;margin:0 var(--rand) 26px;width:340px;padding:18px 22px 16px;border-radius:16px;background:rgba(17,26,46,.38);border:1px solid rgba(255,255,255,.2);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.uhr-zeilen{display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
.uhr-ort{display:block;font-size:13px;color:rgba(255,255,255,.75);margin-bottom:2px}
.uhr-zeit{display:block;font:300 2.4rem/1 var(--sans);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.uhr-du{text-align:right}
.uhr-du .uhr-zeit{font-size:1.45rem;color:rgba(255,255,255,.85)}
.uhr-diff{margin:14px 0 0;padding-top:12px;border-top:1px solid rgba(255,255,255,.16);font-size:13px;color:rgba(255,255,255,.75)}

.zahlen{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(255,255,255,.18);padding:0 var(--rand)}
.zahlen>div{padding:24px 0 30px}
.zahlen>div+div{padding-left:28px;border-left:1px solid rgba(255,255,255,.14)}
.zahlen strong{display:block;position:relative;font:300 clamp(1.7rem,3vw,2.7rem)/1.1 var(--sans);letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.zahlen>div>span{display:block;margin-top:4px;font-size:14px;color:rgba(255,255,255,.72)}
.z-bereit .z-end{visibility:hidden}
.z-bereit .z-live{position:absolute;left:0;top:0}

/* ------------------------------------------------------------ Kapitel: gemeinsames Raster mit Zeichen-Schiene */
.kapitel-raster{display:grid;grid-template-columns:150px minmax(0,1fr);gap:56px;padding:130px var(--rand)}
.schiene{position:sticky;top:calc(var(--kopf) + 44px);align-self:start;display:flex;flex-direction:column;align-items:center;gap:14px;color:var(--zeichen,var(--lack))}
.schiene-zeit{font:300 20px/1 var(--sans);font-variant-numeric:tabular-nums;color:var(--zeit-farbe,var(--grau))}
.hanzi-senkrecht{display:flex;flex-direction:column;font:600 clamp(4.4rem,7vw,7rem)/1.04 var(--song)}
.schiene-pinyin{font-size:14px;color:var(--zeit-farbe,var(--grau))}
.titel{margin:0 0 22px;max-width:15em;font:300 clamp(2.4rem,5vw,4.3rem)/1.04 var(--sans);letter-spacing:-.035em}
.intro{margin:0 0 60px;max-width:36em;font-size:clamp(18px,1.55vw,21px);line-height:1.65;color:var(--intro-farbe,var(--grau))}
.kapitel-zeit{display:flex;align-items:baseline;gap:12px;margin:0 0 14px;font:400 15px/1 var(--sans);color:var(--lack)}
.hanzi-klein{font:600 1.35em/1 var(--song)}

/* Fotos: kleine Ecken, Klick öffnet groß */
.foto{position:relative;margin:0;overflow:hidden;border-radius:6px;background:var(--tusche-2)}
.foto img{display:block;width:100%;height:100%;object-fit:cover}
.foto[data-gross]{cursor:zoom-in}
.foto figcaption{position:absolute;left:16px;right:16px;bottom:14px;z-index:2;font-size:14px;line-height:1.35;color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.6)}
.foto::after{content:"";position:absolute;inset:auto 0 0 0;height:40%;background:linear-gradient(180deg,transparent,rgba(0,0,0,.45));pointer-events:none}
.foto[data-gross]:hover img{transform:scale(1.025)}
.foto img{transition:transform .8s var(--ease)}

/* ------------------------------------------------------------ 6:00 Morgen */
.morgen{background:var(--nebel)}
.wolken{position:relative;height:220vh;background:#d6dbe0}
.wolken-buehne{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.wolken-bild{position:absolute;left:50%;top:50%;width:max(100%,calc(100vh * 1861 / 2576));aspect-ratio:1861/2576;transform:translate(-50%,-50%) scale(var(--s,1));transform-origin:48% 47%;will-change:transform}
.wolken-bild img{display:block;width:100%;height:100%;object-fit:cover}
.wolken-nebel{position:absolute;inset:-12%;pointer-events:none;opacity:var(--nebel,0);
  background:radial-gradient(38% 30% at 28% 58%,rgba(255,255,255,.95),transparent 72%),radial-gradient(42% 34% at 74% 44%,rgba(255,255,255,.9),transparent 72%),
    radial-gradient(70% 40% at 50% 92%,rgba(255,255,255,.95),transparent 72%),radial-gradient(50% 30% at 50% 30%,rgba(255,255,255,.7),transparent 70%);
  animation:nebel 16s ease-in-out infinite alternate}
@keyframes nebel{from{transform:translate3d(-4%,0,0)}to{transform:translate3d(4%,-2%,0)}}
.turm{position:absolute;left:var(--x);top:var(--y);opacity:0;transition:opacity .9s var(--ease)}
.turm.an{opacity:1}
.turm-punkt{position:absolute;left:-5px;top:-5px;width:10px;height:10px;border-radius:50%;background:var(--lack)}
.turm.an .turm-punkt::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1.5px solid var(--lack);animation:puls 2.2s var(--ease) infinite}
@keyframes puls{from{transform:scale(1);opacity:.9}to{transform:scale(3.2);opacity:0}}
.turm-linie{position:absolute;left:10px;top:-.5px;width:56px;height:1px;background:rgba(19,32,47,.55);transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease) .1s}
.turm.an .turm-linie{transform:scaleX(1)}
.turm-schild{position:absolute;left:76px;top:-24px;white-space:nowrap;color:var(--text);opacity:0;transform:translateX(-10px);transition:opacity .8s var(--ease) .35s,transform .8s var(--ease) .35s}
.turm.an .turm-schild{opacity:1;transform:none}
.turm-schild small{display:block;font:600 13px/1.1 var(--sans);color:rgba(19,32,47,.75);margin-bottom:4px}
.turm-schild b{font:300 34px/1 var(--sans);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.turm.links .turm-linie{left:auto;right:10px;transform-origin:right}
.turm.links .turm-schild{left:auto;right:76px;text-align:right;transform:translateX(10px)}
.turm.links.an .turm-schild{transform:none}
.wolken-inhalt{position:absolute;z-index:1;left:var(--rand);right:var(--rand);bottom:7vh;pointer-events:none;color:var(--text);opacity:var(--text-sichtbar,1)}
.wolken-inhalt::before{content:"";position:absolute;left:-12%;right:35%;top:-35%;bottom:-45%;z-index:-1;background:radial-gradient(closest-side,rgba(240,243,246,.72),rgba(240,243,246,0))}
.wolken-titel{margin:0 0 18px;font:300 clamp(3rem,8.5vw,7.6rem)/.95 var(--sans);letter-spacing:-.04em}
.wolken-titel span{display:block;transform:translate3d(0,calc((1 - var(--text-sichtbar,1)) * 60px),0)}
.wolken-titel span+span{transform:translate3d(0,calc((1 - var(--text-sichtbar,1)) * 110px),0)}
.wolken-lead{max-width:30em;margin:0;font-size:18px;color:rgba(19,32,47,.8)}
html:not(.anim) .wolken{height:auto}
html:not(.anim) .wolken-buehne{position:relative}
html:not(.anim) .turm{opacity:1}

.bluete{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:72px;align-items:center;padding:130px var(--rand)}
.bluete-bild{aspect-ratio:3/2}
.bluete-text h3{margin:0 0 18px;font:300 clamp(2rem,3.4vw,3rem)/1.1 var(--sans);letter-spacing:-.03em}
.bluete-text p{margin:0;max-width:28em;color:var(--grau)}

/* ------------------------------------------------------------ 10:00 Altstadt */
.altstadt{background:var(--jade);color:#eef5f2;--zeichen:var(--lack-hell);--zeit-farbe:var(--jade-hell);--intro-farbe:rgba(238,245,242,.78)}
.mosaik{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto auto;gap:18px}
.m-teich{grid-column:1/9;grid-row:1;aspect-ratio:4/3}
.m-gasse{grid-column:9/13;grid-row:1/3}
.m-gasse img{position:absolute;inset:0}
.m-text{grid-column:1/5;grid-row:2;align-self:center;padding:24px 24px 24px 0}
.m-garten{grid-column:5/9;grid-row:2;aspect-ratio:4/3}
.m-text h3{margin:0 0 12px;font:400 24px/1.25 var(--sans);color:#fff}
.m-text p{margin:0;color:rgba(238,245,242,.78);font-size:17px}
.mosaik .foto{background:var(--jade-2)}

/* ------------------------------------------------------------ 13:00 Bund */
.bund{background:var(--nebel);--zeichen:var(--lack)}
.ufer{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:72px;align-items:start}
.ufer-bild{aspect-ratio:2/3;position:sticky;top:calc(var(--kopf) + 40px)}
.seite+.seite{margin-top:56px}
.seite h3{display:flex;align-items:baseline;gap:14px;margin:0 0 6px;font:600 22px/1.2 var(--sans)}
.seite h3 .hanzi-klein{color:var(--lack);font-size:30px}
.orte{list-style:none;margin:0;padding:0}
.orte li{padding:16px 0;border-bottom:1px solid var(--linie)}
.orte b{display:block;font-size:17px}
.orte span{display:block;font-size:16px;color:var(--grau)}
.panorama{height:min(78vh,760px);border-radius:0;background:var(--tusche)}
.panorama-bild{position:absolute;top:0;bottom:0;left:-8%;right:-8%;background-size:cover;background-position:50% 62%;transform:translate3d(var(--px,0),0,0);will-change:transform}
.panorama figcaption{left:var(--rand);bottom:26px;font-size:15px}

/* ------------------------------------------------------------ 15:00 Pudong */
.pudong{background:var(--weiss);--zeichen:var(--glas)}
.hoehen{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:64px;align-items:end;margin-bottom:130px}
.hoehen-grafik{position:relative;height:clamp(340px,54vh,540px);display:flex;align-items:flex-end;justify-content:space-around;gap:8px;padding-left:64px;margin-bottom:88px;border-bottom:1px solid var(--text)}
.h-skala span{position:absolute;left:0;right:0;bottom:calc(var(--h) / 632 * 100%);border-top:1px dashed var(--linie);font-size:12px;line-height:1;color:var(--grau);padding-top:6px;pointer-events:none}
.h-skala span:first-child{border-top:0}
.h-turm{position:relative;flex:1;height:calc(var(--h) / 632 * 100%);display:flex;justify-content:center}
.h-turm svg{height:100%;width:auto;fill:var(--tusche-2);overflow:visible}
.h-turm.hoechster svg{fill:var(--glas)}
.anim .h-turm svg{transform:scaleY(0);transform-origin:50% 100%;transition:transform 1.5s var(--ease) calc(var(--v) * .28s)}
.hoehen-grafik.sichtbar .h-turm svg{transform:none}
.h-name,.h-wert{position:absolute;left:50%;transform:translateX(-50%);width:max-content;max-width:140px;text-align:center}
.h-name{top:calc(100% + 14px);font:600 13px/1.25 var(--sans)}
.h-wert{top:calc(100% + 50px);font-size:13px;line-height:1.3;color:var(--grau)}
.h-wert b{display:block;font-weight:400;color:var(--text)}
.anim .h-name,.anim .h-wert{opacity:0;transition:opacity .8s var(--ease) calc(var(--v) * .28s + .7s)}
.hoehen-grafik.sichtbar .h-name,.hoehen-grafik.sichtbar .h-wert{opacity:1}
.hoehen-foto{aspect-ratio:2/3}
.wirtschaft-titel{margin:0 0 34px;font:300 clamp(2rem,3.4vw,3rem)/1.1 var(--sans);letter-spacing:-.03em}
.spalten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px}
.spalten article{border-top:2px solid var(--text);padding-top:18px}
.spalten h4{margin:0 0 10px;font:600 19px/1.2 var(--sans)}
.spalten p{margin:0;font-size:17px;color:var(--grau)}
.turm-detail{height:min(72vh,720px);border-radius:0}
.turm-detail-bild{position:absolute;inset:0;background-size:cover;background-position:50% var(--py,30%)}
.turm-detail figcaption{left:var(--rand);bottom:26px;font-size:15px;max-width:32em}

/* ------------------------------------------------------------ 21:00 Nacht */
.nacht{background:var(--tusche);color:#fff;--intro-farbe:rgba(255,255,255,.8)}
.nacht-kopf{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden}
.nacht-bild{position:absolute;top:-10%;bottom:-10%;left:0;right:0;background-size:cover;background-position:40% 50%;transform:translate3d(0,var(--py,0),0);will-change:transform}
.nacht-kopf::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--tusche) 0%,rgba(17,26,46,0) 20%,rgba(17,26,46,0) 62%,rgba(17,26,46,.55) 90%,var(--tusche) 100%),linear-gradient(90deg,rgba(17,26,46,.62),rgba(17,26,46,0) 62%)}
.nacht-text{position:relative;z-index:1;padding:0 var(--rand) 7vh;max-width:calc(680px + var(--rand))}
.nacht .kapitel-zeit{color:var(--perle-hell)}
.neon{display:block;margin:0 0 12px;font:600 clamp(4rem,10vw,8.6rem)/1 var(--song);color:#ffe3f1;
  text-shadow:0 0 4px #fff,0 0 14px #ff7ab8,0 0 34px var(--perle),0 0 80px var(--perle)}
.anim .neon{opacity:.15;text-shadow:none}
.anim .neon.an{animation:flackern 1.8s linear both}
@keyframes flackern{
  0%,6%{opacity:.15;text-shadow:none}
  7%,10%{opacity:1;text-shadow:0 0 4px #fff,0 0 14px #ff7ab8,0 0 34px var(--perle),0 0 80px var(--perle)}
  11%,16%{opacity:.25;text-shadow:none}
  17%,100%{opacity:1;text-shadow:0 0 4px #fff,0 0 14px #ff7ab8,0 0 34px var(--perle),0 0 80px var(--perle)}}
.video{padding:72px 0 0}
.video-kopf{padding:0 var(--rand) 30px}
.video-kopf h3{margin:0;font:300 clamp(2rem,4vw,3.2rem)/1.1 var(--sans);letter-spacing:-.03em}
.video-kopf p{margin:6px 0 0;color:rgba(255,255,255,.7)}
.videobox{position:relative;aspect-ratio:21/9;overflow:hidden;background:#000}
.videobox video.v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1s ease;pointer-events:none}
.videobox video.v.aktiv{opacity:1}
.videobox .ton{position:absolute;right:20px;bottom:20px;z-index:3;background:rgba(17,26,46,.55);color:#fff;border:1px solid rgba(255,255,255,.45);border-radius:999px;padding:9px 18px;font:400 14px var(--sans);cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.videobox .ton:hover{background:rgba(17,26,46,.85)}

/* ------------------------------------------------------------ Shanghai in Bildern */
.galerie{background:var(--tusche);color:#fff;padding:0 0 110px;--intro-farbe:rgba(255,255,255,.7)}
.galerie-kopf{padding:110px var(--rand) 30px}
.galerie-kopf .intro{margin-bottom:0}
.galerie-box{position:relative;height:clamp(420px,80vh,880px);overflow:hidden;background:#000;touch-action:pan-y}
.dia{position:absolute;inset:0;background-size:cover;background-repeat:no-repeat;background-position:var(--pos,50% 50%);opacity:0;transition:opacity 1.6s var(--ease)}
.dia.an{opacity:1;z-index:1}
.dia.breit.laeuft{animation:dia-zoom-raus 8.5s linear both}
.dia.breit.laeuft.rein{animation-name:dia-zoom-rein}
.dia.hoch{background-position:50% var(--von,30%)}
.dia.hoch.laeuft{animation:dia-fahrt 8.5s cubic-bezier(.45,.05,.55,.95) both}
@keyframes dia-zoom-raus{from{transform:scale(1.14)}to{transform:scale(1.02)}}
@keyframes dia-zoom-rein{from{transform:scale(1.02)}to{transform:scale(1.14)}}
@keyframes dia-fahrt{from{background-position:50% var(--von,30%);transform:scale(1.06)}to{background-position:50% var(--bis,60%);transform:scale(1)}}
@media (max-aspect-ratio:5/4){.dia.breit{background-position:var(--pos-schmal,var(--pos,50% 50%))}}
@media (min-aspect-ratio:5/4){
  .dia.hoch{background-position:50% 50%}
  .dia.hoch::before{content:"";position:absolute;inset:-6%;background-image:inherit;background-size:cover;background-position:50% 50%;filter:blur(34px) brightness(.55) saturate(1.15)}
  .dia.hoch::after{content:"";position:absolute;top:7%;bottom:15%;right:var(--rand);aspect-ratio:4/5;border-radius:10px;
    background-image:inherit;background-size:cover;background-position:var(--fokus,50% 50%);box-shadow:0 30px 80px rgba(0,0,0,.45)}
  .dia.hoch.laeuft{animation:none}
  .dia.hoch.laeuft::before{animation:dia-zoom-raus 8.5s linear both}
  .dia.hoch.laeuft::after{animation:dia-rahmen 8.5s var(--ease) both}
  @keyframes dia-rahmen{from{transform:translate3d(0,18px,0) scale(.97)}to{transform:none}}
  .galerie-box.pause .dia::before,.galerie-box.pause .dia::after{animation-play-state:paused}
}
.galerie-box.pause .dia,.galerie-box.pause .galerie-fortschritt i{animation-play-state:paused}
.galerie-box::after{content:"";position:absolute;inset:auto 0 0 0;height:42%;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(17,26,46,0),rgba(17,26,46,.72))}
.galerie-unten{position:absolute;z-index:3;left:0;right:0;bottom:0;display:flex;align-items:flex-end;justify-content:space-between;gap:20px;padding:0 var(--rand) 34px}
.galerie-text{margin:0;font:300 clamp(1.2rem,2.2vw,1.8rem)/1.25 var(--sans);letter-spacing:-.01em;max-width:22em;transition:opacity .4s var(--ease),transform .4s var(--ease)}
.galerie-text.wechsel{opacity:0;transform:translateY(8px)}
.galerie-knoepfe{display:flex;gap:10px;flex:none}
.g-knopf{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.45);background:rgba(17,26,46,.35);color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .25s,border-color .25s}
.g-knopf svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.g-knopf:hover,.g-knopf:focus-visible{background:var(--perle);border-color:var(--perle)}
.galerie-fortschritt{position:absolute;z-index:3;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.15)}
.galerie-fortschritt i{display:block;height:100%;width:100%;background:var(--perle);transform-origin:left;animation:g-lauf 6.5s linear both}
@keyframes g-lauf{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ------------------------------------------------------------ Geschichte */
.geschichte{background:var(--weiss)}
.zeit-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:80px;padding:130px var(--rand)}
.zeit-kopf{position:sticky;top:calc(var(--kopf) + 40px);align-self:start}
.zeit-kopf .intro{margin-bottom:36px}
.zeit-foto{position:relative;margin:0;aspect-ratio:3/2;overflow:hidden;border-radius:6px;background:var(--tusche-2)}
.zeit-foto .zf{position:absolute;inset:0;background-size:cover;opacity:0;transform:scale(calc(var(--zoom,1.1) + var(--extra,0)));transition:opacity 1.2s var(--ease),transform 1.4s var(--ease)}
.zeit-foto .zf.an{opacity:1}
.zeit-foto .zf:not(.an){--extra:.1}
.zeit-foto figcaption{position:absolute;left:14px;bottom:12px;z-index:2;font-size:14px;color:#fff;background:rgba(17,26,46,.55);padding:6px 12px;border-radius:999px;transition:opacity .35s var(--ease),transform .35s var(--ease)}
.zeit-foto figcaption.wechsel{opacity:0;transform:translateY(6px)}
.zeit-box{position:relative}
.zeit{list-style:none;margin:0;padding:0 0 0 34px;position:relative}
.zeit::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:2px;background:var(--linie)}
.zeit::after{content:"";position:absolute;left:0;top:6px;width:2px;height:var(--fort,0);background:var(--lack)}
.zeit li{position:relative;padding:0 0 46px}
.zeit li::before{content:"";position:absolute;left:-40px;top:12px;width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid var(--linie);transition:border-color .4s,background .4s}
.zeit li.aktiv::before{border-color:var(--lack);background:var(--lack)}
.zeit .jahr{display:block;font:300 clamp(1.8rem,3vw,2.5rem)/1.1 var(--sans);letter-spacing:-.02em;margin:0 0 8px;font-variant-numeric:tabular-nums}
.zeit p{margin:0;color:var(--grau);max-width:30em}
.anim .zeit li{opacity:.35;transition:opacity .6s var(--ease)}
.anim .zeit li.aktiv{opacity:1}
.zeit-spitze{position:absolute;left:-6px;top:-1px;width:14px;height:14px;border-radius:50%;background:var(--lack);z-index:2;opacity:0;pointer-events:none;box-shadow:0 0 0 6px rgba(184,50,42,.18)}
.zeit-spitze.an{opacity:1}
.anim .zeit li .jahr,.anim .zeit li p{transform:translateX(28px);transition:transform .9s var(--ease)}
.anim .zeit li p{transition-delay:.08s}
.anim .zeit li .jahr{clip-path:inset(0 100% 0 0);transition:transform .9s var(--ease),clip-path 1s var(--ease)}
.anim .zeit li.da .jahr,.anim .zeit li.da p{transform:none}
.anim .zeit li.da .jahr{clip-path:inset(0 0 0 0)}
.anim .zeit li.da::after{content:"";position:absolute;left:-40px;top:12px;width:14px;height:14px;border-radius:50%;border:2px solid var(--lack);animation:puls 1.1s var(--ease) both;pointer-events:none}

/* ------------------------------------------------------------ Blog-Hinweis und Fuß */
.blog-hinweis{position:relative;overflow:hidden;padding:160px var(--rand);text-align:center;color:#fff;background:var(--tusche)}
.blog-bild{position:absolute;inset:-12% 0;background:url("bund.jpg") 60% 50%/cover no-repeat;transform:translate3d(0,var(--py,0),0)}
.blog-hinweis::after{content:"";position:absolute;inset:0;background:rgba(17,26,46,.62)}
.blog-text{position:relative;z-index:1;max-width:640px;margin:0 auto}
.blog-text h2{margin:0 0 14px;font:300 clamp(2.2rem,4.6vw,3.8rem)/1.08 var(--sans);letter-spacing:-.03em}
.blog-text p{margin:0 0 30px;color:rgba(255,255,255,.85)}
.fuss{background:var(--tusche);color:rgba(255,255,255,.72);font-size:15px}
.fuss-innen{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 28px;padding:34px var(--rand)}
.fuss a{color:#fff;text-decoration:none;margin-right:14px}
.fuss a:hover{text-decoration:underline}
.fuss .quelle{flex-basis:100%;font-size:13px;color:rgba(255,255,255,.5)}
.fuss .quelle a{color:rgba(255,255,255,.7);margin:0}

/* ------------------------------------------------------------ Foto groß */
.gross{width:100vw;height:100vh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(10,14,24,.94);color:#fff;display:none;place-items:center}
.gross[open]{display:grid}
.gross::backdrop{background:rgba(10,14,24,.6)}
.gross img{max-width:min(92vw,1800px);max-height:82vh;border-radius:6px;box-shadow:0 30px 90px rgba(0,0,0,.5)}
.gross[open] img{animation:gross-auf .45s var(--ease) both}
@keyframes gross-auf{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.gross p{position:absolute;left:0;right:0;bottom:4vh;margin:0;text-align:center;font-size:16px;color:rgba(255,255,255,.85)}
.gross-zu{position:absolute;top:20px;right:20px;width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.06);color:#fff;cursor:pointer;display:grid;place-items:center}
.gross-zu svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.gross-zu:hover{background:var(--lack);border-color:var(--lack)}

/* ------------------------------------------------------------ Tablet */
@media (max-width:1100px){
  .tag-nav{gap:20px}
  .tag-nav a{font-size:14px}
  .kapitel-raster{grid-template-columns:110px minmax(0,1fr);gap:40px}
  .hanzi-senkrecht{font-size:4.2rem}
  .uhr{width:300px}
}
/* ------------------------------------------------------------ Schmal (Tablet hochkant, Handy) */
@media (max-width:900px){
  :root{--kopf:104px}
  .kopf-innen{flex-wrap:wrap;height:auto;padding-top:10px;padding-bottom:4px;gap:6px 20px}
  .marke img{height:34px}
  .tag-nav{width:calc(100% + 2 * var(--rand));margin:0 calc(-1 * var(--rand));padding:0 var(--rand);overflow-x:auto;scrollbar-width:none;gap:22px}
  .tag-nav::-webkit-scrollbar{display:none}
  .tag-nav a{flex:none}
  .kopf{background:rgba(17,26,46,.5);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
  .start-inhalt{grid-template-columns:1fr;padding-top:calc(var(--kopf) + 36px)}
  .start-zeichen{order:-1;flex-direction:row;align-items:center;gap:14px;margin-bottom:-18px}
  .hanzi{flex-direction:row;font-size:clamp(3.2rem,13vw,5.4rem)}
  .hanzi-zusatz{text-align:left}
  .hanzi-zusatz{font-size:12px}
  .uhr{justify-self:stretch;width:auto;max-width:420px;margin:0 var(--rand) 22px}
  .zahlen{grid-template-columns:1fr 1fr}
  .zahlen>div:nth-child(3){padding-left:0;border-left:0}
  .zahlen>div:nth-child(n+3){border-top:1px solid rgba(255,255,255,.14)}
  .zahlen>div{padding:18px 0 20px}
  .kapitel-raster{grid-template-columns:1fr;gap:0;padding:96px var(--rand)}
  .schiene{position:static;flex-direction:row;align-items:baseline;gap:14px;margin-bottom:22px}
  .hanzi-senkrecht{flex-direction:row;font-size:3.4rem}
  .schiene-zeit{order:-1}
  .bluete{grid-template-columns:1fr;gap:32px;padding:96px var(--rand)}
  .mosaik{grid-template-columns:1fr 1fr;gap:12px}
  .m-teich{grid-column:1/3;grid-row:auto}
  .m-gasse{grid-column:1/2;grid-row:auto;aspect-ratio:3/4}
  .m-garten{grid-column:2/3;grid-row:auto;aspect-ratio:3/4}
  .m-text{grid-column:1/3;grid-row:auto;padding:16px 0 0}
  .ufer{grid-template-columns:1fr;gap:40px}
  .ufer-bild{position:relative;top:0;aspect-ratio:4/3}
  .hoehen{grid-template-columns:1fr;gap:40px;margin-bottom:96px}
  .hoehen-grafik{padding-left:46px;margin-bottom:96px}
  .hoehen-foto{aspect-ratio:4/5}
  .spalten{grid-template-columns:1fr;gap:28px}
  .videobox{aspect-ratio:16/10}
  .zeit-grid{grid-template-columns:1fr;gap:44px;padding:96px var(--rand)}
  .zeit-kopf{position:static}
  .zeit-grid>.zeit-foto{position:sticky;top:var(--kopf);z-index:3;margin-bottom:-12px;box-shadow:0 18px 40px rgba(17,26,46,.18)}
  .panorama,.turm-detail{height:56vh}
  .video{padding-top:56px}
  .galerie-kopf{padding-top:76px}
  .galerie{padding-bottom:76px}
  .nacht-kopf::after{background:linear-gradient(180deg,var(--tusche) 0%,rgba(17,26,46,0) 18%,rgba(17,26,46,.3) 38%,rgba(17,26,46,.82) 70%,var(--tusche) 100%)}
}
@media (max-width:560px){
  body{font-size:17px}
  .start h1{font-size:clamp(3.6rem,19vw,5.2rem)}
  .hanzi{font-size:3rem}
  .uhr-zeit{font-size:2rem}
  .wolken-inhalt{bottom:5vh}
  .wolken-lead{font-size:16px}
  .turm-linie{width:24px}
  .turm-schild{left:40px;top:-20px}
  .turm.links .turm-schild{right:40px;width:74px;top:-46px}
  .turm-schild small{font-size:10.5px;white-space:normal;max-width:96px;line-height:1.25;margin-bottom:4px}
  .turm-schild b{font-size:24px}
  .h-name{font-size:11px;max-width:80px}
  .h-wert{font-size:11px;top:calc(100% + 54px)}
  .hoehen-grafik{gap:2px;padding-left:40px}
  .galerie-box{height:clamp(420px,72vh,640px)}
  .galerie-unten{padding-bottom:26px}
  .blog-hinweis{padding:120px var(--rand)}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}