/* ============================================================
   Gestaltungsebene
   ------------------------------------------------------------
   Liegt über styles.css und ändert dort nichts, sondern setzt
   gezielt um. So bleibt der Bestand unangetastet und die Ebene
   lässt sich am Stück wieder entfernen.

   Der Befund, der diese Ebene ausgelöst hat:

     Hero        hell        ┐
     Profil      hell        │ Der Einstieg sah aus wie jeder
     Kompetenz   dunkel      │ andere Abschnitt.
     Projekte    hell        ┐
     Laufbahn    hell        │ Vier helle Abschnitte am Stück.
     Rückmeldung hell        │ Dort verliert die Seite ihren
     Qualifikat. hell        ┘ Rhythmus.
     Kontakt     kupfer

   Dagegen zwei Eingriffe:

   1. Der Einstieg wird dunkel. Eine Bewerbungsseite hat genau
      einen Moment, in dem sie auffällt oder nicht - die erste
      Bildschirmhöhe. Heller Text auf tiefem Grün trägt die
      Typografie, statt sie im Papierton verschwinden zu lassen.

   2. Die Laufbahn wird dunkel. Damit wechseln sich helle und
      dunkle Abschnitte ab, statt sich zu häufen.

   Dazu: größere Schriftgrade im Einstieg und ein Primärknopf,
   der nicht mehr als Kupferfläche schreit.
   ============================================================ */

/* ------------------------------------------------------------
   1. Der Einstieg
   ------------------------------------------------------------ */

.hero {
  --hero-grund: #08191b;
  color: #eef4f1;
  background:
    /* Ein Lichtschein hinter der Überschrift, damit die Fläche
       nicht als geschlossener Block wirkt. Sehr flach gehalten -
       sichtbar wird er erst, wenn man ihn sucht. */
    radial-gradient(78% 58% at 12% 18%, rgba(76, 202, 144, .11), transparent 62%),
    radial-gradient(52% 44% at 88% 8%, rgba(212, 95, 50, .10), transparent 58%),
    var(--hero-grund);
}

/* Die Überschrift darf jetzt deutlich größer werden: Auf dunklem
   Grund trägt sie das, ohne erdrückend zu wirken. */
.hero h1 {
  max-width: 15ch;
  font-size: clamp(46px, 7.4vw, 124px);
  line-height: .94;
  letter-spacing: -.055em;
}

.hero h1 em {
  color: #f0a37f;
}

.hero .eyebrow {
  color: #7fd4a8;
}

.hero-lead {
  max-width: 58ch;
  color: rgba(238, 244, 241, .74);
}

/* Der Verfügbarkeitshinweis wird zur Marke statt zur Fußnote. */
.hero .availability {
  padding: 13px 18px 13px 15px;
  border: 1px solid rgba(169, 198, 187, .22);
  border-radius: 999px;
  background: rgba(255, 255, 255, .04);
}
.hero .availability strong { color: #eef4f1; }
.hero .availability span { color: rgba(238, 244, 241, .58); }

/* Das Foto bekommt einen weichen Rand statt einer harten Kante,
   damit es sich in die dunkle Fläche einfügt. */
.hero-visual img {
  border-radius: 14px;
}
.hero-visual figcaption {
  color: rgba(238, 244, 241, .62);
}

/* --- Kennzahlenleiste auf dunklem Grund --------------------- */

.hero .proof-strip {
  border-top-color: rgba(169, 198, 187, .16);
}
.hero .proof-strip > div {
  border-right-color: rgba(169, 198, 187, .14);
}
.hero .proof-strip strong {
  color: #ffffff;
}
.hero .proof-strip span {
  color: rgba(238, 244, 241, .5);
}

/* --- Knöpfe ------------------------------------------------- */

/* Vorher eine gefüllte Kupferfläche mit voller Rundung - der
   Standardknopf jedes Baukastens. Jetzt heller Grund auf dunkel:
   ruhiger, und der Kontrast erledigt die Betonung von selbst. */
.hero .button-primary {
  color: #08191b;
  background: #f4f1e9;
  border-color: transparent;
}
.hero .button-primary:hover {
  background: #ffffff;
}

.hero .button-quiet {
  color: #eef4f1;
  border-color: rgba(169, 198, 187, .3);
  background: transparent;
}
.hero .button-quiet:hover {
  border-color: rgba(169, 198, 187, .62);
  background: rgba(255, 255, 255, .05);
}

/* --- Kopfzeile über dem dunklen Einstieg -------------------- */

/* Solange nicht gescrollt wurde, steht die Kopfzeile über der
   dunklen Fläche und muss hell sein. Sobald sie ihren eigenen
   Hintergrund bekommt, gilt wieder die normale Farbgebung. */
.site-header:not(.is-scrolled) .brand-copy strong,
.site-header:not(.is-scrolled) .site-nav > a:not(.nav-cv) {
  color: #eef4f1;
}
.site-header:not(.is-scrolled) .brand-copy small {
  color: rgba(238, 244, 241, .55);
}
.site-header:not(.is-scrolled) .brand-mark {
  color: #08191b;
  background: #a9c6bb;
}
.site-header:not(.is-scrolled) .nav-cv {
  color: #08191b;
  background: #f4f1e9;
}
.site-header:not(.is-scrolled) .nav-toggle span {
  background: #eef4f1;
}

/* ------------------------------------------------------------
   2. Die Laufbahn — bricht die Kette heller Abschnitte
   ------------------------------------------------------------ */

.career-section {
  color: #eef4f1;
  background: #0d2325;
}
.career-section h2 { color: #ffffff; }
.career-section .section-kicker { color: #f0a37f; }
.career-section p { color: rgba(238, 244, 241, .72); }

.career-section .timeline-item {
  border-color: rgba(169, 198, 187, .16);
}
.career-section .timeline-item h3 { color: #ffffff; }
.career-section .timeline-item .company { color: #7fd4a8; }
.career-section .timeline-status {
  color: #08191b;
  background: #a9c6bb;
}
.career-section .button,
.career-section .link-more {
  color: #eef4f1;
  border-color: rgba(169, 198, 187, .3);
  background: transparent;
}
.career-section .button:hover,
.career-section .link-more:hover {
  border-color: rgba(169, 198, 187, .6);
  background: rgba(255, 255, 255, .05);
}
.career-section summary { color: #a9c6bb; }

/* ------------------------------------------------------------
   3. Typografie der Abschnittsköpfe
   ------------------------------------------------------------
   Die Sprünge zwischen den Ebenen waren zu klein. Ein größerer
   Abstand zwischen Abschnittsüberschrift und Fließtext macht die
   Gliederung auf einen Blick lesbar - ohne ein einziges neues
   Element. */

.section h2 {
  letter-spacing: -.042em;
  line-height: 1.03;
}

.section-kicker {
  font-size: 10px;
  letter-spacing: .16em;
}

/* ------------------------------------------------------------
   4. Ruhigere Kanten
   ------------------------------------------------------------
   Vollrunde Knöpfe und kräftige Schatten lassen eine Seite
   schnell nach Baukasten aussehen. Etwas weniger Radius und ein
   flacherer Schatten wirken wertiger. */

.button,
.nav-cv,
.case-link {
  border-radius: 10px;
}

.project-explorer {
  box-shadow: 0 24px 60px rgba(9, 33, 36, .07);
}

@media (prefers-reduced-motion: no-preference) {
  .hero .button-primary,
  .hero .button-quiet {
    transition: background 220ms cubic-bezier(0.23, 1, 0.32, 1),
                border-color 220ms cubic-bezier(0.23, 1, 0.32, 1),
                transform 140ms cubic-bezier(0.23, 1, 0.32, 1);
  }
}

/* ============================================================
   5. Typografie und Weißraum
   ------------------------------------------------------------
   Der Unterschied zwischen "solide" und "herausragend" liegt bei
   einer Textseite selten in einem neuen Element. Er liegt in der
   Größe der Sprünge und in der Luft dazwischen.
   ============================================================ */

/* Abschnittsüberschriften tragen die Seite - sie dürfen groß sein. */
.section h2 {
  font-size: clamp(34px, 4.9vw, 72px);
}

/* Und brauchen Raum. Die Abschnitte standen zu dicht beieinander,
   dadurch verschwamm die Gliederung beim Scrollen. */
.section {
  padding-block: clamp(96px, 11vw, 168px);
}

/* --- Die Abschnittsnummer wird sichtbar --------------------- */
/* Vorher: "03 · Projekte", klein in Monospace, kaum wahrnehmbar.
   Jetzt trägt die Ziffer in der Anzeigenschrift, das Wort bleibt
   die kleine Marke daneben. Ein rein typografisches Mittel -
   kein zusätzliches Element, keine Grafik. */

.section-kicker {
  display: flex;
  align-items: baseline;
  gap: 13px;
}

.section-kicker::first-line { /* Rückfall, falls kein JS greift */
  letter-spacing: .16em;
}

.kicker-ziffer {
  color: var(--copper);
  font-family: var(--font-display);
  font-size: clamp(30px, 3.4vw, 46px);
  font-weight: 400;
  line-height: .8;
  letter-spacing: -.03em;
  opacity: .95;
}

.kicker-wort {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* Auf dunklem Grund braucht die Ziffer mehr Leuchtkraft. */
.career-section .kicker-ziffer { color: #f0a37f; }

/* Die Linie hinter dem Kicker beginnt jetzt hinter dem Wort. */
.js-motion .section-kicker::after { top: auto; bottom: 6px; }

/* --- Das Zitat als Zitat setzen ----------------------------- */
/* Eine schriftliche Rückmeldung aus der Berufspraxis ist das
   stärkste einzelne Element dieser Seite - stärker als jede
   Selbstbeschreibung. Sie war bisher gesetzt wie Fließtext. */

.testimonial-section blockquote p:first-of-type,
.testimonial-card > blockquote > p:first-child {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.7vw, 38px);
  font-weight: 400;
  font-style: italic;
  line-height: 1.28;
  letter-spacing: -.02em;
  color: var(--forest);
}

/* --- Die Projektkarte hebt sich deutlicher ab --------------- */
.project-explorer {
  border-color: rgba(16, 43, 46, .1);
  box-shadow:
    0 2px 4px rgba(9, 33, 36, .03),
    0 12px 24px rgba(9, 33, 36, .05),
    0 40px 80px rgba(9, 33, 36, .07);
}

/* --- Kennzahlen bekommen Ziffernbreite ---------------------- */
/* Ohne Tabellenziffern springt die Breite beim Hochzählen und die
   ganze Zeile zappelt. */
.proof-strip strong,
.case-metrics strong,
.project-metrics strong {
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

@media (max-width: 820px) {
  .section { padding-block: clamp(72px, 14vw, 104px); }
  .section-kicker { gap: 10px; }
}

/* --- Die Kickerlinie wird Teil der Zeile -------------------- */
/* Vorher absolut gesetzt bei left: calc(100% + 14px) mit fester
   Breite - dadurch ragte sie über den rechten Rand hinaus und
   machte die Seite auf schmalen Bildschirmen 44 Pixel breiter als
   das Fenster. Jetzt liegt sie im Flexfluss des Kickers und nimmt
   den Platz, der übrig ist. Überlaufen kann sie damit nicht mehr. */

.js-motion .section-kicker::after {
  position: static;
  flex: 1 1 auto;
  width: auto;
  max-width: 148px;
  align-self: center;
  margin-left: 4px;
}

/* --- Die Ziffer braucht auf jedem Untergrund Kontrast -------- */
/* Auf der kupfernen Kontaktfläche stand Kupfer auf Kupfer: Die
   Ziffer war schlicht unsichtbar. Auf den dunklen Flächen ist das
   Kupfer zu dunkel und muss aufgehellt werden. */

.contact-section .kicker-ziffer { color: rgba(255, 255, 255, .92); }
.contact-section .kicker-wort { color: rgba(255, 255, 255, .78); }
.contact-section .section-kicker::after { background: rgba(255, 255, 255, .55); }

.competence-section .kicker-ziffer,
.career-section .kicker-ziffer { color: #f0a37f; }
.competence-section .kicker-wort,
.career-section .kicker-wort { color: rgba(240, 163, 127, .85); }

/* ============================================================
   6. Die Projektübersicht
   ------------------------------------------------------------
   Als Liste gesetzt, nicht als Kachelraster. Eine Liste liest
   sich wie ein Inhaltsverzeichnis - sie beantwortet in drei
   Sekunden die Frage "was hat der Mensch gemacht?", und genau
   diese drei Sekunden bekommt eine Bewerbungsseite.
   ============================================================ */

.projekt-index {
  display: grid;
  gap: 0;
  margin: 0 0 34px;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.projekt-index li { border-bottom: 1px solid var(--line); }

.projekt-index button {
  width: 100%;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) minmax(0, .82fr) auto 26px;
  gap: 20px;
  align-items: baseline;
  padding: 21px 6px;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.pi-nummer {
  color: var(--copper);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
}

.pi-titel {
  color: var(--ink);
  font-size: clamp(19px, 2.3vw, 30px);
  font-weight: 600;
  letter-spacing: -.028em;
  line-height: 1.1;
}

.pi-zeitraum {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .04em;
}

.pi-stand {
  padding: 4px 11px;
  color: var(--forest);
  background: var(--sage);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.pi-pfeil {
  color: var(--copper);
  font-size: 16px;
  text-align: right;
}

/* Die Zeile rückt beim Überfahren leicht nach rechts - dieselbe
   Geste wie beim Anklicken, nur angedeutet. Nur bei echtem
   Zeiger: Auf Tippgeräten bliebe der Zustand nach dem Tippen
   hängen. */
@media (hover: hover) and (pointer: fine) {
  .projekt-index button {
    transition: background 220ms cubic-bezier(0.23, 1, 0.32, 1);
  }
  .pi-titel, .pi-pfeil {
    transition: transform 260ms cubic-bezier(0.23, 1, 0.32, 1),
                color 220ms cubic-bezier(0.23, 1, 0.32, 1);
  }
  .projekt-index button:hover { background: rgba(16, 43, 46, .035); }
  .projekt-index button:hover .pi-titel { color: var(--forest); transform: translateX(5px); }
  .projekt-index button:hover .pi-pfeil { transform: translateX(5px); }
}

.projekt-index button:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: -3px;
}

@media (max-width: 880px) {
  .projekt-index button {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 6px 14px;
    padding: 17px 4px;
  }
  .pi-nummer { grid-row: 1 / span 2; }
  .pi-zeitraum { grid-column: 2; grid-row: 2; }
  .pi-stand { grid-column: 3; grid-row: 1; }
  .pi-pfeil { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .projekt-index button:hover .pi-titel,
  .projekt-index button:hover .pi-pfeil { transform: none; }
}