/* Startseite (Entwurf C „Keynote“, gewählt 13.11.2026): nach .claude/skills/apple-design (§7, §12, §14, §15, §16).
   Eine Schrift (Inter), Hierarchie aus Gewicht, Größe und Zeilenhöhe; Laufweite je Größe;
   durchscheinende Navigation; Kapitel, die beim Scrollen auftreten (nur CSS, nur ohne
   Bewegungsverzicht). */
.start {
  --flaeche: light-dark(#f4f6f8, #0f1c30);
  --flaeche-hoch: light-dark(#ffffff, #18294a);
  --nacht: #0b1424;
  --nacht-text: #f2f5f8;
  --nacht-neben: #aab6c6;
  --nacht-akzent: #8fd8dc;
  --rund: 1.125rem;
}

/* Kopf, Sprungabstand und Material stehen in basis.css (für alle Seiten). */
.start main {
  max-width: none;
  padding: 0;
}

.start .fuss {
  max-width: var(--breite);
}

/* Gemeinsame Bausteine */
.start h2 {
  font-size: clamp(2.25rem, 1.5rem + 3vw, 3.75rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.start .handlungen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.start .knopf {
  display: inline-block;
  padding: 0.8rem 1.5rem;
  border-radius: 999px;
  background: var(--petrol);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: transform 150ms ease-out;
}

.start .knopf:hover {
  transform: translateY(-2px);
}

.start .knopf:active {
  transform: scale(0.97);
}

.start .knopf.hell {
  background: var(--nacht-akzent);
  color: var(--nacht);
}

.start .leise {
  font-weight: 600;
  text-decoration: none;
}

.start .leise:hover {
  text-decoration: underline;
}

/* Auftritt */
.auftritt {
  display: grid;
  justify-items: center;
  max-width: var(--breite);
  margin-inline: auto;
  padding: clamp(2.5rem, 7vw, 6rem) 1rem clamp(3rem, 7vw, 6rem);
  text-align: center;
}

.auftritt .foto img {
  display: block;
  width: clamp(9rem, 5rem + 10vw, 14rem);
  height: clamp(9rem, 5rem + 10vw, 14rem);
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 18%;
}

.start .gross-name {
  margin: 1.25rem 0 0;
  /* an die Breite gebunden, damit „Alexander“ auch bei 200 % Schrift in eine Zeile passt */
  font-size: min(clamp(3rem, 1rem + 9vw, 8.5rem), 16vw);
  hyphens: manual;
  overflow-wrap: normal;
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.045em;
  animation: auftritt 2200ms cubic-bezier(0.2, 0.8, 0.2, 1) 150ms both;
}

.start .leitsatz {
  max-width: 34em;
  margin: 1.75rem 0 2rem;
  color: var(--schrift-neben);
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.3125rem);
  line-height: 1.5;
}

/* Belegfinder: Fachgebiete als Pillen, Belege als gruppierte Listen */
.start .belegfinder {
  padding: clamp(3rem, 8vw, 6rem) 1rem;
  background: var(--flaeche);
  text-align: center;
}

.start .belegfinder > h2,
.start .bf-hinweis {
  max-width: var(--breite);
  margin-inline: auto;
}

.start .belegfinder > h2 {
  margin-top: 0;
  margin-bottom: 0.75rem;
}

.start .bf-hinweis {
  max-width: 36em;
  margin-bottom: 2rem;
  color: var(--schrift-neben);
}

.start .faecher {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  max-width: var(--breite);
  margin: 0 auto 2.5rem;
  padding: 0;
  list-style: none;
}

.start .faecher a {
  --aktiv-farbe: var(--grund);
  --aktiv-rand: var(--schrift);
  --aktiv-grund: var(--schrift);
  display: inline-block;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--rand);
  border-radius: 999px;
  background: var(--flaeche-hoch);
  color: var(--schrift);
  font-weight: 600;
  text-decoration: none;
  transition: transform 150ms ease-out;
}

.start .faecher a:hover {
  transform: translateY(-2px);
}

.start .faecher a:active {
  transform: scale(0.97);
}

/* Abgesetzt über Schriftstärke statt Transparenz: hält 4,5:1 auch auf der gewählten Pille */
.start .faecher .anzahl {
  margin-left: 0.35em;
  font-weight: 400;
}

.start .gruppen {
  display: grid;
  gap: 2rem;
  max-width: var(--breite);
  margin-inline: auto;
  text-align: left;
}

.start .gruppe h3 {
  margin: 0 0 0.5rem 1rem;
  color: var(--schrift-neben);
  font-size: 0.9375rem;
  font-weight: 600;
}

.start .summe {
  margin: 0;
  padding: 1.25rem 1rem;
  border-radius: var(--rund);
  background: var(--flaeche-hoch);
  color: var(--schrift-neben);
}

.start .summe-zahl {
  display: block;
  color: var(--schrift);
  font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
}

.start .belege {
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: var(--rund);
  background: var(--flaeche-hoch);
  list-style: none;
}

.start .belege li + li {
  border-top: 1px solid var(--rand);
}

.start .belege a {
  display: grid;
  padding: 0.8rem 1rem;
  color: var(--schrift);
  text-decoration: none;
}

.start .belege a:hover {
  background: color-mix(in srgb, var(--flaeche) 60%, var(--flaeche-hoch));
}

.start .b-titel {
  order: -1;
  font-weight: 600;
}

.start .zeit,
.start .zusatz,
.start .gruppe h3 {
  color: var(--schrift-neben);
  font-size: var(--groesse-neben);
  letter-spacing: 0.01em; /* kleiner Text leicht offener (§15) */
}

@media (min-width: 60rem) {
  .start .gruppen {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
  }
}

/* Kennzahlen: eine Bühne, vier große Zahlen nebeneinander (14.11.2026, vorher je Zahl ein
   bildschirmhohes Kapitel). Die Ziffern tragen einen Verlauf vom Akzent ins Helle; das ist die
   eine bewusste Ausnahme von „keine Farbverläufe als Schmuck“ (Wunsch des Auftraggebers). */
.start .kennzahlen {
  padding: clamp(4rem, 10vw, 8rem) 1rem;
  background: var(--nacht);
  color: var(--nacht-text);
}

.start .kennzahlen ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2.5rem, 6vw, 4rem) 1.5rem;
  max-width: 76rem;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.start .kennzahlen li {
  text-align: center;
}

.start .kennzahlen a {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: transform 200ms ease-out;
}

.start .kennzahlen a:hover {
  transform: translateY(-4px);
}

.start .kennzahlen .zahl {
  display: block;
  color: var(--nacht-akzent); /* Rückfall, wenn background-clip: text fehlt */
  font-size: clamp(5rem, 2rem + 13vw, 11rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.06em;
}

@supports (background-clip: text) {
  .start .kennzahlen .zahl {
    background: linear-gradient(180deg, #f2f5f8 5%, var(--nacht-akzent) 60%, #3fa9b0 100%);
    background-clip: text;
    color: transparent;
  }
}

.start .kz-text {
  display: block;
  max-width: 16em;
  margin: 1rem auto 0;
  color: var(--nacht-neben);
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
  font-weight: 600;
  line-height: 1.5; /* mehrzeilig: 1,35 war zu eng */
}

.start .kennzahlen a:hover .kz-text {
  color: var(--nacht-text);
  text-decoration: underline;
}

@media (min-width: 60rem) {
  .start .kennzahlen ul {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .start .kennzahlen li + li {
    border-left: 1px solid rgb(255 255 255 / 12%);
  }
}

/* Projekte: vier Karten, die sich beim Scrollen übereinanderschieben (nur position: sticky) */
.kapitel-projekte {
  padding: clamp(3rem, 8vw, 6rem) 1rem clamp(4rem, 10vw, 8rem);
  background: var(--nacht);
  color: var(--nacht-text);
}

.kapitel-projekte h2 {
  margin: 0 auto clamp(2rem, 5vw, 3.5rem);
  text-align: center;
}

.pj-liste {
  display: grid;
  gap: clamp(1.5rem, 6vh, 4rem);
  max-width: 52rem;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.pj-liste li {
  position: sticky;
  top: 5.5rem;
}

/* jede Karte bleibt etwas tiefer stehen als die vorige: der Stapel bleibt sichtbar */
.pj-liste li:nth-child(2) {
  top: 6.75rem;
}

.pj-liste li:nth-child(3) {
  top: 8rem;
}

.pj-liste li:nth-child(4) {
  top: 9.25rem;
}

.pj-liste li:nth-child(5) {
  top: 10.5rem;
}

.pj-liste a {
  display: block;
  min-height: clamp(11rem, 30vh, 16rem);
  padding: clamp(1.5rem, 4vw, 2.75rem);
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 1.75rem;
  /* deckend, damit die Karte darunter nicht durchscheint */
  background: color-mix(in srgb, var(--nacht) 86%, white);
  box-shadow: 0 -1rem 2.5rem rgb(0 0 0 / 35%);
  color: var(--nacht-text);
  text-decoration: none;
}

.pj-liste h3 {
  margin: 0 0 0.5rem;
  font-size: clamp(1.75rem, 1.2rem + 2.6vw, 3rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.pj-liste p {
  max-width: 32em;
  margin: 0;
  color: var(--nacht-neben);
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.3125rem);
}

.pj-liste a:hover h3,
.pj-liste a:focus-visible h3 {
  color: var(--nacht-akzent);
}

/* Stapel nur, wenn eine Karte samt Versatz sicher ins Fenster passt (Handy quer, starke
   Vergrößerung): sonst bliebe der untere Teil einer stehenden Karte unerreichbar. */
@media (prefers-reduced-motion: reduce), (max-height: 30rem) {
  .pj-liste li {
    position: static;
  }
}

/* Tastatur: die Karte mit dem Fokus liegt oben, auch wenn eine spätere sie überdeckt */
.pj-liste li:focus-within {
  z-index: 1;
}

/* Abschluss */
.abschluss {
  padding: clamp(3.5rem, 9vw, 7rem) 1rem;
  text-align: center;
}

.abschluss h2 {
  margin: 0 0 1.5rem;
}

.abschluss p {
  margin: 0.75rem 0 0;
}

/* Bewegung (erweitert am 13.11.2026 auf Wunsch des Auftraggebers).
   1. Auftritt beim Laden: Foto, Name, Leitsatz und Knöpfe nacheinander.
   2. Beim Scrollen (nur CSS, nur wo der Browser es kann): Überschriften, Pillen, Kennzahlen,
      Bild und Punkte treten auf; der Auftritt zieht sich beim Wegscrollen zurück.
   Bei „Bewegung reduzieren“ schaltet basis.css alle Animationen ab. */
.auftritt .foto {
  animation: auftritt-foto 1400ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.start .leitsatz {
  animation: auftritt 1200ms cubic-bezier(0.2, 0.8, 0.2, 1) 1150ms both;
}

.auftritt .handlungen {
  animation: auftritt 1200ms cubic-bezier(0.2, 0.8, 0.2, 1) 1400ms both;
}

@keyframes auftritt {
  from {
    opacity: 0;
    transform: translateY(0.35em) scale(0.97);
  }
}

@keyframes auftritt-foto {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .auftritt {
      animation: zurueckziehen linear both;
      animation-timeline: view();
      animation-range: exit 10% exit 90%;
    }

    .start .kennzahlen li > a {
      animation: hereinkommen linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 100%;
    }

    .start .belegfinder > h2,
    .start .bf-hinweis,
    .start .faecher li,
    .start .gruppe,
    .kapitel-projekte h2,
    .abschluss h2,
    .abschluss p {
      animation: aufsteigen linear both;
      animation-timeline: view();
      /* endet, sobald das Element ganz im Bild steht: kein halb durchsichtiger Text (Kontrast) */
      animation-range: entry 0% entry 100%;
    }

    /* Pillen nacheinander: spätere kommen von weiter unten */
    .start .faecher li:nth-child(n + 3) {
      animation-name: aufsteigen-weit;
    }

    .start .faecher li:nth-child(n + 5) {
      animation-name: aufsteigen-weiter;
    }

    /* Karte, über die sich die nächste schiebt, tritt zurück. Eine stehende Karte hat selbst
       keinen Fortschritt mehr; den Takt gibt deshalb die nachrückende Karte (benannte
       Zeitleiste), vom Eintritt bis sie oben anschlägt. */
    .pj-liste {
      timeline-scope: --karte-2, --karte-3, --karte-4, --karte-5;
    }

    .pj-liste li:nth-child(2) {
      view-timeline-name: --karte-2;
    }

    .pj-liste li:nth-child(3) {
      view-timeline-name: --karte-3;
    }

    .pj-liste li:nth-child(4) {
      view-timeline-name: --karte-4;
    }

    .pj-liste li:nth-child(5) {
      view-timeline-name: --karte-5;
    }

    .pj-liste li:not(:last-child) a {
      animation: karte-zurueck linear both;
      animation-range: entry 0% contain 100%;
    }

    .pj-liste li:nth-child(1) a {
      animation-timeline: --karte-2;
    }

    .pj-liste li:nth-child(2) a {
      animation-timeline: --karte-3;
    }

    .pj-liste li:nth-child(3) a {
      animation-timeline: --karte-4;
    }

    .pj-liste li:nth-child(4) a {
      animation-timeline: --karte-5;
    }
  }
}

@keyframes hereinkommen {
  from {
    opacity: 0;
    transform: translateY(3rem) scale(0.94);
  }
}

@keyframes aufsteigen {
  from {
    opacity: 0;
    transform: translateY(1.5rem);
  }
}

@keyframes aufsteigen-weit {
  from {
    opacity: 0;
    transform: translateY(3rem);
  }
}

@keyframes aufsteigen-weiter {
  from {
    opacity: 0;
    transform: translateY(4.5rem);
  }
}

@keyframes karte-zurueck {
  to {
    transform: scale(0.94);
    filter: brightness(0.7);
  }
}

@keyframes zurueckziehen {
  to {
    opacity: 0.25;
    transform: scale(0.95);
  }
}