/* Supplied Hauptstadtracker identity */
html{scroll-padding-top:100px}
.header{overflow:visible}
.header-inner{min-height:86px;height:86px}
.brand{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;align-self:flex-start;flex:0 0 150px;width:150px;height:112px;padding:3px 5px;background:var(--paper);border-radius:0 0 17px 17px;box-shadow:0 12px 26px #00000024}
.brand img{display:block;width:140px;height:auto;max-width:none}
.footer-inner{align-items:center}
.footer-logo{display:inline-flex;align-items:center;justify-content:center;flex:0 0 160px;background:var(--paper);border-radius:18px;padding:7px}
.footer-logo img{width:146px;height:auto;display:block}
.intro,.approach,.contact,.boot-values{position:relative;isolation:isolate;overflow:hidden}
.intro::before,.approach::before,.contact::before,.boot-values::before{content:"";position:absolute;z-index:0;width:clamp(300px,41vw,570px);aspect-ratio:1448/1086;background:url("logo-hauptstadttracker-marke.png") center/contain no-repeat;opacity:.075;pointer-events:none}
.intro::before{right:-95px;top:5%}
.approach::before{right:-105px;top:50%;transform:translateY(-50%);filter:brightness(0) invert(1);opacity:.09}
.contact::before{left:-160px;bottom:-125px;opacity:.075}
.boot-values::before{right:-90px;top:30px;opacity:.07}
.intro>* , .approach>.wrap, .contact>.wrap, .boot-values>.boot-shell{position:relative;z-index:1}
@media(max-width:650px){html{scroll-padding-top:84px}.header-inner{min-height:70px;height:70px}.brand{flex-basis:115px;width:115px;height:85px;padding:2px 5px;border-radius:0 0 13px 13px}.brand img{width:105px}.nav{top:70px;padding-top:29px}.footer-inner{align-items:flex-start;flex-direction:column;gap:16px}.footer-logo{flex-basis:auto;width:165px}.footer-logo img{width:151px}.intro::before,.approach::before,.contact::before,.boot-values::before{width:340px;opacity:.055}.intro::before{right:-185px;top:6%}.approach::before{right:-190px}.contact::before{left:-220px;bottom:-90px}.boot-values::before{right:-180px;top:70px}}

/* A light glass finish appears once the visitor starts scrolling. */
.header,.brand{transition:background-color .35s ease,box-shadow .35s ease}
.header.is-scrolled{background:rgba(8,43,36,.88);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 12px 32px #082b241f}
body.detail-page .header.is-scrolled{background:rgba(246,243,234,.82);border-bottom-color:#12372e24}
.header.is-scrolled .brand{background:rgba(255,255,255,.985);box-shadow:0 14px 28px #00000020}
@media(prefers-reduced-motion:reduce){.header,.brand{transition:none}}

/* Language switch (DE | EN) in the header */
.lang-switch{display:inline-flex;align-items:center;flex:none;gap:2px;padding:3px;border:1px solid currentColor;border-radius:999px;font-size:.8rem;font-weight:850;letter-spacing:.06em;line-height:1}
.lang-switch a{display:inline-flex;align-items:center;justify-content:center;min-width:38px;min-height:30px;padding:0 9px;border-radius:999px;text-decoration:none;opacity:.78;transition:background-color .2s,color .2s,opacity .2s}
.lang-switch a:hover{opacity:1;background:#ffffff22}
.lang-switch a.is-active{opacity:1;background:var(--white);color:var(--forest)}
body.detail-page .lang-switch a:hover{background:#082b2414}
body.detail-page .lang-switch a.is-active{background:var(--forest);color:var(--white)}
.header-inner .nav{margin-left:auto}
.header-inner .lang-switch{margin-left:clamp(14px,2vw,28px)}
@media(max-width:650px){.header-inner .lang-switch{order:2;margin-left:auto}.menu-button{order:3}.header-inner .nav{margin-left:0}}
.footer-bottom div a+a{margin-left:0}

/* Sprachwechsel-Übergang (Texte: scharf -> unscharf -> scharf) */
:root.lang-leaving :is(main,.footer) :is(h1,h2,h3,h4,p,li,summary,dt,dd,label,figcaption,blockquote,small,address,.eyebrow,.button,.card-link,span),:root.lang-leaving :is(.nav a,.footer a,.lang-switch a){filter:blur(12px);opacity:0;transition:filter .5s ease,opacity .45s ease!important}
@keyframes lang-text-in{from{opacity:0;filter:blur(14px)}to{opacity:1;filter:blur(0)}}
.lang-text{animation:lang-text-in 1s cubic-bezier(.2,.76,.2,1) var(--ld,0ms) backwards}
@media(prefers-reduced-motion:reduce){.lang-text{animation:none}:root.lang-leaving *{filter:none!important;opacity:1!important}}
/* Beim Sprachwechsel keine Scroll-Reveals der Bilder/Blöcke abspielen (verhindert Zucken) – nur der Text blendet ein */
html.is-lang-arriving [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
html.is-lang-arriving .hero-slide{transition:none!important}