/* Hallmark · genre: editorial · macrostructure: Long Document (legacy masthead + card + sidebar) · theme: studied-DNA
 * source: legacy daenischenhagen112.de (WordPress “Newses”), redesigned as a quiet repaint
 * nav: N6 masthead-over-photo + bar · footer: Ft1 mast-headed · enrichment: none (real photography)
 * audience: residents incl. many older readers · tone: plain, civic · motion: GSAP, one load sequence + reveal-once
 */
/* Hallmark · pre-emit critique: P4 H5 E4 S5 R5 V4 */

/* ---------- Base ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--space-md);
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  font-variant-numeric: lining-nums;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-style: normal;
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
  hyphens: auto;
  min-width: 0;
  text-wrap: balance;
}

p { margin: 0; max-width: var(--measure); }
p + p { margin-top: var(--space-sm); }

a {
  color: var(--color-accent-deep);
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
  transition: color var(--dur-micro) var(--ease-out), text-decoration-color var(--dur-micro) var(--ease-out);
}
a:hover { color: var(--color-ink); text-decoration-color: var(--color-accent); }

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: 2px;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: max(var(--gutter), env(safe-area-inset-left));
}

.skip-link {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  z-index: 10;
  padding: var(--space-xs) var(--space-md);
  background: var(--color-surface);
  color: var(--color-ink);
  font-weight: 700;
  border-radius: var(--radius-control);
  transform: translateY(-200%);
}
.skip-link:focus-visible { transform: none; }

/* ---------- Masthead: the fire-truck photo with the underlined title ------ */
.masthead {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: clamp(14rem, 16vw + 9rem, 25rem);
  background: var(--color-navy-2);
  overflow: hidden;
}

.masthead__photo,
.masthead__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.masthead__photo { z-index: -2; }
.masthead__photo img {
  object-fit: cover;
  object-position: 62% 45%;
  transform-origin: 60% 50%;
}

.masthead::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, var(--color-scrim), var(--color-scrim-soft));
}

.masthead__inner { padding-block: var(--space-xl) var(--space-lg); }

/* Page changes: the header photo is the same on every page, so it stays put
   while the rest fades. During the swap the old page's header is shown (its
   photo is already decoded); the new one takes over once the swap ends.
   Browsers without cross-document view transitions load the page as before. */
@view-transition { navigation: auto; }
.masthead { view-transition-name: masthead; }
.mainnav { view-transition-name: mainnav; }
::view-transition-group(masthead),
::view-transition-old(masthead) { animation: none; }
::view-transition-new(masthead) { display: none; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

.wordmark {
  display: inline-block;
  max-width: 21ch;
  color: var(--color-on-navy);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xl);
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-decoration-thickness: 0.07em;
  text-underline-offset: 0.12em;
  text-decoration-color: var(--color-on-navy);
  text-shadow: 0 1px 3px var(--color-navy-2);
  overflow-wrap: anywhere;
}
.wordmark:hover { color: var(--color-on-navy); text-decoration-color: var(--color-accent); }

.tagline {
  margin-top: var(--space-2xs);
  color: var(--color-on-navy-2);
  font-size: var(--text-base);
  text-shadow: 0 1px 2px var(--color-navy-2);
}

@media (min-width: 48rem) {
  .masthead::after {
    background: linear-gradient(to right, var(--color-scrim), var(--color-scrim-clear) 70%);
  }
}

/* ---------- Main navigation ---------------------------------------------- */
.mainnav {
  background: var(--color-navy);
  border-bottom: 4px solid var(--color-accent);
}
.mainnav :focus-visible { outline-color: var(--color-focus-dark); }

.mainnav__toggle {
  display: none;
  align-items: center;
  gap: var(--space-xs);
  min-height: 3.25rem;
  margin-block: var(--space-xs);
  padding: 0 var(--space-md);
  border: 2px solid var(--color-on-navy-2);
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--color-on-navy);
  font: 700 var(--text-base) / 1 var(--font-body);
  cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-out);
}
.mainnav__toggle:hover { background: var(--color-navy-3); }
.mainnav__toggle:active { transform: translateY(1px); }

/* three bars, drawn in CSS; turn into a cross when open */
.mainnav__bars,
.mainnav__bars::before,
.mainnav__bars::after {
  display: block;
  width: 1.25rem;
  height: 3px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--dur-short) var(--ease-in-out), opacity var(--dur-micro) var(--ease-out);
}
.mainnav__bars { position: relative; }
.mainnav__bars::before,
.mainnav__bars::after { content: ""; position: absolute; left: 0; }
.mainnav__bars::before { transform: translateY(-7px); }
.mainnav__bars::after  { transform: translateY(7px); }
.mainnav__toggle[aria-expanded="true"] .mainnav__bars { background: transparent; }
.mainnav__toggle[aria-expanded="true"] .mainnav__bars::before { transform: rotate(45deg); }
.mainnav__toggle[aria-expanded="true"] .mainnav__bars::after  { transform: rotate(-45deg); }

.mainnav__list {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mainnav__list a {
  display: flex;
  align-items: center;
  min-height: 3.5rem;
  padding: 0 var(--space-sm);
  color: var(--color-on-navy);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-micro) var(--ease-out);
}
.mainnav__list a:hover { background: var(--color-navy-3); color: var(--color-on-navy); }
.mainnav__list a[aria-current] {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

/* Below 68rem the five links no longer fit in one row: collapse behind “Menü”.
   Without JavaScript the list simply stays open. */
@media (max-width: 67.99rem) {
  .js .mainnav__toggle { display: inline-flex; }
  .js .mainnav__list { display: none; }
  .js .mainnav__list[data-open] { display: block; padding-bottom: var(--space-sm); }
  .mainnav__list { flex-direction: column; }
  .mainnav__list li + li { border-top: var(--rule-hair) solid var(--color-navy-3); }
  .mainnav__list a { min-height: 3.5rem; padding-inline: var(--space-2xs); }
  .mainnav__list a[aria-current] { padding-inline: var(--space-sm); }
}

/* ---------- Page head ----------------------------------------------------- */
.pagehead { padding-block: var(--space-lg) var(--space-md); }
.pagehead h1 { font-size: var(--text-xl); }

/* ---------- Layout: content card + sidebar --------------------------------- */
.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg);
  align-items: start;
  padding-bottom: var(--space-2xl);
}
@media (min-width: 64rem) {
  .layout { grid-template-columns: minmax(0, 1fr) 19rem; }
}
@media (min-width: 80rem) {
  .layout { grid-template-columns: minmax(0, 1fr) 22rem; }
}

.card {
  background: var(--color-surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: clamp(1.25rem, 1rem + 2vw, 2.5rem);
}

.layout__main:focus { outline: none; }

.layout__main > section + section { margin-top: var(--space-2xl); }
.layout__main h2 {
  padding-top: var(--space-md);
  border-top: var(--rule-heavy) solid var(--color-rule-strong);
  font-size: var(--text-lg);
}
.layout__main > section:first-child h2 { border-top: 0; padding-top: 0; }

/* ---------- Welcome ------------------------------------------------------- */
.welcome__body {
  display: grid;
  gap: var(--space-lg);
  margin-top: var(--space-md);
}
@media (min-width: 40rem) {
  .welcome__body { grid-template-columns: minmax(0, 1fr) 10rem; align-items: start; }
}

.welcome__lead { font-weight: 700; }

.welcome__crest {
  margin: 0;
  justify-self: center;
  width: min(10rem, 50%);
}
@media (min-width: 40rem) { .welcome__crest { width: 100%; } }
.welcome__crest figcaption {
  margin-top: var(--space-2xs);
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  text-align: center;
}

/* ---------- News ---------------------------------------------------------- */
.channel {
  margin-top: var(--space-md);
  padding: clamp(var(--space-sm), 3vw, var(--space-md));
  background: var(--color-accent-wash);
  border: var(--rule-hair) solid var(--color-accent);
  border-radius: var(--radius-card);
}
.channel__text { color: var(--color-accent-deep); }
.channel__text strong { color: var(--color-ink); }

.channel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 3.25rem;
  padding: 0 var(--space-md);
  border-radius: var(--radius-control);
  background: var(--color-navy);
  color: var(--color-on-navy);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.btn:hover { background: var(--color-navy-3); color: var(--color-on-navy); }
.btn:active { transform: translateY(1px); }
.btn__icon { width: 1.4rem; height: 1.4rem; flex: none; }

.news__heading {
  margin-top: var(--space-xl);
  font-size: var(--text-md);
}

.posts {
  display: grid;
  gap: var(--space-md);
  margin: var(--space-md) 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 40rem) {
  .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.post {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--color-surface);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-card);
}
.post img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--color-surface-2);
}
.post__body { padding: var(--space-md); }

.post__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xs) var(--space-xs);
  color: var(--color-ink-2);
  font-size: var(--text-sm);
}
.post__kind { font-weight: 700; color: var(--color-ink); }
.post__kind--alarm { color: var(--color-accent); }

.post__title {
  margin: var(--space-2xs) 0 var(--space-xs);
  font-size: var(--text-md);
}

.news__more {
  margin-top: var(--space-lg);
  font-weight: 700;
}

/* ---------- Sidebar ------------------------------------------------------- */
.layout__aside { display: grid; gap: var(--space-lg); }

.card--alarm {
  background: var(--color-accent);
  color: var(--color-on-accent);
}
.card--alarm :focus-visible { outline-color: var(--color-on-accent); }
.alarm__title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-xs);
  font-size: var(--text-lg);
}
.alarm__number {
  color: var(--color-on-accent);
  font-size: var(--text-xl);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.alarm__number:hover { color: var(--color-on-accent); text-decoration: underline; }
.card--alarm p { margin-top: var(--space-xs); }

.aside__title { font-size: var(--text-lg); }

.unit { margin-top: var(--space-md); }
.unit + .unit {
  padding-top: var(--space-md);
  border-top: var(--rule-hair) solid var(--color-rule);
}
.unit h3 { font-size: var(--text-md); }
.unit__address { margin-top: var(--space-2xs); }

/* Label above value: survives 200 % zoom and long German words */
.unit__facts,
.facts {
  display: grid;
  gap: var(--space-xs);
  margin: var(--space-sm) 0 0;
}
.unit__facts dt,
.facts dt { font-size: var(--text-sm); font-weight: 700; color: var(--color-ink-2); }
.unit__facts dd,
.facts dd { margin: 0; overflow-wrap: anywhere; }
.unit__facts a,
.facts a { font-variant-numeric: tabular-nums; }
.unit__note { margin-top: var(--space-xs); color: var(--color-ink-2); }

/* ---------- Subpages: page head with breadcrumbs, running text ----------- */
.pagehead--sub {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2xs) var(--space-lg);
}

.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-2xs);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--color-ink-2);
}
.crumbs li { display: inline-flex; align-items: center; min-height: var(--tap); }
.crumbs li + li::before {
  content: "→";
  content: "→" / "";
  margin-right: var(--space-2xs);
  color: var(--color-ink-2);
}
.crumbs a { white-space: nowrap; }

.prose > section > * + * { margin-top: var(--space-sm); }
.prose h2 + * { margin-top: var(--space-md); }
.prose h3 { margin-top: var(--space-lg); font-size: var(--text-md); }
.prose ul {
  max-width: var(--measure);
  margin-bottom: 0;
  padding-left: 1.25em;
}
.prose li + li { margin-top: var(--space-2xs); }
.prose address { font-style: normal; }
.prose .facts { margin-top: var(--space-md); }

.lead-box {
  padding: clamp(var(--space-sm), 3vw, var(--space-md));
  background: var(--color-accent-wash);
  border: var(--rule-hair) solid var(--color-accent);
  border-radius: var(--radius-card);
}
.lead-box h2 {
  padding-top: 0;
  border-top: 0;
  font-size: var(--text-md);
}
.lead-box p { margin-top: var(--space-xs); }
.prose .lead-box h3 { margin-top: 0; }

.toc { margin-top: var(--space-lg); }
.toc h2 {
  padding-top: 0;
  border-top: 0;
  font-size: var(--text-md);
}
.toc ol {
  margin: var(--space-xs) 0 0;
  padding-left: 1.5em;
}
.toc li + li { margin-top: var(--space-3xs); }
.toc a { display: inline-block; padding-block: var(--space-3xs); }

.layout__main > .toc + section,
.layout__main > .lead-box + section { margin-top: var(--space-xl); }

/* Something that must be filled in before the site goes live */
.todo {
  padding: var(--space-sm) var(--space-md);
  border: var(--rule-heavy) dashed var(--color-rule-strong);
  border-radius: var(--radius-card);
  background: var(--color-surface-2);
}
.todo strong { color: var(--color-accent-deep); }

.stand { color: var(--color-ink-2); }

/* Links between the legal pages, in the sidebar */
.linklist {
  margin: var(--space-sm) 0 0;
  padding: 0;
  list-style: none;
}
.linklist li + li { border-top: var(--rule-hair) solid var(--color-rule); }
.linklist a {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  font-weight: 700;
}
.linklist a[aria-current="page"] {
  color: var(--color-ink);
  text-decoration: none;
  box-shadow: inset 4px 0 0 var(--color-accent);
  padding-left: var(--space-sm);
}

/* ---------- Gemeindewehr pages ------------------------------------------- */
/* Text beside a portrait photo; on phones the photo moves below the text */
.split {
  display: grid;
  gap: var(--space-lg);
  margin-top: var(--space-md);
}
@media (min-width: 44rem) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 15rem); align-items: start; }
}
.split > div > * + * { margin-top: var(--space-sm); }

.photo { margin: 0; }
.photo img {
  width: 100%;
  border-radius: var(--radius-card);
  background: var(--color-surface-2);
}
.photo--map img { border: var(--rule-hair) solid var(--color-rule); }
.photo figcaption {
  margin-top: var(--space-2xs);
  color: var(--color-ink-2);
  font-size: var(--text-sm);
}

/* One number that matters, set large */
.keyfact {
  display: grid;
  gap: var(--space-2xs) var(--space-md);
  padding: clamp(var(--space-sm), 3vw, var(--space-md));
  background: var(--color-accent-wash);
  border-left: 6px solid var(--color-accent);
  border-radius: var(--radius-card);
}
@media (min-width: 40rem) {
  .keyfact { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
}
.prose .keyfact p { margin: 0; }
.keyfact__value {
  color: var(--color-accent-deep);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

/* Hilfsfrist: a vertical time line. The red stretch is the 8 minutes
   between alarm and arrival. */
.timeline {
  margin: var(--space-md) 0 0;
  padding: 0;
  list-style: none;
}
.timeline__step {
  position: relative;
  margin-left: 0.75rem;
  padding: 0 0 var(--space-lg) var(--space-lg);
  border-left: 4px solid var(--color-rule);
}
.timeline__step:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline__step::before {
  content: "";
  position: absolute;
  top: 0.2rem;
  left: -14px;
  width: 24px;
  height: 24px;
  border: 4px solid var(--color-ink-2);
  border-radius: 50%;
  background: var(--color-surface);
}
.timeline__step--frist { border-left-color: var(--color-accent); }
.timeline__step--mark::before { border-color: var(--color-accent); background: var(--color-accent); }

.timeline__time {
  color: var(--color-ink-2);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.timeline__step--mark .timeline__time { color: var(--color-accent-deep); }
.prose .timeline :is(h3, h4) {
  margin-top: var(--space-3xs);
  font-size: var(--text-md);
}
.timeline__step p + p { margin-top: var(--space-2xs); }

.source { color: var(--color-ink-2); font-size: var(--text-sm); }

/* Organigramm: an indented tree, readable at any width and zoom level */
.org,
.org ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
.org ol { margin-left: var(--space-md); }
.org ol > li {
  position: relative;
  padding: var(--space-sm) 0 0 var(--space-lg);
}
/* vertical line, stopping at the last child's elbow */
.org ol > li::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border-left: 3px solid var(--color-rule-strong);
}
.org ol > li:last-child::before { bottom: auto; height: calc(var(--space-sm) + 1.6rem); }
/* elbow into the box */
.org ol > li::after {
  content: "";
  position: absolute;
  top: calc(var(--space-sm) + 1.6rem - 1px);
  left: 0;
  width: calc(var(--space-lg) - 2px);
  border-top: 3px solid var(--color-rule-strong);
}

.org__unit {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 3.2rem;
  max-width: 100%;
  padding: var(--space-2xs) var(--space-sm);
  background: var(--color-surface);
  border: 2px solid var(--color-rule);
  border-radius: var(--radius-control);
  font-weight: 700;
  overflow-wrap: break-word;
  hyphens: auto;
}
.org__unit--root {
  background: var(--color-navy);
  border-color: var(--color-navy);
  color: var(--color-on-navy);
  font-family: var(--font-display);
  font-size: var(--text-md);
}
.org__unit--root { hyphens: manual; } /* break only at the ­ in the markup */
.org__unit--root img { width: 2.5rem; height: auto; flex: none; }
.org__unit--wehr { border-color: var(--color-accent); border-left-width: 6px; }
.org__unit--wehr a { color: var(--color-ink); }
.org__unit--wehr a:hover { color: var(--color-accent-deep); }

/* Contact people */
.people {
  display: grid;
  gap: var(--space-md);
  margin: var(--space-md) 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 44rem) {
  .people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.person {
  padding: var(--space-md);
  border: var(--rule-hair) solid var(--color-rule);
  border-top: 4px solid var(--color-accent);
  border-radius: var(--radius-card);
}
.person__role { color: var(--color-ink-2); font-weight: 700; }
.prose .person h3 { margin-top: var(--space-3xs); }

/* Documents to download: the whole row is the link */
.downloads {
  display: grid;
  gap: var(--space-sm);
  margin: var(--space-md) 0 0;
  padding: 0;
  list-style: none;
}
.prose :is(.downloads, .people, .org, .timeline, .figures, .vehicles, .linklist, .photo-grid) { padding-left: 0; }
.prose :is(.downloads, .people, .org, .timeline, .figures, .vehicles, .linklist, .photo-grid) li + li { margin-top: 0; }
.download {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-sm) var(--space-md);
  padding: var(--space-md);
  border: 2px solid var(--color-rule);
  border-radius: var(--radius-card);
  color: var(--color-ink);
  text-decoration: none;
  transition: border-color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out);
}
.download:hover { border-color: var(--color-accent); background: var(--color-accent-wash); color: var(--color-ink); }
.download:active { transform: translateY(1px); }
.download__icon { width: 2.5rem; height: 3rem; color: var(--color-accent); }
.download__title {
  display: block;
  color: var(--color-accent-deep);
  font-weight: 700;
  overflow-wrap: break-word;
  hyphens: auto;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}
.download__meta { display: block; color: var(--color-ink-2); font-size: var(--text-sm); }

/* ---------- Ortswehr pages ------------------------------------------------ */
/* Membership figures as reported by the Ortswehr (dated in the markup) */
.figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--space-sm);
  margin: var(--space-md) 0 0;
  padding: 0;
  list-style: none;
}
.figure {
  padding: var(--space-sm) var(--space-md);
  background: var(--color-surface-2);
  border-left: 6px solid var(--color-accent);
  border-radius: var(--radius-card);
}
.figure__value {
  display: block;
  color: var(--color-accent-deep);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.figure__label { display: block; margin-top: var(--space-2xs); }

.signature { font-weight: 700; }
.signature span { display: block; color: var(--color-ink-2); font-weight: 400; }

/* Two lists side by side on wider screens */
.columns {
  display: grid;
  gap: var(--space-md) var(--space-lg);
  margin-top: var(--space-md);
}
@media (min-width: 44rem) {
  .columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.columns > div > * + * { margin-top: var(--space-xs); }
.prose .columns h3 { margin-top: 0; }
.prose ol { max-width: var(--measure); margin-bottom: 0; padding-left: 1.6em; }

/* Small scans stay at their own size instead of being blown up */
.photo--small img { width: auto; }

/* Fuhrpark: photo beside the data sheet. The red badge is the radio call sign,
   as on the old data sheets. */
.vehicles {
  display: grid;
  gap: var(--space-xl);
  margin: var(--space-md) 0 0;
  padding: 0;
  list-style: none;
}
.vehicle {
  display: grid;
  gap: var(--space-md) var(--space-lg);
  padding-top: var(--space-xl);
  border-top: var(--rule-hair) solid var(--color-rule);
}
.vehicle:first-child { padding-top: 0; border-top: 0; }
@media (min-width: 52rem) {
  .vehicle { grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); align-items: start; }
}
.vehicle > div > * + * { margin-top: var(--space-xs); }
.vehicle__call {
  display: inline-block;
  padding: var(--space-3xs) var(--space-xs);
  border-radius: var(--radius-control);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.prose .vehicle h3 { margin-top: var(--space-xs); }

.specs {
  margin: 0;
  border-top: var(--rule-hair) solid var(--color-rule);
}
.vehicle .specs { grid-column: 1 / -1; }
.specs > div {
  display: grid;
  gap: 0 var(--space-md);
  padding-block: var(--space-2xs);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
@media (min-width: 30rem) {
  .specs > div { grid-template-columns: 10.5rem minmax(0, 1fr); }
}
.specs dt { color: var(--color-ink-2); font-weight: 700; }
.specs dd { margin: 0; font-variant-numeric: tabular-nums; }

/* Tables: Wehrführer since 1889, Dienstplan. Two columns, so they fit a phone. */
.datatable {
  width: 100%;
  margin-top: var(--space-md);
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.datatable th,
.datatable td {
  padding: var(--space-2xs) var(--space-xs) var(--space-2xs) 0;
  border-bottom: var(--rule-hair) solid var(--color-rule);
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.datatable thead th {
  border-bottom: var(--rule-heavy) solid var(--color-rule-strong);
  color: var(--color-ink-2);
  font-size: var(--text-sm);
}
.datatable td:first-child { width: 1%; padding-right: var(--space-md); white-space: nowrap; }
.datatable tbody th[scope="rowgroup"] {
  padding-top: var(--space-md);
  border-bottom-color: var(--color-rule-strong);
  font-family: var(--font-display);
  font-size: var(--text-md);
}
.datatable__note { display: block; color: var(--color-ink-2); font-size: var(--text-sm); }
.datatable tr[aria-current] td { font-weight: 700; box-shadow: inset 0 -3px 0 var(--color-accent); }

/* Group photos with the names underneath */
.gallery {
  display: grid;
  gap: var(--space-xl);
  margin: var(--space-md) 0 0;
}
.gallery figcaption strong { display: block; color: var(--color-ink); font-size: var(--text-base); }
.gallery figcaption p + p { margin-top: var(--space-2xs); }

/* ---------- Musikzug pages ------------------------------------------------- */
/* Concert photos: three across on wider screens, stacked on phones */
.photo-grid {
  display: grid;
  gap: var(--space-sm);
  margin: var(--space-sm) 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 44rem) {
  .photo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.photo--logo { justify-self: center; width: min(15rem, 70%); }
@media (min-width: 44rem) { .photo--logo { width: 100%; } }

/* ---------- Social Media: the link page from the Instagram profile ------- */
.hub {
  display: grid;
  gap: var(--space-sm);
  max-width: 24rem;
  margin: var(--space-md) 0 0;
  padding: 0;
  list-style: none;
}
.prose .hub { padding-left: 0; }
.prose .hub li + li { margin-top: 0; }
.btn--wide { width: 100%; min-height: 3.75rem; font-size: var(--text-md); }

/* Phones: less indent per level so the deepest boxes keep room for their words */
@media (max-width: 30rem) {
  .org ol { margin-left: var(--space-2xs); }
  .org ol > li { padding-left: var(--space-md); }
  .org ol > li::after { width: calc(var(--space-md) - 2px); }
  .org__unit--root { font-size: var(--text-base); }
  .download { gap: var(--space-sm); padding: var(--space-sm); }
  .download__icon { width: 2rem; height: 2.4rem; }
}

/* ---------- Footer -------------------------------------------------------- */
.sitefoot {
  background: var(--color-navy);
  color: var(--color-on-navy);
}
.sitefoot :focus-visible { outline-color: var(--color-focus-dark); }
.sitefoot a { color: var(--color-on-navy); }
.sitefoot a:hover { color: var(--color-on-navy); text-decoration-color: var(--color-accent); }

.sitefoot__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-lg);
  padding-block: var(--space-xl);
}
.wordmark--foot { font-size: var(--text-lg); text-shadow: none; }

.sitefoot__social,
.sitefoot__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}
.sitefoot__social a,
.sitefoot__legal a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-weight: 700;
  white-space: nowrap;
}
.sitefoot__legal a[aria-current="page"] { text-decoration-color: var(--color-accent); }

.sitefoot__bar {
  background: var(--color-navy-2);
  color: var(--color-on-navy-2);
  font-size: var(--text-sm);
}
.sitefoot__bar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xs) var(--space-lg);
  padding-block: var(--space-sm) max(var(--space-sm), env(safe-area-inset-bottom));
}

/* ---------- Reveal-once (driven by GSAP in main.js) ------------------------ */
/* Hidden only when JS runs; if GSAP never arrives, a CSS failsafe shows them. */
.js [data-reveal] { opacity: 0; }
.js:not(.motion-ready) [data-reveal] { animation: reveal-failsafe 1ms linear 1.5s forwards; }
@keyframes reveal-failsafe { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; animation: none; }
  *, *::before, *::after {
    transition-duration: 150ms !important;
    animation-duration: 150ms !important;
  }
}

/* ---------- Print: many visitors print contact details -------------------- */
@media print {
  .skip-link, .mainnav, .channel__actions, .masthead__photo, .masthead::after, .crumbs, .linklist { display: none; }
  body, .masthead, .card, .sitefoot, .sitefoot__bar { background: none; color: var(--color-ink); box-shadow: none; }
  .wordmark, .tagline, .sitefoot a { color: var(--color-ink); text-shadow: none; }
  .js [data-reveal] { opacity: 1; }
  .layout { display: block; }
}