/*
 * pages.css – Seitenspezifische Stile für Inhaltsseiten
 * (News-Artikel, Archive, Filter-Navigation, raceresult-Gate)
 */

/* ============================================================
   PAGE-HEADER
   ============================================================ */

.page-header {
    background: var(--color-dark-2);
    color: var(--color-text-white);
    padding-block: var(--space-16) var(--space-10);
    border-bottom: 1px solid var(--color-border-dark);
}

.page-header--news {
    padding-block: var(--space-12) var(--space-8);
}

/* News-Kategorie-Badges direkt im Artikel (kein Header-Kontext) */
.news-meta__cats--inline {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
    padding: 0;
    list-style: none;
}

/* Sidebar: Thumbnail + Text nebeneinander */
.news-sidebar__thumb {
    display: block;
    flex-shrink: 0;
    width: 72px;
    height: 54px;
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.news-sidebar__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.news-sidebar__item {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
}
.news-sidebar__item-content {
    flex: 1;
    min-width: 0;
}

/* Zurück-Link unter dem Artikel */
.news-article__back {
    margin-top: var(--space-6);
}

.page-header__title {
    font-size: var(--text-5xl);
    font-weight: 800;
    color: var(--color-white);
    margin-top: var(--space-4);
    max-width: 20ch;
}

.page-header__subtitle {
    font-size: var(--text-lg);
    color: rgba(255,255,255,0.55);
    margin-top: var(--space-2);
    max-width: 50ch;
}

/* News-spezifische Meta-Zeile im Header */
.news-meta {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
}

.news-meta__date {
    font-size: var(--text-sm);
    color: rgba(255,255,255,0.55);
    font-weight: 500;
}

.news-meta__cats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* ============================================================
   NEWS-ARTIKEL LAYOUT
   ============================================================ */

.news-article-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-12);
    padding-block: var(--section-gap);
    align-items: start;
}

@media (min-width: 1024px) {
    .news-article-layout {
        grid-template-columns: 1fr 280px;
    }
}

.news-article__hero {
    margin: 0 0 var(--space-8) 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

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

.news-article__body {
    font-size: var(--text-base);
    line-height: var(--leading-loose);
}

/* Teilen-Leiste */
.news-article__share {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-top: var(--space-10);
    padding-top: var(--space-8);
    border-top: 1px solid var(--color-border);
}

.news-article__share-label {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-muted);
}

/* ============================================================
   NEWS SIDEBAR
   ============================================================ */

.news-sidebar {
    position: sticky;
    top: calc(var(--header-height) + var(--space-6));
}

.news-sidebar__title {
    font-size: var(--text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--color-text-muted);
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border);
}

.news-sidebar__item {
    padding-block: var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

.news-sidebar__date {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-text-light);
    margin-bottom: var(--space-1);
}

.news-sidebar__item-title {
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: var(--leading-snug);
}

.news-sidebar__item-title a {
    color: var(--color-text);
    text-decoration: none;
}
.news-sidebar__item-title a:hover { color: var(--color-primary); }

.news-sidebar .btn {
    margin-top: var(--space-5);
}

/* ============================================================
   FILTER-NAVIGATION (Archiv-Seiten)
   ============================================================ */

.filter-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-10);
}

.filter-nav__item {
    display: inline-flex;
    align-items: center;
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
    font-weight: 600;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-pill);
    color: var(--color-text-muted);
    text-decoration: none;
    transition:
        border-color var(--transition-fast),
        color var(--transition-fast),
        background var(--transition-fast);
}

.filter-nav__item:hover,
.filter-nav__item.is-active {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: rgba(var(--color-primary-rgb), 0.06);
}

.filter-nav__item.is-active {
    background: var(--color-primary);
    color: var(--color-white);
}

/* ============================================================
   ARCHIV-PAGINATION
   ============================================================ */

.archive-pagination {
    margin-top: var(--space-12);
    padding-top: var(--space-8);
    border-top: 1px solid var(--color-border);
}

.archive-pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
    justify-content: center;
}

.archive-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 var(--space-3);
    font-size: var(--text-sm);
    font-weight: 600;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    text-decoration: none;
    transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}

.archive-pagination .page-numbers:hover { border-color: var(--color-primary); color: var(--color-primary); }
.archive-pagination .page-numbers.current {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

.archive-pagination .prev,
.archive-pagination .next {
    font-size: var(--text-sm);
    padding-inline: var(--space-5);
}

/* ============================================================
   NO RESULTS / EMPTY STATE
   ============================================================ */

.no-results {
    text-align: center;
    padding-block: var(--space-16);
}

.no-results__icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--gradient-eon);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-inline: auto;
    margin-bottom: var(--space-6);
    font-size: 2rem;
    color: var(--color-white);
}

.no-results h2 {
    font-size: var(--section-h2);
    margin-bottom: var(--space-4);
}

.no-results p {
    max-width: 40ch;
    margin-inline: auto;
    margin-bottom: var(--space-8);
    color: var(--color-text-muted);
}

/* ============================================================
   RACERESULT CONSENT-GATE
   ============================================================ */

.raceresult-gate {
    display: flex;
    flex-direction: column;
    position: relative;
}

.raceresult-gate__notice {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-12) var(--space-8);
    background: var(--color-surface);
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-lg);
    gap: var(--space-4);
    flex: 1;
}

.raceresult-gate__icon { font-size: 2.5rem; }

.raceresult-gate__title {
    font-size: var(--text-xl);
    margin: 0;
}

.raceresult-gate__text {
    max-width: 45ch;
    color: var(--color-text-muted);
    margin: 0;
}

.raceresult-gate__text a { color: var(--color-primary); }

.raceresult-gate__remember {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    cursor: pointer;
}

.raceresult-gate__iframe {
    width: 100%;
    border: none;
    border-radius: var(--radius-lg);
}

/* ============================================================
   PAGE BANNER (Foto-Header für Unterseiten)
   ============================================================ */

.page-banner {
    background: var(--gradient-eon);
    color: var(--color-white);
    padding-block: calc(var(--header-height) + var(--space-10)) var(--space-12);
    position: relative;
    overflow: hidden;
    min-height: 300px;
    display: flex;
    align-items: flex-end;
}

.page-banner--photo {
    background-image: var(--banner-photo);
    background-size: cover;
    background-position: center 35%;
    min-height: 360px;
}

.page-banner__overlay {
    position: absolute;
    inset: 0;
    background: var(--overlay-banner),
                linear-gradient(to top, rgba(0,0,0,0.40) 0%, transparent 60%);
}

.page-banner__inner {
    position: relative;
    z-index: 1;
}

.page-banner .breadcrumb {
    margin-bottom: var(--space-4);
}

.page-banner .breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
    list-style: none;
}

.page-banner .breadcrumb__item + .breadcrumb__item::before {
    content: '/';
    margin-right: var(--space-2);
    opacity: 0.5;
}

.page-banner .breadcrumb__item a {
    color: rgba(255,255,255,0.70);
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: 500;
}
.page-banner .breadcrumb__item a:hover { color: var(--color-white); }
.page-banner .breadcrumb__item.is-current {
    color: rgba(255,255,255,0.50);
    font-size: var(--text-sm);
}

.page-banner__kicker {
    display: block;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: rgba(255,255,255,0.65);
    margin-bottom: var(--space-3);
}

.page-banner__title {
    font-size: var(--text-5xl);
    font-weight: 900;
    color: var(--color-white) !important;
    line-height: var(--leading-tight);
    margin: 0 0 var(--space-3);
    max-width: 18ch;
}

.page-banner__subtitle {
    font-size: var(--text-lg);
    color: rgba(255,255,255,0.75) !important;
    margin: 0;
    max-width: 55ch;
}

/* ============================================================
   PAGE SECTION (Hauptinhalt-Bereich)
   ============================================================ */

.page-section {
    padding-block: var(--section-gap);
}

.page-prose {
    max-width: 72ch;
}

.page-cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-top: var(--space-12);
    padding-top: var(--space-8);
    border-top: 1px solid var(--color-border);
}

/* ============================================================
   INFO-GRID (Zeitplan, Strecke etc.)
   ============================================================ */

.info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-12);
    margin-bottom: var(--section-gap);
}

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

@media (max-width: 768px) {
    .info-grid { grid-template-columns: 1fr; gap: var(--space-8); }
}

.info-block__title {
    font-size: var(--text-2xl);
    font-weight: 800;
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-3);
    border-bottom: 3px solid var(--color-primary);
}

/* Zeitplan */
.schedule-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.schedule-item {
    display: grid;
    /* Feste 80 px reichten für „09:15", nicht für „ab 10:15" oder „07:30 – 09:30": der Text
       lief in die Beschriftung hinein (auf rcr sichtbar). `auto` mit Mindestbreite hält die
       Spalte bündig und lässt sie wachsen, wenn eine Zeitangabe länger ist. */
    grid-template-columns: minmax(80px, auto) 1fr;
    gap: var(--space-4);
    padding-block: var(--space-4);
    border-bottom: 1px solid var(--color-border);
    align-items: center;
}

.schedule-item__time {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: var(--text-lg);
    color: var(--color-primary);
    white-space: nowrap;
}

.schedule-item__label {
    font-size: var(--text-base);
    color: var(--color-text);
}

.schedule-item--wave .schedule-item__label { font-weight: 700; }
.schedule-item--full { opacity: 0.50; }

/* Fact-Liste */
.fact-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.fact-item {
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
}

.fact-item__icon {
    font-size: 1.5rem;
    color: var(--color-primary);
    flex-shrink: 0;
    width: 2rem;
    text-align: center;
    line-height: 1.4;
}

.fact-item strong { display: block; font-weight: 700; }
.fact-item span { font-size: var(--text-sm); color: var(--color-text-muted); }

/* Foto-Teaser 2er-Grid */
.info-photo-teaser {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
    margin-bottom: var(--section-gap);
    border-radius: var(--radius-2xl);
    overflow: hidden;
}

.info-photo-teaser img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    display: block;
}

@media (max-width: 640px) {
    .info-photo-teaser { grid-template-columns: 1fr; }
    .info-photo-teaser img { height: 220px; }
}

/* After-Run Highlight */
.info-highlight {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
    align-items: center;
    margin-bottom: var(--section-gap);
    padding: var(--space-10);
    background: var(--surface-sunken);
    border-radius: var(--radius-2xl);
    overflow: hidden;
}

@media (max-width: 768px) {
    .info-highlight { grid-template-columns: 1fr; }
}

.info-highlight img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: var(--radius-xl);
}

/* Badges */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem var(--space-2);
    font-size: var(--text-xs);
    font-weight: 700;
    border-radius: var(--radius-sm);
    margin-left: var(--space-2);
    vertical-align: middle;
}
.badge--warning { background: #FFF3CD; color: #856404; }
.badge--primary { background: var(--gradient-eon); color: white; }

/* ============================================================
   PREISKARTEN (Anmeldung)
   ============================================================ */

.anmeldung-intro { margin-bottom: var(--space-12); }

.price-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-5);
}

.price-card {
    background: var(--surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.price-card--highlight {
    background: var(--surface-sunken);
    border-color: var(--color-primary);
    border-top: 3px solid var(--color-primary);
}

.price-card__label {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--color-text-muted);
}

.price-card__amount {
    font-family: var(--font-heading);
    font-size: var(--text-4xl);
    font-weight: 900;
    color: var(--color-primary);
    line-height: 1;
}

.price-card__note {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.price-card__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.price-card__list li {
    font-size: var(--text-sm);
    color: var(--color-text);
    padding-left: var(--space-5);
    position: relative;
}
.price-card__list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--color-primary);
    font-weight: 700;
}

/* Info-Banner (Warnung) */
.info-banner {
    display: flex;
    gap: var(--space-5);
    align-items: flex-start;
    padding: var(--space-6) var(--space-8);
    border-radius: var(--radius-xl);
    margin-bottom: var(--space-10);
}
.info-banner--warning {
    background: #FFF3CD;
    border: 1px solid #FFDA6A;
    color: #664D03;
}
.info-banner > i { font-size: 1.5rem; flex-shrink: 0; margin-top: 2px; }
.info-banner p { margin-top: var(--space-2); }

/* ============================================================
   RACERESULT SECTION
   ============================================================ */

.raceresult-section {
    margin-bottom: var(--section-gap);
}

.raceresult-section__title {
    font-size: var(--text-3xl);
    font-weight: 800;
    margin-bottom: var(--space-8);
    padding-bottom: var(--space-4);
    border-bottom: 3px solid var(--color-primary);
}

/* Platzhalter (vor dem Event) */
.placeholder-block {
    text-align: center;
    padding-block: var(--space-20);
    max-width: 40ch;
    margin-inline: auto;
}

.placeholder-block__icon {
    font-size: 4rem;
    color: var(--color-primary);
    opacity: 0.35;
    display: block;
    margin-bottom: var(--space-6);
}

.placeholder-block h2 { margin-bottom: var(--space-4); }
.placeholder-block p  { margin-bottom: var(--space-8); color: var(--color-text-muted); }

/* ============================================================
   KONTAKT-SEITE
   ============================================================ */

/* ============================================================
   KONTAKT PAGE – ct-* Klassen
   ============================================================ */
.ct-layout {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: var(--space-16);
    align-items: start;
}
@media (max-width: 900px) {
    .ct-layout { grid-template-columns: 1fr; gap: var(--space-12); }
}

/* --- Info-Spalte ------------------------------------------ */
.ct-info__title {
    font-size: var(--text-2xl);
    font-weight: 900;
    margin-bottom: var(--space-8);
    padding-bottom: var(--space-4);
    border-bottom: 3px solid var(--color-primary);
}

.ct-info-items {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: var(--space-8);
}
.ct-info-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-5) 0;
    border-bottom: 1px solid var(--color-border);
}
.ct-info-item:first-child { padding-top: 0; }
.ct-info-item:last-child  { border-bottom: none; }

.ct-info-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}
.ct-info-item div { min-width: 0; }
.ct-info-item strong {
    display: block;
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--color-text-muted);
    margin-bottom: var(--space-1);
}
.ct-info-item address {
    font-style: normal;
    line-height: 1.7;
    font-size: var(--text-base);
}
.ct-info-item a {
    font-weight: 600;
    color: var(--color-text);
    text-decoration: none;
}
.ct-info-item a:hover { color: var(--color-primary); }

.ct-social { margin-bottom: var(--space-8); }
.ct-social__label {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--color-text-muted);
    margin-bottom: var(--space-3);
}
.ct-social__links { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.ct-social-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text);
    text-decoration: none;
    transition: border-color var(--transition-fast), color var(--transition-fast);
}
.ct-social-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }

.ct-map {
    border-radius: var(--radius-xl);
    overflow: hidden;
    border: 1px solid var(--color-border);
}
.ct-map iframe {
    display: block;
    width: 100%;
    height: 220px;
    border: none;
}
.ct-map__link {
    display: block;
    text-align: center;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    text-decoration: none;
    padding: var(--space-2) var(--space-4);
    background: var(--color-surface);
}
.ct-map__link:hover { color: var(--color-primary); }

/* --- Formular-Spalte -------------------------------------- */
.ct-form-card {
    background: var(--surface-raised);
    border: 1px solid var(--color-border);
    border-top: 3px solid var(--color-primary);
    border-radius: var(--radius-xl);
    padding: var(--space-10) var(--space-8);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.07);
}
.ct-form-card__title {
    font-size: var(--text-2xl);
    font-weight: 900;
    margin-bottom: var(--space-2);
}
.ct-form-card__lead {
    color: var(--color-text-muted);
    margin-bottom: var(--space-8);
}

.ct-form { display: flex; flex-direction: column; gap: var(--space-5); }

.ct-form__row--2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
}
@media (max-width: 580px) {
    .ct-form__row--2col { grid-template-columns: 1fr; }
}

.ct-form__field { display: flex; flex-direction: column; gap: var(--space-2); }
.ct-form__field label {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-text);
}
.ct-form__field label abbr {
    text-decoration: none;
    color: var(--color-primary);
    margin-left: 2px;
}
.ct-form__field input[type="text"],
.ct-form__field input[type="email"],
.ct-form__field select,
.ct-form__field textarea {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-text);
    background: var(--surface-raised);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    appearance: none;
}
.ct-form__field input:focus,
.ct-form__field select:focus,
.ct-form__field textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.12);
}
.ct-form__field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='%23666'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    padding-right: var(--space-8);
    cursor: pointer;
}
.ct-form__field textarea { resize: vertical; min-height: 140px; line-height: var(--leading-loose); }

.ct-form__field--check { margin-top: var(--space-2); }
.ct-form__check-label {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    cursor: pointer;
}
.ct-form__check-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 2px;
    accent-color: var(--color-primary);
    cursor: pointer;
}
.ct-form__check-label span {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: var(--leading-loose);
}
.ct-form__check-label span a {
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Datenschutz-Hinweis statt Pflicht-Checkbox: informiert an derselben Stelle, kostet aber
   keinen Klick. Bewusst dieselbe Anmutung wie die frühere Zustimmungszeile. */
.ct-form__privacy {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: var(--leading-loose);
    margin: var(--space-2) 0 0;
}
.ct-form__privacy a {
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ct-form__submit { margin-top: var(--space-2); align-self: flex-start; }

/* Success card */
.ct-success {
    background: var(--surface-raised);
    border: 1px solid var(--color-border);
    border-top: 3px solid #2D7D2D;
    border-radius: var(--radius-xl);
    padding: var(--space-12) var(--space-8);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.07);
    text-align: center;
}
.ct-success__icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--surface-success);
    color: var(--color-success);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-6);
}
.ct-success__title { font-size: var(--text-2xl); font-weight: 900; margin-bottom: var(--space-4); }
.ct-success__text  { color: var(--color-text-muted); margin-bottom: var(--space-8); max-width: 38ch; margin-inline: auto; margin-bottom: var(--space-8); }

/* Error notice */
.ct-notice {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 600;
    margin-bottom: var(--space-6);
}
.ct-notice--error {
    background: var(--surface-danger);
    border: 1px solid var(--border-danger);
    color: #b91c1c;
}

/* ============================================================
   FAQ – nativer <details>/<summary> Accordion
   ============================================================ */

/* 2-Spalten-Layout: Intro-Text links, Accordion rechts */
.faq-section {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-10);
    margin-top: var(--space-20);
}

@media (min-width: 900px) {
    .faq-section {
        grid-template-columns: 5fr 9fr;
        gap: var(--space-16);
        align-items: start;
    }
}

.faq-intro {
    padding-top: var(--space-2);
}

.faq-intro h2 {
    margin-bottom: var(--space-4);
}

.faq-intro p {
    color: var(--color-text-muted);
    font-size: var(--text-base);
    line-height: var(--leading-loose);
}

/* Accordion — identisch zur Live-Seite (beiger Hintergrund, weißer Spalt) */
.faq-list {
    display: flex;
    flex-direction: column;
    gap: 3px;          /* weißer Spalt als Trenner, kein Border */
    background: var(--surface-page);  /* Spalt-Farbe */
}

.faq-item {
    background: var(--surface-sunken);
    border: none;
    border-radius: 0;
    overflow: hidden;
}

.faq-item summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    padding: 18px 22px;
    font-size: 1rem;
    font-weight: 400;
    color: var(--color-text);
    cursor: pointer;
    list-style: none;
    user-select: none;
    background: var(--surface-sunken);
    transition: background var(--transition-fast);
}

.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker              { display: none; }

/* Chevron, dreht sich bei open.
   Bewusst aus zwei Rändern gezeichnet statt als SVG-Data-URI: in einer Data-URI muss die Farbe
   fest einkodiert werden (vorher %23333, also Dunkelgrau). Auf einem dunklen Event war der Pfeil
   damit unsichtbar. Als CSS-Form erbt er currentColor und passt sich jeder Farbwelt an. */
.faq-item summary::after {
    content: '';
    display: block;
    flex-shrink: 0;
    width: 9px;
    height: 9px;
    margin-right: 4px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    opacity: 0.75;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.faq-item[open] summary::after {
    transform: rotate(225deg) translate(-2px, -2px);
    opacity: 1;
}

.faq-item summary:hover {
    background: var(--tint-hover);
    color: var(--color-accent-text);
}

.faq-item[open] summary {
    /* kein Farbwechsel bei open — identisch zur Live-Seite */
    font-weight: 400;
    color: var(--color-text);
}

.faq-item__body {
    padding: 16px 22px 22px;
    background: var(--surface-sunken);
}

.faq-item__body p {
    font-size: var(--text-base);
    line-height: var(--leading-loose);
    color: var(--color-text);
    margin-bottom: var(--space-3);
}

.faq-item__body p:last-child { margin-bottom: 0; }

.faq-item__body ul {
    padding-left: var(--space-5);
    margin-top: var(--space-2);
    margin-bottom: var(--space-3);
}

.faq-item__body ul li {
    font-size: var(--text-base);
    color: var(--color-text);
    line-height: var(--leading-loose);
    margin-bottom: var(--space-1);
}

.faq-item__body strong {
    font-weight: 700;
    color: var(--color-text);
}

.faq-item__body a {
    color: var(--color-primary);
    text-decoration: underline;
}

/* ============================================================
   TEAM AREA PAGE
   ============================================================ */

/* Intro */
.team-area-intro {
    max-width: 72ch;
}
.team-area-intro__title {
    font-size: var(--section-h2-xl);
    font-weight: 900;
    color: var(--color-text);
    line-height: var(--leading-snug);
    margin-top: var(--space-2);
    margin-bottom: var(--space-6);
}

.team-area-lead {
    font-size: var(--text-lg);
    line-height: var(--leading-loose);
    color: var(--color-text);
    margin-bottom: var(--space-8);
}
.team-area-quicklinks {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

/* Section Header (center variant) */
.section-header--center {
    text-align: center;
    margin-bottom: var(--space-10);
}
.section-header--center .section__title {
    font-size: var(--section-h2);
    font-weight: 900;
    margin-top: var(--space-2);
}
.section-header--center .section__subtitle {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    margin-top: var(--space-3);
    max-width: 56ch;
    margin-inline: auto;
}

/* Package image */
.team-package__image {
    margin: calc(-1 * var(--space-8)) calc(-1 * var(--space-8)) 0;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    overflow: hidden;
    aspect-ratio: 4/3;
}
.team-package__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}
.team-package:hover .team-package__image img {
    transform: scale(1.04);
}

/* Package CTA below grid */
.team-package-cta {
    margin-top: var(--space-10);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
}
.team-package-note {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* Package Grid */
.team-package-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}
@media (max-width: 960px) {
    .team-package-grid { grid-template-columns: 1fr; max-width: 480px; }
}

.team-package {
    background: var(--surface-raised);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    position: relative;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.team-package:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-card);
}

.team-package--featured {
    border-color: var(--color-primary);
}
.team-package--featured::before {
    content: 'Beliebt';
    position: absolute;
    top: -2px;
    right: var(--space-6);
    background: var(--color-primary);
    color: var(--color-white);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    padding: 4px 14px;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.team-package__name {
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    font-weight: 800;
    color: var(--color-text);
    line-height: var(--leading-snug);
}
.team-package__subtitle {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-top: var(--space-1);
}
.team-package__pricing {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border);
}
.team-package__price {
    font-family: var(--font-heading);
    font-size: var(--text-3xl);
    font-weight: 900;
    color: var(--color-primary);
}
.team-package__price-note {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}
.team-package__features {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    flex: 1;
}
.team-package__features li {
    font-size: var(--text-sm);
    color: var(--color-text);
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}
.team-package__features li::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-primary);
    flex-shrink: 0;
    margin-top: 0.6em;
}

.team-package-note {
    margin-top: var(--space-8);
    text-align: center;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* Standort */
.team-area-standort {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
    align-items: start;
}
@media (max-width: 860px) {
    .team-area-standort { grid-template-columns: 1fr; gap: var(--space-10); }
    .team-area-standort__map { order: -1; }
}
.team-area-standort h2 {
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    font-weight: 900;
    margin-top: var(--space-2);
    margin-bottom: var(--space-6);
}
.team-area-standort p {
    margin-bottom: var(--space-4);
    font-size: var(--text-base);
    line-height: var(--leading-loose);
}
.team-area-standort__facts {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-block: var(--space-6);
    border-top: 1px solid var(--color-border);
}
.team-area-standort__facts li {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding-block: var(--space-4);
    border-bottom: 1px solid var(--color-border);
    font-size: var(--text-sm);
}
.team-area-standort__facts strong {
    font-weight: 700;
    color: var(--color-text);
}
.team-area-standort__note {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-bottom: var(--space-4);
}
.team-area-lageplan-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-2);
}

/* Lageplan-Bild */
.team-area-standort__map {
    position: sticky;
    top: calc(var(--header-height) + var(--space-8));
}
.team-area-lageplan-img {
    width: 100%;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}

/* Catering + Wertmarken */
.team-area-services {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
}
@media (max-width: 768px) {
    .team-area-services { grid-template-columns: 1fr; gap: var(--space-10); }
}
.team-area-service__wertmarken-image {
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--space-4);
    aspect-ratio: 4/3;
}
.team-area-service__wertmarken-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.team-area-service__icon {
    font-size: 2.5rem;
    margin-bottom: var(--space-4);
}
.team-area-service__title {
    font-family: var(--font-heading);
    font-size: var(--section-h3);
    font-weight: 800;
    margin-bottom: var(--space-4);
    color: var(--color-text);
}
.team-area-service p {
    font-size: var(--text-sm);
    line-height: var(--leading-loose);
    margin-bottom: var(--space-4);
}
.team-area-service__list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}
.team-area-service__list li {
    font-size: var(--text-sm);
    padding-left: var(--space-5);
    position: relative;
    line-height: var(--leading-normal);
}
.team-area-service__list li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 0.65em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-primary);
}

/* Warum */
.team-area-why {
    max-width: 72ch;
}
.team-area-why h2 {
    font-size: var(--section-h2);
    font-weight: 900;
    margin-top: var(--space-2);
    margin-bottom: var(--space-4);
}
.team-area-why p {
    font-size: var(--text-base);
    line-height: var(--leading-loose);
    margin-bottom: var(--space-6);
}
.team-area-why__list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.team-area-why__list li {
    font-size: var(--text-base);
    padding-left: var(--space-8);
    position: relative;
    line-height: var(--leading-normal);
}
.team-area-why__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-primary);
}

/* CTA */
.team-area-cta {
    max-width: 600px;
    margin-inline: auto;
    text-align: center;
}
.team-area-cta__title {
    font-size: var(--section-h2);
    font-weight: 900;
    color: var(--color-text);
    margin-bottom: var(--space-4);
}
.team-area-cta__text {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: var(--leading-loose);
    margin-bottom: var(--space-8);
}

/* ============================================================
   ANMELDUNG – COMING SOON
   ============================================================ */

/* Zentrierter Hero-Block */
.reg-coming-soon {
    max-width: 680px;
    margin-inline: auto;
    text-align: center;
}
.reg-coming-soon__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--gradient-eon);
    color: var(--color-white);
    margin-bottom: var(--space-6);
}
.reg-coming-soon__badge .icon-register,
.reg-coming-soon__badge .be-icon-svg {
    font-size: 2rem;
}
.reg-coming-soon__title {
    font-size: var(--section-h2-xl);
    font-weight: 900;
    margin-bottom: var(--space-5);
    line-height: 1.15;
}
.reg-coming-soon__lead {
    font-size: var(--text-lg);
    line-height: var(--leading-loose);
    color: var(--color-text-muted);
    margin-bottom: var(--space-8);
}
.reg-coming-soon__social {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    justify-content: center;
}

.reg-social-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-md);
    font-weight: 700;
    font-size: var(--text-sm);
    text-decoration: none;
    transition: opacity var(--transition-fast), transform var(--transition-fast);
    color: var(--color-white);
}
.reg-social-btn:hover {
    opacity: 0.88;
    transform: translateY(-2px);
    /* Ohne diese Zeile greift `a:hover { color: … }` aus main.css (Spezifität 0,1,1 gegen 0,1,0)
       und färbt die Beschriftung in die Marken-Hover-Farbe — auf Instagram-Verlauf und
       Facebook-Blau war sie damit kaum noch zu lesen. */
    color: var(--color-white);
}

/* Auf farbigen Bändern brauchen die Knöpfe eine eigene Kante. Der Instagram-Verlauf beginnt in
   Orange (#f09433) und ging auf dem orangefarbenen Aufruf-Band optisch darin auf. */
.footer__newsletter .reg-social-btn,
.section--primary .reg-social-btn {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.92);
}
.footer__newsletter .reg-social-btn:hover,
.section--primary .reg-social-btn:hover {
    box-shadow: 0 0 0 2px #FFFFFF;
    opacity: 1;
}
.reg-social-btn--instagram {
    background: linear-gradient(45deg, #f09433, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888);
}
.reg-social-btn--facebook {
    background: #1877f2;
}

/* Preview-Karten-Grid */
.reg-preview__header {
    text-align: center;
    margin-bottom: var(--space-10);
}
.reg-preview__header h2 {
    font-size: var(--section-h2);
    font-weight: 900;
    margin-top: var(--space-2);
}
.reg-preview__grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--space-5);
    align-items: stretch;
}
@media (max-width: 900px) {
    .reg-preview__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 580px) {
    .reg-preview__grid { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
}

.reg-preview-card {
    background: var(--surface-raised);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    border: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    height: 100%;
}
.reg-preview-card--price {
    border-top: 3px solid var(--color-primary);
}
.reg-preview-card--late {
    border-top-color: var(--color-border);
}
.reg-preview-card--late .reg-preview-card__kicker {
    color: var(--color-text-muted);
}
.reg-preview-card__kicker {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--color-primary);
}
.reg-preview-card__price {
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    font-weight: 900;
    color: var(--color-text);
    line-height: 1;
    margin-top: var(--space-1);
}
.reg-preview-card--late .reg-preview-card__price {
    color: var(--color-text-muted);
}
.reg-preview-card__unit {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-4);
}
.reg-preview-card__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-2);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}
.reg-preview-card__list li {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    padding-left: var(--space-5);
    position: relative;
    line-height: var(--leading-snug);
}
.reg-preview-card--price .reg-preview-card__list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--color-primary);
    font-weight: 800;
}

/* Facts-Liste im Info-Card */
.reg-preview-facts {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-top: var(--space-3);
}
.reg-preview-fact {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.reg-preview-fact [class^="icon-"],
.reg-preview-fact .be-icon-svg {
    font-size: 1.25rem;
    color: var(--color-primary);
    width: 24px;
    text-align: center;
    flex-shrink: 0;
}
.reg-preview-fact div {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.reg-preview-fact strong {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.2;
}
.reg-preview-fact span {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* Reminder CTA */
.reg-reminder {
    text-align: center;
    max-width: 560px;
    margin-inline: auto;
    padding-block: var(--space-6);
}
.reg-reminder h2 {
    font-size: var(--section-h2);
    font-weight: 900;
    margin-bottom: var(--space-5);
}
.reg-reminder p {
    font-size: var(--text-base);
    line-height: var(--leading-loose);
    color: var(--color-text-muted);
    margin-bottom: 0;
}
.reg-reminder__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    justify-content: center;
    margin-top: var(--space-10);
}

/* ============================================================
   CHARITY PAGE
   ============================================================ */

/* --- 3 Karten-Section (nach Banner) --- */
.charity-cards-section {
    padding-top: var(--space-16);
}
.charity-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}
@media (max-width: 768px) {
    .charity-cards { grid-template-columns: 1fr; max-width: 400px; margin-inline: auto; }
}

.charity-card {
    background: #eaf5fd;
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-5);
    text-align: center;
}
.charity-card--featured {
    background: #d0ecfb;
    box-shadow: var(--shadow-md);
}
.charity-card__img {
    width: 100%;
}
.charity-card__img img {
    width: 100%;
    height: auto;
    display: block;
    max-width: 280px;
    margin-inline: auto;
}

/* --- Text + Grafik-Section --- */
.charity-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-16);
    align-items: start;
}
@media (max-width: 900px) {
    .charity-content { grid-template-columns: 1fr; gap: var(--space-8); }
    .charity-content__graphic { order: -1; max-width: 320px; margin-inline: auto; }
}

.charity-content__text h2 {
    font-size: var(--section-h2-xl);
    font-weight: 900;
    margin-bottom: var(--space-5);
    line-height: 1.15;
}
.charity-content__text h3 {
    font-size: var(--section-h3);
    font-weight: 800;
    margin-top: var(--space-6);
    margin-bottom: var(--space-4);
}
.charity-content__text p {
    font-size: var(--text-base);
    line-height: var(--leading-loose);
    color: var(--color-text-muted);
    margin-bottom: var(--space-4);
}
.charity-content__text .btn {
    margin-top: var(--space-4);
}
.charity-divider {
    border: none;
    border-top: 1px solid var(--color-border);
    margin-block: var(--space-8);
}

.charity-content__graphic img {
    width: 100%;
    height: auto;
    display: block;
}

/* --- Vollbreites BSFK-Foto --- */
.charity-photo-section {
    padding-block: var(--section-gap);
}
.charity-photo-main {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}
.charity-photo-badge {
    display: block;
    margin-inline: auto;
    margin-top: var(--space-8);
    max-width: 220px;
    width: 100%;
    height: auto;
}

/* --- CTA einfach zentriert --- */
.charity-cta-simple {
    text-align: center;
}

/* --- Split: Foto | Inhalt --- */
.charity-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 520px;
}
@media (max-width: 768px) {
    .charity-split { grid-template-columns: 1fr; }
    .charity-split__photo { min-height: 280px; }
}
.charity-split__photo {
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
}
.charity-split__content {
    background: var(--surface-sunken);
    padding: var(--space-16);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-4);
}
@media (max-width: 1024px) {
    .charity-split__content { padding: var(--space-10); }
}
.charity-split__content .section__kicker {
    margin-bottom: 0;
}
.charity-split__content h2 {
    font-size: var(--section-h2);
    font-weight: 900;
    line-height: 1.15;
    margin-bottom: var(--space-2);
}
.charity-split__content p {
    font-size: var(--text-base);
    line-height: var(--leading-loose);
    color: var(--color-text-muted);
}
.charity-split__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-2);
}

/* ×2 Badge im Split */
.charity-sparkasse-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: var(--gradient-eon);
    color: var(--color-white);
    box-shadow: 0 6px 24px rgba(var(--color-primary-rgb),0.30);
    margin-bottom: var(--space-2);
}
.charity-sparkasse-badge__multiplier {
    font-family: var(--font-heading);
    font-size: 2.25rem;
    font-weight: 900;
    line-height: 1;
}
.charity-sparkasse-badge__label {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    opacity: 0.90;
}

/* ============================================================
   STRECKE
   ============================================================ */
.route-stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
    justify-content: center;
}
.route-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    min-width: 100px;
    text-align: center;
}
.route-stat__icon { font-size: 1.75rem; color: var(--color-primary); }
.route-stat__value { font-size: var(--text-2xl); font-weight: 900; line-height: 1.1; }
.route-stat__label { font-size: var(--text-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: var(--tracking-wider); font-weight: 600; }

.route-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
    align-items: start;
}
@media (max-width: 767px) { .route-layout { grid-template-columns: 1fr; gap: var(--space-10); } }

.route-layout__text h2 {
    font-size: var(--section-h2-xl);
    font-weight: 900;
    margin-bottom: var(--space-4);
}
.route-layout__text p { color: var(--color-text-muted); margin-bottom: var(--space-4); }

.route-waypoints { display: flex; flex-direction: column; margin-top: var(--space-8); }
.route-waypoint {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
}
.route-waypoint div strong { display: block; font-weight: 700; }
.route-waypoint div span  { font-size: var(--text-sm); color: var(--color-text-muted); }
.route-waypoint__dot {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--color-border);
    border: 2px solid var(--color-white);
    box-shadow: 0 0 0 2px var(--color-border);
    margin-top: 4px;
}
.route-waypoint__dot--start  { background: var(--color-primary); box-shadow: 0 0 0 2px var(--color-primary); }
.route-waypoint__dot--finish { background: #22c55e; box-shadow: 0 0 0 2px #22c55e; }
.route-waypoint__line {
    width: 2px;
    height: 32px;
    background: var(--color-border);
    margin-left: 6px;
}

.route-map-frame {
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    box-shadow: var(--shadow-card);
}
.route-map-frame iframe { width: 100%; height: 100%; border: none; display: block; }
.route-map-link {
    display: inline-block;
    margin-top: var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    text-decoration: none;
}
.route-map-link:hover { color: var(--color-primary); }

.route-photos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.route-photos img { width: 100%; height: 280px; object-fit: cover; display: block; }
@media (max-width: 639px) {
    .route-photos { grid-template-columns: 1fr; }
    .route-photos img { height: 220px; }
}

/* ============================================================
   AFTER-RUN-PARTY
   ============================================================ */
.party-header { text-align: center; max-width: 640px; margin-inline: auto; margin-bottom: var(--space-12); }
.party-header h2 { font-size: var(--section-h2-xl); font-weight: 900; margin-bottom: var(--space-4); }
.party-header__lead { font-size: var(--text-lg); color: var(--color-text-muted); margin: 0; }

.party-highlights {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
}
@media (min-width: 768px) { .party-highlights { grid-template-columns: repeat(4, 1fr); } }
.party-highlight {
    background: var(--surface-raised);
    border: 1px solid var(--color-border);
    border-top: 3px solid var(--color-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    text-align: center;
}
.party-highlight__icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(var(--color-primary-rgb),0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-inline: auto;
    margin-bottom: var(--space-4);
    color: var(--color-primary);
}
.party-highlight h3 { font-size: var(--text-lg); font-weight: 700; margin-bottom: var(--space-2); }
.party-highlight p  { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0; }

.party-photos {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: var(--space-4);
    border-radius: var(--radius-xl);
    overflow: hidden;
}
@media (max-width: 639px) { .party-photos { grid-template-columns: 1fr; } }
.party-photos__main img { width: 100%; height: 400px; object-fit: cover; display: block; }
.party-photos__side { display: flex; flex-direction: column; gap: var(--space-4); }
.party-photos__side img { width: 100%; flex: 1; object-fit: cover; display: block; border-radius: 0; min-height: 100px; }

/* ============================================================
   TEAM-CAPTAIN
   ============================================================ */
.captain-intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
    align-items: center;
}
@media (max-width: 767px) { .captain-intro { grid-template-columns: 1fr; gap: var(--space-8); } }
.captain-intro__text h2 { font-size: var(--section-h2-xl); font-weight: 900; margin-bottom: var(--space-4); }
.captain-intro__text p  { color: var(--color-text-muted); margin-bottom: var(--space-4); }
.captain-intro__photo img { width: 100%; border-radius: var(--radius-xl); display: block; }

.captain-timeline { display: flex; flex-direction: column; gap: 0; max-width: 720px; margin-inline: auto; }
.captain-step {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: var(--space-5);
    padding-bottom: var(--space-8);
    position: relative;
}
.captain-step:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 22px;
    top: 48px;
    bottom: 0;
    width: 2px;
    background: var(--color-border);
}
.captain-step__number {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--gradient-eon);
    color: var(--color-white);
    font-size: var(--text-lg);
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}
.captain-step__content h3 { font-size: var(--section-h3); font-weight: 700; margin-bottom: var(--space-2); }
.captain-step__content p  { color: var(--color-text-muted); font-size: var(--text-base); margin-bottom: var(--space-2); }
.captain-step__when {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-primary);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
}

/* ============================================================
   FOTO-GALERIE (page-fotos.php)
   ============================================================ */
.gallery-page__credit {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    text-align: right;
    margin-bottom: var(--space-6);
}
.gallery-page__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
}
@media (min-width: 640px)  { .gallery-page__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .gallery-page__grid { grid-template-columns: repeat(4, 1fr); } }

.gallery-page__item {
    position: relative;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--color-border);
    border: none;
    padding: 0;
    cursor: pointer;
}
.gallery-page__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--transition-slow);
}
.gallery-page__item:hover img { transform: scale(1.04); }
.gallery-page__zoom {
    position: absolute;
    bottom: var(--space-3);
    right: var(--space-3);
    width: 36px;
    height: 36px;
    background: rgba(0,0,0,0.55);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    opacity: 0;
    transition: opacity var(--transition-fast);
}
.gallery-page__item:hover .gallery-page__zoom { opacity: 1; }

/* Lightbox */
.gallery-lightbox {
    border: none;
    background: transparent;
    padding: 0;
    max-width: 100vw;
    max-height: 100vh;
    width: 100%;
    height: 100%;
}
.gallery-lightbox::backdrop { background: rgba(0,0,0,0.92); }
.gallery-lightbox__inner {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gallery-lightbox__media {
    max-width: min(90vw, 1200px);
    max-height: 85vh;
    display: flex;
    align-items: center;
}
.gallery-lightbox__img {
    max-width: 100%;
    max-height: 85vh;
    object-fit: contain;
    display: block;
    border-radius: var(--radius-md);
}
.gallery-lightbox__close {
    position: fixed;
    top: var(--space-5);
    right: var(--space-5);
    width: 44px;
    height: 44px;
    background: rgba(255,255,255,0.15);
    border: none;
    border-radius: 50%;
    color: var(--color-white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-fast);
    z-index: 1;
}
.gallery-lightbox__close:hover { background: rgba(255,255,255,0.25); }
.gallery-lightbox__nav {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    background: rgba(255,255,255,0.12);
    border: none;
    border-radius: 50%;
    color: var(--color-white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-fast);
}
.gallery-lightbox__nav:hover { background: rgba(255,255,255,0.25); }
.gallery-lightbox__prev { left: var(--space-5); }
.gallery-lightbox__next { right: var(--space-5); }
.gallery-lightbox__caption {
    position: fixed;
    bottom: var(--space-5);
    left: 50%;
    transform: translateX(-50%);
    font-size: var(--text-sm);
    color: rgba(255,255,255,0.65);
    text-align: center;
    max-width: 60ch;
    margin: 0;
}

/* ============================================================
   TEILNEHMERLISTE – TEASER
   ============================================================ */
.tl-stats-section { padding-block: var(--space-12); }
.tl-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
    text-align: center;
}
@media (max-width: 639px) {
    .tl-stats { grid-template-columns: 1fr; gap: var(--space-6); }
}
.tl-stat__num {
    display: block;
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 900;
    color: var(--color-white);
    line-height: 1;
    margin-bottom: var(--space-2);
}
.tl-stat__label {
    display: block;
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
}

/* --- Locked list preview ----------------------------------- */
.tl-locked-wrap { max-width: 780px; margin-inline: auto; }

.tl-locked-header { text-align: center; margin-bottom: var(--space-10); }
.tl-locked-header__title {
    font-size: var(--section-h2);
    font-weight: 900;
    margin-bottom: var(--space-4);
}
.tl-locked-header__lead {
    color: var(--color-text-muted);
    max-width: 54ch;
    margin-inline: auto;
}

.tl-list-head {
    display: grid;
    grid-template-columns: 1fr 72px 100px;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-bottom: 2px solid var(--color-border);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-text-muted);
}
.tl-list-head__wave { text-align: center; }
.tl-list-head__runners { text-align: right; }

.tl-list-preview {
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-border);
}

.tl-list-row {
    display: grid;
    grid-template-columns: 1fr 72px 100px;
    gap: var(--space-4);
    align-items: center;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
    background: var(--surface-raised);
}
.tl-list-row:last-child { border-bottom: none; }
.tl-list-row:nth-child(even) { background: var(--color-surface); }

.tl-list-row__left {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}
.tl-list-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--av, var(--color-primary));
    color: #fff;
    font-size: var(--text-sm);
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.tl-blur-bar {
    height: 13px;
    max-width: 100%;
    border-radius: 6px;
    background: var(--color-border);
    filter: blur(3px);
    user-select: none;
}
.tl-blur-pill {
    height: 24px;
    border-radius: 12px;
    background: var(--color-border);
    filter: blur(4px);
    user-select: none;
    justify-self: center;
    width: 44px;
}
.tl-blur-count {
    height: 13px;
    border-radius: 6px;
    background: var(--color-border);
    filter: blur(4px);
    user-select: none;
    justify-self: end;
    width: 48px;
}

/* --- Fade + lock card ------------------------------------- */
.tl-locked-overlay {
    position: relative;
    margin-top: -120px;
    padding-top: 60px;
    padding-bottom: var(--space-4);
    background: linear-gradient(to bottom, transparent 0%, var(--surface-raised) 38%);
    text-align: center;
}
.tl-locked-card {
    background: var(--surface-raised);
    border: 1px solid var(--color-border);
    border-top: 3px solid var(--color-primary);
    border-radius: var(--radius-xl);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10);
    padding: var(--space-10) var(--space-8);
    max-width: 480px;
    margin-inline: auto;
}
.tl-locked-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--gradient-eon);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-5);
}
.tl-locked-card__title {
    font-size: var(--text-xl);
    font-weight: 900;
    margin-bottom: var(--space-3);
}
.tl-locked-card__text {
    color: var(--color-text-muted);
    max-width: 36ch;
    margin-inline: auto;
    margin-bottom: var(--space-6);
}

/* --- Notify / Social CTA ---------------------------------- */
.tl-notify {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-8);
    align-items: center;
    max-width: 900px;
    margin-inline: auto;
}
@media (max-width: 767px) {
    .tl-notify {
        grid-template-columns: 1fr;
        text-align: center;
    }
}
.tl-notify__title {
    font-size: var(--section-h2);
    font-weight: 900;
    margin-bottom: var(--space-3);
}
.tl-notify__lead { color: var(--color-text-muted); }
.tl-notify__actions {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}
@media (max-width: 767px) {
    .tl-notify__actions { justify-content: center; }
}
.tl-social-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    white-space: nowrap;
}

/* ============================================================
   COUNTER / IMPACT SECTION
   ============================================================ */
.counter-section {
    padding-block: clamp(4rem, 10vw, 7rem);
    text-align: center;
    background-color: var(--color-primary);
    color: var(--color-text-on-primary);
}

.counter-section__kicker {
    display: block;
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: var(--space-10);
}

.counter-main { margin-bottom: var(--space-12); }

.counter-main__num {
    display: block;
    font-family: var(--font-heading);
    font-size: clamp(5rem, 16vw, 11rem);
    font-weight: 900;
    line-height: 1;
    color: #fff;
    letter-spacing: -0.025em;
}

.counter-main__label {
    font-size: clamp(0.95rem, 2vw, 1.125rem);
    color: rgba(255, 255, 255, 0.82);
    max-width: 44ch;
    margin: var(--space-6) auto 0;
    line-height: var(--leading-loose);
}

.counter-sub-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    border-top: 1px solid rgba(255, 255, 255, 0.22);
    padding-top: var(--space-10);
}

.counter-sub {
    text-align: center;
    padding: 0 clamp(var(--space-6), 4vw, var(--space-12));
}

.counter-sub__sep {
    width: 1px;
    height: 36px;
    background: rgba(255, 255, 255, 0.25);
    flex-shrink: 0;
}

.counter-sub__num {
    display: block;
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 900;
    line-height: 1;
    color: #fff;
    margin-bottom: var(--space-1);
}

.counter-sub__label {
    display: block;
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.55);
}

@media (max-width: 640px) {
    .counter-sub { padding: var(--space-5) var(--space-6); }
    .counter-sub__sep { display: none; }
}

/* ============================================================
   ERGEBNISSE PAGE – er-* Klassen
   ============================================================ */

/* Stats Strip */
.er-stats-section { padding-block: var(--space-12); }
.er-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
    text-align: center;
}
@media (max-width: 767px) { .er-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .er-stats { grid-template-columns: 1fr; gap: var(--space-5); } }

.er-stat__num {
    display: block;
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    font-weight: 900;
    color: var(--color-white);
    line-height: 1;
    margin-bottom: var(--space-2);
}
.er-stat__label {
    display: block;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
}

/* Locked preview wrapper */
.er-locked-wrap { max-width: 780px; margin-inline: auto; }

.er-locked-header { text-align: center; margin-bottom: var(--space-10); }
.er-locked-header__title { font-size: var(--section-h2); font-weight: 900; margin-bottom: var(--space-4); }
.er-locked-header__lead { color: var(--color-text-muted); max-width: 54ch; margin-inline: auto; }

/* Table head */
.er-list-head {
    display: grid;
    grid-template-columns: 52px 1fr 64px 100px;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 2px solid var(--color-border);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-text-muted);
}
.er-list-head__pos  { text-align: center; }
.er-list-head__wave { text-align: center; }
.er-list-head__time { text-align: right; }

/* Results rows */
.er-list-preview {
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-border);
}
.er-list-row {
    display: grid;
    grid-template-columns: 52px 1fr 64px 100px;
    gap: var(--space-3);
    align-items: center;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
    background: var(--surface-raised);
}
.er-list-row:last-child  { border-bottom: none; }
.er-list-row:nth-child(even) { background: var(--color-surface); }

/* Rank badge */
.er-list-rank {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-surface);
    border: 2px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    flex-shrink: 0;
}
.er-list-rank--gold   { background: #FFF3CD; border-color: #D4A017; color: #7A5C00; }
.er-list-rank--silver { background: #F0F0F0; border-color: #A0A0A0; color: #555; }
.er-list-rank--bronze { background: #FBE9D6; border-color: #C07830; color: #7A4010; }

/* Two-line runner info */
.er-list-row__info {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}
.er-blur-company {
    height: 10px !important;
    opacity: 0.6;
}

/* Time blur */
.er-blur-time {
    width: 84px;
    height: 13px;
    border-radius: 6px;
    background: var(--color-border);
    filter: blur(4px);
    user-select: none;
    justify-self: end;
}

/* Fade + lock card */
.er-locked-overlay {
    position: relative;
    margin-top: -120px;
    padding-top: 60px;
    padding-bottom: var(--space-4);
    background: linear-gradient(to bottom, transparent 0%, var(--surface-raised) 38%);
    text-align: center;
}
.er-locked-card {
    background: var(--surface-raised);
    border: 1px solid var(--color-border);
    border-top: 3px solid var(--color-primary);
    border-radius: var(--radius-xl);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10);
    padding: var(--space-10) var(--space-8);
    max-width: 480px;
    margin-inline: auto;
}
.er-locked-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--gradient-eon);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-5);
}
.er-locked-card__title { font-size: var(--text-xl); font-weight: 900; margin-bottom: var(--space-3); }
.er-locked-card__text {
    color: var(--color-text-muted);
    max-width: 36ch;
    margin-inline: auto;
    margin-bottom: var(--space-6);
}

/* History CTA */
.er-history {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-8);
    align-items: center;
    max-width: 900px;
    margin-inline: auto;
}
@media (max-width: 767px) {
    .er-history { grid-template-columns: 1fr; text-align: center; }
    .er-history__actions { display: flex; justify-content: center; gap: var(--space-3); flex-wrap: wrap; }
}
.er-history__title { font-size: var(--section-h2); font-weight: 900; margin-bottom: var(--space-3); }
.er-history__lead  { color: var(--color-text-muted); }
.er-history__actions { display: flex; flex-direction: column; gap: var(--space-3); align-items: stretch; }

/* ============================================================
   ANWOHNER-INFOS
   ============================================================ */

/* Quick-Facts Strip */
.anw-facts-section { padding-block: var(--space-10); }
.anw-facts {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
}
.anw-fact {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-inline: clamp(var(--space-6), 4vw, var(--space-12));
    padding-block: var(--space-4);
}
.anw-fact__value {
    font-family: var(--font-heading);
    font-size: clamp(1.375rem, 2.5vw, 1.875rem);
    font-weight: 900;
    color: #fff;
    line-height: 1.15;
    margin-bottom: var(--space-1);
}
.anw-fact__label {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
}
.anw-fact__sep {
    width: 1px;
    height: 48px;
    background: rgba(255, 255, 255, 0.20);
    flex-shrink: 0;
}
@media (max-width: 700px) {
    .anw-facts { gap: var(--space-2); }
    .anw-fact__sep { display: none; }
    .anw-fact { padding-inline: var(--space-4); flex: 1 1 calc(50% - var(--space-4)); }
}

/* Section Heading */
.anw-head {
    max-width: 68ch;
    margin-bottom: var(--space-12);
}
.anw-head__title {
    font-size: var(--section-h2-xl);
    font-weight: 900;
    margin-bottom: var(--space-4);
    line-height: 1.1;
}
.anw-head__lead {
    font-size: 1.0625rem;
    color: var(--color-text-muted);
    line-height: 1.65;
    max-width: 60ch;
}

/* Timeline */
.anw-timeline {
    display: flex;
    flex-direction: column;
    border-left: 2px solid var(--color-border);
    margin-left: var(--space-4);
    padding-left: 0;
}
.anw-timeline-item {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: var(--space-8);
    padding-bottom: var(--space-10);
    position: relative;
}
.anw-timeline-item::before {
    content: '';
    position: absolute;
    left: -7px;
    top: 6px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--color-primary);
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px var(--color-primary);
}
.anw-timeline-item--end::before { background: #2D7D2D; box-shadow: 0 0 0 2px #2D7D2D; }
.anw-timeline-item--end { padding-bottom: 0; }

.anw-timeline-item__time {
    padding-left: var(--space-6);
    padding-top: 2px;
}
.anw-time-badge {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: .8125rem;
    font-weight: 800;
    letter-spacing: .02em;
    padding: .35em .75em;
    border-radius: var(--radius-md);
    white-space: nowrap;
    line-height: 1.3;
}
.anw-time-badge--warn { background: #FFF3CD; color: #7A5400; }
.anw-time-badge--red  { background: var(--color-primary); color: #fff; }
.anw-time-badge--ok   { background: var(--surface-success); color: var(--color-success); }

.anw-timeline-item__content { padding-bottom: 0; }
.anw-timeline-item__title {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: 800;
    margin-bottom: var(--space-2);
    color: var(--color-text);
}
.anw-timeline-item__text {
    font-size: .9375rem;
    color: var(--color-text-muted);
    line-height: 1.6;
    margin-bottom: var(--space-4);
}
.anw-timeline-item__text:last-child { margin-bottom: 0; }

.anw-street-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.anw-street-tag {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 700;
    padding: .25em .75em;
    color: var(--color-text);
}

@media (max-width: 700px) {
    .anw-timeline { margin-left: var(--space-2); }
    .anw-timeline-item { grid-template-columns: 1fr; gap: var(--space-3); }
    .anw-timeline-item__time { padding-left: var(--space-6); }
    .anw-timeline-item { padding-bottom: var(--space-8); }
}

/* Map Section */
.anw-map-section {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: clamp(var(--space-8), 5vw, var(--space-14));
    align-items: start;
}
@media (max-width: 900px) {
    .anw-map-section { grid-template-columns: 1fr; }
}
.anw-map-intro__title {
    font-size: var(--section-h2);
    font-weight: 900;
    margin-bottom: var(--space-4);
    line-height: 1.15;
}
.anw-map-intro__text {
    font-size: .9375rem;
    color: var(--color-text-muted);
    line-height: 1.65;
    margin-bottom: var(--space-6);
}
.anw-map-frame {
    border-radius: var(--radius-xl);
    overflow: hidden;
    border: 1px solid var(--color-border);
    box-shadow: 0 4px 24px rgba(0,0,0,0.07);
}
.anw-map-frame iframe {
    display: block;
    width: 100%;
    height: 380px;
    border: none;
}
@media (max-width: 900px) {
    .anw-map-frame iframe { height: 280px; }
}

/* Contact Section */
.anw-contact-head {
    margin-bottom: var(--space-10);
}
.anw-contact-head__title {
    font-size: var(--section-h2);
    font-weight: 900;
    margin-top: var(--space-2);
}
.anw-contact-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
    margin-bottom: var(--space-10);
}
@media (max-width: 800px) {
    .anw-contact-grid { grid-template-columns: 1fr; }
}
.anw-contact-card {
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border);
    border-top: 3px solid var(--color-primary);
    padding: var(--space-6) var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.anw-contact-card__icon {
    width: 44px;
    height: 44px;
    background: var(--color-primary);
    color: #fff;
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-3);
    flex-shrink: 0;
}
.anw-contact-card__label {
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: var(--space-1);
}
.anw-contact-card__value {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
    text-decoration: none;
    font-style: normal;
    display: block;
}
a.anw-contact-card__value:hover { color: var(--color-primary); }
.anw-contact-card__value--addr { font-family: var(--font-body); font-weight: 400; font-size: .9375rem; color: var(--color-text-muted); }
.anw-contact-card__note {
    font-size: var(--text-sm);
    color: var(--color-text-light);
    margin-top: var(--space-1);
}
.anw-contact-cta {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
}

/* ============================================================
   FIRMENANGEBOTE
   ============================================================ */

.fo-intro {
    text-align: center;
    max-width: 60ch;
    margin-inline: auto;
}
.fo-intro__title {
    font-size: clamp(1.75rem, 3vw, 2.75rem);
    font-weight: 900;
    margin-bottom: var(--space-4);
}
.fo-intro__lead {
    color: var(--color-text-muted);
    font-size: 1.125rem;
    line-height: 1.6;
}

.fo-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(var(--space-8), 5vw, var(--space-14));
    align-items: center;
}
.fo-card--reverse .fo-card__visual { order: -1; }
@media (max-width: 820px) {
    .fo-card,
    .fo-card--reverse { grid-template-columns: 1fr; }
    .fo-card--reverse .fo-card__visual { order: 0; }
    .fo-card__visual { order: -1; }
}

.fo-card__badge {
    display: inline-block;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: var(--space-3);
}
.fo-card__title {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 900;
    margin-bottom: var(--space-4);
}
.fo-card__lead {
    color: var(--color-text-muted);
    font-size: 1.0625rem;
    line-height: 1.65;
    margin-bottom: var(--space-6);
}

.fo-feature-list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-8);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.fo-feature-list li {
    padding-left: var(--space-6);
    position: relative;
    color: var(--color-text-muted);
    line-height: 1.5;
}
.fo-feature-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .55em;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-primary);
}

.fo-card__contact {
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.fo-card__contact-label {
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}
.fo-card__contact strong { font-size: 1.0625rem; }
.fo-card__address {
    font-style: normal;
    font-size: .9375rem;
    color: var(--color-text-muted);
}
.fo-card__contact-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-top: var(--space-3);
}

.fo-contact-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: .9375rem;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
}
.fo-contact-link:hover { text-decoration: underline; }
.fo-contact-link svg { flex-shrink: 0; }

.fo-card__visual img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    border-radius: var(--radius-xl);
}
@media (max-width: 820px) {
    .fo-card__visual img { height: 260px; }
}

/* Bild unter einer FAQ-Antwort (z. B. die Streckenkarte). Bewusst in der Breite begrenzt: es
   steht IM Antworttext, nicht als eigene Sektion. */
.faq-item__figure {
    margin: var(--space-5) 0 var(--space-2);
}
.faq-item__figure button {
    position: relative;
    display: block;
    background: #FFFFFF;
    border: 0;
    cursor: zoom-in;
    border-radius: var(--radius-md);
    padding: clamp(.5rem, 1.5vw, .9rem);
    max-width: 460px;
    width: 100%;
}
.faq-item__zoom {
    position: absolute;
    right: .55rem;
    bottom: .55rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .55);
    color: #FFFFFF;
    opacity: 0;
    transition: opacity var(--transition-fast);
}
.faq-item__figure button:hover .faq-item__zoom,
.faq-item__figure button:focus-visible .faq-item__zoom { opacity: 1; }
.faq-item__figure img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-sm, 4px);
}