@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400 800; font-stretch: 62% 125%; font-display: swap; src: url(/fonts/archivo-latin.woff2) format('woff2'); }

:root { --fog: #F4F5F6; --ink: #121315; --muted: #55575C; --bg: #121315; --fg: #ECECEA; --accent: #6FA8C8; --m: clamp(16px, 2.4vw, 40px); --r: 12px; --maxw: 1240px; --paper-ink: #121315; --accent-ink: #121315; --ease-out: cubic-bezier(.23, 1, .32, 1); }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--fog); color: var(--ink); font-family: "Archivo", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }

/* Karte füllt den Bildschirm, keine Scrollseite */
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
#map { position: fixed; inset: 0; overflow: hidden; }
#gl, .fallback { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#gl { touch-action: none; cursor: grab; }
#gl.dragging { cursor: grabbing; }
.fallback { object-fit: cover; }
.fallback[hidden] { display: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Einstieg: eigene Seite über der Stadt, drei Looks zum Vergleichen (?look=a|b|c) */
.intro { position: absolute; inset: 0; z-index: 5; display: grid; align-items: center; overflow-y: auto; overscroll-behavior: contain; padding: 96px var(--m) var(--m);
         transition: opacity .7s var(--ease-out), transform .9s var(--ease-out), visibility 0s; }
.intro.off { opacity: 0; transform: scale(1.04); visibility: hidden; transition: opacity .6s var(--ease-out), transform .9s var(--ease-out), visibility 0s .9s; }
.intro .in { width: min(1080px, 100%); margin: 0 auto; display: flex; flex-direction: column; }
.intro .offers { align-self: stretch; }
.intro .go { align-self: center; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.intro .who { margin: 0 0 clamp(18px, 2.6vh, 32px); font-size: 15px; font-weight: 500; letter-spacing: .01em; color: var(--muted); }
/* Linien als Pseudo-Elemente, damit sie sich beim Erscheinen von links ziehen lassen */
.offers { list-style: none; margin: 0; padding: 0; position: relative; }
.offers::before, .offer::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--rule); transform-origin: left; pointer-events: none; }
.offers::before { top: 0; }
.offer { all: unset; position: relative; box-sizing: border-box; width: 100%; cursor: pointer; display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 6px 32px;
         padding: clamp(10px, 2vh, 22px) 0; color: inherit; transition: opacity .3s ease; }
.offer::after { bottom: 0; }
/* Hover: Akzentlinie zieht unter der Zeile durch, die anderen Zeilen treten zurück */
.offer::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; z-index: 1; background: var(--accent); transform: scaleX(0); transform-origin: left;
                 transition: transform .5s var(--ease-out); pointer-events: none; }
.offer b { font-weight: 800; font-stretch: 125%; font-size: clamp(28px, 4.6vw, 80px); line-height: .95; letter-spacing: -.035em;
           transition: transform .45s var(--ease-out), color .25s; }
.offer small { justify-self: end; max-width: 26ch; text-align: right; font-size: clamp(14px, 1.15vw, 17px); line-height: 1.35; color: var(--muted); transition: color .25s; }
.offer small i { display: inline-block; font-style: normal; color: var(--accent); transition: transform .45s var(--ease-out); }
.offer:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 2px; }
.offer:focus-visible b { transform: translateX(14px); }
.offer:focus-visible::before { transform: none; }
@media (hover: hover) and (pointer: fine) {
  .offer:hover b { transform: translateX(14px); }
  .offer:hover small { color: var(--ink2); }
  .offer:hover small i { transform: translateX(6px); }
  .offer:hover::before { transform: none; }
  .offers:has(.offer:hover) .offer:not(:hover) { opacity: .72; }
}
.offer:active b { transform: translateX(14px) scale(.985); transition-duration: .12s; }
.enter { margin-top: clamp(20px, 4vh, 44px); font: 600 15px "Archivo", sans-serif; padding: 13px 20px; border-radius: var(--r); border: 0; cursor: pointer;
         background: var(--ink); color: #fff; transition: transform .2s var(--ease-out), background-color .2s ease; }
.enter { display: inline-flex; align-items: center; gap: 12px; }
/* Maus mit rollendem Rad (wie im ersten Entwurf): sagt «scrollen», ohne Text */
.enter .mouse { width: 18px; height: 27px; border: 1.5px solid currentColor; border-radius: 9px; position: relative; flex: none; }
.enter .mouse::after { content: ""; position: absolute; left: 50%; top: 5px; width: 2px; height: 6px; margin-left: -1px; border-radius: 1px; background: currentColor; animation: wheel 1.6s ease-in-out infinite; }
@keyframes wheel { 50% { transform: translateY(6px); opacity: .25; } }
@media (hover: none) { .enter .mouse { display: none; } }
@media (prefers-reduced-motion: reduce) { .enter .mouse::after { animation: none; } }
@media (hover: hover) and (pointer: fine) { .enter:hover { transform: translateY(-2px); } .enter:hover .mouse::after { animation-duration: .9s; } }
.enter:active { transform: scale(.97); transition-duration: .1s; }
.enter:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Auftritt: Linien ziehen sich, die Angebote steigen aus ihrer Zeile, Kleintext und Knopf folgen. Nur einmal beim Laden. */
@keyframes rule-in { from { transform: scaleX(0); } }
@keyframes rise { from { translate: 0 60%; clip-path: inset(0 -4% 100% -4%); } to { translate: 0 0; clip-path: inset(-20% -4% -30% -4%); } }
@keyframes fade-up { from { opacity: 0; translate: 0 10px; } }
@media (prefers-reduced-motion: no-preference) {
  .intro .who { animation: fade-up .6s var(--ease-out) backwards; }
  .offers::before { animation: rule-in 1s var(--ease-out) .05s backwards; }
  .offer::after { animation: rule-in 1s var(--ease-out) backwards; animation-delay: calc(var(--i) * 80ms + 140ms); }
  .offer b { animation: rise .9s var(--ease-out) backwards; animation-delay: calc(var(--i) * 80ms + 80ms); }
  .offer small { animation: fade-up .7s var(--ease-out) backwards; animation-delay: calc(var(--i) * 80ms + 260ms); }
  .enter { animation: fade-up .7s var(--ease-out) .5s backwards; }
}
.offers li:nth-child(1) { --i: 0; } .offers li:nth-child(2) { --i: 1; } .offers li:nth-child(3) { --i: 2; }
@media (max-width: 900px) {
  .offer { grid-template-columns: 1fr; }
  .offer b { font-stretch: 112%; font-size: clamp(30px, 9vw, 64px); }
  .offer small { justify-self: start; text-align: left; }
}

/* a: Milchglas, die Stadt schimmert durch */
.intro, .intro[data-look="a"] { --rule: rgba(18,19,21,.16); --ink2: var(--ink); color: var(--ink);
  background: rgba(244,245,246,.55); backdrop-filter: blur(18px) saturate(130%); -webkit-backdrop-filter: blur(18px) saturate(130%); }
/* b: Fenster, die Stadt nur in den Buchstaben */
.intro[data-look="b"] { --rule: rgba(18,19,21,.14); background: var(--fog); backdrop-filter: none; -webkit-backdrop-filter: none; }
.intro[data-look="b"] .offer b { background: url(/map/city.webp) center 40% / cover fixed; -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 800; }
/* c: Graphit, Stadt gedämpft dahinter */
.intro[data-look="c"] { --rule: rgba(236,236,234,.16); --ink2: #fff; color: var(--fg);
  background-color: rgba(18,19,21,.5); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); text-shadow: 0 2px 24px rgba(0,0,0,.45); }
/* Zeigt man auf ein Angebot, dreht die Stadt dahinter zum Gebäude und der Schleier wird dünner */
.intro[data-look="c"].peek { background-color: rgba(18,19,21,.56); backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); }
.intro[data-look="c"]:not(.off) { transition: opacity .7s var(--ease-out), transform .9s var(--ease-out), visibility 0s, background-color .5s ease, backdrop-filter .5s ease; }
.intro[data-look="c"] .who, .intro[data-look="c"] .offer small { color: #C4C6CB; }
@media (hover: hover) and (pointer: fine) { .intro[data-look="c"] .offer:hover b { color: var(--accent); } }
.intro[data-look="c"] .offer:focus-visible b { color: var(--accent); }
.intro[data-look="c"] .enter { background: rgba(255,255,255,.12); color: #fff; text-shadow: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
@media (hover: hover) and (pointer: fine) { .intro[data-look="c"] .enter:hover { background: rgba(255,255,255,.22); } }
@media (prefers-reduced-motion: reduce) {
  .intro, .intro.off { transition: opacity .2s, visibility 0s; transform: none; }
  .intro .who, .offer small, .enter { animation: fade .4s ease backwards; }
  .offer b, .offer small i, .enter span { transition: color .2s; transform: none !important; }
}
@keyframes fade { from { opacity: 0; } }

/* Hinweis zur Steuerung, unten mittig */
.howto { position: absolute; left: 50%; bottom: var(--m); transform: translateX(-50%); margin: 0; padding: 9px 14px; border-radius: var(--r); white-space: nowrap;
         background: rgba(255,255,255,.8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-size: 13px; color: var(--muted);
         transition: opacity .4s ease, translate .5s var(--ease-out); }
/* Rundflug: Bildunterschrift zum angeflogenen Gebäude, Klick öffnet es */
.tour { position: absolute; left: 50%; bottom: var(--m); transform: translateX(-50%); display: flex; align-items: baseline; gap: 10px; padding: 11px 18px; border: 0; border-radius: var(--r);
        pointer-events: auto; cursor: pointer; white-space: nowrap; background: rgba(18,19,21,.86); color: #ECECEA; font: 500 15px "Archivo", sans-serif;
        backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.tour b { font-weight: 650; } .tour span { color: #A9ACB2; } .tour i { font-style: normal; }
.tour[hidden] { display: none; }
.tour:not([hidden]) + .howto { opacity: 0; }
.tour:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 700px) { .tour { bottom: calc(var(--m) + 52px); font-size: 14px; } .tour span { display: none; } }
/* Sobald man die Karte bewegt hat, braucht es den Hinweis nicht mehr */
.howto.done { opacity: 0; translate: 0 8px; pointer-events: none; }
.howto .m { display: none; }
@media (hover: none) { .howto .d { display: none; } .howto .m { display: inline; } }
@media (max-width: 700px) { .howto { bottom: calc(var(--m) + 52px); } }

/* Schilder an den Gebäuden: hell = Technik, Graphit = eigene Apps. JS setzt den Ankerpunkt (Punkt am Gebäude). */
.pins { position: absolute; inset: 0; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .4s, visibility 0s .4s; }
.pins.on { opacity: 1; visibility: visible; transition: opacity .4s; }
.pin { --bg: rgba(255,255,255,.86); --fg: var(--ink); --sub: var(--muted); --dot: var(--ink);
       position: absolute; left: 0; top: 0; width: 0; height: 0; padding: 0; border: 0; background: none; font: inherit; cursor: pointer; pointer-events: auto; }
.pin.app, .legend .app::before { --bg: rgba(18,19,21,.86); --fg: #ECECEA; --sub: #A9ACB2; --dot: var(--accent); }
.pin::before { content: ""; position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--dot); box-shadow: 0 0 0 2px rgba(255,255,255,.9); }
.pin::after { content: ""; position: absolute; left: -.5px; bottom: 0; width: 1px; height: var(--stem, 24px); background: var(--dot); }
.pin .l { position: absolute; left: 0; bottom: var(--stem, 24px); transform: translateX(calc(-50% + var(--dx, 0px))); padding: 7px 12px 8px; border-radius: var(--r); text-align: left; white-space: nowrap;
          background: var(--bg); color: var(--fg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 6px 24px rgba(0,0,0,.14);
          transform-origin: 50% 100%; transition: transform .25s var(--ease-out), box-shadow .25s ease, opacity .35s ease, scale .45s var(--ease-out), translate .45s var(--ease-out);
          transition-delay: 0s, 0s, var(--d, 0s), var(--d, 0s), var(--d, 0s); }
.pin::before, .pin::after { transition: opacity .3s ease var(--d, 0s); }
/* Schilder wachsen nacheinander aus ihrem Stiel, wenn die Karte freigegeben wird */
.pins:not(.on) .pin .l { opacity: 0; scale: .92; translate: 0 6px; transition-delay: 0s; }
.pins:not(.on) .pin::before, .pins:not(.on) .pin::after { opacity: 0; transition-delay: 0s; }
.pin.below .l { transform-origin: 50% 0; }
.pin:active .l { scale: .97; transition-delay: 0s; }
.pin .n { display: block; font-weight: 700; font-size: 14px; line-height: 1.2; }
.pin .s { display: block; font-size: 12.5px; line-height: 1.25; color: var(--sub); }
.pin.below .l { bottom: auto; top: var(--stem, 24px); }
.pin.below::after { bottom: auto; top: 0; }
.pin.hot .l, .pin:focus-visible .l { transform: translateX(calc(-50% + var(--dx, 0px))) translateY(-3px); box-shadow: 0 10px 30px rgba(0,0,0,.22); }
.pin:focus-visible { outline: none; }
.pin:focus-visible .l { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 600px) { .pin .l { padding: 5px 9px 6px; } .pin .n { font-size: 12.5px; } .pin .s { font-size: 11px; } }

.legend { position: absolute; left: var(--m); bottom: var(--m); display: flex; gap: 16px; flex-wrap: wrap; margin: 0; padding: 9px 14px; border-radius: var(--r);
          background: rgba(255,255,255,.8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-size: 13px; color: var(--ink); }
.legend span { display: flex; align-items: center; gap: 7px; }
.legend span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }
.legend .app::before { background: var(--accent); }

/* Glas-Menü wie auf der Hauptseite (styles.css), hier hell über der Karte, dunkel über dem Graphit darunter */
.nav { position: fixed; z-index: 10; top: 12px; left: 50%; transform: translateX(-50%); width: min(var(--maxw), calc(100% - 2 * var(--m)));
       display: flex; align-items: center; gap: 24px; padding: 8px 8px 8px 20px; border-radius: var(--r); color: var(--fg);
       background: rgba(22, 23, 26, .55); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%);
       box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 8px 32px rgba(0, 0, 0, .22);
       transition: background-color 240ms ease, color 240ms ease, box-shadow 240ms ease; }
.nav[data-on="light"] { background: rgba(244, 245, 246, .62); color: var(--paper-ink); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 8px 32px rgba(0,0,0,.10); }
.nav .logo { font-weight: 800; font-stretch: 125%; font-size: 18px; letter-spacing: -.01em; text-decoration: none; color: inherit; margin-right: auto; }
.nav .logo span { color: var(--accent); }
.nav ul { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; }
.nav ul a, .nav .lang { color: inherit; text-decoration: none; font-size: 15px; opacity: .72; transition: opacity 160ms ease; }
.nav ul a:hover, .nav .lang:hover, .nav ul a:focus-visible, .nav .lang:focus-visible { opacity: 1; }
.nav .lang { padding: 8px 4px; }
.cta { display: inline-block; padding: 10px 16px; border-radius: var(--r); background: var(--ink); color: #fff; text-decoration: none; font-weight: 500; font-size: 14px; white-space: nowrap; }
.nav .m-only { display: none; }
.sheet:focus { outline: none; }
.burger { display: none; background: none; border: 0; color: inherit; font: 500 15px "Archivo", sans-serif; cursor: pointer; padding: 14px 10px; }
@media (max-width: 820px) {
  .nav { flex-wrap: wrap; gap: 0 8px; padding-left: 16px; }
  .nav ul { order: 9; width: 100%; flex-direction: column; gap: 4px; max-height: 0; overflow: hidden; opacity: 0; visibility: hidden;
            transition: max-height 200ms var(--ease-out), opacity 120ms ease, visibility 0s 200ms; }
  .nav.open ul { max-height: 240px; padding-block: 8px 6px; opacity: 1; visibility: visible; transition: max-height 280ms var(--ease-out), opacity 200ms ease 60ms, visibility 0s; }
  .nav ul a { display: block; padding: 10px 2px; font-size: 17px; }
  .burger { display: block; }
  .nav .m-only { display: block; }
  .nav > .cta { display: none; }
}

/* Zeiger über der Karte: Ring statt Pfeil, wird über einem Gebäude zur Linse mit «Ansehen» */
.cursor { display: none; }
@media (hover: hover) and (pointer: fine) {
  #gl, #gl.dragging, .pin { cursor: none; }
  .cursor { display: grid; place-items: center; position: fixed; left: 0; top: 0; z-index: 9; width: 0; height: 0; pointer-events: none; }
  .cursor::before { content: ""; position: absolute; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.95);
                    box-shadow: 0 0 0 1px rgba(18,19,21,.25), 0 4px 18px rgba(0,0,0,.18); opacity: 0;
                    transition: width .35s var(--ease-out), height .35s var(--ease-out), background-color .25s, border-color .25s, opacity .2s, scale .16s var(--ease-out); }
  .cursor.down::before { scale: .86; }
  .cursor::after { content: ""; position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); opacity: 0; transition: opacity .2s; }
  .cursor span { position: relative; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--ink); opacity: 0; transform: scale(.8); transition: opacity .2s, transform .3s var(--ease-out); }
  .cursor.on::before, .cursor.on::after { opacity: 1; }
  .cursor.hot::before { width: 76px; height: 76px; background: rgba(255,255,255,.55); border-color: var(--accent);
                        backdrop-filter: blur(6px) saturate(140%); -webkit-backdrop-filter: blur(6px) saturate(140%); }
  .cursor.hot::after { opacity: 0; }
  .cursor.hot span { opacity: 1; transform: none; }
  .cursor.drag::before { width: 22px; height: 22px; }
}

/* Detailseite zum Gebäude */
.sheet { width: min(1120px, calc(100% - 2 * var(--m))); max-height: calc(100% - 84px - var(--m)); margin: 84px auto var(--m); padding: 0; border: 0; border-radius: var(--r);
         background: rgba(250, 250, 250, .9); backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%);
         color: var(--ink); box-shadow: 0 30px 90px rgba(0,0,0,.28); overflow: auto; overscroll-behavior: contain;
         display: none; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.sheet[open] { display: grid; animation: sheet-in .5s var(--ease-out); }
.sheet.noshots { width: min(640px, calc(100% - 2 * var(--m))); grid-template-columns: 1fr; }
.sheet::backdrop { background: rgba(18,19,21,.28); animation: fade .4s ease; }
@keyframes sheet-in { from { opacity: 0; transform: translateY(24px) scale(.985); } }
/* Schliessen schneller als Öffnen */
.sheet.out { animation: sheet-out .18s ease-in forwards; }
.sheet.out::backdrop { animation: fade-out .18s ease forwards; }
@keyframes sheet-out { to { opacity: 0; transform: translateY(10px) scale(.99); } }
@keyframes fade-out { to { opacity: 0; } }
.sheet { scrollbar-width: thin; scrollbar-color: rgba(18,19,21,.22) transparent; }
.sheet .txt { grid-area: 1 / 1; padding: clamp(28px, 4vw, 52px); }
.sheet .shots { grid-area: 1 / 2; }
/* Inhalt folgt der Seite um ein paar Millisekunden versetzt */
@keyframes item-in { from { opacity: 0; translate: 0 10px; } }
@media (prefers-reduced-motion: no-preference) {
  .sheet[open] .txt > * { animation: item-in .5s var(--ease-out) backwards; animation-delay: calc(var(--n, 6) * 35ms + 60ms); }
  .sheet[open] .shots > * { animation: fade .6s ease .12s backwards; }
}
.sheet .txt > :nth-child(1) { --n: 0; } .sheet .txt > :nth-child(2) { --n: 1; } .sheet .txt > :nth-child(3) { --n: 2; } .sheet .txt > :nth-child(4) { --n: 3; } .sheet .txt > :nth-child(5) { --n: 4; }
.sheet h2 { margin: .4em 0 0; font: 800 clamp(26px, 2.4vw, 34px)/1.08 "Archivo", sans-serif; font-stretch: 112%; letter-spacing: -.02em; text-wrap: balance; }
.sheet .lead { margin: .9em 0 0; font-size: 17px; line-height: 1.55; color: var(--muted); max-width: 60ch; text-wrap: pretty; }
.sheet .points { margin: 1.4em 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.sheet .points li { position: relative; padding-left: 20px; line-height: 1.4; }
.sheet .points li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.sheet .tips { margin: 1.6em 0 0; padding: 18px 20px; border-radius: var(--r); background: rgba(111,168,200,.12); }
.sheet .tips[hidden] { display: none; }
.sheet .tips ol { margin: .6em 0 0; padding-left: 1.2em; display: grid; gap: 8px; line-height: 1.4; }
.sheet .proof { margin: 1.4em 0 0; font-size: 14px; line-height: 1.45; color: var(--muted); }
.sheet .cta { margin-top: 1.8em; font-size: 15px; padding: 12px 18px; }
.sheet .shots { display: grid; gap: 14px; align-content: center; padding: 64px clamp(16px, 2vw, 28px) clamp(16px, 2vw, 28px); background: #121315; }
.sheet .shots img { display: block; width: 100%; height: auto; border-radius: 6px; }
.sheet.noshots .shots { display: none; }
/* Schliessen-Knopf bleibt beim Scrollen der Seite oben rechts stehen (sticky in derselben Rasterzeile) */
.sheet .close { grid-area: 1 / 1 / 2 / -1; justify-self: end; align-self: start; position: sticky; top: 12px; z-index: 2; margin: 12px 12px 0 0;
                display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--r); color: var(--ink); cursor: pointer;
                background: rgba(255,255,255,.86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 2px 10px rgba(0,0,0,.12);
                transition: background-color .16s ease, transform .16s var(--ease-out); }
.sheet .close svg { width: 16px; height: 16px; transition: transform .3s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .sheet .close:hover { background: #fff; } .sheet .close:hover svg { transform: rotate(90deg); } }
.sheet .close:active { transform: scale(.94); }
.sheet .close:focus { outline: none; }
.sheet .close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 820px) { .sheet[open] { grid-template-columns: 1fr; } .sheet .shots { grid-area: 1 / 1; } .sheet .txt { grid-area: 2 / 1; } .sheet .close { grid-area: 1 / 1 / 3 / -1; } .sheet.diagram .shots { grid-area: 2 / 1; } .sheet.diagram .txt { grid-area: 1 / 1; } }
.sheet.noshots .txt { grid-area: 1 / 1; }
@media (prefers-reduced-motion: reduce) { .sheet[open], .sheet.out { animation: fade .2s ease; } .sheet.out { animation-name: fade-out; animation-fill-mode: forwards; } .sheet .close svg { transition: none; } }

/* Kleiner Hinweis über dem Titel: gemischte Schreibung, dunkleres Gletscherblau für Kontrast auf Hell */
.kicker { margin: 0; font-size: 14px; letter-spacing: 0; color: #3A6D8C; font-weight: 600; }
::selection { background: var(--accent); color: var(--ink); text-shadow: none; }
.cta { transition: background-color .16s ease, transform .16s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .cta:hover { background: #2A2C30; } .nav:not([data-on="light"]) .cta:hover { background: #fff; } }
.nav:not([data-on="light"]) .cta { background: #ECECEA; color: var(--ink); }
.cta:active { transform: scale(.97); }
.cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.cta[hidden] { display: none; }
.sheet .shots img { max-height: 72vh; width: auto; max-width: 100%; justify-self: center; }
.sheet .mail { font: 600 15px "Archivo", sans-serif; border: 0; cursor: pointer; margin-top: 1.8em; }

/* Schweizer Karte auf der Microsoft-Seite (wie Hauptseite, Daten: Natural Earth) */
.map { display: grid; place-items: center; padding: clamp(16px, 4%, 40px); }
.map svg { width: 100%; height: auto; overflow: visible; }
.map .ch { fill: rgba(111, 168, 200, .06); stroke: var(--accent); stroke-width: 1.6; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.map .dc circle { fill: var(--accent); }
.map .dc .halo { fill: rgba(111, 168, 200, .18); }
.map .dc text { fill: var(--fg); font: 700 26px "Archivo", sans-serif; font-stretch: 112%; }
.map .dc text.sub { fill: #A9ACB2; font: 400 18px "Archivo", sans-serif; }
@media (prefers-reduced-motion: no-preference) {
  .map .dc .halo { transform-box: fill-box; transform-origin: center; animation: dcPulse 3.2s var(--ease-out) infinite; }
  .map .dc + .dc .halo { animation-delay: 1.6s; }
}
@keyframes dcPulse { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
.intro.scrub, .intro[data-look="c"].scrub { transition: background-color .5s ease, backdrop-filter .5s ease; }

/* Harness-Grafik auf der Agent-Harness-Seite (wie Hauptseite) */
.harness { --panel: #1C1D20; padding: clamp(12px, 2vw, 24px); }
.harness svg { display: block; width: 100%; height: auto; }
.harness .h-tall { display: none; max-width: 420px; margin: 0 auto; }
@media (max-width: 820px) { .harness .h-wide { display: none; } .harness .h-tall { display: block; } }
.harness .hf { fill: rgba(111, 168, 200, .04); stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 6 6; }
.harness .hl { fill: var(--accent); font: 700 22px "Archivo", sans-serif; font-stretch: 112%; letter-spacing: .02em; }
.harness .hc line, .harness .hg { stroke: var(--accent); stroke-width: 1.5; opacity: .55; }
.harness .hm { fill: var(--panel); stroke: var(--accent); stroke-width: 2; }
.harness .hmt { fill: var(--fg); font: 800 28px "Archivo", sans-serif; font-stretch: 112%; }
.harness .hn rect { fill: var(--panel); stroke: rgba(255, 255, 255, .14); }
.harness .he rect { stroke: var(--accent); }
.harness .hn text { fill: var(--fg); font: 700 22px "Archivo", sans-serif; font-stretch: 112%; }
.harness text.s { fill: #A2A4A8; font: 400 17px "Archivo", sans-serif; font-stretch: 100%; }

/* Rechtliches, klein unten rechts */
.legal { position: fixed; right: var(--m); bottom: var(--m); z-index: 6; display: flex; gap: 4px; margin: 0; padding: 3px 6px; border-radius: var(--r); font-size: 13px;
          background: rgba(255,255,255,.8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.legal a { color: var(--muted); text-decoration: none; padding: 6px 8px; }
.legal a:hover, .legal a:focus-visible { color: var(--ink); text-decoration: underline; }

@media (max-width: 820px) { .legal { display: none; } .nav.open ul { max-height: 360px; } }

/* Rundflug: nur das Schild des angeflogenen Gebäudes bleibt kräftig */
.pins.touring .legend { opacity: 0; }