@import url("../fonts/fonts.css");

/* ============================================================
   pandah interactive software
   Palette: Carbon Black · Grey Olive · Golden Chestnut
            Pale Oak · Eggshell
   ============================================================ */

:root {
  /* Markenfarben, unverändert */
  --carbon:   #242625;
  --olive:    #867f75;
  --chestnut: #de863d;
  --oak:      #e8d1b0;
  --eggshell: #ede9d8;

  /* Rollen — hell (Standard, wie das Logo) */
  --bg:          var(--eggshell);
  --bg-alt:      #e4dfca;
  --surface:     #f5f2e6;
  --ink:         var(--carbon);
  --ink-soft:    #4a4d4b;
  --muted:       var(--olive);
  --accent:      var(--chestnut);
  --accent-ink:  #8f4f16;
  --line:        rgba(36, 38, 37, .16);
  --line-strong: var(--carbon);
  --shadow:      rgba(36, 38, 37, .9);

  /* Wellenband - hier kippt die Seite auf die andere Haelfte der Palette.
     Die Rollen werden weiter unten auf .band umgehaengt, damit Karten,
     Badges und Buttons sich von selbst mit umstellen. */
  --ok:               #2f7d4f;
  --band-bg:          var(--carbon);
  --band-ink:         var(--eggshell);
  --band-ink-soft:    #cfcab6;
  --band-muted:       #9a938a;
  --band-surface:     #2e302f;
  --band-line:        rgba(237, 233, 216, .18);
  --band-line-strong: var(--eggshell);
  --band-shadow:      rgba(0, 0, 0, .75);
  --band-accent-ink:  #f0a45f;
  --band-ok:          #6fc48d;

  --radius:   14px;
  --radius-s: 8px;
  --wrap:     1080px;
  --step:     clamp(3.5rem, 8vw, 6.5rem);

  --font-display: "Archivo", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Source Sans 3", "Segoe UI", system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:          var(--carbon);
    --bg-alt:      #1c1e1d;
    --surface:     #2e302f;
    --ink:         var(--eggshell);
    --ink-soft:    #cfcab6;
    --muted:       #9a938a;
    --accent:      var(--chestnut);
    --accent-ink:  #f0a45f;
    --line:        rgba(237, 233, 216, .18);
    --line-strong: var(--eggshell);
    --shadow:      rgba(0, 0, 0, .75);
    --ok:               #6fc48d;
    --band-bg:          var(--eggshell);
    --band-ink:         var(--carbon);
    --band-ink-soft:    #4a4d4b;
    --band-muted:       var(--olive);
    --band-surface:     #f5f2e6;
    --band-line:        rgba(36, 38, 37, .16);
    --band-line-strong: var(--carbon);
    --band-shadow:      rgba(36, 38, 37, .9);
    --band-accent-ink:  #8f4f16;
    --band-ok:          #2f7d4f;
  }
}

:root[data-theme="dark"] {
  --bg:          var(--carbon);
  --bg-alt:      #1c1e1d;
  --surface:     #2e302f;
  --ink:         var(--eggshell);
  --ink-soft:    #cfcab6;
  --muted:       #9a938a;
  --accent:      var(--chestnut);
  --accent-ink:  #f0a45f;
  --line:        rgba(237, 233, 216, .18);
  --line-strong: var(--eggshell);
  --shadow:      rgba(0, 0, 0, .75);
  --ok:               #6fc48d;
  --band-bg:          var(--eggshell);
  --band-ink:         var(--carbon);
  --band-ink-soft:    #4a4d4b;
  --band-muted:       var(--olive);
  --band-surface:     #f5f2e6;
  --band-line:        rgba(36, 38, 37, .16);
  --band-line-strong: var(--carbon);
  --band-shadow:      rgba(36, 38, 37, .9);
  --band-accent-ink:  #8f4f16;
  --band-ok:          #2f7d4f;
}

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

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--accent-ink); text-decoration-thickness: 1.5px; text-underline-offset: .18em; }
a:hover { color: var(--ink); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.02em;
  margin: 0 0 .5em;
  text-wrap: balance;
  /* Deutsche Komposita wie "Datenschutzerklaerung" sprengen sonst schmale
     Viewports - Ueberschriften brechen von sich aus nicht um. */
  overflow-wrap: break-word;
  hyphens: auto;
}

h1 { font-size: clamp(1.95rem, 6vw, 4rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); }
h3 { font-size: clamp(1.15rem, 2.2vw, 1.4rem); }

p { margin: 0 0 1.1em; overflow-wrap: break-word; }

li, td, th, dd { overflow-wrap: break-word; }

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

.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: var(--bg);
  padding: .7rem 1.1rem; z-index: 100; border-radius: 0 0 var(--radius-s) 0;
}
.skip:focus { left: 0; top: 0; }

/* ---------- Layout ---------- */

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }

section { padding-block: var(--step); }
section + section { border-top: 1px solid var(--line); }

.eyebrow {
  font-family: var(--font-display);
  font-size: .75rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 .9rem;
  display: flex; align-items: center; gap: .7rem;
}
.eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.eyebrow-spaced { margin-top: 3.2rem; }

.lede { font-size: 1.2rem; color: var(--ink-soft); max-width: 62ch; }
.lede-lead { margin-bottom: 2.8rem; }

/* ---------- Kopf ---------- */

.site-head {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-head .wrap {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 72px;
}

.brand {
  display: flex; align-items: center; gap: .7rem;
  font-family: var(--font-display); font-weight: 800;
  font-size: 1.15rem; letter-spacing: .01em;
  color: var(--ink); text-decoration: none;
  margin-right: auto;
}
.brand img { width: 38px; height: 38px; border-radius: 9px; }
.brand b { color: var(--accent); font-weight: 800; }

.nav { display: flex; gap: 1.6rem; align-items: center; flex-wrap: wrap; }
.nav a {
  font-family: var(--font-display); font-weight: 600;
  font-size: .92rem; color: var(--ink-soft); text-decoration: none;
  padding-block: .3rem;
  border-bottom: 2px solid transparent;
}
.nav a:hover, .nav a[aria-current="page"] {
  color: var(--ink); border-bottom-color: var(--accent);
}

/* ---------- Hero ---------- */

.hero { padding-block: clamp(3rem, 7vw, 5.5rem) var(--step); }
.hero-grid {
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: 1.05fr .95fr; align-items: center;
}
.hero h1 { margin-bottom: .35em; }
.hero .lede { font-size: 1.28rem; }
.hero-art img { width: 100%; border-radius: var(--radius); }

.tagline {
  font-family: var(--font-display); font-weight: 700;
  font-size: .78rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--accent-ink);
  margin: 0 0 1.2rem;
}

/* ---------- Buttons ---------- */

.btn-row { display: flex; gap: .9rem; flex-wrap: wrap; margin-top: 1.8rem; }

.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-display); font-weight: 700; font-size: .95rem;
  padding: .72rem 1.35rem;
  border: 2px solid var(--line-strong);
  border-radius: var(--radius-s);
  text-decoration: none;
  background: var(--surface); color: var(--ink);
  box-shadow: 3px 3px 0 var(--shadow);
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover {
  color: var(--ink);
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--shadow);
}
.btn:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--shadow); }
.btn-primary { background: var(--accent); color: var(--carbon); }
.btn-primary:hover { color: var(--carbon); }

/* ---------- Projektkarten ---------- */

.cards { display: grid; gap: 1.6rem; grid-template-columns: repeat(2, 1fr); }

.card {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 2px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: 4px 4px 0 var(--shadow);
  overflow: hidden;
  text-decoration: none; color: inherit;
  transition: transform .14s ease, box-shadow .14s ease;
}
a.card:hover {
  color: inherit;
  transform: translate(-3px, -3px);
  box-shadow: 7px 7px 0 var(--shadow);
}
.card h3 { margin-bottom: .35rem; }
.card p { color: var(--ink-soft); font-size: .98rem; margin-bottom: 1.1rem; }
.card .more {
  margin-top: auto;
  font-family: var(--font-display); font-weight: 700; font-size: .88rem;
  color: var(--accent-ink); letter-spacing: .02em;
}

.badge {
  align-self: flex-start;
  font-family: var(--font-display); font-weight: 700;
  font-size: .68rem; letter-spacing: .13em; text-transform: uppercase;
  padding: .3rem .6rem; border-radius: 999px;
  border: 1.5px solid currentColor;
  margin-bottom: .9rem;
}
.badge-live { color: var(--ok); }
.badge-beta { color: var(--accent-ink); }
.badge-dev  { color: var(--muted); }

/* ---------- Profil ---------- */

.split {
  display: grid; gap: clamp(2rem, 5vw, 3.5rem);
  grid-template-columns: 280px 1fr; align-items: start;
}
/* Zwei Textspalten statt Bild + Text - das Verhaeltnis von .split waere
   dafuer zu schmal auf der linken Seite. */
.split--text { grid-template-columns: 1.35fr 1fr; }

.portrait {
  border: 2px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: 4px 4px 0 var(--shadow);
  background: var(--surface);
  padding: 1.2rem;
}

.facts { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: .75rem; }
.facts li { display: grid; grid-template-columns: 8.5rem 1fr; gap: 1rem; align-items: baseline; }
.facts b {
  font-family: var(--font-display); font-weight: 700;
  font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Fließtext / Rechtstexte ---------- */

.prose { max-width: 74ch; }
.prose h2 { margin-top: 2.4em; font-size: clamp(1.35rem, 2.6vw, 1.75rem); }
.prose h3 { margin-top: 1.9em; }
.prose h2:first-of-type { margin-top: 1.2em; }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1.2em; }
.prose li { margin-bottom: .45em; }
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 1.6em; font-size: .97rem; }
.prose th, .prose td {
  text-align: left; padding: .6rem .8rem;
  border-bottom: 1px solid var(--line); vertical-align: top;
}
.prose th {
  font-family: var(--font-display); font-weight: 700;
  font-size: .76rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
  border-bottom: 2px solid var(--line-strong);
}
.table-scroll { overflow-x: auto; }

.callout {
  border-left: 4px solid var(--accent);
  background: var(--surface);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  padding: 1.1rem 1.3rem;
  margin: 0 0 1.6em;
}
.callout > :last-child { margin-bottom: 0; }
.callout > :first-child { margin-top: 0; }
.callout-warn { border-left-color: #c0392b; }

.stamp {
  font-family: var(--font-display); font-weight: 700;
  font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 2.5rem;
}

.brand-inline { font-family: var(--font-display); font-weight: 700; }
.brand-inline b { color: var(--accent); font-weight: 700; }

.accent { color: var(--accent); }


/* ---------- Fuß ---------- */

.site-foot {
  background: var(--bg-alt);
  border-top: 2px solid var(--line-strong);
  padding-block: 3rem 2.2rem;
  margin-top: var(--step);
}
.foot-grid {
  display: grid; gap: 2rem;
  grid-template-columns: 1.4fr 1fr 1fr;
  margin-bottom: 2.4rem;
}
.foot-grid h4 {
  font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); font-weight: 700; margin-bottom: .9rem;
}
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.foot-grid a { color: var(--ink-soft); text-decoration: none; font-size: .95rem; }
.foot-grid a:hover { color: var(--accent-ink); text-decoration: underline; }
.foot-brand img { width: 46px; height: 46px; border-radius: 11px; margin-bottom: .8rem; }
.foot-brand p { color: var(--muted); font-size: .93rem; max-width: 34ch; }

.foot-base--bare { border-top: 0 !important; padding-top: 0 !important; }

.foot-base {
  border-top: 1px solid var(--line);
  padding-top: 1.4rem;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  color: var(--muted); font-size: .88rem;
}


.card-body {
  display: flex; flex-direction: column; flex: 1;
  padding: 1.6rem;
}

/* Bildflaeche. Solange kein Screenshot da ist, steht hier ein Muster aus
   der Palette - Kastanienbogen ueber Eiche, diagonal schraffiert. Kommt
   ein <img> hinein, deckt es das Muster vollstaendig ab. */
.card-media {
  display: block; position: relative; overflow: hidden;
  aspect-ratio: 16 / 10;
  border-bottom: 2px solid var(--line-strong);
  background-color: var(--oak);
  background-image:
    radial-gradient(circle at 50% 118%, var(--chestnut) 0 40%, transparent 40.5%),
    repeating-linear-gradient(135deg, rgba(36, 38, 37, .13) 0 5px, transparent 5px 11px);
}
.card-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .35s ease;
}
a.card:hover .card-media img { transform: scale(1.07); }

/* In der hohen linken Karte ist die Telefon-Aufnahme vollstaendig zu
   sehen, auf die verfuegbare Flaeche skaliert.

   Das Bild steht absolut, und zwar aus zwei Gruenden. Erstens hat die
   Bildflaeche als Flex-Element mit flex: 1 keine definite Hoehe -
   max-height in Prozent liefe dort ins Leere, das Bild bemaesse sich an
   der Breite und wuerde 1050 px hoch. Zweitens spannt die Karte ueber
   beide Zeilen: im Fluss wuerde das hohe Bild die Zeilenhoehen selbst
   bestimmen und die rechte Spalte mit auseinanderziehen. Ausserhalb des
   Flusses zaehlt nur noch der Text zur Kartenhoehe, und die Hoehe kommt
   damit aus der rechten Spalte. */
.card-media--portrait { position: relative; overflow: hidden; }
.card-media--portrait img {
  position: absolute; top: 0; left: 0;
  width: 100%; height: auto;
  max-width: none; max-height: none;
  border: 0; border-radius: 0;
}

.card-media--park {
  background-image:
    radial-gradient(circle at 24% 112%, var(--chestnut) 0 34%, transparent 34.5%),
    repeating-linear-gradient(105deg, rgba(36, 38, 37, .13) 0 5px, transparent 5px 11px);
}
.card-media--space {
  background-color: var(--carbon);
  background-image:
    radial-gradient(circle at 74% 26%, var(--chestnut) 0 15%, transparent 15.5%),
    repeating-linear-gradient(160deg, rgba(237, 233, 216, .10) 0 4px, transparent 4px 13px);
}

/* Aufmacher: ueber beide Spalten, Bild neben dem Text */
/* TeeTracker steht links ueber beide Zeilen, Park-Radar und Space Colony
   stapeln sich rechts. Die hohe linke Spalte nimmt das Hochformat der
   Telefon-Aufnahme auf, ohne dass etwas beschnitten werden muss. */
.card--featured { grid-column: 1; grid-row: 1 / span 2; }

/* Die Bildflaeche nimmt die Resthoehe der Karte. min-height: 0 erlaubt ihr,
   unter die Groesse ihres Inhalts zu schrumpfen - sonst wuerde die hohe
   Aufnahme die Karte auseinanderziehen, statt sich einzupassen. */
.card--featured .card-media { flex: 1; min-height: 0; aspect-ratio: auto; }
/* Der Text bemisst sich am Inhalt, die Bildflaeche bekommt den Rest.
   Sonst teilen sich beide die Hoehe haelftig - .card-body hat selbst
   flex: 1, damit in den normalen Karten "Mehr dazu" unten sitzt. */
.card--featured .card-body { flex: 0 0 auto; }
.card--featured h3 { font-size: clamp(1.3rem, 2.6vw, 1.7rem); }



/* ---------- Werdegang ---------- */

/* Vier Stationen nebeneinander statt untereinander. Vorher hing das an
   einem style="display:flex" - Inline-Styles verwirft die CSP. */
.cv {
  list-style: none; margin: 2rem 0 0; padding: 0;
  display: grid; gap: 1.2rem;
  grid-template-columns: repeat(4, 1fr);
}
.cv li {
  background: var(--surface);
  border: 2px solid var(--line-strong);
  border-radius: var(--radius-s);
  box-shadow: 3px 3px 0 var(--shadow);
  padding: 1.1rem 1.2rem;
  display: flex; flex-direction: column; gap: .2rem;
}
.cv-zeit {
  font-family: var(--font-display); font-weight: 700;
  font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent-ink);
}
.cv-rolle { font-family: var(--font-display); font-weight: 800; font-size: 1.02rem; line-height: 1.25; }
.cv-ort   { color: var(--ink-soft); font-size: .9rem; margin-top: auto; padding-top: .4rem; }

/* Der Einzeiler im Ton einer Eingabeaufforderung. Die Schrift kommt aus
   dem System - keine zusaetzliche Datei, kein fremder Host. */
.tldr {
  display: inline-block; margin: 2rem 0 0;
  font-family: ui-monospace, "Cascadia Mono", Consolas, "DejaVu Sans Mono", monospace;
  font-weight: 700; font-size: 1rem;
  color: var(--accent-ink);
  background: var(--surface);
  border: 2px solid var(--line-strong);
  border-radius: var(--radius-s);
  box-shadow: 3px 3px 0 var(--shadow);
  padding: .75rem 1.1rem;
}
.tldr::after { content: "_"; animation: tldr-blink 1.1s step-end infinite; }
@keyframes tldr-blink { 50% { opacity: 0; } }

/* ---------- Verweisliste mit Beschreibung ---------- */

.linklist { list-style: none; margin: 1.8rem 0 0; padding: 0; display: grid; gap: 0; }
.linklist li {
  display: grid; grid-template-columns: 11rem 1fr; gap: 1.2rem;
  align-items: baseline;
  border-top: 1px solid var(--line);
  padding: .95rem 0;
}
.linklist li:last-child { border-bottom: 1px solid var(--line); }
.linklist a {
  font-family: var(--font-display); font-weight: 800; font-size: 1.05rem;
  text-decoration: none;
}
.linklist a:hover { text-decoration: underline; }
.linklist span { color: var(--ink-soft); }

/* ---------- Projekt-Menue in der Navigation ---------- */

/* Ohne JavaScript - die CSP setzt script-src 'none'. :hover fuer die Maus,
   :focus-within fuer die Tastatur. Solange das Menue visibility:hidden ist,
   sind seine Verweise nicht fokussierbar; sobald der Projekte-Verweis den
   Fokus hat, klappt es auf und man tabbt hinein. */
.nav-item { position: relative; display: inline-flex; align-items: center; }

/* Unsichtbare Bruecke, damit der Zeiger auf dem Weg nach unten nicht
   zwischen Verweis und Menue durchfaellt */
.nav-item::after {
  content: ""; position: absolute;
  top: 100%; left: -.7rem; right: -.7rem; height: 1.2rem;
}

.nav-menu {
  position: absolute; top: calc(100% + 1.1rem); left: 50%;
  transform: translateX(-50%);
  display: grid; gap: .12rem; min-width: 12.5rem;
  padding: .45rem;
  background: var(--surface);
  border: 2px solid var(--line-strong);
  border-radius: var(--radius-s);
  box-shadow: 4px 4px 0 var(--shadow);
  opacity: 0; visibility: hidden;
  transition: opacity .12s ease;
}
.nav-item:hover .nav-menu,
.nav-item:focus-within .nav-menu { opacity: 1; visibility: visible; }

.nav-menu a {
  padding: .45rem .7rem; border-radius: 5px;
  font-size: .92rem; color: var(--ink-soft);
  border-bottom: 0;
}
.nav-menu a:hover { background: var(--bg-alt); color: var(--accent-ink); }

/* Ohne Zeigegeraet gibt es kein Hover - dann fuehrt "Projekte" einfach zum
   Abschnitt, und der Fuss listet die Projekte ohnehin auf. */
@media (hover: none) { .nav-menu { display: none; } }

/* ---------- Bildstrecken auf den Projektseiten ---------- */

.shots { display: grid; gap: 1.6rem; margin: 2.2rem 0 0; }
.shots-phones { grid-template-columns: repeat(4, 1fr); gap: 1.3rem; }
.shots-split  { grid-template-columns: repeat(2, 1fr); }
.shot--full   { grid-column: 1 / -1; }
/* Eine Aufnahme in abweichendem Format steht mittig und schmaler, statt
   sich neben einer Querformat-Aufnahme zu verkanten. */
.shot--narrow { max-width: 540px; width: 100%; justify-self: center; }

.shot {
  margin: 0; overflow: hidden;
  background: var(--surface);
  border: 2px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: 4px 4px 0 var(--shadow);
}
.shot img { width: 100%; display: block; }
.shot figcaption {
  padding: .7rem .9rem;
  border-top: 2px solid var(--line-strong);
  font-family: var(--font-display); font-weight: 700;
  font-size: .76rem; letter-spacing: .06em;
  color: var(--muted); line-height: 1.45;
}

/* ---------- Wellen und Baender ---------- */

/* Der Trenner liegt als eigenes Element zwischen zwei Abschnitten: seine
   Flaeche traegt die eine Farbe, der Pfad die andere. Dadurch reicht ein
   einziger Pfad fuer beide Richtungen - einmal hinein, einmal hinaus. */
.wave-divider { line-height: 0; }
.wave-divider svg { display: block; width: 100%; height: clamp(34px, 5.5vw, 78px); }

.wave-divider--into      { background: var(--bg); }
.wave-divider--into path { fill: var(--band-bg); }
.wave-divider--out       { background: var(--band-bg); }
.wave-divider--out path  { fill: var(--bg); }

/* Im Band zeigen die Rollen-Variablen auf die andere Haelfte der Palette.
   Alles darin - Karten, Badges, Buttons, Linien - stellt sich dadurch von
   selbst um, ohne je eine eigene Regel dafuer zu brauchen. */
.band {
  background: var(--band-bg);
  --bg:          var(--band-bg);
  --ink:         var(--band-ink);
  --ink-soft:    var(--band-ink-soft);
  --muted:       var(--band-muted);
  --surface:     var(--band-surface);
  --line:        var(--band-line);
  --line-strong: var(--band-line-strong);
  --shadow:      var(--band-shadow);
  --accent-ink:  var(--band-accent-ink);
  --ok:          var(--band-ok);
  color: var(--ink);
}
/* Die Welle uebernimmt die Trennung - die Haarlinie waere doppelt gemoppelt */
.wave-divider + section { border-top: 0; }

/* ---------- Portrait als Verweis ---------- */

a.portrait {
  display: block; text-decoration: none; color: inherit;
  transition: transform .14s ease, box-shadow .14s ease;
}
a.portrait:hover {
  color: inherit;
  transform: translate(-3px, -3px);
  box-shadow: 7px 7px 0 var(--shadow);
}
.portrait-cta {
  display: block; margin-top: .9rem;
  font-family: var(--font-display); font-weight: 700; font-size: .88rem;
  color: var(--accent-ink); letter-spacing: .02em;
}

/* ---------- Responsiv ---------- */

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-art { order: -1; max-width: 480px; }
  .cards { grid-template-columns: 1fr; }
  .shots-phones { grid-template-columns: repeat(2, 1fr); }
  .shots-split  { grid-template-columns: 1fr; }
  .card--featured { grid-column: auto; grid-row: auto; }
  /* Einspaltig faellt die Resthoehe weg, aus der sich die Bildflaeche
     sonst ergibt. Ohne eigenes Seitenverhaeltnis fiele sie auf 0, weil
     das Bild absolut steht und nichts mehr aufspannt. */
  .card--featured .card-media { flex: none; aspect-ratio: 3 / 4; }
  .split { grid-template-columns: 1fr; }
  .portrait { max-width: 300px; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .cv { grid-template-columns: repeat(2, 1fr); }
  .foot-brand { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .site-head .wrap { min-height: 64px; flex-wrap: wrap; padding-block: .6rem; }
  .nav { gap: 1.1rem; font-size: .9rem; }
  .facts li { grid-template-columns: 1fr; gap: .1rem; }
  .cv { grid-template-columns: 1fr; }
  .linklist li { grid-template-columns: 1fr; gap: .2rem; }
  .foot-grid { grid-template-columns: 1fr; }
  .shots-phones { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
  a.card:hover .card-media img { transform: none; }
  .tldr::after { animation: none; }
}

@media print {
  .site-head, .site-foot, .btn-row, .wave-divider { display: none; }
  body { background: #fff; color: #000; }
}