/* =========================================================
   enhance.css — Responsiveness, Motion & Atmosphere
   Additive layer on top of colors_and_type.css. Inline
   styles in the React components define the desktop base;
   the @media blocks below override them for smaller screens
   (!important is required to win against inline styles).
   ========================================================= */

/* ---------- Lichtwerk atmosphere: weiche Akzent-Blobs (Blau/Violett) ---------- */
#top { position: relative; overflow: hidden; isolation: isolate; }
#top::before {
  content: "";
  position: absolute; width: 460px; height: 460px; border-radius: 50%;
  top: -140px; right: -90px; z-index: -1; pointer-events: none;
  background: var(--lw-accent-1); filter: blur(110px); opacity: 0.38;
}
#top::after {
  content: "";
  position: absolute; width: 380px; height: 380px; border-radius: 50%;
  bottom: -160px; left: -80px; z-index: -1; pointer-events: none;
  background: var(--lw-accent-2); filter: blur(110px); opacity: 0.32;
}

/* ---------- Motion: scroll reveal ---------- */
/* Only hide content once JS has flagged support, so a JS failure
   never leaves the page blank. JS adds .reveal to every section
   except the hero (which has its own staggered entrance below). */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.js-reveal .reveal.in {
  opacity: 1;
  transform: none;
}

/* ---------- Motion: per-box stagger inside card grids (Variante D) ----------
   These sections don't hide as a block; their boxes slide up one after another. */
.js-reveal #kennzahlen.reveal,
.js-reveal #kompetenzen.reveal,
.js-reveal #projekte.reveal,
.js-reveal #werdegang.reveal,
.js-reveal #bildung.reveal,
.js-reveal #stationen.reveal,
.js-reveal #expertise.reveal { opacity: 1; transform: none; filter: none; }

.js-reveal #kennzahlen .r-grid4 > div,
.js-reveal #kompetenzen .r-grid4 > div,
.js-reveal #projekte .r-proj,
.js-reveal #werdegang .r-tl,
.js-reveal #bildung .rv,
.js-reveal #stationen .lw-glass,
.js-reveal #expertise a[href] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
}
/* Jede Box wird EINZELN beobachtet (enhance.js) → animiert genau dann, wenn
   sie selbst ins Bild kommt. Funktioniert dadurch in beide Scroll-Richtungen. */
.js-reveal #kennzahlen .r-grid4 > div.in,
.js-reveal #kompetenzen .r-grid4 > div.in,
.js-reveal #projekte .r-proj.in,
.js-reveal #werdegang .r-tl.in,
.js-reveal #bildung .rv.in,
.js-reveal #stationen .lw-glass.in,
.js-reveal #expertise a[href].in {
  opacity: 1;
  transform: none;
}

/* Hero entrance — staggered rise of its inner blocks on load */
.js-reveal #top .r-hero > div > * {
  opacity: 0;
  transform: translateY(16px);
}
.js-reveal #top.in .r-hero > div > * {
  animation: sb-rise 0.8s var(--ease) forwards;
}
.js-reveal #top.in .r-hero > div:first-child > *:nth-child(1) { animation-delay: 0.05s; }
.js-reveal #top.in .r-hero > div:first-child > *:nth-child(2) { animation-delay: 0.16s; }
.js-reveal #top.in .r-hero > div:first-child > *:nth-child(3) { animation-delay: 0.27s; }
.js-reveal #top.in .r-hero > div:first-child > *:nth-child(4) { animation-delay: 0.38s; }
.js-reveal #top.in .r-hero > div:nth-child(2) > * { animation-delay: 0.30s; }

@keyframes sb-rise { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal,
  .js-reveal #top .r-hero > div > *,
  .js-reveal .r-grid4 > div,
  .js-reveal #projekte .r-proj,
  .js-reveal #werdegang .r-tl,
  .js-reveal #bildung .rv,
  .js-reveal #stationen .lw-glass,
  .js-reveal #expertise a[href] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
    animation: none !important;
  }
}

/* =========================================================
   Responsive overrides
   ========================================================= */

/* ---- Tablet & below: tighten gutters ---- */
@media (max-width: 1024px) {
  section { padding-left: 40px !important; padding-right: 40px !important; }
  header  { padding-left: 40px !important; padding-right: 40px !important; }
}

/* ---- Collapse two-column splits ---- */
@media (max-width: 860px) {
  .r-cols { grid-template-columns: 1fr !important; gap: 48px !important; }
  /* 4-up walls become 2-up */
  .r-grid4 { grid-template-columns: 1fr 1fr !important; }
  /* hero photo: cap height so a stacked portrait isn't enormous */
  .r-hero-photo { max-width: 420px; }
}

/* ---- Phone ---- */
@media (max-width: 680px) {
  section {
    padding-left: 22px !important; padding-right: 22px !important;
    padding-top: 76px !important; padding-bottom: 76px !important;
  }
  header { padding-left: 22px !important; padding-right: 22px !important; }

  /* F4: Sprach-Zeile umbrechen — Name+Punkte oben, Niveau links darunter (kein Clip) */
  .r-lang { grid-template-columns: 1fr auto !important; row-gap: 4px !important; }
  .r-lang > :last-child { grid-column: 1 / -1 !important; text-align: left !important; min-width: 0 !important; }

  /* headline sizing — ruhiger fürs Smartphone (weniger Umbruch, mehr Luft) */
  h1 { font-size: clamp(32px, 8.8vw, 40px) !important; line-height: 1.07 !important; }
  h2 { font-size: clamp(25px, 6.6vw, 32px) !important; line-height: 1.16 !important; }
  h3 { font-size: 21px !important; line-height: 1.28 !important; }
  /* Fließtext + Hero-Lead entdichten */
  section p { font-size: 16px !important; line-height: 1.58 !important; }
  /* Kontakt-Card-Werte kompakter (E-Mail passt auf eine Zeile statt "…gmail.co"/"m") */
  #kontakt .lw-glass a > div:last-child,
  #kontakt .lw-glass > div > div:last-child { font-size: 18px !important; }

  /* hero spacing */
  #top { padding-top: 56px !important; }
  .r-hero { gap: 40px !important; }
  .r-hero-photo { max-width: 100%; }

  /* big stat numbers — kompaktere Boxen + Zahl */
  #kennzahlen .r-grid4 > div { padding: 22px 18px !important; min-height: 0 !important; }
  #kennzahlen .r-grid4 > div > div:first-child { font-size: 32px !important; }

  /* competencies cells */
  .r-grid4 > div { min-height: 0 !important; padding: 30px 22px !important; }

  /* projects: stack index / body / metric */
  .r-proj {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    padding: 36px 0 !important;
  }
  .r-proj > div:last-child { text-align: left !important; }
  .r-proj > div:last-child > div:first-child { font-size: 22px !important; }

  /* timeline: stack period above entry */
  .r-tl {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 32px 0 !important;
  }

  /* contact heading not too big */
  #kontakt h2 { font-size: clamp(27px, 7.2vw, 34px) !important; }
}

/* ---------- Header: responsive navigation ---------- */
@media (max-width: 900px) {
  .r-nav-pills { display: none !important; }
  .r-nav-burger { display: flex !important; }
  /* Sprach-Toggle wandert ins Burger-Menü → in der Header-Leiste ausblenden */
  .r-lang-toggle { display: none !important; }
}
@media (min-width: 901px) {
  .r-nav-burger { display: none !important; }
}

/* ---------- Phone: Boxen am rechten Rand bündig halten (kein Überhang) ----------
   Lange deutsche Komposita ("Restrukturierung", "Betriebswirtschaftliche") setzen
   eine hohe min-content-Breite. In mehrspaltigen Grids sprengt das den Viewport,
   und overflow-x:clip (unten) schneidet die Boxen dann rechts ab. Gegenmittel:
   einspaltig schalten + Grid-Kinder schrumpfbar machen + Silbentrennung. */
@media (max-width: 680px) {
  /* Kompetenzen: 2 Spalten mit langen Titeln passen nicht → einspaltig */
  #kompetenzen .r-grid4 { grid-template-columns: 1fr !important; }

  /* Grid-/Flex-Kinder dürfen unter ihre Inhaltsbreite schrumpfen (min-width:auto → 0) */
  .r-grid4 > div, .r-cols > div, .r-proj > div, .r-tl > div { min-width: 0 !important; }

  /* Bildung: Kartenzeilen (Titel | Zahl) schrumpfbar; lange Wörter sauber trennen */
  #bildung .r-cols > div,
  #bildung .rv > div,
  #bildung .rv > div > div { min-width: 0 !important; }
  #bildung .rv, #bildung .rv *, #bildung h2 {
    overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto;
  }
}

/* ---------- Phone: Abstände straffen + Boxen/Zahlen entschlacken (Feinschliff) ----------
   Desktop-Großzügigkeit (h2-Unterabstände 48–80px, weite Absätze) wirkt auf dem
   Handy überladen. Hier nur Abstände & einzelne Zahlen-/Box-Größen für ≤680px. */
@media (max-width: 680px) {
  /* Headline → Inhalt straffen (war 48–80px) */
  #kompetenzen h2, #projekte h2, #werdegang h2, #kontakt h2, #bildung h2 { margin-bottom: 26px !important; }
  #kennzahlen .r-grid4 { margin-top: 28px !important; gap: 14px !important; }
  #profil .r-cols, #bildung .r-cols, #kontakt .r-cols { gap: 26px !important; }
  #kontakt .lw-glass { padding: 28px 22px !important; }       /* Card-Leerraum oben weg (war 48 44) */
  #expertise p { margin-bottom: 34px !important; }            /* nur minimal (war 48) */
  #bildung .sub-eyebrow { margin-top: 30px !important; }      /* war 48 */

  /* Folge-Absätze enger zusammen (war 22) */
  section p + p { margin-top: 13px !important; }

  /* Kennzahlen: kompakte Labels */
  #kennzahlen .r-grid4 > div > div:last-child { margin-top: 12px !important; font-size: 13px !important; }

  /* Projekte: Nummer als klarer Anker; Firmenname größer; Metric dezenter */
  #projekte .r-proj { padding: 26px 0 !important; gap: 8px !important; }
  #projekte .r-proj > div:first-child { font-size: 30px !important; font-weight: 700 !important; opacity: 1 !important; letter-spacing: -0.01em !important; }
  #projekte .r-proj > div:nth-child(2) > div:first-child { font-size: 12.5px !important; }  /* Firmenname */
  #projekte h3 { font-size: 20px !important; margin-top: 6px !important; }
  #projekte .r-proj p { margin-top: 10px !important; }
  #projekte .r-proj > div:last-child > div:last-child { margin-top: 8px !important; }

  /* Werdegang: Periode/Eintrag enger, Rolle etwas kleiner */
  #werdegang .r-tl { gap: 6px !important; padding: 26px 0 !important; }
  #werdegang h3 { font-size: 19px !important; margin-top: 6px !important; }
  #werdegang .r-tl p { margin-top: 8px !important; }
  #werdegang .r-tl ul { margin-top: 12px !important; }

  /* Weiterbildung: Note 98,33% dezenter (war 22) */
  #bildung .cert-grade { font-size: 16px !important; }
}

/* Anker-Navigation: Sektionen landen UNTER dem Sticky-Header (72px) statt
   von ihm überdeckt zu werden — gilt für Header-Pills, Burger-Menü und
   den Wechsel Unterseite -> "/#top" (dort klemmt der Scroll sonst bei #top). */
section[id] { scroll-margin-top: 84px; }

/* Guard against horizontal overflow on any screen.
   Use overflow-x:clip (not hidden) so the page keeps a single
   window scroll container — hidden on <html> breaks anchor links
   and window scrolling. */
img { max-width: 100%; }
body { overflow-x: clip; }