/* ============================================================================
   Lukas Heim / Monk4ys1 — Portfolio
   Designsprache: "Ruhiges Dunkel"
   Ein neutraler dunkler Grund, feine Linien, ein einziger gedaempfter Akzent.
   Tiefe entsteht aus Abstand, Kontrast und Typografie — nicht aus Farbe,
   Leuchten oder Bewegung.
   Ausschliesslich Systemschriften — kein einziger externer Request.
   ---------------------------------------------------------------------------
   01  Tokens
   02  Reset & Basis
   03  Hintergrund
   04  Typografie
   05  Layout-Huelle
   06  Kopfzeile & Navigation
   07  Buttons, Links, Chips
   08  Flaechen
   09  Hero
   10  Sektions-Rahmenwerk
   11  Ueber mich
   12  Schichtenmodell (Tech-Stack)
   13  Projekte
   14  Kontakt
   15  Fussbereich
   16  Rechtstexte
   17  Auftritt & Hilfsklassen
   18  Reduced Motion, Transparenz, Druck
   ========================================================================= */


/* ══ 01  Tokens ══════════════════════════════════════════════════════════ */

:root {
  /* — Grund: neutral, leicht kuehl, ohne Farbstich — */
  --bg:            #0b0c0e;
  --bg-deep:       #08090b;
  --fg:            #e9ebee;
  --muted:         #9aa1a9;
  --faint:         #767c85;

  /* — Ein Hauptakzent, eine zweite Stimme, ein Tupfer. Alle gedaempft. — */
  --accent:        #97a6c9;   /* Schieferblau — traegt die Seite */
  --accent-2:      #7dc0b4;   /* Tuerkis      — Leben, Status, Verlauf */
  --accent-3:      #cfa2b8;   /* Rosa         — nur als Tupfer */
  --accent-dim:    rgba(151, 166, 201, 0.16);

  --surface:       rgba(255, 255, 255, 0.028);
  --surface-2:     rgba(255, 255, 255, 0.05);
  --surface-3:     rgba(255, 255, 255, 0.08);
  --border:        rgba(255, 255, 255, 0.075);
  --border-lit:    rgba(255, 255, 255, 0.15);
  --sheen:         rgba(255, 255, 255, 0.16);

  --spot:          rgba(151, 166, 201, 0.09);
  --shadow:        0 12px 32px -26px rgba(0, 0, 0, 0.90);
  --shadow-lg:     0 24px 56px -32px rgba(0, 0, 0, 0.95);
  --glow:          0 14px 32px -20px rgba(151, 166, 201, 0.45);

  --halo:          rgba(116, 130, 172, 0.20);
  --halo-2:        rgba(103, 163, 152, 0.13);
  --grid-line:     rgba(255, 255, 255, 0.022);

  /* — Schrift: nur was ohnehin auf dem Geraet liegt — */
  --sans: system-ui, -apple-system, 'Segoe UI Variable Display', 'Segoe UI',
          Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
  --mono: ui-monospace, 'Cascadia Mono', 'Cascadia Code', 'SFMono-Regular',
          'SF Mono', 'Segoe UI Mono', 'Roboto Mono', Consolas,
          'Liberation Mono', monospace;

  /* — Typoskala: flacher als zuvor, die Sprunghoehen sind kleiner — */
  --t-xs:   clamp(0.688rem, 0.67rem + 0.09vw, 0.75rem);
  --t-sm:   clamp(0.813rem, 0.79rem + 0.11vw, 0.875rem);
  --t-base: clamp(0.938rem, 0.92rem + 0.10vw, 1rem);
  --t-md:   clamp(1rem,     0.97rem + 0.15vw, 1.063rem);
  --t-lg:   clamp(1.125rem, 1.05rem + 0.30vw, 1.25rem);
  --t-xl:   clamp(1.25rem,  1.13rem + 0.55vw, 1.5rem);
  --t-2xl:  clamp(1.875rem, 1.45rem + 1.70vw, 2.75rem);
  --t-hero: clamp(3rem,     1.75rem + 5.10vw, 6rem);

  /* — Raster & Form — */
  --shell:   1160px;
  --pad:     clamp(1.15rem, 4vw, 2.5rem);
  --sec-y:   clamp(3.75rem, 7.5vw, 7rem);
  --bar-h:   4rem;                   /* wird per JS praezisiert */

  --r-xs: 0.375rem;
  --r-sm: 0.5rem;
  --r:    0.75rem;
  --r-lg: 1rem;
  --r-full: 999px;

  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);

  color-scheme: dark;
}

/* Die Seite kennt bewusst nur diese eine, dunkle Stimmung — kein Umschalter,
   keine helle Variante, damit nichts gespeichert werden muss. */


/* ══ 02  Reset & Basis ═══════════════════════════════════════════════════ */

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

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

body {
  margin: 0;
  min-height: 100svh;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: var(--t-base);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, dl, dd, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

a { color: inherit; }

:is(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

::selection { background: var(--accent-dim); color: var(--fg); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--surface-3);
  border-radius: var(--r-full);
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--faint); background-clip: content-box; }

.skip {
  position: fixed;
  left: 1rem;
  top: -6rem;
  z-index: 300;
  padding: 0.7rem 1.2rem;
  border-radius: var(--r-sm);
  background: var(--fg);
  color: var(--bg-deep);
  font-size: var(--t-sm);
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: top 0.3s var(--ease);
}
.skip:focus { top: 1rem; }


/* ══ 03  Hintergrund ═════════════════════════════════════════════════════ */

/* Zwei sehr weiche Lichtfelder statt eines Farbnebels. Sie liegen hinter
   allem, scrollen nicht mit und faengen keine Klicks. */
.aurora {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background: var(--bg);
}

/* Beide atmen sehr langsam (transform) und folgen dem Zeiger um wenige
   Pixel (translate; --px/--py kommen aus script.js, -0,5 … 0,5). Gerade
   genug, dass der Grund nicht tot wirkt. */
.aurora__glow {
  position: absolute;
  aspect-ratio: 1.6;
  border-radius: 50%;
  filter: blur(30px);
  will-change: transform;
  translate: calc(var(--tx, 0px) + var(--px, 0) * var(--depth, 12px))
             calc(var(--py, 0) * var(--depth, 12px));
  transition: translate 1.4s var(--ease-soft);
}

.aurora__glow--1 {
  --depth: 18px;
  --tx: -50%;
  top: -52vh;
  left: 50%;
  width: min(150vw, 90rem);
  background: radial-gradient(closest-side, var(--halo), transparent 70%);
  animation: drift-a 48s var(--ease-soft) infinite alternate;
}
.aurora__glow--2 {
  --depth: -13px;
  top: 38vh;
  left: -20vw;
  width: min(95vw, 52rem);
  background: radial-gradient(closest-side, var(--halo-2), transparent 70%);
  animation: drift-b 62s var(--ease-soft) infinite alternate;
}

@keyframes drift-a {
  from { transform: translate3d(-3%, 0, 0) scale(1); }
  to   { transform: translate3d(3%, 5%, 0)  scale(1.09); }
}
@keyframes drift-b {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(9%, -7%, 0) scale(1.14); }
}

/* Feines technisches Raster, nach unten hin ausgeblendet. */
.aurora__grid {
  position: absolute;
  inset: -1px;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 88px 88px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 62%);
          mask-image: linear-gradient(180deg, #000 0%, transparent 62%);
}

/* Vignette: nimmt den Raendern die Haerte. */
.aurora::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 25%, transparent 45%, var(--bg-deep) 100%);
  opacity: 0.6;
}

/* Fortschrittslinie ganz oben — duenn, aber mit einem Farbverlauf drin. */
.progress {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 90;
  height: 2px;
  pointer-events: none;
}
.progress__bar {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(var(--p, 0));
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 10px rgba(151, 166, 201, 0.35);
  opacity: 0.8;
}
:root:not(.js) .progress { display: none; }


/* ══ 04  Typografie ══════════════════════════════════════════════════════ */

/* Monospace bleibt den technischen Beschriftungen vorbehalten — nicht mehr
   der Navigation, den Knoepfen und dem Fussbereich. */
.kicker,
.badge,
.hero__role,
.hero__meta,
.panel__title,
.panel__foot,
.meta__k,
.layer__idx,
.stack__cap,
.project__idx,
.project__status,
.contact__value,
.brand__alias,
.footer__alias,
.toc__head,
.doc h2 > .num {
  font-family: var(--mono);
  font-variant-ligatures: none;
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--t-xs);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--faint);
}
.kicker__num {
  display: grid;
  place-items: center;
  min-width: 1.7rem;
  padding: 0.1rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  background: var(--surface);
  color: var(--accent);
  letter-spacing: 0.05em;
}
/* Kurzer Strich, der die Zeile auslaufen laesst. */
.kicker::after {
  content: '';
  width: clamp(1.25rem, 5vw, 3.5rem);
  height: 1px;
  background: linear-gradient(90deg, var(--border-lit), transparent);
}

.section__title {
  margin-top: 1.1rem;
  font-size: var(--t-2xl);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
  max-width: 22ch;
}

.section__lead {
  margin-top: 1rem;
  max-width: 58ch;
  font-size: var(--t-md);
  color: var(--muted);
  text-wrap: pretty;
}

/* Zwei Toene, die sehr langsam durch die Schrift wandern. Ein Durchlauf
   dauert eine Viertelminute — man sieht es erst, wenn man hinsieht. */
.grad {
  background: linear-gradient(100deg, var(--accent) 12%, var(--accent-2) 50%, var(--accent) 88%);
  background-size: 230% 100%;
  background-position: 0 0;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: grad-shift 15s var(--ease-soft) infinite alternate;
}
@keyframes grad-shift { to { background-position: 100% 0; } }


/* ══ 05  Layout-Huelle ═══════════════════════════════════════════════════ */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--pad);
}


/* ══ 06  Kopfzeile & Navigation ══════════════════════════════════════════ */

/* Die Kopfzeile ist im Ruhezustand unsichtbar und legt sich erst beim
   Scrollen als duenne, matte Leiste ueber den Inhalt. */
.bar {
  position: sticky;
  top: 0;
  z-index: 80;
  border-bottom: 1px solid transparent;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}
.is-scrolled .bar {
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  border-bottom-color: var(--border);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
}

.bar__inner {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  padding-block: 0.85rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex: none;
  text-decoration: none;
  border-radius: var(--r-xs);
}
.brand__mark {
  display: grid;
  place-items: center;
  width: 1.85rem;
  height: 1.85rem;
  flex: none;
  border-radius: var(--r-sm);
  background: linear-gradient(140deg, var(--accent), var(--accent-2));
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.brand__mark span {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 1px;
  background: var(--bg-deep);
  transition: transform 0.45s var(--ease);
}
/* Ein kleiner Dreh beim Zeigen — das einzige Kunststueck der Marke. */
.brand:hover .brand__mark {
  transform: rotate(-10deg);
  box-shadow: 0 6px 18px -8px var(--accent);
}
.brand:hover .brand__mark span { transform: rotate(10deg) scale(0.88); }

.brand__text { display: grid; line-height: 1.25; }
.brand__name {
  font-size: var(--t-sm);
  font-weight: 560;
  white-space: nowrap;
}
.brand__alias {
  font-size: var(--t-xs);
  color: var(--faint);
  letter-spacing: 0.04em;
}
/* Erst auf sehr schmalen Geraeten bleibt nur die Marke stehen. */
@media (max-width: 21rem) {
  .brand__text { display: none; }
}

.nav {
  margin-inline-start: auto;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.nav::-webkit-scrollbar { display: none; }
.nav__list { display: flex; align-items: center; gap: 0.1rem; }

.nav__link {
  position: relative;
  display: block;
  padding: 0.4rem 0.8rem;
  border-radius: var(--r-xs);
  font-size: var(--t-sm);
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.25s var(--ease);
}
.nav__link:hover { color: var(--fg); }
.nav__link[aria-current] { color: var(--fg); }
/* Der Strich waechst aus der Mitte heraus, wenn der Punkt aktiv wird. */
.nav__link::after {
  content: '';
  position: absolute;
  left: 0.8rem;
  right: 0.8rem;
  bottom: 0.2rem;
  height: 1px;
  background: var(--accent);
  opacity: 0;
  scale: 0 1;
  transition: scale 0.35s var(--ease), opacity 0.35s var(--ease);
}
.nav__link:hover::after { opacity: 0.35; scale: 1 1; }
.nav__link[aria-current]::after { opacity: 0.75; scale: 1 1; }

/* Sehr schmale Viewports: die Navigation bekommt eine eigene Zeile. */
@media (max-width: 44rem) {
  .bar__inner { flex-wrap: wrap; padding-bottom: 0.5rem; }
  .nav { order: 3; flex-basis: 100%; margin-inline-start: 0; }
  .nav__list { justify-content: space-between; gap: 0; }
  .nav__link { padding-inline: 0.5rem; }
  .nav__link[aria-current]::after { left: 0.5rem; right: 0.5rem; }
}


/* ══ 07  Buttons, Links, Chips ═══════════════════════════════════════════ */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 1.15rem;
  border: 1px solid var(--border-lit);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--fg);
  font-size: var(--t-sm);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease),
              color 0.25s var(--ease), transform 0.25s var(--ease),
              box-shadow 0.25s var(--ease);
}
.btn svg { width: 0.95rem; height: 0.95rem; flex: none; transition: transform 0.25s var(--ease); }
.btn:hover { background: var(--surface-2); transform: translateY(-1px); }
.btn:hover svg { transform: translateX(0.15rem); }
.btn:active { transform: translateY(0); }

/* Der einzige gefuellte Knopf der Seite — und der darf Farbe tragen. */
.btn--primary {
  border-color: transparent;
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  color: var(--bg-deep);
  font-weight: 560;
}
.btn--primary:hover { background: linear-gradient(120deg, var(--accent), var(--accent-2)); box-shadow: var(--glow); }
/* Wanderndes Glanzlicht. Bewusst ohne Transition in der Ruhelage: sonst
   liefe der Glanz beim Verlassen sichtbar rueckwaerts. Der Sprung zurueck
   auf -120% passiert ausserhalb des Knopfes, also unsichtbar. */
.btn--primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 25%, rgba(255, 255, 255, 0.28) 50%, transparent 75%);
  translate: -120% 0;
}
.btn--primary:hover::before {
  translate: 120% 0;
  transition: translate 0.8s var(--ease);
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: 0.22rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  background: var(--surface);
  font-size: var(--t-xs);
  color: var(--muted);
  white-space: nowrap;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease),
              transform 0.25s var(--ease);
}
.chip:hover { border-color: var(--border-lit); color: var(--fg); transform: translateY(-1px); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.35rem 0.85rem 0.35rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  background: var(--surface);
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.badge__dot {
  position: relative;
  width: 0.4rem;
  height: 0.4rem;
  flex: none;
  border-radius: 50%;
  background: var(--accent-2);
}
/* Ein langsamer Puls — das Lebenszeichen der Seite. */
.badge__dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: inherit;
  animation: ping 3s var(--ease-soft) infinite;
}
@keyframes ping {
  0%        { transform: scale(1);   opacity: 0.5; }
  70%, 100% { transform: scale(2.6); opacity: 0; }
}

.copy {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: transparent;
  font-size: var(--t-xs);
  color: var(--muted);
  cursor: pointer;
  position: relative;
  z-index: 2;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease),
              background 0.25s var(--ease);
}
.copy svg { width: 0.85rem; height: 0.85rem; }
.copy:hover { color: var(--fg); border-color: var(--border-lit); background: var(--surface-2); }
/* Kurzes Nicken, wenn die Adresse in der Zwischenablage liegt. */
.copy[data-copied] {
  color: var(--accent-2);
  border-color: var(--accent-2);
  animation: pop 0.45s var(--ease);
}
@keyframes pop {
  35% { scale: 1.05; }
}
:root:not(.js) .copy { display: none; }


/* ══ 08  Flaechen ════════════════════════════════════════════════════════ */

.card {
  position: relative;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease),
              box-shadow 0.3s var(--ease);
}

/* Lichtkante: ein Hauch Reflexion auf der oberen linken Kante. */
.card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(150deg, var(--sheen), transparent 45%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0.4;
  pointer-events: none;
}

/* Nur Karten, die zu etwas fuehren, reagieren ueberhaupt auf den Zeiger. */
:is(.project, .contact, .layer, .pillar):hover {
  border-color: var(--border-lit);
  background: var(--surface-2);
  box-shadow: var(--shadow);
}
/* Diese beiden heben sich nur an. Die kippenden Karten regeln ihren
   Versatz stattdessen ueber --ty, siehe .tilt weiter unten. */
:is(.pillar, .layer) { transition: transform 0.4s var(--ease), border-color 0.3s var(--ease),
                                   background 0.3s var(--ease), box-shadow 0.3s var(--ease); }
:is(.pillar, .layer):hover { transform: translateY(-2px); }

/* Zarter Lichtschimmer unter dem Zeiger. --mx/--my kommen aus script.js.
   Kein `overflow: hidden` — die Knoten am Schichtenmodell duerfen aus der
   Karte herausragen; `isolation` haelt den negativen z-index in der Karte. */
[data-spot] { isolation: isolate; }
[data-spot]::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(
    24rem circle at var(--mx, 50%) var(--my, 0%),
    var(--spot),
    transparent 62%
  );
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease);
}
[data-spot]:hover::before,
[data-spot]:focus-within::before { opacity: 1; }

/* Sanfte Neigung zum Zeiger — 2 Grad, nicht mehr, und nur auf den Karten,
   die etwas vorzeigen. --rx/--ry/--ty kommen aus script.js. Zwei
   Geschwindigkeiten: waehrend der Zeiger auf der Karte liegt, folgt sie
   kurz und weich nach (.is-tilting); verlaesst er sie, faellt sie ueber die
   laengere, ausklingende Kurve in die Ruhelage zurueck. */
.tilt {
  transform:
    perspective(1200px)
    rotateX(var(--rx, 0deg))
    rotateY(var(--ry, 0deg))
    translate3d(0, var(--ty, 0px), 0);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: transform 0.55s var(--ease), border-color 0.3s var(--ease),
              background 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.tilt.is-tilting {
  will-change: transform;
  transition: transform 0.18s var(--ease), border-color 0.3s var(--ease),
              background 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.tilt:hover {
  --ty: -3px;
  border-color: var(--border-lit);
  box-shadow: var(--shadow-lg);
}


/* ══ 09  Hero ════════════════════════════════════════════════════════════ */

.hero {
  position: relative;
  padding-block: clamp(2.5rem, 7vw, 5.5rem) var(--sec-y);
}

.hero__inner {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 62rem) {
  .hero__inner {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr);
    gap: clamp(3rem, 5vw, 4.5rem);
  }
}

.hero__title {
  margin-top: clamp(1.2rem, 2.5vw, 1.75rem);
  font-size: var(--t-hero);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.035em;
}
.hero__title span { display: block; }

.hero__role {
  margin-top: clamp(1rem, 2vw, 1.4rem);
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.hero__lead {
  margin-top: 1.1rem;
  max-width: 46ch;
  font-size: var(--t-md);
  color: var(--muted);
  text-wrap: pretty;
}

.cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: clamp(1.75rem, 3vw, 2.25rem);
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  margin-top: clamp(2rem, 4vw, 2.75rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
  color: var(--faint);
}
.hero__meta strong { font-weight: 400; }
.hero__meta li { display: flex; align-items: center; gap: 0.5rem; }
.hero__meta svg { width: 0.85rem; height: 0.85rem; flex: none; color: var(--accent); }

/* — Die Konsolenkarte rechts — */
.panel { padding: 0; overflow: hidden; }

.panel__bar {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.75rem 1.1rem;
  border-bottom: 1px solid var(--border);
}
.panel__lights { display: flex; gap: 0.35rem; }
.panel__lights span {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--border-lit);
  opacity: 0.85;
}
.panel__lights span:nth-child(1) { background: var(--accent-3); }
.panel__lights span:nth-child(2) { background: var(--accent); }
.panel__lights span:nth-child(3) { background: var(--accent-2); }
.panel__title {
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  color: var(--faint);
}

.panel__body { padding: 0.3rem 1.1rem 0.5rem; }

.meta { display: grid; }
.meta__row {
  display: grid;
  gap: 0.15rem 1rem;
  padding-block: 0.85rem;
  border-bottom: 1px solid var(--border);
}
.meta__row:last-child { border-bottom: 0; }
@media (min-width: 24rem) {
  .meta__row { grid-template-columns: 5rem minmax(0, 1fr); align-items: baseline; }
}
.meta__k {
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
  transition: color 0.25s var(--ease);
}
.meta__row:hover .meta__k { color: var(--accent); }
.meta__v { font-size: var(--t-sm); color: var(--muted); text-wrap: pretty; }
.meta__v .accent { color: var(--fg); }

.panel__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1rem;
  padding: 0.8rem 1.1rem;
  border-top: 1px solid var(--border);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  color: var(--faint);
}
.panel__foot .live { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--accent-2); }


/* ══ 10  Sektions-Rahmenwerk ═════════════════════════════════════════════ */

.section {
  position: relative;
  padding-block: var(--sec-y);
  scroll-margin-top: calc(var(--bar-h) + 1.5rem);
}
.section__head { max-width: 60rem; }
.section--last { padding-bottom: clamp(4rem, 8vw, 8rem); }

/* Haarstrich zwischen den Sektionen, zur Mitte hin am hellsten. */
.section + .section::before,
.section--rule::before {
  content: '';
  position: absolute;
  inset-inline: var(--pad);
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-lit) 50%, transparent);
}


/* ══ 11  Ueber mich ══════════════════════════════════════════════════════ */

.about {
  display: grid;
  gap: clamp(1rem, 2vw, 1.25rem);
  margin-top: clamp(2.25rem, 4.5vw, 3.25rem);
}
@media (min-width: 60rem) {
  .about { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; }
}

.prose {
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
.prose p {
  max-width: 62ch;
  color: var(--muted);
  text-wrap: pretty;
}
.prose p + p { margin-top: 1.1em; }
.prose p strong { color: var(--fg); font-weight: 560; }
/* Das Anfuehrungszeichen frueher gross und farbig — jetzt nur ein Hinweis. */
.prose__mark {
  display: block;
  margin-bottom: 0.9rem;
  font-family: var(--mono);
  font-size: var(--t-md);
  line-height: 1;
  color: var(--faint);
}
.prose__quote {
  margin-top: 1.5rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--border);
  font-size: var(--t-md);
  color: var(--fg);
  text-wrap: balance;
}

.pillars { display: grid; gap: clamp(1rem, 2vw, 1.25rem); }
@media (min-width: 34rem) and (max-width: 59.99rem) {
  .pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.pillar {
  display: grid;
  gap: 0.4rem;
  padding: clamp(1.15rem, 2.4vw, 1.4rem);
  border-radius: var(--r);
}
.pillar__icon {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  margin-bottom: 0.4rem;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--muted);
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease),
              transform 0.4s var(--ease);
}
.pillar__icon svg { width: 1rem; height: 1rem; }
.pillar:hover .pillar__icon {
  color: var(--accent);
  border-color: var(--border-lit);
  transform: rotate(-6deg);
}
.pillar__name {
  font-size: var(--t-md);
  font-weight: 560;
}
.pillar__note { font-size: var(--t-sm); color: var(--muted); text-wrap: pretty; }


/* ══ 12  Schichtenmodell ═════════════════════════════════════════════════ */

.stack {
  position: relative;
  display: grid;
  gap: clamp(0.75rem, 1.6vw, 1rem);
  margin-top: clamp(2.25rem, 4.5vw, 3.25rem);
  padding-inline-start: clamp(0rem, 3vw, 3rem);
}
.layers {
  display: grid;
  gap: clamp(0.75rem, 1.6vw, 1rem);
}

/* Senkrechte Leitung, an der die Schichten haengen. */
.stack::before {
  content: '';
  position: absolute;
  top: 1.5rem;
  bottom: 1.5rem;
  left: 1.25rem;
  width: 1px;
  background: var(--border);
}
@media (max-width: 47.99rem) {
  .stack { padding-inline-start: 0; }
  .stack::before { display: none; }
}

.stack__cap {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: var(--t-xs);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--faint);
}
.stack__cap::before {
  content: '';
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
  background: var(--border-lit);
}
@media (max-width: 47.99rem) { .stack__cap { display: none; } }

.layer {
  position: relative;
  display: grid;
  gap: 0.4rem 1.5rem;
  padding: clamp(1.1rem, 2.2vw, 1.4rem) clamp(1.15rem, 2.4vw, 1.5rem);
  border-radius: var(--r);
}
@media (min-width: 48rem) {
  .layer {
    grid-template-columns: 2.75rem minmax(0, 15rem) minmax(0, 1fr);
    align-items: start;
  }
}

/* Knoten auf der Leitung, links neben der Karte. Als eigenes Element, weil
   ::before hier schon der Lichtschimmer ist. */
.layer__node { display: none; }
@media (min-width: 48rem) {
  .layer__node {
    display: block;
    position: absolute;
    top: calc(clamp(1.1rem, 2.2vw, 1.4rem) + 0.65rem);
    left: calc(clamp(0rem, 3vw, 3rem) * -1 + 1.25rem);
    width: 0.4rem;
    height: 0.4rem;
    translate: -50% 0;
    border-radius: 50%;
    background: var(--faint);
    box-shadow: 0 0 0 4px var(--bg);
    transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease),
                scale 0.3s var(--ease);
    z-index: 2;
  }
  .layer:hover .layer__node {
    background: var(--accent);
    scale: 1.2;
    box-shadow: 0 0 0 4px var(--bg), 0 0 12px var(--accent);
  }
  .layer--base .layer__node { background: var(--accent-2); }
}

.layer__idx {
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  color: var(--faint);
  padding-top: 0.3rem;
  transition: color 0.25s var(--ease);
}
.layer:hover .layer__idx { color: var(--accent); }
.layer__name {
  font-size: var(--t-md);
  font-weight: 560;
  line-height: 1.3;
  text-wrap: balance;
}
.layer__note {
  grid-column: 1 / -1;
  max-width: 60ch;
  font-size: var(--t-sm);
  color: var(--muted);
  text-wrap: pretty;
}
.layer__tech {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  grid-column: 1 / -1;
  margin-top: 0.2rem;
}
/* Ab Tablet: Nummer | Name | (Beschreibung ueber Technik) — so bleiben die
   Karten flach, statt dass Name und Chips die Hoehe hochtreiben. */
@media (min-width: 48rem) {
  .layer__name { grid-column: 2; grid-row: 1; }
  .layer__note { grid-column: 3; grid-row: 1; }
  .layer__tech { grid-column: 3; grid-row: 2; margin-top: 0.3rem; }
}

/* Das Fundament traegt sichtbar mehr: hellere Kante, eigene Ziffernfarbe. */
.layer--base {
  border-color: var(--border-lit);
  background: var(--surface-2);
}
.layer--base .layer__idx,
.layer--base:hover .layer__idx { color: var(--accent-2); }


/* ══ 13  Projekte ════════════════════════════════════════════════════════ */

.projects {
  display: grid;
  gap: clamp(1rem, 2vw, 1.25rem);
  margin-top: clamp(2.25rem, 4.5vw, 3.25rem);
}
@media (min-width: 52rem) {
  .projects { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.project {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: clamp(1.5rem, 3vw, 2rem);
  min-height: 15rem;
}
.project__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.project__status {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  white-space: nowrap;
}
.project__status .marker {
  width: 0.4rem;
  height: 0.4rem;
  flex: none;
  border-radius: 50%;
}
[data-status='aktiv'] .marker {
  background: var(--accent-2);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-2) 18%, transparent);
}
[data-status='pausiert'] .marker { border: 1px solid var(--faint); }

.project__idx {
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  color: var(--faint);
}
.project__title {
  font-size: var(--t-xl);
  font-weight: 560;
  line-height: 1.2;
  letter-spacing: -0.015em;
  transition: color 0.25s var(--ease);
}
.project__title a { text-decoration: none; }
/* Ganze Karte klickbar, aber nur ein Ziel im Fokus-Baum. */
.project__title a::after { content: ''; position: absolute; inset: 0; z-index: 3; }
.project__desc {
  color: var(--muted);
  font-size: var(--t-sm);
  text-wrap: pretty;
  max-width: 48ch;
}
.project__go {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: auto;
  padding-top: 1rem;
  font-size: var(--t-sm);
  color: var(--muted);
  transition: color 0.25s var(--ease);
}
.project__go svg {
  width: 0.85rem;
  height: 0.85rem;
  transition: transform 0.3s var(--ease);
}
.project:hover .project__title { color: var(--accent); }
.project:hover .project__go { color: var(--accent); }
.project:hover .project__go svg { transform: translate(0.15rem, -0.15rem); }


/* ══ 14  Kontakt ═════════════════════════════════════════════════════════ */

.contacts {
  display: grid;
  gap: clamp(1rem, 2vw, 1.25rem);
  margin-top: clamp(2.25rem, 4.5vw, 3.25rem);
}
@media (min-width: 46rem) {
  .contacts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.contact {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: clamp(1.25rem, 2.6vw, 1.6rem);
  border-radius: var(--r);
}
.contact__icon {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  margin-bottom: 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--muted);
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease),
              transform 0.4s var(--ease);
}
.contact__icon svg { width: 1rem; height: 1rem; }
.contact:hover .contact__icon {
  color: var(--accent);
  border-color: var(--border-lit);
  transform: translateY(-2px);
}

.contact__name {
  font-size: var(--t-md);
  font-weight: 560;
}
.contact__name a { text-decoration: none; }
.contact__name a::after { content: ''; position: absolute; inset: 0; z-index: 3; }
/* Die E-Mail-Karte bleibt ohne Flaechen-Link: die Adresse soll markierbar sein. */
.contact--mail .contact__name a::after { content: none; }

.contact__value {
  font-size: var(--t-sm);
  color: var(--faint);
  word-break: break-word;
}
.contact__foot { margin-top: auto; padding-top: 1.1rem; }
.contact__foot .link-out {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--t-sm);
  color: var(--muted);
  transition: color 0.25s var(--ease);
}
.contact__foot .link-out svg { width: 0.85rem; height: 0.85rem; transition: transform 0.3s var(--ease); }
.contact:hover .link-out { color: var(--accent); }
.contact:hover .link-out svg { transform: translate(0.15rem, -0.15rem); }


/* ══ 15  Fussbereich ═════════════════════════════════════════════════════ */

.footer {
  padding-bottom: clamp(2rem, 4vw, 3rem);
}
.footer__card {
  display: grid;
  gap: 1.25rem;
  padding: clamp(1.4rem, 3vw, 1.9rem);
  border-radius: var(--r-lg);
}
.footer__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
}
.footer__brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--t-sm);
}
.footer__brand .footer__alias { color: var(--faint); font-size: var(--t-xs); }
/* Im Fussbereich sitzt dieselbe Marke eine Nummer kleiner. */
.footer__brand .brand__mark { width: 1.5rem; height: 1.5rem; border-radius: var(--r-xs); }
.footer__brand .brand__mark span { width: 0.35rem; height: 0.35rem; }
.footer__nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.25rem;
}
.footer__nav a {
  position: relative;
  display: block;
  font-size: var(--t-sm);
  color: var(--muted);
  text-decoration: none;
  transition: color 0.25s var(--ease);
}
.footer__nav a:hover { color: var(--fg); }
/* Unterstrich, der von links einlaeuft. */
.footer__nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.15rem;
  height: 1px;
  background: currentColor;
  scale: 0 1;
  transform-origin: 0 50%;
  transition: scale 0.3s var(--ease);
}
.footer__nav a:hover::after { scale: 1 1; }
.footer__note {
  padding-top: 1.1rem;
  border-top: 1px solid var(--border);
  font-size: var(--t-xs);
  color: var(--faint);
  max-width: 72ch;
  text-wrap: pretty;
}


/* ══ 16  Rechtstexte ═════════════════════════════════════════════════════ */

.legal-head {
  padding-block: clamp(2.25rem, 5vw, 4rem) clamp(1.25rem, 2.5vw, 2rem);
}
.legal-head__title {
  margin-top: 1.1rem;
  font-size: var(--t-2xl);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.025em;
}
.legal-head__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

.legal-grid {
  display: grid;
  gap: clamp(1.5rem, 3.5vw, 2.5rem);
  padding-bottom: clamp(4rem, 8vw, 7rem);
}
@media (min-width: 62rem) {
  .legal-grid { grid-template-columns: 15rem minmax(0, 1fr); }
}

.toc {
  padding: 1.1rem;
  border-radius: var(--r);
}
@media (min-width: 62rem) {
  .toc {
    position: sticky;
    top: calc(var(--bar-h) + 1.5rem);
    align-self: start;
  }
}
.toc__head {
  display: block;
  margin-bottom: 0.8rem;
  font-size: var(--t-xs);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--faint);
}
.toc ol { display: flex; flex-wrap: wrap; gap: 0.2rem; }
@media (min-width: 62rem) { .toc ol { flex-direction: column; } }
.toc a {
  display: block;
  padding: 0.3rem 0.6rem;
  border-radius: var(--r-xs);
  font-size: var(--t-sm);
  color: var(--muted);
  text-decoration: none;
  transition: color 0.25s var(--ease), background 0.25s var(--ease);
}
.toc a:hover { color: var(--fg); background: var(--surface-2); }

.doc { padding: clamp(1.5rem, 3.5vw, 2.5rem); }
.doc h2 {
  margin-top: clamp(2rem, 3.5vw, 2.75rem);
  font-size: var(--t-lg);
  font-weight: 560;
  line-height: 1.3;
  letter-spacing: -0.01em;
  scroll-margin-top: calc(var(--bar-h) + 2rem);
}
.doc > h2:first-child { margin-top: 0; }
.doc h2 > .num {
  display: block;
  margin-bottom: 0.45rem;
  font-size: var(--t-xs);
  font-weight: 400;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--faint);
}
.doc h3 {
  margin-top: 1.75rem;
  font-size: var(--t-base);
  font-weight: 560;
}
.doc p, .doc li { max-width: 74ch; color: var(--muted); text-wrap: pretty; }
.doc p { margin-top: 0.85rem; }
.doc ul { margin-top: 0.85rem; display: grid; gap: 0.4rem; }
.doc ul li { position: relative; padding-left: 1.25rem; }
.doc ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 0.4rem;
  height: 1px;
  background: var(--accent);
}
.doc address {
  margin-top: 1rem;
  padding: 1rem 1.2rem;
  border: 1px solid var(--border);
  border-left: 2px solid var(--accent);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  font-style: normal;
  color: var(--muted);
}
.doc a {
  color: var(--accent);
  text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent);
  text-underline-offset: 0.2em;
  transition: text-decoration-color 0.25s var(--ease);
}
.doc a:hover { text-decoration-color: currentColor; }


/* ══ 17  Auftritt & Hilfsklassen ═════════════════════════════════════════ */

/* Karten treten einmal ein, wenn sie in Sicht kommen: zehn Pixel und eine
   Spur Deckkraft, in Gruppen leicht versetzt. Danach steht alles ruhig.
   Die Klasse setzt script.js — ohne JS oder ohne IntersectionObserver ist
   von alldem nichts zu sehen, der Inhalt steht dann sofort da. */
.reveal { opacity: 0; }
.reveal.is-in {
  animation: reveal 0.65s var(--ease) var(--d, 0ms) both;
}
@keyframes reveal {
  from { opacity: 0; translate: 0 10px; }
  to   { opacity: 1; translate: none; }
}

/* Klick auf einen externen Verweis: ein Lichtring vom Klickpunkt. Er haelt
   nichts auf — der neue Tab geht sofort auf, der Ring laeuft hier auf der
   Seite aus, die ja stehen bleibt. */
.is-launching { overflow: hidden; }
.launch {
  position: absolute;
  left: var(--cx, 50%);
  top: var(--cy, 50%);
  width: 1.25rem;
  height: 1.25rem;
  margin: -0.625rem 0 0 -0.625rem;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent) 0%, transparent 70%);
  pointer-events: none;
  z-index: 4;
  animation: launch-ring 700ms cubic-bezier(0.2, 0.5, 0.35, 1) forwards;
}
@keyframes launch-ring {
  0%   { scale: 0.4; opacity: 0; }
  12%  { opacity: 0.5; }
  100% { scale: 18;  opacity: 0; }
}

/* Der Pfeil schiesst aus dem Bild und kommt von der Gegenseite zurueck. */
.is-launching :is(.link-out, .project__go) svg {
  animation: launch-arrow 700ms var(--ease) forwards;
}
@keyframes launch-arrow {
  0%   { translate: 0 0;            opacity: 1; }
  30%  { translate: 0.6rem -0.6rem; opacity: 0; }
  31%  { translate: -0.6rem 0.6rem; opacity: 0; }
  70%  { translate: 0 0;            opacity: 1; }
  100% { translate: 0 0;            opacity: 1; }
}

/* Nur fuer Screenreader — z. B. der Hinweis "oeffnet in neuem Tab". */
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* ══ 18  Reduced Motion, Transparenz, Druck ══════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
  }
  .aurora__glow { transition: none; translate: var(--tx, 0px) 0; }
  .tilt { transform: none !important; }
  .reveal, .reveal.is-in { opacity: 1; animation: none; }
}

/* Wer weniger Transparenz will, bekommt feste Flaechen statt Milchglas. */
@media (prefers-reduced-transparency: reduce) {
  .is-scrolled .bar {
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    background: var(--bg);
  }
  .aurora__glow { opacity: 0.4; }
}

/* Ohne backdrop-filter waere die Leiste zu duenn — dann fester Grund. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .is-scrolled .bar { background: var(--bg); }
}

@media (forced-colors: active) {
  .grad { -webkit-text-fill-color: currentColor; color: CanvasText; }
  .card, .btn { border: 1px solid CanvasText; }
  .card::after { display: none; }
  .aurora { display: none; }
}

@media print {
  :root {
    --bg: #fff; --bg-deep: #fff; --fg: #000; --muted: #333; --faint: #555;
    --surface: transparent; --surface-2: transparent; --surface-3: transparent;
    --border: #ccc; --border-lit: #999;
    --accent: #000; --accent-2: #000; --accent-3: #000;
    --shadow: none; --shadow-lg: none; --glow: none;
  }
  .aurora, .progress, .bar, .skip, .toc, .cta, .copy { display: none !important; }
  body { background: #fff; }
  .card {
    border: 1px solid #ccc;
    box-shadow: none;
  }
  .card::after, [data-spot]::before, .launch { display: none; }
  .reveal, .reveal.is-in { opacity: 1 !important; animation: none !important; }
  .grad { -webkit-text-fill-color: #000; color: #000; background: none; }
  .tilt { transform: none !important; }
  .section { padding-block: 1.5rem; }
  .doc a[href^='http']::after,
  .doc a[href^='mailto']::after { content: ' (' attr(href) ')'; font-size: 0.8em; }
}