/* godart.lu
   Keng Schrëften vun extern: nëmme System-Schrëften.
   DIN-Famill fir Schëlder a Tafel (Windows: Bahnschrift, Apple: DIN, Android: Roboto Condensed),
   eng Serif fir den Text (Sitka / Charter) an eng Mono fir Donnéeën. */

:root {
  --paper: #f2efe8;
  --paper-2: #e8e4da;
  --ink: #181714;
  --ink-2: #57534a;
  --ink-3: #6e695c;
  --rule: #d4cec0;

  --sign: #ffcb05;
  --plate: #171716;          /* donkel Schëlder, a béide Modi d'selwecht */

  --board: #121212;
  --board-text: #f1ede3;
  --board-dim: #8e8a80;
  --cell-hi: #262625;
  --cell-lo: #1e1e1d;
  --ok: #7ccf87;
  --call: #ffcb05;
  --warn: #ff8c42;

  --strip-a: #efe0b8;        /* Departure-Strip, buff */
  --strip-b: #d3e2ec;        /* bloen Strip */
  --strip-c: #efd6ce;        /* rosa Strip */
  --strip-ink: #1b1a16;
  --strip-line: rgba(27, 26, 22, .26);

  --f-sign: Bahnschrift, "DIN Alternate", "DIN Next", "Roboto Condensed", sans-serif-condensed, "Arial Narrow", sans-serif;
  --f-flap: Bahnschrift, "DIN Condensed", "Roboto Condensed", sans-serif-condensed, "Arial Narrow", sans-serif;
  --f-text: Charter, "Bitstream Charter", "Sitka Text", Cambria, "Noto Serif", Georgia, serif;
  --f-mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, "Roboto Mono", "Noto Sans Mono", monospace;

  --wrap: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
  --top-h: 56px;
  --focus: #181714;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #131312;
    --paper-2: #1c1b19;
    --ink: #ece8de;
    --ink-2: #aca698;
    --ink-3: #8a8579;
    --rule: #33312c;
    --plate: #2a2926;
    --focus: #ffcb05;
    --board: #0a0a0a;
    --cell-hi: #1e1e1d;
    --cell-lo: #181817;
    --strip-a: #3a3222;
    --strip-b: #203039;
    --strip-c: #3a2924;
    --strip-ink: #ece8de;
    --strip-line: rgba(236, 232, 222, .2);
  }
}

/* ---------- Basis ---------- */

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

html {
  color-scheme: light dark;
  -webkit-tap-highlight-color: rgba(255, 203, 5, .35);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--top-h) + 16px);
}
html:has(dialog[open]) { overflow: hidden; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 clamp(17px, 0.4vw + 15.5px, 19px) / 1.6 var(--f-text);
  font-variant-numeric: lining-nums;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

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

a, button { touch-action: manipulation; }

h1, h2, h3 { text-wrap: balance; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }

::selection { background: var(--sign); color: #111; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
/* op donkele Flächen gëtt de Fokus giel */
.board :focus-visible, .lightbox :focus-visible { outline-color: var(--sign); }

.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }

.skip {
  position: absolute; left: 12px; top: -80px; z-index: 50;
  padding: 10px 14px; background: var(--plate); color: var(--sign);
  font: 700 16px/1 var(--f-sign); text-decoration: none; border-radius: 4px;
}
.skip:focus { top: 12px; }

/* Text-Linken: Marker amplaz Glow */
.about__text a, .strip__desc a {
  text-decoration-color: var(--ink-3);
  padding: 0 .08em;
  margin: 0 -.08em;
  border-radius: 2px;
}
.about__text a:hover, .strip__desc a:hover { background: var(--sign); color: #111; text-decoration-color: transparent; }

/* ---------- Kopfzeil ---------- */

.top {
  position: sticky; top: 0; z-index: 20;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.top__in { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: var(--top-h); }
.top__home { display: inline-flex; align-items: center; min-height: 44px; font: 700 20px/1 var(--f-sign); letter-spacing: .01em; text-decoration: none; }
.top__nav { display: flex; gap: clamp(8px, 1.5vw, 20px); }
.top__nav a {
  display: flex; align-items: center; gap: 7px;
  min-height: 44px;
  color: var(--ink-2); text-decoration: none;
  font: 600 15px/1 var(--f-sign);
}
.top__nav b {
  display: inline-grid; place-items: center;
  width: 22px; height: 22px; border-radius: 3px;
  background: var(--plate); color: var(--sign);
  font-size: 14px; font-weight: 700;
}
.top__nav a:hover { color: var(--ink); }
.top__nav a:hover b { background: var(--sign); color: #111; }

@media (max-width: 900px) {
  .top__nav span {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
  .top__nav { gap: 6px; }
  .top__nav b { width: 30px; height: 30px; font-size: 16px; }
}

/* ---------- Ufank + Tafel ---------- */

.hero { padding-block: clamp(32px, 6vw, 76px) 0; }

.hero__name {
  margin: 0 0 .2em;
  font-family: var(--f-sign);
  font-weight: 700;
  font-stretch: 87.5%;
  font-size: clamp(48px, 9vw, 116px);
  line-height: .9;
  letter-spacing: -.015em;
}

.hero__lede {
  max-width: 34ch;
  margin: 0 0 clamp(26px, 4vw, 46px);
  color: var(--ink-2);
  font-size: clamp(19px, 1vw + 14px, 24px);
  line-height: 1.45;
  text-wrap: pretty;
}

.board {
  --pad: clamp(10px, 2vw, 22px);
  container-type: inline-size;
  padding: var(--pad) var(--pad) calc(var(--pad) * .7);
  background: var(--board);
  color: var(--board-text);
  border-radius: 6px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 16px 24px -20px rgba(0, 0, 0, .45);
}

.board__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-bottom: 14px;
  font-family: var(--f-sign);
}
.board__title {
  display: flex; align-items: center; gap: .45em;
  margin: 0;
  font-size: clamp(18px, 2.3vw, 28px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.board__picto {
  width: 1.4em; height: 1.4em; padding: .12em;
  background: var(--sign); color: #111; fill: #111;
  border-radius: 3px;
}
.board__alt { color: var(--board-dim); font-size: .6em; font-weight: 400; letter-spacing: .06em; }
.board__now {
  display: flex; align-items: baseline; gap: .7em;
  margin: 0;
  color: var(--board-dim);
  font-size: clamp(13px, 1.4vw, 17px);
  white-space: nowrap;
}
.board__clock {
  color: var(--sign);
  font-size: 1.5em; font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .03em;
}

/* 1 Zell = --u breet. Spalten: Zäit 5, Fluch 6, Destinatioun 13, Gate 3, Bemierkung 15 */
.board__cols,
.row {
  --u: min(27px, calc(100cqi / 46));
  display: grid;
  grid-template-columns: calc(5 * var(--u)) calc(6 * var(--u)) calc(13 * var(--u)) calc(3 * var(--u)) calc(15 * var(--u));
  column-gap: calc(.9 * var(--u));
  align-items: center;
}

.board__cols {
  padding-bottom: 7px;
  border-bottom: 1px solid #000;
  color: var(--board-dim);
  font: 600 clamp(10px, 1.1vw, 12.5px)/1 var(--f-sign);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.board__rows { margin: 0; padding: 0; list-style: none; }

.row {
  position: relative;
  padding: calc(.22 * var(--u)) 0;
  border-bottom: 1px solid #000;
  color: inherit;
  text-decoration: none;
  font-size: calc(var(--u) / .81);
}
.board__rows li:last-child .row { border-bottom: 0; }
.row::before {
  content: "";
  position: absolute; left: calc(-1 * var(--pad)); top: 20%; bottom: 20%;
  width: 4px;
  background: var(--sign);
  opacity: 0;
  transition: opacity .12s;
}
.row:hover::before { opacity: 1; }
.row:focus-visible { outline-offset: 1px; }

.row [data-flap] {
  display: flex;
  min-width: 0;
  overflow: hidden;
  font-family: var(--f-flap);
  font-weight: 600;
  line-height: 1.2;
  white-space: pre;
}
.row__sub { display: none; }

/* eng eenzel Klapp */
.f {
  position: relative;
  flex: none;
  display: grid; place-items: center;
  width: .74em; height: 1.2em;
  margin-right: .07em;
  overflow: hidden;
  border-radius: .07em;
  background: linear-gradient(var(--cell-hi) 0 50%, var(--cell-lo) 50% 100%);
  color: var(--board-text);
  font-stretch: 75%;
  line-height: 1;
}
.f::after {
  content: "";
  position: absolute; left: 0; right: 0; top: calc(50% - .5px);
  height: 1px;
  background: rgba(0, 0, 0, .85);
}
.f__c { display: block; }
.f__c[data-p="0"] { animation: flap-a 80ms ease-out; }
.f__c[data-p="1"] { animation: flap-b 80ms ease-out; }
@keyframes flap-a { from { transform: translateY(-.28em) scaleY(.2); opacity: .5; } }
@keyframes flap-b { from { transform: translateY(-.28em) scaleY(.2); opacity: .5; } }

.tone-ok .f, .row__sub .tone-ok { color: var(--ok); }
.tone-call .f, .row__sub .tone-call { color: var(--call); }
.tone-warn .f, .row__sub .tone-warn { color: var(--warn); }

/* blénkt nëmmen zweemol (4,8 s), WCAG 2.2.2: näischt blénkt méi laang wéi 5 Sekonnen */
.board.is-live .c-status.tone-call .f__c { animation: blink 2.4s 2; }
@keyframes blink {
  0%, 72% { opacity: 1; }
  74%, 100% { opacity: .15; }
}

/* ouni JS: normalen Text, deen trotzdem no Tafel ausgesäit */
.board:not(.is-flaps) .row [data-flap] { letter-spacing: .12em; }

@container (max-width: 620px) {
  .board__cols { display: none; }
  .row {
    --u: calc(100cqi / 19);
    grid-template-columns: calc(5 * var(--u)) calc(13 * var(--u));
    row-gap: 5px;
    padding: 8px 0 9px;
  }
  .row .c-flight, .row .c-gate, .row .c-status { display: none; }
  .row__sub {
    display: block;
    grid-column: 2;
    color: var(--board-dim);
    font: 500 13px/1.2 var(--f-sign);
    letter-spacing: .05em;
    text-transform: uppercase;
  }
  .row__sub em { font-style: normal; color: var(--board-text); }
  .row__sub .lc { text-transform: none; }
}
@container (max-width: 470px) {
  .board__date, .board__alt { display: none; }
}

/* ---------- Sektiounen ---------- */

.sec { padding-top: clamp(64px, 9vw, 124px); }

.sign {
  display: inline-flex; align-items: stretch;
  margin: 0 0 clamp(18px, 2.4vw, 28px);
  overflow: hidden;
  background: var(--sign);
  color: #111;
  border-radius: 4px;
  font-family: var(--f-sign);
  font-size: clamp(25px, 3.2vw, 38px);
  font-weight: 700;
  line-height: 1;
}
.sign__gate {
  display: grid; place-items: center;
  min-width: 1.45em;
  padding: 0 .2em;
  background: var(--plate);
  color: var(--sign);
}
.sign__title {
  display: flex; align-items: baseline; gap: .55em;
  margin: 0;
  padding: .27em .6em .22em .45em;
  font: inherit;
}
.sign__title [lang="en"] { font-size: .52em; font-weight: 400; letter-spacing: .05em; }
.sign--ink { background: var(--plate); color: var(--sign); }
.sign--ink .sign__gate { background: transparent; box-shadow: inset -2px 0 0 var(--sign); }

.sec__lede {
  max-width: 46ch;
  margin: 0 0 clamp(26px, 4vw, 44px);
  color: var(--ink-2);
  font-size: clamp(19px, .7vw + 15px, 22px);
  line-height: 1.45;
}

/* ---------- i: Iwwer mech ---------- */

.about__pic { margin: 0 0 clamp(26px, 4vw, 44px); }
.about__pic img {
  width: 100%;
  aspect-ratio: 2.6 / 1;
  object-fit: cover;
  object-position: 50% 78%;
  border-radius: 3px;
  background: #0e1626;
}
.about__pic figcaption {
  margin-top: 10px;
  color: var(--ink-3);
  font: 13px/1.5 var(--f-mono);
}

.about__text {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  column-gap: clamp(28px, 6vw, 88px);
  align-items: start;
}
.about__text p { grid-column: 1; margin: 0 0 1em; max-width: 36em; }
.about__text p:last-of-type { margin-bottom: 0; }

.langs {
  grid-column: 2; grid-row: 1 / span 3;
  margin: .35em 0 0;
  border-top: 2px solid var(--ink);
}
.langs div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
}
.langs dt { font: 600 17px/1.2 var(--f-sign); }
.langs dd { margin: 0; color: var(--ink-2); font: 14px/1.2 var(--f-mono); text-align: right; }
.tag {
  display: inline-block;
  margin-left: .45em; padding: 3px 5px 2px;
  background: var(--plate); color: var(--sign);
  border-radius: 2px;
  font: 700 11px/1 var(--f-sign);
  letter-spacing: .08em;
  vertical-align: 1px;
}

@media (max-width: 640px) {
  .about__pic img { aspect-ratio: 16 / 10; object-position: 40% 70%; }
}

@media (max-width: 860px) {
  .about__text { grid-template-columns: 1fr; }
  .langs { grid-column: 1; grid-row: auto; margin-top: 28px; }
}

/* ---------- A: Projeten (Flight Strips) ---------- */

.strip { margin: 0 0 clamp(32px, 4.5vw, 52px); }
.strip:last-child { margin-bottom: 0; }
.strip--a { --strip: var(--strip-a); }
.strip--b { --strip: var(--strip-b); }
.strip--c { --strip: var(--strip-c); }

.strip__row {
  display: grid;
  grid-template-columns: minmax(160px, 1.15fr) 1fr 1fr 1fr auto;
  gap: 1px;
  background: var(--strip-line);
  border: 1px solid var(--strip-line);
  border-left: 8px solid color-mix(in srgb, var(--strip) 72%, #000);
  border-radius: 2px;
  color: var(--strip-ink);
  font: 15px/1.35 var(--f-mono);
}
.strip__row > * { min-width: 0; padding: 12px 14px 13px; background: var(--strip); }

.strip__cs h3 {
  margin: 0;
  font: 700 clamp(26px, 2.5vw, 34px)/1 var(--f-sign);
  letter-spacing: .02em;
}
.lbl {
  display: block;
  margin-bottom: 7px;
  font: 600 10.5px/1 var(--f-sign);
  letter-spacing: .15em;
  text-transform: uppercase;
  opacity: .8;
}
.strip__go {
  display: flex; align-items: center; justify-content: center; gap: .4em;
  padding-inline: 20px;
  color: var(--strip-ink);
  font: 700 16px/1 var(--f-sign);
  text-decoration: none;
  white-space: nowrap;
}
.strip__go:hover { background: var(--plate); color: var(--sign); }

.strip__desc { max-width: 64ch; margin: 14px 0 0 10px; }

@media (max-width: 900px) {
  .strip__row { grid-template-columns: 1fr 1fr; }
  .strip__cs, .strip__f:nth-child(4), .strip__go { grid-column: 1 / -1; }
  .strip__go { justify-content: space-between; padding-block: 14px; }
  .strip__desc { margin-left: 0; }
}

/* ---------- B: Logbuch ---------- */

.log { width: 100%; border-collapse: collapse; }
.log th {
  padding: 0 16px 10px 0;
  border-bottom: 2px solid var(--ink);
  color: var(--ink-3);
  font: 600 11px/1 var(--f-sign);
  letter-spacing: .15em;
  text-align: left;
  text-transform: uppercase;
}
.log td { padding: 14px 16px 14px 0; border-bottom: 1px solid var(--rule); vertical-align: baseline; }
.log td:first-child { width: 9.5em; color: var(--ink-2); font: 14px/1.3 var(--f-mono); white-space: nowrap; }
.log td:nth-child(2) { font: 600 20px/1.2 var(--f-sign); }
.log td:last-child { color: var(--ink-2); }

.log__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin: 30px 0 0; }
.btn {
  display: inline-flex; align-items: center; gap: .5em;
  padding: 14px 18px 13px;
  background: var(--plate); color: var(--sign);
  border-radius: 4px;
  font: 700 18px/1 var(--f-sign);
  text-decoration: none;
}
.btn:hover { background: var(--sign); color: #111; }
.note { color: var(--ink-3); font: 13px/1.45 var(--f-mono); }

@media (max-width: 640px) {
  .log thead { display: none; }
  .log, .log tbody, .log tr, .log td { display: block; }
  .log tr { padding: 14px 0; border-bottom: 1px solid var(--rule); }
  .log tr:first-child { border-top: 2px solid var(--ink); }
  .log td { padding: 0; border: 0; }
  .log td:first-child { width: auto; margin-bottom: 4px; }
}

/* ---------- C: Hangar ---------- */

.hangar {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(26px, 4.5vw, 64px);
  align-items: start;
}

.rack { position: relative; margin: 0; overflow: hidden; border-radius: 3px; background: #101010; }
.rack img { width: 100%; }

.pin {
  position: absolute;
  width: 30px; height: 30px;
  margin: -15px 0 0 -15px;
  display: grid; place-items: center;
  background: var(--sign); color: #111;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #111, 0 3px 12px rgba(0, 0, 0, .55);
  font: 700 16px/1 var(--f-sign);
  transition: transform .15s ease-out;
}
.pin--1 { left: 62%; top: 9.8%; }
.pin--2 { left: 31%; top: 14.3%; }
.pin--3 { left: 36.5%; top: 24.3%; }
.pin--4 { left: 73.5%; top: 24.3%; }
.pin--5 { left: 58.5%; top: 30.3%; }
.pin--6 { left: 79%; top: 41%; }
.pin--7 { left: 57%; top: 47.5%; }
.pin--8 { left: 33%; top: 57.5%; }
.pin--9 { left: 60%; top: 57.5%; }
.pin--10 { left: 20%; top: 68%; }
.pin--11 { left: 66%; top: 71.5%; }
.pin--12 { left: 24%; top: 84.5%; }

.legend { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--ink); }
.legend li {
  display: grid;
  grid-template-columns: 28px 1fr;
  column-gap: 14px;
  padding: 11px 0 12px;
  border-bottom: 1px solid var(--rule);
}
.legend .num {
  grid-row: span 2;
  display: grid; place-items: center;
  width: 26px; height: 26px; margin-top: 1px;
  background: var(--sign); color: #111;
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px #111;
  font: 700 14px/1 var(--f-sign);
}
.legend b { font: 600 18px/1.25 var(--f-sign); }
.legend li > span:last-child { color: var(--ink-2); font-size: 16px; line-height: 1.45; }

/* Nummer am Bild <-> Zeil an der Lëscht */
.hangar:has(.legend--1:hover) .pin--1,
.hangar:has(.legend--2:hover) .pin--2,
.hangar:has(.legend--3:hover) .pin--3,
.hangar:has(.legend--4:hover) .pin--4,
.hangar:has(.legend--5:hover) .pin--5,
.hangar:has(.legend--6:hover) .pin--6,
.hangar:has(.legend--7:hover) .pin--7,
.hangar:has(.legend--8:hover) .pin--8,
.hangar:has(.legend--9:hover) .pin--9,
.hangar:has(.legend--10:hover) .pin--10,
.hangar:has(.legend--11:hover) .pin--11,
.hangar:has(.legend--12:hover) .pin--12,
.pin:hover { transform: scale(1.3); }

.hangar:has(.pin--1:hover) .legend--1 b,
.hangar:has(.pin--2:hover) .legend--2 b,
.hangar:has(.pin--3:hover) .legend--3 b,
.hangar:has(.pin--4:hover) .legend--4 b,
.hangar:has(.pin--5:hover) .legend--5 b,
.hangar:has(.pin--6:hover) .legend--6 b,
.hangar:has(.pin--7:hover) .legend--7 b,
.hangar:has(.pin--8:hover) .legend--8 b,
.hangar:has(.pin--9:hover) .legend--9 b,
.hangar:has(.pin--10:hover) .legend--10 b,
.hangar:has(.pin--11:hover) .legend--11 b,
.hangar:has(.pin--12:hover) .legend--12 b,
.legend li:hover b { background: var(--sign); color: #111; box-shadow: 0 0 0 3px var(--sign); border-radius: 1px; }

.minihead {
  margin: 38px 0 12px;
  color: var(--ink-3);
  font: 600 12px/1 var(--f-sign);
  letter-spacing: .15em;
  text-transform: uppercase;
}
.specs { width: 100%; border-collapse: collapse; font: 14.5px/1.3 var(--f-mono); }
.specs th, .specs td { padding: 9px 12px 9px 0; border-bottom: 1px solid var(--rule); text-align: left; }
.specs thead th { border-bottom: 2px solid var(--ink); font: 600 17px/1.2 var(--f-sign); }
.specs thead td { border-bottom: 2px solid var(--ink); }
.specs tbody th { width: 3.8em; color: var(--ink-3); font: 600 11px/1 var(--f-sign); letter-spacing: .12em; }

@media (max-width: 860px) {
  .hangar { grid-template-columns: 1fr; }
  .rack { max-width: 540px; }
}
@media (max-width: 600px) {
  .pin { width: 24px; height: 24px; margin: -12px 0 0 -12px; font-size: 13px; }
}

/* ---------- D: Fotoen ---------- */

.albums { --shot-h: clamp(150px, 15vw, 210px); display: grid; gap: clamp(30px, 4vw, 46px); }

.album {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
}
.album__title { margin: 0; font: 700 clamp(22px, 2.1vw, 28px)/1.05 var(--f-sign); }
.album__meta {
  display: grid; gap: 3px;
  margin: 9px 0 0;
  color: var(--ink-3);
  font: 13px/1.4 var(--f-mono);
}

.album__strip {
  display: flex; gap: 10px;
  margin: 0; padding: 0 0 12px;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--ink-3) transparent;
}
.shot { flex: none; width: min-content; scroll-snap-align: start; }
.shot__link { display: block; overflow: hidden; border-radius: 2px; background: var(--paper-2); cursor: zoom-in; }
.shot__link img { width: auto; max-width: none; height: var(--shot-h); transition: opacity .15s; }
.shot__link:hover img { opacity: .88; }
.shot__cap { margin: 7px 0 0; color: var(--ink-2); font: 12.5px/1.4 var(--f-mono); }
.shot__cap span { margin-right: .25em; color: var(--ink-3); }

@media (max-width: 760px) {
  .album { grid-template-columns: 1fr; gap: 12px; }
  .album__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; }
}

/* ---------- E: Kontakt ---------- */

.contact {
  margin-top: clamp(80px, 10vw, 148px);
  padding-block: clamp(44px, 7vw, 92px) clamp(52px, 7vw, 100px);
  background: var(--sign);
  color: #111;
}
.contact :focus-visible { outline-color: #111; }
.contact .sign { display: flex; width: fit-content; }
.contact__mail {
  display: flex; align-items: center; gap: .16em;
  width: fit-content;
  max-width: 100%;
  margin-top: 6px;
  color: #111;
  font: 700 clamp(34px, 9.4vw, 116px)/1 var(--f-sign);
  font-stretch: 87.5%;
  letter-spacing: -.012em;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.contact__mail:hover { text-decoration: underline; text-decoration-thickness: .06em; text-underline-offset: .1em; }
.contact__arrow { flex: none; width: .7em; height: .7em; }
.contact__note { max-width: 46ch; margin: 22px 0 0; font-size: clamp(18px, .6vw + 15px, 21px); line-height: 1.5; }

/* ---------- Fouss ---------- */

.foot { padding-block: 26px 40px; color: var(--ink-3); font: 13px/1.6 var(--f-mono); }
.foot__in { display: grid; grid-template-columns: 1fr auto auto; gap: 6px 36px; }
.foot a { color: inherit; text-decoration-color: var(--ink-3); }
.foot a:hover { background: var(--sign); color: #111; text-decoration-color: transparent; }
.foot p { margin: 0; }
@media (max-width: 760px) { .foot__in { grid-template-columns: 1fr; } }

/* ---------- Dateschutz ---------- */

.legal { --wrap: 44rem; padding-block: clamp(32px, 6vw, 72px) clamp(48px, 7vw, 96px); }
.legal__title {
  margin: 0 0 .25em;
  font: 700 clamp(40px, 7vw, 72px)/.95 var(--f-sign);
  font-stretch: 87.5%;
  letter-spacing: -.01em;
}
.legal h2 { margin: 2em 0 .5em; font: 700 clamp(20px, 2vw, 24px)/1.2 var(--f-sign); }
.legal p { margin: 0 0 1em; }
.legal ul { margin: 0 0 1em; padding-left: 1.2em; }
.legal li { margin: .15em 0; }
.legal a { text-decoration-color: var(--ink-3); }
.legal a:hover { background: var(--sign); color: #111; text-decoration-color: transparent; }
.legal__stand { margin-top: 2.5em; color: var(--ink-3); font: 13px/1.5 var(--f-mono); }

/* ---------- Foto-Vollbild ---------- */

.lightbox {
  width: 100vw; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: #0c0c0b;
  color: #f1ede3;
  overflow: hidden;
  overscroll-behavior: contain;
}
.lightbox::backdrop { background: #0c0c0b; }
.lightbox[open] { display: flex; flex-direction: column; }
.lightbox__top, .lightbox__nav {
  flex: none;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 16px;
}
.lightbox__count { margin: 0; color: #9c978c; font: 13px/1.4 var(--f-mono); }
.lightbox__frame {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  margin: 0; padding: 0 16px;
}
.lightbox__img { flex: 0 1 auto; min-height: 0; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.lightbox__cap { flex: none; max-width: 70ch; color: #f1ede3; font: 14px/1.45 var(--f-mono); text-align: center; }
.lightbox__btn {
  padding: 11px 15px 10px;
  border: 0; border-radius: 4px;
  background: #22221f; color: #f1ede3;
  font: 600 16px/1 var(--f-sign);
  cursor: pointer;
}
.lightbox__btn:hover { background: var(--sign); color: #111; }

/* ---------- manner Beweegung ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .f__c, .board.is-live .c-status.tone-call .f__c { animation: none !important; }
  .pin, .row::before, .shot__link img { transition: none; }
}