/* KXON mobile pass 2026-08-24
   Ziel: bessere Touch-Bedienung, weniger horizontales Overflow und kompaktere
   Darstellung auf Smartphones, ohne Desktop-Layouts zu verändern. */

@media (max-width: 760px) {
  html { overflow-x: clip; scroll-padding-top: 108px; }
  body { overflow-x: clip; }
  body, main, section, footer, header { min-width: 0; }
  p, li, dd, address, a, strong, span { overflow-wrap: break-word; }
  img, video, iframe { max-width: 100%; height: auto; }

  /* iOS: Formulare nicht automatisch hineinzoomen. */
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea { font-size: 16px !important; }

  button,
  .button,
  .nav-link,
  .social-link,
  a { -webkit-tap-highlight-color: transparent; }
  button,
  .button,
  .nav-toggle,
  .slider-arrow,
  .slider-dot,
  .slider-pause { touch-action: manipulation; }

  .container { width: min(calc(100% - 28px), var(--container)); }
  .section { padding: 64px 0; }
  .section--compact { padding: 28px 0; }
  .section--cta { padding-top: 26px; }
  .section-heading { margin-bottom: 30px; }
  .section-heading h2,
  .website-content h2,
  .domain-section h2,
  .faq-heading h2,
  .cta-card h2,
  .migration-card h2 { font-size: clamp(29px, 8.8vw, 38px); line-height: 1.12; }
  .section-heading p,
  .website-content > p,
  .faq-heading > p { font-size: 15px; line-height: 1.65; }

  /* Mobile Servicenavigation: nützliche Links statt Social-Leiste. */
  .topbar__inner { min-height: 36px; justify-content: flex-start; }
  .topbar__links { display: flex; width: 100%; gap: 0; justify-content: space-between; }
  .topbar__links a { min-height: 36px; display: inline-flex; align-items: center; padding: 0 4px; font-size: 11px; font-weight: 700; }
  .topbar__links a:nth-child(2) { display: inline-flex; }
  .topbar__links a:nth-child(3) { display: none; }
  .topbar__actions { display: none; }

  /* Header / Menü */
  :root { --header-height: 64px; }
  .site-header__inner { gap: 12px; }
  .brand__logo { width: 142px; max-width: 142px; }
  .nav-toggle { width: 46px; height: 46px; margin-left: auto; flex: 0 0 auto; }
  .primary-nav {
    max-height: calc(100dvh - var(--header-height) - 36px);
    padding: 10px 14px calc(24px + env(safe-area-inset-bottom));
    overscroll-behavior: contain;
  }
  .nav-link { min-height: 52px; padding: 11px 6px; font-size: 16px; }
  .dropdown { padding: 4px 0 10px 8px; }
  .dropdown a { padding: 11px 10px; }
  .dropdown strong { font-size: 14px; }
  .dropdown span { font-size: 12px; }

  /* Startseiten-Hero */
  .hero-slider.hero-slider--image,
  .hero-slider--image .hero-slider__stage,
  .hero-slider--image .hero-slide { min-height: 620px; }
  .hero-slide__inner { min-height: 620px; padding: 48px 0 104px; }
  .hero-slider--image .hero-slide__content h1,
  .hero-slider--image .hero-title { font-size: clamp(37px, 10.5vw, 44px); line-height: 1.025; letter-spacing: -.045em; }
  .hero-slider--image .hero-slide__lead { margin-bottom: 22px; font-size: 15.5px; line-height: 1.58; }
  .hero-slider--image .hero-slide__actions { gap: 9px; }
  .hero-slider--image .hero-slide__actions .button { min-height: 48px; }
  .hero-slider--image .hero-slide__trust { gap: 8px; margin-top: 18px; font-size: 12.5px; }
  .hero-slider--image .hero-slider__controls { bottom: 14px; gap: 9px; }
  .hero-slider--image .hero-slider__arrows { gap: 6px; }
  .hero-slider--image .slider-arrow { width: 42px; height: 42px; }
  .hero-slider--image .slider-pause { min-width: 42px; width: 42px; height: 42px; padding: 0; justify-content: center; }
  .hero-slider--image .slider-pause span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
  .hero-slider--image .hero-slider__dots { gap: 7px; }
  .hero-slider--image .slider-dot { min-width: 28px; }

  .trust-strip__grid > div,
  .trust-strip__grid > div:first-child,
  .trust-strip__grid > div:nth-child(3),
  .trust-strip__grid > div:last-child { padding: 15px 14px; }

  /* Karten / CTAs */
  .service-card,
  .price-card,
  .reason-card,
  .testimonial,
  .migration-card { padding: 22px; }
  .service-card { min-height: 0; }
  .service-card__icon { margin-bottom: 20px; }
  .reason-card__number { margin-bottom: 20px; }
  .cta-card { padding: 30px 20px; border-radius: 18px; }
  .cta-card h2 { font-size: 30px; }
  .cta-card__actions { gap: 8px; }
  .cta-card__actions .button { width: 100%; }
  .website-content__actions { display: grid; grid-template-columns: 1fr; }
  .website-content__actions .button { width: 100%; }
  .website-showcase { min-height: 300px; }
  .website-showcase--workspace .showcase-badge { max-width: calc(100% - 18px); }
  .testimonial-grid { gap: 28px; }
  .testimonial-list { gap: 12px; }

  /* Startseite: Domainbereich */
  .domain-section { gap: 28px; }
  .domain-form { padding: 14px; border-radius: 14px; }
  .domain-section .domain-form__group { grid-template-columns: 1fr; padding: 6px; gap: 6px; overflow: visible; }
  .domain-section .domain-form input { width: 100%; height: 50px; padding: 0 12px; border-radius: 8px; background: #fff; }
  .domain-section .domain-form .button { width: 100%; margin: 0; }
  .home-domain-featured {
    margin: 20px -14px 0;
    padding: 0 14px 4px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .home-domain-featured::-webkit-scrollbar { display: none; }
  .home-domain-featured__item { flex: 0 0 auto; scroll-snap-align: start; }
  .home-domain-check-result { padding: 12px; gap: 10px; }
  .home-domain-quick-tlds { align-items: flex-start; flex-direction: column; }
  .home-domain-quick-tlds > div { width: 100%; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 3px; scrollbar-width: none; }
  .home-domain-quick-tlds > div::-webkit-scrollbar { display: none; }
  .home-domain-quick-tlds button { flex: 0 0 auto; min-height: 34px; }

  /* Produkt-Cover: Buttons und Text auf kleinen Displays klarer. */
  .hosting-hero__actions,
  .wh-cover__actions,
  .domain-cover__actions,
  .ssl-cover__actions,
  .web-cover__actions,
  .contact-cover__actions,
  .company-cover__actions { width: 100%; gap: 9px; }
  .hosting-hero__actions .button,
  .wh-cover__actions .button,
  .domain-cover__actions .button,
  .ssl-cover__actions .button,
  .web-cover__actions .button,
  .contact-cover__actions .button,
  .company-cover__actions .button { width: 100%; min-height: 48px; }

  /* Tabellen bleiben vollständig, sind aber auf Touch besser nutzbar. */
  .domain-table-scroll,
  .domain-table-wrap,
  .ssl-table-scroll,
  .ssl-table-wrap,
  .comparison-scroll,
  .wh-compare-scroll,
  .web-scope__scroll,
  .legal-table-wrap,
  .ssl-compare-card {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }
  .domain-price-table th:first-child,
  .domain-price-table td:first-child,
  .ssl-price-table th:first-child,
  .ssl-price-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #fff;
    box-shadow: 1px 0 0 var(--line);
  }
  .domain-price-table thead th:first-child,
  .ssl-price-table thead th:first-child { z-index: 3; background: #f8fafc; }
  .domain-table-toolbar,
  .ssl-table-toolbar { gap: 12px; }
  .domain-price-search,
  .ssl-product-search { min-height: 46px; }
  .domain-table-meta { padding: 9px 14px; }
  .domain-price-pagination { padding: 12px; }
  .domain-price-pagination__page,
  .domain-price-pagination__nav { min-height: 42px; }

  /* Webhosting / WordPress */
  .hosting-price-grid,
  .hosting-feature-grid,
  .plan-fit__grid { gap: 14px; }
  .hosting-price-card,
  .ssl-product-card,
  .web-project-card { border-radius: 15px; }
  .wh-compare-toolbar,
  .comparison-heading { gap: 12px; }
  .wh-scroll-hint,
  .domain-scroll-hint,
  .ssl-scroll-hint,
  .web-scroll-hint { font-size: 11px; line-height: 1.45; }

  /* Kontakt */
  .form-grid--two { grid-template-columns: 1fr !important; }
  .contact-form-card,
  .contact-sidebar { min-width: 0; }
  .contact-form { padding-left: 18px; padding-right: 18px; }
  .contact-form__footer { align-items: stretch; flex-direction: column; gap: 12px; }
  .contact-form__footer .button { width: 100%; }
  .form-consent { align-items: flex-start; }
  .contact-direct__item { min-width: 0; }
  .contact-direct__item a,
  .contact-route-card__address { overflow-wrap: anywhere; }

  /* Rechtliches */
  .legal-layout { gap: 24px; }
  .legal-sidebar__inner { padding: 14px; }
  .legal-content__header { padding-bottom: 24px; }
  .legal-block { padding: 26px 0; }
  .legal-toc { padding: 16px; }
  .legal-updated { align-items: flex-start; flex-direction: column; }
  .legal-table { min-width: 680px; }

  /* Footer */
  .footer-highlight__grid { align-items: stretch; flex-direction: column; gap: 24px; padding: 40px 0; }
  .footer-highlight h2 { font-size: 31px; }
  .footer-highlight p { font-size: 14px; line-height: 1.65; }
  .footer-highlight__actions { display: grid; grid-template-columns: 1fr; width: 100%; gap: 8px; }
  .footer-highlight__actions .button { width: 100%; }
  .footer-main { padding-top: 42px; }
  .footer-layout--refined { gap: 25px 18px; padding-bottom: 30px; }
  .footer-layout--refined .footer-brand { padding-right: 0; }
  .brand__logo--footer { width: 158px; max-width: 158px; }
  .footer-brand > p { margin: 16px 0 18px; font-size: 13px; line-height: 1.65; }
  .footer-brand__contacts { margin-bottom: 17px; }
  .footer-brand__contacts a { grid-template-columns: 52px minmax(0,1fr); gap: 8px; }
  .footer-column { gap: 7px; }
  .footer-column h2 { margin-bottom: 4px; }
  .footer-column a,
  .footer-column button { min-height: 34px; display: flex; align-items: center; font-size: 13px; }
  .footer-payment-row { gap: 14px; padding: 20px 0 24px; }
  .footer-payment-row__label { width: 100%; }
  .footer-payment-icons { gap: 7px; }
  .payment-logo { min-height: 42px; padding: 7px 9px; }
  .footer-bottom__inner { padding: 15px 0 calc(15px + env(safe-area-inset-bottom)); }

  /* Cookie-Hinweis als kompakte Mobile-Card. */
  .cookie-consent {
    left: 10px;
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    width: auto;
    max-width: none;
    padding: 14px;
    gap: 12px;
    border-radius: 16px;
  }
  .cookie-consent h2 { font-size: 16px; }
  .cookie-consent p { font-size: 11px; line-height: 1.5; }
  .cookie-consent__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; width: 100%; }
  .cookie-consent__actions [data-cookie-essential] { grid-column: 1; grid-row: 1; }
  .cookie-consent__actions [data-cookie-accept-all] { grid-column: 2; grid-row: 1; }
  .cookie-consent__settings-link { grid-column: 1 / -1; grid-row: 2; min-height: 34px; text-align: center; }
  .cookie-consent__actions .button { width: 100%; min-height: 42px; padding-inline: 8px; }

  .cookie-settings__panel {
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    transform: none;
    width: 100%;
    max-width: none;
    max-height: calc(100dvh - 10px);
    padding: 20px 16px calc(18px + env(safe-area-inset-bottom));
    border-radius: 20px 20px 0 0;
  }
  .cookie-settings__header { gap: 12px; }
  .cookie-settings__intro { margin-bottom: 14px; font-size: 12px; }
  .cookie-category { grid-template-columns: minmax(0,1fr) auto; gap: 14px; padding: 14px 0; }
  .cookie-category > div > span { font-size: 11px; line-height: 1.5; }
  .cookie-settings__footer { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .cookie-settings__footer .button { width: 100%; min-height: 44px; padding-inline: 8px; }

  /* Live-Chat auf Smartphones als nahezu vollflächiges Panel. */
  .livechat-widget { right: max(10px, env(safe-area-inset-right)); bottom: calc(10px + env(safe-area-inset-bottom)); }
  .livechat-panel {
    position: fixed;
    inset: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom)) 8px;
    width: auto;
    max-height: none;
    border-radius: 18px;
    display: flex;
    flex-direction: column;
  }
  .livechat-panel[hidden] { display: none !important; }
  .livechat-panel__header { flex: 0 0 auto; padding: 12px 13px; }
  .livechat-panel__mark { min-width: 92px; }
  .livechat-panel__mark img { width: 92px; }
  .livechat-panel__identity { gap: 9px; min-width: 0; }
  .livechat-panel__identity > span:last-child { min-width: 0; }
  .livechat-panel__identity strong { font-size: 13px; }
  .livechat-panel__identity small { font-size: 10px; }
  .livechat-panel__body { min-height: 0; max-height: none; overflow: auto; }
  .livechat-intro { padding: 17px 17px 12px; }
  .livechat-panel__body .livechat-intro h2 { font-size: 20px; }
  .livechat-form { padding: 0 17px 16px; }
  .livechat-form__row { grid-template-columns: 1fr; }
  .livechat-messages { height: auto; min-height: 180px; max-height: none; flex: 1 1 auto; }
  .livechat-chat-status { position: sticky; top: 0; z-index: 3; }
  .livechat-compose { position: sticky; bottom: 0; }
  .livechat-launcher { min-height: 58px; }
}

@media (max-width: 520px) {
  .container { width: min(calc(100% - 22px), var(--container)); }
  .section { padding: 56px 0; }
  .eyebrow { margin-bottom: 12px; font-size: 10.5px; }

  .topbar__links a { font-size: 10.5px; }
  .brand__logo { width: 132px; max-width: 132px; }

  .hero-slider.hero-slider--image,
  .hero-slider--image .hero-slider__stage,
  .hero-slider--image .hero-slide { min-height: 600px; }
  .hero-slide__inner { min-height: 600px; padding-top: 42px; }
  .hero-slider--image .hero-slide__content h1,
  .hero-slider--image .hero-title { font-size: clamp(34px, 10.2vw, 40px); }
  .hero-slider--image .hero-slide__lead { font-size: 14.5px; }
  .hero-slider--image .hero-slide__trust { font-size: 12px; }

  .domain-form { margin-inline: -2px; }
  .home-domain-featured { margin-inline: -12px; padding-inline: 12px; }
  .home-domain-check-result { grid-template-columns: 30px minmax(0,1fr); }
  .home-domain-check-result .domain-check-live-result__icon { width: 30px; height: 30px; }

  .service-card,
  .price-card,
  .reason-card,
  .testimonial,
  .migration-card { padding: 20px 18px; }

  .footer-layout--refined { grid-template-columns: 1fr; gap: 22px; }
  .footer-layout--refined .footer-brand { grid-column: auto; }
  .footer-column { padding-top: 3px; }
  .footer-payment-icons { grid-template-columns: 1fr 1fr; }
  .payment-logo--mastercard { min-width: 0; }

  .cookie-consent__actions { grid-template-columns: 1fr; }
  .cookie-consent__actions [data-cookie-essential],
  .cookie-consent__actions [data-cookie-accept-all],
  .cookie-consent__settings-link { grid-column: 1; grid-row: auto; }
  .cookie-consent__actions [data-cookie-accept-all] { order: 1; }
  .cookie-consent__actions [data-cookie-essential] { order: 2; }
  .cookie-consent__settings-link { order: 3; }

  .cookie-settings__footer { grid-template-columns: 1fr; }

  /* Auf sehr schmalen Geräten nimmt der Chat-Launcher nur wenig Platz ein. */
  .livechat-launcher { width: 58px; height: 58px; min-height: 58px; padding: 6px; border-radius: 17px; }
  .livechat-launcher > span:last-child { display: none; }
  .livechat-launcher__icon { width: 44px; height: 44px; }
  .livechat-chat-status { grid-template-columns: auto minmax(0,1fr) auto; }
  .livechat-chat-status code { grid-column: 2; }
  .livechat-status-dismiss { grid-column: 3; grid-row: 1 / span 2; }

  .domain-price-pagination__pages { gap: 4px; }
  .domain-price-pagination__page { min-width: 40px; padding-inline: 8px; }
}

@media (max-width: 380px) {
  .container { width: min(calc(100% - 18px), var(--container)); }
  .topbar__links a { font-size: 10px; }
  .brand__logo { width: 124px; max-width: 124px; }
  .nav-toggle { width: 44px; height: 44px; }

  .hero-slider.hero-slider--image,
  .hero-slider--image .hero-slider__stage,
  .hero-slider--image .hero-slide { min-height: 610px; }
  .hero-slide__inner { min-height: 610px; padding-top: 38px; }
  .hero-slider--image .hero-slide__content h1,
  .hero-slider--image .hero-title { font-size: 34px; }
  .hero-slider--image .hero-slider__controls { gap: 6px; }
  .hero-slider--image .slider-arrow,
  .hero-slider--image .slider-pause { width: 38px; height: 38px; min-width: 38px; }

  .footer-payment-icons { grid-template-columns: 1fr; }
  .footer-brand__contacts a { grid-template-columns: 48px minmax(0,1fr); }
}

@media (hover: none) and (pointer: coarse) {
  .service-card:hover,
  .reason-card:hover,
  .testimonial:hover,
  .home-domain-featured__item:hover,
  .button:hover,
  .livechat-launcher:hover { transform: none; }
}