/* Page layouts. Tokens come from style.css; nothing here defines a new colour, radius or shadow. */

/* Overview: headline beside a photo mosaic, a bento of key figures, three photo cards, the map */
.hero-intro { display: grid; gap: var(--s4); align-items: center; margin: 0 0 var(--s5); }
.hero-copy .kicker { display: inline-flex; margin: 0 0 var(--s2); padding: 6px 12px; border-radius: var(--pill); background: var(--accent-tint); font-size: var(--t12); }
.hero-intro h1 { font-size: 40px; line-height: 1; letter-spacing: -.035em; margin: 0 0 var(--s2); max-width: 14ch; }
.hero-intro .lede { font-size: 17px; line-height: 1.5; color: var(--text-2); max-width: 50ch; margin-bottom: var(--s3); }
.hero-intro .btn-row { margin-bottom: var(--s3); }
.btn.big { min-height: 52px; padding: 0 24px; font-size: var(--t16); }
.hero-intro .asof { display: flex; align-items: center; font-size: var(--t14); color: var(--text-2); margin: 0; }
.asof .pulse { flex: none; margin: 0 12px 0 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--open-mark); box-shadow: 0 0 0 4px var(--open-bg); animation: pulse 2.4s var(--ease) infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px rgb(19 128 75 / 0); } }
.mosaic { display: grid; gap: 10px; grid-template-columns: repeat(4, 1fr); grid-template-rows: 150px 110px; }
.tile { position: relative; display: block; border-radius: var(--radius-l); overflow: hidden; color: #fff; box-shadow: var(--shadow); isolation: isolate; }
.tile .aerial { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; }
.tile::after { content: ""; position: absolute; inset: 0; background: var(--scrim); opacity: .85; pointer-events: none; }
.tile-name { position: absolute; left: 12px; right: 12px; top: 10px; z-index: 1; font-size: var(--t12); font-weight: 600; line-height: 1.25;
  text-shadow: 0 1px 6px rgb(0 0 0 / .6); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile .credit { z-index: 1; }
.tile:hover .aerial img { transform: scale(1.05); }
.tile:hover { text-decoration: none; }
.tile-1 { grid-column: 1 / 3; grid-row: 1 / 3; }
.tile-2, .tile-3 { grid-column: 3 / 5; }
.tile-4, .tile-5 { display: none; }
@media (min-width: 720px) {
  .hero-intro h1 { font-size: var(--t52); }
  .hero-intro .lede { font-size: var(--t20); }
  .mosaic { grid-template-rows: 200px 160px; }
}
@media (min-width: 1000px) {
  .hero-intro { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--s5); }
  .hero-intro h1 { font-size: 64px; }
  .mosaic { grid-template-columns: repeat(6, 1fr); grid-template-rows: 190px 150px 150px; }
  .tile-1 { grid-column: 1 / 5; grid-row: 1 / 3; }
  .tile-2 { grid-column: 5 / 7; grid-row: 1; }
  .tile-3 { grid-column: 5 / 7; grid-row: 2; }
  .tile-4 { display: block; grid-column: 1 / 3; grid-row: 3; }
  .tile-5 { display: block; grid-column: 3 / 7; grid-row: 3; }
}

/* Key figures: glass tiles, the first one dark with a teal glow */
.stats { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); margin-bottom: var(--s5); }
.stat { position: relative; display: grid; gap: 6px; align-content: start; padding: var(--s2) var(--s2) var(--s3); color: var(--text); text-decoration: none;
  background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border-radius: var(--radius-l); box-shadow: var(--shadow); }
.stat:hover { text-decoration: none; }
.stat .stat-top { display: flex; align-items: center; justify-content: space-between; color: var(--text-2); margin-bottom: var(--s1); }
.stat .stat-top svg { width: 32px; height: 32px; padding: 7px; border-radius: 50%; background: var(--tint); }
.stat .num { font-size: 34px; }
.stat-label { color: var(--text-2); font-size: var(--t14); line-height: 1.35; }
.stat .go { color: var(--text-2); opacity: 0; transform: translateX(-4px); transition: opacity .2s, transform .2s; }
.stat:hover .go { opacity: 1; transform: none; }
.stat.is-zero .num { color: rgb(var(--rgb-grey) / .5); }
.stat-note { font-size: var(--t12); color: var(--text-2); line-height: 1.4; }
.stat.lead { grid-column: 1 / -1; color: #FFFFFF; -webkit-backdrop-filter: none; backdrop-filter: none;
  background: radial-gradient(90% 110% at 100% 0%, rgb(20 184 166 / .32), transparent 60%), #0E1116;
  box-shadow: 0 1px 2px rgb(14 17 22 / .2), 0 20px 40px -20px rgb(14 17 22 / .6); }
/* The other figures: glass with a soft glow and icon in their own colour */
.stat.tone-flats { --tone: 99 102 241; } .stat.tone-open { --tone: 19 128 75; } .stat.tone-free { --tone: 14 165 233; } .stat.tone-build { --tone: 217 119 6; }
.stat[class*="tone-"] { background: radial-gradient(110% 120% at 100% 0%, rgb(var(--tone) / .2), transparent 62%), var(--glass); }
.stat[class*="tone-"] .stat-top svg { background: rgb(var(--tone) / .14); color: rgb(var(--tone)); }
.stat[class*="tone-"] .num { background: linear-gradient(180deg, var(--text) 40%, rgb(var(--tone))); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat[class*="tone-"].is-zero .num { background: none; color: rgb(var(--rgb-grey) / .5); }
:root[data-theme="dark"] .stat[class*="tone-"] { background: radial-gradient(110% 120% at 100% 0%, rgb(var(--tone) / .3), transparent 62%), var(--glass); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .stat[class*="tone-"] { background: radial-gradient(110% 120% at 100% 0%, rgb(var(--tone) / .3), transparent 62%), var(--glass); } }
.stat.lead .stat-label, .stat.lead .stat-top, .stat.lead .go { color: #FFFFFF; opacity: .85; }
.stat.lead .stat-top svg { background: rgb(255 255 255 / .14); }
@media (min-width: 720px) {
  .stats { grid-template-columns: repeat(4, 1fr); }
  .stat.lead { grid-column: 1 / 3; grid-row: 1 / 3; align-content: end; }
  .stat.lead .num { font-size: 88px; letter-spacing: -.055em; }
  .stat.lead .stat-label { font-size: var(--t16); }
  .stat .num { font-size: 40px; }
}
@media (min-width: 1100px) {
  .stats { grid-template-columns: 1.6fr repeat(4, 1fr); }
  .stat.lead { grid-column: 1; grid-row: 1; }
  .stat.lead .num { font-size: 64px; }
}

/* Three ways in: photo first */
.entries { display: grid; gap: var(--s2); margin-bottom: var(--s5); }
.entry { display: grid; grid-template-rows: auto 1fr; color: var(--text); text-decoration: none; background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border-radius: var(--radius-l); overflow: hidden; box-shadow: var(--shadow); }
.entry:hover { text-decoration: none; }
.entry-media { position: relative; display: block; aspect-ratio: 16 / 10; background: var(--tint); overflow: hidden; }
.entry-media .aerial { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; }
.entry:hover .entry-media img { transform: scale(1.04); }
.entry-media.no-photo { background: linear-gradient(135deg, var(--accent-tint), var(--tint-2)); }
.entry-icon { position: absolute; left: 14px; top: 14px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: rgb(10 12 16 / .5); color: #FFFFFF; border: 1px solid rgb(255 255 255 / .35);
  -webkit-backdrop-filter: blur(14px) saturate(1.6); backdrop-filter: blur(14px) saturate(1.6); box-shadow: 0 8px 20px -6px rgb(0 0 0 / .45); }
.entry-body { display: grid; gap: 6px; padding: var(--s2) var(--s3) var(--s3); align-content: start; }
.entry-body strong { font-family: var(--font-display); font-size: var(--t20); letter-spacing: -.025em; line-height: 1.2; display: flex; justify-content: space-between; gap: var(--s1); }
.entry-body strong::after { content: "→"; color: var(--text-2); transition: transform .2s, color .2s; }
.entry:hover .entry-body strong::after { transform: translateX(3px); color: var(--accent); }
.entry-text { color: var(--text-2); font-size: var(--t14); }
.entry-where { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: var(--t12); color: var(--text-2); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.entry-where svg { flex: none; }
@media (min-width: 720px) { .entries { grid-template-columns: repeat(3, 1fr); } }
.audiences { margin-bottom: var(--s5); }
.audiences ul { display: grid; gap: var(--s3); margin: 0; padding: 0; list-style: none; }
.audiences p { margin: 4px 0 0; }
@media (min-width: 720px) { .audiences ul { grid-template-columns: repeat(3, 1fr); } }

/* "Passt zu mir" on Erkunden: a button in the bar, a line above the list, a panel over the list */
.me-button.is-set { background: var(--primary); color: var(--on-primary); box-shadow: var(--primary-edge); -webkit-backdrop-filter: none; backdrop-filter: none; }
.me-button.is-set:hover { background: var(--primary); opacity: .88; }
.me-bar { padding: 0 12px 8px; }
.me-invite { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 12px 14px; border: 0; border-radius: var(--radius-l);
  background: var(--glass-strong); box-shadow: var(--shadow); color: var(--text); font: inherit; cursor: pointer; transition: box-shadow .2s var(--ease); }
.me-invite:hover { box-shadow: var(--lift); }
.me-invite > span:last-child { display: grid; gap: 2px; }
.me-invite-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--primary); color: var(--on-primary); flex: none; }
.me-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 8px 8px 8px 14px; border-radius: var(--radius-l); background: var(--glass-strong); box-shadow: var(--shadow); font-size: var(--t14); }
.me-label { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--accent); }
.me-text { flex: 1 1 200px; min-width: 0; color: var(--text-2); }
.me-summary .btn { min-height: 36px; padding: 0 12px; font-size: var(--t12); }
.me-out[aria-pressed="true"] { background: var(--tint-2); }
.me-panel { position: absolute; inset: 0; z-index: 8; overflow-y: auto; padding: var(--s2); background: var(--surface); }
.me-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s1); }
.me-head h2 { margin: 0; font-size: var(--t26); letter-spacing: -.03em; }
.me-lede { margin: 4px 0 var(--s2); }
.me-panel .fit-form { padding-bottom: var(--s4); }
.fit-actions { position: sticky; bottom: 0; padding: 12px 0; background: linear-gradient(rgb(var(--rgb-surface) / 0), var(--surface) 30%); }
/* A result judged against the situation: its score, or why it rules the visitor out */
.result-fit { display: flex; align-items: center; justify-content: space-between; gap: var(--s1); padding: 0 8px 8px 12px; flex-basis: 100%; }
.result:has(.result-fit) { flex-wrap: wrap; }
.fit-in { display: inline-flex; align-items: center; gap: 8px; }
.fit-num { font-family: var(--font-display); font-weight: 700; font-size: var(--t20); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.fit-in .gauge { width: 72px; height: 6px; border-radius: 3px; background: var(--tint-2); overflow: hidden; }
.fit-in .gauge > span { display: block; height: 100%; border-radius: 3px; background: var(--accent); }
.fit-out { display: inline-flex; align-items: flex-start; gap: 6px; font-size: var(--t12); color: var(--closed); }
.fit-out .mark { flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--closed-bg); font-size: 10px; }
.result-fit .why { min-height: 32px; padding: 0 10px; font-size: var(--t12); color: var(--text-2); }
.result.is-out { opacity: .72; }
.result.is-out:hover { opacity: 1; }
.why-dialog { width: min(560px, calc(100vw - var(--s4))); }
.why-dialog h2 { margin-bottom: 4px; }
.why-total { font-weight: 600; color: var(--accent); margin: 0 0 var(--s1); }
@media (min-width: 900px) {
  .sheet { grid-column: 1; grid-row: 1; }
  .me-panel { position: relative; inset: auto; grid-column: 1; grid-row: 1; border-radius: var(--radius-xl); box-shadow: var(--shadow); padding: var(--s3); }
  .explore-map-wrap { grid-column: 2; grid-row: 1; }
  .me-bar { padding: 0 4px 8px; }
}

/* The overview map */
.map-card { padding: 12px; display: grid; gap: var(--s2); }
.map-side { display: grid; gap: var(--s1); align-content: start; padding: var(--s1) var(--s1) var(--s1); }
.map-side > h2 { margin: 0; font-size: var(--t26); letter-spacing: -.03em; }
.map-side > p { margin: 0; }
.map-side .legend { margin: 0 0 var(--s1); }
.side-title { margin: var(--s2) 0 0; font-size: var(--t14); color: var(--text-2); font-weight: 600; }
.map-side .btn { justify-self: start; margin-top: var(--s1); }
.areas { list-style: none; margin: 0; padding: 0; counter-reset: area; }
.areas a { display: flex; align-items: center; gap: 12px; min-height: var(--target); padding: 0 10px; margin: 0 -10px; border-radius: var(--radius); color: var(--text); text-decoration: none; font-size: var(--t14); transition: background .2s; }
.areas a::before { counter-increment: area; content: counter(area); display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--tint-2); color: var(--text-2); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.areas a span:first-child { flex: 1; }
.areas a:hover { background: var(--tint); }
.areas .n { font-weight: 700; font-variant-numeric: tabular-nums; }
.map { position: relative; width: 100%; border-radius: var(--radius); overflow: hidden; background: var(--tint); }
.map-overview { height: 320px; border-radius: calc(var(--radius-l) - 6px); }
.map-loading { position: absolute; inset: 0; }
.map-failed { display: grid; place-items: center; }
.map-failed .state { padding: var(--s3); }
.legend { display: flex; flex-wrap: wrap; gap: 4px var(--s2); list-style: none; padding: 0; margin: var(--s1) 0 0; font-size: var(--t12); color: var(--text-2); }
.legend li { display: flex; align-items: center; gap: 6px; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px rgb(var(--rgb-ink) / .15); }
.dot.st-open { background: var(--open-mark); } .dot.st-waiting-list { background: var(--waiting-mark); }
.dot.st-closed { background: var(--closed-mark); } .dot.st-unknown { background: var(--unknown-mark); }
@media (max-width: 899px) { .map-card > .map { order: -1; } }
@media (min-width: 720px) { .map-overview { height: 440px; } }
@media (min-width: 900px) { .map-card { grid-template-columns: 300px 1fr; } .map-side { padding: var(--s2); } }

/* Explore: a floating list of photo cards beside the map; on phones the list is a sheet over it */
.explore { display: flex; flex-direction: column; height: calc(100vh - 96px); height: calc(100dvh - 96px); min-height: 560px; }
.explore-bar { display: flex; gap: var(--s1); padding: 12px var(--s2) 6px; align-items: center; }
.explore-bar .search { position: relative; flex: 1 1 auto; min-width: 0; }
.explore-bar .search svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--text-2); pointer-events: none; }
.explore-bar .search input { padding-left: 44px; border-radius: var(--pill); box-shadow: var(--shadow); border-color: transparent; }
.explore-bar .sort { flex: 0 1 150px; }
.explore-bar select { border-radius: var(--pill); box-shadow: var(--shadow); border-color: transparent; }
.explore-bar .btn { box-shadow: var(--shadow); border-color: transparent; }
.explore-bar .btn.primary, .explore-bar .btn.is-set { box-shadow: var(--primary-edge); }
@media (max-width: 719px) { .explore-bar { flex-wrap: wrap; } .explore-bar .search { flex-basis: 100%; } .explore-bar .sort { flex: 1 1 0; } }
@media (min-width: 720px) { .explore-bar { padding: var(--s2) var(--s3) var(--s1); } .explore-bar .sort { flex-basis: 240px; } .explore-bar .search { flex-basis: 420px; flex-grow: 0; } }
.quick { position: relative; display: flex; gap: 8px; padding: 6px var(--s2) 12px; overflow-x: auto; scrollbar-width: none; }
@media (min-width: 720px) { .quick { padding: 6px var(--s3) 12px; } }
.qchip { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: var(--pill);
  border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-size: var(--t14); font-weight: 500; cursor: pointer; position: relative;
  transition: background .2s, border-color .2s, color .2s; }
.qchip::after { content: ""; position: absolute; inset: -4px 0; }
.qchip:hover { border-color: rgb(var(--rgb-ink) / .35); }
.qchip .n { font-size: var(--t12); color: var(--text-2); font-variant-numeric: tabular-nums; }
.qchip[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.qchip[aria-pressed="true"] .n { color: rgb(var(--rgb-paper) / .7); }
.qchip[aria-pressed="true"]::before { content: "✓"; font-size: var(--t12); }
.qchip.sep { margin-left: var(--s1); }
.qreset { flex: none; min-height: 36px; margin-left: auto; color: var(--accent); }
.project .links a { display: inline-flex; align-items: center; min-height: var(--target); }
.filter-panel { display: grid; gap: var(--s2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
  margin: 0 var(--s2) 12px; padding: var(--s3); background: var(--surface); border-radius: var(--radius-l); box-shadow: var(--lift); max-height: 50vh; overflow: auto; }
.filter-panel .services { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0 var(--s2); }
.filter-panel .services legend { width: 100%; }
.active-filters { padding: 0 var(--s2); margin: 0; }
.active-filters:not(:empty) { padding: 0 var(--s2) 12px; }
.explore-body { position: relative; flex: 1; min-height: 0; }
.explore-map-wrap { position: absolute; inset: 0; }
.explore-map { position: absolute; inset: 0; border-radius: 0; }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; height: 44%; display: flex; flex-direction: column;
  background: var(--bg); border-radius: var(--radius-xl) var(--radius-xl) 0 0; box-shadow: 0 -10px 40px -12px rgb(0 0 0 / .35); transition: height .3s var(--ease); }
.sheet.full { height: 88%; }
.sheet-handle { display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: var(--target); width: 100%;
  background: none; border: 0; color: var(--text-2); font: inherit; font-size: var(--t14); font-weight: 600; cursor: pointer; padding: 10px 0 0; }
.grip { width: 40px; height: 5px; border-radius: 3px; background: rgb(var(--rgb-ink) / .18); }
.list-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s1); padding: 0 var(--s2); }
.sheet .count { margin: 0; font-size: var(--t14); color: var(--text-2); font-variant-numeric: tabular-nums; }
.sheet .count b { color: var(--text); }
.inview { font-size: var(--t14); }
.az-bar { display: flex; flex-wrap: wrap; gap: 2px; padding: 4px var(--s2) 6px; }
.az { min-width: 30px; min-height: 32px; padding: 0 4px; border: 0; border-radius: var(--radius); background: none; color: var(--text); font: inherit; font-size: var(--t14); font-weight: 600; cursor: pointer; }
.az:hover:not(:disabled) { background: var(--tint-2); }
.az:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.az:disabled { color: var(--text-2); opacity: .4; cursor: default; }
/* Phones: one row that scrolls sideways, every letter a full 44px target. */
@media (max-width: 899px) { .az-bar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .az { flex: none; min-width: 44px; min-height: 44px; } }
.results { list-style: none; margin: 0; padding: 4px 12px var(--s2); overflow-y: auto; flex: 1; display: grid; gap: 10px; align-content: start; }
.result { position: relative; display: flex; align-items: stretch; background: var(--glass-strong); border-radius: var(--radius-l); box-shadow: var(--shadow);
  transition: box-shadow .25s var(--ease), transform .25s var(--ease); }
.result.hot, .result:hover { box-shadow: var(--lift), 0 0 0 2px var(--accent); }
.result-link { flex: 1; display: grid; grid-template-columns: 112px 1fr; gap: 14px; padding: 10px; color: var(--text); text-decoration: none; min-width: 0; }
.result-link:hover { text-decoration: none; }
.result-photo { position: relative; display: grid; place-items: center; border-radius: var(--radius); overflow: hidden; background: var(--tint); aspect-ratio: 4 / 3; align-self: start; color: rgb(var(--rgb-grey) / .6); }
.result-photo .aerial { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; }
.result-photo .credit { right: 4px; bottom: 4px; padding: 0 5px; font-size: 9px; }
.result:hover .result-photo img { transform: scale(1.05); }
.result-text { display: grid; gap: 3px; align-content: start; min-width: 0; padding-right: 40px; }
.result-name { font-size: var(--t16); font-weight: 600; letter-spacing: -.015em; line-height: 1.25; }
.result .place { font-size: var(--t14); color: var(--text-2); }
.result .chips { margin: 6px 0 0; gap: 4px; }
.result .locate { position: absolute; right: 6px; top: 6px; color: var(--text-2); }
.results .group { padding: var(--s2) 4px 0; font-size: var(--t14); font-weight: 600; color: var(--text-2); }
.results > li:not(.result) { background: none; box-shadow: none; }
.ease { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t12); font-weight: 600; color: var(--text-2); min-height: 24px; }
.ease .meter { display: inline-grid; grid-template-columns: repeat(4, 6px); gap: 2px; }
.ease .meter i { height: 10px; border-radius: 2px; background: var(--tint-2); }
.ease .meter i.on { background: var(--text); }
.map-legend { position: absolute; left: 12px; bottom: var(--s4); z-index: 2; background: rgb(var(--rgb-surface) / .92); border-radius: var(--radius);
  padding: 8px 12px; box-shadow: var(--lift); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.map-legend .legend { margin: 0; gap: 2px 12px; }
@media (max-width: 899px) {
  .map-legend { top: var(--s1); bottom: auto; right: 56px; left: var(--s1); padding: 4px 10px; }
  .map-legend .legend { font-size: 11px; gap: 0 10px; }
}
@media (min-width: 900px) {
  .explore { height: calc(100vh - 64px); }
  .explore-body { display: grid; grid-template-columns: 440px 1fr; gap: 12px; padding: 0 var(--s3) var(--s3); }
  .sheet, .sheet.full { position: static; height: auto; border-radius: 0; box-shadow: none; background: transparent; min-height: 0; }
  .sheet-handle { display: none; }
  .list-head { padding: 0 4px 6px; }
  .results { padding: 4px 4px var(--s2); }
  .explore-map-wrap { position: relative; inset: auto; height: 100%; min-height: 0; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--lift); }
}
@media (min-width: 1280px) {
  .explore-body { grid-template-columns: 600px 1fr; }
  .results { grid-template-columns: 1fr 1fr; gap: 12px; }
  .result-link { grid-template-columns: 1fr; gap: 10px; padding: 8px 8px 14px; }
  .result-photo { aspect-ratio: 3 / 2; }
  .result-photo .credit { right: 6px; bottom: 6px; padding: 1px 6px; font-size: 10px; }
  .result-text { padding: 0 6px; }
  .result .locate { top: 14px; right: 14px; background: rgb(var(--rgb-surface) / .92); border-radius: 50%; box-shadow: 0 2px 8px rgb(0 0 0 / .2); }
  .results .group, .results > li:not(.result) { grid-column: 1 / -1; }
}
@media (min-width: 900px) and (max-width: 1099px) { .explore { height: calc(100vh - 96px); } }

/* Map popup and cluster markers */
.maplibregl-popup-content { font: var(--t14)/1.4 var(--font); background: var(--surface); color: var(--text);
  border-radius: var(--radius-l); box-shadow: var(--lift); padding: 10px 10px 14px; min-width: 240px; max-width: 260px; }
.maplibregl-popup-tip { border-top-color: var(--surface) !important; border-bottom-color: var(--surface) !important; }
.maplibregl-popup-close-button { width: 32px; height: 32px; font-size: 20px; color: #fff; right: 14px; top: 14px; border-radius: 50%; background: rgb(0 0 0 / .45); z-index: 2; }
.pop strong { display: block; font-size: var(--t16); letter-spacing: -.01em; line-height: 1.25; margin: 0 4px 2px; }
.pop > span { display: block; margin: 0 4px; }
.pop .muted { margin-bottom: 6px; }
.pop .chips { display: flex; }
.pop a { font-weight: 600; margin: 0 4px; }
.pop-photo { margin-bottom: 10px; }

/* Cooperative: a photo gallery as header, facts as clean lists in soft cards */
.coop-hero { display: grid; gap: var(--s3); margin-bottom: var(--s5); }
.gallery { display: grid; gap: 8px; border-radius: var(--radius-xl); overflow: hidden; }
.gallery .aerial, .hero-pic { margin: 0; border-radius: 0; aspect-ratio: auto; height: 100%; min-height: 0; }
.hero-pic { position: relative; overflow: hidden; background: var(--tint); aspect-ratio: 4 / 3; }
.hero-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-credit { position: absolute; left: 8px; right: 8px; bottom: 8px; padding: 2px 8px; border-radius: var(--radius); font-size: 11px; color: #fff; background: rgb(0 0 0 / .55); }
.photo-credit a { color: #fff; text-decoration: underline; }
.hero-pic.placeholder { display: grid; place-items: center; align-content: center; gap: var(--s1); color: var(--text-2);
  background: linear-gradient(135deg, var(--accent-tint), var(--tint-2)); font-size: var(--t26); font-weight: 700; letter-spacing: -.02em; aspect-ratio: 16 / 9; }
.gallery-more { display: grid; grid-auto-flow: column; grid-auto-columns: 42%; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.gallery-more .aerial { aspect-ratio: 3 / 2; }
.hero-text { display: grid; gap: var(--s1); }
.hero-text .back { margin: 0; font-size: var(--t14); }
.hero-text h1 { font-size: var(--t36); margin: 0; letter-spacing: -.03em; }
.hero-text .place { font-size: var(--t16); color: var(--text-2); margin: 0; }
.hero-text .chips { margin: 4px 0; }
.summary { font-size: 17px; line-height: 1.55; max-width: 64ch; }
.coop-grid { display: grid; gap: var(--s2); }
@media (min-width: 720px) {
  .gallery.has-4, .gallery.has-3, .gallery.has-2 { grid-template-columns: 2fr 1fr; height: 440px; }
  .gallery.has-1 { grid-template-columns: 2fr 1fr; height: 400px; }
  .gallery.has-0 .hero-pic { aspect-ratio: 21 / 9; }
  .gallery-more { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: 1fr; overflow: hidden; }
  .gallery.has-4 .gallery-more { grid-template-columns: 1fr 1fr; }
  .gallery-more .aerial { aspect-ratio: auto; }
  .hero-text h1 { font-size: 48px; }
}
@media (min-width: 900px) {
  .coop-hero .hero-text { grid-template-columns: 1fr auto; column-gap: var(--s4); align-items: start; }
  .hero-text > * { grid-column: 1; }
  .hero-text > .btn-row { grid-column: 2; grid-row: 2 / span 3; justify-content: flex-end; max-width: 420px; }
  .coop-grid { grid-template-columns: 1fr 1fr; }
}
.items { margin: 0; padding-left: var(--s3); display: grid; gap: var(--s1); }
.facts.sub { grid-template-columns: auto 1fr; gap: 0 var(--s1); }
.facts.sub dt, .facts.sub dd { font-size: var(--t14); padding: 3px 0; border: 0; }
.facts.sub dt { font-weight: 600; color: var(--text); }
.score-table { width: 100%; border-collapse: collapse; font-size: var(--t14); }
.score-table th, .score-table td { text-align: left; padding: 10px var(--s1) 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.score-table thead th { color: var(--text-2); font-weight: 500; font-size: var(--t12); }
.score-table tbody th { font-weight: 600; }
.score-table tbody tr:last-child > * { border-bottom: 0; }
.points { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
.score-head { display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap; }
.strip { display: grid; grid-template-columns: repeat(26, 1fr); gap: 3px; margin: var(--s1) 0; }
.coop-flats .latest { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.coop-flats .latest li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 var(--s1); }
.room-bars { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: max-content 1fr 3ch; align-items: center; gap: 6px var(--s1); font-size: var(--t14); }
.room-bars li { display: contents; }
.bar-track { height: 10px; border-radius: 5px; background: var(--tint-2); overflow: hidden; }
.bar-track > span { display: block; height: 100%; border-radius: 5px; background: var(--accent); }
.bar-n { text-align: right; font-variant-numeric: tabular-nums; }
.flats-pace h3 { margin-top: var(--s3); }
.flats-pace p { margin: var(--s1) 0 0; }
.week { height: var(--s2); border-radius: 3px; background: var(--tint-2); }
.op-open { background: var(--open-mark); } .op-none { background: var(--border); }
.op-unclear { background: var(--waiting-mark); } .op-error { background: var(--closed-mark); }
.checklist { list-style: none; padding: 0; margin: 0 0 var(--s1); }
.checklist li { display: flex; align-items: center; gap: var(--s1); }
.checklist .done { text-decoration: line-through; color: var(--text-2); }
.checklist li.has-dossier { display: block; padding: 6px 0; font-size: var(--t14); }
.dossier-list { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 2px; }
.checklist .dossier-list { padding-left: 30px; }
.dossier-list li { display: block; }
.dossier-hint { margin: -4px 0 6px 30px; max-width: 62ch; }
.dossier-progress { margin: 4px 0 0; font-weight: 600; }
.checklist .dossier-progress { padding-left: 30px; }
.letter-tips { padding-left: var(--s3); margin: 0 0 var(--s3); display: grid; gap: 8px; font-size: 16px; line-height: 1.55; max-width: 68ch; }
.letter-tips > li::marker { color: var(--accent); font-weight: 600; }
.letter-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); flex-wrap: wrap; max-width: 68ch; margin-top: var(--s4); }
.letter-head h3 { margin: 0; font-size: var(--t20); }
.letter-sample { white-space: pre-line; background: var(--surface); border-radius: var(--radius-l); box-shadow: var(--shadow); padding: var(--s3); margin-top: var(--s2); max-width: 68ch; font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; }
.guide-section .dossier { background: var(--surface); border-radius: var(--radius-l); box-shadow: var(--shadow); padding: var(--s2) var(--s3); max-width: 68ch; }

/* Projects: a photo with its stage on it, then the words */
.project { display: grid; gap: 0; padding: 0; }
.project-media { position: relative; display: block; }
.project-media .aerial { border-radius: var(--radius); aspect-ratio: 16 / 10; }
.project:hover .project-media img { transform: scale(1.03); }
.project-stage { position: absolute; left: 10px; top: 10px; }
.project-body { display: grid; gap: 4px; padding: 12px 2px 4px; }
.project-name { font-family: var(--font-display); font-size: 17px; letter-spacing: -.02em; line-height: 1.25; }
.project-coop { font-size: var(--t14); font-weight: 500; }
.project .meta { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: var(--t14); color: var(--text-2); }
.project .meta span + span::before { content: "·"; margin-right: 10px; color: var(--text-2); }
.project .lv { font-size: var(--t14); }
/* The letting: a badge by the name, its window and move-in below, the same shapes as the membership badges */
.project-name .badge { margin-left: 8px; vertical-align: 2px; font-family: inherit; font-size: var(--t14); letter-spacing: 0; }
.badge[class*="lt-"] { padding-left: 8px; }
.badge[class*="lt-"]::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.lt-applications-open { background: var(--open-bg); color: var(--open); }
.lt-interest-list { background: var(--waiting-bg); color: var(--waiting); }
.badge.lt-interest-list::before { border-radius: 1px; }
.lt-closed, .lt-let { background: var(--closed-bg); color: var(--closed); }
.badge.lt-closed::before, .badge.lt-let::before { border-radius: 0; height: 2px; width: 8px; }
.project .letting { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: var(--t14); font-weight: 500; }
.project .letting span + span::before { content: "·"; margin-right: 10px; color: var(--text-2); }
.project .links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s2); font-size: var(--t14); }
.project .ics { min-height: var(--target); padding: 0 12px; font-size: var(--t14); white-space: nowrap; }
.items > .project { list-style: none; }
.card .items:has(> .project) { padding: 0; gap: var(--s3); }

/* Timeline: a year rail with sticky years, and projects as photo cards */
.filter-row { display: grid; gap: var(--s2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); margin-bottom: var(--s2);
  padding: var(--s2); background: var(--surface); border-radius: var(--radius-l); box-shadow: var(--shadow); }
.stage-legend { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 var(--s2); }
.timeline { display: grid; gap: var(--s5); position: relative; margin-top: var(--s3); }
.year { display: grid; gap: var(--s2); position: relative; }
.year > h2 { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px var(--s2); font-size: 44px; font-weight: 700; letter-spacing: -.05em; margin: 0; line-height: 1;
  font-variant-numeric: tabular-nums; position: sticky; top: calc(var(--header) + 4px); z-index: 3; padding: 10px 0; background: rgb(var(--rgb-paper) / .9);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.year > h2 .muted { font-family: var(--font); font-size: var(--t14); font-weight: 500; letter-spacing: 0; }
.projects { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.projects .project { background: var(--surface); border-radius: var(--radius-l); padding: 8px 8px 12px; align-content: start; box-shadow: var(--shadow); transition: box-shadow .25s var(--ease), transform .25s var(--ease); }
.projects .project:hover { box-shadow: var(--lift); transform: translateY(-2px); }
.projects .project-body { padding: 12px 8px 0; }
.phase-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 var(--s2); }
.phase-tabs .qchip { position: relative; cursor: pointer; }
.phase-tabs .qchip:disabled { opacity: .45; cursor: default; }
.phase-tabs .qchip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.year.phase > h2 { font-size: 30px; letter-spacing: -.03em; line-height: 1.1; }
@media (max-width: 1099px) { .year > h2 { top: 96px; } }
@media (min-width: 1000px) {
  .timeline::before { content: ""; position: absolute; left: 7px; top: 12px; bottom: 0; width: 2px; background: linear-gradient(var(--accent), rgb(var(--rgb-accent) / 0)); }
  .year { grid-template-columns: 180px 1fr; gap: var(--s4); align-items: start; padding-left: 36px; }
  .year::before { content: ""; position: absolute; left: 0; top: 26px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 4px var(--accent) inset, var(--shadow); }
  .year > h2 { flex-direction: column; align-items: flex-start; font-size: 52px; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; top: calc(var(--header) + var(--s2)); }
  .year > h2 .muted { font-size: var(--t14); }
  .year.phase > h2 { font-size: 30px; }
}

/* Compare */
.compare-add { max-width: 400px; margin-bottom: var(--s2); }
.table-scroll { overflow-x: auto; background: var(--surface); border-radius: var(--radius-l); box-shadow: var(--shadow); }
.compare { border-collapse: collapse; width: 100%; min-width: 560px; font-size: var(--t14); }
.compare th, .compare td { padding: 12px var(--s2); text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.compare thead th { position: sticky; top: 0; background: var(--surface); font-family: var(--font-display); font-size: var(--t16); }
.compare tbody th { color: var(--text-2); font-weight: 500; width: 200px; }
.compare tr.diff td, .compare tr.diff th { background: var(--accent-tint); }
.diff-key { display: inline-block; width: var(--s2); height: var(--s2); border-radius: 4px; background: var(--accent-tint); vertical-align: middle; border: 1px solid var(--accent); }

/* Fit */
.fit-layout { display: grid; gap: var(--s4); align-items: start; }
.fit-form { display: grid; gap: var(--s3); }
.fit-form .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fit-form .hint { margin: -12px 0 0; }
.fit-form .groups .hint { margin: 0 0 4px; }
.fit-form .error { color: var(--closed); margin: 0; }
.privacy { font-size: var(--t12); color: var(--text-2); background: var(--tint); border-radius: var(--radius); padding: 12px 14px; margin: 0; }
.fit-results > h2 { font-size: var(--t26); letter-spacing: -.03em; margin-bottom: 4px; }
.fit-results > .count { color: var(--text-2); margin-bottom: var(--s3); }
.fit-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.fit-item { padding: var(--s2) var(--s3); transition: box-shadow .25s var(--ease); }
.fit-item:hover { box-shadow: var(--lift); }
.fit-head { display: flex; align-items: center; gap: var(--s2); }
.fit-name { flex: 1; display: grid; gap: 4px; min-width: 0; }
.fit-name > a { color: var(--text); text-decoration: none; font-size: 17px; font-weight: 600; letter-spacing: -.015em; line-height: 1.25; }
.fit-name > a:hover { color: var(--accent); }
.fit-name .chips { margin: 0; align-items: center; }
.rank { width: 36px; height: 36px; border-radius: 50%; background: var(--tint-2); display: grid; place-items: center; font-weight: 700; font-size: var(--t14); flex: none; font-variant-numeric: tabular-nums; color: var(--text-2); }
.fit-list > li:first-child .rank { background: var(--accent); color: var(--on-accent); }
.fit-score { display: grid; justify-items: end; gap: 6px; flex: none; min-width: 88px; }
.fit-score .num { font-size: var(--t26); }
.fit-score .num small { font-size: var(--t12); color: var(--text-2); font-weight: 600; letter-spacing: 0; margin-left: 2px; }
.fit-score .gauge { width: 88px; height: 6px; border-radius: 3px; background: var(--tint-2); overflow: hidden; }
.fit-score .gauge > span { display: block; height: 100%; border-radius: 3px; background: var(--accent); }
.fit-item .note { margin: var(--s1) 0 0 52px; }
.fit-item details { margin: 4px 0 0 52px; }
.fit-item details > summary { min-height: 36px; font-size: var(--t14); color: var(--text-2); }
.fit-item details > summary:hover { color: var(--accent); }
.fit-item details[open] > summary { color: var(--text); }
summary { cursor: pointer; min-height: var(--target); display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--accent); list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::before { content: "+"; display: inline-grid; place-items: center; width: 20px; height: 20px; background: var(--accent-tint); border-radius: 50%; font-size: 14px; line-height: 1; flex: none; }
details[open] > summary::before { content: "−"; }
.gates { list-style: none; padding: 0; margin: var(--s1) 0; display: grid; gap: 6px; font-size: var(--t14); }
.gate { display: flex; gap: var(--s1); align-items: flex-start; }
.gate strong { font-weight: 600; }
.mark { width: 22px; height: 22px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: var(--t12); }
.gate-pass .mark { background: var(--open-bg); color: var(--open); }
.gate-fail .mark { background: var(--closed-bg); color: var(--closed); }
.gate-unknown .mark { background: var(--unknown-bg); color: var(--unknown); }
.excluded { margin-top: var(--s3); }
.excluded .items { list-style: none; padding: 0; }
.excluded .items > li { padding: var(--s1) 0; border-top: 1px solid var(--line); }
.excluded .items > li > a { font-weight: 600; }
@media (min-width: 900px) { .fit-layout { grid-template-columns: 380px 1fr; } }
@media (max-width: 599px) {
  .fit-item { padding: var(--s2); }
  .fit-head { flex-wrap: wrap; gap: 12px; }
  .fit-item .note, .fit-item details { margin-left: 0; }
}

/* Fit: where to live, a searchable list of places with the chosen ones as chips */
.places { display: grid; gap: 10px; }
.places .place-chips { margin: 0; min-height: 32px; align-items: center; }
.place-list { max-height: 380px; overflow-y: auto; border-radius: var(--radius); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
/* Each city or district is a closed row; open it to choose within. */
.place-group { border-top: 1px solid var(--line); }
.place-group:first-child { border-top: 0; }
.place-group > summary { min-height: var(--target); padding: 0 14px; display: flex; align-items: center; gap: var(--s1); color: var(--text); font-weight: 600; font-size: var(--t14); }
.place-group > summary::before { content: ""; width: 7px; height: 7px; border: solid var(--text-2); border-width: 0 2px 2px 0; transform: rotate(-45deg); background: none; border-radius: 0; flex: none; transition: transform .2s var(--ease); }
.place-group[open] > summary::before { transform: rotate(45deg); }
.place-group-title { flex: 1; min-width: 0; }
.place-count { padding: 1px 8px; border-radius: var(--pill); background: var(--accent); color: var(--on-accent); font-size: var(--t12); }
.place-items { padding: 0 12px 8px; }
.place-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s1); }
.place-toggle { min-height: 32px; padding: 0 10px; font-size: var(--t12); font-weight: 500; color: var(--text-2); }
.place-toggle[aria-expanded="true"] { background: var(--tint-2); color: var(--text); }
.place.depth-1 { padding-left: var(--s2); }
.place.depth-2 { padding-left: var(--s5); font-size: var(--t14); }
.segmented { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; padding: 3px; border-radius: var(--pill); background: var(--tint-2); justify-self: start; }
.seg { position: relative; display: grid; place-items: center; min-height: 38px; padding: 0 16px; border-radius: var(--pill); font-size: var(--t14); font-weight: 600; color: var(--text-2); cursor: pointer; transition: background .2s, color .2s; }
.seg::after { content: ""; position: absolute; inset: -3px 0; } /* 44px to tap */
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg:has(input:checked) { background: var(--text); color: var(--bg); box-shadow: var(--shadow); }
.seg:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Shortlist, guide, data */
.short-list { list-style: none; padding: 0; display: grid; gap: 12px; }
.short-item .fit-head { flex-wrap: wrap; }
.print-only { display: none; }
.prose { max-width: 760px; }
.prose h2 { font-size: var(--t26); letter-spacing: -.03em; color: var(--text); display: block; } .prose h3 { font-size: var(--t20); } .prose h4 { font-size: var(--t16); }
.prose ul, .prose ol { padding-left: var(--s3); margin: 0 0 var(--s2); }
.prose code { background: var(--tint-2); padding: 0 6px; border-radius: 4px; font-size: var(--t14); }
.data-grid { display: grid; gap: var(--s2); }
@media (min-width: 900px) { .data-grid { grid-template-columns: 1fr 1fr; } }
.cov { width: 100%; border-collapse: collapse; font-size: var(--t14); }
.cov th, .cov td { padding: var(--s1) var(--s1) var(--s1) 0; border-bottom: 1px solid var(--line); text-align: left; }
.cov thead th { font-size: var(--t12); color: var(--text-2); font-weight: 500; }
.cov tbody th { font-weight: 400; }
.bar { display: inline-block; width: min(120px, 22vw); height: 6px; background: var(--tint-2); border-radius: 3px; overflow: hidden; vertical-align: middle; }
.bar > span { display: block; height: 100%; border-radius: 3px; background: var(--accent); }
.columns { columns: 2 240px; display: block; }
.columns li { break-inside: avoid; margin-bottom: var(--s1); }
.card h3 { margin-top: var(--s3); }
.card > h2 + h3, .card h3:first-child { margin-top: 0; }
@media print { .print-only { display: block; } }

/* Settlements: a grid of photo cards */
.sites { margin: 0 0 var(--s5); }
.sites > h2 { font-size: var(--t26); letter-spacing: -.03em; margin: 0 0 var(--s2); display: flex; align-items: baseline; gap: var(--s1); }
.site-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.site { display: grid; align-content: start; font-size: var(--t14); background: var(--surface); border-radius: var(--radius-l); padding: 8px; box-shadow: var(--shadow); transition: box-shadow .25s var(--ease), transform .25s var(--ease); }
.site:hover { box-shadow: var(--lift); transform: translateY(-2px); }
.site:hover .aerial img { transform: scale(1.04); }
.site-body { display: grid; gap: 2px; padding: 12px 8px 4px; }
.site-links { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 4px 0 0; font-size: var(--t12); }
.site strong { font-family: var(--font-display); font-size: var(--t16); letter-spacing: -.015em; }
.site .meta { color: var(--text-2); }
.site a { display: inline-flex; align-items: center; min-height: var(--target); }
.site-grid.collapsed > li:nth-child(n+9) { display: none; }
.show-all { margin-top: var(--s2); }

/* Guide: contents in view on wide screens, sections with air, steps, terms and photo cards */
.guide-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); align-items: start; }
.guide-layout > * { min-width: 0; }
.toc { background: var(--surface); border-radius: var(--radius-l); box-shadow: var(--shadow); padding: var(--s2); }
.toc-title { margin: 0 0 6px; font-size: var(--t12); font-weight: 600; color: var(--text-2); }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: toc; }
.toc a { display: flex; align-items: center; gap: 10px; min-height: var(--target); padding: 0 10px; border-radius: var(--radius); color: var(--text-2); font-size: var(--t14); font-weight: 500; transition: background .2s, color .2s; }
.toc a::before { counter-increment: toc; content: counter(toc); flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--tint-2); font-size: 11px; font-weight: 600; }
.toc a:hover { background: var(--tint); color: var(--text); text-decoration: none; }
.toc a[aria-current="true"] { color: var(--text); background: var(--accent-tint); }
.toc a[aria-current="true"]::before { background: var(--accent); color: var(--on-accent); }
.guide { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s6); min-width: 0; max-width: 820px; }
.guide-section > h2 { font-size: var(--t26); letter-spacing: -.03em; margin-bottom: var(--s3); scroll-margin-top: calc(var(--header) + var(--s3)); }
.guide-section > h2:focus { outline: none; }
.guide-section > h3 { font-size: var(--t20); margin-top: var(--s4); }
.guide-section > p { font-size: 17px; line-height: 1.65; max-width: 68ch; }
.guide-section > ul, .guide-section > ol { padding-left: var(--s3); margin: 0 0 var(--s3); display: grid; gap: 12px; font-size: 17px; line-height: 1.6; max-width: 68ch; }
.guide-section > ul > li::marker { color: var(--accent); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: step; }
.step { position: relative; display: grid; gap: 4px; padding: var(--s2) var(--s3) var(--s2) 76px; background: var(--surface); border-radius: var(--radius-l); box-shadow: var(--shadow); }
.step::before { counter-increment: step; content: counter(step); position: absolute; left: var(--s3); top: var(--s2); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--accent); color: var(--on-accent); font-family: var(--font-display); font-weight: 700; font-size: var(--t16); }
.step:not(:last-child)::after { content: ""; position: absolute; left: calc(var(--s3) + 17px); top: calc(var(--s2) + 40px); bottom: -14px; width: 2px; background: rgb(var(--rgb-accent) / .25); }
.step-title { margin: 6px 0 0; font-size: 17px; }
.step p { margin: 0; color: var(--text-2); font-size: var(--t16); line-height: 1.55; }
.glossary { margin: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.term { background: var(--surface); border-radius: var(--radius-l); padding: var(--s2) 20px; box-shadow: var(--shadow); }
.term dt { font-family: var(--font-display); font-weight: 600; font-size: var(--t16); letter-spacing: -.01em; margin-bottom: 6px; }
.term dd { margin: 0; color: var(--text-2); font-size: var(--t14); line-height: 1.55; }
.coop-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.coop-card-link { display: grid; height: 100%; color: var(--text); background: var(--surface); border-radius: var(--radius-l); padding: 8px; box-shadow: var(--shadow); transition: box-shadow .25s var(--ease), transform .25s var(--ease); }
.coop-card-link:hover { text-decoration: none; box-shadow: var(--lift); transform: translateY(-2px); }
.coop-card-link:hover img { transform: scale(1.04); }
.coop-card-media { display: grid; place-items: center; border-radius: var(--radius); overflow: hidden; background: var(--tint); color: var(--text-2); aspect-ratio: 3 / 2; }
.coop-card-media .aerial { width: 100%; }
.coop-card-body { display: grid; gap: 6px; align-content: start; padding: 12px 8px 6px; }
.coop-card-body strong { font-family: var(--font-display); font-size: 17px; letter-spacing: -.02em; line-height: 1.25; }
.coop-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.coop-card-why { color: var(--text-2); font-size: var(--t14); line-height: 1.5; }
.coop-chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 10px 1px 8px; border-radius: var(--pill); background: var(--accent-tint); font-weight: 600; white-space: nowrap; }
.coop-chip:hover { text-decoration: none; background: rgb(var(--rgb-accent) / .16); }
/* "Was die Daten zeigen": big figures, calm bars, one sentence, a scale */
.data-story { display: grid; gap: var(--s2); }
.data-asof { margin: 0; color: var(--text-2); font-size: var(--t14); }
.figures { list-style: none; margin: var(--s2) 0 0; padding: 0; display: grid; gap: var(--s4) var(--s3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.figure { display: grid; gap: 6px; align-content: start; }
.fig-num { font-family: var(--font-display); font-size: 48px; font-weight: 600; letter-spacing: -.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.fig-num sup { font-size: .4em; color: var(--text-2); margin-left: 2px; letter-spacing: 0; }
.fig-label { font-size: var(--t14); color: var(--text-2); line-height: 1.35; max-width: 18ch; }
.fig-note { margin: var(--s1) 0 var(--s4); font-size: var(--t12); color: var(--text-2); }
.data-story > h3 { font-size: var(--t20); margin: var(--s3) 0 0; }
.data-story > .muted { margin: 0 0 var(--s1); }
.coverage { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.coverage li { display: grid; grid-template-columns: 1fr auto; gap: 8px var(--s2); align-items: baseline; }
.cov-label { font-size: var(--t16); }
.cov-pct { font-size: var(--t14); font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; }
.cov-track { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--tint-2); overflow: hidden; }
.cov-track > span { display: block; height: 100%; border-radius: 3px; background: var(--accent); opacity: .85; }
.statement { margin: var(--s5) 0 var(--s4); font-family: var(--font-display); font-size: 28px; font-weight: 300; line-height: 1.25; letter-spacing: -.02em; max-width: 24ch; text-wrap: balance; }
.scale h3 { font-size: var(--t20); margin-bottom: var(--s4); }
.scale-graphic { margin-bottom: var(--s2); }
.scale-bar { position: relative; height: 10px; border-radius: 5px; background: linear-gradient(90deg, var(--open-mark), var(--waiting-mark), var(--closed-mark)); opacity: .9; }
.scale-mark { position: absolute; top: -6px; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 3px var(--text), var(--shadow); }
.scale-mark > span { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: var(--t12); font-weight: 600; padding: 2px 8px; border-radius: var(--pill); background: var(--text); color: var(--bg); }
.scale-ends { display: flex; justify-content: space-between; margin-top: 12px; font-size: var(--t12); color: var(--text-2); }
.scale p { color: var(--text-2); max-width: 60ch; }
@media (min-width: 720px) {
  .figures { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .figures:has(> :nth-child(5)) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .fig-num { font-size: 56px; }
  .statement { font-size: 36px; }
}
@media (max-width: 999px) {
  .toc ol { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; scrollbar-width: none; }
  .toc { padding: 8px; }
  .toc-title { padding: 0 8px; }
}
@media (max-width: 599px) {
  .step { padding: var(--s2) var(--s2) var(--s2) 64px; }
  .step::before { left: var(--s2); }
  .step:not(:last-child)::after { left: calc(var(--s2) + 17px); }
}
@media (min-width: 1000px) {
  .guide-layout { grid-template-columns: 240px minmax(0, 1fr); gap: var(--s5); }
  .toc { position: sticky; top: calc(var(--header) + var(--s3)); }
}

/* Depth: photo tiles, key figures and ways in lean toward the pointer (app.js sets --rx/--ry and
   --mx/--my) and catch a soft light where it is. Off for touch and for reduced motion. */
.tilt { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0));
  transform-style: preserve-3d; transition: transform .5s var(--ease), box-shadow .3s var(--ease); will-change: transform; }
.tilt.is-tilting { --ty: -4px; transition: transform .12s linear, box-shadow .3s var(--ease); box-shadow: var(--lift); }
.tilt::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity .3s var(--ease);
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgb(255 255 255 / .28), transparent 45%); mix-blend-mode: soft-light; }
.tilt.is-tilting::before { opacity: 1; }
.stat.tilt, .entry.tilt { position: relative; }
.aerial.street .credit { max-width: calc(100% - 16px); overflow: hidden; text-overflow: ellipsis; }

/* Freie Wohnungen: counters, filters, then the list beside the map (stacked on phones) */
.flat-stats { grid-template-columns: repeat(3, 1fr); margin-bottom: var(--s2); }
.flat-stats .stat { padding: var(--s2); }
.flat-stats .stat b { font-size: 28px; font-variant-numeric: tabular-nums; }
.flat-stats .stat span { color: var(--text-2); font-size: var(--t14); line-height: 1.35; }
.flat-note { max-width: 70ch; margin: 0 0 var(--s3); }
.flat-filters { display: grid; gap: var(--s2); margin-bottom: var(--s3); }
.flat-filters fieldset.rooms { display: flex; flex-wrap: wrap; gap: 4px 12px; border: 0; padding: 0; margin: 0; }
.flat-filters fieldset.rooms legend { font-size: var(--t14); font-weight: 600; margin-bottom: 4px; }
.flat-filters .filter-row { margin: 0; }
.flat-filters .checks { display: flex; flex-wrap: wrap; gap: 4px var(--s3); }
.flats-body { display: grid; gap: var(--s3); }
.flats-list .count { margin: 0; white-space: nowrap; font-size: var(--t14); color: var(--text-2); }
.flats-list .list-head { padding: 0; margin-bottom: var(--s1); }
.flats-list .list-head select { flex: 0 1 240px; min-width: 0; }
.items.flats { padding: 0; }
.flat { list-style: none; display: grid; gap: 4px; padding: 12px 14px; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.flat-head { font-family: var(--font-display); font-size: 17px; letter-spacing: -.02em; }
.flat .place { font-size: var(--t14); }
.flat .meta { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: var(--t14); color: var(--text-2); }
.flat .meta span + span::before { content: "·"; margin-right: 10px; }
.flat .links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--s2); font-size: var(--t14); }
.flat .links a { display: inline-flex; align-items: center; min-height: var(--target); }
.flats-map-wrap { position: relative; }
.flats-map { height: 360px; }
.fk-genossenschaft { background: rgb(19 128 75 / .12); color: var(--open); }
.fk-stiftung { background: rgb(31 95 173 / .12); color: #1F5FAD; }
.fk-seniors { background: rgb(122 79 176 / .13); color: #7A4FB0; }
.fk-city { background: rgb(181 71 8 / .12); color: #B54708; }
:root[data-theme="dark"] .fk-stiftung { color: #8DB8F0; } :root[data-theme="dark"] .fk-seniors { color: #C4A6EC; } :root[data-theme="dark"] .fk-city { color: #F4A462; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fk-stiftung { color: #8DB8F0; } :root:not([data-theme="light"]) .fk-seniors { color: #C4A6EC; } :root:not([data-theme="light"]) .fk-city { color: #F4A462; } }
@media (max-width: 599px) { .flat-stats { grid-template-columns: 1fr; } }
@media (min-width: 900px) {
  .flats-body { grid-template-columns: minmax(340px, 1fr) 1.2fr; align-items: start; }
  .flats-map-wrap { position: sticky; top: 88px; }
  .flats-map { height: calc(100vh - 140px); min-height: 420px; }
}

/* Sparrechner: the question, the BFS reference, four figures, then every example with its source */
.savings-ref { display: grid; gap: 2px; padding: 12px 14px; border-radius: var(--radius); background: var(--tint); }
.savings-ref p { margin: 0; max-width: 80ch; }
.savings-ref .use-bfs { min-height: 32px; margin-left: 4px; }
.savings-stats { grid-template-columns: repeat(4, 1fr); margin-bottom: var(--s2); }
.savings-stats .stat { padding: var(--s2); background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); }
.savings-stats .stat b { font-family: var(--font-display); font-size: 28px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.savings-stats .stat-label { font-size: var(--t14); font-weight: 600; color: var(--text-2); }
.savings-stats .saving b { color: var(--open); }
.savings-stats .saving.more b { color: var(--closed); }
.savings-note { max-width: 75ch; margin: 0 0 var(--s2); }
.savings-h { margin: var(--s3) 0 var(--s1); font-size: var(--t20); }
.savings-examples { display: grid; gap: var(--s1); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); margin: 0 0 var(--s2); }
.example .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.example.is-other { opacity: .78; }
@media (max-width: 899px) { .savings-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 479px) { .savings-stats { grid-template-columns: 1fr; } }