/* Responsive corrections only. Original colors, fonts and desktop layout stay
   in styles.css and the generated page stylesheet. */

/* Long German terms must fit their card even between grid breakpoints. */
#potott-site main :is(h1, h2, h3, p, strong, span) {
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* Keep the approved typography, adjusting the legal title only where the
   original 46px minimum would exceed the smallest phone's content width. */
@media (max-width: 360px) {
  #potott-site[data-page="datenschutz"] main h1,
  #potott-site[data-page="impressum"] main h1 {
    font-size: clamp(38px, 12vw, 46px);
  }
}

/* On phones, reserve a second header row for the existing navigation dots.
   Their appearance stays the same; larger link boxes are easier to tap. */
@media (max-width: 540px) {
  #potott-site [data-site-header] {
    padding-bottom: 72px;
  }

  #potott-site nav[aria-label="Abschnitte"] ol {
    position: absolute;
    top: 62px;
    left: 50%;
    transform: translateX(-50%);
    gap: 2px;
  }

  #potott-site nav[aria-label="Abschnitte"] a {
    width: 44px;
    height: 44px;
  }

  #potott-site main [data-panel] {
    padding-top: 140px;
  }

  #potott-site [data-action="goKontakt"][data-navigation] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  #potott-site [data-action="copyMail"],
  #potott-site nav[aria-label="Rechtliches"] a,
  #potott-site footer a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* Tablets have room for the original single header row with touch targets. */
@media (min-width: 541px) and (max-width: 1180px), (any-pointer: coarse) and (min-width: 541px) {
  #potott-site nav[aria-label="Abschnitte"] a {
    min-width: 44px;
    min-height: 44px;
  }

  #potott-site [data-action="copyMail"],
  #potott-site nav[aria-label="Rechtliches"] a,
  #potott-site footer a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* Smooth scrolling stays available; touch movement is handled by the native
   scroll container, including momentum and horizontal gesture rejection. */
#potott-site [data-ref="stageRef"] {
  touch-action: pan-y pinch-zoom;
}

/* The close control must remain visible while the external form scrolls. */
#potott-site [data-ref="cnRef"] {
  overscroll-behavior: contain;
  overflow-x: hidden;
}

/* Keep edited button labels inside their existing containers. */
#potott-site main .btn{max-width:100%;white-space:normal;overflow-wrap:anywhere}