/* ============================================================
   MOBILE — ausschließlich Anpassungen für schmale Screens.

   WICHTIG: Diese Datei wird als LETZTES eingebunden und enthält
   NUR `@media (max-width: …)`-Blöcke. Dadurch greift hier nichts
   oberhalb der Breakpoints → die Desktop-Ansicht bleibt zu 100 %
   unberührt. Konflikte mit den anderen CSS-Dateien gewinnt diese
   Datei (spätere Quelle / ggf. !important gegen JS-Inline-Styles).

   Breakpoints (siehe tokens.css):
     Mobile   ≤ 640px
     Tablet   641–1024px
   ============================================================ */


/* ============================================================
   HOME (index.html)
   ============================================================ */

/* Hinweis: Die Scroll-Szene (Aufmacher/Sketches weichen zurück,
   Statement + Kacheln steigen davor auf) läuft auf Mobil MIT –
   wie auf dem Desktop. Sie wird hier bewusst NICHT neutralisiert. */

/* --- Hero: nur Porträt + Headline (bis 1080px) --------------
   Bis 1080px zeigt die Aufmacher-Kachel ausschließlich Porträt +
   Headline „BOLD MARCEL"; die CardSwap-Karten werden ausgeblendet
   (erst ab 1080px erscheinen sie, zweispaltig neben dem Porträt).
   Die Kachel bleibt ~bildschirmhoch (min-height), Inhalt gestapelt.
   Die Headline-Größen (Blocksatz) sind per clamp gedeckelt, damit
   sie auf Tablets nicht überproportional groß werden. */
@media (max-width: 1080px) {
  /* nur die Startseiten-Aufmacherkachel — NICHT die Timeline-Kachel
     (.hero-frame--timeline) der About-Seite, die feste Höhe braucht. */
  .page-home .hero-frame {
    height: auto;
    min-height: calc(100svh - 109px);
  }
  .hero {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
  /* CardSwap komplett entfernen (inkl. Layout-Spur) */
  .cardswap-wrap {
    display: none;
  }
  /* Textzelle füllt die Kachelhöhe → Headline vertikal mittig,
     Porträt kann an der Kachel-Unterkante verankert werden. */
  .hero__text {
    align-self: stretch;
  }
  /* Headline als Blocksatz: beide Wörter füllen die Kachel mit
     gleichem Abstand links/rechts (Richtwert = linker Abstand 24px).
     Beide Größen im gleichen Verhältnis (BOLD = 1,5× MARCEL →
     gleiche Wortbreite), per vw an die Kachelbreite gekoppelt und
     nach oben gedeckelt. */
  .hero__headline {
    top: -0.5rem;        /* etwas nach unten (Desktop-Wert ist -3rem) */
    align-self: center;  /* Cards sind raus → Headline mittig auf das Porträt zentriert */
  }
  .hero__word {
    font-size: clamp(2.5rem, 22.2vw, 140px);   /* MARCEL */
  }
  .hero__word--back {
    font-size: clamp(3.75rem, 33.8vw, 213px);  /* BOLD (1,5×) */
  }

  /* Porträt groß an der Unterkante (wie Desktop), Headline liegt
     als Schicht davor/dahinter → füllt die Kachel. */
  .hero__portrait {
    height: calc((100svh - 109px) * 0.92);   /* 92 % der Kachelhöhe (= 100svh − Header − Rahmen) */
    max-width: none;          /* base.css-Deckel (100%) aufheben → kein Stauchen; Überstand schneidet die Kachel an */
    top: auto;
    bottom: calc(var(--space-lg) * -1);
    transform: translateX(-50%);
  }
}

/* --- Startseite: CardSwap ab 1080px, ohne Überschneidung ----
   Ab 1080px erscheint die CardSwap wieder (zweispaltiger Hero).
   Die Karten sind fix 768px breit und würden im Bereich ~1080–1320px
   ins Porträt/die Headline ragen. Darum wird die CardSwap dort
   (verankert unten-rechts) herunterskaliert; ab ~1400px passt sie in
   voller Größe. Gestuft, weil CSS keinen fluiden scale aus der
   Viewport-Breite berechnen kann. Bewusste Regel für große Screens. */
@media (min-width: 1081px) and (max-width: 1240px) {
  .card-swap-container {
    transform-origin: top right;   /* schrumpft nach OBEN (statt unten-rechts) */
    transform: translate(28%, 0) scale(0.7);
  }
}
@media (min-width: 1241px) and (max-width: 1400px) {
  .card-swap-container {
    transform-origin: top right;   /* schrumpft nach OBEN (statt unten-rechts) */
    transform: translate(28%, 0) scale(0.87);
  }
}

/* --- Statement: deutlich größere Headline -------------------
   Die Aussage-Headline unter dem Aufmacher füllt auf Mobil die
   volle Textbreite (längste Zeile „LEIDENSCHAFT" randbündig) →
   deutlich größer und plakativer. Über vw an die Breite gekoppelt. */
@media (max-width: 640px) {
  .statement__headline {
    font-size: 13vw;
    line-height: 0.95;
  }
}


/* ============================================================
   ÜBER MICH (about.html)
   ============================================================ */

/* --- Zeitstrahl untereinander (statt zweispaltig) ----------
   Die zwei Spalten (Ausbildung, dann Berufserfahrung) werden
   gestapelt. Das JS setzt grid-column/grid-row inline — durch
   display:block sind diese wirkungslos und die Einträge fließen
   in DOM-Reihenfolge (erst Ausbildung, dann Beruf). Die span-
   basierten Verbindungsbalken werden durch EINE durchgehende
   Achse (::before) ersetzt. */
@media (max-width: 640px) {
  .timeline-grid {
    display: block;
    position: relative;
  }
  /* durchgehende senkrechte Achse an der Knoten-Position.
     Start/Länge setzt initTimelineAxis (JS) exakt auf den ersten
     bzw. letzten Punkt → die Liste startet und endet mit einem Punkt.
     Fallback: volle Grid-Höhe. */
  .timeline-grid::before {
    content: "";
    position: absolute;
    left: var(--tl-node-x);
    top: var(--axis-top, 0);
    height: var(--axis-height, 100%);
    width: 2px;
    transform: translateX(-50%);
    background: var(--tl-line);
  }
  .tl-entry {
    margin-bottom: var(--space-xl);
  }
  /* Luft vor jedem Abschnitt (Spalten-Überschrift „Ausbildung"/„Beruf") */
  .tl-entry:has(.tl-entry__col) {
    margin-top: var(--space-2xl);
  }
  .tl-entry:first-child {
    margin-top: 0;
  }
  .tl-entry--pin {
    position: static;   /* kein Mitten-Pin beim Stapeln */
  }
  .tl-entry__bar {
    display: none;      /* span-Balken raus → Achse via ::before */
  }
}

/* --- Outro: große Headline, die oben angekommen verschwindet ---
   Größe wie die Statement-Headline der Startseite (13vw), VOLLE
   Deckkraft. Die Headline pinnt oben (sticky) und wird dort per JS
   (initAboutOutroRecede, nur Mobil) ausgeblendet — wie die Kacheln,
   die in den Hintergrund weichen. Der Fließtext (z-index darüber)
   steigt auf und nutzt danach die volle Bildschirmfläche.
   Pin-Position = --outro-pin (muss mit dem JS-Wert übereinstimmen). */
@media (max-width: 640px) {
  .about-outro__inner {
    display: block;
    position: relative;
    --outro-pin: 90px;
  }
  /* headcol als Box auflösen → die Headline klebt (sticky) innerhalb
     der hohen __inner statt nur in ihrer eigenen kleinen Zelle. */
  .about-outro__headcol {
    display: contents;
  }
  .about-outro .about-outro__q,
  .about-outro__subq {
    position: sticky;
    top: var(--outro-pin);
    z-index: 0;                 /* hinter dem Text */
    font-size: 13vw;
    line-height: 0.95;
    text-transform: uppercase;  /* auch die 2. Headline in Caps */
    color: var(--color-text);   /* volle Deckkraft (JS blendet aus) */
    will-change: opacity, filter;
  }
  .about-outro__body {
    position: relative;
    z-index: 1;                 /* Text steigt über die Headline */
    max-width: none;
    /* großer Vorlauf: die Headline hat genug Scrollweg, um komplett
       zu verschwinden, bevor der Text sie erreicht */
    margin-top: 55vh;
  }
  .about-outro__subq + p {
    position: relative;
    z-index: 1;
    margin-top: 55vh;           /* gleicher Vorlauf für die Zwischen-Headline */
  }
}