/* ============================================================
   KuKvS — Feedback Round 2 fixes
   Loaded AFTER responsive.css so these win on equal specificity.
   Goals: honour the review annotations AND make every section
   robust across aspect ratios (no fragile absolute % overflow).
   ============================================================ */

/* ─────────────────────────────────────────────────────────
   0. ANTI-FLICKER — reserve the vertical scrollbar permanently.
   Several layout switches are driven by aspect-ratio media
   queries (max-aspect-ratio: 3/2, 1/1, 4/5). Near those
   boundaries a stacked layout can grow tall enough to summon a
   vertical scrollbar, which narrows the viewport, which flips
   the aspect ratio back, which removes the scrollbar… an
   infinite reflow loop that reads as flicker. Always reserving
   the scrollbar gutter keeps the viewport width constant, so the
   aspect-ratio queries can't oscillate.
   ───────────────────────────────────────────────────────── */
html {
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

/* ─────────────────────────────────────────────────────────
   1. BODY / FACTS INDENT ("einrücken") — desktop & tablet
   Big cerise headings + eyebrows stay flush at the section
   edge; intro paragraphs, the stat rows and the CTA links sit
   in an indented content column. Mobile (<768) overrides this
   back to flush, per the "bündig" feedback.
   ───────────────────────────────────────────────────────── */
@media (min-width: 768px) {
  .kukvs-onepager .eine-branche-mit-kra,
  .kukvs-onepager .kontakt-aufnehmen-1,
  .kukvs-onepager .der-ku-kv-s-ldt-dazu,
  .kukvs-onepager .kontakt-aufnehmen-2,
  .kukvs-onepager .flex-row,
  .kukvs-onepager .flex-row-1,
  .kukvs-onepager .overlap-group7,
  .kukvs-onepager .overlap-group8 {
    margin-left: clamp(20px, 13%, 360px) !important;
  }
}

/* ─────────────────────────────────────────────────────────
   2. DECORATIVE BANNER overlaps the photo ("schräge Balken
   soll etwas über das Bild ragen"). Banners sit ABOVE the
   photo (z-index) and bite into it by a width-proportional
   negative margin so the diagonal bar clips onto the image.
   ───────────────────────────────────────────────────────── */
@media (min-width: 768px) {
  /* bottom banners (rise onto the photo above them) */
  .kukvs-onepager .overlap-group6 .gruppe-16,
  .kukvs-events .overlap-group4 .gruppe-16 {
    margin-top: clamp(-150px, -7vw, -56px) !important;
    z-index: 3 !important;
    overflow: visible !important;
  }
  .kukvs-onepager .overlap-group6 .christina-wocintechc,
  .kukvs-events .overlap-group4 .stock-photo-diverse {
    z-index: 1 !important;
  }
  /* top banner over the gallery photo (dips onto the photo below) */
  .kukvs-onepager .overlap-group2 .gruppe-14 {
    margin-bottom: clamp(-150px, -7vw, -56px) !important;
    z-index: 3 !important;
    position: relative !important;
    overflow: visible !important;
  }
  .kukvs-onepager .overlap-group2 .ku-kv-s_-verlaufsflaeche_rgb_148x148mm-1,
  .kukvs-onepager .overlap-group2 .leonardo-vargas-i9q-u-ho-o5-rx0-unsplash {
    z-index: 1 !important;
  }
  /* let the banner's rotated bar show outside its box */
  .kukvs-onepager .overlap-group6,
  .kukvs-events .overlap-group4,
  .kukvs-onepager .overlap-group2 {
    overflow: visible !important;
  }
}

/* ─────────────────────────────────────────────────────────
   3. "Mitglied werden" circle on the guitar photo should not
   sit so far inside the image — straddle the top-left corner.
   ───────────────────────────────────────────────────────── */
@media (min-width: 768px) {
  .kukvs-onepager .overlap-group6 {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    position: relative;
  }
  .kukvs-onepager .overlap-group6 .gruppe-22 {
    position: absolute !important;
    left: clamp(10px, 5%, 130px) !important;
    top: clamp(-80px, -4vw, -34px) !important;
    transform: scale(0.85) rotate(-9deg) !important;
    transform-origin: top left;
    z-index: 6 !important;
  }
}

/* ─────────────────────────────────────────────────────────
   4. GEMEINSAM ENTSTEHT MEHR WIRKUNG (onepager .overlap-group5)
   Replace fragile absolute-% layout with a padded flow inside
   the white field. Fixes: text overflowing right, too tight on
   left, and halves the vertical gaps. Robust at all ratios.
   ───────────────────────────────────────────────────────── */
@media (min-width: 768px) {
  .kukvs-onepager .overlap-group5 {
    aspect-ratio: auto !important;
    height: auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    padding: clamp(60px, 6vw, 120px) clamp(60px, 7.5vw, 160px) !important;
  }
  .kukvs-onepager .overlap-group5 .gruppe-15 {
    position: absolute !important;
    inset: 0 !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }
  .kukvs-onepager .overlap-group5 .ku-kv-s_-verlaufsflaeche_rgb_148x148mm-2 {
    width: 100% !important;
    height: 100% !important;
    left: 0 !important;
    top: 0 !important;
    inset: 0 !important;
    object-fit: cover;
  }
  .kukvs-onepager .overlap-group5 .rechteck-11 {
    top: clamp(28px, 3vw, 66px) !important;
    left: clamp(28px, 3vw, 66px) !important;
    right: clamp(28px, 3vw, 66px) !important;
    bottom: clamp(28px, 3vw, 66px) !important;
    width: auto !important;
    height: auto !important;
  }
  .kukvs-onepager .overlap-group5 .warum-dabei-sein,
  .kukvs-onepager .overlap-group5 .gemeinsam-entsteht-mehr-wirkung,
  .kukvs-onepager .overlap-group5 .als-mitglied-partne {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    z-index: 2;
    white-space: normal !important;
  }
  .kukvs-onepager .overlap-group5 .warum-dabei-sein {
    order: 1;
    margin: 0 0 0.45em !important;
    width: auto !important;
    max-width: 90% !important;
    font-size: clamp(16px, 1.6vw, 25px) !important;
    line-height: 1.3 !important;
    letter-spacing: clamp(2px, 0.45vw, 7.5px) !important;
  }
  .kukvs-onepager .overlap-group5 .gemeinsam-entsteht-mehr-wirkung {
    order: 2;
    margin: 0 0 clamp(22px, 2.2vw, 44px) !important;
    width: auto !important;
    max-width: 100% !important;
    font-size: clamp(32px, 5vw, 110px) !important;
    line-height: 1.1 !important;
  }
  .kukvs-onepager .overlap-group5 .als-mitglied-partne {
    order: 3;
    margin: 0 !important;
    width: auto !important;
    max-width: min(860px, 70%) !important;
    font-size: clamp(15px, 1.3vw, 20px) !important;
    line-height: 1.55 !important;
  }
  .kukvs-onepager .overlap-group5 .gruppe-15 { order: 0; }
}

/* ─────────────────────────────────────────────────────────
   5. SEI DABEI. MACH DEN UNTERSCHIED (onepager .overlap-group1)
   Landscape desktop: tighten the gaps around the circle and
   between the body text and KONTAKT AUFNEHMEN ("nur halb soviel
   Abstand", "ZAB beim Button anpassen").
   ───────────────────────────────────────────────────────── */
@media (min-width: 768px) and (min-aspect-ratio: 1/1) {
  .kukvs-onepager .overlap-group1 .seien-sie-dabei-mac {
    top: 15% !important;
    left: 6% !important;
    width: 82% !important;
  }
  .kukvs-onepager .overlap-group1 .interesse-an-mitglie {
    top: 46% !important;
    left: 34% !important;
    width: min(900px, 58%) !important;
  }
  .kukvs-onepager .overlap-group1 .gruppe-23 {
    top: 46% !important;
    left: 6% !important;
  }
  .kukvs-onepager .overlap-group1 .kontakt-aufnehmen-3 {
    top: 61% !important;
    left: 34% !important;
    width: min(900px, 58%) !important;
  }
}

/* ─────────────────────────────────────────────────────────
   6. FOOTER (desktop ≥1200): bottom-align the columns so the
   Instagram icon sits flush on the same baseline as the
   second line of every other column ("Insta Logo bündig").
   ───────────────────────────────────────────────────────── */
@media (min-width: 1200px) {
  .kukvs-onepager .flex-row-2,
  .kukvs-events .flex-row-1,
  .kukvs-legal .flex-row-1 {
    align-items: flex-end !important;
  }
  .kukvs-onepager .flex-col-1,
  .kukvs-events .flex-col-1,
  .kukvs-legal .flex-col-1 {
    align-self: flex-end !important;
  }
}

/* ─────────────────────────────────────────────────────────
   7. EVENTS PAGE
   ───────────────────────────────────────────────────────── */
/* 7a. Remove the redundant "JETZT ANMELDEN" eyebrow above the
   DEIN CHECK-IN heading ("Wo kommt das her? Bitte löschen").
   Scoped to the events registration form only — the standalone
   anmeldung/mitglied pages keep their real eyebrows. */
.kukvs-events #registration-form .anmeldung-eyebrow {
  display: none !important;
}

/* 7b. UNSERE EVENT-HIGHLIGHTS → reduce gap to the intro text. */
@media (min-width: 768px) {
  .kukvs-events .unsere-event-highlig {
    min-height: 0 !important;
    margin-bottom: 0 !important;
  }
  .kukvs-events .die-ku-kv-s-events-sin {
    margin-top: clamp(20px, 2vw, 40px) !important;
  }
}

/* 7c. Indent the anmeldung body text + form labels so they line
   up with the form fields ("Bitte die Texte einrücken"). The
   form column is centered at max-width 1088 inside the gradient;
   align the intro + section labels to that column's left edge. */
@media (min-width: 768px) {
  .kukvs-events .overlap-group {
    align-items: center !important;
  }
  .kukvs-events #registration-form {
    align-items: stretch !important;
    width: 100% !important;
    max-width: 1088px !important;
    margin: 0 auto !important;
  }
  .kukvs-events #registration-form .dein-check-in-event-anmeldung,
  .kukvs-events #registration-form .bereit-fr-den-nchs,
  .kukvs-events #registration-form .welches-event-mchtest-du-besuchen,
  .kukvs-events #registration-form .individuelle-anmerkungen,
  .kukvs-events #registration-form .form-submit,
  .kukvs-events #registration-form .form-status,
  .kukvs-events #registration-form .linie-4 {
    align-self: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
  }
  .kukvs-events #registration-form .dein-check-in-event-anmeldung {
    min-height: 0 !important;
    line-height: 1.12 !important;
    margin-bottom: clamp(18px, 1.8vw, 32px) !important;
  }
  .kukvs-events #registration-form .bereit-fr-den-nchs {
    min-height: 0 !important;
    line-height: 1.6 !important;
    margin: 0 0 8px 0 !important;
  }
  .kukvs-events #registration-form .form-field-row,
  .kukvs-events #registration-form .name-container,
  .kukvs-events #registration-form .rechteck-container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-right: 0 !important;
  }
  .kukvs-events #registration-form .welches-event-mchtest-du-besuchen,
  .kukvs-events #registration-form .individuelle-anmerkungen {
    margin-top: clamp(18px, 1.8vw, 28px) !important;
    margin-bottom: 0 !important;
  }
  .kukvs-events .form-select,
  .kukvs-events .form-textarea {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* 7d. KUKVS-TREFF: place the JETZT ANMELDEN button directly
   under the WO row, aligned with the body text column. */
@media (min-width: 768px) {
  .kukvs-events .overlap-group5 {
    margin-top: clamp(20px, 2.2vw, 44px) !important;
    margin-bottom: clamp(8px, 1vw, 20px) !important;
  }
}

/* ─────────────────────────────────────────────────────────
   8. MOBILE (<768)
   ───────────────────────────────────────────────────────── */
@media (max-width: 767px) {

  /* 8a. Brand gradient instead of the grey CSS fallback
     ("Der Verlauf sieht so grau aus"). Use the real mesh image. */
  .kukvs-onepager .overlap-group4 {
    background: #f3b9cd url(../img/kukvs-verlaufsflaeche-rgb-148x148mm-1@1x.png) center / cover no-repeat !important;
  }
  .kukvs-onepager .overlap-group1 {
    background: #f3b9cd url(../img/kukvs-verlaufsflaeche-rgb-148x148mm-2@1x.png) center / cover no-repeat !important;
  }
  .kukvs-events .overlap-group2 {
    background: #f3b9cd url(../img/kukvs-verlaufsflaeche-rgb-148x148mm-1x-png@1x.png) center / cover no-repeat !important;
  }

  /* 8b. More breathing room under the header before the hero
     headline ("Abstand vergrößern!!"). */
  .kukvs-onepager .overlap-group4 .kreativitt-vernetze,
  .kukvs-events .overlap-group2 .ku-kv-s-2026-vernetze {
    padding-top: clamp(40px, 11vw, 64px) !important;
  }

  /* 8c. Body text flush-left with the headings ("bündig").
     Unify the content edge to match the header padding (18px). */
  .kukvs-onepager .der-ku-kv-s-wurde-2025,
  .kukvs-onepager .overlap-group9 .der-ku-kv-s-wurde-2025,
  .kukvs-onepager .interesse-an-mitglie,
  .kukvs-onepager .overlap-group1 .interesse-an-mitglie,
  .kukvs-onepager .overlap-group1 .kontakt-aufnehmen-3,
  .kukvs-events .als-mitglied-partne,
  .kukvs-events .overlap-group1 .als-mitglied-partne {
    margin-left: 18px !important;
    margin-right: 18px !important;
    text-align: left !important;
    width: auto !important;
    max-width: calc(100% - 36px) !important;
  }

  /* 8d. NETWORKING / GEMEINSAM block: left-aligned, eyebrow under
     heading, same top gap as over "NETWORKING" ("linksbündig",
     "gleicher Abstand wie über Networking"). */
  .kukvs-events .overlap-group1 {
    padding: 0 18px !important;
    margin-top: 50px !important;
  }
  .kukvs-events .overlap-group1 .gemeinsam-entsteht-mehr-wirkung,
  .kukvs-events .overlap-group1 .warum-dabei-sein {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .kukvs-events .overlap-group1 .gemeinsam-entsteht-mehr-wirkung {
    margin-bottom: 6px !important;
  }
  .kukvs-events .overlap-group1 .warum-dabei-sein {
    margin-bottom: 14px !important;
  }

  /* 8e. SCHWERPUNKTE list font smaller on mobile. The original
     list uses font-size:30px / line-height:100px → far too large
     stacked. Bring it down so each item is comfortable. */
  .kukvs-onepager .interessenvertretung {
    font-size: clamp(16px, 4.6vw, 22px) !important;
    line-height: 1.5 !important;
    letter-spacing: 0.5px !important;
  }

  /* 8f. "Mitglied werden" circle smaller + tighter internal
     spacing ("Kreis kleiner machen", "ZAB im Button anpassen"). */
  .kukvs-onepager .gruppe-18,
  .kukvs-onepager .gruppe-22,
  .kukvs-onepager .gruppe-23 {
    transform: scale(0.55) rotate(-9deg) !important;
  }
  .kukvs-onepager .gruppe-18 .mitglied-werden .span,
  .kukvs-onepager .gruppe-22 .mitglied-werden .span,
  .kukvs-onepager .gruppe-23 .mitglied-werden .span {
    letter-spacing: 0.5px !important;
  }
  .kukvs-onepager .gruppe-18 .mitglied-werden .montserrat-normal-white-20px,
  .kukvs-onepager .gruppe-22 .mitglied-werden .montserrat-normal-white-20px,
  .kukvs-onepager .gruppe-23 .mitglied-werden .montserrat-normal-white-20px {
    letter-spacing: 2.5px !important;
  }

  /* 8g. DEIN MEHRWERT → image full width + smaller gap above it. */
  .kukvs-onepager .overlap-group6,
  .kukvs-events .overlap-group4 {
    margin-top: 26px !important;
    padding: 0 !important;
  }
  .kukvs-onepager .overlap-group6 .christina-wocintechc,
  .kukvs-events .overlap-group4 .stock-photo-diverse {
    width: 100% !important;
    margin: 0 !important;
  }

  /* 8h. Events anmeldung: drop the now-hidden eyebrow's gap and
     keep the text flush-left ("Text bündig machen"). */
  .kukvs-events #registration-form .dein-check-in-event-anmeldung,
  .kukvs-events #registration-form .bereit-fr-den-nchs {
    text-align: left !important;
    margin-left: 0 !important;
  }

  /* 8i. FOOTER mobile — single-column stack.
     The previous 2-column grid forced "MITGLIED WERDEN" and
     "FOLGT UNS:" side-by-side; at narrow widths MITGLIED WERDEN
     is wider than its half-column and overlapped FOLGT UNS. A
     simple vertical stack is robust at every aspect ratio. */
  .kukvs-onepager .flex-row-2,
  .kukvs-events .flex-row-1,
  .kukvs-legal .flex-row-1 {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    column-gap: 0 !important;
    row-gap: 30px !important;
    padding: 40px 20px 48px !important;
    overflow: visible !important;
  }
  /* reset every grid placement the base mobile rule set */
  .kukvs-onepager .flex-row-2 > *,
  .kukvs-events .flex-row-1 > *,
  .kukvs-legal .flex-row-1 > * {
    grid-column: auto !important;
    grid-row: auto !important;
    align-self: flex-start !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  /* …but the composite logo is a fixed-size box of absolutely-
     positioned pieces — it must keep its width/height/scale or it
     collapses and clips (the "S + gradient square" artifact). */
  .kukvs-onepager .flex-row-2 .ku-kv-s_-hauptlogo_rgb_farbig-1,
  .kukvs-events .flex-row-1 .ku-kv-s_-hauptlogo_rgb_farbig-1,
  .kukvs-legal .flex-row-1 .ku-kv-s_-hauptlogo_rgb_farbig-1 {
    width: 263px !important;
    height: 81px !important;
    flex-shrink: 0 !important;
    transform: scale(0.65) !important;
    transform-origin: top left !important;
    margin: 0 0 -28px 0 !important;
  }
  /* phone + email stacked, each on its own line, no divider */
  .t-0821-47013835e-infokukvsde {
    display: block !important;
    line-height: 1.7 !important;
  }
  .t-0821-47013835e-infokukvsde br {
    display: inline !important;
  }
  /* MITGLIED WERDEN on one line, full width */
  .kukvs-onepager .mitglied-werden-2,
  .kukvs-events .mitglied-werden-1 {
    white-space: nowrap !important;
  }
  .kukvs-onepager .mitglied-werden-2 br,
  .kukvs-events .mitglied-werden-1 br {
    display: none !important;
  }
  /* FOLGT UNS: + icon stacked together */
  .kukvs-onepager .flex-col-1,
  .kukvs-events .flex-col-1,
  .kukvs-legal .flex-col-1 {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  /* IMPRESSUM | DATENSCHUTZ inline with a divider */
  .kukvs-onepager .impressum-datenschutz,
  .kukvs-events .impressum-datenschutz,
  .kukvs-legal .impressum-datenschutz {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px 14px !important;
    align-items: baseline !important;
  }
  .impressum-datenschutz br {
    display: none !important;
  }
}

/* Vertical "I" divider glyph (mobile) between IMPRESSUM and
   DATENSCHUTZ only. The phone/email pair is stacked, so it needs
   no divider (a leftover one used to dangle after the phone). */
@media (max-width: 767px) {
  .impressum-datenschutz a.footer-link:first-of-type::after {
    content: "|";
    margin-left: 14px;
    opacity: 0.5;
    display: inline-block;
  }
}

/* ============================================================
   FEEDBACK ROUND 3
   ============================================================ */

/* ─────────────────────────────────────────────────────────
   9. FOOTER — every aspect ratio ≥768px.
   The footer is a flex row. At ≤1199 it wraps; at ≥1200 the base
   layout is a single non-wrapping row, and the global
   `min-width: 0` + `hyphens: auto` rules let the columns squeeze
   and break mid-word ("info@kuk / vs.de", "IMPRESS / UM",
   "0821 / 47013835"). Pin each text column to its content width,
   forbid mid-word breaks, and let the ROW wrap whole columns onto
   a new line instead of shredding words — at ALL widths. ───── */
@media (min-width: 768px) {
  .kukvs-onepager .flex-row-2,
  .kukvs-events .flex-row-1,
  .kukvs-legal .flex-row-1 {
    flex-wrap: wrap !important;
    gap: 32px 56px !important;
  }
  .kukvs-onepager .flex-row-2 .t-0821-47013835e-infokukvsde,
  .kukvs-events .flex-row-1 .t-0821-47013835e-infokukvsde,
  .kukvs-legal .flex-row-1 .t-0821-47013835e-infokukvsde,
  .kukvs-onepager .flex-row-2 .impressum-datenschutz,
  .kukvs-events .flex-row-1 .impressum-datenschutz,
  .kukvs-legal .flex-row-1 .impressum-datenschutz,
  .kukvs-onepager .flex-row-2 .flex-col-1,
  .kukvs-events .flex-row-1 .flex-col-1,
  .kukvs-legal .flex-row-1 .flex-col-1,
  .kukvs-onepager .flex-row-2 .nav-link,
  .kukvs-events .flex-row-1 .nav-link,
  .kukvs-legal .flex-row-1 .nav-link {
    flex: 0 0 auto !important;
    min-width: max-content !important;
  }
  .t-0821-47013835e-infokukvsde,
  .impressum-datenschutz,
  .t-0821-47013835e-infokukvsde a.footer-link,
  .impressum-datenschutz a.footer-link {
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    -webkit-hyphens: none !important;
    hyphens: none !important;
  }
  .kukvs-onepager .mitglied-werden-2,
  .kukvs-events .mitglied-werden-1 {
    white-space: nowrap !important;
    margin-left: 0 !important;
    width: auto !important;
  }
}

/* ─────────────────────────────────────────────────────────
   10. "WIR SIND DIE" intro — extended with the 12 Teilbereiche.
   The original ≥1680 desktop layout was absolute + fixed-height
   (1048px) and would collide with the photo now that the text is
   longer. Convert the whole section to a robust vertical flow at
   every width ≥768 and left-align the copy to match the page's
   left-aligned system + the reference screenshot.
   ───────────────────────────────────────────────────────── */
@media (min-width: 768px) {
  .kukvs-onepager .overlap-group9 {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    position: relative !important;
    height: auto !important;
    width: 100% !important;
    max-width: 1642px !important;
    margin: clamp(70px, 9vw, 177px) auto 0 !important;
    padding: 0 clamp(20px, 5vw, 120px) !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }
  .kukvs-onepager .overlap-group9 .der-ku-kv-s-wurde-2025 {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: 1090px !important;
    text-align: left !important;
    margin: 0 0 clamp(28px, 3vw, 48px) !important;
    order: 1;
  }
  .kukvs-onepager .overlap-group9 .overlap-group {
    position: static !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    order: 2;
  }
  .kukvs-onepager .overlap-group9 .dix-sept-d-kua-mkbbl-mm-unsplash {
    display: none !important;
  }
  .kukvs-onepager .overlap-group9 .x2h-media-nm-s-pbe0b-dtc-unsplash {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    order: 1;
  }
  .kukvs-onepager .overlap-group9 .gruppe-18 {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    order: 2;
    transform: scale(0.7) rotate(-9deg) !important;
    transform-origin: center center;
    margin: -120px 0 -45px clamp(10px, 5vw, 90px) !important;
    z-index: 5;
  }
  .kukvs-onepager .overlap-group9 .kontakt-aufnehmen {
    position: static !important;
    left: auto !important;
    top: auto !important;
    text-align: left !important;
    margin-top: 24px !important;
    width: auto !important;
    order: 3;
  }
}

/* Teilbereiche list styling — each area in cerise bold, with a
   masala dot separator BOUND to the end of its term (non-breaking
   space before the dot) so a dot can never dangle at the start of
   a wrapped line. The breakable space sits AFTER the dot. */
.kukvs-onepager .der-ku-kv-s-wurde-2025 .teilbereiche {
  color: var(--cerise);
  font-weight: 700;
  letter-spacing: 0.6px;
  overflow-wrap: normal !important;
  word-break: normal !important;
  word-wrap: normal !important;
  hyphens: none !important;
}
.kukvs-onepager .der-ku-kv-s-wurde-2025 .teilbereiche .tb-item {
  color: var(--cerise);
  font-weight: 700;
}
.kukvs-onepager .der-ku-kv-s-wurde-2025 .teilbereiche .tb-item:not(:last-child)::after {
  content: "\00a0\00b7";
  color: var(--masala);
  font-weight: 700;
}

/* ============================================================
   FEEDBACK ROUND 4 — BULLETPROOF OVERFLOW GUARDS
   The Anima export locks many text blocks to a single line
   (white-space:nowrap) at a fixed pixel width, and positions
   stat labels absolutely inside fixed-width containers. At
   viewport widths between the responsive breakpoints (and once
   a left indent is added) these push past the right edge and
   get clipped. The rules below make EVERY text block fluid so
   it can never exceed its container, at any aspect ratio.
   ============================================================ */

/* ── 0. Hard ceiling: no direct section may be wider than the
   viewport, and any stray long token breaks instead of pushing
   the layout sideways. ── */
.kukvs-onepager,
.kukvs-events,
.kukvs-legal {
  overflow-x: clip;
}
.kukvs-onepager .flex-col > *,
.kukvs-events .flex-col > *,
.kukvs-legal .flex-col > * {
  max-width: 100% !important;
}

/* ── 1. Kill every single-line lock + fixed pixel width on
   content text (both pages). Short labels are unaffected; long
   ones now wrap within the available width. ── */
.kukvs-onepager .eine-branche-mit-kra,
.kukvs-onepager .der-ku-kv-s-ldt-dazu,
.kukvs-onepager .kontakt-aufnehmen-1,
.kukvs-onepager .kontakt-aufnehmen-2,
.kukvs-onepager .kontakt-aufnehmen-4,
.kukvs-onepager .teilmrkte-von-des,
.kukvs-onepager .grter-wirtschaftszweig,
.kukvs-onepager .erwerbsttige,
.kukvs-onepager .umsatz-der-branche-2023,
.kukvs-onepager .die-kreative-zukunft,
.kukvs-onepager .interessenvertretung,
.kukvs-events .die-ku-kv-s-events-sin,
.kukvs-events .bereit-fr-den-nchs,
.kukvs-events .worum-gehts-ein-tr,
.kukvs-events .worum-gehts-kurzb,
.kukvs-events .wann-19-februar-20,
.kukvs-events .welches-event-mchtest-du-besuchen,
.kukvs-events .individuelle-anmerkungen,
.kukvs-events .vorname,
.kukvs-events .nachname,
.kukvs-events .unternehmen,
.kukvs-events .e-mail-adresse,
.kukvs-events .jetzt-verbindlich-anmelden,
.kukvs-events .form-status {
  white-space: normal !important;
  width: auto !important;
  max-width: 100% !important;
  overflow-wrap: break-word;
}

/* Big stat numbers must never wrap or break — they are short and
   narrow, so keeping them on one line can't cause overflow. */
.kukvs-onepager .number,
.kukvs-onepager .text-1,
.kukvs-onepager .address,
.kukvs-onepager .x2046-mrd {
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: keep-all !important;
  min-width: max-content !important;
  width: auto !important;
  max-width: none !important;
}

/* ── 2. Big display headings: allow long German compound words
   to break rather than overflow (last-resort safety; they
   normally wrap at spaces). ── */
.kukvs-onepager .warum-kultur-und-kreativwirtschaft,
.kukvs-onepager .vernetzen-sichtbar,
.kukvs-onepager .die-kreative-zukunft,
.kukvs-onepager .kreative-stimme-schwabens,
.kukvs-onepager .title,
.kukvs-events .unsere-event-highlig,
.kukvs-events .ku-kv-s-treff,
.kukvs-events .vorstandssitzung-mitgliederversammlung {
  max-width: 100% !important;
  overflow-wrap: break-word;
}
/* The giant "AUSBLICK" word: cap its font to the viewport so it
   never forces a 1797px line. */
.kukvs-onepager .overlap-group3 .title {
  font-size: clamp(72px, 16vw, 310px) !important;
  line-height: 1.02 !important;
  letter-spacing: 0.4vw !important;
  width: auto !important;
}

/* ── 3. Body-text blocks (onepager): fill the available width
   minus margins and cap with max-width. align-self:stretch +
   width:auto means the left indent can NEVER push the right
   edge past the container — the root cause of the "…bei der"
   clipping. ── */
@media (min-width: 768px) {
  .kukvs-onepager .eine-branche-mit-kra,
  .kukvs-onepager .der-ku-kv-s-ldt-dazu,
  .kukvs-onepager .kontakt-aufnehmen-1,
  .kukvs-onepager .kontakt-aufnehmen-2 {
    align-self: stretch !important;
    width: auto !important;
    max-width: 1090px !important;
    margin-left: clamp(20px, 13%, 360px) !important;
    margin-right: clamp(20px, 5%, 120px) !important;
    box-sizing: border-box !important;
  }
  .kukvs-onepager .interessenvertretung {
    align-self: stretch !important;
    width: auto !important;
    max-width: 1221px !important;
    margin-left: clamp(20px, 13%, 360px) !important;
    margin-right: clamp(20px, 5%, 120px) !important;
    box-sizing: border-box !important;
  }
}

/* ── 4. RELEVANZ-IN-ZAHLEN stat rows → fluid flex rows that wrap.
   Replaces the absolute-positioned / min-width:1100 / fixed-width
   composition (which overflowed at 1200–1500px desktops) with a
   robust flow that keeps number + label side-by-side on wide
   screens and stacks them only when there is truly no room. ── */
@media (min-width: 768px) {
  .kukvs-onepager .flex-row,
  .kukvs-onepager .flex-row-1,
  .kukvs-onepager .overlap-group7,
  .kukvs-onepager .overlap-group8 {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: baseline !important;
    column-gap: clamp(12px, 1.5vw, 28px) !important;
    row-gap: 0 !important;
    height: auto !important;
    min-width: 0 !important;
    align-self: stretch !important;
    width: auto !important;
    max-width: calc(100% - clamp(20px, 13%, 360px) - 20px) !important;
    margin-left: clamp(20px, 13%, 360px) !important;
    margin-right: 20px !important;
    /* vertical rhythm scales with the viewport, like the numbers,
       so the gaps shrink proportionally when the type gets smaller */
    margin-top: clamp(26px, 4.6vw, 96px) !important;
    box-sizing: border-box !important;
    position: relative !important;
    overflow: visible !important;
  }
  .kukvs-onepager .overlap-group7 > *,
  .kukvs-onepager .overlap-group8 > * {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    max-width: 100% !important;
  }
  /* labels take the remaining space on the SAME line and wrap
     their own text (never drop below the number) */
  .kukvs-onepager .grter-wirtschaftszweig,
  .kukvs-onepager .teilmrkte-von-des,
  .kukvs-onepager .erwerbsttige,
  .kukvs-onepager .umsatz-der-branche-2023 {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    white-space: normal !important;
    line-height: 1.35 !important;
  }
  /* big numbers stay on their intrinsic width, never break */
  .kukvs-onepager .text-1,
  .kukvs-onepager .number,
  .kukvs-onepager .address,
  .kukvs-onepager .x2046-mrd {
    flex: 0 0 auto !important;
    line-height: 1.05 !important;
    min-height: 0 !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
    min-width: max-content !important;
  }
}

/* ── 5. MOBILE: make ALL four "Relevanz in Zahlen" stat rows
   align consistently to the LEFT. The € rows (overlap-group7/8)
   were rendering centered while the "3." and "11" rows were
   left-aligned — this unifies them flush-left with the rest of
   the mobile content. ── */
@media (max-width: 767px) {
  .kukvs-onepager .flex-row,
  .kukvs-onepager .flex-row-1,
  .kukvs-onepager .overlap-group7,
  .kukvs-onepager .overlap-group8 {
    justify-items: start !important;
    align-items: start !important;
    text-align: left !important;
    margin-left: 18px !important;
    margin-right: 18px !important;
    width: calc(100% - 36px) !important;
  }
  .kukvs-onepager .flex-row > *,
  .kukvs-onepager .flex-row-1 > *,
  .kukvs-onepager .overlap-group7 > *,
  .kukvs-onepager .overlap-group8 > * {
    text-align: left !important;
    justify-self: start !important;
    align-self: start !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* ── 6. SCHWERPUNKTE watermark — proportional spacing.
   The decorative word scales with the viewport width (font-size
   min(205px, 10.4vw)), but the original Anima layout pins its
   box and the gaps around it to fixed pixels:
     .schwerpunkte   margin-top:101px  min-height:283px
     .vernetzen...   min-height:440px  (block above)
     .interessen...  margin-top:100px  min-height:439px (block below)
   So when a squeezed (tall/narrow) aspect ratio shrinks the type,
   the gaps to the previous and next blocks stay huge. Tie the
   watermark's footprint and the surrounding margins to the SAME
   vw axis as its font, so the spacing shrinks proportionally. ── */
@media (min-width: 768px) {
  .kukvs-onepager .vernetzen-sichtbar {
    min-height: 0 !important;
  }
  .kukvs-onepager .schwerpunkte {
    min-height: 0 !important;
    height: auto !important;
    /* gap ABOVE the watermark scales like the font (was 101px @1920 ≈ 5.3vw) */
    margin-top: clamp(28px, 5.3vw, 101px) !important;
    margin-bottom: 0 !important;
    line-height: 1 !important;
    padding: 0 !important;
  }
  .kukvs-onepager .interessenvertretung {
    min-height: 0 !important;
    /* gap BELOW the watermark scales like the font (was 100px @1920 ≈ 5.2vw) */
    margin-top: clamp(28px, 5.2vw, 100px) !important;
  }
}

/* ── 7. "WARUM DABEI SEIN" kicker is now ordered ABOVE the
   "GEMEINSAM ENTSTEHT MEHR WIRKUNG" headline in the DOM, so it
   reads as a proper eyebrow in every layout (it previously fell
   BELOW the headline and looked squeezed in stacked/mobile
   aspect ratios). Give it clean breathing room on mobile, where
   the base responsive rule zeroes all child margins. ── */
@media (max-width: 767px) {
  .kukvs-onepager .overlap-group5 .warum-dabei-sein,
  .kukvs-events .overlap-group1 .warum-dabei-sein {
    margin: 0 0 8px 0 !important;
    order: 0 !important;
  }
  .kukvs-onepager .overlap-group5 .gemeinsam-entsteht-mehr-wirkung,
  .kukvs-events .overlap-group1 .gemeinsam-entsteht-mehr-wirkung {
    margin: 0 0 14px 0 !important;
    order: 0 !important;
  }
}