/* (c) 2026 Markus Senoner */
@font-face { font-family: "Archivo"; src: url("/fonts/archivo-var.woff2") format("woff2"); font-weight: 400 900; font-stretch: 100% 125%; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/fonts/ibm-plex-sans-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/fonts/ibm-plex-sans-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/fonts/ibm-plex-mono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

/* 1. Tokens ---------------------------------------------------------------- */
:root {
  color-scheme: light;

  /* Palette */
  --white:    #ffffff;
  --paper:    #f3f4f6;
  --ink:      #14161b;
  --ink-2:    #4b505a;
  --silver:   #9aa0a8;
  --silver-l: #dcdfe4;
  --red:      #d40c22;
  --red-d:    #a8071a;
  --night:    #101218;
  --night-2:  #1b1e27;
  --on-night: #e9ebef;
  --glow:     rgb(212 12 34 / .42);

  /* Rollen – werden von .dark umgeschaltet */
  --fg:      var(--ink);
  --muted:   var(--ink-2);
  --line:    rgb(20 22 27 / .1);
  --surface: var(--white);
  --glass:   rgb(255 255 255 / .64);

  /* Schrift */
  --f-display: "Archivo", "Arial Black", "Helvetica Neue", sans-serif;
  --f-body:    "IBM Plex Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --fs-xs:  .78rem;
  --fs-s:   .9rem;
  --fs-m:   1.06rem;
  --fs-l:   clamp(1.2rem, 1rem + .8vw, 1.45rem);
  --fs-xl:  clamp(1.9rem, 1.3rem + 2.4vw, 3.2rem);
  --fs-xxl: clamp(2.9rem, 1.4rem + 6.4vw, 7.4rem);

  /* Raum */
  --wrap:    1240px;
  --g:       16px;
  --pad-l:   max(var(--g), env(safe-area-inset-left, 0px), (100% - var(--wrap)) / 2);
  --pad-r:   max(var(--g), env(safe-area-inset-right, 0px), (100% - var(--wrap)) / 2);
  --section: clamp(4rem, 3rem + 5vw, 7rem);
  --radius:  4px;
  --ease:    cubic-bezier(.2, .7, .2, 1);
}
@media (min-width: 700px) { :root { --g: 2rem; } }

/* 2. Basis ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--white);
  color: var(--fg);
  font: 400 var(--fs-m)/1.65 var(--f-body);
  overflow-x: clip;
}
img, svg { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 2px; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--f-display);
  font-stretch: 118%;
  font-weight: 850;
  line-height: .98;
  letter-spacing: -.02em;
  text-wrap: balance;
}
h1 {
  font-size: var(--fs-xxl);
  font-size: min(var(--fs-xxl), 12cqi);   /* nie breiter als die eigene Spalte */
  font-weight: 900; font-stretch: 125%;
}
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-l); line-height: 1.15; letter-spacing: -.01em; }
:is(h1, h2) b { color: var(--red); }                    /* Akzent im Titel */
h1 em {                                                  /* zweite Zeile als Kontur */
  display: block; font-style: normal; color: transparent;
  -webkit-text-stroke: 2px var(--silver);
}
p, li, dd { text-wrap: pretty; }
p { margin: 0; max-width: 62ch; }
ul, ol, dl { margin: 0; padding: 0; }

/* Kicker + Titel + Untertitel */
hgroup { display: grid; gap: 1.25rem; align-content: start; }
hgroup > p:first-child {
  padding-left: 2.6rem;                                  /* rote Linie davor */
  background: linear-gradient(var(--red), var(--red)) 0 .65em / 1.75rem 2px no-repeat;
  font: 500 var(--fs-xs)/1.4 var(--f-mono);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
}
hgroup > p + :is(h1, h2, h3) + p { color: var(--muted); }
article hgroup { gap: .75rem; }
article hgroup > p:first-child { padding-left: 0; background: none; letter-spacing: .06em; text-transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* 3. Seitenrahmen ---------------------------------------------------------- */
a[href="#inhalt"] {                                      /* Skip-Link */
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--ink); color: var(--white); padding: .6rem 1rem;
}
a[href="#inhalt"]:focus { top: 1rem; }

body > header,
main > *,
footer { padding-left: var(--pad-l); padding-right: var(--pad-r); }

main > * { padding-block: var(--section); }

/* 4. Kopfzeile (Glas) ------------------------------------------------------ */
body > header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding-block: .9rem;
  background: var(--glass);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  backdrop-filter: blur(16px) saturate(1.5);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, box-shadow .3s;
}
header[data-scrolled] { border-bottom-color: var(--line); box-shadow: 0 8px 30px -18px rgb(20 22 27 / .35); }
body::before {
  content: ""; position: fixed; inset: 0 0 auto; z-index: 51;
  height: env(safe-area-inset-top, 0px); background: var(--white);
}

/* Logo (Kopf und Fuß) */
a[aria-label] { display: flex; align-items: center; gap: .875rem; text-decoration: none; }
a[aria-label] img { width: 3.5rem; }
a[aria-label] span { font: 500 1.35rem/1 var(--f-mono); letter-spacing: -.02em; white-space: nowrap; }
a[aria-label] b { color: var(--red); font-weight: 500; }

header nav { display: flex; align-items: center; gap: 2rem; }
header nav ul { list-style: none; display: flex; gap: 1.75rem; }
header nav li a {
  padding-block: .4rem; text-decoration: none; font-size: var(--fs-s); font-weight: 600;
  background: linear-gradient(var(--red), var(--red)) 0 100% / 0 2px no-repeat;
  transition: background-size .35s var(--ease);
}
header nav li a:is(:hover, [aria-current]) { background-size: 100% 2px; }
header nav .btn { padding: .65rem 1rem; font-size: var(--fs-s); }
header button { display: none; }

@media (max-width: 860px) {
  header button {
    display: grid; place-items: center; width: 2.75rem; height: 2.75rem;
    border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); cursor: pointer;
  }
  header button svg { width: 1.5rem; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
  [aria-expanded="false"] path:last-child,
  [aria-expanded="true"] path:first-child { display: none; }  /* ☰ bzw. ✕ */

  header nav {
    position: absolute; inset: 100% 0 auto;
    flex-direction: column; align-items: stretch; gap: 1rem;
    padding: 1rem var(--pad-r) 1.5rem var(--pad-l);
    background: var(--white); border-bottom: 1px solid var(--line);
    box-shadow: 0 20px 40px -24px rgb(20 22 27 / .4);
  }
  [aria-expanded="false"] + nav { display: none; }
  header nav ul { flex-direction: column; gap: 0; }
  header nav li a { display: block; padding-block: .8rem; border-bottom: 1px solid var(--line); background: none; font: 800 var(--fs-l)/1.2 var(--f-display); }
  header nav li a[aria-current] { color: var(--red); }
  header nav .btn { justify-content: center; }
}
@media (max-width: 380px) { a[aria-label] span { font-size: 1.19rem; } }

/* 5. Links & Buttons ------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .95rem 1.5rem;
  background: var(--red); color: var(--white);
  font: 600 var(--fs-m)/1 var(--f-body);
  text-decoration: none; border-radius: var(--radius);
  transition: box-shadow .25s, background-color .25s;
}
.btn:hover { background: var(--red-d); box-shadow: 0 10px 30px -10px var(--glow); }

.more {                                                  /* Textlink mit roter Unterstreichung */
  font-weight: 600; text-decoration: none; padding-bottom: .2em;
  background: linear-gradient(var(--red), var(--red)) 0 100% / 0 2px no-repeat,
              linear-gradient(var(--line), var(--line)) 0 100% / 100% 2px no-repeat;
  transition: background-size .35s var(--ease), color .2s;
}
.more:hover { background-size: 100% 2px, 100% 2px; color: var(--red); }
.dark .more:hover { color: var(--white); }

p:has(> .btn), p:has(> .more + .more) { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; }

/* 6. Flächen --------------------------------------------------------------- */
.tint { background: linear-gradient(180deg, var(--white), var(--paper) 65%, var(--white)); }

.dark {
  --fg: var(--on-night);
  --muted: rgb(233 235 239 / .72);
  --line: rgb(233 235 239 / .14);
  --surface: var(--ink);
  --glass: rgb(16 18 24 / .55);
  background: var(--surface);
  color: var(--fg);
}
main > section.dark {
  position: relative; isolation: isolate;
  --notch: clamp(2.5rem, 1rem + 5vw, 5rem);
  margin-top: calc(-1 * var(--notch));                   /* schiebt sich unter die Fläche davor */
  padding-top: calc(var(--section) + var(--notch) / 2);
  clip-path: polygon(0 0, 50% var(--notch), 100% 0, 100% 100%, 0 100%);   /* Dreieck nach unten */
  background:
    radial-gradient(42rem 30rem at 78% 40%, var(--glow), transparent 62%),
    radial-gradient(30rem 24rem at 10% 100%, rgb(154 160 168 / .16), transparent 70%),
    linear-gradient(180deg, var(--night), var(--night-2));
}
.dark hgroup > p:first-child { color: var(--silver); }

/* .sheet – Abschnitte wie übereinandergelegte Blätter: Oberkante als Dreieck
   (Spitze nach unten), das mit weichem Schatten über dem vorigen Abschnitt
   liegt. Für Abschnittsfolgen ohne dunklen Hintergrund (Pionierprojekte).
   Das Blatt wird von ::after gemalt, weil drop-shadow der Form folgen soll,
   ohne den Text zu beschatten. Mit .tint wird das Blatt silbergrau. */
main > section.sheet {
  --notch: clamp(2rem, 1rem + 4vw, 4rem);
  --sheet: var(--white);
  position: relative; isolation: isolate;
  margin-top: calc(-1 * var(--notch));
  padding-top: calc(var(--section) + var(--notch) / 2);
  background: none;
}
main > section.sheet.tint { --sheet: var(--paper); }
main > section.sheet::after {
  --shade: 14px;                                   /* Platz für den Schatten an den Ecken */
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(to top right, var(--sheet) 50%, transparent 50.5%) left var(--shade) / 50.05% calc(var(--notch) - var(--shade)) no-repeat,
    linear-gradient(to top left, var(--sheet) 50%, transparent 50.5%) right var(--shade) / 50.05% calc(var(--notch) - var(--shade)) no-repeat,
    linear-gradient(var(--sheet), var(--sheet)) left var(--notch) / 100% 100% no-repeat;
  filter: drop-shadow(0 -5px 7px rgb(20 22 27 / .13));
}

.glass {
  background: var(--glass);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid rgb(255 255 255 / .35);
  border-radius: var(--radius);
  box-shadow: 0 24px 60px -30px rgb(20 22 27 / .5);
}

/* 7. Seiteneinstieg (main > header, auf jeder Seite) ----------------------- */
main > header {
  position: relative; isolation: isolate;
  padding-top: clamp(3rem, 2rem + 5vw, 7rem);
  background:
    radial-gradient(60rem 36rem at 92% -8%, rgb(212 12 34 / .09), transparent 60%),
    radial-gradient(48rem 30rem at -10% 110%, rgb(154 160 168 / .22), transparent 65%),
    var(--white);
}
main > header > div { display: grid; gap: 2rem; align-content: end; container-type: inline-size; }
main > header > div > p:not(:has(.btn)) { font-size: var(--fs-l); line-height: 1.5; color: var(--muted); max-width: 44ch; }

/* Kompakter Seitenkopf (Unterseiten ohne .split): kleinere h1, kein Abstand nach unten */
main > header:not(.split) { padding-bottom: 0; }
main > header:not(.split) h1 { font-size: var(--fs-xl); font-stretch: 118%; }

/* 8. Layout: Abschnitt mit Überschrift + Inhalt ---------------------------- */
main > section:not(.split) { display: grid; gap: clamp(3rem, 2rem + 4vw, 6rem); }
main > section:not(.split) > hgroup { max-width: 44rem; margin-left: clamp(0rem, 16%, 14rem); }

/* 9. Layout .split – zwei asymmetrische Spalten, optional Titel darüber ----
      <section class="split"> [hgroup] <links> <rechts> </section>         */
.split {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 3rem 1.5rem;
  align-items: start;
}
.split > * { grid-column: 1 / -1; min-width: 0; }
.split > :where(:not(hgroup):nth-last-child(2)) { display: grid; gap: 1.75rem; }
.split > hgroup h2 { font-size: clamp(2.6rem, 1rem + 8vw, 9rem); font-stretch: 125%; font-weight: 900; overflow-wrap: anywhere; }
main > header.split > div { position: relative; z-index: 2; }

@media (min-width: 1021px) {
  /* :where() hält die Spezifität niedrig, damit Sonderfälle leicht überschreiben */
  .split > :where(:not(hgroup):nth-last-child(2)) { grid-column: 1 / span 5; }
  .split > :where(:not(hgroup):last-child) { grid-column: 7 / -1; }
  .split > :where(figure:last-child) { grid-column: 6 / -1; }
  .split > hgroup + * + figure:last-child { margin-top: clamp(-6rem, -4vw, -2rem); }   /* ragt in den Titel */
  main > header.split > div { grid-column: 1 / span 8; }
  main > header.split > figure:last-child { grid-column: 9 / -1; align-self: end; }
}

/* Bild in .split: Bildschirm-Rahmen mit Glow, Detail-Karte überlappt */
figure { margin: 0; }
figcaption { font: 500 var(--fs-xs)/1.4 var(--f-mono); letter-spacing: .02em; color: var(--silver); }
.split > figure:has(> img) { position: relative; z-index: 3; }
.split > figure > img {
  width: 100%; border-radius: 10px;
  box-shadow: 0 0 0 10px #05060a, 0 40px 120px -30px var(--glow), 0 0 80px -20px var(--glow);
}
.split > figure > figcaption { margin-top: 1rem; }
figure figure {
  width: min(15.5rem, 72%); margin: 1.5rem 0 0 auto;
  display: grid; gap: .55rem; padding: .6rem .6rem .75rem;
}
@media (min-width: 641px) {
  .split > figure:has(> img) { padding-bottom: 4rem; }
  .split > figure > figcaption { position: absolute; left: 0; bottom: 1rem; max-width: 50%; margin: 0; }
  figure figure { position: absolute; right: -1.5rem; bottom: 0; z-index: 4; width: min(13.5rem, 40%); margin: 0; }
}
figure figure img { width: 100%; border-radius: 2px; }

/* 10. Definitionslisten (Merkmale, Kontakt, Projektdaten) ------------------ */
dl { display: grid; grid-template-columns: minmax(6rem, 9.5rem) 1fr; }
dl > * { margin: 0; padding-block: .9rem; border-top: 1px solid var(--line); }
dt { padding-right: 1rem; font: 500 var(--fs-xs)/1.7 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
dd { font-size: var(--fs-s); overflow-wrap: anywhere; }
.dark dt { color: var(--silver); }

/* 11. Karten: article in .mosaic und .cards ------------------------------- */
:is(.mosaic, .cards) > article {
  position: relative; min-width: 0;
  display: grid; align-content: start; gap: 1rem;
  padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  background: var(--surface); color: var(--fg);
  border: 1px solid var(--line); border-radius: var(--radius);
  transition: box-shadow .3s;
}
:is(.mosaic, .cards) > article:hover { box-shadow: 0 24px 50px -30px rgb(20 22 27 / .45); }
article > p { color: var(--muted); }
article > img:first-child { height: 6.5rem; width: auto; }      /* Logo oben in der Karte */
main ul { display: grid; gap: .45rem; padding-left: 1.2em; }
article ul { font-size: var(--fs-s); }
main li::marker { color: var(--red); }
article figure { display: grid; gap: .6rem; margin-top: .5rem; }
article figure img { width: 100%; border-radius: 2px; box-shadow: 0 0 0 1px var(--line); }
article dl { grid-template-columns: auto 1fr; font-size: var(--fs-xs); margin-top: auto; }
article dl > * { padding-block: .35rem; }
article dd { font-size: inherit; font-weight: 600; }

/* 12. Layout .mosaic – versetzte Kacheln: groß · versetzt · Notiz · überlappend · klein */
.mosaic { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.5rem; }
.mosaic > * { grid-column: 1 / -1; }
.mosaic > :nth-child(5) { border-style: dashed; border-color: var(--silver); background: transparent; }
@media (min-width: 641px) {
  .mosaic > :nth-child(2) { grid-column: 1 / span 7; }
  .mosaic > :nth-child(3) { grid-column: 8 / -1; align-self: center; }
  .mosaic > :nth-child(4) { grid-column: 3 / -1; }
  .mosaic > :nth-child(5) { grid-column: 1 / span 8; }
}
@media (min-width: 1021px) {
  .mosaic > :nth-child(1) { grid-column: 1 / span 7; grid-row: 1 / span 2; }
  .mosaic > :nth-child(1) h3 { font-size: var(--fs-xl); }
  .mosaic > :nth-child(2) { grid-column: 8 / -1; grid-row: 1; margin-top: 5rem; }
  .mosaic > :nth-child(3) { grid-column: 8 / -1; grid-row: 2; align-self: end; padding: 0 0 4.5rem 1rem; }
  .mosaic > :nth-child(4) { grid-column: 6 / -1; grid-row: 3; margin: -3rem 0 0 2rem; z-index: 2; }
  .mosaic > :nth-child(5) { grid-column: 1 / span 5; grid-row: 3; margin-top: 3rem; }
}
.mosaic > aside { font: 800 clamp(1.2rem, .9rem + 1.2vw, 1.8rem)/1.15 var(--f-display); font-stretch: 112%; color: var(--silver); }
.mosaic > aside b { color: var(--red); }

/* 13. Layout .cards – gleich breite Boxen, die selbst umbrechen ----------- */
.cards { display: flex; flex-flow: row wrap; gap: 1.5rem; }
.cards > article {
  flex: 1 1 var(--card, 20rem);                          /* 20rem ≈ 3 / 2 / 1 pro Zeile; per style="--card: …" änderbar */
  display: flex; flex-direction: column;
  background: var(--paper); border-color: transparent;
}
.cards > article hgroup > p:first-child { color: var(--red); text-transform: uppercase; letter-spacing: .12em; }

/* 14. Layout .timeline ----------------------------------------------------- */
.timeline { list-style: none; display: grid; }
.timeline li {
  display: grid; grid-template-columns: 6.5rem 1fr; gap: .35rem 1.5rem;
  padding-block: 1.6rem; border-top: 1px solid var(--line);
}
.timeline li > :first-child { grid-row: span 2; font: 900 2rem/1 var(--f-display); font-stretch: 125%; color: var(--silver); transition: color .3s; }
.timeline li:is(:hover, :last-child) > :first-child { color: var(--red); }
.timeline p { color: var(--muted); font-size: var(--fs-s); }

blockquote { margin: 0; padding-left: 1rem; border-left: 2px solid var(--silver-l); font-size: var(--fs-s); color: var(--muted); }

/* Fließtext: article direkt in einer section (Impressum, Datenschutz …) */
main > section > article { display: grid; gap: 1rem; max-width: 46rem; }
main > section > article > p { color: var(--fg); }
main > section > article h2 { margin-top: 1.5rem; font-size: var(--fs-l); line-height: 1.2; }
main > section > article h3 { font-size: var(--fs-m); font-family: var(--f-body); font-weight: 600; letter-spacing: 0; }
mark { padding-inline: .2em; background: #fff3b0; color: var(--ink); }    /* noch zu ergänzende Angaben */

/* Startseite: Emblem im Seiteneinstieg (Rasterplatte, Lorbeer, Stack) */
/* Emblem im Seiteneinstieg: Raster-Platte, Lorbeer-Karte, Stack-Karte */
main > header figure {
  --plate: right top / 82% calc(100% - 3rem) no-repeat;   /* Fläche der Rasterplatte */
  position: relative; min-height: 25rem;
  background:
    linear-gradient(var(--red), var(--red)) right top / 3.5rem 4px no-repeat,      /* rote Ecke */
    linear-gradient(var(--red), var(--red)) right top / 4px 3.5rem no-repeat,
    repeating-linear-gradient(var(--line) 0 1px, transparent 1px 2rem) var(--plate),        /* Raster */
    repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 2rem) var(--plate),
    linear-gradient(150deg, var(--paper), var(--silver-l)) var(--plate);              /* Platte */
}
@media (min-width: 641px) and (max-width: 1020px) { main > header figure { margin-left: 16%; } }
@media (min-width: 641px) { main > header figure { min-height: 30rem; } }
main > header figure > div {                   /* Lorbeer */
  position: absolute; left: 0; top: 12%; z-index: 1;
  width: min(17rem, 80%); padding: 1.5rem 1.25rem 1.25rem;
  display: grid; justify-items: center; text-align: center; gap: .2rem;
}
main > header figure > div svg { width: 11rem; color: var(--silver); grid-area: 1 / 1; filter: drop-shadow(4px 5px 5px rgb(0 0 0 / .2)); }
main > header figure > div p:first-of-type {
  grid-area: 1 / 1; align-self: center; padding-bottom: .6rem;
  display: grid; justify-items: center;
  font: 500 var(--fs-xs)/1.2 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
main > header figure > div strong { font: 900 3.4rem/1 var(--f-display); font-stretch: 125%; letter-spacing: 0; color: var(--ink); }
main > header figure > div p:last-child { font: 500 var(--fs-xs)/1.3 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--red); }

main > header figure > dl {                    /* Stack */
  position: absolute; right: 6%; bottom: 0; z-index: 1;
  width: min(19rem, 86%); padding: .6rem 1.25rem 1rem;
  grid-template-columns: 1fr auto;
  font: 500 var(--fs-s)/1.7 var(--f-mono);
}
main > header figure > dl > * { border: 0; padding-block: 0; }
main > header figure > dl dt { font: inherit; letter-spacing: 0; text-transform: none; color: var(--ink); }
main > header figure > dl dd { font: inherit; color: var(--muted); text-align: right; }
main > header figure > dl :is(dt, dd):nth-child(-n+2) {
  padding-block: .5rem; margin-bottom: .5rem; border-bottom: 1px solid var(--line);
  font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
main > header figure > dl dd:nth-child(2) { color: var(--red); }

@media (max-width: 640px) {
  main > header figure { --plate: right top / 90% calc(100% - 4rem) no-repeat; }
  main > header figure > div { top: 4%; }
  main > header figure > dl { right: 0; }
}

/* Hintergrund-Symbol: Logo oder Symbol groß, blass und angeschnitten.
   Gesteuert nur über CSS-Variablen im HTML, z. B.
     <article style="--symbol: url(/img/sym/mail.svg)">
   optional: --symbol-opacity (.1), --symbol-filter (grayscale), --symbol-turn (-10deg).
   ::before ist hier nötig, weil opacity/filter nur auf ein eigenes Element
   wirken und das Bild reine Dekoration ist */
[style*="--symbol"] { position: relative; isolation: isolate; overflow: hidden; }
[style*="--symbol"]::before {
  content: ""; position: absolute; z-index: -1;
  right: -8%; bottom: -12%;
  width: min(95%, 36rem); height: min(105%, 40rem);
  background: var(--symbol) right 25% bottom 20% / contain no-repeat;
  transform: rotate(var(--symbol-turn, -10deg));
  filter: var(--symbol-filter, grayscale(100%));
  opacity: var(--symbol-opacity, .1);
}
:is(#kontakt, #anschrift) { align-items: end; }
#kontakt h2 { font-size: clamp(2.6rem, 1.4rem + 4vw, 4.4rem); font-stretch: 125%; font-weight: 900; }

/* 15. Fußzeile ------------------------------------------------------------- */
footer {
  display: grid; grid-template-columns: 2fr 1.2fr 1.6fr 1fr; gap: 2.5rem 2rem;
  padding-block: 4rem 2.5rem;
  background: var(--ink); color: rgb(233 235 239 / .78); font-size: var(--fs-s);
}
footer > div { display: grid; gap: 1rem; align-content: start; }
footer > div p { max-width: 28ch; }
footer a[aria-label] { gap: .7rem; }
footer a[aria-label] img { width: 2.8rem; }
footer a[aria-label] span { font-size: 1.08rem; }
address { font-style: normal; }
footer strong { color: var(--white); }
footer dl { grid-template-columns: 3.6rem 1fr; gap: .3rem 0; }
footer dl > * { padding: 0; border: 0; }
footer dt { line-height: 1.9; letter-spacing: .08em; color: var(--silver); }
footer dd { font-size: inherit; }
footer nav { display: grid; gap: .3rem; align-content: start; }
footer a { text-decoration: none; transition: color .2s; }
footer a:hover { color: var(--white); text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: .25em; }
footer > p:last-child {
  grid-column: 1 / -1; max-width: none; padding-top: 2rem; border-top: 1px solid rgb(233 235 239 / .12);
  font: 500 var(--fs-xs)/1.5 var(--f-mono); color: var(--silver);
}

/* 16. Einblenden – main.js setzt data-reveal nur auf Elemente unterhalb des Bildschirms */
[data-reveal] { transform: translateY(1.5rem); }
main > section > *, .mosaic > article, .timeline > li { transition: transform .8s var(--ease); }

/* 17. Responsive (Spalten-Layouts sind mobile-first oben geregelt) ------- */
@media (max-width: 1020px) {
  main > section:not(.split) > hgroup { margin-left: 0; }
  footer { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  dl { grid-template-columns: 1fr; }
  dt { padding-bottom: 0; }
  dd { border-top: 0; padding-top: .2rem; }
  article dl { grid-template-columns: auto 1fr; }
  article dd { border-top: 1px solid var(--line); padding-top: .35rem; }
  .timeline li { grid-template-columns: 1fr; }
  .timeline li > :first-child { grid-row: auto; }
  footer { grid-template-columns: 1fr; }
}