/* =====================================================================
   Bike & Rider Level — the prose in columns, the four answers as tabs,
   both across the full width.

   Light band (milk), not the black one it used to be: this sits between
   the photographic intro above and the white riding-zones block below,
   and a black wall this early on the page reads as a full stop.

   The density fix is the column set. The authored text is three
   paragraphs on all 77 pages carrying this block, and three short
   columns separated by hairlines read far lighter than the same words
   stacked in one tall measure — without hiding a single sentence.

   An earlier version folded paragraphs 2 and 3 behind a disclosure built
   on the grid-template-rows 0fr trick. That collapse only ever sizes the
   FIRST grid row: with two paragraphs as two children, the second landed
   in an implicit `auto` row, stayed at full height, and overlapped the
   text below it. The fix is not a wrapper div — it is not needing the
   collapse at all.

   Nothing is hidden unless `.is-interactive` is on the section, which
   only the script sets, and then only the inactive answer panes.
   ===================================================================== */

.cp-bike {
    background: #EDE3D5;
    padding: 80px 60px;
}

.cp-bike__inner {
    max-width: 1200px;
    margin: 0 auto;
}

/* ── Header ─────────────────────────────────────────────────────────── */

.cp-bike__header {
    margin-bottom: 34px;
}

.cp-bike__eyebrow {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #FF6A00;
    margin-bottom: 12px;
}

.cp-bike__h2 {
    font-size: clamp(28px, 3.2vw, 40px);
    font-weight: 800;
    color: #111214;
    letter-spacing: -0.6px;
    line-height: 1.12;
    margin: 0;
    max-width: 22ch;
}

/* ── Prose, set in columns ──────────────────────────────────────────── */

/* auto-fit rather than a fixed 3: the paragraph count is authored, and a
   country written with two or four must not break the row. */
.cp-bike__prose {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 40px;
    margin-bottom: 44px;
}

.cp-bike__p {
    position: relative;
    font-size: 15.5px;
    line-height: 1.72;
    color: rgba(17, 18, 20, 0.76);
    margin: 0;
    padding-top: 18px;
    border-top: 2px solid rgba(17, 18, 20, 0.14);
}

/* The opening paragraph frames the range of levels the country covers —
   the one thing none of the four answers below repeats. */
.cp-bike__p:first-child {
    border-top-color: #FF6A00;
    color: rgba(17, 18, 20, 0.86);
    font-size: 16px;
}

/* ── The panel: tab row + one answer ────────────────────────────────── */

.cp-bike__panel {
    background: #FBF8F3;
    border: 1px solid rgba(17, 18, 20, 0.12);
    border-radius: 2px;
    overflow: hidden;
}

.cp-bike__tabs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    border-bottom: 1px solid rgba(17, 18, 20, 0.12);
    background: rgba(17, 18, 20, 0.03);
}

.cp-bike__tab {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    /* Top padding carries the 3px accent rail, so the label does not shift
       when a tab becomes active. */
    padding: 20px 20px 19px;
    background: none;
    border: 0;
    border-right: 1px solid rgba(17, 18, 20, 0.09);
    text-align: left;
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.01em;
    color: rgba(17, 18, 20, 0.62);
    transition: background 0.2s ease, color 0.2s ease;
}

.cp-bike__tab:last-child {
    border-right: 0;
}

.cp-bike__tab::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    background: #FF6A00;
    transform: scaleX(0);
    transition: transform 0.24s ease;
}

.cp-bike__tab:hover {
    background: rgba(17, 18, 20, 0.05);
    color: #111214;
}

.cp-bike__tab.is-active {
    background: #FBF8F3;
    color: #111214;
}

.cp-bike__tab.is-active::before {
    transform: scaleX(1);
}

.cp-bike__tab:focus-visible {
    outline: 2px solid #FF6A00;
    outline-offset: -2px;
}

.cp-bike__tab-icon {
    flex: 0 0 auto;
    color: rgba(17, 18, 20, 0.34);
    transition: color 0.22s ease;
}

.cp-bike__tab:hover .cp-bike__tab-icon {
    color: rgba(17, 18, 20, 0.5);
}

.cp-bike__tab.is-active .cp-bike__tab-icon {
    color: #FF6A00;
}

/* The labels are phrases, not words ("Erforderliche Erfahrung"), so they
   wrap inside their own tab rather than stretching the row. */
.cp-bike__tab-text {
    min-width: 0;
}

/* ── The answer ─────────────────────────────────────────────────────── */

.cp-bike__panes {
    padding: 34px 40px 38px;
}

.cp-bike__pane:focus-visible {
    outline: 2px solid #FF6A00;
    outline-offset: 6px;
    border-radius: 2px;
}

/* Every pane shows without the script. With it they all sit in one grid
   cell, so the panel is always as tall as its tallest answer and the page
   never jumps when a shorter tab is picked. A fixed min-height could not
   do that: the answers are authored per country and vary by 200 pixels.
   visibility (not display) keeps the hidden ones out of the a11y tree and
   out of the tab order, and its flip is delayed until the fade finishes. */
.is-interactive .cp-bike__panes {
    display: grid;
}

.is-interactive .cp-bike__pane {
    grid-area: 1 / 1;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.24s ease, visibility 0s linear 0.24s;
}

.is-interactive .cp-bike__pane.is-active {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.24s ease, visibility 0s;
}

.cp-bike__pane + .cp-bike__pane {
    margin-top: 24px;
}

/* Names the answer when the tabs are not running. With them, the active
   tab already carries the label and repeating it here is noise. */
.cp-bike__pane-label {
    display: block;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(17, 18, 20, 0.55);
    margin-bottom: 12px;
}

.is-interactive .cp-bike__pane-label {
    display: none;
}

.cp-bike__pane-text {
    font-size: 17.5px;
    line-height: 1.68;
    color: rgba(17, 18, 20, 0.82);
    margin: 0;
    max-width: 74ch;
}

/* ── Responsive ─────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
    .cp-bike { padding: 64px 36px; }
    .cp-bike__prose { gap: 32px; margin-bottom: 36px; }
    .cp-bike__panes { padding: 30px 30px 32px; }
}

@media (max-width: 860px) {
    /* Two tabs per row; the ones that end a row lose their divider. */
    .cp-bike__tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cp-bike__tab { padding: 17px 16px 16px; font-size: 13px; }
    .cp-bike__tab:nth-child(2n) { border-right: 0; }
    .cp-bike__tab:nth-child(-n + 2) { border-bottom: 1px solid rgba(17, 18, 20, 0.09); }
}

@media (max-width: 620px) {
    .cp-bike { padding: 48px 20px 52px; }
    .cp-bike__header { margin-bottom: 26px; }

    /* Stacked, so the hairline moves from between the columns to above
       each paragraph, where it still separates them. */
    .cp-bike__prose { gap: 24px; margin-bottom: 30px; }

    .cp-bike__tabs { grid-template-columns: minmax(0, 1fr); }
    .cp-bike__tab { border-right: 0; border-bottom: 1px solid rgba(17, 18, 20, 0.09); }
    .cp-bike__tab:last-child { border-bottom: 0; }

    .cp-bike__panes { padding: 26px 20px 28px; }
    .cp-bike__pane-text { font-size: 16px; }
}

/* ── Motion ─────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .cp-bike__tab,
    .cp-bike__tab::before,
    .cp-bike__tab-icon {
        transition: none;
    }

    .is-interactive .cp-bike__pane,
    .is-interactive .cp-bike__pane.is-active {
        transition: none;
    }
}