/* ==========================================================================
   sebastian-selle.de — Design System
   Statisch, ohne Build-Schritt, ohne externe Requests.
   ========================================================================== */

/* --- Fonts (selbst gehostet, keine Google-Requests / DSGVO) --------------- */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/montserrat-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/montserrat-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Tokens --------------------------------------------------------------- */
:root {
  /* Marke: Moos-Grün (#58643c) der bestehenden Seite, für dunklen Grund aufgehellt */
  --moss: #9cb068;
  --moss-deep: #58643c;
  --moss-soft: rgba(156, 176, 104, 0.14);
  --cream: #f2e2d4;

  --bg: #0b0b0d;
  --bg-alt: #101013;
  --surface: #16161a;
  --surface-2: #1c1c21;
  --line: rgba(242, 226, 212, 0.1);
  --line-strong: rgba(242, 226, 212, 0.22);

  --text: #ece7e2;
  --text-muted: #a5a09b;
  /* Wird für kleine Labels (0.7rem) verwendet. Der frühere Wert #7d7873 kam auf
     hellen Karten nur auf 3.9:1 und verfehlte damit WCAG AA. */
  --text-dim: #918c87;

  --radius: 18px;
  --radius-sm: 12px;
  --radius-lg: 28px;

  --shell: 1180px;
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --section-y: clamp(4.5rem, 11vw, 9rem);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.9);

  --font: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

/* Feines Filmkorn über der ganzen Seite. Nimmt großen dunklen Flächen die
   digitale Flachheit, ohne ein Bild nachzuladen. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

img { height: auto; }

a { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }

h1, h2, h3, h4 {
  margin: 0;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  text-wrap: balance;
}

p { margin: 0; }

ul,
ol { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--moss); color: #0b0b0d; }

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

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

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

.section--alt { background: var(--bg-alt); }

.section--line { border-top: 1px solid var(--line); }

/* Der Kontaktblock bringt mit seiner Karte reichlich eigene Innenfläche mit.
   Ohne Kürzung addiert sich die volle Sektionsluft darüber zu der darunter
   liegenden Sektion und reißt ein Loch von fast 300 px auf. */
.section--tight { padding-top: calc(var(--section-y) * 0.35); }

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 999;
  padding: 0.75rem 1.25rem;
  background: var(--moss);
  color: #0b0b0d;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-weight: 600;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 0; }

/* --- Typo-Bausteine ------------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 1.1rem;
  color: var(--moss);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}

/* Durchnummerierte Abschnitte geben dem langen One-Pager Takt und sagen dem
   Leser, wo er sich befindet. Der Strich weicht dafür der Ziffer. */
.eyebrow--num::before { display: none; }
.eyebrow__num {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  padding-inline: 0.4rem;
  border: 1px solid var(--moss-deep);
  border-radius: 100px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.section-title {
  font-size: clamp(2rem, 1.3rem + 3vw, 3.25rem);
}

.lead {
  margin-top: 1.4rem;
  max-width: 62ch;
  color: var(--text-muted);
  font-size: clamp(1.02rem, 0.98rem + 0.28vw, 1.15rem);
}

/* Deutsche Komposita werden schnell länger als eine schmale Spalte.
   Silbentrennung greift nur, weil <html lang="de"> gesetzt ist. */
.lead,
.card p,
.trait p,
.passion p,
.timeline__item p,
.prose p,
.prose li {
  -webkit-hyphens: auto;
  hyphens: auto;
}

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

.section-head { max-width: 720px; }

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.9rem 1.6rem;
  border-radius: 100px;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: transform 0.25s var(--ease), background-color 0.25s var(--ease),
    border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn svg { width: 17px; height: 17px; flex: none; }

.btn--primary {
  background: var(--moss);
  color: #0b0b0d;
}
.btn--primary:hover { background: #b0c47c; }

.btn--ghost {
  border: 1px solid var(--line-strong);
  color: var(--text);
}
.btn--ghost:hover { border-color: var(--moss); color: var(--moss); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2.2rem;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--moss);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.text-link svg { width: 15px; height: 15px; transition: transform 0.25s var(--ease); }
.text-link:hover svg { transform: translateX(4px); }

/* --- Header --------------------------------------------------------------- */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background-color 0.35s var(--ease), border-color 0.35s var(--ease),
    backdrop-filter 0.35s var(--ease);
  border-bottom: 1px solid transparent;
}
.header.is-stuck {
  background: rgba(11, 11, 13, 0.82);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--line);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 78px;
}

/* Lesefortschritt. Auf einem One-Pager dieser Länge die billigste Art zu
   zeigen, wie viel noch kommt. */
.header__progress {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 2px;
  background: var(--moss);
  transform: scaleX(0);
  transform-origin: 0 50%;
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.header.is-stuck .header__progress { opacity: 1; }

.brand { display: flex; align-items: center; }
.brand img {
  width: clamp(150px, 16vw, 190px);
  height: auto;
}

.nav { display: flex; align-items: center; gap: clamp(1.1rem, 2.4vw, 2rem); }

.nav__link {
  position: relative;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--text-muted);
  transition: color 0.2s var(--ease);
}
.nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 1px;
  background: var(--moss);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s var(--ease);
}
.nav__link:hover,
.nav__link.is-active { color: #fff; }
.nav__link:hover::after,
.nav__link.is-active::after { transform: scaleX(1); transform-origin: left; }

.header__cta { display: flex; align-items: center; gap: 0.75rem; }

.burger {
  display: none;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
}
.burger span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--text);
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}
.burger span + span { margin-top: 5px; }
.burger[aria-expanded='true'] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded='true'] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile-Menü */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 99;
  display: grid;
  align-content: center;
  gap: 0.4rem;
  padding: 6rem var(--gutter) 3rem;
  background: rgba(11, 11, 13, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity 0.3s var(--ease), transform 0.35s var(--ease), visibility 0.3s;
}
.mobile-nav.is-open { opacity: 1; visibility: visible; transform: none; }
.mobile-nav a {
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line);
  font-size: clamp(1.4rem, 7vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #fff;
}
.mobile-nav a:last-of-type { border-bottom: 0; }
.mobile-nav .btn { margin-top: 1.6rem; justify-self: start; }

.mobile-nav__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  margin-top: 2.2rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}
.mobile-nav__foot a {
  padding: 0;
  border: 0;
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0;
}
.mobile-nav__foot a:hover { color: var(--moss); }

/* --- Hero ----------------------------------------------------------------- */
.hero {
  position: relative;
  padding-top: clamp(8rem, 16vh, 11rem);
  padding-bottom: var(--section-y);
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: -22%;
  right: -12%;
  width: min(760px, 85vw);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(88, 100, 60, 0.42), transparent 62%);
  filter: blur(30px);
  pointer-events: none;
}

.hero__head { position: relative; }

.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: end;
  margin-top: clamp(2.25rem, 4.5vw, 3.5rem);
}

.hero__title {
  font-size: clamp(1.7rem, 0.6rem + 5.4vw, 4.9rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
}
.hero__title span { display: block; }
.hero__title .is-accent {
  color: var(--moss);
  font-style: italic;
  font-weight: 600;
}

.hero__text {
  max-width: 46ch;
  color: var(--text-muted);
  font-size: clamp(1.02rem, 0.98rem + 0.3vw, 1.18rem);
}

.hero__figure {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  isolation: isolate;
}
.hero__figure img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.hero__figure::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(88, 100, 60, 0.2), transparent 45%, rgba(11, 11, 13, 0.55));
}

.hero__badge {
  position: absolute;
  left: clamp(0.9rem, 3%, 1.5rem);
  bottom: clamp(0.9rem, 3%, 1.5rem);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 100px;
  background: rgba(11, 11, 13, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--cream);
}
.hero__badge .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--moss);
  box-shadow: 0 0 0 0 rgba(156, 176, 104, 0.6);
  animation: pulse 2.6s infinite;
}

@keyframes pulse {
  70% { box-shadow: 0 0 0 11px rgba(156, 176, 104, 0); }
  100% { box-shadow: 0 0 0 0 rgba(156, 176, 104, 0); }
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2.4rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}
.hero__meta dt {
  color: var(--text-dim);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.hero__meta dd {
  margin: 0.35rem 0 0;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--cream);
}

.hero__cue {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 3rem;
  color: var(--text-dim);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: color 0.25s var(--ease);
}
.hero__cue:hover { color: var(--moss); }
.hero__cue svg { width: 15px; height: 15px; animation: nudge 2.4s ease-in-out infinite; }

@keyframes nudge {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}

/* --- Ticker --------------------------------------------------------------- */
.ticker {
  border-block: 1px solid var(--line);
  background: var(--bg-alt);
  padding-block: 1.05rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker__track {
  display: flex;
  width: max-content;
  animation: slide 38s linear infinite;
}
.ticker ul { display: flex; align-items: center; gap: 2.75rem; padding-right: 2.75rem; }
.ticker li {
  display: flex;
  align-items: center;
  gap: 2.75rem;
  color: var(--text-dim);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ticker li::after {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--moss-deep);
}

@keyframes slide {
  to { transform: translateX(-50%); }
}

/* --- Über mich ------------------------------------------------------------ */
.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2.5rem, 6vw, 4.5rem);
  align-items: start;
}

.about__figure {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.about__figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; }

.about__quote {
  margin-top: 1.5rem;
  padding: 1.35rem 1.5rem;
  border-left: 2px solid var(--moss);
  background: var(--surface);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--cream);
  font-size: 0.98rem;
  font-style: italic;
  line-height: 1.6;
}

/* Bewusst ohne Kästen: Die Leistungen weiter unten sind Karten. Vier weitere
   Karten hier machen die Seite zu einer Kachelwüste – Trennlinien reichen. */
.traits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.6rem, 3vw, 2.4rem) clamp(1.6rem, 3vw, 2.75rem);
  margin-top: 3rem;
}

.trait {
  padding-top: 1.3rem;
  border-top: 1px solid var(--line);
  transition: border-color 0.35s var(--ease);
}
.trait:hover { border-top-color: var(--moss); }

.trait h3 {
  margin-bottom: 0.5rem;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
}
.trait p { color: var(--text-muted); font-size: 0.9rem; line-height: 1.65; }
.trait__num {
  display: block;
  margin-bottom: 0.8rem;
  color: var(--moss);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  font-variant-numeric: tabular-nums;
}

/* --- Karten-Grid (Unternehmen / Leistungen / Passionen) ------------------- */
.grid {
  display: grid;
  gap: 1rem;
  margin-top: 3.2rem;
}
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.6rem, 3vw, 2.1rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  transition: border-color 0.35s var(--ease), transform 0.35s var(--ease);
}
.card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--moss), transparent);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}
.card:hover { border-color: var(--moss-deep); transform: translateY(-4px); }
.card:hover::before { opacity: 1; }

.card__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 1.35rem;
  border-radius: 13px;
  background: var(--moss-soft);
  color: var(--moss);
}
.card__icon svg { width: 22px; height: 22px; }

.card__label {
  margin-bottom: 0.5rem;
  color: var(--text-dim);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.card h3 { font-size: 1.2rem; margin-bottom: 0.7rem; }

.card p { color: var(--text-muted); font-size: 0.92rem; line-height: 1.65; }

.card ul {
  margin-top: 1.3rem;
  display: grid;
  gap: 0.55rem;
}
.card ul li {
  position: relative;
  padding-left: 1.3rem;
  color: var(--text-muted);
  font-size: 0.88rem;
}
.card ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--moss-deep);
}

.card__foot { margin-top: auto; padding-top: 1.5rem; }

/* --- Unternehmen als Zeilen ----------------------------------------------
   Bewusst kein Kartenraster: Die Leistungen direkt darunter sind Karten, und
   zwei gleich aussehende Raster hintereinander lesen sich als eine einzige
   lange Fläche.                                                             */
.orgs { margin-top: 3.2rem; border-top: 1px solid var(--line); }

.org {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0 clamp(1.25rem, 3vw, 2.5rem);
  padding: clamp(1.5rem, 3vw, 2.1rem) clamp(0.5rem, 1.5vw, 1.25rem);
  border-bottom: 1px solid var(--line);
  transition: background-color 0.35s var(--ease), padding-left 0.35s var(--ease);
}
.org:hover { background: var(--surface); padding-left: clamp(1rem, 2.5vw, 2rem); }

.org__num {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  transition: color 0.35s var(--ease);
}
.org:hover .org__num { color: var(--moss); }

.org h3 {
  font-size: clamp(1.2rem, 1rem + 0.9vw, 1.6rem);
  letter-spacing: -0.025em;
}
.org p {
  grid-column: 2;
  margin-top: 0.7rem;
  max-width: 56ch;
  color: var(--text-muted);
  font-size: 0.94rem;
  -webkit-hyphens: auto;
  hyphens: auto;
}

.org__tag {
  justify-self: end;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  color: var(--text-dim);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: border-color 0.35s var(--ease), color 0.35s var(--ease);
}
.org:hover .org__tag { border-color: var(--moss-deep); color: var(--cream); }

/* --- Timeline ------------------------------------------------------------- */
.timeline {
  position: relative;
  margin-top: 3.4rem;
  padding-left: 1.9rem;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: linear-gradient(180deg, var(--moss), var(--moss-deep) 55%, transparent);
}

.timeline__item { position: relative; padding-bottom: 2.4rem; }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item::before {
  content: '';
  position: absolute;
  left: calc(-1.9rem + 1px);
  top: 0.5rem;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--moss);
}
.timeline__year {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--moss);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}
.timeline__item h3 { font-size: 1.08rem; margin-bottom: 0.45rem; }
.timeline__item p { color: var(--text-muted); font-size: 0.93rem; max-width: 58ch; }

.timeline-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2.5rem, 6vw, 4.5rem);
  align-items: start;
}
.timeline-figure {
  position: sticky;
  top: 120px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.timeline-figure img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.timeline-figure figcaption {
  padding: 1.05rem 1.25rem;
  background: var(--surface);
  border-top: 1px solid var(--line);
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1.55;
}

/* --- Passionen ------------------------------------------------------------ */
/* Bento-Raster: Die Fliegerei bekommt die große Kachel, der Rest reiht sich
   drumherum. Bricht auf schmalen Schirmen auf eine Spalte herunter. */
.passions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 3.2rem;
}

.passion {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 215px;
  padding: 1.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  transition: border-color 0.35s var(--ease), transform 0.35s var(--ease);
}

.passion__note {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 1.4rem;
  padding: 0.5rem 0.95rem;
  border: 1px solid var(--line-strong);
  border-radius: 100px;
  color: var(--cream);
  font-size: 0.8rem;
  font-weight: 500;
}
.passion__note svg { width: 15px; height: 15px; color: var(--moss); margin: 0; }
.passion::after {
  content: '';
  position: absolute;
  inset: auto -30% -55% auto;
  width: 210px;
  height: 210px;
  background: radial-gradient(circle, rgba(88, 100, 60, 0.5), transparent 68%);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.passion:hover { border-color: var(--moss-deep); transform: translateY(-4px); }
.passion:hover::after { opacity: 1; }
.passion > * { position: relative; z-index: 1; }
.passion svg { width: 26px; height: 26px; color: var(--moss); margin-bottom: auto; }
.passion h3 { margin: 1.3rem 0 0.5rem; font-size: 1.1rem; }
.passion p { color: var(--text-muted); font-size: 0.88rem; line-height: 1.6; }

.passion--wide {
  grid-column: span 2;
  grid-row: span 2;
  padding: clamp(1.8rem, 3vw, 2.4rem);
  background:
    radial-gradient(circle at 85% 8%, rgba(88, 100, 60, 0.28), transparent 58%),
    var(--surface);
}
/* Die kleinen Kacheln schieben ihren Text nach unten. Bei der doppelt so hohen
   Kachel entstünde dadurch oben ein leeres Drittel – hier also mittig setzen. */
.passion--wide { justify-content: center; }
.passion--wide svg { width: 32px; height: 32px; margin-bottom: 0; }
.passion--wide h3 { font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.7rem); margin-top: 1.6rem; }
.passion--wide p { font-size: 0.95rem; max-width: 46ch; }
.passion--wide p + p { margin-top: 0.85rem; }

/* --- Kontakt -------------------------------------------------------------- */
.contact {
  position: relative;
  padding: clamp(2.5rem, 6vw, 4.5rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 82% 12%, rgba(88, 100, 60, 0.32), transparent 55%),
    var(--surface);
  overflow: hidden;
}

.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.contact-list { display: grid; gap: 0.75rem; }

.contact-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.05rem 1.3rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(11, 11, 13, 0.5);
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease),
    transform 0.3s var(--ease);
}
.contact-item:hover {
  border-color: var(--moss-deep);
  background: rgba(11, 11, 13, 0.75);
  transform: translateX(4px);
}
/* Die E-Mail ist der eigentliche Kontaktweg – der Rest ist Beiwerk. */
.contact-item--primary {
  border-color: var(--moss-deep);
  background: linear-gradient(100deg, var(--moss-soft), rgba(11, 11, 13, 0.5));
}
.contact-item--primary:hover { border-color: var(--moss); }
.contact-item--primary .contact-item__value { color: var(--cream); }

.contact-item svg { width: 19px; height: 19px; color: var(--moss); flex: none; }
.contact-item__body { min-width: 0; }
.contact-item__label {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.contact-item__value {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.98rem;
  font-weight: 600;
  color: #fff;
  overflow-wrap: anywhere;
}

/* --- Footer --------------------------------------------------------------- */
.footer {
  border-top: 1px solid var(--line);
  background: var(--bg-alt);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
}

.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 3.5rem);
  padding-bottom: 2.8rem;
  border-bottom: 1px solid var(--line);
}
.footer__brand img { width: 175px; margin-bottom: 1.3rem; }
.footer__brand p {
  max-width: 24ch;
  color: var(--cream);
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.3rem);
  line-height: 1.45;
  letter-spacing: -0.015em;
}

/* Schlusszeile: Absender, Rechtliches und der Weg zurück nach oben. */
.to-top {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: color 0.25s var(--ease);
}
.to-top:hover { color: var(--moss); }
.to-top span {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.to-top:hover span { border-color: var(--moss); transform: translateY(-2px); }
.to-top svg { width: 13px; height: 13px; }

.footer h4 {
  margin-bottom: 1.1rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.footer nav { display: grid; gap: 0.65rem; }
.footer nav a { color: var(--text-muted); font-size: 0.92rem; transition: color 0.2s var(--ease); }
.footer nav a:hover { color: var(--moss); }

.socials { display: flex; gap: 0.6rem; margin-top: 0.2rem; }
.socials a {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--text-muted);
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.socials a:hover { color: var(--moss); border-color: var(--moss); transform: translateY(-3px); }
.socials svg { width: 18px; height: 18px; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.8rem;
  color: var(--text-dim);
  font-size: 0.82rem;
}
.footer__bottom nav { display: flex; gap: 1.5rem; }

/* --- Unterseiten ---------------------------------------------------------- */
.page-hero {
  padding-top: clamp(8rem, 15vh, 10rem);
  padding-bottom: clamp(2rem, 5vw, 3.5rem);
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  top: -55%;
  right: -8%;
  width: min(620px, 80vw);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(88, 100, 60, 0.3), transparent 62%);
  filter: blur(30px);
  pointer-events: none;
}
.page-hero > .shell { position: relative; }

.page-title {
  font-size: clamp(2.1rem, 1.2rem + 3.6vw, 3.9rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
}
.page-hero .lead { margin-top: 1.6rem; }

/* Brotkrumen auf den Detailseiten der Passionen. */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 1.4rem;
  color: var(--text-dim);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}
.crumbs a { color: var(--text-muted); transition: color 0.2s var(--ease); }
.crumbs a:hover { color: var(--moss); }

/* --- Einstiegsraster auf der Startseite ----------------------------------- */
.hub {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 3.2rem;
}

.hub__item {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.7rem, 3vw, 2.3rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  transition: border-color 0.35s var(--ease), transform 0.35s var(--ease);
}
.hub__item::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--moss), transparent);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}
.hub__item:hover { border-color: var(--moss-deep); transform: translateY(-4px); }
.hub__item:hover::before { opacity: 1; }
.hub__item:hover .text-link svg { transform: translateX(4px); }

.hub__num {
  margin-bottom: 1.1rem;
  color: var(--moss);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  font-variant-numeric: tabular-nums;
}
.hub__item h3 { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.55rem); margin-bottom: 0.7rem; }
.hub__item > p {
  margin-bottom: 1.6rem;
  color: var(--text-muted);
  font-size: 0.93rem;
  -webkit-hyphens: auto;
  hyphens: auto;
}
.hub__item .text-link { margin-top: auto; }

/* --- Ablauf in drei Schritten --------------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.6rem, 3vw, 2.5rem);
  margin-top: 3.2rem;
  counter-reset: none;
}
.step { padding-top: 1.4rem; border-top: 1px solid var(--line); transition: border-color 0.35s var(--ease); }
.step:hover { border-top-color: var(--moss); }
.step__num {
  display: block;
  margin-bottom: 0.9rem;
  color: var(--moss);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  font-variant-numeric: tabular-nums;
}
.step h3 { font-size: 1.15rem; margin-bottom: 0.55rem; }
.step p {
  color: var(--text-muted);
  font-size: 0.93rem;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* --- Kontakt-Aufruf am Fuß der Unterseiten -------------------------------- */
.cta {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
  padding: clamp(2.25rem, 5vw, 3.75rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 85% 15%, rgba(88, 100, 60, 0.3), transparent 55%),
    var(--surface);
}
.cta .btn-row { margin-top: 0; justify-content: flex-start; }

/* Hervorgehobener Hinweis auf einer Textseite, z. B. der Podcast. */
.callout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  margin: 2rem 0;
  padding: 1.5rem 1.6rem;
  border: 1px solid var(--line);
  border-left: 2px solid var(--moss);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--surface);
}
.callout h3 { margin: 0 0 0.4rem; font-size: 1.05rem; }
.callout p { margin: 0; color: var(--text-muted); font-size: 0.92rem; }

/* Verlinkte Passionskacheln zeigen den Weiterlese-Hinweis unten. */
.passion--link .text-link { margin-top: 1.3rem; }
.passion--link:hover .text-link svg { transform: translateX(4px); }

/* --- Legal-/Textseiten ---------------------------------------------------- */

.prose { max-width: 74ch; }
.prose h2 {
  margin: 2.8rem 0 0.9rem;
  font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
}
.prose h3 { margin: 1.9rem 0 0.6rem; font-size: 1.05rem; }
.prose p,
.prose li { color: var(--text-muted); font-size: 0.98rem; }
.prose p + p { margin-top: 0.9rem; }
.prose ul { margin: 0.9rem 0; display: grid; gap: 0.5rem; }
.prose ul li { position: relative; padding-left: 1.3rem; }
.prose ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--moss-deep);
}
.prose a { color: var(--moss); text-decoration: underline; text-underline-offset: 3px; }
/* Ein Button im Fließtext (z. B. der Podcast-Kasten) ist trotzdem ein Button.
   .prose a gewinnt mit 0,1,1 gegen .btn und .btn--ghost mit je 0,1,0 und
   verpasst dem Knopf sonst Unterstreichung und Moosgrün – letzteres macht
   zusätzlich den Hover wirkungslos, der genau auf diese Farbe wechselt. */
.prose .btn { text-decoration: none; }

/* Störsegmente in E-Mail-Adresse und Telefonnummer. Gerendert unsichtbar,
   im HTML-Text stehen sie mitten in der Adresse und machen sie unbrauchbar.
   display:none heißt außerdem: nicht vorgelesen und nicht mitkopiert. */
.cloak { display: none; }
.prose .btn--ghost { color: var(--text); }
.prose .btn--ghost:hover { color: var(--moss); }
.prose .btn--primary { color: #0b0b0d; }
.prose strong { color: var(--cream); }
.prose h2:target { scroll-margin-top: 110px; }

/* Inhaltsverzeichnis der Datenschutzerklärung – neun Abschnitte sind zu viel
   zum Durchscrollen, wenn jemand gezielt einen davon sucht. */
.toc {
  max-width: 74ch;
  margin: 0 0 3rem;
  padding: 1.5rem 1.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.toc h2 {
  margin: 0 0 1rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
}
/* Spaltenweise füllen, nicht zeilenweise: Sonst liest die linke Spalte
   01, 03, 05, 07, 09. Die Zeilenzahl passt zu den neun Abschnitten – kommt
   einer dazu, hier auf 6 erhöhen. */
.toc ol {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(5, auto);
  grid-auto-columns: minmax(0, 1fr);
  gap: 0.55rem 1.75rem;
  counter-reset: toc;
}
.toc li { counter-increment: toc; }
.toc a {
  display: flex;
  gap: 0.7rem;
  color: var(--text-muted);
  font-size: 0.92rem;
  text-decoration: none;
  transition: color 0.2s var(--ease);
}
.toc a::before {
  content: counter(toc, decimal-leading-zero);
  color: var(--moss);
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding-top: 0.15em;
}
.toc a:hover { color: var(--moss); }

@media (max-width: 620px) {
  .toc ol { grid-auto-flow: row; grid-template-rows: none; }
}

.todo {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border: 1px dashed var(--moss-deep);
  border-radius: 5px;
  background: var(--moss-soft);
  color: var(--moss);
  font-size: 0.82rem;
  font-weight: 600;
}

.notice {
  max-width: 74ch;
  margin: 1.6rem 0;
  padding: 1.2rem 1.4rem;
  border: 1px solid var(--line);
  border-left: 2px solid var(--moss);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--surface);
}
.notice p { color: var(--text-muted); font-size: 0.92rem; }

/* --- Scroll-Reveal --------------------------------------------------------
   Bewusst an .js gekoppelt: Die Klasse setzt ein Inline-Skript im <head>.
   Läuft kein JavaScript – blockiert, Fehler, alter Browser –, wird gar nichts
   erst versteckt. Ohne diese Kopplung bliebe die Seite in dem Fall komplett
   leer, weil alle Abschnitte auf opacity: 0 stünden.                        */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 980px) {
  .hero__grid,
  .about__grid,
  .timeline-grid,
  .contact__grid { grid-template-columns: minmax(0, 1fr); }

  .hero__figure { order: -1; max-width: 460px; }
  .hero__figure img { aspect-ratio: 4 / 3; }
  .about__figure img { aspect-ratio: 16 / 10; }
  .timeline-figure { position: static; max-width: 460px; }
  .timeline-figure img { aspect-ratio: 4 / 3; }

  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }

  .cta { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: minmax(0, 1fr); }

  .passions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .passion--wide { grid-column: span 2; grid-row: auto; }
}

@media (max-width: 620px) {
  .passions { grid-template-columns: minmax(0, 1fr); }
  .passion--wide { grid-column: span 1; }
  .passion { min-height: 0; }
}

@media (max-width: 760px) {
  .nav,
  .header__cta .btn { display: none; }
  .burger { display: grid; }

  .grid--3,
  .grid--2,
  .hub,
  .traits { grid-template-columns: minmax(0, 1fr); }

  /* Der Tag rutscht unter den Namen, statt die Zeile zu quetschen. */
  .org { grid-template-columns: auto minmax(0, 1fr); }
  .org__tag { grid-column: 2; justify-self: start; margin-top: 1rem; }
  .org p { margin-top: 0.6rem; }

  .hero__meta { gap: 1.6rem 2.2rem; }
  .footer__top { grid-template-columns: minmax(0, 1fr); }
  .footer__bottom { flex-direction: column; }
}

/* --- Motion / Print ------------------------------------------------------- */
@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;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

@media print {
  .header, .mobile-nav, .ticker, .hero__figure, .socials { display: none; }
  body { background: #fff; color: #000; }
}