/* ==========================================================================
   ACW Sitepackage – Agility Club Wiesbaden
   Design inspired by bridge321.qodeinteractive.com
   ========================================================================== */

/* ---------- CSS Custom Properties ---------- */
:root {
    --acw-red: #c0392b;
    --acw-red-light: #f46150;
    --acw-teal: #3cc6aa;
    --acw-teal-hover: #41dbc1;
    --acw-blue: #2c3e8c;
    --acw-cream: #fbf5f1;
    --acw-white: #ffffff;
    --acw-dark: #212121;
    --acw-gray: #666664;
    --acw-gray-light: #a0a0a0;

    --font-primary: "Open Sans", system-ui, -apple-system, sans-serif;
    --font-heading: "Josefin Sans", system-ui, -apple-system, sans-serif;

    --container-width: 1200px;
    --header-height: 80px;
    --section-padding: 100px;
    --transition: 0.3s ease;
}

/* ---------- Reset & Base ---------- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-primary);
    font-size: 16px;
    color: var(--acw-dark);
    background-color: var(--acw-cream);
    line-height: 1.7;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 600;
    line-height: 1.2;
    color: var(--acw-dark);
}

h1 { font-size: 55px; }
h2 { font-size: 45px; }
h3 { font-size: 23px; }
h4 { font-size: 19px; }

p {
    color: var(--acw-gray);
    margin-bottom: 1rem;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--acw-dark);
    text-decoration: none;
    transition: color var(--transition);
}

a:hover {
    color: var(--acw-red);
}

/* ---------- Container ---------- */
.container {
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* ==========================================================================
   HEADER – bridge321 style: transparent, logo left, nav centered
   ========================================================================== */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--acw-cream);
    transition: background var(--transition), box-shadow var(--transition);
}

.site-header.is-scrolled {
    background: var(--acw-white);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06);
}

.header-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    height: var(--header-height);
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 1.5rem;
}

.header-logo {
    justify-self: start;
}

.header-logo .logo {
    height: 45px;
    width: auto;
}

.main-navigation {
    justify-self: center;
}

.header-actions {
    justify-self: end;
}

/* ---------- Primary Navigation (centered) ---------- */
.nav-list {
    display: flex;
    list-style: none;
    gap: 2.5rem;
    align-items: center;
}

.nav-link {
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 17px;
    color: var(--acw-dark);
    padding: 0.5rem 0;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: color var(--transition);
}

.nav-link:hover,
.nav-item--active .nav-link,
.nav-item--current .nav-link {
    color: var(--acw-red);
}

/* Dropdown Arrow */
.nav-dropdown-arrow {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    margin-top: -2px;
    transition: transform var(--transition);
}

.nav-item--has-children:hover .nav-dropdown-arrow {
    transform: rotate(-135deg);
}

/* ---------- Dropdown Submenu ---------- */
.nav-item {
    position: relative;
}

.nav-sublist {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--acw-white);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    padding: 0.75rem 0;
    min-width: 240px;
    list-style: none;
    z-index: 100;
}

.nav-item--has-children:hover > .nav-sublist {
    display: block;
}

.nav-sublink {
    display: block;
    padding: 0.6rem 1.5rem;
    color: var(--acw-dark);
    font-size: 15px;
    white-space: nowrap;
    transition: all var(--transition);
}

.nav-sublink:hover {
    color: var(--acw-red);
    padding-left: 1.75rem;
}

/* 3rd level flyout */
.nav-subitem {
    position: relative;
}

.nav-subsublist {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    background: var(--acw-white);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    padding: 0.75rem 0;
    min-width: 220px;
    list-style: none;
    z-index: 101;
}

.nav-subitem--has-children:hover > .nav-subsublist {
    display: block;
}

.nav-subsublink {
    display: block;
    padding: 0.6rem 1.5rem;
    color: var(--acw-dark);
    font-size: 15px;
    white-space: nowrap;
    transition: all var(--transition);
}

.nav-subsublink:hover {
    color: var(--acw-red);
}

/* ---------- Mobile Toggle ---------- */
.nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    flex-direction: column;
    gap: 5px;
}

.nav-toggle-bar {
    display: block;
    width: 28px;
    height: 2px;
    background: var(--acw-dark);
    transition: var(--transition);
}

/* ==========================================================================
   HERO SECTION
   ========================================================================== */

.hero-section {
    padding: 20px 0 0;
    text-align: center;
    background-color: var(--acw-cream);
}

.hero-content {
    max-width: 800px;
    margin: 0 auto;
}

/* ContentBlock: Hero */
.cb-hero {
    padding: 40px 0 50px;
    text-align: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

.cb-hero__inner {
    max-width: 700px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.cb-hero__label {
    font-size: 14px;
    font-weight: 600;
    color: var(--acw-red);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 1rem;
}

.cb-hero__heading {
    font-family: var(--font-heading);
    font-size: 55px;
    font-weight: 600;
    color: var(--acw-dark);
    line-height: 1.15;
    margin-bottom: 1.5rem;
}

.cb-hero__text {
    font-size: 16px;
    color: var(--acw-gray);
    line-height: 1.8;
    margin-bottom: 2.5rem;
}

/* ==========================================================================
   CONTENT SECTIONS
   ========================================================================== */

.content-section {
    padding: var(--section-padding) 0;
}

.content-section:empty,
.content-section:not(:has(*:not(:empty))) {
    padding: 0;
    display: none;
}

.content-section--white {
    background: var(--acw-white);
}

.content-section--cream {
    background: var(--acw-cream);
}

/* ContentBlock: Section Title */
.cb-section-title {
    text-align: center;
    margin-bottom: 60px;
}

.cb-section-title__label {
    font-size: 14px;
    font-weight: 600;
    color: var(--acw-red);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 0.75rem;
    display: block;
}

.cb-section-title__heading {
    font-family: var(--font-heading);
    font-size: 45px;
    font-weight: 600;
    color: var(--acw-dark);
    margin-bottom: 1rem;
}

.cb-section-title__text {
    font-size: 16px;
    color: var(--acw-gray);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.8;
}

/* ==========================================================================
   SPORT TILES – bridge321 hover-expand cards (3 per row, hover shows panel)
   ========================================================================== */

.sport-tiles-section {
    padding: 30px 0 60px;
    background: var(--acw-cream);
}

/* Reset wrappers */
.sport-tiles-grid > div {
    margin: 0;
    padding: 0;
}

/* Section title above tiles — centered, generous spacing */
.sport-tiles-section > .container > .cb-section-title {
    text-align: center;
    margin-bottom: 60px;
}

/* Spacing between tile rows */
.sport-tiles-grid + .sport-tiles-grid {
    margin-top: 15px;
}

/* Wave divider between tiles and following content */
.sport-tiles-grid ~ .cb-section-title {
    margin-top: 0;
    padding-top: 80px;
    position: relative;
}

.sport-tiles-grid ~ .cb-section-title::before {
    content: "";
    display: block;
    width: 100%;
    height: 80px;
    position: absolute;
    top: -20px;
    left: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0,50 C360,90 720,10 1080,50 C1260,70 1380,40 1440,50 L1440,100 L0,100 Z' fill='%23fbf5f1'/%3E%3Cpath d='M0,50 C360,90 720,10 1080,50 C1260,70 1380,40 1440,50' fill='none' stroke='%233cc6aa' stroke-width='2' stroke-opacity='0.3'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

/* bridge321 layout: 4 visual columns using flexbox.
   Each row: 3 image tiles + 1 text panel = 4 equal-width columns.
   Active tile expands to 2x width (image + panel), others stay 1x.
   All tiles have the same fixed height for square appearance. */
.sport-tiles-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

/* Tile size: 1/4 of container width. Fixed 280px height for square look. */
.cb-sport-tile {
    position: relative;
    overflow: hidden;
    background: var(--acw-white);
    width: calc(25% - 12px);
    height: 280px;
    cursor: pointer;
    transition: width 0.5s ease;
}

/* The sport-tiles container sets a CSS variable for the active tile width */
.sport-tiles-grid {
    container-type: inline-size;
}

/* Inner wrapper: width = active tile width. Uses container query units.
   50cqi = 50% of the grid container width = active tile width */
.cb-sport-tile__inner {
    display: flex;
    width: calc(50cqi - 12px);
    height: 100%;
}

/* Image takes half the inner wrapper = one tile width */
.cb-sport-tile__image-link {
    display: block;
    flex: 0 0 50%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

/* Title overlay – hidden on desktop, shown on mobile */
.cb-sport-tile__overlay {
    display: none;
}

.cb-sport-tile__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.cb-sport-tile:hover .cb-sport-tile__img {
    transform: scale(1.03);
}

/* Panel: takes the other half of the inner wrapper */
.cb-sport-tile__panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 30px;
    background: var(--acw-white);
    min-width: 0;
}

/* Active tile: width = 2 tiles → shows full inner (image + panel) */
.cb-sport-tile.is-active {
    width: calc(50% - 12px);
}

.cb-sport-tile__title {
    font-family: var(--font-heading);
    font-size: 23px;
    font-weight: 600;
    color: var(--acw-dark);
    margin-bottom: 0.75rem;
    white-space: nowrap;
}

.cb-sport-tile__text {
    font-size: 15px;
    color: var(--acw-gray);
    margin-bottom: 1.5rem;
    line-height: 1.7;
}

.cb-sport-tile__text p {
    margin: 0;
}

.cb-sport-tile__btn {
    align-self: flex-start;
    white-space: nowrap;
}

/* ==========================================================================
   WAVE DIVIDER – single line with floating dog illustrations
   ========================================================================== */

.wave-divider {
    position: relative;
    width: 100%;
    height: 140px;
    overflow: hidden;
    line-height: 0;
    margin-top: -1px;
    margin-bottom: -60px;
    background: linear-gradient(to bottom, transparent 0%, transparent 50%, var(--acw-cream) 100%);
}

.wave-divider__line {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Floating dogs container */
.wave-divider__dogs {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Individual floating dog illustrations */
.wave-dog {
    position: absolute;
    border-radius: 50%;
    object-fit: cover;
    opacity: 0.85;
}

.wave-dog--1 {
    width: 100px;
    height: 100px;
    left: 12%;
    top: 5%;
    animation: dogFloat1 8s ease-in-out infinite;
}

.wave-dog--2 {
    width: 80px;
    height: 80px;
    left: 50%;
    top: 15%;
    animation: dogFloat2 10s ease-in-out infinite;
}

.wave-dog--3 {
    width: 70px;
    height: 70px;
    left: 78%;
    top: 8%;
    animation: dogFloat3 9s ease-in-out infinite;
}

@keyframes dogFloat1 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(10px, -8px) rotate(2deg); }
    50% { transform: translate(-5px, 5px) rotate(-1deg); }
    75% { transform: translate(8px, -3px) rotate(1deg); }
}

@keyframes dogFloat2 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    33% { transform: translate(-12px, -6px) rotate(-2deg); }
    66% { transform: translate(8px, 4px) rotate(1.5deg); }
}

@keyframes dogFloat3 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    20% { transform: translate(6px, -10px) rotate(1deg); }
    50% { transform: translate(-8px, -4px) rotate(-2deg); }
    80% { transform: translate(4px, 6px) rotate(0.5deg); }
}

@media (max-width: 768px) {
    .wave-divider {
        height: 100px;
    }
    .wave-dog--1 { width: 70px; height: 70px; }
    .wave-dog--2 { width: 55px; height: 55px; }
    .wave-dog--3 { width: 50px; height: 50px; }
}

/* ==========================================================================
   FEATURE SECTION
   ========================================================================== */

.cb-feature {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    padding: var(--section-padding) 0;
}

.cb-feature--reversed {
    direction: rtl;
}

.cb-feature--reversed > * {
    direction: ltr;
}

.cb-feature__image img {
    width: 100%;
    height: auto;
}

.cb-feature__label {
    font-size: 14px;
    font-weight: 600;
    color: var(--acw-red);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 0.75rem;
}

.cb-feature__heading {
    font-family: var(--font-heading);
    font-size: 45px;
    font-weight: 600;
    color: var(--acw-dark);
    margin-bottom: 1.25rem;
    line-height: 1.15;
}

.cb-feature__text {
    font-size: 16px;
    color: var(--acw-gray);
    line-height: 1.8;
    margin-bottom: 2rem;
}

/* ==========================================================================
   BUTTONS – bridge321 style (sharp corners, teal primary)
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 18px 38px;
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 1px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: all var(--transition);
}

.btn-primary {
    background: var(--acw-teal);
    color: var(--acw-white);
}

.btn-primary:hover {
    background: var(--acw-teal-hover);
    color: var(--acw-white);
}

.btn-secondary {
    background: var(--acw-red);
    color: var(--acw-white);
}

.btn-secondary:hover {
    background: var(--acw-red-light);
    color: var(--acw-white);
}

.btn-outline {
    background: transparent;
    color: var(--acw-dark);
    border: 2px solid var(--acw-dark);
}

.btn-outline:hover {
    background: var(--acw-dark);
    color: var(--acw-white);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.site-footer {
    background: var(--acw-cream);
    color: var(--acw-dark);
    padding: 80px 0 0;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 40px;
}

.footer-logo-img {
    height: 50px;
    width: auto;
    margin-bottom: 1.25rem;
}

.footer-col h4 {
    font-family: var(--font-heading);
    font-size: 19px;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: var(--acw-dark);
}

.footer-col ul {
    list-style: none;
}

.footer-col li {
    margin-bottom: 0.6rem;
}

.footer-col li a,
.footer-col p a {
    color: var(--acw-gray);
    font-size: 15px;
    transition: color var(--transition);
}

.footer-col li a:hover,
.footer-col p a:hover {
    color: var(--acw-teal);
}

.footer-col p {
    color: var(--acw-gray);
    font-size: 15px;
    line-height: 1.8;
}

.footer-bottom {
    margin-top: 60px;
    padding: 20px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    text-align: center;
    font-size: 14px;
    color: var(--acw-gray);
}

/* ==========================================================================
   FLUID STYLED CONTENT overrides
   ========================================================================== */

.ce-textpic,
.ce-image,
.ce-text {
    margin-bottom: 2rem;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
    :root {
        --section-padding: 60px;
        --header-height: 70px;
    }

    h1 { font-size: 32px; }
    h2 { font-size: 28px; }
    h3 { font-size: 20px; }

    /* Mobile nav */
    .nav-toggle {
        display: flex;
    }

    .header-inner {
        grid-template-columns: 1fr 0px auto;
    }

    .header-actions {
        display: flex;
        align-self: center;
    }

    .nav-list {
        display: none;
        position: absolute;
        top: var(--header-height);
        left: 0;
        right: 0;
        max-height: calc(100vh - var(--header-height));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        background: var(--acw-white);
        flex-direction: column;
        align-items: stretch;
        padding: 1.5rem 2rem;
        gap: 0;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
        z-index: 200;
    }

    .nav-list.is-open {
        display: flex;
    }

    .nav-link {
        padding: 0.75rem 0;
        display: flex;
        width: 100%;
        justify-content: flex-start;
        gap: 0.4rem;
        font-size: 16px;
    }

    .nav-sublist,
    .nav-subsublist {
        position: static;
        box-shadow: none;
        transform: none;
        padding-left: 1.5rem;
        display: none;
        min-width: auto;
    }

    .nav-sublink,
    .nav-subsublink {
        display: block;
        padding: 0.5rem 0;
        font-size: 15px;
    }

    .nav-item--expanded > .nav-sublist,
    .nav-subitem--expanded > .nav-subsublist {
        display: block;
    }

    /* Hero */
    .cb-hero { padding: 60px 0; }
    .cb-hero__heading { font-size: 32px; }

    /* Sport tiles */
    .sport-tiles-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        gap: 15px;
    }

    /* Sport tiles: full width on mobile */
    .cb-sport-tile {
        width: 100% !important;
        height: 220px;
    }

    .cb-sport-tile.is-active {
        width: 100% !important;
    }

    .cb-sport-tile__inner {
        width: 100%;
    }

    .cb-sport-tile__image-link {
        flex: 1;
    }

    .cb-sport-tile__panel {
        display: none;
    }

    .cb-sport-tile__overlay {
        display: block;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 2rem 1.25rem 1rem;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.65) 0%, transparent 100%);
        font-family: var(--font-heading);
        font-size: 20px;
        font-weight: 600;
        color: #fff;
    }

    /* Feature */
    .cb-feature {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .cb-feature__heading { font-size: 28px; }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .sport-tiles-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 250px;
    }

    /* Tablet: 2 per row */
    .cb-sport-tile {
        width: calc(50% - 8px) !important;
        height: 240px;
    }

    .cb-sport-tile.is-active {
        width: calc(100%) !important;
    }

    .cb-sport-tile__inner {
        width: 100%;
    }

    .cb-sport-tile__image-link {
        flex: 1;
    }

    .cb-sport-tile__panel {
        display: none;
    }

    .cb-sport-tile__overlay {
        display: block;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 2rem 1.25rem 1rem;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.65) 0%, transparent 100%);
        font-family: var(--font-heading);
        font-size: 20px;
        font-weight: 600;
        color: #fff;
    }

    .cb-feature {
        gap: 40px;
    }

    .cb-hero__heading { font-size: 42px; }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==========================================================================
   FEATURE CARDS – 3-Column Icon Grid
   ========================================================================== */

.cb-feature-cards {
    padding: var(--section-padding) 0;
    text-align: center;
    background-color: var(--acw-cream);
}

.cb-feature-cards__header {
    margin-bottom: 80px;
}

.cb-feature-cards__label {
    font-size: 14px;
    font-weight: 600;
    color: var(--acw-red);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 1rem;
}

.cb-feature-cards__heading {
    font-family: var(--font-heading);
    font-size: 45px;
    font-weight: 600;
    color: var(--acw-dark);
    line-height: 1.2;
    max-width: 800px;
    margin: 0 auto;
}

.cb-feature-cards__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
}

.cb-feature-cards__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform var(--transition);
}

.cb-feature-cards__item:hover {
    transform: translateY(-8px);
}

.cb-feature-cards__icon {
    width: 180px;
    height: 180px;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cb-feature-cards__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cb-feature-cards__title {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 700;
    color: var(--acw-dark);
    margin: 0 0 15px;
}

.cb-feature-cards__text {
    font-size: 16px;
    line-height: 1.7;
    color: var(--acw-gray);
    margin: 0;
}

@media (max-width: 1024px) {
    .cb-feature-cards__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
    .cb-feature-cards__heading {
        font-size: 36px;
    }
}

@media (max-width: 768px) {
    .cb-feature-cards {
        padding: 60px 0;
    }
    .cb-feature-cards__header {
        margin-bottom: 50px;
    }
    .cb-feature-cards__grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .cb-feature-cards__heading {
        font-size: 28px;
    }
}

/* ==========================================================================
   CLASS GRID – Card Layout für Kurse/Sportarten
   ========================================================================== */

.cb-class-grid {
    padding: 100px 0;
}

.cb-class-grid__header {
    text-align: center;
    margin-bottom: 60px;
}

.cb-class-grid__label {
    font-size: 14px;
    font-weight: 600;
    color: var(--acw-red);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 1rem;
}

.cb-class-grid__heading {
    font-family: var(--font-heading);
    font-size: 45px;
    font-weight: 600;
    color: var(--acw-dark);
    line-height: 1.2;
}

.cb-class-grid__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.cb-class-grid__card {
    border: 1px solid #f0f0f0;
    overflow: hidden;
    transition: border-color 0.3s ease;
    display: flex;
    flex-direction: column;
}

.cb-class-grid__card:hover {
    border-color: var(--acw-teal);
}

.cb-class-grid__image {
    width: 100%;
    height: 280px;
    overflow: hidden;
}

.cb-class-grid__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.cb-class-grid__card:hover .cb-class-grid__image img {
    transform: scale(1.05);
}

.cb-class-grid__content {
    padding: 30px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.cb-class-grid__title {
    font-family: var(--font-heading);
    font-size: 23px;
    font-weight: 600;
    color: var(--acw-dark);
    margin: 0 0 10px;
    letter-spacing: -0.5px;
}

.cb-class-grid__text {
    font-size: 16px;
    line-height: 1.75;
    color: var(--acw-gray);
    margin: 0 0 25px;
    flex-grow: 1;
}

.cb-class-grid__btn {
    display: inline-block;
    padding: 0 31px;
    height: 50px;
    line-height: 50px;
    background-color: var(--acw-teal);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color 0.3s ease;
    align-self: flex-start;
}

.cb-class-grid__btn:hover {
    background-color: var(--acw-teal-hover);
    color: #fff;
}

@media (max-width: 1024px) {
    .cb-class-grid__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .cb-class-grid__heading {
        font-size: 36px;
    }
}

@media (max-width: 768px) {
    .cb-class-grid {
        padding: 60px 0;
    }
    .cb-class-grid__grid {
        grid-template-columns: 1fr;
    }
    .cb-class-grid__image {
        height: 250px;
    }
    .cb-class-grid__heading {
        font-size: 28px;
    }
}

/* Testimonials Slider */
.cb-testimonials {
    padding: 100px 0;
    background-color: var(--acw-cream);
    text-align: center;
}

.cb-testimonials__header {
    margin-bottom: 60px;
}

.cb-testimonials__label {
    font-size: 14px;
    font-weight: 600;
    color: var(--acw-red);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 1rem;
}

.cb-testimonials__heading {
    font-family: var(--font-heading);
    font-size: 45px;
    font-weight: 600;
    color: var(--acw-dark);
    line-height: 1.2;
}

.cb-testimonials__slider {
    max-width: 700px;
    margin: 0 auto;
}

.cb-testimonials__slide {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cb-testimonials__avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 30px;
}

.cb-testimonials__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cb-testimonials__quote {
    font-size: 16px;
    font-style: italic;
    line-height: 1.75;
    color: var(--acw-gray);
    margin: 0 0 25px;
}

.cb-testimonials__author {
    font-family: var(--font-heading);
    font-size: 19px;
    font-weight: 600;
    color: var(--acw-dark);
    letter-spacing: -0.5px;
}

.cb-testimonials__dots {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-top: 40px;
}

.cb-testimonials__dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background-color: #ddd;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.cb-testimonials__dot.is-active,
.cb-testimonials__dot:hover {
    background-color: var(--acw-teal);
}

@media (max-width: 768px) {
    .cb-testimonials {
        padding: 60px 0;
    }
    .cb-testimonials__heading {
        font-size: 28px;
    }
    .cb-testimonials__avatar {
        width: 90px;
        height: 90px;
    }
}

/* ==========================================================================
   NEWS – List, Detail & Homepage Teaser
   ========================================================================== */

/* --- Section wrapper (homepage) --- */
.news-section {
    padding: var(--section-padding) 0;
    background: var(--acw-white);
}

/* --- Homepage teaser header --- */
.news-teaser__header {
    text-align: center;
    margin-bottom: 60px;
}

.news-teaser__label {
    display: inline-block;
    font-family: var(--font-primary);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--acw-red);
    margin-bottom: 12px;
}

.news-teaser__heading {
    font-family: var(--font-heading);
    font-size: 42px;
    font-weight: 600;
    color: var(--acw-dark);
}

.news-teaser__footer {
    text-align: center;
    margin-top: 50px;
}

/* --- News grid --- */
.news-list__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.news-teaser__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* --- News card --- */
.news-card {
    background: var(--acw-white);
    overflow: hidden;
    transition: transform var(--transition);
}

.news-section .news-card {
    background: var(--acw-cream);
}

.news-card:hover {
    transform: translateY(-4px);
}

.news-card__link {
    display: block;
    text-decoration: none;
    color: inherit;
    height: 100%;
}

.news-card__image {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--acw-cream);
}

.news-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.news-card:hover .news-card__img {
    transform: scale(1.04);
}

.news-card__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--acw-cream) 0%, #f0e8e0 100%);
}

.news-card__placeholder-icon {
    font-family: var(--font-heading);
    font-size: 28px;
    font-weight: 600;
    color: var(--acw-gray-light);
    letter-spacing: 3px;
}

.news-card__category {
    position: absolute;
    top: 16px;
    left: 16px;
}

.news-card__category span {
    display: inline-block;
    background: var(--acw-red);
    color: var(--acw-white);
    font-family: var(--font-primary);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 6px 14px;
}

.news-card__body {
    padding: 28px 24px;
}

.news-card__date {
    display: block;
    font-family: var(--font-primary);
    font-size: 13px;
    font-weight: 600;
    color: var(--acw-gray-light);
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

.news-card__title {
    font-family: var(--font-heading);
    font-size: 21px;
    font-weight: 600;
    color: var(--acw-dark);
    line-height: 1.35;
    margin-bottom: 12px;
    transition: color var(--transition);
}

.news-card:hover .news-card__title {
    color: var(--acw-teal);
}

.news-card__teaser {
    font-size: 15px;
    color: var(--acw-gray);
    line-height: 1.7;
    margin-bottom: 16px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-card__more {
    display: inline-block;
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 700;
    color: var(--acw-teal);
    letter-spacing: 0.5px;
    position: relative;
}

.news-card__more::after {
    content: "";
    display: block;
    width: 0;
    height: 2px;
    background: var(--acw-teal);
    transition: width var(--transition);
}

.news-card:hover .news-card__more::after {
    width: 100%;
}

/* --- News detail --- */
.news-detail {
    max-width: 800px;
    margin: 0 auto;
    padding: 60px 0 var(--section-padding);
}

.news-detail__meta {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.news-detail__date {
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 600;
    color: var(--acw-gray-light);
}

.news-detail__cat {
    display: inline-block;
    background: var(--acw-red);
    color: var(--acw-white);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 4px 12px;
}

.news-detail__title {
    font-family: var(--font-heading);
    font-size: 42px;
    font-weight: 600;
    color: var(--acw-dark);
    line-height: 1.2;
    margin-bottom: 40px;
}

.news-detail__image {
    margin-bottom: 40px;
    overflow: hidden;
}

.news-detail__img {
    width: 100%;
    height: auto;
    display: block;
}

.news-detail__text {
    font-size: 17px;
    color: var(--acw-dark);
    line-height: 1.8;
    margin-bottom: 50px;
}

.news-detail__text p {
    margin-bottom: 1.5em;
}

.news-detail__back {
    padding-top: 30px;
    border-top: 1px solid #e8e2dc;
}

/* --- News list page (Aktuelles) --- */
.news-list__empty {
    text-align: center;
    font-size: 17px;
    color: var(--acw-gray);
    padding: 60px 0;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
    .news-teaser__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .news-teaser__grid .news-card:last-child {
        display: none;
    }
}

@media (max-width: 768px) {
    .news-section {
        padding: 60px 0;
    }

    .news-teaser__heading {
        font-size: 28px;
    }

    .news-teaser__grid,
    .news-list__grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .news-teaser__grid .news-card:last-child {
        display: block;
    }

    .news-card__body {
        padding: 20px 16px;
    }

    .news-card__title {
        font-size: 18px;
    }

    .news-detail__title {
        font-size: 28px;
    }

    .news-detail__text {
        font-size: 16px;
    }
}

/* ==========================================================================
   CONTACT PAGE
   ========================================================================== */

.contact-intro {
    max-width: 640px;
    margin-bottom: 60px;
}

.contact-intro h2 {
    font-family: var(--font-heading);
    font-size: 42px;
    margin-bottom: 16px;
}

.contact-intro p {
    font-size: 17px;
    color: var(--acw-gray);
    line-height: 1.8;
}

/* --- Contact info grid --- */
.contact-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-bottom: 60px;
}

.contact-card {
    background: var(--acw-white);
    padding: 22px 24px;
}

.contact-card h3 {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 600;
    color: var(--acw-dark);
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--acw-teal);
}

.contact-person {
    margin-bottom: 14px;
}

.contact-person strong {
    color: var(--acw-dark);
}

.contact-role {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--acw-red);
    margin-left: 6px;
}

.contact-card a {
    color: var(--acw-teal);
    font-weight: 600;
    transition: color var(--transition);
}

.contact-card a:hover {
    color: var(--acw-teal-hover);
}

/* --- Contact form --- */
.frame-type-form_formframework {
    background: var(--acw-white);
    padding: 40px;
    margin-bottom: 60px;
}

.frame-type-form_formframework h2 {
    font-family: var(--font-heading);
    font-size: 28px;
    margin-bottom: 30px;
}

.frame-type-form_formframework label {
    display: block;
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 14px;
    color: var(--acw-dark);
    margin-bottom: 6px;
    letter-spacing: 0.3px;
}

.frame-type-form_formframework input[type="text"],
.frame-type-form_formframework input[type="email"],
.frame-type-form_formframework select,
.frame-type-form_formframework textarea {
    width: 100%;
    padding: 14px 16px;
    font-family: var(--font-primary);
    font-size: 15px;
    color: var(--acw-dark);
    background: var(--acw-cream);
    border: 2px solid transparent;
    margin-bottom: 20px;
    transition: border-color var(--transition);
}

.frame-type-form_formframework input:focus,
.frame-type-form_formframework select:focus,
.frame-type-form_formframework textarea:focus {
    outline: none;
    border-color: var(--acw-teal);
}

.frame-type-form_formframework button[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 18px 38px;
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 1px;
    border: none;
    cursor: pointer;
    background: var(--acw-teal);
    color: var(--acw-white);
    transition: background var(--transition);
}

.frame-type-form_formframework button[type="submit"]:hover {
    background: var(--acw-teal-hover);
}

/* --- CTA Download boxes --- */
.cta-boxes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin: 40px 0 60px;
}

.cta-box {
    background: var(--acw-white);
    padding: 24px 22px;
    text-align: center;
    transition: transform var(--transition);
}

.cta-box:hover {
    transform: translateY(-4px);
}

.cta-box__icon {
    font-size: 40px;
    margin-bottom: 16px;
}

.cta-box__title {
    font-family: var(--font-heading);
    font-size: 21px;
    font-weight: 600;
    color: var(--acw-dark);
    margin-bottom: 12px;
}

.cta-box__text {
    font-size: 15px;
    color: var(--acw-gray);
    line-height: 1.7;
    margin-bottom: 24px;
}

.cta-box__btn {
    padding: 14px 28px;
    font-size: 14px;
}

/* --- Vereinsdaten --- */
.contact-meta {
    padding-top: 40px;
    border-top: 1px solid #e8e2dc;
}

.contact-meta h3 {
    font-family: var(--font-heading);
    font-size: 20px;
    margin-bottom: 12px;
}

.contact-meta p {
    font-size: 15px;
    color: var(--acw-gray);
    line-height: 1.7;
}

/* --- Contact responsive --- */
@media (max-width: 1024px) {
    .cta-boxes {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .contact-intro h2 {
        font-size: 28px;
    }

    .contact-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .contact-card {
        padding: 24px;
    }

    .cta-boxes {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .frame-type-form_formframework {
        padding: 24px;
    }
}

/* ==========================================================================
   KLARO COOKIE CONSENT — ACW DESIGN
   ========================================================================== */
.klaro .cookie-modal,
.klaro .cookie-notice {
    font-family: 'Open Sans', sans-serif;
}

.klaro .cookie-notice {
    background: var(--acw-cream);
    color: var(--acw-dark);
    border-top: 2px solid var(--acw-teal);
    border-radius: 0;
    box-shadow: none;
}

.klaro .cookie-notice .cn-body {
    padding: 1.5rem 2rem;
}

.klaro .cookie-notice p {
    color: var(--acw-gray);
    font-size: 0.9rem;
    line-height: 1.6;
}

.klaro .cookie-notice .cn-buttons .cm-btn {
    border-radius: 0;
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-size: 0.8rem;
    padding: 0.6rem 1.4rem;
    box-shadow: none;
    border: 2px solid transparent;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.klaro .cookie-notice .cn-buttons .cm-btn.cm-btn-success {
    background: var(--acw-teal);
    color: #fff;
    border-color: var(--acw-teal);
}

.klaro .cookie-notice .cn-buttons .cm-btn.cm-btn-success:hover {
    background: #2ea892;
    border-color: #2ea892;
}

.klaro .cookie-notice .cn-buttons .cm-btn.cm-btn-info {
    background: transparent;
    color: var(--acw-dark);
    border-color: var(--acw-dark);
}

.klaro .cookie-notice .cn-buttons .cm-btn.cm-btn-info:hover {
    background: var(--acw-dark);
    color: #fff;
}

.klaro .cookie-modal .cm-modal {
    background: var(--acw-cream);
    border-radius: 0;
    box-shadow: none;
}

.klaro .cookie-modal .cm-header {
    background: var(--acw-dark);
    color: #fff;
    border-radius: 0;
}

.klaro .cookie-modal .cm-header h1 {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 1.2rem;
    letter-spacing: 0.05em;
}

.klaro .cookie-modal .cm-btn.cm-btn-success {
    background: var(--acw-teal);
    border-radius: 0;
    box-shadow: none;
}

.klaro .cookie-modal .slider.round {
    border-radius: 0;
}

.klaro .cookie-modal .cm-service .cm-service-title {
    font-family: 'Josefin Sans', sans-serif;
}

/* ==========================================================================
   TRAININGSPLAN – Modern card-based layout with day headers
   ========================================================================== */

.acw-trainingsplan {
    padding: var(--section-padding) 0;
}

.trainingsplan-intro {
    text-align: center;
    margin-bottom: 40px;
}

.trainingsplan-intro p:first-child:empty {
    display: none;
}

.trainingsplan-intro h2 {
    font-family: var(--font-heading);
    font-size: 45px;
    font-weight: 600;
    color: var(--acw-dark);
    margin-bottom: 1rem;
}

.trainingsplan-intro p {
    font-size: 16px;
    color: var(--acw-gray);
    max-width: 600px;
    margin: 0 auto;
}

/* Kill TYPO3 paragraph margins inside trainingsplan cells */
.trainingsplan-day p,
.trainingsplan-special p,
.day-header p,
.session-time p,
.session-sport p,
.special-header p {
    margin: 0;
    padding: 0;
}

/* Day cards: flex with left teal accent bar */
.trainingsplan-day {
    display: flex;
    flex-wrap: wrap;
    background: var(--acw-white);
    margin-bottom: 30px;
    transition: transform var(--transition);
}

.trainingsplan-day:hover {
    transform: translateY(-3px);
}

/* Left accent bar (teal) */
.trainingsplan-day::before {
    content: "";
    display: block;
    width: 5px;
    background: var(--acw-teal);
    flex-shrink: 0;
}

/* Day header */
.day-header {
    padding: 24px 30px 16px 30px;
    font-family: var(--font-heading);
    font-size: 23px;
    font-weight: 600;
    color: var(--acw-dark);
    width: calc(100% - 5px);
    border-bottom: 2px solid var(--acw-teal);
}

/* Sessions container */
.trainingsplan-sessions {
    padding: 0 30px 8px 30px;
    display: flex;
    flex-direction: column;
    width: calc(100% - 5px);
}

/* Individual training session row */
.training-session {
    display: grid;
    grid-template-columns: 140px 1fr;
    align-items: center;
    gap: 20px;
    padding: 14px 0;
    border-bottom: 1px solid #f0ebe7;
}

.training-session:last-child {
    border-bottom: none;
}

/* Zebra-striping for visual separation */
.training-session:nth-child(even) {
    background: rgba(60, 198, 170, 0.04);
    margin: 0 -30px;
    padding: 14px 30px;
}

.session-time {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 17px;
    color: var(--acw-teal);
    white-space: nowrap;
}

.session-sport {
    font-size: 17px;
    color: var(--acw-dark);
    font-weight: 500;
}

/* Special mantrailing block */
.trainingsplan-special {
    display: flex;
    flex-wrap: wrap;
    background: var(--acw-white);
}

.trainingsplan-special::before {
    content: "";
    display: block;
    width: 5px;
    background: var(--acw-red);
    flex-shrink: 0;
}

.special-header {
    padding: 24px 30px 16px 30px;
    font-family: var(--font-heading);
    font-size: 23px;
    font-weight: 600;
    color: var(--acw-dark);
    width: calc(100% - 5px);
    border-bottom: 2px solid var(--acw-red);
}

.special-content {
    padding: 16px 30px 24px 30px;
    width: calc(100% - 5px);
}

.special-content p {
    margin-bottom: 1rem;
    color: var(--acw-gray);
}

.special-content ul {
    list-style: none;
    padding: 0;
    margin: 1rem 0 1rem 0;
}

.special-content li {
    color: var(--acw-dark);
    font-weight: 500;
    margin-bottom: 8px;
    padding-left: 20px;
    position: relative;
}

.special-content li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 8px;
    height: 8px;
    background: var(--acw-teal);
}

/* Responsive */
@media (max-width: 768px) {
    .acw-trainingsplan {
        padding: 60px 0;
    }

    .trainingsplan-intro h2 {
        font-size: 36px;
    }

    .day-header {
        padding: 16px 20px 12px 20px;
        font-size: 20px;
    }

    .trainingsplan-sessions {
        padding: 0 20px 8px 20px;
    }

    .training-session {
        grid-template-columns: 110px 1fr;
        gap: 12px;
        padding: 12px 0;
    }

    .training-session:nth-child(even) {
        padding: 12px 20px;
        margin: 0 -20px;
    }

    .session-time {
        font-size: 14px;
    }

    .session-sport {
        font-size: 15px;
    }

    .special-header {
        padding: 16px 20px 12px 20px;
        font-size: 20px;
    }

    .special-content {
        padding: 12px 20px 20px 20px;
    }
}

/* ==========================================================================
   FOTO-GALERIE – Duotone-Overlay im bridge321-Stil
   ========================================================================== */

.acw-galerie {
    padding: 80px 0;
}

.acw-galerie__header {
    text-align: center;
    margin-bottom: 50px;
}

.acw-galerie__header h2 {
    font-family: var(--font-heading);
    font-size: 40px;
    font-weight: 600;
    color: var(--acw-dark);
    margin-bottom: 0.5rem;
}

.acw-galerie__header p {
    font-size: 16px;
    color: var(--acw-gray);
    margin: 0;
}

/* Grid: 3 Spalten, masonry-artig mit unterschiedlichen Höhen */
.acw-galerie__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* Einzelnes Galerie-Item: quadratisch */
.acw-galerie__item {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    aspect-ratio: 1 / 1;
}

/* Bild füllt den quadratischen Container */
.acw-galerie__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    filter: sepia(30%) saturate(80%) brightness(95%);
    transition: filter 0.5s ease, transform 0.5s ease;
}

/* Lightbox-Overlay */
.acw-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(33, 33, 33, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    cursor: pointer;
}

.acw-lightbox.is-active {
    opacity: 1;
    visibility: visible;
}

.acw-lightbox img {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

.acw-lightbox.is-active img {
    transform: scale(1);
}

.acw-lightbox__close {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 36px;
    color: #fff;
    font-family: var(--font-heading);
    font-weight: 300;
    cursor: pointer;
    line-height: 1;
    transition: color 0.3s ease;
}

.acw-lightbox__close:hover {
    color: var(--acw-teal);
}

/* Warmer Cream-Overlay statt Teal */
.acw-galerie__item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(251, 245, 241, 0.2);
    mix-blend-mode: multiply;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

/* Hover: Originalfarben + leichter Zoom */
.acw-galerie__item:hover img {
    filter: sepia(0%) saturate(100%) brightness(100%);
    transform: scale(1.05);
}

.acw-galerie__item:hover::after {
    opacity: 0;
}

/* Label: weiss auf dem Bild, unten links */
.acw-galerie__label {
    position: absolute;
    bottom: 16px;
    left: 16px;
    padding: 6px 12px;
    background: var(--acw-red);
    color: #fff;
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    pointer-events: none;
}

/* Responsive */
@media (max-width: 1024px) {
    .acw-galerie__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .acw-galerie {
        padding: 60px 0;
    }

    .acw-galerie__header h2 {
        font-size: 32px;
    }

    .acw-galerie__grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
}

/* ==========================================================================
   TRAINER PROFILE
   ========================================================================== */

.cb-trainer {
    padding: var(--section-padding) 0;
    max-width: var(--container-width);
    margin: 0 auto;
}

.cb-trainer__header {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 50px;
    align-items: start;
    margin-bottom: 40px;
}

.cb-trainer__portrait img {
    width: 100%;
    height: auto;
    display: block;
}

.cb-trainer__name {
    font-family: var(--font-heading);
    font-size: 38px;
    font-weight: 600;
    color: var(--acw-dark);
    line-height: 1.15;
    margin-bottom: 12px;
}

.cb-trainer__position {
    font-size: 14px;
    font-weight: 600;
    color: var(--acw-red);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 20px;
}

.cb-trainer__sports {
    font-size: 16px;
    color: var(--acw-gray);
    line-height: 1.7;
    margin-bottom: 8px;
}

.cb-trainer__since {
    font-size: 15px;
    color: var(--acw-gray-light);
    font-style: italic;
}

.cb-trainer__bio {
    font-size: 16px;
    color: var(--acw-gray);
    line-height: 1.8;
    margin-bottom: 40px;
}

.cb-trainer__bio p {
    margin-bottom: 1rem;
}

.cb-trainer__quote {
    background: #f0ebe7;
    color: var(--acw-dark);
    padding: 30px 35px;
    border-left: 4px solid var(--acw-red);
    font-style: italic;
    font-size: 17px;
    line-height: 1.7;
    margin: 0;
}

.cb-trainer__quote p {
    margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .cb-trainer {
        padding: 60px 0;
    }

    .cb-trainer__header {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .cb-trainer__portrait {
        max-width: 250px;
    }

    .cb-trainer__name {
        font-size: 28px;
    }

    .cb-trainer__quote {
        padding: 20px 25px;
        font-size: 15px;
    }
}

/* ==========================================================================
   TRAINER GRID (Übersichtsseite)
   ========================================================================== */

.cb-trainer-grid {
    padding: var(--section-padding) 0;
}

.cb-trainer-grid__header {
    text-align: center;
    margin-bottom: 20px;
}

.cb-trainer-grid__label {
    font-size: 14px;
    font-weight: 600;
    color: var(--acw-red);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 0.75rem;
}

.cb-trainer-grid__heading {
    font-family: var(--font-heading);
    font-size: 45px;
    font-weight: 600;
    color: var(--acw-dark);
    line-height: 1.15;
}

.cb-trainer-grid__intro {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 50px;
    color: var(--acw-gray);
    line-height: 1.8;
}

.cb-trainer-grid__items {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 35px;
}

.cb-trainer-grid__card {
    background: var(--acw-white);
    transition: transform var(--transition);
}

.cb-trainer-grid__card:hover {
    transform: translateY(-4px);
}

.cb-trainer-grid__image {
    margin: 0;
    overflow: hidden;
}

.cb-trainer-grid__image img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}

.cb-trainer-grid__content {
    padding: 25px;
}

.cb-trainer-grid__name {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 600;
    color: var(--acw-dark);
    margin-bottom: 10px;
}

.cb-trainer-grid__text {
    font-size: 15px;
    color: var(--acw-gray);
    line-height: 1.7;
    margin-bottom: 15px;
}

.cb-trainer-grid__link {
    font-size: 15px;
    font-weight: 700;
    color: var(--acw-teal);
    text-decoration: none;
    transition: color var(--transition);
}

.cb-trainer-grid__link:hover {
    color: var(--acw-teal-hover);
}

/* Responsive */
@media (max-width: 1024px) {
    .cb-trainer-grid__items {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .cb-trainer-grid {
        padding: 60px 0;
    }

    .cb-trainer-grid__heading {
        font-size: 32px;
    }

    .cb-trainer-grid__items {
        grid-template-columns: 1fr;
        gap: 25px;
    }
}