/* Text-only hero cue: no decorative arrow or emoji. */
.build-scroll { min-height: 44px; border-bottom: 1px solid currentColor; font-weight: 700; font-size: 10px; }
/* Amon Bähler: mobile-only editorial layout for the existing live site.
   Desktop rules and all inquiry behaviour remain untouched. */
@media (max-width: 800px) {
  html { scroll-padding-top: 110px; }
  body { overflow-x: clip; }
  :is(.catalog-content, .services-inner, .video-inner, .faq-inner, .contact-inner, .about-v03-inner) { min-width: 0; }

  /* Two clearly separated navigation rows instead of squeezing three desktop columns. */
  .site-head {
    height: 108px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: 62px 45px !important;
    column-gap: 8px !important;
    row-gap: 0 !important;
    padding: 0 clamp(16px, 5vw, 24px) !important;
  }
  .site-head .brand { font-size: clamp(16px, 4.5vw, 20px) !important; line-height: 1; }
  .site-head nav.mode-nav {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    gap: 2px !important;
    padding: 3px;
    font-size: 10px;
  }
  .site-head .mode-nav a { padding: 9px 8px; min-height: 38px; font-size: 10px; white-space: nowrap; }
  .site-head .mode-indicator { display: none; }
  .site-head .private-flow-link { display: none; }
  .site-head nav.section-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: stretch;
    width: 100%;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px !important;
    padding: 0;
    border-top: 1px solid rgba(16,18,24,.12);
    overflow-x: auto;
    scrollbar-width: none;
    white-space: nowrap;
    font-size: 11px;
    -webkit-overflow-scrolling: touch;
  }
  .site-head nav.section-nav::-webkit-scrollbar { display: none; }
  .site-head nav.section-nav a { display: inline-flex !important; flex: 0 0 auto; padding: 11px 0; min-height: 42px; align-items: center; }

  /* Preserve the scroll-built hero without four empty screenfuls of scrolling. */
  html.motion-on .scroll-story { height: calc(var(--h) * 3.4); }
  /* Give its copy a readable mobile rhythm. */
  .build-intro .intro-eyebrow { top: 17%; left: 6vw; font-size: 10px; }
  .build-title { top: 24%; left: 5.5vw; max-width: 88vw; font-size: clamp(39px, 10.4vw, 74px); line-height: 1.02; }
  .build-copy { left: 6vw; right: 6vw; top: 45%; gap: 18px; }
  .build-copy p { font-size: clamp(14px, 3.5vw, 16px); line-height: 1.5; }
  .build-scroll { font-size: 10px; letter-spacing: .07em; white-space: nowrap; padding: 0 4px; }
  .build-scroll>span:last-child { display: inline-flex; align-items: center; }
  .build-scroll .arrow-circle { width: 42px; height: 42px; }
  .build-caption { max-width: 86vw; }
  .build-caption p { font-size: clamp(14px, 3.6vw, 17px); }

  /* Projects: one generous preview, then its own caption, not a squashed two-column grid. */
  .catalog-content { padding: 72px 6vw 78px; }
  .catalog-heading { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-bottom: 32px; }
  .catalog-heading h2 { font-size: clamp(48px, 14vw, 78px); overflow-wrap: anywhere; }
  .catalog-intro { justify-self: start; max-width: 38rem; padding: 0; }
  .catalog-intro > p { font-size: 15px; line-height: 1.5; margin-bottom: 8px; }
  .catalog-tabs { gap: 23px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .catalog-tabs::-webkit-scrollbar { display: none; }
  .catalog-tab { flex: 0 0 auto; min-height: 48px; font-size: 13px; }
  .showroom-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .showroom-visual, .showroom-details { min-width: 0; }
  .showroom-grid .preview-window { height: clamp(265px, 91vw, 430px); }
  .showroom-controls { gap: 12px; font-size: 9px; }
  .showroom-details { padding: 16px 0 0; }
  .showroom-details h3 { font-size: clamp(34px, 9vw, 48px); margin: 9px 0 12px; }
  .showroom-details p { font-size: 15px; line-height: 1.65; margin: 0 0 12px; }
  .showroom-details .concept-label { margin-top: 17px; line-height: 1.5; }

  /* Offer: single readable cards and a real-width service pitch. */
  .services-inner { padding: 74px 6vw 72px; }
  .services-heading { grid-template-columns: minmax(0, 1fr); gap: 17px; margin-bottom: 32px; }
  .services-heading h2 { font-size: clamp(40px, 10.7vw, 62px); overflow-wrap: anywhere; }
  .services-lead { justify-self: start; max-width: 38rem; font-size: 15px; line-height: 1.65; }
  .core-offer { grid-template-columns: minmax(0, 1fr); gap: 27px; padding: 26px; margin: 30px 0 18px; }
  .core-offer h3 { font-size: clamp(36px, 9.8vw, 56px); margin: 15px 0 17px; }
  .core-cta { min-height: 48px; margin-top: 18px; }
  .core-offer-scope li { grid-template-columns: 28px 1fr; column-gap: 9px; }
  .services-bento { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 14px; }
  .svc-card, .svc-card-main, .svc-card-wide { grid-column: auto; grid-row: auto; min-width: 0; min-height: 0; padding: 24px; }
  .svc-card-main h3 { font-size: 31px; }
  .svc-card-main .svc-art { height: 170px; }
  .svc-card-compact .svc-art { height: 100px; }
  .svc-card-wide { grid-template-columns: minmax(0, 1fr); gap: 15px; }
  .svc-card-wide .svc-art { height: 130px; }
  .services-bottom { flex-wrap: wrap; gap: 10px; }

  /* Process, About, FAQ and contact previously retained desktop columns. */
  .video-inner { padding: 72px 6vw; }
  .video-variant-02 .studio-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .video-title { font-size: clamp(40px, 10vw, 62px); }
  .video-lead, .video-variant-02 .process-step-desc { font-size: 15px; line-height: 1.65; }
  .video-badge { top: 10px; left: 10px; max-width: calc(100% - 20px); font-size: 8px; }
  #about.about-section { min-height: 0; padding: 70px 6vw; }
  #about.about-v03 .about-v03-inner { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  #about.about-v03 .about-v03-title { font-size: clamp(52px, 15vw, 82px); }
  #about.about-v03 .about-v03-copy { font-size: 15px; line-height: 1.7; }
  #about.about-v03 .about-v03-right { justify-content: flex-start; }
  #about.about-v03 .about-v03-feature { max-width: min(100%, 430px); max-height: none; }
  #faq { padding: 72px 6vw; }
  .faq-v01 .faq-inner { display: block; }
  .faq-v01 .faq-body { min-width: 0; }
  .faq-title { font-size: clamp(37px, 10vw, 52px); }
  .faq-v01 .faq-summary { gap: 7px; padding: 20px 0; }
  .faq-v01 .faq-q-text { font-size: 14px; line-height: 1.4; }
  .faq-v01 .faq-num { margin-right: 4px; }
  #kontakt { padding: 72px 6vw 0; }
  .contact-v01-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .contact-title { font-size: clamp(35px, 9.6vw, 52px); overflow-wrap: anywhere; }
  .contact-v01-card { min-width: 0; padding: 24px 18px; }
  .inquiry-form input, .inquiry-form select, .inquiry-form textarea { max-width: 100%; font-size: 16px; }
  .inquiry-consent { align-items: flex-start; }
  footer.site-footer { align-items: flex-start; flex-direction: column; gap: 16px; line-height: 1.5; }
}
@media (max-width: 390px) {
  .site-head .brand { font-size: 15px !important; }
  .site-head .mode-nav a { font-size: 9px; padding: 8px 6px; }
  .site-head nav.section-nav { justify-content: flex-start; gap: 21px !important; }
  .build-title { font-size: 10.1vw; }
  .contact-title { font-size: 9.2vw; }
}
@media (max-height: 650px) and (max-width: 800px) {
  .build-title { top: 24%; }
  .build-copy { top: 48%; }
  .site-head { height: 94px !important; grid-template-rows: 52px 41px !important; }
  .site-head nav.section-nav { height: 41px; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 800px) {
  .site-head nav.section-nav { scroll-behavior: auto; }
}

@media (max-width: 350px) and (max-height: 650px) {
  .build-copy { top: 43%; }
}