/* V33: Mobile-Optimierung (≤ 768 px). Wird zuletzt geladen und überschreibt ältere Mobile-Regeln. */
@media (max-width: 768px) {
  /* Seitenleiste mit Fortschrittspfad auf dem Handy ausblenden – volle Breite für Inhalte */
  .trail-nav { display: none !important; }
  #about, #vision, #services, #collaboration, #contact { padding-left: 24px !important; padding-right: 24px !important; }
  /* trail.js gibt der Marken-Section die id "clients" – die hat bereits 24px Rand */
  .client-heading-row { padding-left: 0 !important; padding-right: 0 !important; }

  /* ── Hero als Spalte: Text oben, Projektliste unten, nichts überlappt ── */
  #top.project-stage {
    display: flex; flex-direction: column;
    height: 100vh; height: 100svh;
    min-height: 600px !important;
    padding: 108px 24px 64px !important;
  }
  .stage-caption, .project-info, .project-list { position: relative !important; inset: auto !important; }
  .stage-caption { z-index: 1; gap: 8px; font-size: 12px; letter-spacing: .02em; }
  .stage-caption h1 { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
  .stage-caption p { max-width: 34ch; line-height: 1.55; color: rgba(255,255,255,.82); }
  .project-info { z-index: 1; margin-top: 14px; gap: 4px; align-items: flex-start; text-align: left; max-width: none; }
  .project-info p { min-height: 0; font-size: 11px; color: rgba(255,255,255,.75); }
  .project-info p:empty { display: none; }
  .project-list { z-index: 1; margin-top: auto; gap: 10px !important; max-width: 100% !important; padding-right: 36px; }
  .project-choice { min-height: 0 !important; width: 100%; align-items: center; }
  .project-choice > span { font-size: clamp(26px, 7.4vw, 40px) !important; line-height: 1.06 !important; letter-spacing: -.035em !important; }
  .stage-scroll { right: 18px !important; bottom: 18px !important; font-size: 28px !important; padding: 8px; }

  /* Hinweis auf Touch-Geräten: Play-Symbol am aktiven Projekt (nochmal antippen = Film abspielen) */
  @media (hover: none) {
    .project-choice > span { flex: 0 1 auto; }
    .project-choice.is-active::after {
      content: "";
      flex: none; width: 30px; height: 30px; border-radius: 50%;
      /* Play-Dreieck als SVG – kein Emoji auf iOS */
      background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M0 0l10 6-10 6z' fill='%2308090d'/%3E%3C/svg%3E") 56% 50% / 9px 11px no-repeat;
    }
  }

  /* Pfeil-Icons */
  .header-contact { display: inline-flex; align-items: center; gap: 6px; }

  /* Header etwas luftiger */
  #site-header { padding: 16px 18px !important; }

  /* ── Überschriften größer, Sections klar voneinander getrennt ── */
  .nova-label, #about > [data-reveal]:first-child, #services > [data-reveal]:first-child > span {
    color: var(--accent) !important; font-size: 11px !important; letter-spacing: .22em !important;
  }
  #vision .nova-label { color: #2a0f04 !important; }
  .nova-heading { font-size: clamp(38px, 10.5vw, 48px) !important; line-height: 1.02 !important; margin: 18px 0 24px !important; }
  #services > [data-reveal]:first-child > p { font-size: clamp(36px, 10vw, 46px) !important; line-height: 1.04 !important; max-width: none !important; }
  .nova-statement { font-size: clamp(38px, 10.5vw, 48px) !important; line-height: 1.04 !important; }
  .client-heading-row h2 { font-size: clamp(30px, 8.4vw, 38px) !important; line-height: 1.08 !important; max-width: none; }
  .svc-row h3, .nova-step-title { font-size: 26px !important; }
  #about > [data-reveal]:first-child, #services > [data-reveal]:first-child, #collaboration > [data-reveal]:first-child { margin-bottom: 36px !important; }
  #about { padding-top: 88px !important; }
  #services { padding-top: 88px !important; padding-bottom: 24px !important; }
  #collaboration { padding-top: 64px !important; }
  #services .svc-row:last-child { border-bottom: 0 !important; }
  #contact h2 { font-size: clamp(44px, 12vw, 56px) !important; }

  /* Portrait: Kopf näher an die Oberkante, kein Hover-Effekt auf Touch */
  .about-portrait { aspect-ratio: 4/3 !important; }
  .portrait-img { object-position: 50% 14% !important; }

  /* Lesbarkeit Fließtext */
  .nova-copy { font-size: 16px; }
  .footer-bottom > div:last-child { flex-wrap: wrap; gap: 10px 18px !important; }
}

/* Kleine Handys (≤ 380 px) */
@media (max-width: 380px) {
  .hamburger b { display: none; }
  .hamburger { padding-right: 8px !important; }
  #top.project-stage { padding-bottom: 60px !important; }
  .project-list { gap: 8px !important; }
}

/* Querformat auf dem Handy: Hero nicht höher als nötig */
@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
  .trail-nav { display: none !important; }
  #top.project-stage { min-height: 460px !important; }
  .stage-caption { top: 90px !important; }
  .project-info { display: none; }
  .project-choice > span { font-size: 24px !important; }
}

/* Pfeil-Icons (alle Größen) */
.ui-arrow { display: inline-block; vertical-align: -1px; margin-left: 3px; }
.header-contact .ui-arrow { margin-left: 0; }
.stage-scroll svg { display: block; width: 18px; height: 28px; }
@media (hover: none) {
  .about-portrait:hover .portrait-img { filter: none; transform: none; }
}