/* Smartphone layout only. Desktop rules and interaction remain the baseline. */
@media (max-width: 767px), (pointer: coarse) and (hover: none) and (orientation: landscape) and (max-height: 500px) and (max-width: 1024px) {
  html { scroll-padding-top: 76px; }
  .site-header { padding-inline: 16px; }
  .site-header .nav-toggle { min-width: 44px; min-height: 44px; }
  .site-header .site-navigation { overflow-y: auto; overscroll-behavior: contain; max-height: calc(100dvh - 86px); }
  html:has(body.menu-open), body.menu-open { overflow: hidden; overscroll-behavior: none; }
  html:has(dialog[open]), body:has(dialog[open]) { overflow: hidden; overscroll-behavior: none; }
  .awp-watch-nav { display: none !important; }
  .section-shell { width: calc(100% - 36px); }
  .button, .lp-experience-cta { min-height: 48px; max-width: 100%; white-space: normal; }
  .eyebrow { line-height: 1.5; letter-spacing: .09em; }
  .landing-page-current .lp-showcase .lp-section-marker { margin-inline: 18px; }
  .reveal, .lp-reveal, .js .reveal, .js .lp-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .section-heading, .expertise-heading-row, .statement-grid, .about-copy, .contact-copy { text-align: left; }
  .hero-section-title, .section-heading h2, .expertise-heading-row h2, .statement h2, .about-copy h2, .contact-grid h2 { font-size: clamp(1.9rem, 8.7vw, 2.6rem); line-height: 1.12; overflow-wrap: anywhere; text-wrap: pretty; }
  .section-heading p, .hero-text, .expertise-heading-row p, .about-copy > p { font-size: 1rem; line-height: 1.65; }
  main > .expertise-section, main > .hero, main > .statement, main > .prompt-problem-section, main > .workshop-section, main > .contact-section, main > .about-section, main > .eu-act-section { min-height: 0 !important; padding-block: 56px; }
  .expertise-heading-row, .contact-grid, .about-grid, .eu-act-grid { gap: 28px; }
  .statement-grid { justify-items: start; }
  .statement h2 { text-align: left; }
  .statement-quote, .problem-subline { font-size: 1rem; line-height: 1.6; text-align: left; }
  .identity-intro { --identity-gray: #566071; }
  main > .identity-intro { height: auto !important; min-height: 630px !important; }
  .identity-intro .identity-inner { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 36px; min-height: 630px; padding: 44px 0 80px; }
  .identity-signature, .identity-focus, .identity-city { position: static !important; width: 100% !important; transform: none !important; text-align: left !important; margin: 0 !important; }
  .identity-intro .identity-focus h1 { width: auto; margin-inline: 0; font-size: clamp(2rem, 9vw, 3.9rem); line-height: 1.12; white-space: normal; word-spacing: normal; }
  .identity-intro .identity-tagline { font-size: 1rem; line-height: 1.7; color: #4d5666; text-align: left; }
  .identity-intro .identity-name, .identity-intro .identity-your { color: #566071; text-align: left; }
  .identity-city strong { font-size: 1.6rem; }
  .identity-ai-image-label { font-size: .65rem; color: #566071; text-shadow: none; }
  .workshop-layout { grid-template-columns: minmax(0,1fr); gap: 0; }
  .workshop-copy { padding: 24px 20px; }
  .workshop-copy p, .workshop-copy li { font-size: .95rem; line-height: 1.6; }
  .workshop-visual { min-height: 240px; }
  .contact-visual, .contact-phone-wrap { max-width: 100%; }
  .about-portrait { max-width: 100%; }
  .footer-inner { align-items: flex-start; text-align: left; gap: 18px; }
  .footer-inner nav { display: flex; flex-wrap: wrap; gap: 8px 18px; }
  .footer-inner nav a { display: inline-flex; align-items: center; min-height: 44px; }

  /* Phone galleries use natural vertical scrolling instead of a pinned detour. */
  .showcase-carousel-section { height: auto !important; min-height: 0 !important; padding: 48px 0; }
  .showcase-sticky-stage, .showcase-sticky-stage.is-pinned, .showcase-sticky-stage.is-complete { position: relative !important; inset: auto !important; height: auto !important; min-height: 0 !important; padding: 0; }
  .showcase-track { display: grid; grid-template-columns: minmax(0,1fr); height: auto; width: 100%; gap: 24px; padding: 0 18px; overflow: visible; transform: none !important; }
  .showcase-card { width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 300px; aspect-ratio: auto; margin: 0; }
  .showcase-card-robot { min-height: 350px; }
  .showcase-card h3 { font-size: 1.65rem; }
  .showcase-card button { min-height: 48px; white-space: normal; }
  .showcase-detail-dialog, .showcase-detail-dialog:has(.showcase-detail-workshop:not([hidden])) { width: calc(100vw - 12px); height: calc(100dvh - 12px); max-height: calc(100dvh - 12px); margin: auto; border-radius: 14px; }
  .showcase-detail-chrome { min-height: 48px; padding-inline: 12px; }
  .showcase-detail-close, .dialog-close { min-width: 44px; min-height: 44px; }
  .showcase-detail-chrome > .showcase-detail-close { background: radial-gradient(circle, #ff5f57 0 6px, transparent 6.5px); border-radius: 8px; margin-left: -10px; margin-right: -10px; }
  .showcase-detail-chrome > .showcase-detail-close:hover { box-shadow: none; background-color: #ffffff0d; }
  .showcase-detail-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .showcase-detail-panel { padding: 20px 14px; overscroll-behavior: contain; }
  .showcase-detail-panel #beispiele .section-heading h2, .showcase-detail-panel #methode .section-heading h2 { font-size: 1.8rem; }
  .showcase-detail-panel #beispiele .section-heading > p, .showcase-detail-panel #methode .section-heading > p { font-size: .95rem; }
  .showcase-detail-workshop { padding: 0; }
  .legal-dialog, .expertise-doc-dialog { width: calc(100vw - 20px); max-width: none; max-height: calc(100dvh - 20px); padding: 52px 20px 24px; overflow-y: auto; overscroll-behavior: contain; overflow-wrap: anywhere; }
  .legal-dialog p, .legal-dialog li { font-size: .95rem; line-height: 1.6; }
  input, textarea, select { font-size: 16px; }
}

@media (max-width: 767px), (pointer: coarse) and (hover: none) and (orientation: landscape) and (max-height: 500px) and (max-width: 1024px) {
  /* Keep long chart labels clear of their bars at narrow dialog widths. */
  .result-content .signal-list { gap: 12px; }
  .result-content .signal { grid-template-columns: minmax(0, 1fr) auto; gap: 5px 8px; font-size: .75rem; line-height: 1.4; }
  .result-content .signal > span { grid-column: 1 / -1; min-width: 0; overflow-wrap: anywhere; }
  .result-content .signal > i { grid-column: 1; }
  .result-content .signal > b { grid-column: 2; }

  /* The phone simulation stays readable and usable on an actual phone. */
  .contact-section .phone-message { max-width: 90%; padding: 10px 12px; font-size: 14px !important; line-height: 1.5; overflow-wrap: anywhere; }
  .contact-section .phone-message small { font-size: 9px; line-height: 1.4; }
  .contact-section .phone-message-user { padding-right: 30px; }
  .contact-section .phone-quick-replies button { min-height: 44px; padding: 8px; font-size: 12px; line-height: 1.35; }
  .contact-section .phone-quick-replies-three { grid-template-columns: minmax(0, 1fr); }
  .contact-section .phone-composer { grid-template-columns: minmax(0, 1fr) 44px; }
  .contact-section .phone-composer textarea { min-height: 44px; font-size: 16px; line-height: 1.4; }
  .contact-section .phone-composer button { width: 44px; height: 44px; }
  .contact-section .phone-message-final a { min-height: 44px; display: flex; align-items: center; justify-content: center; font-size: 12px; line-height: 1.4; }
  .contact-section .phone-contact-view { overflow-y: auto; overscroll-behavior: contain; }
  .contact-section .phone-contact-card > p, .contact-section .phone-contact-card > a:not(.phone-contact-cta), .contact-section .phone-contact-card > div { font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
  .contact-section .phone-contact-cta, .contact-section .phone-contact-teams a { min-height: 44px; font-size: 12px; line-height: 1.4; }

  /* Statements, answers and source links need to remain readable on a phone. */
  .problem-reality small { font-size: 13px; line-height: 1.55; }
  .problem-terminal .terminal-codeblock { font-size: 12px !important; line-height: 1.55 !important; }
  .problem-terminal .terminal-codeblock .terminal-code-line q:not(.error-code) { color: #ff91cf !important; font-size: 13px; line-height: 1.55; }
  .problem-terminal .terminal-answer > code, .problem-terminal .terminal-answer > strong { font-size: 12px; line-height: 1.55; overflow-wrap: anywhere; }
  .problem-terminal .terminal-answer h3, .problem-terminal .terminal-answer p { font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
  .problem-terminal .terminal-answer h3 q, .problem-terminal .terminal-answer p q { color: #edf3fa !important; }
  .problem-terminal .terminal-commandbar > label, .problem-terminal .terminal-commandbar > small { font-size: 12px; line-height: 1.5; }
  .problem-terminal .terminal-commandrow { grid-template-columns: minmax(0, 1fr) 44px; }
  .problem-terminal .terminal-commandrow > code { display: block; min-height: 44px; padding: 10px 9px; font-size: 12px; line-height: 1.5; }
  .problem-terminal .terminal-commandrow > button { width: 44px; height: 44px; }
  .eu-act-primary, .eu-act-secondary { width: 100%; gap: 8px; }
  .eu-act-link, .eu-info-item a { width: 100%; max-width: 100%; min-height: 48px; padding: 12px 14px; font-size: 14px; line-height: 1.45; }
  .eu-act-link b, .eu-info-item a span { flex: none; font-size: 16px; }
  .eu-act-primary small, .eu-info-item small, .eu-act-more-title { font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
  .eu-info-item { gap: 5px; }
  .eu-act-action { gap: 14px; }
  .site-footer .footer-inner { font-size: 12px; line-height: 1.6; }
  .site-footer .footer-brand { font-size: 13px; }
}

/* Use the available width when a touch phone turns sideways. */
@media (pointer: coarse) and (hover: none) and (orientation: landscape) and (max-height: 500px) and (max-width: 1024px) {
  .contact-section .iphone-device { width: min(720px, calc(100vw - 64px)); height: max(300px, calc(100dvh - 90px)); max-height: none; aspect-ratio: auto; border-radius: 38px; }
  .contact-section .iphone-screen { border-radius: 30px; }
  .contact-section .phone-app-header { min-height: 90px; padding: 44px 14px 14px; }
  .contact-section .phone-step-back { top: 43px; left: auto; right: 100px; width: 40px; height: 40px; }
  .contact-section .phone-contact-view { inset: 90px 0 0; }
  .contact-section .phone-quick-replies-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .contact-section .phone-messages { gap: 6px; padding-block: 6px; }
  .showcase-detail-dialog .showcase-detail-chrome { flex-shrink: 0; }
  .landing-page-current .lp-showcase-card { max-height: 340px; }
}