/* 19-responsive.css — Globale Breakpoints + prefers-reduced-motion
   Teil von css/living-canvas (aufgeteilt). Ladereihenfolge = Dateiname.
   Siehe docs/components/ fuer die Zuordnung Sektion -> Datei. */
/* Der Hero bleibt auf Tablet zweispaltig — er bricht spaeter um als die
   Navigation (900px), sonst steht neben dem Portrait zu viel Leerraum. */
@media (max-width: 760px) {
  .hero-inner {
    grid-template-columns: 1fr;
  }
}

/* 28. Responsive (max-width: 900px) */@media (max-width: 900px){
  .bento,
  .branding-grid {
    grid-template-columns: 1fr;
  }

  /* Neural Network Figma Stack for Mobile */
  .neural-network-section {
    height: auto;
    min-height: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 24px;
    padding: 0 20px;
    margin-bottom: 60px;
  }
  #networkCanvas {
    display: none;
  }
  .figma-screen {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 320px;
    min-width: 280px !important;
    transform: none !important;
    margin: 0 !important;
  }
  .screen-center {
    order: -1;
    width: 100% !important;
    max-width: 260px;
  }}

/* Globale Abstaende auf kleinen Schirmen.
   Die Basis `section { padding: 70px 24px }` steht in 07-timeline.css und
   wird hier ueberschrieben (19 laedt nach 07). Sektionen mit Inline-Padding
   im HTML (#reise, #arbeiten) sind davon nicht betroffen. */
@media (max-width: 760px) {
  /* Nur echte Seitensektionen. Die Bloecke der Projekt-Unterseite
     (.pp-hero, .pp-block, .cs-block) sind ebenfalls <section>-Elemente und
     bekamen hier sonst 56px oben UND unten plus 20px seitlich — die
     Case Study wurde auf dem Handy dadurch fast doppelt so lang.
     Das Portfolio regelt seinen Abstand selbst (09-portfolio-grid.css). */
  section:not(.hero):not(.pp-hero):not(.pp-block):not(.cs-block):not(.portfolio-section):not(.anamea-sec) {
    padding: 56px 20px !important;
  }
  .section-lead {
    font-size: 15px;
  }
  .geom-divider {
    margin: 24px 0;
  }
}

/* 29. Reduced Motion */@media (prefers-reduced-motion: reduce){
  *, *::before, *::after {
    animation-duration: 0.01s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01s !important;
  }
  .reveal, .reveal-left, .reveal-right, .reveal-scale {
    opacity: 1;
    transform: none;
  }
  .hero-blob {
    animation: none;
  }
  .pulse-ring {
    animation: none;
  }
  .card::after {
    animation: none;
  }

  .confetti-piece {
    animation: none;
    display: none;
  }}