/* Verbände page of draft 3 (verbaende.html): the associations from the start page logo
   strip, shown with their real logos in one centred section. Builds on the quality
   page styles (kern-qualitaet.css). */

.kv .kq-head-center { max-width: 50rem; }
.kv .kq-head-center .tag-wrap { justify-content: center; }
.kv .kq-head-center h2 { font-size: clamp(2.4rem, 4.6vw, 4.6rem); }

/* the logos: some are only available white (negative), they are shown dark on white */
.kv-logo-neg { filter: brightness(0); opacity: .82; }

/* call to action below: grey all the way, like the quality and sponsoring pages */
.main-section.cta.kv-cta { background-image: none; background-color: #EDEEED; }
/* the green section above ends flush, so the grey block gets its own space above and below the card,
   and the footer's top margin (white page background) is taken into the grey instead */
.main-section.cta.kv-cta { padding-top: 5.4vw; padding-bottom: 5.4vw; }
.main-section.cta.kv-cta + .kf { margin-top: 0; }
@media (max-width: 767px) { .main-section.cta.kv-cta { padding-top: 48px; padding-bottom: 48px; } }
/* Stage, chosen by Gianni on 24.09.2026 (proposal "Bühne"): one association at a time on a big white stage in the middle of a green section,
   all seven logos as a row of tabs below. The stage moves on by itself, a yellow line under the active tab shows
   the time; hovering or focusing the section pauses it. */

.kq-sec.kv2 { color: #fff; background: linear-gradient(180deg, #034B38 0%, #017153 38%, #017153 62%, #034B38 100%); overflow: hidden; }
.kv2 .kq-head-center h2 { color: #fff; }
.kv2 .kq-head-center p { color: rgba(255, 255, 255, .84); }

/* stage with the two arrows left and right */
.kv2-stage { max-width: 1060px; margin: 0 auto; display: grid; grid-template-columns: 58px minmax(0, 1fr) 58px; gap: 28px; align-items: center; }
.kv2-arrow { width: 58px; height: 58px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35); background: transparent; color: #fff; display: grid; place-items: center; cursor: pointer;
  transition: background-color .3s, color .3s, border-color .3s; }
.kv2-arrow .kq-ic { font-size: 26px; }
.kv2-arrow:hover { background: var(--kq-yellow); border-color: var(--kq-yellow); color: var(--kq-dark); }
.kv2-arrow:focus-visible, .kv2-tab:focus-visible { outline: 3px solid var(--kq-yellow); outline-offset: 3px; }

/* all slides sit in the same grid cell, so the card always has the height of the tallest one */
.kv2-card { display: grid; background: #fff; border-radius: 26px; color: var(--kq-ink); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .55); }
.kv2-slide { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 48px 56px 46px;
  opacity: 0; visibility: hidden; transition: opacity .45s, visibility 0s .45s; }
.kv2-slide.is-active { opacity: 1; visibility: visible; transition: opacity .55s .1s, visibility 0s; }
.kv2-logo { width: 100%; height: 150px; display: grid; place-items: center; margin-bottom: 30px; }
.kv2-logo img { max-width: min(100%, 440px); max-height: 120px; border-radius: 0; object-fit: contain; display: block; transform: translateY(16px) scale(.96); transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.kv2-slide.is-active .kv2-logo img { transform: none; }
.kv2-logo img.is-wide { max-width: min(100%, 560px); }
.kv2-logo img.is-square { max-height: 150px; }
.kv2-slide h3 { font-size: clamp(1.5rem, 2.3vw, 2.2rem); letter-spacing: -.03em; }
.kv2-slide p { margin-top: 12px; max-width: 34rem; font-size: 17px; color: rgba(6, 44, 34, .74); }
.kv2-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 22px 0 26px; }
.kv2-chips > span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: var(--kq-grey); font-size: 14px; font-weight: 500; color: var(--kq-dark); }
.kv2-chips .kq-ic { font-size: 16px; color: var(--kq-green); }
.kv2-slide .kq-btn { margin-top: auto; }

/* tabs: the seven logos in white tiles, the active one ringed in yellow with a running yellow line below */
.kv2-tabs { max-width: 1060px; margin: 42px auto 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; }
.kv2-tab { position: relative; height: 84px; padding: 12px 14px; border: 0; border-radius: 14px; background: #fff; display: grid; place-items: center; cursor: pointer;
  transition: background-color .3s, box-shadow .3s, transform .3s; }
.kv2-tab img { max-width: 100%; max-height: 46px; border-radius: 0; object-fit: contain; display: block; opacity: .5; filter: grayscale(1); transition: opacity .3s, filter .3s; }
.kv2-tab img.kv-logo-neg { filter: brightness(0); opacity: .4; }
.kv2-tab:hover img, .kv2-tab.is-active img { opacity: 1; filter: none; }
.kv2-tab:hover img.kv-logo-neg, .kv2-tab.is-active img.kv-logo-neg { filter: brightness(0); opacity: .82; }
.kv2-tab img.is-square { max-height: 58px; }
.kv2-tab:hover { transform: translateY(-3px); }
.kv2-tab.is-active { background: #fff; box-shadow: 0 0 0 4px var(--kq-yellow); }
.kv2-tab i { position: absolute; left: 16px; right: 16px; bottom: -16px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .22); overflow: hidden; opacity: 0; transition: opacity .3s; }
.kv2-tab i::after { content: ""; position: absolute; inset: 0; background: var(--kq-yellow); transform-origin: left; transform: scaleX(0); }
.kv2-tab.is-active i { opacity: 1; }
.kv2.is-running .kv2-tab.is-active i::after { animation: kv2-time 6.5s linear forwards; }
.kv2.is-running:hover .kv2-tab.is-active i::after, .kv2.is-running:focus-within .kv2-tab.is-active i::after { animation-play-state: paused; }
@keyframes kv2-time { to { transform: scaleX(1); } }

/* ============ responsive ============ */
@media (max-width: 991px) {
  .kv2-stage { grid-template-columns: 1fr; }
  .kv2-arrow { display: none; }
  .kv2-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 26px; }
}
@media (max-width: 767px) {
  .kv2-card { border-radius: 18px; }
  .kv2-slide { padding: 32px 22px 30px; }
  .kv2-logo { height: 104px; margin-bottom: 22px; }
  .kv2-logo img { max-height: 84px; }
  .kv2-logo img.is-square { max-height: 104px; }
  .kv2-slide p { font-size: 16px; }
  .kv2-tabs { margin-top: 30px; gap: 8px; row-gap: 22px; }
  .kv2-tab { height: 64px; padding: 8px; border-radius: 10px; }
  .kv2-tab img { max-height: 32px; }
  .kv2-tab img.is-square { max-height: 44px; }
  .kv2-tab i { left: 10px; right: 10px; bottom: -12px; height: 3px; }
}
@media (prefers-reduced-motion: reduce) {
  .kv2-slide, .kv2-slide.is-active, .kv2-logo img, .kv2-tab { transition: none; }
  .kv2-logo img { transform: none; }
  .kv2.is-running .kv2-tab.is-active i::after { animation: none; }
}