/* ==========================================================================
   Kilo Moana — Design-System „Deep Water"
   Dunkles Marineblau, ruhige Tiefe, Bernstein als einziger Akzent.
   Soll wie ein Produktstudio lesen, nicht wie eine Agentur-Vorlage.

   Uebernommen aus dem WordPress-Theme und dabei ueberarbeitet. Die groesseren
   Aenderungen sind an Ort und Stelle begruendet; hier die Liste:
     · zwei Blaupaletten wurden eine (die alte hatte theme.json-Farben UND
       davon abweichende „logo-matching" Farben in custom.css)
     · KEIN !important mehr — das alte Theme kaempfte auf 40 Stellen gegen
       generiertes Block-Markup, das es jetzt nicht mehr gibt
     · Kontrast auf dunklem Grund repariert (--ink-mute statt neutral-mid)
     · Schaltflaechen tragen dunklen Text auf Bernstein statt weissem
     · Bewegung respektiert prefers-reduced-motion durchgaengig
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design-Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Tiefenskala — von der Oberflaeche in die Tiefe.
     Eine Skala, aus der alle dunklen Flaechen kommen. Das alte Theme mischte
     #091e3a (Footer), #0a3d78 (Kopf) und #060a16 (Hero-Verlauf), die aus drei
     verschiedenen Absichten stammten und nebeneinander schmutzig wirkten. */
  --deep-950: #050d1a;
  --deep-900: #071426;
  --deep-850: #091b31;
  --deep-800: #0c2440;
  --deep-700: #103257;
  --deep-600: #14538f;

  /* Markenblau — die Toene aus dem Logo */
  --brand-500: #1a68af;
  --brand-400: #2878c0;
  --brand-300: #5aa0da;

  /* Bernstein — der einzige Akzent. Sparsam: er markiert genau das, worauf
     geklickt werden soll. Sobald er auch Ueberschriften, Linien und Symbole
     faerbt, markiert er nichts mehr. */
  --amber: #ff8f00;
  --amber-400: #ffa726;
  --amber-dim: rgba(255, 143, 0, 0.16);

  /* Helle Flaechen */
  --foam: #f7fafd;
  --foam-2: #eaf1f8;
  --white: #ffffff;

  /* Schrift auf HELLEM Grund */
  --ink: #0b1826;
  --ink-2: #26394f;
  --body: #41556e;
  --mute: #63788f;

  /* Schrift auf DUNKLEM Grund.
     --ink-mute ersetzt das alte `neutral-mid` (#4a5568), das auf #091e3a auf
     ein Kontrastverhaeltnis von etwa 2:1 kam — unter jeder Lesbarkeitsgrenze.
     Die Werte hier liegen alle ueber 4.5:1 auf --deep-900. */
  --on-deep: #e9f1fa;
  --on-deep-2: #c3d4e6;
  --ink-mute: #9db2c9;

  /* Linien */
  --line: #dfe8f1;
  --line-2: #cfdce9;
  --line-deep: rgba(233, 241, 250, 0.12);
  --line-deep-2: rgba(233, 241, 250, 0.2);

  /* Typografie */
  --f-display: 'Instrument Sans', 'Segoe UI', system-ui, sans-serif;
  --f-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-eyebrow: 0.775rem;
  --fs-body: 1.0625rem;
  --fs-lead: clamp(1.1rem, 1rem + 0.45vw, 1.3rem);
  --fs-h4: clamp(1.05rem, 0.98rem + 0.32vw, 1.2rem);
  --fs-h3: clamp(1.22rem, 1.08rem + 0.68vw, 1.55rem);
  --fs-h2: clamp(1.85rem, 1.4rem + 1.95vw, 2.9rem);
  --fs-h1: clamp(2.3rem, 1.7rem + 2.7vw, 3.9rem);

  /* Layout */
  --container: 1200px;
  --container-narrow: 720px;
  --gutter: clamp(1.15rem, 0.7rem + 2.2vw, 2.5rem);
  --section-y: clamp(4rem, 3rem + 5vw, 7rem);
  /* Die Kopfhoehe richtet sich nach dem Logo, nicht umgekehrt. Das Zeichen
     ist eine Schreibschrift mit Schiff im Seitenverhaeltnis 600:327 — bei
     140 px Breite also 76 px hoch. Ein 72-px-Kopf haette es abgeschnitten
     oder sich lautlos selbst aufgeblaeht, und dann stimmt scroll-padding-top
     nicht mehr und jeder Ankersprung landet zu hoch. */
  --logo-w: 140px;
  --header-h: 92px;

  /* Radien */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-pill: 999px;

  /* Schatten — kuehl, nie leuchtend */
  --sh-sm: 0 2px 8px -2px rgba(11, 24, 38, 0.1);
  --sh-md: 0 14px 34px -18px rgba(11, 24, 38, 0.3);
  --sh-lg: 0 34px 70px -34px rgba(11, 24, 38, 0.45);

  /* Bewegung */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 0.16s;
  --t: 0.3s;
}

/* --------------------------------------------------------------------------
   2. Reset & Grundlagen
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Ankerspruenge (auch aus den alten /portfolio-category/-Redirects) enden
     sonst unter dem klebenden Kopf — die Ueberschrift des Ziels ist dann
     unsichtbar, und der Besucher glaubt, der Link sei kaputt. */
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
}

body {
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--body);
  background: var(--deep-950);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern', 'liga', 'calt';
  overflow-x: hidden;
}

img, svg, video, picture { display: block; max-width: 100%; }
img, video { height: auto; }

a { color: inherit; }

button { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--f-display);
  /* 600, nicht 800: Instrument Sans traegt bei 600 genug, und alles darueber
     drueckt die Zeile wieder zusammen - genau der Eindruck, den die alte
     Schrift hinterlassen hat. Die engere Laufweite kommt dazu, weil grosse
     Grade sonst auseinanderfallen. */
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.022em;
  color: var(--ink);
  text-wrap: balance;
}

p { text-wrap: pretty; }

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

::selection {
  background: var(--brand-400);
  color: var(--white);
}

.u-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 200;
  padding: 0.7rem 1.3rem;
  background: var(--amber);
  color: var(--deep-900);
  font-weight: 700;
  font-size: 0.9rem;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  text-decoration: none;
  transition: top var(--t-fast) var(--ease);
}
.skip-link:focus { top: 0; }

/* Icons erben Farbe und Groesse vom Text — deshalb `em`, nicht `px`.
   Ein Symbol neben einer kleinen Schaltflaeche wird so automatisch kleiner. */
.i {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  fill: none;
  stroke: currentColor;
}

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--section-y); }

.section--light { background: var(--foam); color: var(--body); }
.section--deep { background: var(--deep-900); color: var(--on-deep-2); }
.section--accentless { background: var(--deep-850); color: var(--on-deep-2); }

.section--deep h2,
.section--deep h3,
.section--accentless h2,
.section--accentless h3 { color: var(--on-deep); }

.section__head { margin-bottom: clamp(2.25rem, 1.5rem + 3vw, 3.5rem); }

.section__head--split {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 1.5rem;
}

.section__title { font-size: var(--fs-h2); }
.section__title--sm { font-size: var(--fs-h3); }

.section__lead {
  margin-top: 0.9rem;
  font-size: var(--fs-lead);
  max-width: 48ch;
  color: var(--mute);
}
.section--deep .section__lead,
.section--accentless .section__lead { color: var(--ink-mute); }

.section__title em {
  font-style: normal;
  color: var(--brand-500);
}
.section--deep .section__title em,
.section--accentless .section__title em { color: var(--brand-300); }

.eyebrow {
  display: inline-block;
  font-family: var(--f-display);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-500);
}
/* Die dunkle Fassung ist heller, nicht nur „auch weiss": auf --deep-900
   braucht dieselbe Rolle einen anderen Ton, sonst verschwindet sie. */
.eyebrow--dark { color: var(--brand-300); }

.grid {
  display: grid;
  gap: clamp(1.1rem, 0.8rem + 1.1vw, 1.75rem);
}
.grid--cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }

.grid__empty {
  padding-block: 3rem;
  text-align: center;
  color: var(--mute);
}

/* --------------------------------------------------------------------------
   4. Fliesstext
   -------------------------------------------------------------------------- */
.prose-wrap { background: var(--foam); padding-block: var(--section-y); }
.prose-wrap--tight { padding-block: clamp(2rem, 1.5rem + 2vw, 3rem); }

.prose { font-size: 1.075rem; }

.prose > * + * { margin-top: 1.15rem; }

.prose h2 {
  margin-top: 2.75rem;
  font-size: var(--fs-h3);
}
.prose h3 {
  margin-top: 2rem;
  font-size: var(--fs-h4);
  font-weight: 700;
}
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }

.prose a {
  color: var(--brand-600);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--t-fast) var(--ease);
}
.prose a:hover { color: var(--amber); }

.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li + li { margin-top: 0.45rem; }
.prose ul { list-style: none; padding-left: 0; }
.prose ul li {
  position: relative;
  padding-left: 1.5rem;
}
/* Ein eigener Aufzaehlungspunkt statt des Browser-Punkts: er sitzt auf der
   Grundlinie der ersten Zeile und traegt die Markenfarbe. */
.prose ul li::before {
  content: '';
  position: absolute;
  left: 0.15rem;
  top: 0.68em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-400);
}
.prose ol { list-style: decimal; }

.prose strong { color: var(--ink); font-weight: 700; }

.prose blockquote {
  padding-left: 1.25rem;
  border-left: 3px solid var(--amber);
  color: var(--ink-2);
  font-size: 1.1rem;
}

.prose hr {
  margin-block: 2.5rem;
  border: 0;
  height: 1px;
  background: var(--line);
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.prose th, .prose td {
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.prose th { color: var(--ink); font-weight: 700; }

.prose--dark { color: var(--on-deep-2); }
.prose--dark strong { color: var(--on-deep); }
.prose--dark a { color: var(--brand-300); }
.prose--dark a:hover { color: var(--amber-400); }
.prose--dark ul li::before { background: var(--brand-300); }

.prose-cta { margin-top: 2.5rem; }

/* --------------------------------------------------------------------------
   5. Schaltflaechen
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.82em 1.5em;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-family: var(--f-display);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease),
              color var(--t) var(--ease), transform var(--t-fast) var(--ease);
}

.btn .i { transition: transform var(--t) var(--ease-out); }
.btn:hover .i { transform: translateX(3px); }

/* Dunkler Text auf Bernstein, nicht weisser.
   Weiss auf #ff8f00 kommt auf etwa 2.6:1 und faellt damit durch jede
   Kontrastpruefung — auf der wichtigsten Schaltflaeche der Seite. Der dunkle
   Text erreicht rund 7.6:1 und sieht zudem gesetzter aus. */
.btn--primary {
  background: var(--amber);
  color: var(--deep-900);
}
.btn--primary:hover {
  background: var(--amber-400);
  transform: translateY(-1px);
}

.btn--ghost {
  border-color: var(--line-2);
  color: var(--ink);
  background: transparent;
}
.btn--ghost:hover {
  border-color: var(--brand-500);
  color: var(--brand-600);
}

/* Auf dunklem Grund dreht sich die Randfarbe um. */
.section--deep .btn--ghost,
.section--accentless .btn--ghost,
.hero .btn--ghost,
.page-head--deep .btn--ghost,
.error .btn--ghost {
  border-color: var(--line-deep-2);
  color: var(--on-deep);
}
.section--deep .btn--ghost:hover,
.section--accentless .btn--ghost:hover,
.hero .btn--ghost:hover,
.page-head--deep .btn--ghost:hover,
.error .btn--ghost:hover {
  border-color: var(--brand-300);
  color: var(--white);
  background: rgba(90, 160, 218, 0.1);
}

.btn--sm { padding: 0.6em 1.1em; font-size: 0.875rem; }

/* --------------------------------------------------------------------------
   6. Kopfbereich
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(7, 20, 38, 0.82);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid var(--line-deep);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: var(--header-h);
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.site-header__brand { display: flex; align-items: center; }
.site-header__brand img { width: var(--logo-w); height: auto; }

.site-header__toggle {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-right: -0.5rem;
  background: none;
  border: 0;
  color: var(--on-deep);
  cursor: pointer;
}
/* Beide Symbole liegen uebereinander; sichtbar ist das zum Zustand passende.
   Kein Austausch per JavaScript — der Zustand steht ohnehin schon in
   aria-expanded, und zwei Wahrheiten laufen auseinander. */
.site-header__toggle .i { grid-area: 1 / 1; width: 24px; height: 24px; }
.site-header__toggle .i--close,
.site-header__toggle[aria-expanded='true'] .i--menu { display: none; }
.site-header__toggle[aria-expanded='true'] .i--close { display: block; }

.site-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 0.5rem + 1.6vw, 2.25rem);
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-nav__link {
  position: relative;
  display: inline-block;
  padding-block: 0.35rem;
  font-family: var(--f-display);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--on-deep-2);
  text-decoration: none;
  transition: color var(--t) var(--ease);
}
.site-nav__link:hover { color: var(--white); }

.site-nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  border-radius: 1px;
  background: var(--amber);
  transition: width var(--t) var(--ease-out);
}
.site-nav__link:hover::after { width: 100%; }

/* Die aktive Seite ist dauerhaft markiert — nicht nur beim Ueberfahren.
   Das fehlte der alten Fassung ganz: man sah nie, wo man war. */
.site-nav__link.is-active { color: var(--white); }
.site-nav__link.is-active::after { width: 100%; background: var(--brand-300); }

/* --- Ab hier: gross genug fuer eine Reihe -------------------------------- */
@media (min-width: 62rem) {
  .site-header__toggle { display: none; }
  .site-nav {
    display: flex;
    align-items: center;
    gap: 2rem;
  }
}

/* --- Kleiner: Klapp-Panel ------------------------------------------------- */
@media (max-width: 61.999rem) {
  /* Auf dem Telefon klebt der Kopf ueber jedem Bildschirm — 92 px davon sind
     zu viel. Kleineres Logo, niedrigerer Kopf, und scroll-padding-top zieht
     ueber die Variable automatisch nach. */
  :root { --logo-w: 112px; --header-h: 76px; }

  .site-header__inner { flex-wrap: wrap; }

  .site-nav {
    order: 3;
    width: 100%;
    display: grid;
    gap: 0.25rem;
    padding-block: 0.5rem 1.25rem;
    border-top: 1px solid var(--line-deep);
  }
  .site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav__link {
    display: block;
    padding: 0.85rem 0;
    font-size: 1.05rem;
    border-bottom: 1px solid var(--line-deep);
  }
  .site-nav__link::after { display: none; }
  .site-nav__cta { margin-top: 1rem; }
  .site-nav__cta .btn { width: 100%; justify-content: center; }

  /* Zugeklappt NUR, wenn JavaScript laeuft. Ohne `.js` bleibt die Navigation
     offen stehen — ein Menue, das sich ohne Script nicht oeffnen laesst, ist
     eine Sackgasse. */
  .js .site-nav { display: none; }
  .js .site-header__inner:has(.site-header__toggle[aria-expanded='true']) .site-nav { display: grid; }
}

/* --------------------------------------------------------------------------
   7. Aufmacher
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  background: linear-gradient(170deg, var(--deep-900) 0%, var(--deep-800) 45%, var(--deep-850) 100%);
  color: var(--on-deep-2);
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

/* Der Verlauf macht aus dem Foto einen Hintergrund: er bindet es an die
   Markenfarbe, senkt den Kontrast unter der Schrift und laesst den Abschnitt
   nach unten in die naechste Sektion auslaufen. Ohne ihn konkurriert das
   Motiv mit der Ueberschrift, und die Ueberschrift verliert. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(5, 13, 26, 0.72) 0%, rgba(7, 20, 38, 0.66) 45%, rgba(7, 20, 38, 0.95) 100%),
    linear-gradient(105deg, rgba(20, 83, 143, 0.4) 0%, rgba(5, 13, 26, 0) 60%);
}

.hero__inner {
  position: relative;
  padding-block: clamp(4.5rem, 3rem + 9vw, 8.5rem) clamp(3.5rem, 2.5rem + 6vw, 6.5rem);
  max-width: 62rem;
}

.hero__title {
  margin-top: 1.1rem;
  font-size: var(--fs-h1);
  color: var(--white);
  max-width: 17ch;
}
.hero__title em {
  font-style: normal;
  color: var(--brand-300);
}

.hero__lead {
  margin-top: 1.35rem;
  max-width: 52ch;
  font-size: var(--fs-lead);
  color: var(--on-deep-2);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2.25rem;
}

.hero__proof {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2rem;
  margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--line-deep);
  list-style: none;
}
.hero__proof li {
  font-family: var(--f-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--on-deep);
}
.hero__proof a {
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--t) var(--ease), color var(--t) var(--ease);
}
.hero__proof a:hover { color: var(--amber-400); border-bottom-color: currentColor; }
.hero__proof span {
  display: block;
  font-family: var(--f-body);
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--ink-mute);
}

/* --------------------------------------------------------------------------
   8. Disziplinen
   -------------------------------------------------------------------------- */
.disciplines {
  display: grid;
  gap: clamp(1.1rem, 0.8rem + 1.1vw, 1.75rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  list-style: none;
  padding: 0;
}

.discipline {
  position: relative;
  padding: clamp(1.5rem, 1.2rem + 1vw, 2.1rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease),
              transform var(--t) var(--ease);
}
.discipline:hover {
  border-color: var(--line-2);
  box-shadow: var(--sh-md);
  transform: translateY(-3px);
}

.discipline__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--r-md);
  background: linear-gradient(140deg, rgba(20, 83, 143, 0.1), rgba(40, 120, 192, 0.06));
  color: var(--brand-600);
}
.discipline__icon .i { width: 1.5rem; height: 1.5rem; }

.discipline__title {
  margin-top: 1.15rem;
  font-size: var(--fs-h4);
  font-weight: 700;
}

.discipline__text {
  margin-top: 0.6rem;
  font-size: 0.97rem;
  color: var(--body);
}

.discipline__proof {
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
  font-weight: 500;
}
.discipline__proof a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--brand-600);
  text-decoration: none;
}
.discipline__proof a:hover { color: var(--amber); }
.discipline__proof .i { transition: transform var(--t) var(--ease-out); }
.discipline__proof a:hover .i { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   9. Ueber uns
   -------------------------------------------------------------------------- */
.about {
  display: grid;
  gap: clamp(2.5rem, 2rem + 3vw, 4.5rem);
}
@media (min-width: 56rem) {
  .about { grid-template-columns: 1.15fr 0.85fr; align-items: start; }
}

.about__cta { margin-top: 2rem; }

.about__pillars {
  display: grid;
  gap: 1.25rem;
  list-style: none;
  padding: 0;
}
.about__pillars li {
  padding: 1.35rem 1.4rem;
  background: rgba(233, 241, 250, 0.04);
  border: 1px solid var(--line-deep);
  border-radius: var(--r-md);
}
.about__pillars h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--on-deep);
}
.about__pillars p {
  margin-top: 0.4rem;
  font-size: 0.93rem;
  color: var(--ink-mute);
}

/* --------------------------------------------------------------------------
   10. Projektkarten
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease),
              transform var(--t) var(--ease);
}
.card:hover {
  border-color: var(--line-2);
  box-shadow: var(--sh-md);
  transform: translateY(-3px);
}

.card__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--deep-850);
}
.card__media img,
.card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}
.card:hover .card__media img { transform: scale(1.04); }

.card__img--empty {
  display: grid;
  place-items: center;
  color: var(--brand-300);
  opacity: 0.35;
}
.card__img--empty .i { width: 2.5rem; height: 2.5rem; }

.card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.35rem 1.4rem 1.5rem;
}

.card__eyebrow {
  font-family: var(--f-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-600);
}

.card__title {
  margin-top: 0.45rem;
  font-size: 1.16rem;
  font-weight: 700;
}

.card__link { text-decoration: none; }
/* Die ganze Karte ist klickbar, aber nur der Titel ist ein Link — ein
   zweiter Link auf dem Bild wuerde von Screenreadern doppelt vorgelesen. */
.card__link::after {
  content: '';
  position: absolute;
  inset: 0;
}
.card__link:hover { color: var(--brand-600); }

.card__text {
  margin-top: 0.6rem;
  font-size: 0.93rem;
  color: var(--body);
}

.card__meta {
  margin-top: auto;
  padding-top: 1rem;
  font-size: 0.82rem;
  color: var(--mute);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   11. Filter
   -------------------------------------------------------------------------- */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
}

.filters__btn {
  padding: 0.5em 1.15em;
  background: transparent;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  font-family: var(--f-display);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--mute);
  cursor: pointer;
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease),
              color var(--t) var(--ease);
}
.filters__btn:hover { border-color: var(--brand-500); color: var(--brand-600); }
.filters__btn.is-active {
  background: var(--deep-800);
  border-color: var(--deep-800);
  color: var(--white);
}

.card[hidden] { display: none; }

/* --------------------------------------------------------------------------
   12. Seitenkopf, Brotkrumen, Projektangaben
   -------------------------------------------------------------------------- */
.page-head {
  padding-block: clamp(3rem, 2.2rem + 4vw, 5rem) clamp(2rem, 1.5rem + 2.5vw, 3rem);
  background: linear-gradient(170deg, var(--deep-900), var(--deep-850));
  color: var(--on-deep-2);
}
.page-head--deep { padding-bottom: clamp(2.5rem, 2rem + 3vw, 4rem); }

.page-head__title {
  margin-top: 0.9rem;
  font-size: var(--fs-h1);
  color: var(--white);
}
.page-head .eyebrow + .page-head__title,
.page-head .crumbs + .page-head__title { margin-top: 0.9rem; }

.page-head__lead {
  margin-top: 1.1rem;
  max-width: 55ch;
  font-size: var(--fs-lead);
  color: var(--on-deep-2);
}

.page-head__updated {
  margin-top: 1.25rem;
  font-size: 0.86rem;
  color: var(--ink-mute);
}

.crumbs {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--ink-mute);
}
.crumbs a {
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}
.crumbs a:hover { color: var(--on-deep); }
.crumbs .i { width: 0.95em; height: 0.95em; opacity: 0.55; }

.project__cover {
  background: linear-gradient(180deg, var(--deep-850) 0%, var(--deep-850) 50%, var(--foam) 50%, var(--foam) 100%);
}
.project__cover img {
  width: 100%;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
}

.project__body { display: grid; gap: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
@media (min-width: 56rem) {
  /* Die Angaben stehen auf grossen Bildschirmen neben dem Text, nicht
     darunter: Jahr, Technik und der Link zum Projekt sind das, wonach in
     einem Portfolio zuerst gesucht wird. */
  .project__body {
    grid-template-columns: minmax(0, 1fr) 16rem;
    align-items: start;
    max-width: calc(var(--container-narrow) + 18rem);
  }
}

.project__facts {
  padding: 1.4rem 1.5rem 1.6rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  position: sticky;
  top: calc(var(--header-h) + 1.5rem);
}

.facts__row + .facts__row { margin-top: 0.9rem; }
.facts dt {
  font-family: var(--f-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
}
.facts dd {
  margin: 0.2rem 0 0;
  font-size: 0.95rem;
  color: var(--ink);
}

.project__facts .btn { margin-top: 1.5rem; width: 100%; justify-content: center; }

/* --------------------------------------------------------------------------
   13. Abschluss & Fehlerseite
   -------------------------------------------------------------------------- */
.closing__inner { text-align: center; }

.closing__title { font-size: var(--fs-h2); color: var(--on-deep); }

.closing__lead {
  margin-top: 1rem;
  font-size: var(--fs-lead);
  color: var(--on-deep-2);
}

.closing__reasons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 0.75rem;
  margin-top: 1.75rem;
  list-style: none;
  padding: 0;
}
.closing__reasons li {
  padding: 0.35em 0.95em;
  border: 1px solid var(--line-deep-2);
  border-radius: var(--r-pill);
  font-size: 0.87rem;
  color: var(--on-deep-2);
}

.closing__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.85rem;
  margin-top: 2rem;
}

.closing__note {
  margin-top: 1.25rem;
  font-size: 0.88rem;
  color: var(--ink-mute);
}

.error { min-height: 60vh; display: grid; align-items: center; }
.error__inner { text-align: center; }
.error__title { margin-top: 1rem; font-size: var(--fs-h1); color: var(--white); }
.error__lead {
  margin-top: 1.1rem;
  font-size: var(--fs-lead);
  color: var(--on-deep-2);
}
.error__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.85rem;
  margin-top: 2rem;
}

/* --------------------------------------------------------------------------
   14. Fussbereich
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--deep-950);
  color: var(--ink-mute);
  border-top: 1px solid var(--line-deep);
}

.site-footer__inner {
  display: grid;
  gap: clamp(2.5rem, 2rem + 3vw, 4rem);
  max-width: var(--container);
  margin-inline: auto;
  padding: clamp(3rem, 2.5rem + 3vw, 4.5rem) var(--gutter) clamp(2rem, 1.5rem + 2vw, 3rem);
}
@media (min-width: 52rem) {
  .site-footer__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
}

.site-footer__brand img { width: 160px; height: auto; }

.site-footer__address {
  margin-top: 1.25rem;
  font-style: normal;
  font-size: 0.92rem;
  line-height: 1.7;
}
.site-footer__legal-name {
  display: block;
  color: var(--on-deep-2);
  font-weight: 500;
}

.site-footer__mail {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1.1rem;
  font-size: 0.92rem;
  color: var(--on-deep-2);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}
.site-footer__mail:hover { color: var(--amber-400); }

.site-footer__social {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.5rem;
  list-style: none;
  padding: 0;
}
.site-footer__social a {
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  border: 1px solid var(--line-deep);
  border-radius: var(--r-sm);
  color: var(--on-deep-2);
  transition: border-color var(--t) var(--ease), color var(--t) var(--ease);
}
.site-footer__social a:hover { border-color: var(--brand-300); color: var(--white); }
.site-footer__social .i { fill: currentColor; stroke: none; width: 1.1rem; height: 1.1rem; }

.site-footer__nav {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}

.site-footer__col-title {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.site-footer__col ul {
  margin-top: 1rem;
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}
.site-footer__col a {
  font-size: 0.93rem;
  color: var(--on-deep-2);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}
.site-footer__col a:hover { color: var(--amber-400); }

.site-footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  max-width: var(--container);
  margin-inline: auto;
  padding: 1.25rem var(--gutter) 2rem;
  border-top: 1px solid var(--line-deep);
  font-size: 0.82rem;
}
.site-footer__bar ul {
  display: flex;
  gap: 1.25rem;
  list-style: none;
  padding: 0;
}
.site-footer__bar a {
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}
.site-footer__bar a:hover { color: var(--on-deep); }

/* --------------------------------------------------------------------------
   15. Einblenden beim Scrollen
   -------------------------------------------------------------------------- */
/* Nur scharf, wenn JavaScript laeuft (`.js`) und der Beobachter noch nicht
   aufgegeben hat (`.reveal-all` deckt alles auf). Ohne diese zwei Bedingungen
   waere ein Script-Fehler gleichbedeutend mit einer leeren Seite. */
.js:not(.reveal-all) .reveal-group > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out);
}
.js:not(.reveal-all) .reveal-group.is-visible > * {
  opacity: 1;
  transform: none;
}
/* Gestaffelt, aber kurz: mehr als vier Stufen liest sich als Verzoegerung,
   nicht als Animation. */
.js:not(.reveal-all) .reveal-group.is-visible > *:nth-child(2) { transition-delay: 0.07s; }
.js:not(.reveal-all) .reveal-group.is-visible > *:nth-child(3) { transition-delay: 0.14s; }
.js:not(.reveal-all) .reveal-group.is-visible > *:nth-child(n+4) { transition-delay: 0.2s; }

/* --------------------------------------------------------------------------
   16. Bewegung reduzieren
   -------------------------------------------------------------------------- */
/* Eine Stelle, nicht zwoelf. Wer im Betriebssystem „Bewegung reduzieren"
   gesetzt hat, bekommt die Inhalte sofort und ohne Verschiebung — auch das
   weiche Scrollen wird abgeschaltet, weil es bei vestibulaeren Beschwerden
   zu den unangenehmsten Effekten gehoert. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .js:not(.reveal-all) .reveal-group > * { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   17. Druck
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .skip-link, .filters,
  .closing, .hero__actions, .hero__bg, .btn { display: none; }

  body { background: #fff; color: #000; font-size: 11pt; }
  .hero, .page-head, .section--deep, .section--accentless {
    background: #fff;
    color: #000;
    padding-block: 1.5rem;
  }
  .hero::before { display: none; }
  .hero__title, .page-head__title, .closing__title, h1, h2, h3 { color: #000; }
  .prose-wrap, .section--light { background: #fff; }

  /* Adressen ausschreiben — auf Papier ist ein Link ohne Ziel wertlos.
     Interne Anker bleiben aussen vor, die verweisen nur auf sich selbst. */
  .prose a[href^='http']::after {
    content: ' (' attr(href) ')';
    font-size: 0.85em;
    word-break: break-all;
  }

  .card, .discipline, .project__facts {
    border: 1px solid #ccc;
    box-shadow: none;
    break-inside: avoid;
  }
}