/*
 * kite-surfers.de - our own corrections, loaded after the stylesheet made from
 * Webflow's (public/assets/webflow/kite-surfers-2026-09-30.css). Each one says what
 * it fixes and where it was seen. A new file name with every change (caching).
 */

/* 1. Phones: nothing may push the page sideways. On the live site the home page was
 *    400px wide on a 390px phone and the course pages 393px (the map box sits 3px
 *    right of the edge); the page could be dragged sideways. Found 2026-09-30. */
@media screen and (max-width: 991px) {
  html, body { overflow-x: clip; }
}

/* 1b. Phones: the real cause of the sideways scroll on the home page. The promo block
 *    ("ks-aktion-container-left") is 100vw wide inside a box that already has 1em padding
 *    on the left, so it stuck out 14px to the right. It now fills its box. The body clip
 *    above hid it on desktop browsers, but phones still let the page slide. Work Board #29. */
@media screen and (max-width: 767px) {
  .ks-aktion-container-left { width: 100%; }
}

/* 2. Phones: long German words in headings (/agb: "Geschäftsbedingungen") ran off
 *    the screen. They are now hyphenated or broken. Found 2026-09-30 at 390px. */
@media screen and (max-width: 479px) {
  h1, h2, h3 { overflow-wrap: break-word; hyphens: auto; }
}

/* 3. Wide screens: the light-green panels on the right ("Folge uns auf Instagram")
 *    are a picture 1172px wide in a box 55-60% of the window. Past about 1950px the
 *    box outgrew the picture and its button slid off it. The box now stops at the
 *    picture's width. Found 2026-09-30 at 2560px. */
@media screen and (min-width: 1441px) {
  .right-side-element--lightgreen { max-width: 73.25rem; }
}

/* 4. Accessibility (WCAG 2.2.2): the hero videos on the home page moved for ever with no
 *    way to stop them. A pause/play button now sits in the corner of each background
 *    video (script at the end of src/layouts/Seite.astro); with "reduce motion" set in
 *    the system the videos do not start. Found 2026-09-30 (Patrick, Work Board). */
.video-pause {
  position: absolute; right: 1rem; bottom: 1rem; z-index: 5;
  width: 2.75rem; height: 2.75rem; padding: 0; border: 2px solid #fff; border-radius: 50%;
  background: rgba(0, 0, 0, .55); cursor: pointer;
}
.video-pause::before {
  content: ""; position: absolute; inset: 0; margin: auto; width: 1rem; height: 1rem;
  background: linear-gradient(90deg, #fff 0 35%, transparent 35% 65%, #fff 65% 100%);
}
.video-pause[data-state="paused"]::before {
  background: #fff; clip-path: polygon(15% 0, 100% 50%, 15% 100%);
}
.video-pause:hover { background: rgba(0, 0, 0, .8); }
.video-pause:focus-visible { outline: 3px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 6px #000; }

/* 5. Accessibility (WCAG 1.3.1 / 2.4.6): booking pages and the 404 page had no <h1>.
 *    The heading is there for screen readers only; the pages look as before. */
.nur-vorlesen {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 6. Cookie banner (Work Board #29, 2026-09-30). (a) It sat under the hero video: its
 *    z-index was 3 and the video's layers are higher. It is now above everything.
 *    (b) On phones it filled two thirds of the screen (641px of 844px). Smaller type
 *    and padding, tighter buttons, and if the choices are opened it scrolls inside
 *    itself instead of running off the screen. */
.cw-cookie_banner { z-index: 2147483647; }
.cw-cookie_banner p span { display: block; }
.cw-cookie_banner p span + span { margin-top: 1rem; } /* the empty line the two <br> made */
.cw-cookie_icon { z-index: 2147483646; } /* the banner covers the icon, not the other way round */
@media screen and (max-width: 767px) {
  .cw-cookie_banner {
    padding: 0.875rem 1rem; max-height: calc(100vh - 1.25rem); max-height: calc(100dvh - 1.25rem);
    overflow-y: auto; overscroll-behavior: contain;
  }
  .cw-cookie_banner h3 { font-size: 1.125rem; line-height: 1.2; margin: 0 0 0.375rem; }
  .cw-cookie_banner p { font-size: 0.8125rem; line-height: 1.3; margin: 0 0 0.5rem; }
  .cw-cookie_banner p span + span { margin-top: 0.375rem; }
  .cw-cookie_banner a { font-size: 0.8125rem; }
  /* the two outlined buttons side by side, "accept all" full width below */
  .cw-cookie_buttons { margin-top: 0.75rem; grid-row-gap: 0.5rem; grid-column-gap: 0.5rem; flex-flow: row wrap; }
  .cw-cookie_buttons .cw-button_secondary { flex: 1 1 0; min-width: 0; }
  .cw-cookie_buttons .cw-button_primary { flex: 1 1 100%; }
  .cw-cookie_banner .cw-button_secondary, .cw-cookie_banner .cw-button_primary {
    padding: 0.75rem 0.5rem; font-size: 0.875rem;
  }
  .cw-cookie_options { margin-top: 0.75rem; grid-row-gap: 0.5rem; }
}

/* 7. Cookie banner (Work Board #30, 2026-09-30): no choice is highlighted. "Alle akzeptieren"
 *    was filled and the other two outlined, which nudged people to accept everything. All
 *    three buttons now look the same (dark blue, white text), as on supremesurfkurs.de. */
.cw-cookie_banner .cw-button_primary,
.cw-cookie_banner .cw-button_secondary {
  color: #fff;
  background-color: #023047;
  border: 1px solid #023047;
  font-weight: 400;
}
.cw-cookie_banner .cw-button_primary:hover,
.cw-cookie_banner .cw-button_secondary:hover {
  color: #fff;
  background-color: #344054;
  border-color: #344054;
}

/* 8. Cookie banner (Work Board #29, follow-up): the banner could be dragged up and down
 *    although only the text was showing, with empty space below. The seven hidden checkboxes
 *    are position:absolute and their nearest positioned parent is the banner, so the
 *    collapsed (0px high, overflow hidden) choices box did not clip them: they made the
 *    banner 221px taller inside. The box is now positioned, so it clips them. */
.cw-cookie_selection { position: relative; }