/* ==========================================================================
   rolf-froehling.de — 2026 stylesheet
   Replaces Foundation 6 + jQuery-era CSS. No framework, no build step:
   this file is served as-is, so it must stay readable and hand-editable.

   Design intent: the photographs and the prose are the product. Everything
   here gets out of their way — generous space, one strong reading column,
   a restrained warm palette that works in both light and dark.
   ========================================================================== */

/* --------------------------------------------------------------- tokens -- */
:root {
  /* Warm neutrals rather than pure grey — this is a travel journal. */
  --bg:            #fbfaf8;
  --bg-sunken:     #f2efe9;
  --bg-raised:     #ffffff;
  --ink:           #1c1a17;
  --ink-soft:      #55504a;
  --ink-faint:     #8a837a;
  --rule:          #e2ddd4;
  /* Picked off the purple canoe in the Alaska hero. */
  --accent:        #6b4e9b;
  --accent-ink:    #ffffff;
  --accent-soft:   #f0ebf7;
  --accent-strong: #573f80;

  /* Aliases resolve lazily, so these follow the dark-mode overrides above
     without needing to be restated in each palette. */
  --muted:         var(--ink-soft);
  /* The map's land mass. The one token that needs a real value per palette. */
  --map-land:      #e6e0d5;

  --measure:       68ch;
  --page:          min(100% - 2.5rem, 78rem);
  --gap:           clamp(1rem, 2.5vw, 2rem);

  --radius:        10px;
  --shadow:        0 1px 2px rgb(28 26 23 / .05), 0 8px 24px -12px rgb(28 26 23 / .18);

  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:        #14130f;
    --bg-sunken: #1c1a16;
    --bg-raised: #211e1a;
    --ink:       #ece7de;
    --ink-soft:  #b3aca1;
    --ink-faint: #857e73;
    --rule:      #322e28;
    --accent:    #b79ae4;
    --accent-ink:#17130f;
    --accent-soft:#241d33;
  --accent-strong: #cbb4f0;
  --map-land:  #2b2822;
    --shadow:    0 1px 2px rgb(0 0 0 / .4), 0 8px 24px -12px rgb(0 0 0 / .7);
  }
}
:root[data-theme="dark"] {
  --bg:        #14130f;
  --bg-sunken: #1c1a16;
  --bg-raised: #211e1a;
  --ink:       #ece7de;
  --ink-soft:  #b3aca1;
  --ink-faint: #857e73;
  --rule:      #322e28;
  --accent:    #b79ae4;
  --accent-ink:#17130f;
  --accent-soft:#241d33;
  --accent-strong: #cbb4f0;
  --map-land:  #2b2822;
  --shadow:    0 1px 2px rgb(0 0 0 / .4), 0 8px 24px -12px rgb(0 0 0 / .7);
}

/* --------------------------------------------------------------- reset --- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(1.0625rem, 0.98rem + 0.36vw, 1.1875rem);
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img, picture, video, canvas { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: from-font; }
a:hover { text-decoration-color: var(--accent); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

/* Skip link — first thing a keyboard user meets. */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--accent); color: var(--accent-ink);
  padding: .75rem 1.25rem; border-radius: 0 0 var(--radius) 0; font-weight: 600;
}
.skip-link:focus { left: 0; }

/* ------------------------------------------------------------ typography - */
h1, h2, h3, h4 { font-family: var(--serif); line-height: 1.15; text-wrap: balance; margin: 0 0 .5em; font-weight: 600; }
h1 { font-size: clamp(1.9rem, 1.35rem + 2.4vw, 3.1rem); letter-spacing: -.015em; }
h2 { font-size: clamp(1.45rem, 1.15rem + 1.3vw, 2.1rem); margin-top: 1.8em; }
h3 { font-size: clamp(1.2rem, 1.05rem + .7vw, 1.5rem); margin-top: 1.6em; }
p  { margin: 0 0 1.15em; text-wrap: pretty; }
strong { font-weight: 650; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 2.5rem 0; }

/* ---------------------------------------------------------------- shell -- */
.site { min-height: 100dvh; display: flex; flex-direction: column; }
.wrap { width: var(--page); margin-inline: auto; }

/* --------------------------------------------------------------- header -- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.6) blur(10px);
  border-bottom: 1px solid var(--rule);
}
.site-header__inner {
  width: var(--page); margin-inline: auto;
  display: flex; align-items: center; gap: var(--gap);
  min-height: 4rem;
}
.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; font-weight: 600; }
.brand img { width: 40px; height: 40px; border-radius: 50%; }
.brand__name { font-family: var(--serif); font-size: 1.05rem; letter-spacing: .01em; }
.brand__name small {
  display: block; font-family: var(--sans); font-size: .72rem; font-weight: 400;
  color: var(--ink-faint); letter-spacing: .06em; text-transform: uppercase;
  /* Same marker the menu uses, on the word that parallels the menu labels.
     fit-content so the rule ends with REISEREPORTAGEN rather than running to
     the width of the name above it. */
  width: fit-content;
  padding-bottom: .15rem;
  border-bottom: 2px solid transparent;
}
.brand:hover .brand__name small { border-bottom-color: var(--accent); }
.brand.is-current .brand__name small { color: var(--ink-soft); border-bottom-color: var(--accent); }

.site-nav { margin-left: auto; }
.site-nav ul { list-style: none; display: flex; gap: 1.5rem; margin: 0; padding: 0; }
.site-nav a { text-decoration: none; font-size: .95rem; color: var(--ink-soft); padding: .4rem 0; border-bottom: 2px solid transparent; }
.site-nav a:hover { color: var(--ink); border-bottom-color: var(--accent); }
.site-nav .current > a, .site-nav .active > a { color: var(--ink); border-bottom-color: var(--accent); }

.nav-toggle { display: none; }

@media (max-width: 60rem) {
  .nav-toggle {
    display: inline-flex; align-items: center; gap: .5rem; margin-left: auto;
    background: none; border: 1px solid var(--rule); border-radius: var(--radius);
    color: var(--ink); font: inherit; font-size: .9rem; padding: .5rem .8rem; cursor: pointer;
  }
  .site-nav {
    position: fixed; inset: 4rem 0 auto 0; margin: 0;
    background: var(--bg-raised); border-bottom: 1px solid var(--rule);
    max-height: calc(100dvh - 4rem); overflow-y: auto;
    display: none; box-shadow: var(--shadow);
  }
  .site-nav[data-open="true"] { display: block; }
  .site-nav ul { flex-direction: column; gap: 0; width: var(--page); margin-inline: auto; padding: .5rem 0 1.5rem; }
  .site-nav li + li { border-top: 1px solid var(--rule); }
  .site-nav a { display: block; padding: .85rem 0; font-size: 1rem; border-bottom: 0; }
}

/* ----------------------------------------------------------------- hero -- */
/* Was max-height: calc(100vh - 200px) — two thirds of the screen before a
   word of text. A hero should frame the story, not replace it. */
.hero { position: relative; margin-bottom: clamp(1.5rem, 4vw, 3rem); background: var(--bg-sunken); }
.hero__media { width: 100%; aspect-ratio: 21 / 9; max-height: min(52vh, 460px); overflow: hidden; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 45rem) { .hero__media { aspect-ratio: 4 / 3; max-height: 42vh; } }

/* The old overlay was a full-width rgba(0,0,0,.7) slab across the picture.
   A single line of type, bottom-left, reads better and hides less. */
.hero__caption {
  position: absolute; inset-inline: 0; bottom: 0;
  padding: clamp(1rem, 4vw, 2.5rem) 0;
  background: linear-gradient(to top, rgb(0 0 0 / .62), rgb(0 0 0 / .28) 45%, transparent);
  color: #fff;
}
.hero__caption .wrap { display: grid; gap: .25rem; }
.hero__kicker { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; opacity: .9; }
.hero__caption h1 { color: #fff; margin: 0; text-shadow: 0 1px 18px rgb(0 0 0 / .45); }

/* ----------------------------------------------------------------- main -- */
main { flex: 1; }
.page-head { width: var(--page); margin: clamp(1.5rem, 4vw, 2.5rem) auto clamp(1rem, 3vw, 2rem); }
.page-head h1 { margin: 0; }

/* One reading column, images allowed to break out of it. */
.prose { width: var(--page); margin-inline: auto; display: grid; grid-template-columns: 1fr; }
.prose > * { max-width: var(--measure); margin-inline: auto; width: 100%; }
.prose figure, .prose .imagegallery, .prose .banner, .prose .imgwrap { max-width: 100%; }

figure { margin: clamp(1.5rem, 4vw, 2.5rem) 0; }
figcaption, .imgcaption, .caption {
  font-size: .875rem; color: var(--ink-faint); margin-top: .6rem; line-height: 1.5;
}

/* --------------------------------------------------------------- images -- */
.imagegallery {
  display: grid; gap: .75rem;
  grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
  margin: clamp(1.5rem, 4vw, 2.5rem) 0;
}
.imagegallery a { display: block; overflow: hidden; border-radius: var(--radius); background: var(--bg-sunken); }
.imagegallery img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .35s ease; }
.imagegallery a:hover img { transform: scale(1.03); }


.imgwrap { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }

/* --------------------------------------------------------------- audio --- */
/* 436 broadcast pieces — the thing no other travel site has. Give them presence. */
.audio {
  background: var(--accent-soft); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: clamp(1rem, 3vw, 1.5rem);
  margin: clamp(1.5rem, 4vw, 2.5rem) 0;
}
/* The label used to be a ::before on the whole box, so a block holding three
   recordings announced "Originalton" once. It belongs to each recording, next
   to that recording's running time. */
.audio audio { width: 100%; display: block; }
.audio__item + .audio__item { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--rule); }
.audio__meta { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; margin: 0 0 .45rem; }
.audio__label {
  font-size: .75rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); font-weight: 600;
}
.audio__length { font-size: .82rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.audio__length::before { content: "· "; color: var(--rule); }

/* ---------------------------------------------------------------- cards -- */
.cards { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); padding: 0; list-style: none; }
.card { background: var(--bg-raised); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.card a { text-decoration: none; display: block; }
.card img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.card__body { padding: 1rem 1.1rem 1.2rem; }
.card__body h3 { margin: 0 0 .3rem; font-size: 1.1rem; }
.card__meta { font-size: .8rem; color: var(--ink-faint); }

/* --------------------------------------------------------------- footer -- */
.site-footer {
  margin-top: clamp(3rem, 8vw, 5rem);
  background: var(--bg-sunken); border-top: 1px solid var(--rule);
  padding: clamp(2rem, 5vw, 3.5rem) 0;
  font-size: .92rem; color: var(--ink-soft);
}
.site-footer__inner { width: var(--page); margin-inline: auto; display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.site-footer h2 { font-family: var(--sans); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 .7rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.site-footer a { color: var(--ink-soft); }
.site-footer a:hover { color: var(--ink); }
.social { display: flex; gap: 1rem; font-size: 1.25rem; }

/* --------------------------------------------------------------- utility - */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.button, button.startgal {
  display: inline-block; background: var(--accent); color: var(--accent-ink);
  border: 0; border-radius: var(--radius); padding: .6rem 1.1rem;
  font: inherit; font-size: .92rem; font-weight: 600; cursor: pointer; text-decoration: none;
}
.button:hover, button.startgal:hover { filter: brightness(1.08); }

/* --------------------------------------------------------------- lightbox */
dialog.lightbox { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100dvh; }
dialog.lightbox::backdrop { background: rgb(0 0 0 / .88); }
dialog.lightbox img { max-width: 96vw; max-height: 90dvh; width: auto; margin: auto; border-radius: 4px; }
dialog.lightbox .lb-close {
  position: fixed; top: 1rem; right: 1rem; background: rgb(255 255 255 / .12);
  color: #fff; border: 0; border-radius: 50%; width: 2.75rem; height: 2.75rem;
  font-size: 1.4rem; cursor: pointer;
}

/* Tables and iframes from RTE content shouldn't blow out the layout. */
.prose table { display: block; overflow-x: auto; max-width: 100%; border-collapse: collapse; }
.embed-container { position: relative; aspect-ratio: 16 / 9; }
.embed-container iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: var(--radius); }

/* Click-to-load placeholder. The iframe sits behind it with no src, so nothing
   reaches Google until the button is pressed. */
.embed-consent {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .55rem; text-align: center;
  padding: clamp(1rem, 4vw, 2rem);
  background: var(--bg-sunken);
  border: 1px solid var(--rule); border-radius: var(--radius);
}
.embed-consent__lead { margin: 0; font-weight: 600; letter-spacing: .02em; }
.embed-consent__note {
  margin: 0; max-width: 46ch; font-size: .85rem; line-height: 1.5; color: var(--muted);
}
.embed-consent__btn {
  border: 0; border-radius: 999px; cursor: pointer;
  padding: .6rem 1.4rem; font: inherit; font-weight: 600;
  background: var(--accent); color: #fff;
}
.embed-consent__btn:hover { background: var(--accent-strong); }
.embed-consent__link { margin: 0; font-size: .8rem; }
.embed-consent__link a { color: var(--muted); }

/* Full-bleed children of the reading column.
   The hero and the wide galleries escape the 68ch measure and run edge to edge;
   everything else stays in the column. */
.prose > .hero,
.prose > .elem > .hero {
  width: 100vw; max-width: none;
  margin-inline: calc(50% - 50vw);
}
.prose > .elem { max-width: var(--measure); margin-inline: auto; width: 100%; }
.prose > .elem > .imagegallery,
.prose > .elem > .imgwrap {
  width: min(100vw - 2.5rem, 78rem);
  max-width: none;
  margin-inline: calc(50% - min(50vw - 1.25rem, 39rem));
}
@media (max-width: 60rem) {
  .prose > .elem > .imagegallery,
  .prose > .elem > .imgwrap { width: 100%; margin-inline: 0; }
}

/* ------------------------------------------------------------- galleries --
   Every picture is now a real thumbnail (see Textimg.html). A plain auto-fill
   grid; a lone picture keeps its own proportions and stays in the measure. */
.imagegallery {
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  margin: clamp(1.5rem, 4vw, 2.5rem) 0;
}
.imagegallery figure { margin: 0; }
.imagegallery a { display: block; border-radius: var(--radius); overflow: hidden; }
.imagegallery img {
  display: block; width: 100%; height: 100%;
  aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform .35s ease;
}
.imagegallery a:hover img { transform: scale(1.03); }
.imagegallery figcaption { font-size: .85rem; color: var(--muted); margin-top: .45rem; line-height: 1.45; }
.imagegallery.single { grid-template-columns: 1fr; }
.imagegallery.single img { aspect-ratio: auto; height: auto; }
.prose > .elem > .imagegallery.single { width: 100%; margin-inline: 0; }
@media (prefers-reduced-motion: reduce) { .imagegallery a:hover img { transform: none; } }

/* =========================================================== reportage index
   Replaces the two hand-typed listing pages. The map, the filters and the
   cards are one component; without JavaScript the cards alone are the page,
   which is why nothing here depends on script to be readable. */

.prose--wide { --measure: 100%; }
.prose--wide > * { max-width: none; }

.reportagen__intro { text-align: center; margin-block: clamp(1rem, 4vw, 2.5rem) 1.5rem; }
.reportagen__intro h1 { margin-bottom: .4rem; }
.reportagen__stats { color: var(--muted); font-size: 1.02rem; }
.reportagen__stats strong { color: var(--ink); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- the map -- */
.worldmap { margin: 0 0 clamp(1rem, 3vw, 2rem); }
.worldmap__canvas {
  position: relative; width: 100%; aspect-ratio: 1000 / 420;
  background: var(--accent-soft); border: 1px solid var(--rule);
  border-radius: var(--radius); overflow: hidden;
}
.worldmap__base { position: absolute; inset: 0; width: 100%; height: 100%; }
.worldmap__base path { fill: var(--map-land); stroke: none; }

.worldmap__markers { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.worldmap__marker { position: absolute; transform: translate(-50%, -50%); }
.worldmap__marker a { display: block; line-height: 0; }
.worldmap__dot {
  display: block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent); border: 1.5px solid var(--bg);
  transition: transform .18s ease;
}
.worldmap__marker:hover .worldmap__dot,
.worldmap__marker a:focus-visible .worldmap__dot { transform: scale(1.6); }
.worldmap__marker[hidden] { display: none; }

/* the newest journeys pulse, so the eye lands on them first */
.worldmap__marker.is-recent .worldmap__dot { background: var(--accent-strong, var(--accent)); }
.worldmap__marker.is-recent .worldmap__dot::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%;
  border: 2px solid var(--accent); animation: rf-pulse 2.8s ease-out infinite;
}
@keyframes rf-pulse {
  0%   { transform: scale(.6); opacity: .9; }
  70%  { transform: scale(2.4); opacity: 0; }
  100% { transform: scale(2.4); opacity: 0; }
}

.worldmap__label {
  position: absolute; left: 50%; bottom: 145%; transform: translateX(-50%);
  background: var(--ink); color: var(--bg); font-size: .78rem; line-height: 1.2;
  padding: .3rem .55rem; border-radius: 4px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .15s ease; z-index: 3;
}
.worldmap__marker:hover .worldmap__label,
.worldmap__marker a:focus-visible .worldmap__label { opacity: 1; }

.worldmap__legend {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center;
  margin-top: .6rem; font-size: .85rem; color: var(--muted);
}
.worldmap__key { display: inline-flex; align-items: center; gap: .45rem; position: relative; }
.worldmap__key .worldmap__dot { position: relative; }

/* --------------------------------------------------------- time + filters -- */
.reportagen__time {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  margin-bottom: 1rem; font-size: .92rem;
}
.reportagen__time input[type="range"] { flex: 1 1 14rem; max-width: 26rem; accent-color: var(--accent); }
.reportagen__time output { font-weight: 600; min-width: 7rem; }

.reportagen__controls {
  display: grid; gap: var(--gap); align-items: end;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  margin-bottom: clamp(1rem, 3vw, 1.75rem);
}
.reportagen__controls .field { display: grid; gap: .3rem; }
.reportagen__controls label { font-size: .82rem; color: var(--muted); font-weight: 600; }
.reportagen__controls input[type="search"],
.reportagen__controls select {
  font: inherit; padding: .55rem .7rem; border: 1px solid var(--rule);
  border-radius: var(--radius); background: var(--bg); color: var(--ink); width: 100%;
}
.reportagen__controls input[type="search"]:focus-visible,
.reportagen__controls select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.reportagen__result { align-self: end; margin: 0; color: var(--muted); font-size: .88rem; }

/* ------------------------------------------------------------------ cards -- */
.reportagen__list { grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr)); }
.card { list-style: none; }
.card[hidden] { display: none; }
.card__link {
  display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit;
  border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden;
  background: var(--bg); transition: transform .2s ease, box-shadow .2s ease;
}
.card__link:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgb(0 0 0 / .10); }
.card__media { aspect-ratio: 3 / 2; overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card__media--empty { background: var(--accent-soft); }
.card__body { padding: .9rem 1rem 1.1rem; display: grid; gap: .45rem; align-content: start; }
.card__title { font-size: 1.1rem; margin: 0; line-height: 1.25; }
.card__meta { margin: 0; display: flex; gap: .4rem; flex-wrap: wrap; }
.chip {
  font-size: .72rem; font-weight: 600; letter-spacing: .02em;
  background: var(--accent-soft); color: var(--accent); border-radius: 999px; padding: .15rem .55rem;
}
.card__teaser {
  margin: 0; font-size: .9rem; color: var(--muted); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.card__facts { margin: 0; font-size: .8rem; color: var(--muted); display: flex; gap: .75rem; flex-wrap: wrap; }
.card__facts span { white-space: nowrap; }
.card__facts span + span::before { content: "·"; margin-right: .75rem; color: var(--rule); }

.reportagen__empty { text-align: center; color: var(--muted); padding: 2rem 0; }

@media (prefers-reduced-motion: reduce) {
  .worldmap__marker.is-recent .worldmap__dot::after { animation: none; opacity: .5; }
  .card__link:hover { transform: none; }
}

/* ------------------------------------------------- orientation, first visit
   Two seconds to say what this is. The audio number leads because it is the
   one thing a travel blog cannot claim; the promise list says what the site
   is not, which for a working journalist is the more persuasive half. */

.reportagen__kicker {
  text-transform: uppercase; letter-spacing: .12em; font-size: .76rem;
  font-weight: 700; color: var(--accent); margin: 0 0 .5rem;
}
.reportagen__intro h1 {
  font-size: clamp(1.7rem, 4.6vw, 3rem); line-height: 1.12;
  margin: 0 auto .9rem; max-width: 20ch; text-wrap: balance;
}

ul.reportagen__stats {
  list-style: none; margin: 0 0 1.1rem; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 2rem;
}
ul.reportagen__stats li { display: flex; flex-direction: column; line-height: 1.15; }
ul.reportagen__stats strong {
  font-size: clamp(1.25rem, 3vw, 1.7rem); font-variant-numeric: tabular-nums; color: var(--ink);
}
ul.reportagen__stats span { font-size: .78rem; color: var(--muted); }

.reportagen__promise {
  list-style: none; margin: 0 auto; padding: 0; max-width: 62ch;
  display: grid; gap: .3rem; font-size: .92rem; text-align: left;
}
.reportagen__promise li { padding-left: 1.6rem; position: relative; color: var(--ink-soft); }
.reportagen__promise li::before {
  position: absolute; left: 0; top: 0; font-weight: 700;
}
.reportagen__promise .is-yes::before { content: "✓"; color: #2f7d4f; }
.reportagen__promise .is-no::before  { content: "✕"; color: #a8443a; }

/* Returning visitors have already read the pitch. */
.reportagen__intro.is-compact .reportagen__promise,
.reportagen__intro.is-compact ul.reportagen__stats { display: none; }
.reportagen__intro.is-compact h1 { font-size: clamp(1.3rem, 3vw, 1.8rem); margin-bottom: .3rem; }

.reportagen__welcome-back {
  text-align: center; margin: 0 0 1.2rem; font-size: .95rem;
  background: var(--accent-soft); border-radius: var(--radius); padding: .7rem 1rem;
}
.reportagen__welcome-back a { font-weight: 600; }
.reportagen__welcome-back[hidden] { display: none; }

/* a card whose map marker is being hovered */
.card.is-linked .card__link { box-shadow: 0 0 0 2px var(--accent); }

/* -------------------------------------------------- story facts + chapters
   Rendered before the hero in the source, placed after it by order, because
   the banner and the body live in the same content column and the template
   cannot get between them. */

.prose > .hero       { order: -2; }
.prose > .storyfacts { order: -1; }

.storyfacts { margin: 0 0 clamp(1.25rem, 3vw, 2rem); }

.storyfacts__line {
  display: flex; flex-wrap: wrap; gap: .5rem 1.25rem;
  margin: 0 0 1rem; font-size: .88rem; color: var(--muted);
}
.storyfacts__line span { white-space: nowrap; }
.storyfacts__line span + span::before { content: "·"; margin-right: 1.25rem; color: var(--rule); }

.chapters {
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--bg-sunken); padding: clamp(.9rem, 2.5vw, 1.4rem);
}
.chapters__title {
  font-family: var(--sans); font-size: .78rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  margin: 0 0 .7rem;
}
.chapters__list { margin: 0; padding: 0; list-style: none; counter-reset: none; }
.chapters__list li + li { border-top: 1px solid var(--rule); }
.chapters__list a {
  display: flex; gap: .8rem; align-items: baseline;
  padding: .55rem 0; text-decoration: none; line-height: 1.35;
}
.chapters__list a:hover { color: var(--accent); }
.chapters__no {
  font-variant-numeric: tabular-nums; font-size: .78rem; font-weight: 700;
  color: var(--accent); min-width: 1.4rem;
}

/* the chapter headings the merge produced */
.prose h2.chapter,
.prose h2[id^="kapitel-"] { scroll-margin-top: 5rem; }
.prose .standfirst {
  font-family: var(--serif); font-size: 1.08rem; font-style: italic;
  color: var(--muted); margin: -.4em 0 1.2em;
}

/* --------------------------------------------------------------- search --- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.site-search { position: relative; margin-left: 1rem; }
.site-search input[type="search"] {
  font: inherit; font-size: .9rem; padding: .45rem .8rem; width: 12rem;
  border: 1px solid var(--rule); border-radius: 999px;
  background: var(--bg-raised); color: var(--ink);
}
.site-search input[type="search"]:focus { width: 16rem; outline: 2px solid var(--accent); outline-offset: 1px; }
@media (max-width: 60rem) {
  .site-search { order: 3; flex-basis: 100%; margin: 0 0 .7rem; }
  .site-search input[type="search"], .site-search input[type="search"]:focus { width: 100%; }
}

.site-search__panel {
  position: absolute; right: 0; top: calc(100% + .5rem); z-index: 150;
  width: min(30rem, calc(100vw - 2rem));
  max-height: min(70vh, 34rem); overflow-y: auto;
  background: var(--bg-raised); border: 1px solid var(--rule);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: .8rem;
}
.site-search__panel[hidden] { display: none; }
.site-search__status { margin: 0 0 .5rem; font-size: .8rem; color: var(--muted); }
.site-search__group + .site-search__group { margin-top: .9rem; border-top: 1px solid var(--rule); padding-top: .8rem; }
.site-search__group h2 {
  font-family: var(--sans); font-size: .72rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 .35rem;
}
.site-search__group ul { list-style: none; margin: 0; padding: 0; }
.site-search__group a {
  display: block; padding: .4rem .5rem; border-radius: 6px;
  text-decoration: none; font-size: .9rem; line-height: 1.4;
}
.site-search__group a:hover, .site-search__group a:focus-visible { background: var(--accent-soft); }
.site-search__snippet, .site-search__in { display: block; font-size: .82rem; color: var(--muted); }
.site-search mark { background: var(--accent-soft); color: inherit; font-weight: 600; padding: 0 .1em; border-radius: 2px; }

/* ------------------------------------------------------- map, second pass --
   [hidden] loses to display:flex, which is why the time filter showed up even
   with no years to offer. State first, then layout. */
.reportagen__time[hidden],
.worldmap__marker[hidden] { display: none !important; }

.worldmap__viewport {
  position: relative; width: 100%; aspect-ratio: 1000 / 389;
  background: var(--accent-soft); border: 1px solid var(--rule);
  border-radius: var(--radius); overflow: hidden; touch-action: none;
}
.worldmap__viewport[data-zoomed="true"] { cursor: grab; }
.worldmap__viewport[data-zoomed="true"]:active { cursor: grabbing; }

.worldmap__canvas {
  position: absolute; inset: 0; transform-origin: 0 0;
  aspect-ratio: auto; background: none; border: 0; border-radius: 0; overflow: visible;
  --z: 1;
}
/* the dot keeps its screen size however far in you zoom */
.worldmap__marker { transform: translate(-50%, -50%) scale(calc(1 / var(--z, 1))); }
.worldmap__label { transform: translateX(-50%); }

.worldmap__zoom {
  position: absolute; right: .6rem; bottom: .6rem; z-index: 5;
  display: flex; flex-wrap: wrap; gap: .3rem; justify-content: flex-end; max-width: 60%;
}
.worldmap__zoom button {
  font: inherit; font-size: .82rem; line-height: 1;
  min-width: 2rem; height: 2rem; padding: 0 .5rem;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  color: var(--ink); border: 1px solid var(--rule); border-radius: 6px; cursor: pointer;
}
.worldmap__zoom button:hover { background: var(--bg); border-color: var(--accent); }
.worldmap__zoom .is-wide { min-width: auto; }

.reportagen__time-end { font-variant-numeric: tabular-nums; font-size: .82rem; color: var(--muted); }

/* ------------------------------------------------------ two-handle range --
   A single slider filled purple to its left reads as "everything up to here
   is selected", which was never what it meant. Two handles say plainly that a
   span is being chosen, and the fill sits between them where it belongs. */

.reportagen__time { align-items: center; gap: .6rem 1rem; }
.reportagen__time-label { font-size: .82rem; color: var(--muted); font-weight: 600; }
.reportagen__time output { font-variant-numeric: tabular-nums; }

.rangeslider { position: relative; flex: 1 1 15rem; max-width: 26rem; height: 1.75rem; }
.rangeslider__track,
.rangeslider__fill {
  position: absolute; top: 50%; height: 4px; transform: translateY(-50%);
  border-radius: 999px; pointer-events: none;
}
.rangeslider__track { left: 0; right: 0; background: var(--rule); }
.rangeslider__fill { background: var(--accent); left: 0; width: 100%; }

.rangeslider input[type="range"] {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  margin: 0; padding: 0; background: none; border: 0;
  accent-color: auto;                 /* kills the browser's own left-hand fill */
  -webkit-appearance: none; appearance: none;
  pointer-events: none;               /* only the thumbs are grabbable */
}
.rangeslider input[type="range"]:focus-visible { outline: none; }
.rangeslider input[type="range"]::-webkit-slider-runnable-track { background: transparent; height: 100%; }
.rangeslider input[type="range"]::-moz-range-track { background: transparent; height: 100%; }
.rangeslider input[type="range"]::-moz-range-progress { background: transparent; }

.rangeslider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; pointer-events: auto;
  width: 1.05rem; height: 1.05rem; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--bg);
  box-shadow: 0 1px 3px rgb(0 0 0 / .3); cursor: grab;
}
.rangeslider input[type="range"]::-moz-range-thumb {
  pointer-events: auto;
  width: 1.05rem; height: 1.05rem; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--bg);
  box-shadow: 0 1px 3px rgb(0 0 0 / .3); cursor: grab;
}
.rangeslider input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--accent); outline-offset: 2px; }
.rangeslider input[type="range"]:focus-visible::-moz-range-thumb { outline: 3px solid var(--accent); outline-offset: 2px; }

/* The legend swatch has to behave like the thing it explains, so the pulse
   rule keys off the dot rather than off the marker it happens to sit in. */
.worldmap__key.is-recent .worldmap__dot { background: var(--accent-strong, var(--accent)); }
.worldmap__key.is-recent .worldmap__dot::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%;
  border: 2px solid var(--accent); animation: rf-pulse 2.8s ease-out infinite;
}
.worldmap__key .worldmap__dot { position: relative; }
@media (prefers-reduced-motion: reduce) {
  .worldmap__key.is-recent .worldmap__dot::after { animation: none; opacity: .5; }
}

/* ====================================================== the story layout ===
   A reportage is now a whole journey - some run half an hour - so the summary
   travels with the reader instead of scrolling away at the top.

   The hero, the summary and the body are siblings: the banner and the body
   share colPos 1 and the template cannot get between them. Grid places them. */

@media (min-width: 62rem) {
  /* An album page uses the same two columns for its world overview. It is
     .prose--album and NOT .prose--story on purpose: the slider rules further
     down hang off .prose--story, and on an album the pictures are the page -
     they stay a grid. Sharing the class would have quietly undone that. */
  .prose--story, .prose--album {
    grid-template-columns: minmax(13rem, 17rem) minmax(0, 1fr);
    column-gap: clamp(1.5rem, 4vw, 3rem);
    align-items: start;
  }
  .prose--story > *, .prose--album > *     { grid-column: 2; max-width: var(--measure); }
  .prose--story > .hero, .prose--album > .hero { grid-column: 1 / -1; max-width: none; }
  .prose--album > .worldnav,
  .prose--story > .storyfacts {
    grid-column: 1;
    /* Span the rows rather than occupying one. Every content element is its
       own grid row, so a summary confined to row 2 pushed the entire story
       below its own height - and because the first element after the hero is
       an empty one, nothing readable landed beside it at all. Spanning lets
       the prose flow up alongside, which also gives sticky something to stick
       against. */
    grid-row: 2 / span 9999;
    position: sticky; top: 5rem; align-self: start;
    max-height: calc(100dvh - 7rem); overflow-y: auto; overscroll-behavior: contain;
    max-width: none;
  }
  /* the wide breakout assumed one centred column; in two it would escape sideways */
  .prose--story > .elem > .imagegallery,
  .prose--album > .elem > .imagegallery,
  .prose--story > .elem > .imgwrap,
  .prose--album > .elem > .imgwrap { width: 100%; margin-inline: 0; }
}

.storyfacts { font-size: .92rem; }
.storyfacts__place { display: flex; gap: .35rem; flex-wrap: wrap; margin: 0 0 .8rem; }
.storyfacts__list {
  list-style: none; margin: 0 0 1.2rem; padding: 0;
  display: grid; gap: .3rem; color: var(--muted); font-size: .86rem;
}
.storyfacts__list strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.storyfacts__source {
  margin: 1rem 0 0; padding-top: .8rem; border-top: 1px solid var(--rule);
  font-size: .78rem; color: var(--muted);
}
.chapters__list a[aria-current="true"] { color: var(--accent); font-weight: 600; }
.chapters__list a[aria-current="true"] .chapters__no { text-decoration: underline; }

@media (max-width: 61.999rem) {
  /* below the two-column breakpoint it is a plain block above the story */
  .storyfacts { border: 1px solid var(--rule); border-radius: var(--radius);
                background: var(--bg-sunken); padding: clamp(.9rem, 3vw, 1.3rem); }
  .storyfacts .chapters { border: 0; background: none; padding: 0; }
}

/* ------------------------------------------------- galleries as a slider --
   A journey carries a lot of pictures - Alaska has 229 - and as a grid they
   pushed the text apart by whole screens. One row that scrolls keeps the
   reading rhythm; clicking still opens the near-fullscreen viewer. */

.prose--story .imagegallery:not(.single), .strip {
  display: flex; flex-wrap: nowrap; gap: .7rem;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding-bottom: 1.1rem;
}

/* This bar is the main way through 61 pictures, so it is a control, not
   decoration - 22px tall with a thumb you cannot miss.

   The two blocks below must NOT be combined. Chrome supports the standard
   scrollbar-width/scrollbar-color, and the moment either is set on an element
   it discards every ::-webkit-scrollbar rule for it. Setting both, as I first
   did, silently cancelled the custom height and left the default bar. So the
   webkit rules stand alone, and the standard properties are applied only where
   ::-webkit-scrollbar does not exist - which is Firefox. */
.prose--story .imagegallery:not(.single)::-webkit-scrollbar,
.strip::-webkit-scrollbar { height: 22px; }
.prose--story .imagegallery:not(.single)::-webkit-scrollbar-track,
.strip::-webkit-scrollbar-track {
  background: var(--bg-sunken); border-radius: 999px;
  border: 4px solid var(--bg);
  background-clip: padding-box;
}
.prose--story .imagegallery:not(.single)::-webkit-scrollbar-thumb,
.strip::-webkit-scrollbar-thumb {
  background: var(--accent); border-radius: 999px;
  /* the border only insets the paint; the grab area stays the full 22px */
  border: 4px solid var(--bg);
  background-clip: padding-box;
  min-width: 4rem;
}
.prose--story .imagegallery:not(.single)::-webkit-scrollbar-thumb:hover,
.prose--story .imagegallery:not(.single)::-webkit-scrollbar-thumb:active,
.strip::-webkit-scrollbar-thumb:hover,
.strip::-webkit-scrollbar-thumb:active {
  background: var(--accent-strong);
  border-width: 3px;
  background-clip: padding-box;
}

@supports not selector(::-webkit-scrollbar) {
  /* Firefox: scrollbar-width takes only auto/thin/none, so the height cannot
     be set - auto is as wide as it gets. */
  .prose--story .imagegallery:not(.single), .strip {
    scrollbar-width: auto;
    scrollbar-color: var(--accent) var(--bg-sunken);
  }
}
.prose--story .imagegallery:not(.single) > figure,
.strip > figure {
  flex: 0 0 auto; width: clamp(190px, 42%, 300px); scroll-snap-align: start; margin: 0;
}
.prose--story .imagegallery:not(.single) img,
.strip img { aspect-ratio: 4 / 3; object-fit: cover; }

.gallery { position: relative; margin: clamp(1.5rem, 4vw, 2.5rem) 0; }
.gallery__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  border: 1px solid var(--rule); color: var(--ink);
  font: inherit; font-size: 1.1rem; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
}
.gallery__nav:hover { border-color: var(--accent); }
.gallery__nav[hidden] { display: none; }
.gallery__nav--prev { left: -.6rem; }
.gallery__nav--next { right: -.6rem; }
.gallery__count {
  font-size: .78rem; color: var(--muted); margin: .35rem 0 0;
  font-variant-numeric: tabular-nums;
}
@media (hover: none) { .gallery__nav { display: none; } }

/* The lead's anchor is an empty span inside the rich text; it needs the same
   scroll offset as a chapter heading so the sticky header does not cover it. */
.lead-anchor { display: block; height: 0; scroll-margin-top: 5rem; }
.chapters__list .is-lead a { font-style: italic; }
.chapters__list .is-lead .chapters__no { color: var(--muted); }

/* On a story the hero is an establishing shot, not the destination - the
   reader came for the text. Shorter than the index hero so the opening
   paragraph is on screen when the page lands. */
.prose--story > .hero,
.prose--album > .hero { margin-bottom: clamp(1rem, 2.5vw, 1.75rem); }
.prose--story > .hero .hero__media,
.prose--album > .hero .hero__media { aspect-ratio: 24 / 9; max-height: min(38vh, 340px); }
@media (max-width: 45rem) {
  .prose--story > .hero .hero__media,
  .prose--album > .hero .hero__media { aspect-ratio: 16 / 9; max-height: 30vh; }
}

/* The full-bleed hero is 100vw wide, and 100vw counts the vertical scrollbar -
   so every page with one scrolled sideways by that many pixels. clip rather
   than hidden: hidden would make body a scroll container and break the sticky
   header and the sticky story summary. */
body { overflow-x: clip; }

/* The enlarged view carries the caption too - it is the one place a reader
   actually needs to know what the photograph shows. */
dialog.lightbox figure { margin: 0; display: grid; place-items: center; gap: .6rem; }
dialog.lightbox figcaption {
  color: #fff; font-size: .92rem; line-height: 1.45; text-align: center;
  max-width: min(72ch, 90vw); text-shadow: 0 1px 3px rgb(0 0 0 / .8);
}
dialog.lightbox figcaption[hidden] { display: none; }

/* ------------------------------------------------- two journeys up front --
   The opening block sat in a narrow column with a lot of nothing either side
   of it on a wide screen. These fill it with the thing the site is made of.
   Only from 78rem, where that space actually exists. */

.reportagen__top { display: grid; gap: var(--gap); }
.flankcard { display: none; }

@media (min-width: 78rem) {
  .reportagen__top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr) minmax(0, 1fr);
    align-items: center;
    column-gap: clamp(1.5rem, 3vw, 3rem);
  }
  .flankcard {
    display: block; text-decoration: none; color: inherit;
    border: 1px solid var(--rule); border-radius: var(--radius);
    background: var(--bg-raised); overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease;
  }
  /* Name the column each one belongs to. `order` only changes the sequence,
     not the placement - with both cards ahead of the intro in the source, one
     card took the middle column and the intro was pushed to the third. */
  .flankcard--left                      { grid-column: 1; grid-row: 1; }
  .reportagen__top > .reportagen__intro { grid-column: 2; grid-row: 1; }
  .flankcard--right                     { grid-column: 3; grid-row: 1; }

  .flankcard:hover  { transform: translateY(-3px); box-shadow: 0 8px 24px rgb(0 0 0 / .10); }
}

.flankcard__media { display: block; aspect-ratio: 7 / 5; overflow: hidden; }
.flankcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.flankcard__body { display: block; padding: .8rem .9rem 1rem; }
.flankcard__kicker {
  display: block; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); font-weight: 700; margin-bottom: .25rem;
}
.flankcard__title {
  display: block; font-family: var(--serif); font-size: 1.02rem; line-height: 1.25;
  margin-bottom: .3rem;
}
.flankcard__facts { display: block; font-size: .78rem; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .flankcard:hover { transform: none; } }

/* ------------------------------------------------------- read this aloud --
   The prose is spoken and the broadcast recordings play where they sit in the
   text. The passage being read is marked, because on a half-hour story a
   listener who looks away needs to find their place again. */

.storyfacts__read { margin: 0 0 1.1rem; }
.button--read { width: 100%; justify-content: center; display: inline-flex; gap: .5rem; align-items: center; }
.button--read[hidden] { display: none; }
.button--read.is-playing { background: var(--accent-strong); }
.button__icon { font-size: .8em; line-height: 1; }

.prose--story .is-reading,
.prose .is-reading {
  background: var(--accent-soft);
  box-shadow: -0.6rem 0 0 var(--accent-soft), 0.6rem 0 0 var(--accent-soft);
  border-radius: 2px;
}
@media (prefers-reduced-motion: reduce) { .is-reading { transition: none; } }

/* The voice picker sits under the read button. Only shown when the machine
   actually has more than one German voice to choose between. */
.storyfacts__voice {
  display: block; width: 100%; margin-top: .45rem;
  font: inherit; font-size: .8rem; padding: .35rem .5rem;
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--bg); color: var(--muted);
}
.storyfacts__voice[hidden] { display: none; }

/* --------------------------------------------------------------- profil --
   A portrait page for the reporter, with his own horizons behind it. */

.profil { display: block; }

.profil-hero {
  position: relative; isolation: isolate;
  min-height: clamp(340px, 56vh, 560px);
  display: flex; align-items: flex-end;
  border-radius: var(--radius); overflow: hidden;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
  background: var(--bg-sunken);
}
.profil-hero__stage { position: absolute; inset: 0; z-index: 0; }
.profil-hero__layer {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity .9s ease;
}
.profil-hero__layer.is-on { opacity: 1; }
.profil-hero__layer img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* The text sits on photographs of every possible brightness, so it needs its
   own ground rather than a text-shadow: a wash that is dark at the foot and
   clear at the top, which keeps the horizon visible and the words legible. */
.profil-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top,
    rgba(0,0,0,.82) 0%, rgba(0,0,0,.62) 35%, rgba(0,0,0,.18) 70%, rgba(0,0,0,.05) 100%);
}
.profil-hero__body {
  position: relative; z-index: 2; color: #fff;
  padding: clamp(1.4rem, 4vw, 2.8rem);
  max-width: 60ch;
}
.profil-hero__kicker {
  margin: 0 0 .3rem; text-transform: uppercase; letter-spacing: .16em;
  font-size: .75rem; font-weight: 600; color: rgba(255,255,255,.82);
}
.profil-hero__body h1 {
  margin: 0 0 .6rem; color: #fff;
  font-size: clamp(2rem, 6vw, 3.4rem); line-height: 1.05;
}
.profil-hero__lead {
  margin: 0 0 1.2rem; color: rgba(255,255,255,.94);
  font-size: clamp(1rem, 2.2vw, 1.15rem); line-height: 1.55;
}
.profil-hero__stats {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: clamp(1rem, 4vw, 2.4rem);
}
.profil-hero__stats li { display: flex; flex-direction: column; }
.profil-hero__stats strong { font-size: clamp(1.3rem, 3.4vw, 1.9rem); line-height: 1.1; }
.profil-hero__stats span {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .1em;
  color: rgba(255,255,255,.8);
}

.profil-grid {
  display: grid; gap: clamp(1.6rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 62rem) {
  .profil-grid { grid-template-columns: minmax(0, 1fr) 20rem; }
  .profil-side { position: sticky; top: 5.5rem; }
}
.profil-main h2 {
  margin: 2.2rem 0 .7rem; font-size: clamp(1.15rem, 2.6vw, 1.5rem);
}
.profil-main h2:first-child { margin-top: 0; }
.profil-lead { font-size: 1.08rem; }

.profil-awards { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.profil-awards li {
  border-left: 3px solid var(--accent); padding: .1rem 0 .1rem .9rem;
}
.profil-awards__what { margin: 0; }
.profil-awards__which { margin: .15rem 0 0; font-size: .92rem; }

.profil-side { display: grid; gap: 1rem; }
.profil-card {
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--bg-sunken); padding: clamp(.9rem, 3vw, 1.3rem);
}
.profil-card__title {
  margin: 0 0 .7rem; font-size: .8rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em; color: var(--muted);
}
.profil-facts { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .35rem .8rem; }
.profil-facts dt { font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.profil-facts dd { margin: 0; font-size: .92rem; }
.profil-card--go p { font-size: .92rem; }
.profil-card--go .btn { display: block; text-align: center; margin-top: .55rem; }

@media (prefers-reduced-motion: reduce) {
  /* A background changing every second is precisely what this setting exists
     to stop. One photograph, no transition. */
  .profil-hero__layer { transition: none; }
}

/* Buttons that are links. There was no such class before - every call to
   action on the old site was a bare underlined link. */
.btn {
  display: inline-block; border-radius: 999px; text-decoration: none;
  padding: .55rem 1.3rem; font-weight: 600; font-size: .95rem;
  background: var(--accent); color: #fff; border: 1px solid var(--accent);
}
.btn:hover { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; }
.btn--quiet { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn--quiet:hover { background: transparent; border-color: var(--accent); color: var(--accent); }


/* ------------------------------------------- world / country overview --
   The sideways move out of an album. It sits in the same sticky left column a
   reportage gives its summary, and scrolls inside itself - all 79 places are
   open at once, because a reader who wants the next village should not have to
   guess which country to unfold first. Below 62rem it is a plain block above
   the pictures. */

.worldnav { font-size: .9rem; }
@media (max-width: 61.99rem) {
  .worldnav {
    border: 1px solid var(--rule); border-radius: var(--radius);
    background: var(--bg-sunken); padding: clamp(.9rem, 3vw, 1.3rem);
    margin-bottom: 1.5rem;
    /* on a phone the full list is most of a screen - cap it and let it scroll */
    max-height: 22rem; overflow-y: auto; overscroll-behavior: contain;
  }
}
.worldnav__title {
  margin: 0 0 .9rem; font-size: .75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em; color: var(--muted);
  position: sticky; top: 0; background: var(--bg); padding-bottom: .3rem;
}
@media (max-width: 61.99rem) { .worldnav__title { background: var(--bg-sunken); } }

.worldnav__continent { margin-bottom: 1rem; }
.worldnav__continent-name {
  margin: 0 0 .4rem; font-weight: 700; font-size: .82rem;
  text-transform: uppercase; letter-spacing: .08em;
  border-bottom: 1px solid var(--rule); padding-bottom: .2rem;
}
.worldnav__continent.is-here .worldnav__continent-name { color: var(--accent); }

.worldnav__land { margin: 0 0 .55rem; }
.worldnav__land-name {
  margin: 0 0 .1rem; font-size: .82rem; font-weight: 600; color: var(--muted);
}
.worldnav__land.is-here .worldnav__land-name { color: var(--ink); }

.worldnav__places { list-style: none; margin: 0; padding: 0 0 0 .1rem; display: grid; }
.worldnav__place a {
  display: flex; justify-content: space-between; gap: .6rem; align-items: baseline;
  padding: .16rem .4rem; border-radius: calc(var(--radius) / 2);
  text-decoration: none; color: var(--ink); line-height: 1.35;
}
.worldnav__place a:hover { background: var(--bg-sunken); color: var(--accent); }
.worldnav__place-name { font-size: .86rem; }
.worldnav__n { font-size: .74rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Where you are. Marked with weight and a bar rather than colour alone, so it
   still reads when the page is printed or the reader cannot separate the two
   greens. */
.worldnav__place.is-current a {
  background: var(--bg-sunken); font-weight: 700;
  box-shadow: inset 3px 0 0 var(--accent);
}
.worldnav__place.is-current .worldnav__n { color: var(--ink); }

.worldnav__all { margin: .5rem 0 0; font-size: .82rem; }

/* ---------------------------------------------------- the English page --
   One page, so it borrows the index's kicker and stat rules and adds only
   what it needs of its own. */

.english__lead {
  font-size: clamp(1.02rem, 2.2vw, 1.18rem); line-height: 1.6;
  max-width: var(--measure);
}
.english__intro { margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.english__intro h1 { max-width: 22ch; }

/* The one thing an English visitor must not miss. Marked with a rule and a
   ground rather than a colour alone, so it survives printing. */
.english__notice {
  border: 1px solid var(--rule); border-left: 4px solid var(--accent);
  border-radius: var(--radius); background: var(--bg-sunken);
  padding: clamp(1rem, 3vw, 1.5rem);
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
  max-width: var(--measure);
}
.english__notice-title { margin: 0 0 .5rem; font-weight: 700; font-size: 1.05rem; }
.english__notice p { margin: 0 0 .7rem; }
.english__notice ul { margin: 0 0 .7rem; padding-left: 1.1rem; display: grid; gap: .45rem; }
.english__hint { font-size: .9rem; color: var(--muted); margin-bottom: 0 !important; }

.english__go {
  display: flex; flex-wrap: wrap; gap: .6rem;
  margin: clamp(1.2rem, 3vw, 2rem) 0;
}
.english__contact { font-size: .9rem; color: var(--muted); max-width: var(--measure); }

/* Rolf himself, at the foot of the profile. Sits outside .profil-grid so it
   runs the full width rather than being trapped in the text column. */
.profil-strip { margin-top: clamp(2rem, 5vw, 3.5rem); }
.profil-strip h2 { margin: 0 0 .2rem; font-size: clamp(1.15rem, 2.6vw, 1.5rem); }
.profil-strip__lead { margin: 0 0 1rem; color: var(--muted); font-size: .95rem; }

/* The three exhibition shots. A plain row, not a slider - three pictures do
   not need controls. */
.profil-exhibition {
  list-style: none; margin: 1rem 0 0; padding: 0;
  display: grid; gap: .7rem;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.profil-exhibition img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius);
}