/* ===================================================================== site.css — Wasserstadt Hamburg · ontwerpsysteem (overhaul 2026-06) --------------------------------------------------------------------- Eén systeem voor alle negen pagina's van de spine. Thema A ("Hanze-archief") is het standaardthema en staat hier; thema B ("Nordwasser") en C ("Peilstand") zijn overrides in css/thema-b.css en css/thema-c.css, geschakeld via . Harde kaders: offline onder file://, relatieve paden, fonts lokaal. ===================================================================== */ /* ── 0 · Lokale fonts ─────────────────────────────────────────── */ /* Type-systeem (drie rollen): · Fraunces → serif display: HAMBURG, grote editorial koppen, lead-zinnen en pull-quotes (warm, hoog contrast). · Inter → werkpaard: lopende tekst, UI, lange leesblokken. · Space Grotesk → technische laag: labels, sectienummers, meta, nav, fiche-veldnamen (architectonische precisie). */ @font-face { font-family: 'Fraunces'; src: url('../fonts/fraunces-900.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Fraunces'; src: url('../fonts/fraunces-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Fraunces'; src: url('../fonts/fraunces-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Fraunces'; src: url('../fonts/fraunces-300.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Fraunces'; src: url('../fonts/fraunces-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'Inter'; src: url('../fonts/inter-400.woff2') format('woff2'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Inter'; src: url('../fonts/inter-500.woff2') format('woff2'); font-weight: 500; font-display: swap; } @font-face { font-family: 'Inter'; src: url('../fonts/inter-600.woff2') format('woff2'); font-weight: 600; font-display: swap; } @font-face { font-family: 'Inter'; src: url('../fonts/inter-700.woff2') format('woff2'); font-weight: 700; font-display: swap; } @font-face { font-family: 'Inter'; src: url('../fonts/inter-800.woff2') format('woff2'); font-weight: 800; font-display: swap; } @font-face { font-family: 'Inter'; src: url('../fonts/inter-900.woff2') format('woff2'); font-weight: 900; font-display: swap; } @font-face { font-family: 'Space Grotesk'; src: url('../fonts/space-grotesk-700.woff2') format('woff2'); font-weight: 700; font-display: swap; } @font-face { font-family: 'Space Grotesk'; src: url('../fonts/space-grotesk-500.woff2') format('woff2'); font-weight: 500; font-display: swap; } /* Gondens DEMO — retro/condensed display, enkel voor de landing-titel HAMBURG + WASSERSTADT (personal-use/educatieve licentie). */ @font-face { font-family: 'Gondens'; src: url('../fonts/gondens-demo.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } /* ── 1 · Tokens (thema A = standaard) ─────────────────────────── */ :root { /* kleur */ --bg: #F2EDE3; /* papier */ --bg-diep: #E9E2D4; /* iets donkerder vlak */ --ink: #1C1B18; /* drukinkt */ --ink-2: #5B564C; /* secundaire tekst */ --accent: #983B26; /* baksteen */ --water: #1F6F8B; /* fleetwater */ --water-diep: #143E52; --water-licht: #A8CFDE; --lijn: rgba(28, 27, 24, 0.18); --lijn-zacht: rgba(28, 27, 24, 0.09); --vlak: #FBF8F1; /* kaart-/fiche-achtergrond */ --inversie-bg: #143E52; /* donkere blokken (waterlijn, fiche-kop) */ --inversie-ink: #EDF4F7; --landing-map-opacity: 0.4; --kaart-blok-gamma: 1.072; /* typografie — drie rollen (zie @font-face) */ --font-serif: 'Fraunces', Georgia, 'Times New Roman', serif; /* display + lead */ --font-sans: 'Inter', 'Helvetica Neue', Arial, sans-serif; /* body + UI */ --font-label: 'Space Grotesk', 'Inter', sans-serif; /* labels + meta */ --font-titel: 'Gondens', 'Fraunces', Georgia, serif; /* landing-titel HAMBURG/WASSERSTADT */ --font-mono: 'Space Grotesk', ui-monospace, 'Courier New', monospace; /* compat: oudere regels die nog --font-display/--font-body lazen */ --font-display: var(--font-sans); --font-body: var(--font-sans); --size-display: clamp(3rem, 9vw, 8rem); --size-h2: clamp(1.55rem, 3.2vw, 2.5rem); --size-h3: clamp(1.05rem, 1.7vw, 1.3rem); --size-lead: clamp(1.2rem, 2vw, 1.6rem); --size-body: clamp(1.01rem, 1.2vw, 1.1rem); --size-meta: 0.7rem; /* maat & ritme */ --maat: 66ch; /* leesbare regellengte body */ --rand: clamp(1.25rem, 5vw, 4.5rem); /* bladmarge */ --regel: clamp(2.5rem, 6vh, 4.5rem); --radius: 2px; --nav-hoogte: 52px; --transitie: 0.45s cubic-bezier(0.22, 1, 0.36, 1); } /* ── 2 · Reset & basis ────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-hoogte) + 1rem); } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-sans); font-size: var(--size-body); font-weight: 400; line-height: 1.66; letter-spacing: -0.003em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Content-koppen zijn sans (editorial-report); de grote masthead-koppen krijgen serif via .pagina-kop h1 / .landing-typo (zie verderop). */ h1, h2, h3, h4 { font-family: var(--font-sans); font-weight: 700; line-height: 1.05; margin: 0; letter-spacing: -0.02em; } p { margin: 0 0 1em; max-width: var(--maat); } strong, b { font-weight: 600; } a { color: var(--water); text-decoration: none; } a:hover { color: var(--water-diep); } img, svg { max-width: 100%; height: auto; } button { font: inherit; } ::selection { background: var(--water-licht); color: var(--water-diep); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } } /* kleine typo-hulpjes */ .meta { font-family: var(--font-label); font-weight: 500; font-size: var(--size-meta); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-2); } .mono { font-family: var(--font-mono); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.08em; font-feature-settings: 'tnum' 1; } /* serif-utility voor pull-quotes en editorial accenten */ .serif { font-family: var(--font-serif); font-weight: 600; } em.kwiel, .pull { font-family: var(--font-serif); font-weight: 600; font-style: italic; } /* ── 3 · Persistente navigatie ────────────────────────────────── */ .site-nav { position: fixed; top: 0; left: 0; right: 0; height: var(--nav-hoogte); display: flex; align-items: center; gap: 1.25rem; padding: 0 var(--rand); background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--lijn-zacht); z-index: 1000; } /* fallback voor browsers zonder color-mix */ @supports not (background: color-mix(in srgb, red 50%, blue)) { .site-nav { background: var(--bg); } } .nav-merk { font-family: var(--font-display); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--water); white-space: nowrap; } .nav-merk b { color: var(--ink); font-weight: 700; } .nav-links { display: flex; align-items: center; gap: clamp(0.5rem, 1.4vw, 1.1rem); margin-left: auto; overflow-x: auto; scrollbar-width: none; } .nav-links::-webkit-scrollbar { display: none; } .nav-item { font-family: var(--font-display); font-weight: 500; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; padding: 0.3rem 0; border-bottom: 2px solid transparent; transition: color 0.25s ease, border-color 0.25s ease; } .nav-item .nr { font-family: var(--font-mono); font-size: 0.62rem; color: var(--accent); margin-right: 0.3em; } .nav-item:hover { color: var(--ink); } .nav-item.actief { color: var(--ink); border-bottom-color: var(--accent); } /* thema-switcher */ .thema-switch { display: flex; gap: 2px; border: 1px solid var(--lijn); border-radius: var(--radius); overflow: hidden; flex: none; } .thema-switch button { appearance: none; border: 0; background: transparent; color: var(--ink-2); font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.05em; padding: 0.3rem 0.55rem; cursor: pointer; transition: background 0.2s ease, color 0.2s ease; } .thema-switch button:hover { color: var(--ink); } .thema-switch button.actief { background: var(--ink); color: var(--bg); } /* voortgang */ .scroll-voortgang { position: fixed; top: 0; left: 0; height: 2px; width: 0%; background: var(--water); z-index: 1001; } /* ── 4 · Blad & paginakop (posteropener per pagina) ───────────── */ .blad { padding: calc(var(--nav-hoogte) + var(--regel)) var(--rand) var(--regel); max-width: 1500px; margin: 0 auto; } .pagina-kop { position: relative; padding: var(--regel) 0 calc(var(--regel) * 0.8); border-bottom: 2px solid var(--ink); margin-bottom: var(--regel); } .pagina-kop .kop-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; border-top: 1px solid var(--lijn); padding-top: 0.7rem; margin-bottom: clamp(1.5rem, 4vh, 3rem); } /* Masthead-titel: serif display (Fraunces) in LICHTE snede — warm en elegant, nooit zwaar (zware serif oogt log; vgl. actactuaires). */ .pagina-kop h1 { font-family: var(--font-serif); font-weight: 400; font-size: var(--size-display); line-height: 0.98; letter-spacing: -0.02em; max-width: 16em; } .pagina-kop h1 .dun { font-weight: 300; font-style: italic; color: var(--ink-2); letter-spacing: -0.01em; } .pagina-kop .kop-nr { position: absolute; right: 0; bottom: -0.04em; font-family: var(--font-serif); font-weight: 300; font-size: clamp(4rem, 12vw, 11rem); line-height: 0.8; color: transparent; -webkit-text-stroke: 1px var(--lijn); pointer-events: none; user-select: none; } /* de hoofdvraag: rustige sans (geen zware serif) */ .pagina-kop .kop-vraag { font-family: var(--font-sans); font-weight: 400; font-size: var(--size-lead); line-height: 1.42; max-width: 26em; margin: clamp(1.5rem, 3.5vh, 2.6rem) 0 0 auto; /* rechts uitgelijnd blok: posterasymmetrie */ padding-left: clamp(0rem, 8vw, 6rem); color: var(--ink); } .pagina-kop .kop-vraag em { color: var(--accent); font-style: normal; font-weight: 700; } /* ── 5 · Secties met margekolom ──────────────────────────────── */ .sectie { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(0, 3.2fr); gap: clamp(1rem, 3vw, 3rem); padding: calc(var(--regel) * 0.9) 0; border-top: 1px solid var(--lijn-zacht); } .sectie:first-of-type { border-top: 0; } .s-marge { position: relative; } .s-marge .s-nr { font-family: var(--font-mono); font-size: 0.72rem; color: var(--accent); display: block; margin-bottom: 0.5rem; font-feature-settings: 'tnum' 1; } .s-marge .s-label { font-family: var(--font-label); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); position: sticky; top: calc(var(--nav-hoogte) + 1.25rem); display: block; } .s-inhoud h2 { font-size: var(--size-h2); font-weight: 700; letter-spacing: -0.025em; margin-bottom: 0.5em; text-wrap: balance; } .s-inhoud h3 { font-size: var(--size-h3); font-weight: 600; letter-spacing: -0.01em; margin: 1.8em 0 0.5em; } .lead { font-family: var(--font-sans); font-weight: 400; font-size: var(--size-lead); line-height: 1.45; letter-spacing: -0.01em; max-width: 30em; margin-bottom: 0.9em; color: var(--ink); } .lead b, .lead strong { color: var(--accent); font-weight: 600; } /* Sleutelbegrippen in de lopende lead/hoofdvraag — dikgedrukt accent (sans, geen italic/serif). Voor "infrastructuur en risico", "stedelijke kwaliteit" e.d. */ .term { font-weight: 700; color: var(--accent); } /* lopende tekstkolom: comfortabele Inter-leesmaat */ .s-inhoud p { color: var(--ink); } .s-inhoud > p, .uitklap-binnen p { font-size: 1.02rem; } /* afwisselend naar rechts geschoven inhoud — doorbreekt de vaste kolom */ .sectie.verschoven .s-inhoud { padding-left: clamp(0rem, 10vw, 8rem); } body[data-pagina="fleeten"] .sectie.verschoven .s-inhoud, body[data-pagina="binnenalster"] .sectie.verschoven .s-inhoud, body[data-pagina="hafencity"] .sectie.verschoven .s-inhoud { padding-left: 0; } /* ── 6 · Uitklap (progressive disclosure) ─────────────────────── */ details.uitklap { margin: 1.2rem 0 0.4rem; border-top: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn); max-width: var(--maat); } details.uitklap > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 0.7rem; padding: 0.75rem 0.2rem; font-family: var(--font-display); font-weight: 500; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--water-diep); user-select: none; } details.uitklap > summary::-webkit-details-marker { display: none; } details.uitklap > summary::before { content: '+'; font-family: var(--font-mono); font-size: 1rem; line-height: 1; color: var(--accent); width: 1.1em; transition: transform 0.3s ease; } details.uitklap[open] > summary::before { content: '–'; } details.uitklap > summary:hover { color: var(--accent); } details.uitklap .uitklap-binnen { padding: 0.4rem 0.2rem 1.4rem; } details.uitklap .uitklap-binnen p { max-width: var(--maat); } /* ── 7 · Feitenfiche ──────────────────────────────────────────── */ .fiche { background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--radius); margin: 1.8rem 0; max-width: 46rem; box-shadow: 6px 6px 0 var(--lijn-zacht); } .fiche .fiche-kop { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; background: var(--inversie-bg); color: var(--inversie-ink); padding: 0.6rem 1.1rem; font-family: var(--font-display); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; } .fiche .fiche-kop .mono { opacity: 0.7; } .fiche dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.45rem 1.4rem; margin: 0; padding: 1rem 1.1rem 1.2rem; } .fiche dt { font-family: var(--font-display); font-weight: 500; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); padding-top: 0.18em; } .fiche dd { margin: 0; font-size: 0.95em; } /* ── 8 · Vier begrippen — rechthoeken ─────────────────────────── */ .begrippen { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(0.5rem, 1.2vw, 1rem); margin: 1.8rem 0; } .begrip { position: relative; border: 1px solid var(--lijn); border-top: 4px solid var(--water); background: var(--vlak); border-radius: var(--radius); padding: 0.9rem 1rem 1.1rem; transition: transform var(--transitie), box-shadow var(--transitie); } .begrip:nth-child(even) { transform: translateY(0.9rem); } /* licht verspringend ritme */ .begrip:hover { box-shadow: 5px 5px 0 var(--lijn-zacht); } .begrip .b-nr { font-family: var(--font-mono); font-size: 0.62rem; color: var(--accent); display: block; margin-bottom: 0.35rem; } .begrip h3 { font-size: 1.02rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--water-diep); margin: 0 0 0.35rem; } .begrip p { font-size: 0.85rem; line-height: 1.5; color: var(--ink-2); margin: 0; } /* ── 9 · Figuur-placeholder + bijschrift ──────────────────────── */ figure.figuur { margin: 2rem 0; max-width: 46rem; } figure.figuur.breed { max-width: none; } .figuur-vlak { position: relative; border: 1px solid var(--lijn); background: repeating-linear-gradient(45deg, transparent 0 14px, var(--lijn-zacht) 14px 15px); background-color: var(--vlak); min-height: clamp(200px, 36vh, 380px); display: flex; align-items: center; justify-content: center; } .figuur-vlak .ph-label { background: var(--bg); border: 1px solid var(--lijn); padding: 0.5rem 0.9rem; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--ink-2); text-align: center; max-width: 80%; } figure.figuur figcaption { display: grid; grid-template-columns: max-content 1fr; gap: 0.9rem; padding-top: 0.55rem; font-family: var(--font-display); font-weight: 500; font-size: 0.78rem; line-height: 1.5; color: var(--ink-2); } figure.figuur figcaption .fig-nr { font-family: var(--font-mono); font-size: 0.7rem; color: var(--accent); white-space: nowrap; padding-top: 0.1em; } /* ── 10 · Klikbare bronverwijzing + popup ─────────────────────── */ .cite { appearance: none; border: 0; background: transparent; padding: 0; color: var(--water); font: inherit; cursor: pointer; border-bottom: 1px dotted var(--water); transition: color 0.2s ease, border-color 0.2s ease; } .cite:hover { color: var(--accent); border-bottom-color: var(--accent); } .bron-popup { position: fixed; z-index: 2000; max-width: min(30rem, calc(100vw - 2rem)); background: var(--vlak); color: var(--ink); border: 1px solid var(--ink); border-radius: var(--radius); box-shadow: 8px 8px 0 rgba(20, 62, 82, 0.18); padding: 0; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease; } .bron-popup.open { opacity: 1; transform: none; pointer-events: auto; } .bron-popup .bp-kop { display: flex; justify-content: space-between; align-items: center; gap: 1rem; background: var(--inversie-bg); color: var(--inversie-ink); font-family: var(--font-display); font-weight: 700; font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; padding: 0.45rem 0.8rem; } .bron-popup .bp-sluit { appearance: none; border: 0; background: transparent; color: inherit; cursor: pointer; font-family: var(--font-mono); font-size: 0.9rem; line-height: 1; padding: 0.1rem 0.3rem; } .bron-popup .bp-apa { font-size: 0.88rem; line-height: 1.55; padding: 0.9rem 0.9rem 0.4rem; margin: 0; } .bron-popup .bp-acties { display: flex; gap: 1.2rem; padding: 0.5rem 0.9rem 0.9rem; } .bron-popup .bp-acties a { font-family: var(--font-display); font-weight: 500; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; border-bottom: 1px solid var(--water); } /* ── 11 · "Wie profiteert?"-marker ────────────────────────────── */ .profiteert { margin: 1.6rem 0; max-width: 46rem; border-left: 3px solid var(--accent); padding: 0.4rem 0 0.4rem 1.1rem; } .profiteert .p-vraag { font-family: var(--font-display); font-weight: 700; font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); display: block; margin-bottom: 0.5rem; } .profiteert .p-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; } .profiteert .chip { font-family: var(--font-display); font-weight: 500; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; border: 1px solid var(--lijn); border-radius: 99px; padding: 0.22rem 0.7rem; color: var(--ink-2); } .profiteert .chip.aan { background: var(--inversie-bg); border-color: var(--inversie-bg); color: var(--inversie-ink); } /* ── 11b · Interactie-integratiepunt ──────────────────────────── */ /* Schone placeholder voor de demo-fase: markeert waar de interactie per onderdeel komt, zonder de leesbaarheid te storen. */ .interactie-slot { display: flex; align-items: baseline; gap: 0.8rem; margin: 1.4rem 0; max-width: var(--maat); border: 1px dashed var(--lijn); border-left: 4px solid var(--water); padding: 0.7rem 1rem; background: var(--vlak); } .interactie-slot .is-tag { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--water-diep); white-space: nowrap; } .interactie-slot .is-naam { font-family: var(--font-display); font-weight: 500; font-size: 0.82rem; color: var(--ink-2); } .interactie-slot.signature { border-left-color: var(--accent); } .interactie-slot.signature .is-tag { color: var(--accent); } /* ── 12 · Spine-navigatie (vorige / volgende) ─────────────────── */ .spine-nav { display: grid; grid-template-columns: 1fr 1fr; border-top: 2px solid var(--ink); margin-top: var(--regel); } .spine-nav a { display: flex; flex-direction: column; gap: 0.35rem; padding: 1.4rem 0.5rem; color: var(--ink); transition: background 0.25s ease; } .spine-nav a:hover { background: var(--bg-diep); } .spine-nav .richting { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-2); } .spine-nav .titel { font-family: var(--font-sans); font-weight: 700; font-size: clamp(1.05rem, 2.4vw, 1.6rem); letter-spacing: -0.03em; } .spine-nav .volgende { text-align: right; align-items: flex-end; grid-column: 2; } .spine-nav .vorige { text-align: left; } /* ── 13 · Waterlijn-divider (rode draad) ──────────────────────── */ .waterlijn { height: 56px; margin: 0; display: block; width: 100%; } .waterlijn path { fill: none; stroke: var(--water); stroke-width: 1.5; opacity: 0.55; } /* ── 14 · Reveal-on-scroll ────────────────────────────────────── */ /* Alleen verbergen wanneer JS draait (html.js); zonder JS blijft alle inhoud zichtbaar (robuust onder file:// en voor toegankelijkheid). */ html.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.8s ease, transform 0.8s var(--transitie); } html.js .reveal.zichtbaar { opacity: 1; transform: none; } /* ── 15 · Voetregel ───────────────────────────────────────────── */ .site-voet { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1.2rem var(--rand) 1.6rem; border-top: 1px solid var(--lijn-zacht); font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em; color: var(--ink-2); } /* ── 16 · Landing ─────────────────────────────────────────────── */ .landing-poster { min-height: 100vh; display: flex; flex-direction: column; justify-content: space-between; padding: calc(var(--nav-hoogte) + 1.5rem) var(--rand) 2rem; position: relative; isolation: isolate; overflow: hidden; background: var(--bg); } .landing-poster::before { content: none; } .landing-kop, .landing-voet { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; position: relative; z-index: 3; } .kaart-collage { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; opacity: var(--landing-map-opacity); } .kaart-collage::before { content: ''; position: absolute; inset: 0; background-image: url('../assets/landing/hamburg-map-bw.jpg'); background-size: cover; background-position: center 46%; } .kaart-fragment { position: absolute; background-image: url('../assets/landing/hamburg-map-bw.jpg'); background-repeat: no-repeat; background-size: var(--kaart-bg-size, 120vw auto); background-position: var(--kaart-bg-pos, center center); border: 0; box-shadow: 0 18px 48px rgba(28, 27, 24, 0.18); filter: grayscale(1) brightness(calc(var(--kaart-blok-gamma) * var(--blok-bright))) contrast(var(--blok-contrast)); transform: translate3d(0, var(--blok-scroll-y, 0px), 0) scale(var(--blok-scale, 1)); transform-origin: var(--blok-origin, center center); will-change: transform; } .kaart-fragment-1 { left: var(--f1-left, -4vw); top: var(--f1-top, calc(var(--nav-hoogte) + 2.8rem)); width: var(--f1-width, 30vw); height: var(--f1-height, 24vh); --kaart-bg-size: 158vw auto; --kaart-bg-pos: 6% 14%; --blok-bright: 0.72; --blok-contrast: 1.35; --blok-origin: top left; } .kaart-fragment-2 { left: var(--f2-left, 24vw); top: var(--f2-top, calc(var(--nav-hoogte) + 5.7rem)); width: var(--f2-width, 14vw); height: var(--f2-height, 20vh); --kaart-bg-size: 230vw auto; --kaart-bg-pos: 34% 20%; --blok-bright: 1.36; --blok-contrast: 0.82; --blok-origin: center center; } .kaart-fragment-3 { left: var(--f3-left, 48vw); top: var(--f3-top, calc(var(--nav-hoogte) + 0.2rem)); width: var(--f3-width, 22vw); height: var(--f3-height, 23vh); --kaart-bg-size: 190vw auto; --kaart-bg-pos: 58% 13%; --blok-bright: 0.58; --blok-contrast: 1.58; --blok-origin: top center; } .kaart-fragment-4 { left: var(--f4-left, 77vw); top: var(--f4-top, 30vh); width: var(--f4-width, 26vw); height: var(--f4-height, 23vh); --kaart-bg-size: 148vw auto; --kaart-bg-pos: 96% 42%; --blok-bright: 1.18; --blok-contrast: 1.18; --blok-origin: center right; } .kaart-fragment-5 { left: var(--f5-left, 6vw); top: var(--f5-top, 64vh); width: var(--f5-width, 25vw); height: var(--f5-height, 28vh); --kaart-bg-size: 220vw auto; --kaart-bg-pos: 15% 82%; --blok-bright: 1.48; --blok-contrast: 0.74; --blok-origin: center left; } .kaart-fragment-6 { left: var(--f6-left, 55vw); top: var(--f6-top, 76vh); width: var(--f6-width, 34vw); height: var(--f6-height, 24vh); --kaart-bg-size: 172vw auto; --kaart-bg-pos: 76% 92%; --blok-bright: 0.84; --blok-contrast: 1.45; --blok-origin: bottom right; } .landing-typo { position: relative; z-index: 2; margin-top: clamp(2.2rem, 8vh, 5rem); } /* HAMBURG — Gondens (retro condensed display), solide inkt. HAMBURG + het WASSERSTADT-waterwoord eronder delen hetzelfde font en dezelfde cap-hoogte, strak op elkaar → ze lezen als één lockup. */ .landing-typo .bg-word { font-family: var(--font-titel); font-weight: 400; font-size: clamp(3rem, 11vw, 13rem); /* fallback; JS zet de echte grootte (cap-hoogte = WASSERSTADT) */ line-height: 0.9; /* ruimte voor de 'g'-staart van Hamburg */ letter-spacing: 0.005em; color: var(--ink); white-space: nowrap; user-select: none; margin: 0; padding-left: 0.01em; /* optische uitlijning H boven W */ } /* Hamburg en Wasserstadt vormen één lockup: het waterwoord schuift strak onder Hamburg (negatieve marge knipt de lege regelhoogte weg). */ .water-word-container { width: 100%; margin-top: -0.04em; } .water-svg { display: block; width: 100%; height: auto; overflow: hidden; } .landing-sub { margin-top: clamp(1.4rem, 3.5vh, 2.8rem); display: grid; grid-template-columns: minmax(0, 30rem) 1fr; gap: clamp(1rem, 4vw, 4rem); align-items: end; } .landing-sub .lead { margin: 0; max-width: 22em; text-shadow: none; } .landing-sub .lead-mark { display: inline; background: var(--bg); padding: 0.03em 0.13em 0.06em; line-height: 1.28; -webkit-box-decoration-break: clone; box-decoration-break: clone; } .landing-controls { display: flex; align-items: center; gap: clamp(0.75rem, 1.4vw, 1.25rem); flex-wrap: wrap; justify-content: center; } .kaart-regelaar { display: grid; grid-template-columns: auto minmax(5.8rem, 8.8rem) 3.4em; align-items: center; gap: 0.55rem; color: var(--ink); font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; } .kaart-regelaar input { width: 100%; accent-color: var(--water); } .kaart-regelaar output { text-align: right; color: var(--ink-2); } .landing-beeld-slot { border: 1px solid var(--lijn); background: repeating-linear-gradient(45deg, transparent 0 14px, var(--lijn-zacht) 14px 15px); min-height: 150px; display: flex; align-items: center; justify-content: center; } .scroll-cue { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; color: var(--water-diep); text-decoration: none; } .scroll-cue .lijn { width: 1px; height: 48px; background: currentColor; animation: cue-adem 2.2s ease-in-out infinite; transform-origin: top center; } .scroll-cue .label { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.3em; text-transform: uppercase; } @keyframes cue-adem { 0%, 100% { opacity: 0.35; transform: scaleY(1); } 50% { opacity: 0.85; transform: scaleY(0.5); } } /* hoe werkt dit — vier stappen */ .hoewerkt { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2vw, 1.8rem); margin-top: 1.5rem; } .hoewerkt .stap { border-top: 2px solid var(--ink); padding-top: 0.9rem; } .hoewerkt .stap .st-nr { font-family: var(--font-mono); font-size: 0.7rem; color: var(--accent); display: block; margin-bottom: 0.6rem; font-feature-settings: 'tnum' 1; } .hoewerkt .stap h3 { font-family: var(--font-sans); font-weight: 700; font-size: 1.18rem; letter-spacing: -0.02em; margin-bottom: 0.45rem; } .hoewerkt .stap p { font-size: 0.92rem; line-height: 1.55; color: var(--ink-2); margin: 0; } /* ── 16b · Editorial-patronen (uit referentieonderzoek) ───────── */ /* Full-bleed sectiekop met groot nummer + serif-titel (hiërarchie). */ .blok { padding: clamp(2.5rem, 6vh, 5rem) var(--rand); border-top: 1px solid var(--lijn); } .blok.getint { background: var(--bg-diep); } /* afwisselende tint (stateofaidesign) */ .blok.inkt { background: var(--inversie-bg); color: var(--inversie-ink); } .blok-binnen { max-width: 1500px; margin: 0 auto; } .blok-kop { display: flex; align-items: baseline; gap: 1rem; margin-bottom: clamp(1.5rem, 3.5vh, 2.6rem); } .blok-kop .bk-nr { font-family: var(--font-mono); font-size: 0.78rem; color: var(--accent); letter-spacing: 0.1em; font-feature-settings: 'tnum' 1; } .blok-kop h2 { font-family: var(--font-sans); font-weight: 800; font-size: clamp(1.8rem, 4.5vw, 3.4rem); letter-spacing: -0.035em; line-height: 0.98; } .blok-kop .bk-rule { flex: 1; height: 1px; background: var(--lijn); align-self: center; } /* Full-width zwarte CTA-balk met pijl (stateofaidesign). PRIMAIRE actie. */ .cta-balk { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; width: 100%; background: var(--inversie-bg); color: var(--inversie-ink); padding: clamp(1.5rem, 4vw, 2.6rem) clamp(1.5rem, 4vw, 2.8rem); border-radius: var(--radius); transition: transform var(--transitie), background 0.3s ease; } .cta-balk:hover { color: var(--inversie-ink); transform: translateY(-2px); } .cta-balk .cta-tekst { display: flex; flex-direction: column; gap: 0.35rem; } .cta-balk .cta-label { font-family: var(--font-label); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.7; } .cta-balk .cta-titel { font-family: var(--font-sans); font-weight: 700; font-size: clamp(1.4rem, 3.2vw, 2.4rem); line-height: 1.05; letter-spacing: -0.03em; } .cta-balk .cta-pijl { font-family: var(--font-sans); font-size: clamp(1.6rem, 4vw, 2.6rem); line-height: 1; flex: none; transition: transform var(--transitie); } .cta-balk:hover .cta-pijl { transform: translateX(0.4rem); } /* secundaire CTA-balk (lichter, voor binnen tinted blokken) */ .cta-balk.licht { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); } .cta-balk.licht:hover { background: var(--ink); color: var(--bg); } /* drie structuren op de landing */ .drie-structuren { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.6rem, 1.5vw, 1.2rem); margin-top: 2.4rem; } .structuur-kaart { display: block; position: relative; border: 1px solid var(--lijn); background: var(--vlak); padding: 1.2rem 1.2rem 1.4rem; color: var(--ink); transition: transform var(--transitie), box-shadow var(--transitie); overflow: hidden; } .structuur-kaart::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: var(--water); transform: scaleX(0.22); transform-origin: left; transition: transform var(--transitie); } .structuur-kaart:hover { transform: translateY(-4px); box-shadow: 7px 7px 0 var(--lijn-zacht); color: var(--ink); } .structuur-kaart:hover::after { transform: scaleX(1); } .structuur-kaart .sk-nr { font-family: var(--font-mono); font-size: 0.66rem; color: var(--accent); } .structuur-kaart h3 { font-size: 1.25rem; text-transform: uppercase; margin: 0.4rem 0 0.2rem; } .structuur-kaart .sk-casus { font-family: var(--font-display); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--water-diep); display: block; margin-bottom: 0.6rem; } .structuur-kaart p { font-size: 0.88rem; color: var(--ink-2); margin: 0; } /* ── 16c · Site-diagram (leeswijzer / opbouw) ─────────────────── */ /* Inleiding → drie parallelle hoofdstukken → conclusie → literatuur. Toont de structuur én laat springen. Verticale "pijp"-connectoren, een parallel-bracket boven de drie hoofdstukken. */ .diagram { display: flex; flex-direction: column; align-items: center; gap: 0; margin: 1.5rem auto 0; max-width: 1100px; } .dg-pipe { width: 2px; height: clamp(22px, 4vh, 40px); background: var(--lijn); } .dg-node { display: block; width: 100%; max-width: 540px; position: relative; border: 1.5px solid var(--ink); background: var(--vlak); border-radius: var(--radius); padding: 1rem 1.3rem; color: var(--ink); transition: transform var(--transitie), background 0.25s ease, box-shadow var(--transitie); } a.dg-node:hover { transform: translateY(-2px); box-shadow: 5px 5px 0 var(--lijn-zacht); color: var(--ink); } .dg-node .dg-kop { display: flex; align-items: baseline; gap: 0.6rem; } .dg-node .dg-nr { font-family: var(--font-mono); font-size: 0.7rem; color: var(--accent); letter-spacing: 0.08em; font-feature-settings: 'tnum' 1; } .dg-node .dg-fase { font-family: var(--font-label); font-weight: 500; font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-2); margin-left: auto; } .dg-node h3 { font-family: var(--font-sans); font-weight: 700; font-size: 1.25rem; letter-spacing: -0.025em; margin: 0.25rem 0 0.1rem; } .dg-node p { font-size: 0.85rem; line-height: 1.5; color: var(--ink-2); margin: 0.2rem 0 0; max-width: none; } .dg-node.start, .dg-node.merge { background: var(--inversie-bg); border-color: var(--inversie-bg); color: var(--inversie-ink); } .dg-node.start h3, .dg-node.merge h3 { color: var(--inversie-ink); } .dg-node.start p, .dg-node.merge p { color: rgba(237, 244, 247, 0.75); } .dg-node.start .dg-fase, .dg-node.merge .dg-fase { color: rgba(237, 244, 247, 0.6); } a.dg-node.start:hover, a.dg-node.merge:hover { color: var(--inversie-ink); } /* parallel-groep: bracket boven de drie hoofdstukken */ .dg-parallel { width: 100%; --dg-gap: clamp(0.6rem, 1.5vw, 1.4rem); } .dg-bracket { position: relative; height: 0; margin-bottom: 0; } .dg-bracket::before { /* horizontale rail */ content: ''; position: absolute; top: 0; left: calc((100% - (2 * var(--dg-gap))) / 6); right: calc((100% - (2 * var(--dg-gap))) / 6); height: 2px; background: var(--lijn); } .dg-bracket::after { /* centrale toevoer van bovenaf */ content: ''; position: absolute; top: -1px; left: 50%; width: 2px; height: 2px; background: var(--lijn); } .dg-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--dg-gap); } .dg-cols .dg-col { display: flex; flex-direction: column; align-items: center; } .dg-cols .dg-col .dg-droppipe { width: 2px; height: clamp(12px, 2vh, 20px); background: var(--lijn); } .dg-cols .dg-node { max-width: none; border-color: var(--lijn); } .dg-cols .dg-node::before { /* gekleurde kop-rand per gebied */ content: ''; position: absolute; top: -1.5px; left: -1.5px; right: -1.5px; height: 4px; background: var(--punt-kleur, var(--water)); border-radius: var(--radius) var(--radius) 0 0; } .dg-cols .dg-node { border-top-color: transparent; } .dg-label { position: relative; width: 100%; font-family: var(--font-label); font-weight: 500; font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-2); text-align: center; margin: 0; padding: clamp(18px, 3vh, 30px) 0 clamp(10px, 1.8vh, 18px); } .dg-label::before, .dg-label::after { content: ''; position: absolute; left: 50%; width: 2px; transform: translateX(-50%); background: var(--lijn); } .dg-label::before { top: 0; height: calc(clamp(18px, 3vh, 30px) - 0.35em); } .dg-label::after { bottom: 0; height: calc(clamp(10px, 1.8vh, 18px) - 0.15em); } @media (max-width: 740px) { .dg-cols { grid-template-columns: 1fr; gap: 0; } .dg-cols .dg-col { width: 100%; } .dg-bracket { display: none; } .dg-cols .dg-col .dg-droppipe { height: clamp(18px, 3vh, 28px); } .dg-cols .dg-col + .dg-col .dg-droppipe { display: block; } } /* ── 17 · Tijdlijn-strip ──────────────────────────────────────── */ .sectie.tijdlijn-volbreed { display: block; } .tijdlijn-volbreed .s-marge { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 1rem; } .tijdlijn-volbreed .s-marge .s-nr { margin: 0; } .tijdlijn-volbreed .s-marge .s-label { position: static; } .tijdlijn-volbreed .s-inhoud { max-width: none; } .tijdlijn-volbreed .s-inhoud > p, .tijdlijn-volbreed details.uitklap { max-width: var(--maat); } .tijdlijn-wrap { margin: 1.5rem 0; } .tijdlijn-legenda { display: flex; gap: 1.2rem; flex-wrap: wrap; margin-bottom: 1rem; } .tijdlijn-legenda .leg { display: inline-flex; align-items: center; gap: 0.45rem; font-family: var(--font-display); font-weight: 500; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); } .tijdlijn-legenda .bol { width: 10px; height: 10px; border-radius: 50%; } .tijdlijn-scroller { overflow-x: auto; cursor: grab; border-top: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn); padding: 2.2rem 0 1.6rem; scrollbar-width: thin; position: relative; } .tijdlijn-scroller.sleept { cursor: grabbing; user-select: none; } .tijdlijn-spoor { display: flex; gap: clamp(1.2rem, 2.5vw, 2.4rem); padding: 0 var(--rand); width: max-content; position: relative; } .tijdlijn-spoor::before { content: ''; position: absolute; left: 0; right: 0; top: 9px; height: 1px; background: var(--lijn); } .tl-punt { position: relative; width: clamp(18rem, 28vw, 24rem); flex: none; padding-top: 1.6rem; } .tl-punt::before { content: ''; position: absolute; top: 4px; left: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--punt-kleur, var(--water)); } .tl-punt .tl-jaar { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.3rem, 2.6vw, 1.9rem); line-height: 1; display: block; } .tl-beeld { min-height: clamp(11rem, 21vh, 15rem); margin: 0.8rem 0 0.75rem; border: 1px solid var(--lijn); background: repeating-linear-gradient(45deg, transparent 0 14px, var(--lijn-zacht) 14px 15px); background-color: var(--vlak); display: flex; align-items: center; justify-content: center; } .tl-beeld span { border: 1px solid var(--lijn); background: var(--bg); padding: 0.45rem 0.7rem; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); } .tl-punt .tl-gebied { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--punt-kleur, var(--water)); display: block; margin: 0.3rem 0 0.45rem; } .tl-punt p { font-size: 0.86rem; line-height: 1.5; color: var(--ink-2); margin: 0; } /* gebiedskleuren */ .gebied-fleeten { --punt-kleur: var(--accent); } .gebied-binnenalster { --punt-kleur: var(--water); } .gebied-hafencity { --punt-kleur: #3F7D5C; } .gebied-gedeeld { --punt-kleur: var(--ink-2); } /* ── 18 · Kaart-integratiepunten (inleiding + softmap) ────────── */ .kaart-slot { border: 1px solid var(--lijn); background: var(--vlak); position: relative; min-height: clamp(300px, 55vh, 560px); display: flex; align-items: center; justify-content: center; } .kaart-slot .ph-label { background: var(--bg); border: 1px solid var(--lijn); padding: 0.6rem 1rem; font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-2); max-width: 75%; text-align: center; z-index: 2; } /* projectpuntenlijst naast/onder de kaart */ .puntenlijst { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; } .puntenlijst button { appearance: none; width: 100%; text-align: left; border: 1px solid var(--lijn); background: var(--vlak); padding: 0.7rem 0.9rem; cursor: pointer; display: grid; grid-template-columns: max-content 1fr max-content; align-items: baseline; gap: 0.8rem; transition: background 0.2s ease, border-color 0.2s ease; } .puntenlijst button:hover { border-color: var(--ink); } .puntenlijst button.actief { background: var(--inversie-bg); border-color: var(--inversie-bg); } .puntenlijst button.actief * { color: var(--inversie-ink) !important; } .puntenlijst .p-nr { font-family: var(--font-mono); font-size: 0.66rem; color: var(--accent); } .puntenlijst .p-naam { font-family: var(--font-display); font-weight: 700; font-size: 0.92rem; text-transform: uppercase; letter-spacing: 0.04em; } .puntenlijst .p-water { font-family: var(--font-mono); font-size: 0.62rem; color: var(--ink-2); } /* mini-fiche bij geselecteerd punt */ .punt-detail { border: 1px solid var(--lijn); border-left: 4px solid var(--water); background: var(--vlak); padding: 1rem 1.1rem; margin-top: 1rem; font-size: 0.92rem; } .punt-detail h3 { font-size: 1.05rem; text-transform: uppercase; margin-bottom: 0.3rem; } .punt-detail .pd-meta { font-family: var(--font-mono); font-size: 0.66rem; color: var(--ink-2); display: block; margin-bottom: 0.5rem; } .punt-detail p { margin: 0 0 0.6rem; } .punt-detail .pd-media { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-display); font-weight: 500; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--water-diep); border: 1px dashed var(--lijn); padding: 0.35rem 0.7rem; margin-right: 0.5rem; } /* ── 18b · Inleiding-kaart: SVG-laagconventie ─────────────────── */ /* Geldt ook voor Koens echte SVG, mits dezelfde id's/klassen worden aangehouden (zie js/inleiding-kaart.js). */ #inleiding-kaart { display: block; width: 100%; height: auto; overflow: visible; } #inleiding-kaart .water-vlak { fill: var(--water-licht); opacity: 0.5; transition: opacity 0.4s ease, fill 0.4s ease; } #inleiding-kaart .land { fill: none; } #inleiding-kaart #laag-water .water-vlak { fill: #9FC6D3; opacity: 0.52; } #inleiding-kaart [id^="structuur-"] .water-vlak { fill: #8FBED0; opacity: 0.62; } #inleiding-kaart [id^="structuur-"].actief .water-vlak { fill: var(--water); opacity: 0.78; } #inleiding-kaart [id^="punt-"] { cursor: pointer; } #inleiding-kaart .project-beeld { opacity: 0.68; filter: url(#kaart-beeld-schaduw); transition: opacity 0.3s ease, filter 0.3s ease; } #inleiding-kaart [id^="punt-"]:hover .project-beeld, #inleiding-kaart [id^="punt-"].actief .project-beeld { opacity: 1; filter: url(#kaart-beeld-actief); } #inleiding-kaart [id^="punt-"] circle { fill: var(--bg); stroke: var(--ink); stroke-width: 1.8; transition: fill 0.3s ease, r 0.3s ease; } #inleiding-kaart .marker-stem { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; } #inleiding-kaart [id^="punt-"].actief circle { fill: var(--accent); stroke: var(--accent); } #inleiding-kaart [id^="punt-"].actief .marker-stem { stroke: var(--accent); } #inleiding-kaart .project-label rect { fill: var(--bg); stroke: none; } #inleiding-kaart [id^="punt-"].actief .project-label rect { fill: var(--vlak); } #inleiding-kaart [id^="punt-"] text { font-family: var(--font-label); font-size: 8.5px; font-weight: 700; letter-spacing: 0.02em; fill: var(--ink); stroke: none; pointer-events: none; text-transform: uppercase; } #inleiding-kaart .project-label .label-thema { font-size: 5.8px; font-weight: 500; letter-spacing: 0.16em; fill: var(--ink-2); } #inleiding-kaart [id^="punt-"].actief text { fill: var(--ink); font-weight: bold; } /* ── 19 · Onderwater-literatuur ───────────────────────────────── */ .onderwater { position: relative; } .onderwater .water-overlay { position: fixed; left: 0; right: 0; bottom: 0; top: 0; pointer-events: none; z-index: 5; transition: opacity 0.4s ease; will-change: opacity, transform; } /* geanimeerde golf-SVG (zelfde methode als de landing): waterlichaam + meerdere golflagen + een lichte schuimlijn aan het oppervlak. js/onderwater.js tekent de paden en zet het oppervlak tussen "Op de bodem" en "de bronnen". */ .onderwater .onderwater-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } /* Bronnenlijst over de volle bladbreedte: geen margelabel meer, maar een sectiekop met regel; daaronder twee gelijke kolommen die de hele breedte vullen. */ .bronnen-sectie { padding: calc(var(--regel) * 0.9) 0; border-top: 1px solid var(--lijn-zacht); } .bronnen-kop { display: flex; align-items: baseline; gap: 1rem; margin-bottom: clamp(1.2rem, 3vh, 2.2rem); } .bronnen-kop h2 { font-family: var(--font-label); font-weight: 500; font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); margin: 0; white-space: nowrap; } .bronnen-kop .bronnen-rule { flex: 1; height: 1px; background: var(--lijn); } .bron-lijst { list-style: none; margin: 0; padding: 0; /* twee gelijke kolommen over de volle breedte (krantenflow: alfabetisch top→bodem per kolom) */ column-count: 2; column-gap: clamp(2rem, 5vw, 4.5rem); column-rule: 1px solid var(--lijn-zacht); } .bron-lijst li { padding: 0.9rem 0.4rem 0.9rem 0; border-bottom: 1px solid var(--lijn-zacht); font-size: 0.95rem; line-height: 1.6; display: grid; grid-template-columns: max-content 1fr; gap: 1rem; break-inside: avoid; /* bron niet over kolomgrens splitsen */ scroll-margin-top: calc(var(--nav-hoogte) + 2rem); } .bron-lijst li .b-anker { font-family: var(--font-mono); font-size: 0.64rem; color: var(--accent); padding-top: 0.4em; } .bron-lijst li.uitgelicht { background: var(--bg-diep); outline: 2px solid var(--water); outline-offset: 4px; } .bron-lijst a { word-break: break-all; font-size: 0.85em; } /* ── 20 · Responsief ──────────────────────────────────────────── */ @media (max-width: 900px) { .begrippen { grid-template-columns: repeat(2, 1fr); } .begrip:nth-child(even) { transform: none; } .hoewerkt { grid-template-columns: repeat(2, 1fr); } .drie-structuren { grid-template-columns: 1fr; } .landing-sub { grid-template-columns: 1fr; } .landing-kop { align-items: start; flex-wrap: wrap; } .landing-controls { order: 3; flex-basis: min(100%, 36rem); justify-content: flex-start; } .bron-lijst { column-count: 1; } } @media (max-width: 720px) { .sectie { grid-template-columns: 1fr; gap: 0.6rem; } .s-marge .s-label { position: static; display: inline-block; margin-bottom: 0.4rem; } .sectie.verschoven .s-inhoud { padding-left: 0; } .pagina-kop .kop-nr { display: none; } .pagina-kop .kop-vraag { margin-left: 0; padding-left: 0; } .nav-merk { display: none; } .fiche dl { grid-template-columns: 1fr; gap: 0.1rem 0; } .fiche dt { margin-top: 0.5rem; } .begrippen, .hoewerkt { grid-template-columns: 1fr; } .spine-nav { grid-template-columns: 1fr; } .spine-nav .volgende { grid-column: 1; } .landing-controls { display: grid; grid-template-columns: 1fr; gap: 0.38rem; } .kaart-regelaar { grid-template-columns: 5.2rem minmax(0, 1fr) 3.4em; max-width: 100%; } .kaart-fragment { box-shadow: 0 10px 30px rgba(28, 27, 24, 0.14); } .kaart-fragment-1 { left: var(--f1-left, -16vw); top: var(--f1-top, calc(var(--nav-hoogte) + 10rem)); width: var(--f1-width, 58vw); height: var(--f1-height, 9rem); --kaart-bg-size: 250vw auto; --kaart-bg-pos: 0% 15%; } .kaart-fragment-2 { left: var(--f2-left, 55vw); top: var(--f2-top, calc(var(--nav-hoogte) + 8rem)); width: var(--f2-width, 36vw); height: var(--f2-height, 7.8rem); --kaart-bg-size: 240vw auto; --kaart-bg-pos: 75% 12%; } .kaart-fragment-3 { left: var(--f3-left, 41vw); top: var(--f3-top, calc(var(--nav-hoogte) + 17.8rem)); width: var(--f3-width, 1.9rem); height: var(--f3-height, 16rem); --kaart-bg-size: 280vw auto; --kaart-bg-pos: 48% 36%; } .kaart-fragment-4 { left: var(--f4-left, 58vw); top: var(--f4-top, 42vh); width: var(--f4-width, 54vw); height: var(--f4-height, 10rem); --kaart-bg-size: 220vw auto; --kaart-bg-pos: 96% 52%; } .kaart-fragment-5 { left: var(--f5-left, -5vw); top: var(--f5-top, 68vh); width: var(--f5-width, 42vw); height: var(--f5-height, 9.5rem); --kaart-bg-size: 260vw auto; --kaart-bg-pos: 8% 86%; } .kaart-fragment-6 { left: var(--f6-left, 56vw); top: var(--f6-top, calc(var(--nav-hoogte) + 20.7rem)); width: var(--f6-width, 60vw); height: var(--f6-height, 11rem); --kaart-bg-size: 230vw auto; --kaart-bg-pos: 70% 58%; } }